@samitouri / QOS-React-2 / commits / 3f73dcee37

Support named exports from client references (#20312)

* Rename "name"->"filepath" field on Webpack module references This field name will get confused with the imported name or the module id. * Switch back to transformSource instead of getSource getSource would be more efficient in the cases where we don't need to read the original file but we'll need to most of the time. Even then, we can't return a JS file if we're trying to support non-JS loader because it'll end up being transformed. Similarly, we'll need to parse the file and we can't parse it before it's transformed. So we need to chain with other loaders that know how. * Add acorn dependency This should be the version used by Webpack since we have a dependency on Webpack anyway. * Parse exported names of ESM modules We need to statically resolve the names that a client component will export so that we can export a module reference for each of the names. For export * from, this gets tricky because we need to also load the source of the next file to parse that. We don't know exactly how the client is built so we guess it's somewhat default. * Handle imported names one level deep in CommonJS using a Proxy We use a proxy to see what property the server access and that will tell us which property we'll want to import on the client. * Add export name to module reference and Webpack map To support named exports each name needs to be encoded as a separate reference. It's possible with module splitting that different exports end up in different chunks. It's also possible that the export is renamed as part of minification. So the map also includes a map from the original to the bundled name. * Special case plain CJS requires and conditional imports using __esModule This models if the server tries to import .default or a plain require. We should replicate the same thing on the client when we load that module reference. * Dedupe acorn-related deps Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>

Sebastian Markbåge committed Nov 30, 2020 at 17:37 UTC 3f73dcee374732a331b7e72c88ff6dd3b7116a42
14 files changed +322 -61
fixtures/flight/loader/index.js
+12 -2
@@ -1,4 +1,8 @@
1 -import {resolve, getSource} from 'react-transport-dom-webpack/node-loader';
1 +import {
2 + resolve,
3 + getSource,
4 + transformSource as reactTransformSource,
5 +} from 'react-transport-dom-webpack/node-loader';
6
7 export {resolve, getSource};
8
@@ -13,7 +17,7 @@ const babelOptions = {
17 ],
18 };
19
16 -export async function transformSource(source, context, defaultTransformSource) {
20 +async function babelTransformSource(source, context, defaultTransformSource) {
21 const {format} = context;
22 if (format === 'module') {
23 const opt = Object.assign({filename: context.url}, babelOptions);
@@ -22,3 +26,9 @@ export async function transformSource(source, context, defaultTransformSource) {
26 }
27 return defaultTransformSource(source, context, defaultTransformSource);
28 }
29 +
30 +export async function transformSource(source, context, defaultTransformSource) {
31 + return reactTransformSource(source, context, (s, c) => {
32 + return babelTransformSource(s, c, defaultTransformSource);
33 + });
34 +}
fixtures/flight/server/handler.server.js
+27 -6
@@ -17,14 +17,35 @@ module.exports = async function(req, res) {
17 pipeToNodeWritable(<App />, res, {
18 // TODO: Read from a map on the disk.
19 [resolve('../src/Counter.client.js')]: {
20 - id: './src/Counter.client.js',
21 - chunks: ['1'],
22 - name: 'default',
20 + Counter: {
21 + id: './src/Counter.client.js',
22 + chunks: ['2'],
23 + name: 'Counter',
24 + },
25 + },
26 + [resolve('../src/Counter2.client.js')]: {
27 + Counter: {
28 + id: './src/Counter2.client.js',
29 + chunks: ['1'],
30 + name: 'Counter',
31 + },
32 },
33 [resolve('../src/ShowMore.client.js')]: {
25 - id: './src/ShowMore.client.js',
26 - chunks: ['2'],
27 - name: 'default',
34 + default: {
35 + id: './src/ShowMore.client.js',
36 + chunks: ['3'],
37 + name: 'default',
38 + },
39 + '': {
40 + id: './src/ShowMore.client.js',
41 + chunks: ['3'],
42 + name: '',
43 + },
44 + '*': {
45 + id: './src/ShowMore.client.js',
46 + chunks: ['3'],
47 + name: '*',
48 + },
49 },
50 });
51 };
fixtures/flight/src/App.server.js
+3 -1
@@ -2,7 +2,8 @@ import * as React from 'react';
2
3 import Container from './Container.js';
4
5 -import Counter from './Counter.client.js';
5 +import {Counter} from './Counter.client.js';
6 +import {Counter as Counter2} from './Counter2.client.js';
7
8 import ShowMore from './ShowMore.client.js';
9
@@ -11,6 +12,7 @@ export default function App() {
12 <Container>
13 <h1>Hello, world</h1>
14 <Counter />
15 + <Counter2 />
16 <ShowMore>
17 <p>Lorem ipsum</p>
18 </ShowMore>
fixtures/flight/src/Counter.client.js
+1 -1
@@ -2,7 +2,7 @@ import * as React from 'react';
2
3 import Container from './Container.js';
4
5 -export default function Counter() {
5 +export function Counter() {
6 const [count, setCount] = React.useState(0);
7 return (
8 <Container>
fixtures/flight/src/Counter2.client.js new
+1
@@ -0,0 +1 @@
1 +export * from './Counter.client.js';
packages/react-transport-dom-webpack/package.json
+1
@@ -50,6 +50,7 @@
50 "webpack": "^4.43.0"
51 },
52 "dependencies": {
53 + "acorn": "^6.2.1",
54 "loose-envify": "^1.1.0",
55 "object-assign": "^4.1.1"
56 },
packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+12 -1
@@ -59,5 +59,16 @@ export function requireModule<T>(moduleData: ModuleReference<T>): T {
59 throw entry;
60 }
61 }
62 - return __webpack_require__(moduleData.id)[moduleData.name];
62 + const moduleExports = __webpack_require__(moduleData.id);
63 + if (moduleData.name === '*') {
64 + // This is a placeholder value that represents that the caller imported this
65 + // as a CommonJS module as is.
66 + return moduleExports;
67 + }
68 + if (moduleData.name === '') {
69 + // This is a placeholder value that represents that the caller accessed the
70 + // default property of this if it was an ESM interop module.
71 + return moduleExports.__esModule ? moduleExports.default : moduleExports;
72 + }
73 + return moduleExports[moduleData.name];
74 }
packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+6 -3
@@ -8,7 +8,9 @@
8 */
9
10 type WebpackMap = {
11 - [filename: string]: ModuleMetaData,
11 + [filepath: string]: {
12 + [name: string]: ModuleMetaData,
13 + },
14 };
15
16 export type BundlerConfig = WebpackMap;
@@ -16,6 +18,7 @@ export type BundlerConfig = WebpackMap;
18 // eslint-disable-next-line no-unused-vars
19 export type ModuleReference<T> = {
20 $$typeof: Symbol,
21 + filepath: string,
22 name: string,
23 };
24
@@ -30,7 +33,7 @@ export type ModuleKey = string;
33 const MODULE_TAG = Symbol.for('react.module.reference');
34
35 export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
33 - return reference.name;
36 + return reference.filepath + '#' + reference.name;
37 }
38
39 export function isModuleReference(reference: Object): boolean {
@@ -41,5 +44,5 @@ export function resolveModuleMetaData<T>(
44 config: BundlerConfig,
45 moduleReference: ModuleReference<T>,
46 ): ModuleMetaData {
44 - return config[moduleReference.name];
47 + return config[moduleReference.filepath][moduleReference.name];
48 }
packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+189 -11
@@ -7,6 +7,8 @@
7 * @flow
8 */
9
10 +import acorn from 'acorn';
11 +
12 type ResolveContext = {
13 conditions: Array<string>,
14 parentURL: string | void,
@@ -16,11 +18,10 @@ type ResolveFunction = (
18 string,
19 ResolveContext,
20 ResolveFunction,
19 -) => Promise<string>;
21 +) => Promise<{url: string}>;
22
23 type GetSourceContext = {
24 format: string,
23 - url: string,
25 };
26
27 type GetSourceFunction = (
@@ -29,15 +30,32 @@ type GetSourceFunction = (
30 GetSourceFunction,
31 ) => Promise<{source: Source}>;
32
33 +type TransformSourceContext = {
34 + format: string,
35 + url: string,
36 +};
37 +
38 +type TransformSourceFunction = (
39 + Source,
40 + TransformSourceContext,
41 + TransformSourceFunction,
42 +) => Promise<{source: Source}>;
43 +
44 type Source = string | ArrayBuffer | Uint8Array;
45
46 let warnedAboutConditionsFlag = false;
47
48 +let stashedGetSource: null | GetSourceFunction = null;
49 +let stashedResolve: null | ResolveFunction = null;
50 +
51 export async function resolve(
52 specifier: string,
53 context: ResolveContext,
54 defaultResolve: ResolveFunction,
40 -): Promise<string> {
55 +): Promise<{url: string}> {
56 + // We stash this in case we end up needing to resolve export * statements later.
57 + stashedResolve = defaultResolve;
58 +
59 if (!context.conditions.includes('react-server')) {
60 context = {
61 ...context,
@@ -71,14 +89,174 @@ export async function getSource(
89 url: string,
90 context: GetSourceContext,
91 defaultGetSource: GetSourceFunction,
92 +) {
93 + // We stash this in case we end up needing to resolve export * statements later.
94 + stashedGetSource = defaultGetSource;
95 + return defaultGetSource(url, context, defaultGetSource);
96 +}
97 +
98 +function addExportNames(names, node) {
99 + switch (node.type) {
100 + case 'Identifier':
101 + names.push(node.name);
102 + return;
103 + case 'ObjectPattern':
104 + for (let i = 0; i < node.properties.length; i++)
105 + addExportNames(names, node.properties[i]);
106 + return;
107 + case 'ArrayPattern':
108 + for (let i = 0; i < node.elements.length; i++) {
109 + const element = node.elements[i];
110 + if (element) addExportNames(names, element);
111 + }
112 + return;
113 + case 'Property':
114 + addExportNames(names, node.value);
115 + return;
116 + case 'AssignmentPattern':
117 + addExportNames(names, node.left);
118 + return;
119 + case 'RestElement':
120 + addExportNames(names, node.argument);
121 + return;
122 + case 'ParenthesizedExpression':
123 + addExportNames(names, node.expression);
124 + return;
125 + }
126 +}
127 +
128 +function resolveClientImport(
129 + specifier: string,
130 + parentURL: string,
131 +): Promise<{url: string}> {
132 + // Resolve an import specifier as if it was loaded by the client. This doesn't use
133 + // the overrides that this loader does but instead reverts to the default.
134 + // This resolution algorithm will not necessarily have the same configuration
135 + // as the actual client loader. It should mostly work and if it doesn't you can
136 + // always convert to explicit exported names instead.
137 + const conditions = ['node', 'import'];
138 + if (stashedResolve === null) {
139 + throw new Error(
140 + 'Expected resolve to have been called before transformSource',
141 + );
142 + }
143 + return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
144 +}
145 +
146 +async function loadClientImport(
147 + url: string,
148 + defaultTransformSource: TransformSourceFunction,
149 ): Promise<{source: Source}> {
75 - if (url.endsWith('.client.js')) {
76 - // TODO: Named exports.
77 - const src =
78 - "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
79 - JSON.stringify(url) +
80 - '}';
81 - return {source: src};
150 + if (stashedGetSource === null) {
151 + throw new Error(
152 + 'Expected getSource to have been called before transformSource',
153 + );
154 }
83 - return defaultGetSource(url, context, defaultGetSource);
155 + // TODO: Validate that this is another module by calling getFormat.
156 + const {source} = await stashedGetSource(
157 + url,
158 + {format: 'module'},
159 + stashedGetSource,
160 + );
161 + return defaultTransformSource(
162 + source,
163 + {format: 'module', url},
164 + defaultTransformSource,
165 + );
166 +}
167 +
168 +async function parseExportNamesInto(
169 + transformedSource: string,
170 + names: Array<string>,
171 + parentURL: string,
172 + defaultTransformSource,
173 +): Promise<void> {
174 + const {body} = acorn.parse(transformedSource, {
175 + ecmaVersion: '2019',
176 + sourceType: 'module',
177 + });
178 + for (let i = 0; i < body.length; i++) {
179 + const node = body[i];
180 + switch (node.type) {
181 + case 'ExportAllDeclaration':
182 + if (node.exported) {
183 + addExportNames(names, node.exported);
184 + continue;
185 + } else {
186 + const {url} = await resolveClientImport(node.source.value, parentURL);
187 + const {source} = await loadClientImport(url, defaultTransformSource);
188 + if (typeof source !== 'string') {
189 + throw new Error('Expected the transformed source to be a string.');
190 + }
191 + parseExportNamesInto(source, names, url, defaultTransformSource);
192 + continue;
193 + }
194 + case 'ExportDefaultDeclaration':
195 + names.push('default');
196 + continue;
197 + case 'ExportNamedDeclaration':
198 + if (node.declaration) {
199 + if (node.declaration.type === 'VariableDeclaration') {
200 + const declarations = node.declaration.declarations;
201 + for (let j = 0; j < declarations.length; j++) {
202 + addExportNames(names, declarations[j].id);
203 + }
204 + } else {
205 + addExportNames(names, node.declaration.id);
206 + }
207 + }
208 + if (node.specificers) {
209 + const specificers = node.specificers;
210 + for (let j = 0; j < specificers.length; j++) {
211 + addExportNames(names, specificers[j].exported);
212 + }
213 + }
214 + continue;
215 + }
216 + }
217 +}
218 +
219 +export async function transformSource(
220 + source: Source,
221 + context: TransformSourceContext,
222 + defaultTransformSource: TransformSourceFunction,
223 +): Promise<{source: Source}> {
224 + const transformed = await defaultTransformSource(
225 + source,
226 + context,
227 + defaultTransformSource,
228 + );
229 + if (context.format === 'module' && context.url.endsWith('.client.js')) {
230 + const transformedSource = transformed.source;
231 + if (typeof transformedSource !== 'string') {
232 + throw new Error('Expected source to have been transformed to a string.');
233 + }
234 +
235 + const names = [];
236 + await parseExportNamesInto(
237 + transformedSource,
238 + names,
239 + context.url,
240 + defaultTransformSource,
241 + );
242 +
243 + let newSrc =
244 + "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";
245 + for (let i = 0; i < names.length; i++) {
246 + const name = names[i];
247 + if (name === 'default') {
248 + newSrc += 'export default ';
249 + } else {
250 + newSrc += 'export const ' + name + ' = ';
251 + }
252 + newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
253 + newSrc += JSON.stringify(context.url);
254 + newSrc += ', name: ';
255 + newSrc += JSON.stringify(name);
256 + newSrc += '};\n';
257 + }
258 +
259 + return {source: newSrc};
260 + }
261 + return transformed;
262 }
packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+50 -3
@@ -13,11 +13,58 @@ const url = require('url');
13 const Module = require('module');
14
15 module.exports = function register() {
16 + const MODULE_REFERENCE = Symbol.for('react.module.reference');
17 + const proxyHandlers = {
18 + get: function(target, name, receiver) {
19 + switch (name) {
20 + // These names are read by the Flight runtime if you end up using the exports object.
21 + case '$$typeof':
22 + // These names are a little too common. We should probably have a way to
23 + // have the Flight runtime extract the inner target instead.
24 + return target.$$typeof;
25 + case 'filepath':
26 + return target.filepath;
27 + case 'name':
28 + return target.name;
29 + // We need to special case this because createElement reads it if we pass this
30 + // reference.
31 + case 'defaultProps':
32 + return undefined;
33 + case '__esModule':
34 + // Something is conditionally checking which export to use. We'll pretend to be
35 + // an ESM compat module but then we'll check again on the client.
36 + target.default = {
37 + $$typeof: MODULE_REFERENCE,
38 + filepath: target.filepath,
39 + // This a placeholder value that tells the client to conditionally use the
40 + // whole object or just the default export.
41 + name: '',
42 + };
43 + return true;
44 + }
45 + let cachedReference = target[name];
46 + if (!cachedReference) {
47 + cachedReference = target[name] = {
48 + $$typeof: MODULE_REFERENCE,
49 + filepath: target.filepath,
50 + name: name,
51 + };
52 + }
53 + return cachedReference;
54 + },
55 + set: function() {
56 + throw new Error('Cannot assign to a client module from a server module.');
57 + },
58 + };
59 +
60 (require: any).extensions['.client.js'] = function(module, path) {
17 - module.exports = {
18 - $$typeof: Symbol.for('react.module.reference'),
19 - name: url.pathToFileURL(path).href,
61 + const moduleId = url.pathToFileURL(path).href;
62 + const moduleReference: {[string]: any} = {
63 + $$typeof: MODULE_REFERENCE,
64 + filepath: moduleId,
65 + name: '*', // Represents the whole object instead of a particular import.
66 };
67 + module.exports = new Proxy(moduleReference, proxyHandlers);
68 };
69
70 const originalResolveFilename = Module._resolveFilename;
packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+6 -4
@@ -68,12 +68,14 @@ describe('ReactFlightDOM', () => {
68 d: moduleExport,
69 };
70 webpackMap['path/' + idx] = {
71 - id: '' + idx,
72 - chunks: [],
73 - name: 'd',
71 + default: {
72 + id: '' + idx,
73 + chunks: [],
74 + name: 'd',
75 + },
76 };
77 const MODULE_TAG = Symbol.for('react.module.reference');
76 - return {$$typeof: MODULE_TAG, name: 'path/' + idx};
78 + return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
79 }
80
81 async function waitForSuspense(fn) {
scripts/flow/environment.js
+1 -1
@@ -68,4 +68,4 @@ declare module 'EventListener' {
68 }
69
70 declare function __webpack_chunk_load__(id: string): Promise<mixed>;
71 -declare function __webpack_require__(id: string): {default: any};
71 +declare function __webpack_require__(id: string): any;
scripts/rollup/bundles.js
+1 -1
@@ -301,7 +301,7 @@ const bundles = [
301 moduleType: RENDERER_UTILS,
302 entry: 'react-transport-dom-webpack/node-loader',
303 global: 'ReactFlightWebpackNodeLoader',
304 - externals: [],
304 + externals: ['acorn'],
305 },
306
307 /******* React Transport DOM Webpack Node.js CommonJS Loader *******/
yarn.lock
+12 -27
@@ -2617,15 +2617,10 @@ acorn-globals@^6.0.0:
2617 acorn "^7.1.1"
2618 acorn-walk "^7.1.1"
2619
2620 -acorn-jsx@^5.0.0:
2621 - version "5.1.0"
2622 - resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
2623 - integrity sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==
2624 -
2625 -acorn-jsx@^5.2.0:
2626 - version "5.2.0"
2627 - resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
2628 - integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
2620 +acorn-jsx@^5.0.0, acorn-jsx@^5.2.0:
2621 + version "5.3.1"
2622 + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
2623 + integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
2624
2625 acorn-walk@^6.0.1:
2626 version "6.2.0"
@@ -2637,25 +2632,15 @@ acorn-walk@^7.1.1:
2632 resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
2633 integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
2634
2640 -acorn@^6.0.1, acorn@^6.0.7:
2641 - version "6.3.0"
2642 - resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
2643 - integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
2644 -
2645 -acorn@^6.4.1:
2646 - version "6.4.1"
2647 - resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
2648 - integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
2649 -
2650 -acorn@^7.1.0:
2651 - version "7.1.0"
2652 - resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
2653 - integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
2635 +acorn@^6.0.1, acorn@^6.0.7, acorn@^6.2.1, acorn@^6.4.1:
2636 + version "6.4.2"
2637 + resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
2638 + integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
2639
2655 -acorn@^7.1.1, acorn@^7.4.0:
2656 - version "7.4.0"
2657 - resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
2658 - integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
2640 +acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
2641 + version "7.4.1"
2642 + resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
2643 + integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
2644
2645 adbkit-logcat@^1.1.0:
2646 version "1.1.0"