From c113e4605cce41cc36497d031a250e11fb42220a Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Feb 2022 12:26:08 -0800 Subject: [PATCH 01/17] Fix canUseDOM imports Close #2149 --- .eslintrc | 2 +- .flowconfig | 3 ++- .../dom-event-testing-library/src/createEvent.js | 9 ++++++--- .../src/domEnvironment.js | 4 ---- .../src/domEventSequences.js | 2 +- packages/dom-event-testing-library/src/index.js | 7 +++---- .../dom-event-testing-library/src/testHelpers.js | 2 -- .../src/exports/AccessibilityInfo/index.js | 3 ++- .../src/exports/AppState/__tests__/index-test.js | 7 ++++++- .../src/exports/AppState/index.js | 3 ++- .../src/exports/Appearance/index.js | 3 ++- .../src/exports/CheckBox/__tests__/index-test.js | 7 ++++++- .../src/exports/DeviceInfo/index.js | 3 ++- .../src/exports/Dimensions/index.js | 3 ++- .../exports/I18nManager/__tests__/index-test.js | 7 ++++++- .../src/exports/Image/__tests__/index-test.js | 8 +++++++- .../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/Picker/__tests__/index-test.js | 7 ++++++- .../src/exports/Platform/__tests__/index-test.js | 7 ++++++- .../exports/Pressable/__tests__/index-test.js | 7 ++++++- .../exports/ProgressBar/__tests__/index-test.js | 7 ++++++- .../src/exports/SafeAreaView/index.js | 3 ++- .../src/exports/Switch/__tests__/index-test.js | 7 ++++++- .../src/exports/Text/__tests__/index-test.js | 8 +++++++- .../exports/TextInput/__tests__/index-test.js | 16 +++++++++++----- .../exports/UIManager/__tests__/index-test.js | 7 ++++++- .../src/exports/View/__tests__/index-test.js | 7 ++++++- .../createElement/__tests__/index-test.js | 7 ++++++- .../exports/processColor/__tests__/index-test.js | 4 +--- .../propsToAccessibilityComponent-test.js | 7 ++++++- .../__tests__/propsToAriaRole-test.js | 7 ++++++- .../createDOMProps/__tests__/index-test.js | 7 ++++++- .../src/modules/createEventHandle/index.js | 3 ++- .../src/modules/modality/index.js | 3 ++- .../__tests__/index-test.js | 7 ++++++- .../src/modules/requestIdleCallback/index.js | 3 ++- .../src/modules/useElementLayout/index.js | 3 ++- .../src/modules/useLayoutEffect/index.js | 3 ++- .../useResponderEvents/ResponderSystem.js | 3 ++- .../useResponderEvents/__tests__/index-test.js | 7 ++++++- 43 files changed, 167 insertions(+), 58 deletions(-) diff --git a/.eslintrc b/.eslintrc index 53e0250bca..4b8b43b432 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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, diff --git a/.flowconfig b/.flowconfig index f70d341819..407b75d42b 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,11 +1,12 @@ [version] -^0.148.0 +0.148.0 [ignore] /.*/__tests__/.* /packages/.*/dist/.* /packages/docs/.* /packages/examples/.* +.*/node_modules/.*/.*.json .*/node_modules/@emotion/css/* .*/node_modules/babel-plugin-transform-react-remove-prop-types/* diff --git a/packages/dom-event-testing-library/src/createEvent.js b/packages/dom-event-testing-library/src/createEvent.js index b8d90eb411..3d3ce3828f 100644 --- a/packages/dom-event-testing-library/src/createEvent.js +++ b/packages/dom-event-testing-library/src/createEvent.js @@ -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, diff --git a/packages/dom-event-testing-library/src/domEnvironment.js b/packages/dom-event-testing-library/src/domEnvironment.js index 8771cbd155..2a9bca8bc4 100644 --- a/packages/dom-event-testing-library/src/domEnvironment.js +++ b/packages/dom-event-testing-library/src/domEnvironment.js @@ -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. */ diff --git a/packages/dom-event-testing-library/src/domEventSequences.js b/packages/dom-event-testing-library/src/domEventSequences.js index fc8e910e78..e92b7d4815 100644 --- a/packages/dom-event-testing-library/src/domEventSequences.js +++ b/packages/dom-event-testing-library/src/domEventSequences.js @@ -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); diff --git a/packages/dom-event-testing-library/src/index.js b/packages/dom-event-testing-library/src/index.js index 5681c89849..230c6a15b2 100644 --- a/packages/dom-event-testing-library/src/index.js +++ b/packages/dom-event-testing-library/src/index.js @@ -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 }; }; } diff --git a/packages/dom-event-testing-library/src/testHelpers.js b/packages/dom-event-testing-library/src/testHelpers.js index 519e9811cb..19d2c9ecf6 100644 --- a/packages/dom-event-testing-library/src/testHelpers.js +++ b/packages/dom-event-testing-library/src/testHelpers.js @@ -1,5 +1,3 @@ -/* eslint-env jasmine, jest */ - /** * Copyright (c) Facebook, Inc. and its affiliates. * diff --git a/packages/react-native-web/src/exports/AccessibilityInfo/index.js b/packages/react-native-web/src/exports/AccessibilityInfo/index.js index 4ad14bbc68..ad0417b80d 100644 --- a/packages/react-native-web/src/exports/AccessibilityInfo/index.js +++ b/packages/react-native-web/src/exports/AccessibilityInfo/index.js @@ -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) => { diff --git a/packages/react-native-web/src/exports/AppState/__tests__/index-test.js b/packages/react-native-web/src/exports/AppState/__tests__/index-test.js index 1dd0218eb0..681cef9d8b 100644 --- a/packages/react-native-web/src/exports/AppState/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/AppState/__tests__/index-test.js @@ -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 '..'; diff --git a/packages/react-native-web/src/exports/AppState/index.js b/packages/react-native-web/src/exports/AppState/index.js index 36b8a70a76..5283c6e64d 100644 --- a/packages/react-native-web/src/exports/AppState/index.js +++ b/packages/react-native-web/src/exports/AppState/index.js @@ -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 = diff --git a/packages/react-native-web/src/exports/Appearance/index.js b/packages/react-native-web/src/exports/Appearance/index.js index 78787f7ff9..4372002274 100644 --- a/packages/react-native-web/src/exports/Appearance/index.js +++ b/packages/react-native-web/src/exports/Appearance/index.js @@ -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'; diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js index ecee57950a..3d7e82a20d 100644 --- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/DeviceInfo/index.js b/packages/react-native-web/src/exports/DeviceInfo/index.js index 7a832e8fba..3f59b0e1ba 100644 --- a/packages/react-native-web/src/exports/DeviceInfo/index.js +++ b/packages/react-native-web/src/exports/DeviceInfo/index.js @@ -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: { diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js index 6629d1803d..7d9ded32fe 100644 --- a/packages/react-native-web/src/exports/Dimensions/index.js +++ b/packages/react-native-web/src/exports/Dimensions/index.js @@ -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, diff --git a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js index 8873e8f11e..09a1b0630c 100644 --- a/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js @@ -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 '..'; diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js index a08bad5659..45196b864c 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/Linking/index.js b/packages/react-native-web/src/exports/Linking/index.js index 4cd1b254e8..7152a64526 100644 --- a/packages/react-native-web/src/exports/Linking/index.js +++ b/packages/react-native-web/src/exports/Linking/index.js @@ -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 : ''; diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js index ee11e7af8f..6cdfcc9a62 100644 --- a/packages/react-native-web/src/exports/Modal/ModalContent.js +++ b/packages/react-native-web/src/exports/Modal/ModalContent.js @@ -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)), diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js index 5b11636af8..855b685993 100644 --- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js +++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js @@ -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 diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js index 10fc4c2b49..ff0c731411 100644 --- a/packages/react-native-web/src/exports/Modal/ModalPortal.js +++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js @@ -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 diff --git a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js index 44dd6a1be3..c16aba5f6d 100644 --- a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/Platform/__tests__/index-test.js b/packages/react-native-web/src/exports/Platform/__tests__/index-test.js index a2b34dfe30..c316b6cf7e 100644 --- a/packages/react-native-web/src/exports/Platform/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Platform/__tests__/index-test.js @@ -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 '../'; diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js index b9a4a2d8d2..484333f518 100644 --- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js @@ -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 '../'; diff --git a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js index db0d77cd61..8ddc697021 100644 --- a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/SafeAreaView/index.js b/packages/react-native-web/src/exports/SafeAreaView/index.js index 3f51a637fd..cef933c7e8 100644 --- a/packages/react-native-web/src/exports/SafeAreaView/index.js +++ b/packages/react-native-web/src/exports/SafeAreaView/index.js @@ -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 ( diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js index 92b1731043..c7eea04dda 100644 --- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js index f8b47bd49f..ac7530dc14 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js index 5a79866749..69af09b11c 100644 --- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js @@ -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(); 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(); 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( diff --git a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js index 1feed387d8..6d547607c0 100644 --- a/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/UIManager/__tests__/index-test.js @@ -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 '..'; diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js index 592db3f678..4a129c5121 100644 --- a/packages/react-native-web/src/exports/View/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/View/__tests__/index-test.js @@ -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 '../'; diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js index 6401a43626..95e642196d 100644 --- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js @@ -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'; diff --git a/packages/react-native-web/src/exports/processColor/__tests__/index-test.js b/packages/react-native-web/src/exports/processColor/__tests__/index-test.js index fed99c4950..77fc8baa88 100644 --- a/packages/react-native-web/src/exports/processColor/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/processColor/__tests__/index-test.js @@ -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. diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js index 6ace887f54..22615971c8 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js +++ b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js @@ -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'; diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js index fd69aec81e..5513ca14d1 100644 --- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js +++ b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAriaRole-test.js @@ -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'; diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js index 0a208eda99..a5068e1b31 100644 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js @@ -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 '..'; diff --git a/packages/react-native-web/src/modules/createEventHandle/index.js b/packages/react-native-web/src/modules/createEventHandle/index.js index b64f6d5dfb..3be102027f 100644 --- a/packages/react-native-web/src/modules/createEventHandle/index.js +++ b/packages/react-native-web/src/modules/createEventHandle/index.js @@ -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; diff --git a/packages/react-native-web/src/modules/modality/index.js b/packages/react-native-web/src/modules/modality/index.js index b0b5f7fb23..5b748d2701 100644 --- a/packages/react-native-web/src/modules/modality/index.js +++ b/packages/react-native-web/src/modules/modality/index.js @@ -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'; diff --git a/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js b/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js index a7ae061a5e..e43b5960b2 100644 --- a/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/multiplyStyleLengthValue/__tests__/index-test.js @@ -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 '..'; diff --git a/packages/react-native-web/src/modules/requestIdleCallback/index.js b/packages/react-native-web/src/modules/requestIdleCallback/index.js index 209d209a4d..57aaa66b18 100644 --- a/packages/react-native-web/src/modules/requestIdleCallback/index.js +++ b/packages/react-native-web/src/modules/requestIdleCallback/index.js @@ -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(() => { diff --git a/packages/react-native-web/src/modules/useElementLayout/index.js b/packages/react-native-web/src/modules/useElementLayout/index.js index 529e9d8e1d..bce4997978 100644 --- a/packages/react-native-web/src/modules/useElementLayout/index.js +++ b/packages/react-native-web/src/modules/useElementLayout/index.js @@ -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'; diff --git a/packages/react-native-web/src/modules/useLayoutEffect/index.js b/packages/react-native-web/src/modules/useLayoutEffect/index.js index ba3ee2406b..0de8d9f868 100644 --- a/packages/react-native-web/src/modules/useLayoutEffect/index.js +++ b/packages/react-native-web/src/modules/useLayoutEffect/index.js @@ -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; diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js index b9aaad7036..99e2d0a931 100644 --- a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js +++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js @@ -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 ------------ */ diff --git a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js index 8dc5106d7a..c2a265d7f7 100644 --- a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js @@ -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'; From 9583155523cd46bb656bf11585b1d59aa74d0725 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Feb 2022 12:31:22 -0800 Subject: [PATCH 02/17] Remove unused benchmarks and libraries We only need to test against the baseline of css-modules. Fix #2210 --- packages/benchmarks/src/app/App.js | 6 +-- packages/benchmarks/src/app/theme.js | 3 +- packages/benchmarks/src/cases/TextTree.js | 36 ------------- packages/benchmarks/src/impl.js | 1 - .../src/implementations/aphrodite/Box.js | 49 ------------------ .../src/implementations/aphrodite/Provider.js | 2 - .../src/implementations/aphrodite/View.js | 30 ----------- .../src/implementations/aphrodite/index.js | 9 ---- .../src/implementations/css-modules/Dot.js | 20 ++++++++ .../css-modules/dot-styles.css | 10 ++++ .../src/implementations/css-modules/index.js | 2 + .../css-modules/view-styles.css | 7 ++- .../src/implementations/emotion/Box.js | 48 ------------------ .../src/implementations/emotion/Dot.js | 35 ------------- .../src/implementations/emotion/Provider.js | 2 - .../src/implementations/emotion/View.js | 28 ----------- .../src/implementations/emotion/index.js | 11 ---- .../src/implementations/inline-styles/Dot.js | 19 +++---- .../src/implementations/inline-styles/View.js | 11 ++-- .../src/implementations/react-jss/Box.js | 50 ------------------- .../src/implementations/react-jss/Dot.js | 25 ---------- .../src/implementations/react-jss/Provider.js | 2 - .../src/implementations/react-jss/View.js | 31 ------------ .../src/implementations/react-jss/index.js | 11 ---- .../react-native-web/TextBox.js | 38 -------------- .../implementations/react-native-web/index.js | 2 - .../implementations/styled-components/Box.js | 31 ------------ .../implementations/styled-components/Dot.js | 24 --------- .../styled-components/Provider.js | 2 - .../implementations/styled-components/View.js | 19 ------- .../styled-components/index.js | 11 ---- packages/benchmarks/src/index.js | 8 --- 32 files changed, 55 insertions(+), 528 deletions(-) delete mode 100644 packages/benchmarks/src/cases/TextTree.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/Box.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/Provider.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/View.js delete mode 100644 packages/benchmarks/src/implementations/aphrodite/index.js create mode 100644 packages/benchmarks/src/implementations/css-modules/Dot.js create mode 100644 packages/benchmarks/src/implementations/css-modules/dot-styles.css delete mode 100644 packages/benchmarks/src/implementations/emotion/Box.js delete mode 100644 packages/benchmarks/src/implementations/emotion/Dot.js delete mode 100644 packages/benchmarks/src/implementations/emotion/Provider.js delete mode 100644 packages/benchmarks/src/implementations/emotion/View.js delete mode 100644 packages/benchmarks/src/implementations/emotion/index.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/Box.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/Dot.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/Provider.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/View.js delete mode 100644 packages/benchmarks/src/implementations/react-jss/index.js delete mode 100644 packages/benchmarks/src/implementations/react-native-web/TextBox.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/Box.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/Dot.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/Provider.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/View.js delete mode 100644 packages/benchmarks/src/implementations/styled-components/index.js diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js index 4af159439b..31ad1d7fab 100644 --- a/packages/benchmarks/src/app/App.js +++ b/packages/benchmarks/src/app/App.js @@ -169,7 +169,7 @@ export default class App extends Component { () => ({ status: 'running' }), () => { if (this._shouldHideBenchmark && this._benchWrapperRef) { - this._benchWrapperRef.setNativeProps({ style: { opacity: 0 } }); + this._benchWrapperRef.style.opacity = 0; } this._benchmarkRef.start(); this._scrollToEnd(); @@ -181,9 +181,7 @@ export default class App extends Component { _handleVisuallyHideBenchmark = () => { this._shouldHideBenchmark = !this._shouldHideBenchmark; if (this._benchWrapperRef) { - this._benchWrapperRef.setNativeProps({ - style: { opacity: this._shouldHideBenchmark ? 0 : 1 } - }); + this._benchWrapperRef.style.opacity = this._shouldHideBenchmark ? 0 : 1; } }; diff --git a/packages/benchmarks/src/app/theme.js b/packages/benchmarks/src/app/theme.js index f1b7416a27..68d7058c81 100644 --- a/packages/benchmarks/src/app/theme.js +++ b/packages/benchmarks/src/app/theme.js @@ -1,8 +1,9 @@ -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import { Dimensions, Platform } from 'react-native'; const baseFontSize = 14; const baseUnit = 1.3125; +const { canUseDOM } = ExecutionEnvironment; const createPlatformLength = (multiplier) => Platform.select({ web: `${multiplier}rem`, default: multiplier * baseFontSize }); diff --git a/packages/benchmarks/src/cases/TextTree.js b/packages/benchmarks/src/cases/TextTree.js deleted file mode 100644 index 5324a3bdad..0000000000 --- a/packages/benchmarks/src/cases/TextTree.js +++ /dev/null @@ -1,36 +0,0 @@ -import { BenchmarkType } from '../app/Benchmark'; -import React, { Component } from 'react'; - -class TextTree extends Component { - static displayName = 'TextTree'; - - static benchmarkType = BenchmarkType.MOUNT; - - render() { - const { breadth, components, depth, id, wrap } = this.props; - const { TextBox } = components; - - let result = ( - - {depth === 0 && } - {depth !== 0 && - Array.from({ length: breadth }).map((el, i) => ( - - ))} - - ); - for (let i = 0; i < wrap; i++) { - result = {result}; - } - return result; - } -} - -export default TextTree; diff --git a/packages/benchmarks/src/impl.js b/packages/benchmarks/src/impl.js index b926c25f8f..fcf6226fd7 100644 --- a/packages/benchmarks/src/impl.js +++ b/packages/benchmarks/src/impl.js @@ -10,7 +10,6 @@ type ComponentsType = { Box: Component, Dot: Component, Provider: Component, - TextBox: Component, View: Component }; diff --git a/packages/benchmarks/src/implementations/aphrodite/Box.js b/packages/benchmarks/src/implementations/aphrodite/Box.js deleted file mode 100644 index 994b956d8d..0000000000 --- a/packages/benchmarks/src/implementations/aphrodite/Box.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import View from './View'; -import { StyleSheet } from 'aphrodite'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = StyleSheet.create({ - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}); - -export default Box; diff --git a/packages/benchmarks/src/implementations/aphrodite/Provider.js b/packages/benchmarks/src/implementations/aphrodite/Provider.js deleted file mode 100644 index 864fc43a76..0000000000 --- a/packages/benchmarks/src/implementations/aphrodite/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/aphrodite/View.js b/packages/benchmarks/src/implementations/aphrodite/View.js deleted file mode 100644 index bb2791c250..0000000000 --- a/packages/benchmarks/src/implementations/aphrodite/View.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { css, StyleSheet } from 'aphrodite'; - -class View extends React.Component { - render() { - const { style, ...other } = this.props; - return
; - } -} - -const styles = StyleSheet.create({ - root: { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 - } -}); - -export default View; diff --git a/packages/benchmarks/src/implementations/aphrodite/index.js b/packages/benchmarks/src/implementations/aphrodite/index.js deleted file mode 100644 index 5a9541d887..0000000000 --- a/packages/benchmarks/src/implementations/aphrodite/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import Box from './Box'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/css-modules/Dot.js b/packages/benchmarks/src/implementations/css-modules/Dot.js new file mode 100644 index 0000000000..0300337212 --- /dev/null +++ b/packages/benchmarks/src/implementations/css-modules/Dot.js @@ -0,0 +1,20 @@ +import React from 'react'; +import styles from './dot-styles.css'; + +const Dot = ({ size, x, y, children, color }) => ( +
+ {children} +
+); + +export default Dot; diff --git a/packages/benchmarks/src/implementations/css-modules/dot-styles.css b/packages/benchmarks/src/implementations/css-modules/dot-styles.css new file mode 100644 index 0000000000..6e392563a6 --- /dev/null +++ b/packages/benchmarks/src/implementations/css-modules/dot-styles.css @@ -0,0 +1,10 @@ +.root { + position: absolute; + cursor: pointer; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-top-width: 0; + transform: translate(50%, 50%); +} diff --git a/packages/benchmarks/src/implementations/css-modules/index.js b/packages/benchmarks/src/implementations/css-modules/index.js index 5a9541d887..f32ff155d7 100644 --- a/packages/benchmarks/src/implementations/css-modules/index.js +++ b/packages/benchmarks/src/implementations/css-modules/index.js @@ -1,9 +1,11 @@ import Box from './Box'; +import Dot from './Dot'; import Provider from './Provider'; import View from './View'; export default { Box, + Dot, Provider, View }; diff --git a/packages/benchmarks/src/implementations/css-modules/view-styles.css b/packages/benchmarks/src/implementations/css-modules/view-styles.css index 2dda1491fd..eab671c1eb 100644 --- a/packages/benchmarks/src/implementations/css-modules/view-styles.css +++ b/packages/benchmarks/src/implementations/css-modules/view-styles.css @@ -1,5 +1,6 @@ .initial { align-items: stretch; + background-color: transparent; border-width: 0; border-style: solid; box-sizing: border-box; @@ -7,9 +8,11 @@ flex-basis: auto; flex-direction: column; flex-shrink: 0; + list-style: none; margin: 0; - padding: 0; - position: relative; min-height: 0; min-width: 0; + padding: 0; + position: relative; + z-index: 0; } diff --git a/packages/benchmarks/src/implementations/emotion/Box.js b/packages/benchmarks/src/implementations/emotion/Box.js deleted file mode 100644 index f3af5dd06a..0000000000 --- a/packages/benchmarks/src/implementations/emotion/Box.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import View from './View'; - -const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = { - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}; - -export default Box; diff --git a/packages/benchmarks/src/implementations/emotion/Dot.js b/packages/benchmarks/src/implementations/emotion/Dot.js deleted file mode 100644 index 8f2fbe4a04..0000000000 --- a/packages/benchmarks/src/implementations/emotion/Dot.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { css } from '@emotion/css'; - -const Dot = ({ size, x, y, children, color }) => ( -
- {children} -
-); - -const styles = { - root: { - position: 'absolute', - cursor: 'pointer', - width: 0, - height: 0, - borderColor: 'transparent', - borderStyle: 'solid', - borderTopWidth: 0, - transform: 'translate(50%, 50%)' - } -}; - -export default Dot; diff --git a/packages/benchmarks/src/implementations/emotion/Provider.js b/packages/benchmarks/src/implementations/emotion/Provider.js deleted file mode 100644 index 864fc43a76..0000000000 --- a/packages/benchmarks/src/implementations/emotion/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/emotion/View.js b/packages/benchmarks/src/implementations/emotion/View.js deleted file mode 100644 index 126f5afe3d..0000000000 --- a/packages/benchmarks/src/implementations/emotion/View.js +++ /dev/null @@ -1,28 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -class View extends React.Component { - render() { - const { style, ...other } = this.props; - return
; - } -} - -const viewStyle = { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 -}; - -export default View; diff --git a/packages/benchmarks/src/implementations/emotion/index.js b/packages/benchmarks/src/implementations/emotion/index.js deleted file mode 100644 index f32ff155d7..0000000000 --- a/packages/benchmarks/src/implementations/emotion/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/inline-styles/Dot.js b/packages/benchmarks/src/implementations/inline-styles/Dot.js index 13eec8d821..4a6e4ab776 100644 --- a/packages/benchmarks/src/implementations/inline-styles/Dot.js +++ b/packages/benchmarks/src/implementations/inline-styles/Dot.js @@ -2,17 +2,14 @@ import React from 'react'; const Dot = ({ size, x, y, children, color }) => (
{children}
diff --git a/packages/benchmarks/src/implementations/inline-styles/View.js b/packages/benchmarks/src/implementations/inline-styles/View.js index 96ff0dbac8..2768ed39c9 100644 --- a/packages/benchmarks/src/implementations/inline-styles/View.js +++ b/packages/benchmarks/src/implementations/inline-styles/View.js @@ -17,19 +17,20 @@ class View extends React.Component { const viewStyle = { alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', + backgroundColor: 'transparent', + border: '0 solid black', boxSizing: 'border-box', display: 'flex', flexBasis: 'auto', flexDirection: 'column', flexShrink: 0, + listStyle: 'none', margin: 0, + minHeight: 0, + minWidth: 0, padding: 0, position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 + zIndex: 0 }; export default View; diff --git a/packages/benchmarks/src/implementations/react-jss/Box.js b/packages/benchmarks/src/implementations/react-jss/Box.js deleted file mode 100644 index e48d417f1e..0000000000 --- a/packages/benchmarks/src/implementations/react-jss/Box.js +++ /dev/null @@ -1,50 +0,0 @@ -import classnames from 'classnames'; -import injectSheet from 'react-jss'; -import React from 'react'; -import View from './View'; - -const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => ( - -); - -const styles = { - outer: { - alignSelf: 'flex-start', - padding: 4 - }, - row: { - flexDirection: 'row' - }, - color0: { - backgroundColor: '#14171A' - }, - color1: { - backgroundColor: '#AAB8C2' - }, - color2: { - backgroundColor: '#E6ECF0' - }, - color3: { - backgroundColor: '#FFAD1F' - }, - color4: { - backgroundColor: '#F45D22' - }, - color5: { - backgroundColor: '#E0245E' - }, - fixed: { - width: 6, - height: 6 - } -}; - -export default injectSheet(styles)(Box); diff --git a/packages/benchmarks/src/implementations/react-jss/Dot.js b/packages/benchmarks/src/implementations/react-jss/Dot.js deleted file mode 100644 index 568bf60b14..0000000000 --- a/packages/benchmarks/src/implementations/react-jss/Dot.js +++ /dev/null @@ -1,25 +0,0 @@ -import injectSheet from 'react-jss'; -import React from 'react'; - -const Dot = ({ classes, children }) =>
{children}
; - -const styles = { - root: { - position: 'absolute', - cursor: 'pointer', - width: 0, - height: 0, - borderColor: 'transparent', - borderStyle: 'solid', - borderTopWidth: 0, - transform: 'translate(50%, 50%)', - borderBottomColor: ({ color }) => color, - borderRightWidth: ({ size }) => size / 2, - borderBottomWidth: ({ size }) => size / 2, - borderLeftWidth: ({ size }) => size / 2, - marginLeft: ({ x }) => x, - marginTop: ({ y }) => y - } -}; - -export default injectSheet(styles)(Dot); diff --git a/packages/benchmarks/src/implementations/react-jss/Provider.js b/packages/benchmarks/src/implementations/react-jss/Provider.js deleted file mode 100644 index 864fc43a76..0000000000 --- a/packages/benchmarks/src/implementations/react-jss/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/react-jss/View.js b/packages/benchmarks/src/implementations/react-jss/View.js deleted file mode 100644 index 5a17abc56b..0000000000 --- a/packages/benchmarks/src/implementations/react-jss/View.js +++ /dev/null @@ -1,31 +0,0 @@ -import classnames from 'classnames'; -import injectSheet from 'react-jss'; -import React from 'react'; - -class View extends React.Component { - render() { - const { classes, className, ...other } = this.props; - return
; - } -} - -const styles = { - root: { - alignItems: 'stretch', - borderWidth: 0, - borderStyle: 'solid', - boxSizing: 'border-box', - display: 'flex', - flexBasis: 'auto', - flexDirection: 'column', - flexShrink: 0, - margin: 0, - padding: 0, - position: 'relative', - // fix flexbox bugs - minHeight: 0, - minWidth: 0 - } -}; - -export default injectSheet(styles)(View); diff --git a/packages/benchmarks/src/implementations/react-jss/index.js b/packages/benchmarks/src/implementations/react-jss/index.js deleted file mode 100644 index f32ff155d7..0000000000 --- a/packages/benchmarks/src/implementations/react-jss/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/implementations/react-native-web/TextBox.js b/packages/benchmarks/src/implementations/react-native-web/TextBox.js deleted file mode 100644 index 05d8e6f783..0000000000 --- a/packages/benchmarks/src/implementations/react-native-web/TextBox.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { StyleSheet, Text } from 'react-native'; - -const TextBox = ({ color, outer = false, ...other }) => ( - -); - -const styles = StyleSheet.create({ - root: { - color: 'white' - }, - outer: { - fontStyle: 'italic' - }, - row: { - flexDirection: 'row' - }, - color0: { - color: '#14171A' - }, - color1: { - color: '#AAB8C2' - }, - color2: { - color: '#E6ECF0' - }, - color3: { - color: '#FFAD1F' - }, - color4: { - color: '#F45D22' - }, - color5: { - color: '#E0245E' - } -}); - -export default TextBox; diff --git a/packages/benchmarks/src/implementations/react-native-web/index.js b/packages/benchmarks/src/implementations/react-native-web/index.js index 055113c484..0533daaa05 100644 --- a/packages/benchmarks/src/implementations/react-native-web/index.js +++ b/packages/benchmarks/src/implementations/react-native-web/index.js @@ -1,13 +1,11 @@ import Box from './Box'; import Dot from './Dot'; import Provider from './Provider'; -import TextBox from './TextBox'; import { View } from 'react-native'; export default { Box, Dot, Provider, - TextBox, View }; diff --git a/packages/benchmarks/src/implementations/styled-components/Box.js b/packages/benchmarks/src/implementations/styled-components/Box.js deleted file mode 100644 index 97300fcac0..0000000000 --- a/packages/benchmarks/src/implementations/styled-components/Box.js +++ /dev/null @@ -1,31 +0,0 @@ -import styled from 'styled-components'; -import View from './View'; - -const getColor = (color) => { - switch (color) { - case 0: - return '#14171A'; - case 1: - return '#AAB8C2'; - case 2: - return '#E6ECF0'; - case 3: - return '#FFAD1F'; - case 4: - return '#F45D22'; - case 5: - return '#E0245E'; - default: - return 'transparent'; - } -}; - -const Box = styled(View)` - align-self: flex-start; - flex-direction: ${(props) => (props.layout === 'column' ? 'column' : 'row')}; - padding: ${(props) => (props.outer ? '4px' : '0')}; - ${(props) => props.fixed && 'height:6px;'} ${(props) => - props.fixed && 'width:6px;'} background-color: ${(props) => getColor(props.color)}; -`; - -export default Box; diff --git a/packages/benchmarks/src/implementations/styled-components/Dot.js b/packages/benchmarks/src/implementations/styled-components/Dot.js deleted file mode 100644 index 108a0cc107..0000000000 --- a/packages/benchmarks/src/implementations/styled-components/Dot.js +++ /dev/null @@ -1,24 +0,0 @@ -import styled from 'styled-components'; -import View from './View'; - -const Dot = styled(View).attrs((props) => ({ - style: { - marginLeft: `${props.x}px`, - marginTop: `${props.y}px`, - borderRightWidth: `${props.size / 2}px`, - borderBottomWidth: `${props.size / 2}px`, - borderLeftWidth: `${props.size / 2}px`, - borderBottomColor: `${props.color}` - } -}))` - position: absolute; - cursor: pointer; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-top-width: 0; - transform: translate(50%, 50%); -`; - -export default Dot; diff --git a/packages/benchmarks/src/implementations/styled-components/Provider.js b/packages/benchmarks/src/implementations/styled-components/Provider.js deleted file mode 100644 index 864fc43a76..0000000000 --- a/packages/benchmarks/src/implementations/styled-components/Provider.js +++ /dev/null @@ -1,2 +0,0 @@ -import View from './View'; -export default View; diff --git a/packages/benchmarks/src/implementations/styled-components/View.js b/packages/benchmarks/src/implementations/styled-components/View.js deleted file mode 100644 index f0da52e98b..0000000000 --- a/packages/benchmarks/src/implementations/styled-components/View.js +++ /dev/null @@ -1,19 +0,0 @@ -import styled from 'styled-components'; - -const View = styled.div` - align-items: stretch; - border-width: 0; - border-style: solid; - box-sizing: border-box; - display: flex; - flex-basis: auto; - flex-direction: column; - flex-shrink: 0; - margin: 0; - padding: 0; - position: relative; - min-height: 0; - min-width: 0; -`; - -export default View; diff --git a/packages/benchmarks/src/implementations/styled-components/index.js b/packages/benchmarks/src/implementations/styled-components/index.js deleted file mode 100644 index f32ff155d7..0000000000 --- a/packages/benchmarks/src/implementations/styled-components/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Box from './Box'; -import Dot from './Dot'; -import Provider from './Provider'; -import View from './View'; - -export default { - Box, - Dot, - Provider, - View -}; diff --git a/packages/benchmarks/src/index.js b/packages/benchmarks/src/index.js index 279f247ea3..cd8d37fa9d 100644 --- a/packages/benchmarks/src/index.js +++ b/packages/benchmarks/src/index.js @@ -1,6 +1,5 @@ import App from './app/App'; import impl from './impl'; -import TextTree from './cases/TextTree'; import Tree from './cases/Tree'; import SierpinskiTriangle from './cases/SierpinskiTriangle'; @@ -51,13 +50,6 @@ const tests = { }, Provider: components.Provider, sampleCount: 100 - })), - 'Mount text tree': createTestBlock((components) => ({ - benchmarkType: 'mount', - Component: TextTree, - getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }), - Provider: components.Provider, - sampleCount: 50 })) }; From 174ebb3c5d68bd396943a949d5e0098840505c1e Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Feb 2022 12:53:36 -0800 Subject: [PATCH 03/17] [change] Remove deprecated accessibility APIs Removes 'accessible', 'accessibilityState', and 'accessibilityValue' props. --- .../ActivityIndicator/__tests__/index-test.js | 7 +- .../src/exports/ActivityIndicator/index.js | 5 +- .../src/exports/Modal/ModalContent.js | 7 +- .../src/exports/ProgressBar/index.js | 26 ++- .../src/exports/Text/types.js | 13 -- .../src/exports/View/types.js | 21 +-- .../__snapshots__/index-test.js.snap | 49 ------ .../createDOMProps/__tests__/index-test.js | 49 ------ .../src/modules/createDOMProps/index.js | 47 +----- .../src/modules/forwardedProps/index.js | 6 +- .../src/modules/pick/index.js | 6 +- .../prefixStyles/__tests__/index-test.js | 13 -- .../src/modules/prefixStyles/index.js | 15 -- .../src/modules/prefixStyles/static.js | 152 +++++------------- .../src/modules/usePlatformMethods/index.js | 17 +- 15 files changed, 87 insertions(+), 346 deletions(-) delete mode 100644 packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap delete mode 100644 packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js index f5ae61b588..2e0f5a1555 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js @@ -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 ActivityIndicator from '..'; import React from 'react'; diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js index 79e4d60670..11a74f177c 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/index.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js @@ -14,8 +14,6 @@ import * as React from 'react'; import StyleSheet from '../StyleSheet'; import View from '../View'; -const accessibilityValue = { max: 1, min: 0 }; - const createSvgCircle = (style) => ( ); @@ -59,7 +57,8 @@ const ActivityIndicator: React.AbstractComponent< diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js index 6cdfcc9a62..3266b7e89b 100644 --- a/packages/react-native-web/src/exports/Modal/ModalContent.js +++ b/packages/react-native-web/src/exports/Modal/ModalContent.js @@ -47,7 +47,12 @@ const ModalContent: React.AbstractComponent< }, [transparent]); return ( - + {children} ); diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js index 84ee0db547..394438f1f2 100644 --- a/packages/react-native-web/src/exports/ProgressBar/index.js +++ b/packages/react-native-web/src/exports/ProgressBar/index.js @@ -36,32 +36,24 @@ const ProgressBar: React.AbstractComponent< } = props; const percentageProgress = progress * 100; - - const progressRef = React.useRef(null); - React.useEffect(() => { - const width = indeterminate ? '25%' : `${percentageProgress}%`; - if (progressRef.current != null) { - progressRef.current.setNativeProps({ - style: { width } - }); - } - }, [indeterminate, percentageProgress, progressRef]); + const width = indeterminate ? '25%' : `${percentageProgress}%`; return ( ); diff --git a/packages/react-native-web/src/exports/Text/types.js b/packages/react-native-web/src/exports/Text/types.js index fbdf7b403f..ba401efc42 100644 --- a/packages/react-native-web/src/exports/Text/types.js +++ b/packages/react-native-web/src/exports/Text/types.js @@ -72,19 +72,6 @@ export type TextProps = { | 'listitem' | 'none' | 'text', - accessibilityState?: { - busy?: ?boolean, - checked?: ?boolean | 'mixed', - disabled?: ?boolean, - expanded?: ?boolean, - grabbed?: ?boolean, - hidden?: ?boolean, - invalid?: ?boolean, - pressed?: ?boolean, - readonly?: ?boolean, - required?: ?boolean, - selected?: ?boolean - }, dir?: 'auto' | 'ltr' | 'rtl', numberOfLines?: ?number, onPress?: (e: any) => void, diff --git a/packages/react-native-web/src/exports/View/types.js b/packages/react-native-web/src/exports/View/types.js index 8cdabd9a9e..8e0ef8a1de 100644 --- a/packages/react-native-web/src/exports/View/types.js +++ b/packages/react-native-web/src/exports/View/types.js @@ -113,27 +113,8 @@ export type ViewStyle = { export type ViewProps = { ...AccessibilityProps, - accessibilityState?: { - busy?: ?boolean, - checked?: ?boolean | 'mixed', - disabled?: ?boolean, - expanded?: ?boolean, - grabbed?: ?boolean, - hidden?: ?boolean, - invalid?: ?boolean, - modal?: ?boolean, - pressed?: ?boolean, - readonly?: ?boolean, - required?: ?boolean, - selected?: ?boolean - }, - accessibilityValue?: { - max?: ?number, - min?: ?number, - now?: ?number, - text?: ?string - }, children?: ?any, + dir?: 'ltr' | 'rtl', focusable?: ?boolean, nativeID?: ?string, onBlur?: (e: any) => void, diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap deleted file mode 100644 index bf7fe04225..0000000000 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/__snapshots__/index-test.js.snap +++ /dev/null @@ -1,49 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 1`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 2`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 3`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes base reset style for browser-styled elements 4`] = `"css-reset-4rbku5"`; - -exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = `"css-cursor-18t94o4"`; - -exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"css-cursor-18t94o4"`; - -exports[`modules/createDOMProps prop "accessibilityState" values are "false" 1`] = ` -Object { - "aria-busy": false, - "aria-checked": false, - "aria-expanded": false, - "aria-grabbed": false, - "aria-invalid": false, - "aria-modal": false, - "aria-pressed": false, - "aria-readonly": false, - "aria-required": false, - "aria-selected": false, -} -`; - -exports[`modules/createDOMProps prop "accessibilityState" values are "true" 1`] = ` -Object { - "aria-busy": true, - "aria-checked": true, - "aria-disabled": true, - "aria-expanded": true, - "aria-grabbed": true, - "aria-hidden": true, - "aria-invalid": true, - "aria-modal": true, - "aria-pressed": true, - "aria-readonly": true, - "aria-required": true, - "aria-selected": true, - "disabled": true, - "hidden": true, -} -`; - -exports[`modules/createDOMProps prop "accessibilityState" values are "undefined" 1`] = `Object {}`; diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js index a5068e1b31..9795cc701d 100644 --- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js +++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js @@ -118,43 +118,6 @@ describe('modules/createDOMProps', () => { expect(props.role).toEqual('button'); }); - describe('prop "accessibilityState"', () => { - function createAccessibilityState(value) { - return { - busy: value, - checked: value, - disabled: value, - expanded: value, - grabbed: value, - hidden: value, - invalid: value, - modal: value, - pressed: value, - readonly: value, - required: value, - selected: value - }; - } - - test('values are "undefined"', () => { - const accessibilityState = createAccessibilityState(undefined); - const props = createProps({ accessibilityState }); - expect(props).toMatchSnapshot(); - }); - - test('values are "false"', () => { - const accessibilityState = createAccessibilityState(false); - const props = createProps({ accessibilityState }); - expect(props).toMatchSnapshot(); - }); - - test('values are "true"', () => { - const accessibilityState = createAccessibilityState(true); - const props = createProps({ accessibilityState }); - expect(props).toMatchSnapshot(); - }); - }); - test('prop "className" is preserved', () => { const className = 'external-class-name'; const props = createProps({ className }); @@ -172,16 +135,4 @@ describe('modules/createDOMProps', () => { const props = createProps({ testID }); expect(props['data-testid']).toEqual(testID); }); - - test('includes cursor style for pressable roles', () => { - expect(createDOMProps('span', { accessibilityRole: 'link' }).className).toMatchSnapshot(); - expect(createDOMProps('span', { accessibilityRole: 'button' }).className).toMatchSnapshot(); - }); - - test('includes base reset style for browser-styled elements', () => { - expect(createDOMProps('a').className).toMatchSnapshot(); - expect(createDOMProps('button').className).toMatchSnapshot(); - expect(createDOMProps('li').className).toMatchSnapshot(); - expect(createDOMProps('ul').className).toMatchSnapshot(); - }); }); diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js index 3f7efb13fe..c420067af6 100644 --- a/packages/react-native-web/src/modules/createDOMProps/index.js +++ b/packages/react-native-web/src/modules/createDOMProps/index.js @@ -123,45 +123,15 @@ const createDOMProps = (elementType, props) => { pointerEvents, style: providedStyle, testID, - // Deprecated - accessible, - accessibilityState, - accessibilityValue, + isRTL, // Rest ...domProps } = props; - const disabled = - (accessibilityState != null && accessibilityState.disabled === true) || accessibilityDisabled; + const disabled = accessibilityDisabled; const role = AccessibilityUtil.propsToAriaRole(props); - // DEPRECATED - if (accessibilityState != null) { - for (const prop in accessibilityState) { - const value = accessibilityState[prop]; - if (value != null) { - if (prop === 'disabled' || prop === 'hidden') { - if (value === true) { - domProps[`aria-${prop}`] = value; - // also set prop directly to pick up host elementType behaviour - domProps[prop] = value; - } - } else { - domProps[`aria-${prop}`] = value; - } - } - } - } - if (accessibilityValue != null) { - for (const prop in accessibilityValue) { - const value = accessibilityValue[prop]; - if (value != null) { - domProps[`aria-value${prop}`] = value; - } - } - } - // ACCESSIBILITY if (accessibilityActiveDescendant != null) { domProps['aria-activedescendant'] = accessibilityActiveDescendant; @@ -336,23 +306,22 @@ const createDOMProps = (elementType, props) => { // FOCUS // "focusable" indicates that an element may be a keyboard tab-stop. - const _focusable = focusable != null ? focusable : accessible; - if (_focusable === false) { + if (focusable === false) { domProps.tabIndex = '-1'; } if ( - // These native elements are focusable by default + // These native elements are keyboard focusable by default elementType === 'a' || elementType === 'button' || elementType === 'input' || elementType === 'select' || elementType === 'textarea' ) { - if (_focusable === false || accessibilityDisabled === true) { + if (focusable === false || accessibilityDisabled === true) { domProps.tabIndex = '-1'; } } else if ( - // These roles are made focusable by default + // These roles are made keyboard focusable by default role === 'button' || role === 'checkbox' || role === 'link' || @@ -360,12 +329,12 @@ const createDOMProps = (elementType, props) => { role === 'textbox' || role === 'switch' ) { - if (_focusable !== false) { + if (focusable !== false) { domProps.tabIndex = '0'; } } else { // Everything else must explicitly set the prop - if (_focusable === true) { + if (focusable === true) { domProps.tabIndex = '0'; } } diff --git a/packages/react-native-web/src/modules/forwardedProps/index.js b/packages/react-native-web/src/modules/forwardedProps/index.js index 35782de47f..2fbfa31057 100644 --- a/packages/react-native-web/src/modules/forwardedProps/index.js +++ b/packages/react-native-web/src/modules/forwardedProps/index.js @@ -64,11 +64,7 @@ export const accessibilityProps = { accessibilityValueNow: true, accessibilityValueText: true, dir: true, - focusable: true, - // Deprecated - accessible: true, - accessibilityState: true, - accessibilityValue: true + focusable: true }; export const clickProps = { diff --git a/packages/react-native-web/src/modules/pick/index.js b/packages/react-native-web/src/modules/pick/index.js index 8bdf5c1a50..a53ad43682 100644 --- a/packages/react-native-web/src/modules/pick/index.js +++ b/packages/react-native-web/src/modules/pick/index.js @@ -11,11 +11,7 @@ export default function pick(obj: Object, list: { [string]: boolean }): Object { const nextObj = {}; for (const key in obj) { if (obj.hasOwnProperty(key)) { - if ( - list[key] === true || - // Temporary until ARIA is mapped to explicit props - key.indexOf('aria-') === 0 - ) { + if (list[key] === true) { nextObj[key] = obj[key]; } } diff --git a/packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js b/packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js deleted file mode 100644 index cc269fcc92..0000000000 --- a/packages/react-native-web/src/modules/prefixStyles/__tests__/index-test.js +++ /dev/null @@ -1,13 +0,0 @@ -/* eslint-env jasmine, jest */ - -import { prefixInlineStyles } from '..'; - -describe('modules/prefixStyles', () => { - test('handles array values for inline styles', () => { - const style = { - display: ['-webkit-flex', 'flex'] - }; - - expect(prefixInlineStyles(style)).toEqual({ display: 'flex' }); - }); -}); diff --git a/packages/react-native-web/src/modules/prefixStyles/index.js b/packages/react-native-web/src/modules/prefixStyles/index.js index ba6249e9d5..e184594525 100644 --- a/packages/react-native-web/src/modules/prefixStyles/index.js +++ b/packages/react-native-web/src/modules/prefixStyles/index.js @@ -14,19 +14,4 @@ type StyleModifier = (style: Object) => Object; const prefixAll: StyleModifier = createPrefixer(staticData); -export const prefixInlineStyles: StyleModifier = (style) => { - const prefixedStyles = prefixAll(style); - - // React@15 removed undocumented support for fallback values in - // inline-styles. Revert array values to the standard CSS value - Object.keys(prefixedStyles).forEach((prop) => { - const value = prefixedStyles[prop]; - if (Array.isArray(value)) { - prefixedStyles[prop] = value[value.length - 1]; - } - }); - - return prefixedStyles; -}; - export default prefixAll; diff --git a/packages/react-native-web/src/modules/prefixStyles/static.js b/packages/react-native-web/src/modules/prefixStyles/static.js index c82e436ce3..f532ba9e7f 100644 --- a/packages/react-native-web/src/modules/prefixStyles/static.js +++ b/packages/react-native-web/src/modules/prefixStyles/static.js @@ -2,11 +2,6 @@ import backgroundClip from 'inline-style-prefixer/lib/plugins/backgroundClip'; import crossFade from 'inline-style-prefixer/lib/plugins/crossFade'; import cursor from 'inline-style-prefixer/lib/plugins/cursor'; import filter from 'inline-style-prefixer/lib/plugins/filter'; -import flex from 'inline-style-prefixer/lib/plugins/flex'; -import flexboxIE from 'inline-style-prefixer/lib/plugins/flexboxIE'; -import flexboxOld from 'inline-style-prefixer/lib/plugins/flexboxOld'; -import gradient from 'inline-style-prefixer/lib/plugins/gradient'; -import grid from 'inline-style-prefixer/lib/plugins/grid'; import imageSet from 'inline-style-prefixer/lib/plugins/imageSet'; import logical from 'inline-style-prefixer/lib/plugins/logical'; import position from 'inline-style-prefixer/lib/plugins/position'; @@ -14,7 +9,6 @@ import sizing from 'inline-style-prefixer/lib/plugins/sizing'; import transition from 'inline-style-prefixer/lib/plugins/transition'; const w = ['Webkit']; const m = ['Moz']; -const ms = ['ms']; const wm = ['Webkit', 'Moz']; const wms = ['Webkit', 'ms']; const wmms = ['Webkit', 'Moz', 'ms']; @@ -25,11 +19,6 @@ export default { crossFade, cursor, filter, - flex, - flexboxIE, - flexboxOld, - gradient, - grid, imageSet, logical, position, @@ -37,112 +26,57 @@ export default { transition ], prefixMap: { - animation: w, - animationDelay: w, - animationDirection: w, - animationFillMode: w, - animationDuration: w, - animationIterationCount: w, - animationName: w, - animationPlayState: w, - animationTimingFunction: w, - appearance: wm, - userSelect: wmms, - textEmphasisPosition: w, - textEmphasis: w, - textEmphasisStyle: w, - textEmphasisColor: w, - boxDecorationBreak: w, + appearance: wmms, + userSelect: wm, + textEmphasisPosition: wms, + textEmphasis: wms, + textEmphasisStyle: wms, + textEmphasisColor: wms, + boxDecorationBreak: wms, clipPath: w, - maskImage: w, - maskMode: w, - maskRepeat: w, - maskPosition: w, - maskClip: w, - maskOrigin: w, - maskSize: w, - maskComposite: w, - mask: w, - maskBorderSource: w, - maskBorderMode: w, - maskBorderSlice: w, - maskBorderWidth: w, - maskBorderOutset: w, - maskBorderRepeat: w, - maskBorder: w, - maskType: w, + maskImage: wms, + maskMode: wms, + maskRepeat: wms, + maskPosition: wms, + maskClip: wms, + maskOrigin: wms, + maskSize: wms, + maskComposite: wms, + mask: wms, + maskBorderSource: wms, + maskBorderMode: wms, + maskBorderSlice: wms, + maskBorderWidth: wms, + maskBorderOutset: wms, + maskBorderRepeat: wms, + maskBorder: wms, + maskType: wms, textDecorationStyle: w, textDecorationSkip: w, textDecorationLine: w, textDecorationColor: w, filter: w, - fontFeatureSettings: w, - breakAfter: wmms, - breakBefore: wmms, - breakInside: wmms, - columnCount: wm, - columnFill: wm, - columnGap: wm, - columnRule: wm, - columnRuleColor: wm, - columnRuleStyle: wm, - columnRuleWidth: wm, - columns: wm, - columnSpan: wm, - columnWidth: wm, - writingMode: wms, - flex: wms, - flexBasis: w, - flexDirection: wms, - flexGrow: w, - flexFlow: wms, - flexShrink: w, - flexWrap: wms, - alignContent: w, - alignItems: w, - alignSelf: w, - justifyContent: w, - order: w, - transform: w, - transformOrigin: w, - transformOriginX: w, - transformOriginY: w, - backfaceVisibility: w, - perspective: w, - perspectiveOrigin: w, - transformStyle: w, - transformOriginZ: w, + breakAfter: w, + breakBefore: w, + breakInside: w, + columnCount: w, + columnFill: w, + columnGap: w, + columnRule: w, + columnRuleColor: w, + columnRuleStyle: w, + columnRuleWidth: w, + columns: w, + columnSpan: w, + columnWidth: w, backdropFilter: w, - fontKerning: w, - scrollSnapType: wms, - scrollSnapPointsX: wms, - scrollSnapPointsY: wms, - scrollSnapDestination: wms, - scrollSnapCoordinate: wms, - shapeImageThreshold: w, - shapeImageMargin: w, - shapeImageOutside: w, - hyphens: wmms, - flowInto: wms, - flowFrom: wms, - regionFragment: wms, + hyphens: w, + flowInto: w, + flowFrom: w, + regionFragment: w, textOrientation: w, - textAlignLast: m, tabSize: m, - wrapFlow: ms, - wrapThrough: ms, - wrapMargin: ms, - touchAction: ms, - textSizeAdjust: ['ms', 'Webkit'], - borderImage: w, - borderImageOutset: w, - borderImageRepeat: w, - borderImageSlice: w, - borderImageSource: w, - borderImageWidth: w, - transitionDelay: w, - transitionDuration: w, - transitionProperty: w, - transitionTimingFunction: w + fontKerning: w, + textSizeAdjust: w } }; diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js index c04c781c72..44827a345c 100644 --- a/packages/react-native-web/src/modules/usePlatformMethods/index.js +++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js @@ -15,14 +15,19 @@ import createDOMProps from '../createDOMProps'; import useStable from '../useStable'; import { useRef } from 'react'; +let didWarn = false; const emptyObject = {}; -function setNativeProps(node, nativeProps, classList, pointerEvents, style, previousStyleRef) { +function setNativeProps(node, nativeProps, pointerEvents, style, previousStyleRef) { + if (!didWarn) { + console.warn('setNativeProps is deprecated. Please update props using React state instead.'); + didWarn = true; + } + if (node != null && nativeProps) { const domProps = createDOMProps(null, { pointerEvents, ...nativeProps, - classList: [classList, nativeProps.className], style: [style, nativeProps.style] }); @@ -50,17 +55,15 @@ function setNativeProps(node, nativeProps, classList, pointerEvents, style, prev * API like `ReactNative.measure(hostRef, callback)` is added to React Native. */ export default function usePlatformMethods({ - classList, pointerEvents, style }: { - classList?: Array, style?: GenericStyleProp<*>, pointerEvents?: $PropertyType }): (hostNode: any) => void { const previousStyleRef = useRef(null); const setNativePropsArgsRef = useRef(null); - setNativePropsArgsRef.current = { classList, pointerEvents, style }; + setNativePropsArgsRef.current = { pointerEvents, style }; // Avoid creating a new ref on every render. The props only need to be // available to 'setNativeProps' when it is called. @@ -71,8 +74,8 @@ export default function usePlatformMethods({ UIManager.measureLayout(hostNode, relativeToNode, failure, success); hostNode.measureInWindow = (callback) => UIManager.measureInWindow(hostNode, callback); hostNode.setNativeProps = (nativeProps) => { - const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject; - setNativeProps(hostNode, nativeProps, classList, pointerEvents, style, previousStyleRef); + const { style, pointerEvents } = setNativePropsArgsRef.current || emptyObject; + setNativeProps(hostNode, nativeProps, pointerEvents, style, previousStyleRef); }; } }); From b27c9820dbffe1e5a3ffc87d62b1c9c167dbae8c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 28 Feb 2022 12:19:33 -0800 Subject: [PATCH 04/17] [change] StyleSheet rewrite * Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close #2208 Fix #2138 Fix #2196 Fix #2007 Fix #1517 --- flow-typed/npm/styleq.js | 34 ++ .../src/__tests__/index-test.js | 16 +- .../__snapshots__/index-test.js.snap | 48 +-- .../__snapshots__/index-test.js.snap | 36 -- .../AppRegistry/__tests__/index-test.js | 126 ++++--- .../AppRegistry/__tests__/index-test.node.js | 141 ++++++++ .../exports/AppRegistry/renderApplication.js | 4 +- .../__snapshots__/index-test.js.snap | 22 +- .../__snapshots__/index-test.js.snap | 36 +- .../__snapshots__/index-test.js.snap | 19 - .../Dimensions/__tests__/index-test.js | 25 +- .../I18nManager/__tests__/index-test.js | 30 -- .../src/exports/I18nManager/index.js | 10 +- .../__snapshots__/index-test.js.snap | 108 +++--- .../src/exports/Image/index.js | 30 +- .../__tests__/{index.js => index-test.js} | 11 +- .../src/exports/ImageBackground/index.js | 2 +- .../__tests__/{index.js => index-test.js} | 7 +- .../__snapshots__/index-test.js.snap | 47 ++- .../__snapshots__/index-test.js.snap | 8 +- .../StyleSheet/ReactNativePropRegistry.js | 43 --- .../src/exports/StyleSheet/StyleSheet.js | 65 ---- .../__snapshots__/compile-test.js.snap | 105 ------ .../createOrderedCSSStyleSheet-test.js.snap | 65 ---- .../createReactDOMStyle-test.js.snap | 66 ---- .../createStyleResolver-test.js.snap | 203 ----------- .../__snapshots__/flattenStyle-test.js.snap | 28 -- .../StyleSheet/__tests__/compile-test.js | 68 ---- ...s => compiler-createReactDOMStyle-test.js} | 88 ++++- .../__tests__/compiler-preprocess-test.js | 294 +++++++++++++++ .../StyleSheet/__tests__/compiler-test.js | 170 +++++++++ .../__tests__/createCompileableStyle-test.js | 120 ------- .../__tests__/createStyleResolver-test.js | 109 ------ ...=> dom-createOrderedCSSStyleSheet-test.js} | 111 ++++-- .../exports/StyleSheet/__tests__/dom-test.js | 60 ++++ .../StyleSheet/__tests__/dom-test.node.js | 34 ++ .../StyleSheet/__tests__/flattenStyle-test.js | 39 -- .../StyleSheet/__tests__/i18nStyle-test.js | 253 ------------- .../StyleSheet/__tests__/index-test.js | 334 ++++++++++++++++-- .../normalizeValueWithProperty-test.js | 20 -- .../StyleSheet/__tests__/validate-test.js | 42 +++ .../compiler/createReactDOMStyle.js | 200 +++++++++++ .../src/exports/StyleSheet/compiler/hash.js | 60 ++++ .../StyleSheet/compiler/hyphenateStyleName.js | 27 ++ .../{compile.js => compiler/index.js} | 125 +++---- .../StyleSheet/compiler/normalizeColor.js | 31 ++ .../normalizeValueWithProperty.js | 4 +- .../{i18nStyle.js => compiler/preprocess.js} | 106 ++++-- .../{ => compiler}/resolveShadowValue.js | 2 +- .../StyleSheet/compiler/unitlessNumbers.js | 76 ++++ .../src/exports/StyleSheet/constants.js | 59 ---- .../exports/StyleSheet/createCSSStyleSheet.js | 31 -- .../StyleSheet/createCompileableStyle.js | 70 ---- .../exports/StyleSheet/createReactDOMStyle.js | 190 ---------- .../exports/StyleSheet/createStyleResolver.js | 254 ------------- .../src/exports/StyleSheet/css.js | 26 -- .../StyleSheet/dom/createCSSStyleSheet.js | 42 +++ .../{ => dom}/createOrderedCSSStyleSheet.js | 24 +- .../src/exports/StyleSheet/dom/index.js | 85 +++++ .../src/exports/StyleSheet/flattenStyle.js | 47 --- .../src/exports/StyleSheet/index.js | 177 +++++++++- .../src/exports/StyleSheet/initialRules.js | 20 -- .../src/exports/StyleSheet/modality.js | 275 -------------- .../src/exports/StyleSheet/styleResolver.js | 12 - .../src/exports/StyleSheet/validate.js | 31 +- .../__snapshots__/index-test.js.snap | 12 +- .../__snapshots__/index-test.js.snap | 50 +-- .../src/exports/Text/index.js | 81 +++-- .../src/exports/TextInput/index.js | 28 +- .../__snapshots__/index-test.js.snap | 54 +-- .../src/exports/View/index.js | 31 +- .../src/exports/render/index.js | 17 +- .../src/modules/RTLContext/index.js | 15 + .../src/modules/createDOMProps/index.js | 55 +-- .../src/modules/flattenArray/index.js | 27 -- .../Animated/nodes/AnimatedStyle.js | 4 +- scripts/inline-style-prefixer/create.js | 19 +- 77 files changed, 2560 insertions(+), 2884 deletions(-) create mode 100644 flow-typed/npm/styleq.js delete mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap create mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js delete mode 100644 packages/react-native-web/src/exports/Dimensions/__tests__/__snapshots__/index-test.js.snap rename packages/react-native-web/src/exports/ImageBackground/__tests__/{index.js => index-test.js} (78%) rename packages/react-native-web/src/exports/Modal/__tests__/{index.js => index-test.js} (99%) delete mode 100644 packages/react-native-web/src/exports/StyleSheet/ReactNativePropRegistry.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/StyleSheet.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createOrderedCSSStyleSheet-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createReactDOMStyle-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/createStyleResolver-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/flattenStyle-test.js.snap delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compile-test.js rename packages/react-native-web/src/exports/StyleSheet/__tests__/{createReactDOMStyle-test.js => compiler-createReactDOMStyle-test.js} (64%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-preprocess-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/compiler-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/createCompileableStyle-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js rename packages/react-native-web/src/exports/StyleSheet/__tests__/{createOrderedCSSStyleSheet-test.js => dom-createOrderedCSSStyleSheet-test.js} (50%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/dom-test.node.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/flattenStyle-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/normalizeValueWithProperty-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/__tests__/validate-test.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/hash.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/hyphenateStyleName.js rename packages/react-native-web/src/exports/StyleSheet/{compile.js => compiler/index.js} (73%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/normalizeColor.js rename packages/react-native-web/src/exports/StyleSheet/{ => compiler}/normalizeValueWithProperty.js (87%) rename packages/react-native-web/src/exports/StyleSheet/{i18nStyle.js => compiler/preprocess.js} (57%) rename packages/react-native-web/src/exports/StyleSheet/{ => compiler}/resolveShadowValue.js (94%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/compiler/unitlessNumbers.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/constants.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createCompileableStyle.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createReactDOMStyle.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/css.js create mode 100644 packages/react-native-web/src/exports/StyleSheet/dom/createCSSStyleSheet.js rename packages/react-native-web/src/exports/StyleSheet/{ => dom}/createOrderedCSSStyleSheet.js (90%) create mode 100644 packages/react-native-web/src/exports/StyleSheet/dom/index.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/flattenStyle.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/initialRules.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/modality.js delete mode 100644 packages/react-native-web/src/exports/StyleSheet/styleResolver.js create mode 100644 packages/react-native-web/src/modules/RTLContext/index.js delete mode 100644 packages/react-native-web/src/modules/flattenArray/index.js diff --git a/flow-typed/npm/styleq.js b/flow-typed/npm/styleq.js new file mode 100644 index 0000000000..a77fadf9d7 --- /dev/null +++ b/flow-typed/npm/styleq.js @@ -0,0 +1,34 @@ +type CompiledStyle = { + $$css: boolean, + [key: string]: string, +}; + +type InlineStyle = { + [key: string]: mixed, +}; + +type EitherStyle = CompiledStyle | InlineStyle; + +type StylesArray<+T> = T | $ReadOnlyArray>; +type Styles = StylesArray; +type Style<+T = EitherStyle> = StylesArray; + +type StyleqOptions = { + disableCache?: boolean, + disableMix?: boolean, + transform?: (CompiledStyle) => CompiledStyle, +}; + +type StyleqResult = [string, InlineStyle | null]; +type Styleq = (styles: Styles) => StyleqResult; + +type IStyleq = { + (...styles: $ReadOnlyArray): StyleqResult, + factory: (options?: StyleqOptions) => Styleq, +}; + +declare module "styleq" { + declare module.exports: { + styleq: IStyleq + }; +} diff --git a/packages/dom-event-testing-library/src/__tests__/index-test.js b/packages/dom-event-testing-library/src/__tests__/index-test.js index faa040e702..5851847983 100644 --- a/packages/dom-event-testing-library/src/__tests__/index-test.js +++ b/packages/dom-event-testing-library/src/__tests__/index-test.js @@ -1,5 +1,3 @@ -/* eslint-env jasmine, jest */ - /** * Copyright (c) Facebook, Inc. and its affiliates. * @@ -49,7 +47,7 @@ describe('createEventTarget', () => { const target = createEventTarget(node); expect(target.node).toEqual(node); expect(Object.keys(target)).toMatchInlineSnapshot(` - Array [ + [ "node", "blur", "click", @@ -331,9 +329,7 @@ describe('createEventTarget', () => { }); /** - * Complex event sequences - * - * ...coming soon + * TODO: Complex event sequences */ /** @@ -343,24 +339,28 @@ describe('createEventTarget', () => { test('.setBoundingClientRect()', () => { const target = createEventTarget(node); expect(node.getBoundingClientRect()).toMatchInlineSnapshot(` - Object { + { "bottom": 0, "height": 0, "left": 0, "right": 0, "top": 0, "width": 0, + "x": 0, + "y": 0, } `); target.setBoundingClientRect({ x: 10, y: 20, width: 100, height: 200 }); expect(node.getBoundingClientRect()).toMatchInlineSnapshot(` - Object { + { "bottom": 220, "height": 200, "left": 10, "right": 110, "top": 20, "width": 100, + "x": 10, + "y": 20, } `); }); diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap index 5a4bbcb876..51d701c6ef 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap @@ -5,11 +5,11 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] aria-label="accessibility label" aria-valuemax="1" aria-valuemin="0" - class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci" + class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci" role="progressbar" >
*{pointer-events:auto;} -.r-pointerEvents-12vffkv{pointer-events:none!important;}" -`; - -exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = ` - - - -`; - -exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = ` -"" -`; diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js index 8080940587..bde49cbc77 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js @@ -1,76 +1,16 @@ -/* 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 AppRegistry from '..'; -import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import React from 'react'; -import ReactDOMServer from 'react-dom/server'; -import { render } from '@testing-library/react'; -import StyleSheet from '../../StyleSheet'; -import Text from '../../Text'; -import View from '../../View'; -const canUseDOM = ExecutionEnvironment.canUseDOM; -const NoopComponent = () =>
; +const NoopComponent = () => React.createElement('div'); describe('AppRegistry', () => { - describe('getApplication', () => { - beforeEach(() => { - ExecutionEnvironment.canUseDOM = false; - }); - - afterEach(() => { - ExecutionEnvironment.canUseDOM = canUseDOM; - }); - - test('does not throw when missing appParameters', () => { - AppRegistry.registerComponent('App', () => NoopComponent); - expect(() => AppRegistry.getApplication('App')).not.toThrow(); - }); - - test('returns "element" and "getStyleElement"', () => { - AppRegistry.registerComponent('App', () => NoopComponent); - const { element, getStyleElement } = AppRegistry.getApplication('App', {}); - const styleElement = ReactDOMServer.renderToStaticMarkup(getStyleElement()); - - expect(element).toMatchSnapshot(); - expect(styleElement).toMatchSnapshot(); - }); - - test('"getStyleElement" adds props to " + `); + }); + + test('"getStyleElement" adds props to