Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Support named exports from client references #20312
Conversation
| if (moduleData.name === '*') { | ||
| // This is a placeholder value that represents that the caller imported this | ||
| // as a CommonJS module as is. | ||
| return moduleExports; |
sebmarkbage
Nov 21, 2020
•
Author
Member
I usually test CJS server paths by removing the "type": "module" definition in package.json. In this case I need to use raw CJS (require(...) + module.exports) without using Babel/Webpack. Because otherwise we fall into the case below.
I couldn't test the Webpack client paths for true CJS. I spent a few hours trying to figure out how to make the react-script config let me write raw CJS instead of transpiling from ESM and I couldn't because webpack kept treating them as ESM which means that assigning to module.exports causes and error.
I think this works though.
I usually test CJS server paths by removing the "type": "module" definition in package.json. In this case I need to use raw CJS (require(...) + module.exports) without using Babel/Webpack. Because otherwise we fall into the case below.
I couldn't test the Webpack client paths for true CJS. I spent a few hours trying to figure out how to make the react-script config let me write raw CJS instead of transpiling from ESM and I couldn't because webpack kept treating them as ESM which means that assigning to module.exports causes and error.
I think this works though.
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit a5f7228:
|
Details of bundled changes.Comparing: 565148d...a5f7228 react-transport-dom-webpack
Size changes (experimental) |
| version "6.4.2" | ||
| resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6" | ||
| integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ== | ||
|
|
||
| acorn@^6.4.1: |
sebmarkbage
Nov 21, 2020
Author
Member
Not sure why yarn resolves to so many different acorns but meh.
Not sure why yarn resolves to so many different acorns but meh.
Details of bundled changes.Comparing: 565148d...a5f7228 react-transport-dom-webpack
Size changes (stable) |
|
This is getting complicated. Seems like getting a good integration test fixture would be a necessary part of productionizing. |
|
I’m going to punt on a lot of tests because this is just the beginning. Someone else can help with getting this to the finish line. I need to focus on getting the shell in place. |
This field name will get confused with the imported name or the module id.
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.
This should be the version used by Webpack since we have a dependency on Webpack anyway.
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.
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.
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.
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.
f11fc66
to
a5f7228
3f73dce
into
facebook:master
Module references now include the "export" name that they're importing. Each export is modeled as its own 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.
In the CommonJS runtime we can't statically analyze the exports so instead we use Proxy and depending on what the server reads, we emit a different reference.
If the ESM runtime we can statically analyze the exports but it's a little tricky because
export *is recursive.There are weird combinations that can happen because Babel may or may not convert things to CJS from ESM on either the server or the client bundler.