From cff012fc16ea6e7f40398410aacc3be20dc39804 Mon Sep 17 00:00:00 2001 From: Peter Ruibal Date: Tue, 11 Jul 2017 18:27:26 -0700 Subject: [PATCH] Add react-dom-unstable-native-dependencies (#10138) * Add react-dom-unstable-native-dependencies react-native-web and react-primitives currently access a few internals for shimming DOM events into native ones. Changes in react@16 packaging hide these internals completely. This change adds a submodule to react-dom, unstable-native-dependencies that includes the necessary modules to continue enabling that method of dom-native event injection. * Update ResponderEventPlugin to use "public" interfaces for test In order to get some sort of smoke testing on react-dom-unstable-native-dependencies, update ResponderEventPlugin-test to use the "public" interfaces provided by react-dom and the new react-dom/unstable-native dependencies Also adds the missing references in package.json as well as missing files required for unittests to do imports correctrly Also exports injectComponentTree() which is required for the unittests to re-set the shared component state between runs. * Tweak bundle comment * Bundle content updates from exporting injectComponentTree * Added FB_DEV, FB_PROD to bundle types * Run yarn prettier for -unstable-native-dependencies updates --- packages/react-dom/package.json | 1 + .../react-dom/unstable-native-dependencies.js | 7 + scripts/rollup/bundles.js | 34 +++++ scripts/rollup/results.json | 132 +++++++++++------- .../react-dom/unstable-native-dependencies.js | 9 ++ ...ReactDOMUnstableNativeDependenciesEntry.js | 29 ++++ .../__tests__/ResponderEventPlugin-test.js | 16 ++- 7 files changed, 168 insertions(+), 60 deletions(-) create mode 100644 packages/react-dom/unstable-native-dependencies.js create mode 100644 src/node_modules/react-dom/unstable-native-dependencies.js create mode 100644 src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry.js diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json index b7f864a72c..34fe03bf7d 100644 --- a/packages/react-dom/package.json +++ b/packages/react-dom/package.json @@ -29,6 +29,7 @@ "server.js", "node-stream.js", "test-utils.js", + "unstable-native-dependencies.js", "cjs/", "umd/" ], diff --git a/packages/react-dom/unstable-native-dependencies.js b/packages/react-dom/unstable-native-dependencies.js new file mode 100644 index 0000000000..6a498a3686 --- /dev/null +++ b/packages/react-dom/unstable-native-dependencies.js @@ -0,0 +1,7 @@ +'use strict'; + +if (process.env.NODE_ENV === 'production') { + module.exports = require('./cjs/react-dom-unstable-native-dependencies.production.min.js'); +} else { + module.exports = require('./cjs/react-dom-unstable-native-dependencies.development.js'); +} diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index a5feb88977..580a5571f4 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -125,6 +125,40 @@ const bundles = [ 'src/shared/**/*.js', ], }, + /* React DOM internals required for react-native-web (e.g., to shim native events from react-dom) */ + { + babelOpts: babelOptsReact, + bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_DEV, FB_PROD], + config: { + destDir: 'build/', + globals: { + react: 'React', + 'react-dom': 'ReactDOM', + }, + moduleName: 'ReactDOMUnstableNativeDependencies', + sourceMap: false, + }, + entry: 'src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry', + externals: [ + 'react-dom', + 'ReactDOM', + 'prop-types', + 'prop-types/checkPropTypes', + ], + fbEntry: 'src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry', + hasteName: 'ReactDOMUnstableNativeDependencies', + isRenderer: false, + label: 'dom-unstable-native-dependencies', + manglePropertiesOnProd: false, + name: 'react-dom/unstable-native-dependencies', + paths: [ + 'src/renderers/dom/**/*.js', + 'src/renderers/shared/**/*.js', + + 'src/ReactVersion.js', + 'src/shared/**/*.js', + ], + }, /******* React DOM Server *******/ { diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index 40c2dded5f..0bc6a6e4d1 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -25,36 +25,36 @@ "gzip": 7214 }, "react-dom.development.js (UMD_DEV)": { - "size": 613141, - "gzip": 140395 + "size": 623004, + "gzip": 142505 }, "react-dom.production.min.js (UMD_PROD)": { - "size": 126584, - "gzip": 39853 + "size": 126045, + "gzip": 39908 }, "react-dom.development.js (NODE_DEV)": { - "size": 570841, - "gzip": 130520 + "size": 581665, + "gzip": 132841 }, "react-dom.production.min.js (NODE_PROD)": { - "size": 122880, - "gzip": 38546 + "size": 122410, + "gzip": 38579 }, "ReactDOMFiber-dev.js (FB_DEV)": { - "size": 570125, - "gzip": 130563 + "size": 580949, + "gzip": 132865 }, "ReactDOMFiber-prod.js (FB_PROD)": { - "size": 428502, - "gzip": 96996 + "size": 426819, + "gzip": 96885 }, "react-dom-test-utils.development.js (NODE_DEV)": { - "size": 53025, - "gzip": 13685 + "size": 52996, + "gzip": 13677 }, "ReactTestUtils-dev.js (FB_DEV)": { - "size": 52904, - "gzip": 13646 + "size": 52875, + "gzip": 13637 }, "ReactDOMServerStack-dev.js (FB_DEV)": { "size": 460810, @@ -65,20 +65,20 @@ "gzip": 81957 }, "react-dom-server.development.js (UMD_DEV)": { - "size": 308329, - "gzip": 77617 + "size": 308414, + "gzip": 77283 }, "react-dom-server.production.min.js (UMD_PROD)": { - "size": 66111, - "gzip": 22613 + "size": 65498, + "gzip": 22267 }, "react-dom-server.development.js (NODE_DEV)": { - "size": 266194, - "gzip": 67866 + "size": 267260, + "gzip": 67829 }, "react-dom-server.production.min.js (NODE_PROD)": { - "size": 62380, - "gzip": 21260 + "size": 61836, + "gzip": 20968 }, "ReactDOMServerStream-dev.js (FB_DEV)": { "size": 264750, @@ -89,28 +89,28 @@ "gzip": 51047 }, "react-art.development.js (UMD_DEV)": { - "size": 362062, - "gzip": 80236 + "size": 359303, + "gzip": 79940 }, "react-art.production.min.js (UMD_PROD)": { - "size": 99126, - "gzip": 30132 + "size": 97521, + "gzip": 29904 }, "react-art.development.js (NODE_DEV)": { - "size": 283458, - "gzip": 60201 + "size": 280721, + "gzip": 59867 }, "react-art.production.min.js (NODE_PROD)": { - "size": 60504, - "gzip": 18189 + "size": 58905, + "gzip": 17961 }, "ReactARTFiber-dev.js (FB_DEV)": { - "size": 282891, - "gzip": 60125 + "size": 280154, + "gzip": 59786 }, "ReactARTFiber-prod.js (FB_PROD)": { - "size": 220185, - "gzip": 45704 + "size": 215532, + "gzip": 44949 }, "ReactNativeStack-dev.js (RN_DEV)": { "size": 197039, @@ -121,20 +121,20 @@ "gzip": 25990 }, "ReactNativeFiber-dev.js (RN_DEV)": { - "size": 301278, - "gzip": 51431 + "size": 298654, + "gzip": 51338 }, "ReactNativeFiber-prod.js (RN_PROD)": { - "size": 221863, - "gzip": 38015 + "size": 218380, + "gzip": 37833 }, "react-test-renderer.development.js (NODE_DEV)": { - "size": 280651, - "gzip": 59110 + "size": 277864, + "gzip": 58787 }, "ReactTestRendererFiber-dev.js (FB_DEV)": { - "size": 280075, - "gzip": 59030 + "size": 277288, + "gzip": 58707 }, "react-test-renderer-shallow.development.js (NODE_DEV)": { "size": 8179, @@ -145,8 +145,8 @@ "gzip": 2237 }, "react-noop-renderer.development.js (NODE_DEV)": { - "size": 274713, - "gzip": 57491 + "size": 272012, + "gzip": 57213 }, "ReactHTMLString-dev.js (FB_DEV)": { "size": 265654, @@ -181,20 +181,20 @@ "gzip": 50920 }, "ReactDOMServer-dev.js (FB_DEV)": { - "size": 265645, - "gzip": 67788 + "size": 266711, + "gzip": 67754 }, "ReactDOMServer-prod.js (FB_PROD)": { - "size": 197859, - "gzip": 51191 + "size": 196897, + "gzip": 50775 }, "react-dom-node-stream.development.js (NODE_DEV)": { - "size": 265427, - "gzip": 67670 + "size": 268954, + "gzip": 68326 }, "react-dom-node-stream.production.min.js (NODE_PROD)": { - "size": 62695, - "gzip": 21279 + "size": 62773, + "gzip": 21284 }, "ReactDOMNodeStream-dev.js (FB_DEV)": { "size": 264918, @@ -203,6 +203,30 @@ "ReactDOMNodeStream-prod.js (FB_PROD)": { "size": 197610, "gzip": 50956 + }, + "react-dom-unstable-native-dependencies.development.js (UMD_DEV)": { + "size": 83733, + "gzip": 20936 + }, + "react-dom-unstable-native-dependencies.production.min.js (UMD_PROD)": { + "size": 18318, + "gzip": 5971 + }, + "react-dom-unstable-native-dependencies.development.js (NODE_DEV)": { + "size": 77146, + "gzip": 18982 + }, + "react-dom-unstable-native-dependencies.production.min.js (NODE_PROD)": { + "size": 16620, + "gzip": 5340 + }, + "ReactDOMUnstableNativeDependencies-dev.js (FB_DEV)": { + "size": 76860, + "gzip": 18942 + }, + "ReactDOMUnstableNativeDependencies-prod.js (FB_PROD)": { + "size": 65759, + "gzip": 15615 } } } \ No newline at end of file diff --git a/src/node_modules/react-dom/unstable-native-dependencies.js b/src/node_modules/react-dom/unstable-native-dependencies.js new file mode 100644 index 0000000000..db7d115c88 --- /dev/null +++ b/src/node_modules/react-dom/unstable-native-dependencies.js @@ -0,0 +1,9 @@ +/** + * Copyright 2016-present Facebook. All Rights Reserved. + * + * @flow + */ + +'use strict'; + +module.exports = require('ReactDOMUnstableNativeDependenciesEntry'); diff --git a/src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry.js b/src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry.js new file mode 100644 index 0000000000..a716d81d30 --- /dev/null +++ b/src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry.js @@ -0,0 +1,29 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ReactDOMUnstableNativeDependenciesEntry + */ + +const EventPluginUtils = require('EventPluginUtils'); +const ResponderEventPlugin = require('ResponderEventPlugin'); +const ResponderTouchHistoryStore = require('ResponderTouchHistoryStore'); + +const ReactDOMUnstableNativeDependencies = { + injectComponentTree: EventPluginUtils.injection.injectComponentTree, + ResponderEventPlugin, + ResponderTouchHistoryStore, +}; + +// Inject react-dom's ComponentTree into this module. +const ReactDOM = require('react-dom'); +const { + ReactDOMComponentTree, +} = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; +ReactDOMUnstableNativeDependencies.injectComponentTree(ReactDOMComponentTree); + +module.exports = ReactDOMUnstableNativeDependencies; diff --git a/src/renderers/shared/shared/event/eventPlugins/__tests__/ResponderEventPlugin-test.js b/src/renderers/shared/shared/event/eventPlugins/__tests__/ResponderEventPlugin-test.js index 4a83a8bb35..0810ce7d3a 100644 --- a/src/renderers/shared/shared/event/eventPlugins/__tests__/ResponderEventPlugin-test.js +++ b/src/renderers/shared/shared/event/eventPlugins/__tests__/ResponderEventPlugin-test.js @@ -13,7 +13,6 @@ var EventPluginHub; var ResponderEventPlugin; -var EventPluginUtils; var touch = function(nodeHandle, i) { return {target: nodeHandle, identifier: i}; @@ -383,17 +382,22 @@ describe('ResponderEventPlugin', () => { beforeEach(() => { jest.resetModules(); - // TODO: can we express this test with only public API? - EventPluginHub = require('EventPluginHub'); - EventPluginUtils = require('EventPluginUtils'); - ResponderEventPlugin = require('ResponderEventPlugin'); + const ReactDOM = require('react-dom'); + const ReactDOMUnstableNativeDependencies = require('react-dom/unstable-native-dependencies'); + EventPluginHub = + ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED + .EventPluginHub; + const injectComponentTree = + ReactDOMUnstableNativeDependencies.injectComponentTree; + ResponderEventPlugin = + ReactDOMUnstableNativeDependencies.ResponderEventPlugin; deleteAllListeners(GRANDPARENT_INST); deleteAllListeners(PARENT_INST); deleteAllListeners(CHILD_INST); deleteAllListeners(CHILD_INST2); - EventPluginUtils.injection.injectComponentTree({ + injectComponentTree({ getInstanceFromNode, getNodeFromInstance, });