@parcel/packager-react-static 2.16.2-canary.3489 → 2.16.3

package/lib/ReactStaticPackager.js

@@ -171,6 +171,7 @@ var _default = exports.default = new (_plugin().Packager)({
       prerender
     } = loadModule('react-dom/static.edge', __filename, 'react-client');
     let React = loadModule('react', __filename, 'react-client');
+    let ReactDOM = loadModule('react-dom', __filename, 'react-server');
     let {
       createFromReadableStream
     } = loadModule('react-server-dom-parcel/client.edge', __filename, 'react-client');
@@ -188,28 +189,15 @@ var _default = exports.default = new (_plugin().Packager)({
         ...meta
       }
     };
-    let resources = [];
     let bootstrapModules = [];
     let entry;
-    for (let b of bundleGraph.getReferencedBundles(bundle, {
+    let referencedBundles = bundleGraph.getReferencedBundles(bundle, {
       includeInline: false,
       includeIsolated: false
-    })) {
-      if (b.type === 'css') {
-        resources.push(React.createElement('link', {
-          key: b.id,
-          rel: 'stylesheet',
-          href: (0, _utils().urlJoin)(b.target.publicUrl, b.name),
-          precedence: 'default'
-        }));
-      } else if (b.type === 'js' && b.env.isBrowser()) {
+    });
+    for (let b of referencedBundles) {
+      if (b.type === 'js' && b.env.isBrowser()) {
         bootstrapModules.push((0, _utils().urlJoin)(b.target.publicUrl, b.name));
-        resources.push(React.createElement('script', {
-          key: b.id,
-          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')) {
@@ -220,7 +208,37 @@ var _default = exports.default = new (_plugin().Packager)({
         }
       }
     }
-    let stream = renderToReadableStream([...resources, React.createElement(Component, props)]);
+    function Resources() {
+      let resources = [];
+      for (let b of referencedBundles) {
+        if (b.type === 'css') {
+          let href = (0, _utils().urlJoin)(b.target.publicUrl, b.name);
+
+          // Add preload hint so we start loading the stylesheet as soon
+          // as the RSC payload loads, without waiting for the component to mount.
+          ReactDOM.preload(href, {
+            as: 'style'
+          });
+          resources.push(React.createElement('link', {
+            key: b.id,
+            rel: 'stylesheet',
+            href,
+            precedence: 'default'
+          }));
+        } else if (b.type === 'js' && b.env.isBrowser()) {
+          resources.push(React.createElement('script', {
+            key: b.id,
+            type: 'module',
+            async: true,
+            src: (0, _utils().urlJoin)(b.target.publicUrl, b.name)
+          }));
+        }
+      }
+      return resources;
+    }
+    let stream = renderToReadableStream([React.createElement(Resources, {
+      key: 'resources'
+    }), React.createElement(Component, props)]);
     let [s1, renderStream] = stream.tee();
     let [injectStream, rscStream] = s1.tee();
     let data;
@@ -291,8 +309,9 @@ async function loadBundleUncached(bundle, bundleGraph, getInlineBundleContents)
             packagingBundles.set(entryBundle, getInlineBundleContents(entryBundle, bundleGraph));
           }
           let packagedBundle = await (0, _nullthrows().default)(packagingBundles.get(entryBundle));
+          let inlineType = (0, _nullthrows().default)(entryBundle.getMainEntry()).meta.inlineType;
           let contents = await (0, _utils().blobToString)(packagedBundle.contents);
-          contents = `module.exports = ${contents}`;
+          contents = `module.exports = ${inlineType === 'string' ? JSON.stringify(contents) : contents}`;
           return [[entryBundle.id, [entryBundle, (0, _nullthrows().default)(entryBundle.getMainEntry()), contents]]];
         });
       } else if ((entryBundle === null || entryBundle === void 0 ? void 0 : entryBundle.type) === 'js') {
@@ -597,7 +616,7 @@ function runModule(code, filename, id, require, parcelRequire) {
   return module.exports;
 }
 function getCacheKey(asset) {
-  return asset.filePath + '#' + asset.env.context + (asset.uniqueKey ? '-' + asset.uniqueKey : '');
+  return (asset.pipeline || '') + asset.filePath + '#' + asset.env.context + (asset.uniqueKey ? '-' + asset.uniqueKey : '');
 }
 function getSpecifier(dep) {
   if (typeof dep.meta.placeholder === 'string') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parcel/packager-react-static",
-  "version": "2.16.2-canary.3489+9f01c02f8",
+  "version": "2.16.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,16 +17,16 @@
   "source": "src/ReactStaticPackager.js",
   "engines": {
     "node": ">= 16.0.0",
-    "parcel": "^2.0.0-canary.1864+9f01c02f8"
+    "parcel": "^2.16.3"
   },
   "dependencies": {
-    "@parcel/node-resolver-core": "3.7.2-canary.3489+9f01c02f8",
-    "@parcel/plugin": "2.0.0-canary.1866+9f01c02f8",
-    "@parcel/rust": "2.16.2-canary.3489+9f01c02f8",
-    "@parcel/types": "2.0.0-canary.1866+9f01c02f8",
-    "@parcel/utils": "2.0.0-canary.1866+9f01c02f8",
+    "@parcel/node-resolver-core": "3.7.3",
+    "@parcel/plugin": "2.16.3",
+    "@parcel/rust": "2.16.3",
+    "@parcel/types": "2.16.3",
+    "@parcel/utils": "2.16.3",
     "nullthrows": "^1.1.1",
     "rsc-html-stream": "^0.0.6"
   },
-  "gitHead": "9f01c02f8d766cc8735df31f1ec96f6cf1fb9973"
+  "gitHead": "73f691d67d22482440babb2d1846b7da2160f7cc"
 }

package/src/ReactStaticPackager.js

@@ -134,6 +134,7 @@ export default (new Packager({
       'react-client',
     );
     let React = loadModule('react', __filename, 'react-client');
+    let ReactDOM = loadModule('react-dom', __filename, 'react-server');
     let {createFromReadableStream} = loadModule(
       'react-server-dom-parcel/client.edge',
       __filename,
@@ -153,33 +154,16 @@ export default (new Packager({
       },
     };
 
-    let resources = [];
     let bootstrapModules = [];
     let entry;
-    for (let b of bundleGraph.getReferencedBundles(bundle, {
+    let referencedBundles = bundleGraph.getReferencedBundles(bundle, {
       includeInline: false,
       includeIsolated: false,
-    })) {
-      if (b.type === 'css') {
-        resources.push(
-          React.createElement('link', {
-            key: b.id,
-            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', {
-            key: b.id,
-            type: 'module',
-            async: true,
-            src: urlJoin(b.target.publicUrl, b.name),
-          }),
-        );
+    });
 
+    for (let b of referencedBundles) {
+      if (b.type === 'js' && b.env.isBrowser()) {
+        bootstrapModules.push(urlJoin(b.target.publicUrl, b.name));
         if (!entry) {
           b.traverseAssets((a, ctx, actions) => {
             if (
@@ -194,8 +178,40 @@ export default (new Packager({
       }
     }
 
+    function Resources() {
+      let resources = [];
+      for (let b of referencedBundles) {
+        if (b.type === 'css') {
+          let href = urlJoin(b.target.publicUrl, b.name);
+
+          // Add preload hint so we start loading the stylesheet as soon
+          // as the RSC payload loads, without waiting for the component to mount.
+          ReactDOM.preload(href, {as: 'style'});
+          resources.push(
+            React.createElement('link', {
+              key: b.id,
+              rel: 'stylesheet',
+              href,
+              precedence: 'default',
+            }),
+          );
+        } else if (b.type === 'js' && b.env.isBrowser()) {
+          resources.push(
+            React.createElement('script', {
+              key: b.id,
+              type: 'module',
+              async: true,
+              src: urlJoin(b.target.publicUrl, b.name),
+            }),
+          );
+        }
+      }
+
+      return resources;
+    }
+
     let stream = renderToReadableStream([
-      ...resources,
+      React.createElement(Resources, {key: 'resources'}),
       React.createElement(Component, props),
     ]);
     let [s1, renderStream] = stream.tee();
@@ -302,8 +318,12 @@ async function loadBundleUncached(
           let packagedBundle = await nullthrows(
             packagingBundles.get(entryBundle),
           );
+          let inlineType = nullthrows(entryBundle.getMainEntry()).meta
+            .inlineType;
           let contents = await blobToString(packagedBundle.contents);
-          contents = `module.exports = ${contents}`;
+          contents = `module.exports = ${
+            inlineType === 'string' ? JSON.stringify(contents) : contents
+          }`;
           return [
             [
               entryBundle.id,
@@ -667,6 +687,7 @@ function runModule(
 
 function getCacheKey(asset: Asset) {
   return (
+    (asset.pipeline || '') +
     asset.filePath +
     '#' +
     asset.env.context +