Fix canUseDOM imports

Close #2149
2026-05-25 15:42:24 +00:00 · 2022-02-24 12:26:08 -08:00
parent dc9ecfbc84
commit c113e4605c
43 changed files with 167 additions and 58 deletions
@@ -118,7 +118,7 @@
    "no-with": 2,
    "prefer-const": 2,
    "prefer-rest-params": 2,
-    "quotes": [2, "single", "avoid-escape"],
+    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
    "radix": 2,
    "use-isnan": 2,
    "valid-typeof": 2,
@@ -1,11 +1,12 @@
 [version]
-^0.148.0
+0.148.0

 [ignore]
 <PROJECT_ROOT>/.*/__tests__/.*
 <PROJECT_ROOT>/packages/.*/dist/.*
 <PROJECT_ROOT>/packages/docs/.*
 <PROJECT_ROOT>/packages/examples/.*
+.*/node_modules/.*/.*.json
 .*/node_modules/@emotion/css/*
 .*/node_modules/babel-plugin-transform-react-remove-prop-types/*

@@ -232,12 +232,15 @@ export default function createEvent(type, init) {
  if (data != null) {
    Object.keys(data).forEach((key) => {
      const value = data[key];
-      // Ensure the value of 'defaultPrevented' is updated if 'preventDefault' is mocked.
-      // The property is marked as 'configurable' to allow mocking.
+      // Ensure that mocks for 'preventDefault' can be called without interferring with
+      // the native behavior of 'preventDefault' (inc for passive events)
      if (key === 'preventDefault' && typeof value === 'function') {
+        const originalPreventDefault = event.preventDefault.bind(event);
        const preventDefault = function () {
+          // call the original function
+          originalPreventDefault();
+          // call the mock function
          value();
-          Object.defineProperty(this, 'defaultPrevented', { value: true });
        };
        Object.defineProperty(event, key, {
          configurable: true,
@@ -1,5 +1,3 @@
-/* eslint-env jasmine, jest */
-
 /**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
@@ -7,8 +5,6 @@
 * LICENSE file in the root directory of this source tree.
 */

-'use strict';
-
 /**
 * Change environment support for PointerEvent.
 */
@@ -105,7 +105,7 @@ function getPointerType(payload) {
 * - 'targetTouches' contains any of the remaining active pointers for the target.
 */

-export function contextmenu(target, defaultPayload) {
+export function contextmenu(target, defaultPayload = {}) {
  const dispatch = (arg) => target.dispatchEvent(arg);
  const pointerType = getPointerType(defaultPayload);

@@ -32,9 +32,6 @@ const createEventTarget = (node) => ({
  },
  focus(payload) {
    domEventSequences.focus(node, payload);
-    try {
-      node.focus();
-    } catch (e) {}
  },
  keydown(payload) {
    node.dispatchEvent(domEvents.keydown(payload));
@@ -111,7 +108,9 @@ const createEventTarget = (node) => ({
        left: x,
        right: x + width,
        top: y,
-        bottom: y + height
+        bottom: y + height,
+        x,
+        y
      };
    };
  }
@@ -1,5 +1,3 @@
-/* eslint-env jasmine, jest */
-
 /**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
@@ -7,7 +7,8 @@
 * @flow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 function isScreenReaderEnabled(): Promise<*> {
  return new Promise((resolve, reject) => {
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import AppState from '..';

@@ -8,9 +8,10 @@
 * @noflow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import invariant from 'fbjs/lib/invariant';
 import EventEmitter from '../../vendor/react-native/emitter/_EventEmitter';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 // Android 4.4 browser
 const isPrefixed =
@@ -8,7 +8,8 @@
 * @flow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 export type ColorSchemeName = 'light' | 'dark';

@@ -1,4 +1,9 @@
-/* eslint-env jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import CheckBox from '../';
 import React from 'react';
@@ -9,8 +9,9 @@

 import type { DisplayMetrics } from '../Dimensions';

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import Dimensions from '../Dimensions';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 const DeviceInfo = {
  Dimensions: {
@@ -9,8 +9,9 @@
 */

 import type { EventSubscription } from '../../vendor/react-native/emitter/EventEmitter';
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import invariant from 'fbjs/lib/invariant';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 export type DisplayMetrics = {|
  fontScale: number,
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import I18nManager from '..';

@@ -1,4 +1,10 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /* eslint-disable react/jsx-no-bind */

 import { act } from 'react-dom/test-utils';
@@ -8,8 +8,9 @@
 * @flow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import invariant from 'fbjs/lib/invariant';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 const initialURL = canUseDOM ? window.location.href : '';

@@ -9,9 +9,10 @@
 */

 import * as React from 'react';
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import View from '../View';
 import StyleSheet from '../StyleSheet';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 export type ModalContentProps = {|
  active?: ?(boolean | (() => boolean)),
@@ -9,11 +9,12 @@
 */

 import * as React from 'react';
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 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;

 /**
 * This Component is used to "wrap" the modal we're opening
@@ -9,8 +9,9 @@
 */

 import * as React from 'react';
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import ReactDOM from 'react-dom';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 export type ModalPortalProps = {|
  children: any
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import React from 'react';
 import { render } from '@testing-library/react';
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import Platform from '../';

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import React from 'react';
 import Pressable from '../';
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import React from 'react';
 import { render } from '@testing-library/react';
@@ -11,9 +11,10 @@
 import type { ViewProps } from '../View';

 import * as React from 'react';
-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 const cssFunction: 'constant' | 'env' = (function () {
  if (
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import React from 'react';
 import { render } from '@testing-library/react';
@@ -1,4 +1,10 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /* eslint-disable react/jsx-no-bind */

 import React from 'react';
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import React from 'react';
 import TextInput from '..';
@@ -285,6 +290,7 @@ describe('components/TextInput', () => {
      target.focus();
    });
    expect(onFocus).toHaveBeenCalledTimes(1);
+    target.node.focus();
    expect(TextInput.State.currentlyFocusedField()).toBe(target.node);
  });

@@ -509,7 +515,7 @@ describe('components/TextInput', () => {
      const { container } = render(<TextInput onSelectionChange={onSelectionChange} />);
      const input = findInput(container);
      // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
-      input.dispatchEvent(new window.Event('change', { bubbles: true }));
+      input.dispatchEvent(new window.Event('input', { bubbles: true }));
      expect(onSelectionChange).toHaveBeenCalledTimes(1);
    });
  });
@@ -607,9 +613,9 @@ describe('components/TextInput', () => {
      const cursorLocation = { start: 3, end: 3 };
      const { container: defaultContainer } = render(<TextInput defaultValue="12345" />);
      const inputDefaultSelection = findInput(defaultContainer);
-      // default selection is 0
-      expect(inputDefaultSelection.selectionStart).toEqual(0);
-      expect(inputDefaultSelection.selectionEnd).toEqual(0);
+      // default selection is at the end
+      expect(inputDefaultSelection.selectionStart).toEqual(5);
+      expect(inputDefaultSelection.selectionEnd).toEqual(5);

      const { container: customContainer } = render(
        <TextInput defaultValue="12345" selection={cursorLocation} />
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import UIManager from '..';

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import React from 'react';
 import View from '../';
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import createElement from '..';
 import React from 'react';
@@ -1,7 +1,5 @@
-/* eslint-env jasmine, jest */
-
 /**
- * Copyright (c) 2015-present, Facebook, Inc.
+ * Copyright (c) Nicolas Gallagher.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import propsToAccessibilityComponent from '../propsToAccessibilityComponent';

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import propsToAriaRole from '../propsToAriaRole';

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import createDOMProps from '..';

@@ -9,7 +9,8 @@

 'use strict';

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 type Listener = (e: any) => void;

@@ -7,8 +7,9 @@
 * @flow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import createEventHandle from '../createEventHandle';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen';

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import multiplyStyleLengthValue from '..';

@@ -7,7 +7,8 @@
 * @flow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 const _requestIdleCallback = function (cb: Function, options?: Object) {
  return setTimeout(() => {
@@ -10,9 +10,10 @@
 import type { ElementRef } from 'react';
 import type { LayoutEvent } from '../../types';

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import useLayoutEffect from '../useLayoutEffect';
 import UIManager from '../../exports/UIManager';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 const DOM_LAYOUT_HANDLER_NAME = '__reactLayoutHandler';

@@ -10,8 +10,9 @@
 * @flow
 */

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import { useEffect, useLayoutEffect } from 'react';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 const useLayoutEffectImpl: typeof useLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

@@ -133,7 +133,6 @@ to return true:wantsResponderID|                            |

 import type { ResponderEvent } from './createResponderEvent';

-import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import createResponderEvent from './createResponderEvent';
 import {
  isCancelish,
@@ -152,6 +151,8 @@ import {
  setResponderId
 } from './utils';
 import ResponderTouchHistoryStore from './ResponderTouchHistoryStore';
+import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+const { canUseDOM } = ExecutionEnvironment;

 /* ------------ TYPES ------------ */

@@ -1,4 +1,9 @@
-/* eslint-env jasmine, jest */
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

 import { act } from 'react-dom/test-utils';
 import React, { createRef } from 'react';