@parcel/packager-react-static 2.13.4-canary.3392 → 2.13.4-canary.3395

package/lib/ReactStaticPackager.js

@@ -67,14 +67,29 @@ function _stream() {
   };
   return data;
 }
+function _rust() {
+  const data = require("@parcel/rust");
+  _rust = function () {
+    return data;
+  };
+  return data;
+}
+function _nodeAsync_hooks() {
+  const data = require("node:async_hooks");
+  _nodeAsync_hooks = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// $FlowFixMe
 let clientResolver;
 let serverResolver;
 let packagingBundles = new Map();
 let moduleCache = new Map();
 let loadedBundles = new Map();
 var _default = exports.default = new (_plugin().Packager)({
-  loadConfig({
+  async loadConfig({
     options,
     config
   }) {
@@ -91,15 +106,28 @@ var _default = exports.default = new (_plugin().Packager)({
       packageExports: true,
       conditions: 1 << 16 // "react-server"
     });
+
+    // This logic must be synced with the packager...
+    let packageName = await config.getConfigFrom(options.projectRoot + '/index', [], {
+      packageKey: 'name'
+    });
+    let name = (packageName === null || packageName === void 0 ? void 0 : packageName.contents) ?? '';
+    return {
+      parcelRequireName: 'parcelRequire' + (0, _rust().hashString)(name).slice(-4)
+    };
   },
   async package({
     bundle,
     bundleGraph,
-    getInlineBundleContents
+    getInlineBundleContents,
+    config
   }) {
     if (bundle.env.shouldScopeHoist) {
       throw new Error('Scope hoisting is not supported with SSG');
     }
+
+    // $FlowFixMe
+    globalThis.AsyncLocalStorage ??= _nodeAsync_hooks().AsyncLocalStorage;
     let {
       load,
       loadModule
@@ -137,15 +165,52 @@ var _default = exports.default = new (_plugin().Packager)({
         meta: pageMeta((0, _nullthrows().default)(bundle.getMainEntry()).meta)
       }
     };
-    let stream = renderToReadableStream(React.createElement(Component, props));
+    let resources = [];
+    let bootstrapModules = [];
+    let entry;
+    for (let b of bundleGraph.getReferencedBundles(bundle, {
+      includeInline: false
+    })) {
+      if (b.type === 'css') {
+        resources.push(React.createElement('link', {
+          rel: 'stylesheet',
+          href: (0, _utils().urlJoin)(b.target.publicUrl, b.name),
+          precedence: 'default'
+        }));
+      } else if (b.type === 'js' && b.env.isBrowser()) {
+        bootstrapModules.push((0, _utils().urlJoin)(b.target.publicUrl, b.name));
+        resources.push(React.createElement('script', {
+          type: 'module',
+          async: true,
+          src: (0, _utils().urlJoin)(b.target.publicUrl, b.name)
+        }));
+        if (!entry) {
+          b.traverseAssets((a, ctx, actions) => {
+            if (Array.isArray(a.meta.directives) && a.meta.directives.includes('use client-entry')) {
+              entry = a;
+              actions.stop();
+            }
+          });
+        }
+      }
+    }
+    let stream = renderToReadableStream([...resources, React.createElement(Component, props)]);
     let [s1, renderStream] = stream.tee();
     let [injectStream, rscStream] = s1.tee();
-    let data = createFromReadableStream(renderStream);
+    let data;
+    function Content() {
+      data ??= createFromReadableStream(renderStream);
+      return React.use(data);
+    }
+    let bootstrapScriptContent;
+    if (entry) {
+      bootstrapScriptContent = `Promise.all([${bootstrapModules.map(m => `import("${m}")`).join(',')}]).then(()=>${(0, _nullthrows().default)(config).parcelRequireName}(${JSON.stringify(bundleGraph.getAssetPublicId(entry))}))`;
+    }
     let {
       prelude
-    } = await prerender(React.createElement(function () {
-      return React.use(data);
-    }));
+    } = await prerender(React.createElement(Content), {
+      bootstrapScriptContent
+    });
     let response = prelude.pipeThrough(injectRSCPayload(injectStream));
     return [{
       type: 'html',
@@ -181,15 +246,22 @@ async function loadBundleUncached(bundle, bundleGraph, getInlineBundleContents)
           let packagedBundle = await (0, _nullthrows().default)(packagingBundles.get(entryBundle));
           let contents = await (0, _utils().blobToString)(packagedBundle.contents);
           contents = `module.exports = ${contents}`;
-          return [entryBundle.id, [(0, _nullthrows().default)(entryBundle.getMainEntry()), contents]];
+          return [[entryBundle.id, [(0, _nullthrows().default)(entryBundle.getMainEntry()), contents]]];
+        });
+      } else if (entryBundle) {
+        queue.add(async () => {
+          let {
+            assets: subAssets
+          } = await loadBundle(entryBundle, bundleGraph, getInlineBundleContents);
+          return Array.from(subAssets);
         });
       }
     } else if (node.type === 'asset') {
       let asset = node.value;
-      queue.add(async () => [asset.id, [asset, await asset.getCode()]]);
+      queue.add(async () => [[asset.id, [asset, await asset.getCode()]]]);
     }
   });
-  let assets = new Map(await queue.run());
+  let assets = new Map((await queue.run()).flatMap(v => v));
   let assetsByFilePath = new Map();
   let assetsByPublicId = new Map();
   for (let [asset] of assets.values()) {
@@ -251,24 +323,23 @@ async function loadBundleUncached(bundle, bundleGraph, getInlineBundleContents)
       if (resolution !== null && resolution !== void 0 && resolution.specifier) {
         id = resolution.specifier;
       }
+      if (id.startsWith('.')) {
+        // Another bundle. Should already be loaded.
+        return {};
+      }
       return defaultRequire(id);
     };
-
-    // @ts-ignore
     require.resolve = defaultRequire.resolve;
     return runModule(code, asset.filePath, cacheKey, require, parcelRequire);
   };
   let parcelRequire = publicId => {
     return loadAsset((0, _nullthrows().default)(assetsByPublicId.get(publicId)));
   };
-
-  // @ts-ignore
+  parcelRequire.root = parcelRequire;
   parcelRequire.meta = {
     distDir: bundle.target.distDir,
     publicUrl: bundle.target.publicUrl
   };
-
-  // @ts-ignore
   parcelRequire.load = async filePath => {
     let bundle = bundleGraph.getBundles().find(b => b.name === filePath);
     if (bundle) {
@@ -317,8 +388,6 @@ async function loadBundleUncached(bundle, bundleGraph, getInlineBundleContents)
       let require = id => {
         return loadModule(id, filePath, env);
       };
-
-      // @ts-ignore
       require.resolve = defaultRequire.resolve;
       return runModule(code, filePath, cacheKey, require, parcelRequire);
     }
@@ -331,6 +400,7 @@ async function loadBundleUncached(bundle, bundleGraph, getInlineBundleContents)
   };
 }
 function runModule(code, filename, id, require, parcelRequire) {
+  // code = code.replace(/import\((['"].*?['"])\)/g, (_, m) => `parcelRequire.load(${m[0] + m.slice(3)})`);
   let moduleFunction = _vm().default.compileFunction(code, ['exports', 'require', 'module', '__dirname', '__filename', 'parcelRequire'], {
     filename
   });
@@ -341,7 +411,8 @@ function runModule(code, filename, id, require, parcelRequire) {
     children: [],
     filename,
     id,
-    path: dirname
+    path: dirname,
+    bundle: parcelRequire
   };
   moduleCache.set(id, module);
   moduleFunction(module.exports, require, module, dirname, filename, parcelRequire);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/packager-react-static",
-  "version": "2.13.4-canary.3392+337c31c68",
+  "version": "2.13.4-canary.3395+f86f5f27c",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,15 +17,16 @@
   "source": "src/ReactStaticPackager.js",
   "engines": {
     "node": ">= 16.0.0",
-    "parcel": "^2.0.0-canary.1767+337c31c68"
+    "parcel": "^2.0.0-canary.1770+f86f5f27c"
   },
   "dependencies": {
-    "@parcel/node-resolver-core": "3.4.4-canary.3392+337c31c68",
-    "@parcel/plugin": "2.0.0-canary.1769+337c31c68",
-    "@parcel/types": "2.0.0-canary.1769+337c31c68",
-    "@parcel/utils": "2.0.0-canary.1769+337c31c68",
+    "@parcel/node-resolver-core": "3.4.4-canary.3395+f86f5f27c",
+    "@parcel/plugin": "2.0.0-canary.1772+f86f5f27c",
+    "@parcel/rust": "2.13.4-canary.3395+f86f5f27c",
+    "@parcel/types": "2.0.0-canary.1772+f86f5f27c",
+    "@parcel/utils": "2.0.0-canary.1772+f86f5f27c",
     "nullthrows": "^1.1.1",
     "rsc-html-stream": "^0.0.4"
   },
-  "gitHead": "337c31c68ff350f1a971752746bb0e01583f5ef4"
+  "gitHead": "f86f5f27c3a6553e70bd35652f19e6ab8d8e4e4a"
 }

package/src/ReactStaticPackager.js

@@ -18,6 +18,9 @@ import {ResolverBase} from '@parcel/node-resolver-core';
 import vm from 'vm';
 import nullthrows from 'nullthrows';
 import {Readable} from 'stream';
+import {hashString} from '@parcel/rust';
+// $FlowFixMe
+import {AsyncLocalStorage} from 'node:async_hooks';
 
 export interface Page {
   url: string;
@@ -45,7 +48,7 @@ let moduleCache = new Map<string, ParcelModule>();
 let loadedBundles = new Map<NamedBundle, any>();
 
 export default (new Packager({
-  loadConfig({options, config}) {
+  async loadConfig({options, config}) {
     config.invalidateOnBuild();
     packagingBundles.clear();
     moduleCache.clear();
@@ -60,12 +63,29 @@ export default (new Packager({
       packageExports: true,
       conditions: 1 << 16, // "react-server"
     });
+
+    // This logic must be synced with the packager...
+    let packageName = await config.getConfigFrom(
+      options.projectRoot + '/index',
+      [],
+      {
+        packageKey: 'name',
+      },
+    );
+
+    let name = packageName?.contents ?? '';
+    return {
+      parcelRequireName: 'parcelRequire' + hashString(name).slice(-4),
+    };
   },
-  async package({bundle, bundleGraph, getInlineBundleContents}) {
+  async package({bundle, bundleGraph, getInlineBundleContents, config}) {
     if (bundle.env.shouldScopeHoist) {
       throw new Error('Scope hoisting is not supported with SSG');
     }
 
+    // $FlowFixMe
+    globalThis.AsyncLocalStorage ??= AsyncLocalStorage;
+
     let {load, loadModule} = await loadBundle(
       bundle,
       bundleGraph,
@@ -112,15 +132,68 @@ export default (new Packager({
       },
     };
 
-    let stream = renderToReadableStream(React.createElement(Component, props));
+    let resources = [];
+    let bootstrapModules = [];
+    let entry;
+    for (let b of bundleGraph.getReferencedBundles(bundle, {
+      includeInline: false,
+    })) {
+      if (b.type === 'css') {
+        resources.push(
+          React.createElement('link', {
+            rel: 'stylesheet',
+            href: urlJoin(b.target.publicUrl, b.name),
+            precedence: 'default',
+          }),
+        );
+      } else if (b.type === 'js' && b.env.isBrowser()) {
+        bootstrapModules.push(urlJoin(b.target.publicUrl, b.name));
+        resources.push(
+          React.createElement('script', {
+            type: 'module',
+            async: true,
+            src: urlJoin(b.target.publicUrl, b.name),
+          }),
+        );
+
+        if (!entry) {
+          b.traverseAssets((a, ctx, actions) => {
+            if (
+              Array.isArray(a.meta.directives) &&
+              a.meta.directives.includes('use client-entry')
+            ) {
+              entry = a;
+              actions.stop();
+            }
+          });
+        }
+      }
+    }
+
+    let stream = renderToReadableStream([
+      ...resources,
+      React.createElement(Component, props),
+    ]);
     let [s1, renderStream] = stream.tee();
     let [injectStream, rscStream] = s1.tee();
-    let data = createFromReadableStream(renderStream);
+    let data;
     function Content() {
+      data ??= createFromReadableStream(renderStream);
       return React.use(data);
     }
 
-    let {prelude} = await prerender(React.createElement(Content));
+    let bootstrapScriptContent;
+    if (entry) {
+      bootstrapScriptContent = `Promise.all([${bootstrapModules
+        .map(m => `import("${m}")`)
+        .join(',')}]).then(()=>${
+        nullthrows(config).parcelRequireName
+      }(${JSON.stringify(bundleGraph.getAssetPublicId(entry))}))`;
+    }
+
+    let {prelude} = await prerender(React.createElement(Content), {
+      bootstrapScriptContent,
+    });
     let response = prelude.pipeThrough(injectRSCPayload(injectStream));
 
     return [
@@ -162,7 +235,9 @@ async function loadBundleUncached(
   ) => Async<{|contents: Blob|}>,
 ) {
   // Load all asset contents.
-  let queue = new PromiseQueue({maxConcurrent: 32});
+  let queue = new PromiseQueue<Array<[string, [Asset, string]]>>({
+    maxConcurrent: 32,
+  });
   bundle.traverse(node => {
     if (node.type === 'dependency') {
       let dep = node.value;
@@ -182,18 +257,31 @@ async function loadBundleUncached(
           let contents = await blobToString(packagedBundle.contents);
           contents = `module.exports = ${contents}`;
           return [
-            entryBundle.id,
-            [nullthrows(entryBundle.getMainEntry()), contents],
+            [
+              entryBundle.id,
+              [nullthrows(entryBundle.getMainEntry()), contents],
+            ],
           ];
         });
+      } else if (entryBundle) {
+        queue.add(async () => {
+          let {assets: subAssets} = await loadBundle(
+            entryBundle,
+            bundleGraph,
+            getInlineBundleContents,
+          );
+          return Array.from(subAssets);
+        });
       }
     } else if (node.type === 'asset') {
       let asset = node.value;
-      queue.add(async () => [asset.id, [asset, await asset.getCode()]]);
+      queue.add(async () => [[asset.id, [asset, await asset.getCode()]]]);
     }
   });
 
-  let assets = new Map<string, [Asset, string]>(await queue.run());
+  let assets = new Map<string, [Asset, string]>(
+    (await queue.run()).flatMap(v => v),
+  );
   let assetsByFilePath = new Map<string, string>();
   let assetsByPublicId = new Map<string, string>();
   for (let [asset] of assets.values()) {
@@ -251,10 +339,14 @@ async function loadBundleUncached(
         id = resolution.specifier;
       }
 
+      if (id.startsWith('.')) {
+        // Another bundle. Should already be loaded.
+        return {};
+      }
+
       return defaultRequire(id);
     };
 
-    // @ts-ignore
     require.resolve = defaultRequire.resolve;
 
     return runModule(code, asset.filePath, cacheKey, require, parcelRequire);
@@ -264,13 +356,13 @@ async function loadBundleUncached(
     return loadAsset(nullthrows(assetsByPublicId.get(publicId)));
   };
 
-  // @ts-ignore
+  parcelRequire.root = parcelRequire;
+
   parcelRequire.meta = {
     distDir: bundle.target.distDir,
     publicUrl: bundle.target.publicUrl,
   };
 
-  // @ts-ignore
   parcelRequire.load = async (filePath: string) => {
     let bundle = bundleGraph.getBundles().find(b => b.name === filePath);
     if (bundle) {
@@ -327,7 +419,6 @@ async function loadBundleUncached(
         return loadModule(id, filePath, env);
       };
 
-      // @ts-ignore
       require.resolve = defaultRequire.resolve;
 
       return runModule(code, filePath, cacheKey, require, parcelRequire);
@@ -346,6 +437,7 @@ function runModule(
   require: (id: string) => any,
   parcelRequire: (id: string) => any,
 ) {
+  // code = code.replace(/import\((['"].*?['"])\)/g, (_, m) => `parcelRequire.load(${m[0] + m.slice(3)})`);
   let moduleFunction = vm.compileFunction(
     code,
     [
@@ -369,6 +461,7 @@ function runModule(
     filename,
     id,
     path: dirname,
+    bundle: parcelRequire,
   };
 
   moduleCache.set(id, module);