From 21aba5a72b7c03c56132c7a8171d7a7d38037003 Mon Sep 17 00:00:00 2001 From: Cody Rathor Date: Fri, 8 Jul 2022 11:35:50 -0700 Subject: [PATCH 1/2] fix: replace fbjs canUseDom with inline module --- package-lock.json | 30 ++++++++++++++----- packages/benchmarks/src/app/theme.js | 7 +++-- .../src/exports/AccessibilityInfo/index.js | 4 +-- .../src/exports/AppState/index.js | 3 +- .../src/exports/Appearance/index.js | 4 +-- .../src/exports/DeviceInfo/index.js | 3 +- .../src/exports/Dimensions/index.js | 3 +- .../src/exports/Linking/index.js | 3 +- .../src/exports/Modal/ModalContent.js | 3 +- .../src/exports/Modal/ModalFocusTrap.js | 3 +- .../src/exports/Modal/ModalPortal.js | 3 +- .../src/exports/SafeAreaView/index.js | 3 +- .../compiler/createReactDOMStyle.js | 3 +- .../StyleSheet/dom/createCSSStyleSheet.js | 4 +-- .../src/exports/StyleSheet/dom/index.js | 5 ++-- .../src/exports/StyleSheet/index.js | 3 +- .../src/modules/canUseDom/index.js | 7 +++++ .../src/modules/createEventHandle/index.js | 4 +-- .../src/modules/modality/index.js | 3 +- .../src/modules/requestIdleCallback/index.js | 4 +-- .../src/modules/useElementLayout/index.js | 3 +- .../src/modules/useLayoutEffect/index.js | 3 +- .../useResponderEvents/ResponderSystem.js | 3 +- 23 files changed, 55 insertions(+), 56 deletions(-) create mode 100644 packages/react-native-web/src/modules/canUseDom/index.js diff --git a/package-lock.json b/package-lock.json index 6b3c254451..58c350961b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14922,7 +14922,7 @@ } }, "packages/babel-plugin-react-native-web": { - "version": "0.18.4", + "version": "0.18.6", "license": "MIT", "devDependencies": { "babel-plugin-tester": "^10.1.0" @@ -14949,12 +14949,18 @@ "webpack-cli": "^4.10.0" } }, + "packages/benchmarks/node_modules/babel-plugin-react-native-web": { + "version": "0.18.4", + "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.4.tgz", + "integrity": "sha512-Cw26qR5MYishHGS7gFrQWXZ+OuSNtU3Ea1alo2Se316+8GHcf8cN4ujagupTEv86qgJ8h41rzsYrZ+YDJN82iA==", + "dev": true + }, "packages/dom-event-testing-library": { "version": "0.0.0", "license": "MIT" }, "packages/react-native-web": { - "version": "0.18.4", + "version": "0.18.6", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.6", @@ -14971,7 +14977,7 @@ } }, "packages/react-native-web-docs": { - "version": "0.18.4", + "version": "0.18.6", "devDependencies": { "@11ty/eleventy": "^1.0.1", "@11ty/eleventy-navigation": "^0.3.3", @@ -15035,14 +15041,14 @@ } }, "packages/react-native-web-examples": { - "version": "0.18.4", + "version": "0.18.6", "license": "MIT", "dependencies": { - "babel-plugin-react-native-web": "0.18.4", + "babel-plugin-react-native-web": "0.18.6", "next": "^12.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-native-web": "0.18.4" + "react-native-web": "0.18.6" } }, "packages/react-native-web/node_modules/@babel/runtime": { @@ -18134,6 +18140,14 @@ "webpack": "^5.73.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.10.0" + }, + "dependencies": { + "babel-plugin-react-native-web": { + "version": "0.18.4", + "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.4.tgz", + "integrity": "sha512-Cw26qR5MYishHGS7gFrQWXZ+OuSNtU3Ea1alo2Se316+8GHcf8cN4ujagupTEv86qgJ8h41rzsYrZ+YDJN82iA==", + "dev": true + } } }, "big.js": { @@ -23935,11 +23949,11 @@ "react-native-web-examples": { "version": "file:packages/react-native-web-examples", "requires": { - "babel-plugin-react-native-web": "0.18.4", + "babel-plugin-react-native-web": "0.18.6", "next": "^12.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-native-web": "0.18.4" + "react-native-web": "0.18.6" } }, "read-pkg": { diff --git a/packages/benchmarks/src/app/theme.js b/packages/benchmarks/src/app/theme.js index 4a58563748..dcbd1bce54 100644 --- a/packages/benchmarks/src/app/theme.js +++ b/packages/benchmarks/src/app/theme.js @@ -1,9 +1,12 @@ -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import { Dimensions, Platform } from 'react-native'; const baseFontSize = 14; const baseUnit = 1.3125; -const { canUseDOM } = ExecutionEnvironment; +const canUseDOM = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); const createPlatformLength = (multiplier) => Platform.select({ diff --git a/packages/react-native-web/src/exports/AccessibilityInfo/index.js b/packages/react-native-web/src/exports/AccessibilityInfo/index.js index 53ec8a0db1..7c2f66d253 100644 --- a/packages/react-native-web/src/exports/AccessibilityInfo/index.js +++ b/packages/react-native-web/src/exports/AccessibilityInfo/index.js @@ -6,9 +6,7 @@ * * @flow */ - -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; function isScreenReaderEnabled(): Promise<*> { return new Promise((resolve, reject) => { diff --git a/packages/react-native-web/src/exports/AppState/index.js b/packages/react-native-web/src/exports/AppState/index.js index 1124297248..32f0281eb6 100644 --- a/packages/react-native-web/src/exports/AppState/index.js +++ b/packages/react-native-web/src/exports/AppState/index.js @@ -10,8 +10,7 @@ import invariant from 'fbjs/lib/invariant'; import EventEmitter from '../../vendor/react-native/emitter/_EventEmitter'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; // Android 4.4 browser const isPrefixed = diff --git a/packages/react-native-web/src/exports/Appearance/index.js b/packages/react-native-web/src/exports/Appearance/index.js index 67a8c61c2b..40b0fa6b1b 100644 --- a/packages/react-native-web/src/exports/Appearance/index.js +++ b/packages/react-native-web/src/exports/Appearance/index.js @@ -7,9 +7,7 @@ * * @flow */ - -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; export type ColorSchemeName = 'light' | 'dark'; diff --git a/packages/react-native-web/src/exports/DeviceInfo/index.js b/packages/react-native-web/src/exports/DeviceInfo/index.js index 3f59b0e1ba..d12ea46a2e 100644 --- a/packages/react-native-web/src/exports/DeviceInfo/index.js +++ b/packages/react-native-web/src/exports/DeviceInfo/index.js @@ -10,8 +10,7 @@ import type { DisplayMetrics } from '../Dimensions'; import Dimensions from '../Dimensions'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; const DeviceInfo = { Dimensions: { diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js index 9aa5a2b3c1..aa02a273e3 100644 --- a/packages/react-native-web/src/exports/Dimensions/index.js +++ b/packages/react-native-web/src/exports/Dimensions/index.js @@ -10,8 +10,7 @@ import type { EventSubscription } from '../../vendor/react-native/emitter/EventEmitter'; import invariant from 'fbjs/lib/invariant'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; export type DisplayMetrics = {| fontScale: number, diff --git a/packages/react-native-web/src/exports/Linking/index.js b/packages/react-native-web/src/exports/Linking/index.js index a41eea864f..ab992a30c2 100644 --- a/packages/react-native-web/src/exports/Linking/index.js +++ b/packages/react-native-web/src/exports/Linking/index.js @@ -9,8 +9,7 @@ */ import invariant from 'fbjs/lib/invariant'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; const initialURL = canUseDOM ? window.location.href : ''; diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js index d3386fa48f..e81a194ca4 100644 --- a/packages/react-native-web/src/exports/Modal/ModalContent.js +++ b/packages/react-native-web/src/exports/Modal/ModalContent.js @@ -13,8 +13,7 @@ import type { ViewProps } from '../View'; import * as React from 'react'; import View from '../View'; import StyleSheet from '../StyleSheet'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; export type ModalContentProps = { ...ViewProps, diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js index 9fa56659ec..f293a9c8ab 100644 --- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js +++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js @@ -13,8 +13,7 @@ import View from '../View'; import createElement from '../createElement'; import StyleSheet from '../StyleSheet'; import UIManager from '../UIManager'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; /** * This Component is used to "wrap" the modal we're opening diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js index 5de3350777..29e63a128b 100644 --- a/packages/react-native-web/src/exports/Modal/ModalPortal.js +++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js @@ -10,8 +10,7 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; export type ModalPortalProps = {| children: any diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js index 254a81a423..bcd840523d 100644 --- a/packages/react-native-web/src/exports/SafeAreaView/index.js +++ b/packages/react-native-web/src/exports/SafeAreaView/index.js @@ -13,8 +13,7 @@ import type { ViewProps } from '../View'; import * as React from 'react'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../modules/canUseDom'; const cssFunction: 'constant' | 'env' = (function () { if ( diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js index 9f660d78d9..6ed40a8753 100644 --- a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js @@ -8,8 +8,7 @@ */ import normalizeValueWithProperty from './normalizeValueWithProperty'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../../modules/canUseDom'; type Style = { [key: string]: any }; diff --git a/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js index 33d5672d27..93b961a14d 100644 --- a/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js +++ b/packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js @@ -6,9 +6,7 @@ * * @flow strict-local */ - -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../../../modules/canUseDom'; // $FlowFixMe: HTMLStyleElement is incorrectly typed - https://github.com/facebook/flow/issues/2696 export default function createCSSStyleSheet( diff --git a/packages/react-native-web/src/exports/StyleSheet/dom/index.js b/packages/react-native-web/src/exports/StyleSheet/dom/index.js index d3ff79eb65..c55fd5a382 100644 --- a/packages/react-native-web/src/exports/StyleSheet/dom/index.js +++ b/packages/react-native-web/src/exports/StyleSheet/dom/index.js @@ -8,8 +8,7 @@ */ import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet'; - -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +import canUseDOM from '../../../modules/canUseDom'; import createCSSStyleSheet from './createCSSStyleSheet'; import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet'; @@ -37,7 +36,7 @@ export function createSheet( ): Sheet { let sheet; - if (ExecutionEnvironment.canUseDOM) { + if (canUseDOM) { const rootNode: Node = root != null ? root.getRootNode() : document; // Create the initial style sheet if (sheets.length === 0) { diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js index ba3724008e..693ebf053c 100644 --- a/packages/react-native-web/src/exports/StyleSheet/index.js +++ b/packages/react-native-web/src/exports/StyleSheet/index.js @@ -13,9 +13,8 @@ import { localizeStyle } from 'styleq/transform-localize-style'; import { preprocess } from './preprocess'; import { styleq } from 'styleq'; import { validate } from './validate'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; +import canUseDOM from '../../modules/canUseDom'; -const { canUseDOM } = ExecutionEnvironment; const staticStyleMap: WeakMap = new WeakMap(); const sheet = createSheet(); diff --git a/packages/react-native-web/src/modules/canUseDom/index.js b/packages/react-native-web/src/modules/canUseDom/index.js new file mode 100644 index 0000000000..0a205468e5 --- /dev/null +++ b/packages/react-native-web/src/modules/canUseDom/index.js @@ -0,0 +1,7 @@ +const canUseDOM = !!( + typeof window !== 'undefined' && + window.document && + window.document.createElement +); + +export default canUseDOM; diff --git a/packages/react-native-web/src/modules/createEventHandle/index.js b/packages/react-native-web/src/modules/createEventHandle/index.js index fe45187846..bc2bf524b5 100644 --- a/packages/react-native-web/src/modules/createEventHandle/index.js +++ b/packages/react-native-web/src/modules/createEventHandle/index.js @@ -8,9 +8,7 @@ */ 'use strict'; - -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../canUseDom'; type Listener = (e: any) => void; diff --git a/packages/react-native-web/src/modules/modality/index.js b/packages/react-native-web/src/modules/modality/index.js index 7ae06cd033..a998ff02c5 100644 --- a/packages/react-native-web/src/modules/modality/index.js +++ b/packages/react-native-web/src/modules/modality/index.js @@ -8,8 +8,7 @@ */ import createEventHandle from '../createEventHandle'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../canUseDom'; export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen'; diff --git a/packages/react-native-web/src/modules/requestIdleCallback/index.js b/packages/react-native-web/src/modules/requestIdleCallback/index.js index 12ff095786..9bb536b907 100644 --- a/packages/react-native-web/src/modules/requestIdleCallback/index.js +++ b/packages/react-native-web/src/modules/requestIdleCallback/index.js @@ -6,9 +6,7 @@ * * @flow */ - -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../canUseDom'; const _requestIdleCallback = function (cb: Function, options?: Object) { return setTimeout(() => { diff --git a/packages/react-native-web/src/modules/useElementLayout/index.js b/packages/react-native-web/src/modules/useElementLayout/index.js index bfe0c95584..6099899ca6 100644 --- a/packages/react-native-web/src/modules/useElementLayout/index.js +++ b/packages/react-native-web/src/modules/useElementLayout/index.js @@ -12,8 +12,7 @@ import type { LayoutEvent } from '../../types'; import useLayoutEffect from '../useLayoutEffect'; import UIManager from '../../exports/UIManager'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../canUseDom'; const DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler'; diff --git a/packages/react-native-web/src/modules/useLayoutEffect/index.js b/packages/react-native-web/src/modules/useLayoutEffect/index.js index bf645a6f17..0a34f359bd 100644 --- a/packages/react-native-web/src/modules/useLayoutEffect/index.js +++ b/packages/react-native-web/src/modules/useLayoutEffect/index.js @@ -11,8 +11,7 @@ */ import { useEffect, useLayoutEffect } from 'react'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../canUseDom'; const useLayoutEffectImpl: typeof useLayoutEffect = canUseDOM ? useLayoutEffect diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js index 7b1100cd18..915a1ac6d1 100644 --- a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js +++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js @@ -151,8 +151,7 @@ import { setResponderId } from './utils'; import ResponderTouchHistoryStore from './ResponderTouchHistoryStore'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; -const { canUseDOM } = ExecutionEnvironment; +import canUseDOM from '../canUseDom'; /* ------------ TYPES ------------ */ From 6b8e9379fe567c4e57fa165fc8eab8b250797327 Mon Sep 17 00:00:00 2001 From: Cody Rathor Date: Fri, 8 Jul 2022 11:40:37 -0700 Subject: [PATCH 2/2] chore: undo package-lock --- package-lock.json | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 58c350961b..6b3c254451 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14922,7 +14922,7 @@ } }, "packages/babel-plugin-react-native-web": { - "version": "0.18.6", + "version": "0.18.4", "license": "MIT", "devDependencies": { "babel-plugin-tester": "^10.1.0" @@ -14949,18 +14949,12 @@ "webpack-cli": "^4.10.0" } }, - "packages/benchmarks/node_modules/babel-plugin-react-native-web": { - "version": "0.18.4", - "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.4.tgz", - "integrity": "sha512-Cw26qR5MYishHGS7gFrQWXZ+OuSNtU3Ea1alo2Se316+8GHcf8cN4ujagupTEv86qgJ8h41rzsYrZ+YDJN82iA==", - "dev": true - }, "packages/dom-event-testing-library": { "version": "0.0.0", "license": "MIT" }, "packages/react-native-web": { - "version": "0.18.6", + "version": "0.18.4", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.6", @@ -14977,7 +14971,7 @@ } }, "packages/react-native-web-docs": { - "version": "0.18.6", + "version": "0.18.4", "devDependencies": { "@11ty/eleventy": "^1.0.1", "@11ty/eleventy-navigation": "^0.3.3", @@ -15041,14 +15035,14 @@ } }, "packages/react-native-web-examples": { - "version": "0.18.6", + "version": "0.18.4", "license": "MIT", "dependencies": { - "babel-plugin-react-native-web": "0.18.6", + "babel-plugin-react-native-web": "0.18.4", "next": "^12.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-native-web": "0.18.6" + "react-native-web": "0.18.4" } }, "packages/react-native-web/node_modules/@babel/runtime": { @@ -18140,14 +18134,6 @@ "webpack": "^5.73.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.10.0" - }, - "dependencies": { - "babel-plugin-react-native-web": { - "version": "0.18.4", - "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.18.4.tgz", - "integrity": "sha512-Cw26qR5MYishHGS7gFrQWXZ+OuSNtU3Ea1alo2Se316+8GHcf8cN4ujagupTEv86qgJ8h41rzsYrZ+YDJN82iA==", - "dev": true - } } }, "big.js": { @@ -23949,11 +23935,11 @@ "react-native-web-examples": { "version": "file:packages/react-native-web-examples", "requires": { - "babel-plugin-react-native-web": "0.18.6", + "babel-plugin-react-native-web": "0.18.4", "next": "^12.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-native-web": "0.18.6" + "react-native-web": "0.18.4" } }, "read-pkg": {