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>

Author: sebmarkbage

fixtures/flight/loader/index.js

@@ -1,4 +1,8 @@
-import{resolve,getSource}from'react-transport-dom-webpack/node-loader';
+import{
+resolve,
+getSource,
+transformSourceasreactTransformSource,
+}from'react-transport-dom-webpack/node-loader';
 
 export{resolve,getSource};
 
@@ -13,7 +17,7 @@ const babelOptions = {
 ],
 };
 
-exportasyncfunctiontransformSource(source,context,defaultTransformSource){
+asyncfunctionbabelTransformSource(source,context,defaultTransformSource){
 const{format}=context;
 if(format==='module'){
 constopt=Object.assign({filename: context.url},babelOptions);
@@ -22,3 +26,9 @@ export async function transformSource(source, context, defaultTransformSource) {
 }
 returndefaultTransformSource(source,context,defaultTransformSource);
 }
+
+exportasyncfunctiontransformSource(source,context,defaultTransformSource){
+returnreactTransformSource(source,context,(s,c)=>{
+returnbabelTransformSource(s,c,defaultTransformSource);
+});
+}

fixtures/flight/server/handler.server.js

@@ -17,14 +17,35 @@ module.exports = async function(req, res) {
 pipeToNodeWritable(<App/>,res,{
 // TODO: Read from a map on the disk.
 [resolve('../src/Counter.client.js')]: {
-id: './src/Counter.client.js',
-chunks: ['1'],
-name: 'default',
+Counter: {
+id: './src/Counter.client.js',
+chunks: ['2'],
+name: 'Counter',
+},
+},
+[resolve('../src/Counter2.client.js')]: {
+Counter: {
+id: './src/Counter2.client.js',
+chunks: ['1'],
+name: 'Counter',
+},
 },
 [resolve('../src/ShowMore.client.js')]: {
-id: './src/ShowMore.client.js',
-chunks: ['2'],
-name: 'default',
+default: {
+id: './src/ShowMore.client.js',
+chunks: ['3'],
+name: 'default',
+},
+'': {
+id: './src/ShowMore.client.js',
+chunks: ['3'],
+name: '',
+},
+'*': {
+id: './src/ShowMore.client.js',
+chunks: ['3'],
+name: '*',
+},
 },
 });
 };

fixtures/flight/src/App.server.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 
 importContainerfrom'./Container.js';
 
-importCounterfrom'./Counter.client.js';
+import{Counter}from'./Counter.client.js';
+import{CounterasCounter2}from'./Counter2.client.js';
 
 importShowMorefrom'./ShowMore.client.js';
 
@@ -11,6 +12,7 @@ export default function App() {
 <Container>
 <h1>Hello, world</h1>
 <Counter/>
+<Counter2/>
 <ShowMore>
 <p>Lorem ipsum</p>
 </ShowMore>

fixtures/flight/src/Counter.client.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 importContainerfrom'./Container.js';
 
-exportdefaultfunctionCounter(){
+exportfunctionCounter(){
 const[count,setCount]=React.useState(0);
 return(
 <Container>

fixtures/flight/src/Counter2.client.js

@@ -0,0 +1 @@
+export*from'./Counter.client.js';

packages/react-transport-dom-webpack/package.json

@@ -50,6 +50,7 @@
 "webpack": "^4.43.0"
  },
 "dependencies": {
+"acorn": "^6.2.1",
 "loose-envify": "^1.1.0",
 "object-assign": "^4.1.1"
  },

packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js

@@ -59,5 +59,16 @@ export function requireModule<T>(moduleData: ModuleReference<T>): T {
  throw entry;
 }
 }
-return__webpack_require__(moduleData.id)[moduleData.name];
+constmoduleExports=__webpack_require__(moduleData.id);
+if(moduleData.name==='*'){
+// This is a placeholder value that represents that the caller imported this
+// as a CommonJS module as is.
+ return moduleExports;
+}
+if(moduleData.name===''){
+// This is a placeholder value that represents that the caller accessed the
+// default property of this if it was an ESM interop module.
+returnmoduleExports.__esModule ? moduleExports.default : moduleExports;
+}
+returnmoduleExports[moduleData.name];
 }

packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js

@@ -8,14 +8,17 @@
  */
 
 typeWebpackMap={
-[filename: string]: ModuleMetaData,
+[filepath: string]: {
+[name: string]: ModuleMetaData,
+},
 };
 
 exporttypeBundlerConfig=WebpackMap;
 
 // eslint-disable-next-line no-unused-vars
 exporttypeModuleReference<T>={
 $$typeof: Symbol,
+filepath: string,
 name: string,
 };
 
@@ -30,7 +33,7 @@ export type ModuleKey = string;
 constMODULE_TAG=Symbol.for('react.module.reference');
 
 exportfunctiongetModuleKey(reference: ModuleReference<any>): ModuleKey{
- return reference.name;
+returnreference.filepath+'#'+reference.name;
 }
 
 exportfunctionisModuleReference(reference: Object): boolean{
@@ -41,5 +44,5 @@ export function resolveModuleMetaData<T>(
  config: BundlerConfig,
  moduleReference: ModuleReference<T>,
 ): ModuleMetaData {
-returnconfig[moduleReference.name];
+returnconfig[moduleReference.filepath][moduleReference.name];
 }

packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+importacornfrom'acorn';
+
 typeResolveContext={
 conditions: Array<string>,
 parentURL: string|void,
@@ -16,11 +18,10 @@ type ResolveFunction = (
 string,
 ResolveContext,
 ResolveFunction,
-)=>Promise<string>;
+)=>Promise<{url: string}>;
 
 typeGetSourceContext={
 format: string,
-url: string,
 };
 
 typeGetSourceFunction=(
@@ -29,15 +30,32 @@ type GetSourceFunction = (
 GetSourceFunction,
 )=>Promise<{source: Source}>;
 
+typeTransformSourceContext={
+format: string,
+url: string,
+};
+
+typeTransformSourceFunction=(
+Source,
+TransformSourceContext,
+TransformSourceFunction,
+)=>Promise<{source: Source}>;
+
 typeSource=string|ArrayBuffer|Uint8Array;
 
 letwarnedAboutConditionsFlag=false;
 
+let stashedGetSource: null|GetSourceFunction=null;
+let stashedResolve: null|ResolveFunction=null;
+
 exportasyncfunctionresolve(
 specifier: string,
 context: ResolveContext,
 defaultResolve: ResolveFunction,
-): Promise<string>{
+): Promise<{url: string}>{
+// We stash this in case we end up needing to resolve export * statements later.
+stashedResolve=defaultResolve;
+
 if(!context.conditions.includes('react-server')){
 context={
  ...context,
@@ -71,14 +89,174 @@ export async function getSource(
 url: string,
 context: GetSourceContext,
 defaultGetSource: GetSourceFunction,
+){
+// We stash this in case we end up needing to resolve export * statements later.
+stashedGetSource=defaultGetSource;
+returndefaultGetSource(url,context,defaultGetSource);
+}
+
+functionaddExportNames(names,node){
+switch(node.type){
+case'Identifier':
+names.push(node.name);
+return;
+case'ObjectPattern':
+for(leti=0;i<node.properties.length;i++)
+addExportNames(names,node.properties[i]);
+return;
+case'ArrayPattern':
+for(leti=0;i<node.elements.length;i++){
+constelement=node.elements[i];
+if(element)addExportNames(names,element);
+}
+return;
+case'Property':
+addExportNames(names,node.value);
+return;
+case'AssignmentPattern':
+addExportNames(names,node.left);
+return;
+case'RestElement':
+addExportNames(names,node.argument);
+return;
+case'ParenthesizedExpression':
+addExportNames(names,node.expression);
+return;
+}
+}
+
+functionresolveClientImport(
+specifier: string,
+parentURL: string,
+): Promise<{url: string}>{
+// Resolve an import specifier as if it was loaded by the client. This doesn't use
+// the overrides that this loader does but instead reverts to the default.
+// This resolution algorithm will not necessarily have the same configuration
+// as the actual client loader. It should mostly work and if it doesn't you can
+// always convert to explicit exported names instead.
+const conditions =['node','import'];
+if(stashedResolve===null){
+thrownewError(
+'Expected resolve to have been called before transformSource',
+);
+}
+returnstashedResolve(specifier,{conditions, parentURL},stashedResolve);
+}
+
+asyncfunctionloadClientImport(
+url: string,
+defaultTransformSource: TransformSourceFunction,
 ): Promise<{source: Source}>{
-if(url.endsWith('.client.js')){
-// TODO: Named exports.
-constsrc=
-"export default { $$typeof: Symbol.for('react.module.reference'), name: "+
-JSON.stringify(url)+
-'}';
-return{source: src};
+if(stashedGetSource===null){
+thrownewError(
+'Expected getSource to have been called before transformSource',
+);
 }
-returndefaultGetSource(url,context,defaultGetSource);
+// TODO: Validate that this is another module by calling getFormat.
+const{source}=awaitstashedGetSource(
+url,
+{format: 'module'},
+stashedGetSource,
+);
+returndefaultTransformSource(
+source,
+{format: 'module', url},
+defaultTransformSource,
+);
+}
+
+asyncfunctionparseExportNamesInto(
+transformedSource: string,
+names: Array<string>,
+parentURL: string,
+defaultTransformSource,
+): Promise<void>{
+const{body}=acorn.parse(transformedSource,{
+ecmaVersion: '2019',
+sourceType: 'module',
+});
+for(leti=0;i<body.length;i++){
+constnode=body[i];
+switch(node.type){
+case'ExportAllDeclaration':
+if(node.exported){
+addExportNames(names,node.exported);
+continue;
+}else{
+const{url}=awaitresolveClientImport(node.source.value,parentURL);
+const{source}=awaitloadClientImport(url,defaultTransformSource);
+if(typeofsource!=='string'){
+thrownewError('Expected the transformed source to be a string.');
+}
+parseExportNamesInto(source,names,url,defaultTransformSource);
+continue;
+}
+case'ExportDefaultDeclaration':
+names.push('default');
+continue;
+case'ExportNamedDeclaration':
+if(node.declaration){
+if(node.declaration.type==='VariableDeclaration'){
+constdeclarations=node.declaration.declarations;
+for(letj=0;j<declarations.length;j++){
+addExportNames(names,declarations[j].id);
+}
+}else{
+addExportNames(names,node.declaration.id);
+}
+}
+if(node.specificers){
+constspecificers=node.specificers;
+for(letj=0;j<specificers.length;j++){
+addExportNames(names,specificers[j].exported);
+}
+}
+continue;
+}
+}
+}
+
+exportasyncfunctiontransformSource(
+source: Source,
+context: TransformSourceContext,
+defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}>{
+consttransformed=awaitdefaultTransformSource(
+source,
+context,
+defaultTransformSource,
+);
+if(context.format==='module'&&context.url.endsWith('.client.js')){
+consttransformedSource=transformed.source;
+if(typeoftransformedSource!=='string'){
+thrownewError('Expected source to have been transformed to a string.');
+}
+
+constnames=[];
+awaitparseExportNamesInto(
+transformedSource,
+names,
+context.url,
+defaultTransformSource,
+);
+
+letnewSrc=
+"const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";
+for(leti=0;i<names.length;i++){
+constname=names[i];
+if(name==='default'){
+newSrc+='export default ';
+}else{
+newSrc+='export const '+name+' = ';
+}
+newSrc+='{ $$typeof: MODULE_REFERENCE, filepath: ';
+newSrc+=JSON.stringify(context.url);
+newSrc+=', name: ';
+newSrc+=JSON.stringify(name);
+newSrc+='};\n';
+}
+
+return{source: newSrc};
+}
+returntransformed;
 }