Replace fbjs canUseDom with inline module

crathor · necolas · commit 8c365d989215 · 2022-07-08T12:59:11.000-07:00
Close necolas#2336 Ref necolas#2333
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<Object, Object> = 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
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+const canUseDOM: boolean = !!(
+  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ------------ */
 

Original file line number	Diff line number	Diff line change
`@@ -7,9 +7,7 @@`
`7`	`7`	`*`
`8`	`8`	`* @flow`
`9`	`9`	`*/`
`10`		`-`
`11`		`-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';`
`12`		`-const { canUseDOM } = ExecutionEnvironment;`
	`10`	`+import canUseDOM from '../../modules/canUseDom';`
`13`	`11`
`14`	`12`	`export type ColorSchemeName = 'light' \| 'dark';`
`15`	`13`