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
2026-01-15 12:15:22 +00:00 · 2017-07-11 18:27:26 -07:00
parent 2e2f503cb8
commit cff012fc16
7 changed files with 168 additions and 60 deletions
--- 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/"
  ],
--- a/packages/react-dom/unstable-native-dependencies.js
+++ 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');
+}
--- 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 *******/
  {
--- 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
    }
  }
 }
--- a/src/node_modules/react-dom/unstable-native-dependencies.js
+++ 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');
--- a/src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry.js
+++ 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;
--- 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,
    });