@samitouri / QOS-React / commits / cff012fc16

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

Peter Ruibal committed Jul 11, 2017 at 18:27 UTC cff012fc16ea6e7f40398410aacc3be20dc39804
7 files changed +168 -60
packages/react-dom/package.json
+1
@@ -29,6 +29,7 @@
29 "server.js",
30 "node-stream.js",
31 "test-utils.js",
32 + "unstable-native-dependencies.js",
33 "cjs/",
34 "umd/"
35 ],
packages/react-dom/unstable-native-dependencies.js new
+7
@@ -0,0 +1,7 @@
1 +'use strict';
2 +
3 +if (process.env.NODE_ENV === 'production') {
4 + module.exports = require('./cjs/react-dom-unstable-native-dependencies.production.min.js');
5 +} else {
6 + module.exports = require('./cjs/react-dom-unstable-native-dependencies.development.js');
7 +}
scripts/rollup/bundles.js
+34
@@ -125,6 +125,40 @@ const bundles = [
125 'src/shared/**/*.js',
126 ],
127 },
128 + /* React DOM internals required for react-native-web (e.g., to shim native events from react-dom) */
129 + {
130 + babelOpts: babelOptsReact,
131 + bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_DEV, FB_PROD],
132 + config: {
133 + destDir: 'build/',
134 + globals: {
135 + react: 'React',
136 + 'react-dom': 'ReactDOM',
137 + },
138 + moduleName: 'ReactDOMUnstableNativeDependencies',
139 + sourceMap: false,
140 + },
141 + entry: 'src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry',
142 + externals: [
143 + 'react-dom',
144 + 'ReactDOM',
145 + 'prop-types',
146 + 'prop-types/checkPropTypes',
147 + ],
148 + fbEntry: 'src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry',
149 + hasteName: 'ReactDOMUnstableNativeDependencies',
150 + isRenderer: false,
151 + label: 'dom-unstable-native-dependencies',
152 + manglePropertiesOnProd: false,
153 + name: 'react-dom/unstable-native-dependencies',
154 + paths: [
155 + 'src/renderers/dom/**/*.js',
156 + 'src/renderers/shared/**/*.js',
157 +
158 + 'src/ReactVersion.js',
159 + 'src/shared/**/*.js',
160 + ],
161 + },
162
163 /******* React DOM Server *******/
164 {
scripts/rollup/results.json
+78 -54
@@ -25,36 +25,36 @@
25 "gzip": 7214
26 },
27 "react-dom.development.js (UMD_DEV)": {
28 - "size": 613141,
29 - "gzip": 140395
28 + "size": 623004,
29 + "gzip": 142505
30 },
31 "react-dom.production.min.js (UMD_PROD)": {
32 - "size": 126584,
33 - "gzip": 39853
32 + "size": 126045,
33 + "gzip": 39908
34 },
35 "react-dom.development.js (NODE_DEV)": {
36 - "size": 570841,
37 - "gzip": 130520
36 + "size": 581665,
37 + "gzip": 132841
38 },
39 "react-dom.production.min.js (NODE_PROD)": {
40 - "size": 122880,
41 - "gzip": 38546
40 + "size": 122410,
41 + "gzip": 38579
42 },
43 "ReactDOMFiber-dev.js (FB_DEV)": {
44 - "size": 570125,
45 - "gzip": 130563
44 + "size": 580949,
45 + "gzip": 132865
46 },
47 "ReactDOMFiber-prod.js (FB_PROD)": {
48 - "size": 428502,
49 - "gzip": 96996
48 + "size": 426819,
49 + "gzip": 96885
50 },
51 "react-dom-test-utils.development.js (NODE_DEV)": {
52 - "size": 53025,
53 - "gzip": 13685
52 + "size": 52996,
53 + "gzip": 13677
54 },
55 "ReactTestUtils-dev.js (FB_DEV)": {
56 - "size": 52904,
57 - "gzip": 13646
56 + "size": 52875,
57 + "gzip": 13637
58 },
59 "ReactDOMServerStack-dev.js (FB_DEV)": {
60 "size": 460810,
@@ -65,20 +65,20 @@
65 "gzip": 81957
66 },
67 "react-dom-server.development.js (UMD_DEV)": {
68 - "size": 308329,
69 - "gzip": 77617
68 + "size": 308414,
69 + "gzip": 77283
70 },
71 "react-dom-server.production.min.js (UMD_PROD)": {
72 - "size": 66111,
73 - "gzip": 22613
72 + "size": 65498,
73 + "gzip": 22267
74 },
75 "react-dom-server.development.js (NODE_DEV)": {
76 - "size": 266194,
77 - "gzip": 67866
76 + "size": 267260,
77 + "gzip": 67829
78 },
79 "react-dom-server.production.min.js (NODE_PROD)": {
80 - "size": 62380,
81 - "gzip": 21260
80 + "size": 61836,
81 + "gzip": 20968
82 },
83 "ReactDOMServerStream-dev.js (FB_DEV)": {
84 "size": 264750,
@@ -89,28 +89,28 @@
89 "gzip": 51047
90 },
91 "react-art.development.js (UMD_DEV)": {
92 - "size": 362062,
93 - "gzip": 80236
92 + "size": 359303,
93 + "gzip": 79940
94 },
95 "react-art.production.min.js (UMD_PROD)": {
96 - "size": 99126,
97 - "gzip": 30132
96 + "size": 97521,
97 + "gzip": 29904
98 },
99 "react-art.development.js (NODE_DEV)": {
100 - "size": 283458,
101 - "gzip": 60201
100 + "size": 280721,
101 + "gzip": 59867
102 },
103 "react-art.production.min.js (NODE_PROD)": {
104 - "size": 60504,
105 - "gzip": 18189
104 + "size": 58905,
105 + "gzip": 17961
106 },
107 "ReactARTFiber-dev.js (FB_DEV)": {
108 - "size": 282891,
109 - "gzip": 60125
108 + "size": 280154,
109 + "gzip": 59786
110 },
111 "ReactARTFiber-prod.js (FB_PROD)": {
112 - "size": 220185,
113 - "gzip": 45704
112 + "size": 215532,
113 + "gzip": 44949
114 },
115 "ReactNativeStack-dev.js (RN_DEV)": {
116 "size": 197039,
@@ -121,20 +121,20 @@
121 "gzip": 25990
122 },
123 "ReactNativeFiber-dev.js (RN_DEV)": {
124 - "size": 301278,
125 - "gzip": 51431
124 + "size": 298654,
125 + "gzip": 51338
126 },
127 "ReactNativeFiber-prod.js (RN_PROD)": {
128 - "size": 221863,
129 - "gzip": 38015
128 + "size": 218380,
129 + "gzip": 37833
130 },
131 "react-test-renderer.development.js (NODE_DEV)": {
132 - "size": 280651,
133 - "gzip": 59110
132 + "size": 277864,
133 + "gzip": 58787
134 },
135 "ReactTestRendererFiber-dev.js (FB_DEV)": {
136 - "size": 280075,
137 - "gzip": 59030
136 + "size": 277288,
137 + "gzip": 58707
138 },
139 "react-test-renderer-shallow.development.js (NODE_DEV)": {
140 "size": 8179,
@@ -145,8 +145,8 @@
145 "gzip": 2237
146 },
147 "react-noop-renderer.development.js (NODE_DEV)": {
148 - "size": 274713,
149 - "gzip": 57491
148 + "size": 272012,
149 + "gzip": 57213
150 },
151 "ReactHTMLString-dev.js (FB_DEV)": {
152 "size": 265654,
@@ -181,20 +181,20 @@
181 "gzip": 50920
182 },
183 "ReactDOMServer-dev.js (FB_DEV)": {
184 - "size": 265645,
185 - "gzip": 67788
184 + "size": 266711,
185 + "gzip": 67754
186 },
187 "ReactDOMServer-prod.js (FB_PROD)": {
188 - "size": 197859,
189 - "gzip": 51191
188 + "size": 196897,
189 + "gzip": 50775
190 },
191 "react-dom-node-stream.development.js (NODE_DEV)": {
192 - "size": 265427,
193 - "gzip": 67670
192 + "size": 268954,
193 + "gzip": 68326
194 },
195 "react-dom-node-stream.production.min.js (NODE_PROD)": {
196 - "size": 62695,
197 - "gzip": 21279
196 + "size": 62773,
197 + "gzip": 21284
198 },
199 "ReactDOMNodeStream-dev.js (FB_DEV)": {
200 "size": 264918,
@@ -203,6 +203,30 @@
203 "ReactDOMNodeStream-prod.js (FB_PROD)": {
204 "size": 197610,
205 "gzip": 50956
206 + },
207 + "react-dom-unstable-native-dependencies.development.js (UMD_DEV)": {
208 + "size": 83733,
209 + "gzip": 20936
210 + },
211 + "react-dom-unstable-native-dependencies.production.min.js (UMD_PROD)": {
212 + "size": 18318,
213 + "gzip": 5971
214 + },
215 + "react-dom-unstable-native-dependencies.development.js (NODE_DEV)": {
216 + "size": 77146,
217 + "gzip": 18982
218 + },
219 + "react-dom-unstable-native-dependencies.production.min.js (NODE_PROD)": {
220 + "size": 16620,
221 + "gzip": 5340
222 + },
223 + "ReactDOMUnstableNativeDependencies-dev.js (FB_DEV)": {
224 + "size": 76860,
225 + "gzip": 18942
226 + },
227 + "ReactDOMUnstableNativeDependencies-prod.js (FB_PROD)": {
228 + "size": 65759,
229 + "gzip": 15615
230 }
231 }
232 }
\ No newline at end of file
src/node_modules/react-dom/unstable-native-dependencies.js new
+9
@@ -0,0 +1,9 @@
1 +/**
2 + * Copyright 2016-present Facebook. All Rights Reserved.
3 + *
4 + * @flow
5 + */
6 +
7 +'use strict';
8 +
9 +module.exports = require('ReactDOMUnstableNativeDependenciesEntry');
src/renderers/dom/shared/ReactDOMUnstableNativeDependenciesEntry.js new
+29
@@ -0,0 +1,29 @@
1 +/**
2 + * Copyright 2013-present, Facebook, Inc.
3 + * All rights reserved.
4 + *
5 + * This source code is licensed under the BSD-style license found in the
6 + * LICENSE file in the root directory of this source tree. An additional grant
7 + * of patent rights can be found in the PATENTS file in the same directory.
8 + *
9 + * @providesModule ReactDOMUnstableNativeDependenciesEntry
10 + */
11 +
12 +const EventPluginUtils = require('EventPluginUtils');
13 +const ResponderEventPlugin = require('ResponderEventPlugin');
14 +const ResponderTouchHistoryStore = require('ResponderTouchHistoryStore');
15 +
16 +const ReactDOMUnstableNativeDependencies = {
17 + injectComponentTree: EventPluginUtils.injection.injectComponentTree,
18 + ResponderEventPlugin,
19 + ResponderTouchHistoryStore,
20 +};
21 +
22 +// Inject react-dom's ComponentTree into this module.
23 +const ReactDOM = require('react-dom');
24 +const {
25 + ReactDOMComponentTree,
26 +} = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
27 +ReactDOMUnstableNativeDependencies.injectComponentTree(ReactDOMComponentTree);
28 +
29 +module.exports = ReactDOMUnstableNativeDependencies;
src/renderers/shared/shared/event/eventPlugins/__tests__/ResponderEventPlugin-test.js
+10 -6
@@ -13,7 +13,6 @@
13
14 var EventPluginHub;
15 var ResponderEventPlugin;
16 -var EventPluginUtils;
16
17 var touch = function(nodeHandle, i) {
18 return {target: nodeHandle, identifier: i};
@@ -383,17 +382,22 @@ describe('ResponderEventPlugin', () => {
382 beforeEach(() => {
383 jest.resetModules();
384
386 - // TODO: can we express this test with only public API?
387 - EventPluginHub = require('EventPluginHub');
388 - EventPluginUtils = require('EventPluginUtils');
389 - ResponderEventPlugin = require('ResponderEventPlugin');
385 + const ReactDOM = require('react-dom');
386 + const ReactDOMUnstableNativeDependencies = require('react-dom/unstable-native-dependencies');
387 + EventPluginHub =
388 + ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
389 + .EventPluginHub;
390 + const injectComponentTree =
391 + ReactDOMUnstableNativeDependencies.injectComponentTree;
392 + ResponderEventPlugin =
393 + ReactDOMUnstableNativeDependencies.ResponderEventPlugin;
394
395 deleteAllListeners(GRANDPARENT_INST);
396 deleteAllListeners(PARENT_INST);
397 deleteAllListeners(CHILD_INST);
398 deleteAllListeners(CHILD_INST2);
399
396 - EventPluginUtils.injection.injectComponentTree({
400 + injectComponentTree({
401 getInstanceFromNode,
402 getNodeFromInstance,
403 });