@shopify/hydrogen 0.24.0 → 0.26.0

package/dist/node/framework/plugins/vite-plugin-hydrogen-virtual-files.js

@@ -21,20 +21,25 @@ exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDRO
 exports.default = (pluginOptions) => {
     let config;
     let server;
+    let resolvedConfigPath;
     return {
         name: 'hydrogen:virtual-files',
         configResolved(_config) {
             config = _config;
+            // @ts-ignore
+            config.plugins.push(addPathToConfigProxy());
         },
         configureServer(_server) {
             server = _server;
         },
         resolveId(source, importer) {
             if (source === VIRTUAL_HYDROGEN_CONFIG_ID) {
-                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => 
-                // This direct dependency on a real file
-                // makes HMR work for the virtual module.
-                this.resolve(hcPath, importer, { skipSelf: true }));
+                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => {
+                    resolvedConfigPath = hcPath;
+                    // This direct dependency on a real file
+                    // makes HMR work for the virtual module.
+                    return this.resolve(hcPath, importer, { skipSelf: true });
+                });
             }
             if ([
                 exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
@@ -57,8 +62,8 @@ exports.default = (pluginOptions) => {
             }
             if (id === '\0' + VIRTUAL_HYDROGEN_ROUTES_ID) {
                 return importHydrogenConfig().then((hc) => {
-                    var _a, _b, _c, _d;
-                    let routesPath = (_b = (typeof hc.routes === 'string' ? hc.routes : (_a = hc.routes) === null || _a === void 0 ? void 0 : _a.files)) !== null && _b !== void 0 ? _b : '/src/routes';
+                    let routesPath = (typeof hc.routes === 'string' ? hc.routes : hc.routes?.files) ??
+                        '/src/routes';
                     if (routesPath.startsWith('./')) {
                         routesPath = routesPath.slice(1);
                     }
@@ -69,7 +74,7 @@ exports.default = (pluginOptions) => {
                         routesPath += '**/*.server.[jt](s|sx)';
                     }
                     const [dirPrefix] = routesPath.split('/*');
-                    let code = `export default {\n  dirPrefix: '${dirPrefix}',\n  basePath: '${(_d = (_c = hc.routes) === null || _c === void 0 ? void 0 : _c.basePath) !== null && _d !== void 0 ? _d : ''}',\n  files: import.meta.globEager('${routesPath}')\n};`;
+                    let code = `export default {\n  dirPrefix: '${dirPrefix}',\n  basePath: '${hc.routes?.basePath ?? ''}',\n  files: import.meta.globEager('${routesPath}')\n};`;
                     if (config.command === 'serve') {
                         // Add dependency on Hydrogen config for HMR
                         code += `\nimport '${VIRTUAL_HYDROGEN_CONFIG_ID}';`;
@@ -87,6 +92,18 @@ exports.default = (pluginOptions) => {
         const { loaded } = await (0, viteception_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
         return loaded[0].default;
     }
+    function addPathToConfigProxy() {
+        return {
+            name: 'hydrogen:virtual-files-post',
+            enforce: 'post',
+            transform(code, id) {
+                if (id === '\0' + exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
+                    // The CLI needs to import the Hydrogen config path
+                    return (code + ` export const configPath = '${resolvedConfigPath || ''}';`);
+                }
+            },
+        };
+    }
 };
 async function findHydrogenConfigPath(root, userProvidedPath) {
     let configPath = userProvidedPath;
@@ -101,5 +118,7 @@ async function findHydrogenConfigPath(root, userProvidedPath) {
             configPath = path_1.default.resolve(root, configPath);
     }
     return (configPath ||
-        require.resolve('@shopify/hydrogen/dist/esnext/utilities/empty-hydrogen-config.js'));
+        require.resolve(
+        // eslint-disable-next-line node/no-missing-require
+        '@shopify/hydrogen/utilities/empty-hydrogen-config'));
 }

package/dist/node/framework/types.d.ts

@@ -0,0 +1,5 @@
+export interface HydrogenVitePluginOptions {
+    devCache?: boolean;
+    purgeQueryCacheOnBuild?: boolean;
+    configPath?: string;
+}

package/dist/node/framework/viteception.d.ts

@@ -1,4 +1,5 @@
-export declare function viteception(paths: string[]): Promise<{
+import { InlineConfig } from 'vite';
+export declare function viteception(paths: string[], options?: InlineConfig): Promise<{
     server: import("vite").ViteDevServer;
     loaded: Record<string, any>[];
 }>;

package/dist/node/framework/viteception.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.viteception = void 0;
 const vite_1 = require("vite");
-async function viteception(paths) {
+async function viteception(paths, options) {
     const isWorker = process.env.WORKER;
     delete process.env.WORKER;
     const server = await (0, vite_1.createServer)({
         clearScreen: false,
         server: { middlewareMode: 'ssr' },
+        ...options,
     });
     if (isWorker) {
         process.env.WORKER = isWorker;

package/dist/node/shared-types.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from 'http';
+export interface RuntimeContext {
+    waitUntil: (fn: Promise<any>) => void;
+}
+export interface RequestHandlerOptions {
+    indexTemplate: string | ((url: string) => Promise<string | {
+        default: string;
+    }>);
+    cache?: Cache;
+    streamableResponse?: ServerResponse;
+    dev?: boolean;
+    context?: RuntimeContext;
+    nonce?: string;
+    buyerIpHeader?: string;
+}
+export interface RequestHandler {
+    (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
+}
+export declare type ShopifyConfig = {
+    defaultLocale?: string;
+    storeDomain: string;
+    storefrontToken: string;
+    storefrontApiVersion: string;
+    multipassSecret?: string;
+};

package/dist/node/shared-types.js

@@ -0,0 +1,5 @@
+"use strict";
+// These types are shared in ESM and CJS builds.
+// Do not import anything from subfolders here to avoid
+// affecting the files generated in the CJS build.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/node/utilities/web-api-polyfill.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const node_fetch_1 = __importStar(require("node-fetch"));
 const abort_controller_1 = __importDefault(require("abort-controller"));
 const ponyfill_1 = require("web-streams-polyfill/ponyfill");
+const undici_1 = require("undici");
 if (!globalThis.fetch) {
     Object.assign(globalThis, {
         fetch: node_fetch_1.default,
@@ -38,6 +39,11 @@ if (!globalThis.fetch) {
         AbortController: abort_controller_1.default,
     });
 }
+if (!globalThis.FormData) {
+    Object.assign(globalThis, {
+        FormData: undici_1.FormData,
+    });
+}
 if (!globalThis.ReadableStream) {
     Object.assign(globalThis, {
         ReadableStream: ponyfill_1.ReadableStream,

package/package.json

@@ -7,40 +7,53 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
+  "exports": {
+    ".": "./dist/esnext/index.js",
+    "./plugin": {
+      "import": "./dist/esnext/framework/plugin.js",
+      "require": "./dist/node/framework/plugin.js"
+    },
+    "./plugin.cjs": "./plugin.cjs",
+    "./middleware": {
+      "import": "./dist/esnext/framework/middleware.js",
+      "require": "./dist/node/framework/middleware.js"
+    },
+    "./load-config": {
+      "import": "./dist/esnext/framework/load-config.js",
+      "require": "./dist/node/framework/load-config.js"
+    },
+    "./web-polyfills": {
+      "import": "./dist/esnext/utilities/web-api-polyfill",
+      "require": "./dist/node/utilities/web-api-polyfill"
+    },
+    "./vendor/*": "./vendor/*",
+    "./cache/*": {
+      "import": "./dist/esnext/framework/cache/*.js",
+      "require": "./dist/node/framework/cache/*.js"
+    },
+    "./package.json": "./package.json",
+    "./*": "./dist/esnext/*.js"
+  },
   "types": "dist/esnext/index.d.ts",
   "files": [
     "dist",
-    "vendor",
-    "plugin.js",
-    "plugin.d.ts",
-    "entry-server.js",
-    "entry-server.d.ts",
-    "client.js",
-    "client.d.ts",
-    "config.js",
-    "config.d.ts",
-    "entry-client.js",
-    "entry-client.d.ts",
-    "marker.js",
-    "middleware.js",
-    "middleware.d.ts",
-    "web-polyfills.js"
+    "vendor"
   ],
   "scripts": {
-    "dev": "run-p dev-copy \"dev-esnext {@}/esnext\" \"dev-node {@}/node\" -- --outDir ../../node_modules/@shopify/hydrogen/dist",
-    "dev-esnext": "tsc -w --incremental --p tsconfig.build.json",
+    "dev": "run-p hoist-files  \"dev-esnext {@}/esnext\" \"dev-node {@}/node\" -- --outDir ../../node_modules/@shopify/hydrogen/dist",
+    "dev-esnext": "tsc -w --incremental --p tsconfig.esm.json",
     "dev-node": "tsc -w --incremental --p tsconfig.cjs.json",
-    "dev-copy": "cpy --parents *.[jt]s *.json vendor ../../node_modules/@shopify/hydrogen",
     "dev-graphql": "graphql-codegen --config codegen.yml --watch",
+    "hoist-files": "cpy --parents *.cjs *.json vendor ../../node_modules/@shopify/hydrogen",
+    "hoist-dist": "cpy --parents dist ../../node_modules/@shopify/hydrogen",
     "prebuild": "rimraf dist ../../node_modules/@shopify/hydrogen && mkdirp ../../node_modules/@shopify/hydrogen",
-    "build": "run-p build-esnext build-node && yarn build-copy",
-    "build-esnext": "tsc --p tsconfig.build.json",
+    "build": "run-p build-esnext build-node && yarn hoist-files && yarn hoist-dist",
+    "build-esnext": "tsc --p tsconfig.esm.json",
     "build-node": "tsc --p tsconfig.cjs.json",
-    "build-copy": "cpy --parents *.[jt]s *.json dist vendor ../../node_modules/@shopify/hydrogen",
     "lint": "eslint --ext .ts src/** --no-error-on-unmatched-pattern",
     "format": "prettier --write --parser typescript \"src/**/*.ts\"",
     "graphql-types": "graphql-codegen --config codegen.yml && yarn format",
@@ -76,7 +89,7 @@
     "@types/uuid": "^8.3.4",
     "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
-    "cpy-cli": "3.1.1",
+    "cpy-cli": "^3.1.0",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
@@ -86,8 +99,8 @@
   "peerDependencies": {
     "body-parser": "^1.20.0",
     "compression": "^1.7.4",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "serve-static": "^1.14.1",
     "vite": "^2.9.0"
   },
@@ -106,6 +119,7 @@
     "@vitejs/plugin-react": "^1.3.0",
     "abort-controller": "^3.0.0",
     "body-parser": "^1.20.0",
+    "compression": "^1.7.4",
     "connect": "^3.7.0",
     "es-module-lexer": "^0.10.0",
     "fast-glob": "^3.2.11",
@@ -118,7 +132,9 @@
     "path-to-regexp": "^6.2.0",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.2.3",
+    "serve-static": "^1.15.0",
     "set-cookie-parser": "^2.5.0",
+    "undici": "^5.5.1",
     "uuid": "^8.3.2",
     "vite-plugin-inspect": "^0.3.6",
     "web-streams-polyfill": "^3.2.0",

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-plugin.js

@@ -111,17 +111,9 @@ function ReactFlightVitePlugin() {
 
   var config;
   var server;
-  var invalidateTimeout;
-  var globImporterPath;
   var resolveAlias;
-
-  function invalidateGlobImporter() {
-    clearTimeout(invalidateTimeout);
-    invalidateTimeout = setTimeout(function () {
-      return server.watcher.emit('change', globImporterPath);
-    }, 100);
-  }
-
+  var globImporterPath;
+  var allClientBoundaries = new Set();
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
@@ -204,7 +196,12 @@ function ReactFlightVitePlugin() {
 
         if (!moduleNode.meta.isClientComponent) {
           moduleNode.meta.isClientComponent = true;
-          if (globImporterPath) invalidateGlobImporter();
+
+          if (globImporterPath) {
+            // Invalidate glob importer file to account for the
+            // newly discovered client component.
+            server.watcher.emit('change', globImporterPath);
+          }
         }
       }
 
@@ -254,7 +251,7 @@ function ReactFlightVitePlugin() {
           });
           var injectedGlobs = "Object.assign(Object.create(null), " + importers.map(function (glob) {
             return (// Mark the globs to modify the result after Vite resolves them.
-              "/* HASH_BEGIN */ " + ("import.meta.glob('" + vite.normalizePath(glob) + "') /* HASH_END */")
+              "\n/* HASH_BEGIN */ " + ("import.meta.glob('" + vite.normalizePath(glob) + "') /* HASH_END */")
             );
           }).join(', ') + ");";
           s.replace(INJECTING_RE, injectedGlobs);
@@ -268,8 +265,17 @@ function ReactFlightVitePlugin() {
         };
 
         if (config.command === 'serve') {
-          globImporterPath = id;
-          return injectGlobs(findClientBoundaries(server.moduleGraph));
+          globImporterPath = id; // When mixing client and server components from the same
+          // facade file, the module graph can break and miss certain
+          // import connections (bug in Vite?) due to HMR. Instead of
+          // creating a new list of discovered components from scratch,
+          // reuse the already discovered ones and simply add new ones
+          // to the list without removing anything.
+
+          findClientBoundaries(server.moduleGraph).forEach(function (boundary) {
+            return allClientBoundaries.add(boundary);
+          });
+          return injectGlobs(Array.from(allClientBoundaries));
         }
 
         if (!serverBuildEntries) {
@@ -409,21 +415,61 @@ var hashImportsPlugin = {
     }
   }
 };
+
 /**
  * A client module should behave as a client boundary
  * if it is imported by the server before encountering
  * another boundary in the process.
- * Traverse the module graph upwards to find non client
- * components that import the current module.
+ * This traverses the module graph upwards to find non client
+ * components that import the `originalMod`.
+ *
+ * The `accModInfo` represents the exported members from the
+ * `originalMod` but renamed accordingly to all the intermediate/facade
+ * files in the import chain from the `originalMod` to every parent importer.
  */
-
-function isDirectImportInServer(currentMod, originalMod) {
+function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // TODO: this should use recursion in any module that exports
   // the original one, not only in full facade files.
-  if (!originalMod || (currentMod.meta || {}).isFacade) {
-    return Array.from(currentMod.importers).some(function (importer) {
+  if (!currentMod || (currentMod.meta || {}).isFacade) {
+    if (!accModInfo && originalMod.meta && originalMod.meta.namedExports) {
+      // First iteration in the recursion, initialize the
+      // acumulator with data from the original module.
+      accModInfo = {
+        file: originalMod.file,
+        exports: originalMod.meta.namedExports
+      };
+    }
+
+    if (currentMod && accModInfo) {
+      // Update accumulator in subsequent iterations with
+      // whatever the current module is re-exporting.
+      var lastModExports = accModInfo.exports;
+      var lastModImports = currentMod.meta.imports.filter(function (importMeta) {
+        return importMeta.action === 'export' && importMeta.from === accModInfo.file;
+      });
+      accModInfo = {
+        file: currentMod.file,
+        exports: []
+      };
+      lastModImports.forEach(function (mod) {
+        mod.variables.forEach(function (_ref2) {
+          var name = _ref2[0],
+              alias = _ref2[1];
+
+          if (name === '*' && !alias) {
+            var _accModInfo$exports;
+
+            (_accModInfo$exports = accModInfo.exports).push.apply(_accModInfo$exports, lastModExports);
+          } else {
+            accModInfo.exports.push(alias || name);
+          }
+        });
+      });
+    }
+
+    return Array.from((currentMod || originalMod).importers || []).some(function (importer) {
       return (// eslint-disable-next-line no-unused-vars
-        isDirectImportInServer(importer, originalMod || currentMod)
+        isDirectImportInServer(originalMod, importer, accModInfo)
       );
     });
   } // Not enough information: safer to assume it is
@@ -439,14 +485,12 @@ function isDirectImportInServer(currentMod, originalMod) {
   // However, due to the lack of tree-shaking in the dev module graph,
   // we need to manually make sure this module is importing something from
   // the original module before marking it as client boundary.
-  // -- TODO: this only checks namedExports right now. It should
-  // consider default exports and variable renaming in facade modules.
 
   return currentMod.meta.imports.some(function (imp) {
-    return imp.action === 'import' && (imp.from === originalMod.file || (imp.variables || []).some(function (_ref2) {
-      var name = _ref2[0];
-      return originalMod.meta.namedExports.includes(name);
-    }));
+    return imp.action === 'import' && imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
+      var name = _ref3[0];
+      return accModInfo.exports.includes(name);
+    });
   });
 }
 
@@ -482,12 +526,12 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
 
 
   var imports = [];
-  rawImports.forEach(function (_ref3) {
-    var startMod = _ref3.s,
-        endMod = _ref3.e,
-        dynamicImportIndex = _ref3.d,
-        startStatement = _ref3.ss,
-        endStatement = _ref3.se;
+  rawImports.forEach(function (_ref4) {
+    var startMod = _ref4.s,
+        endMod = _ref4.e,
+        dynamicImportIndex = _ref4.d,
+        startStatement = _ref4.ss,
+        endStatement = _ref4.se;
     if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
 
     var rawModPath = code.slice(startMod, endMod);
@@ -497,10 +541,15 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
       var resolvedAliasPath = resolveAlias(modPath, 'rsc_importer', {});
 
       if (resolvedAliasPath && resolvedAliasPath.id) {
-        modPath = vite.normalizePath(path.join(root, resolvedAliasPath.id));
+        modPath = resolvedAliasPath.id;
       }
     }
 
+    if (modPath && modPath.startsWith('/src/')) {
+      // Vite default alias
+      modPath = vite.normalizePath(path.join(root, modPath));
+    }
+
     var resolvedPath = resolveModPath(modPath, dirname);
     if (!resolvedPath) return; // Virtual modules or other exceptions
 
@@ -513,7 +562,7 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
       action: action,
       // 'import' or 'export'
       variables: variables // [['originalName', 'alias']]
-      .replace(/[{}]/gm, '').trim().split(/\s*,\s*/m).filter(Boolean).map(function (s) {
+      .trim().replace(/^[^{*]/, 'default as $&').replace(/[{}]/gm, '').trim().split(/\s*,\s*/m).filter(Boolean).map(function (s) {
         return s.split(/\s+as\s+/m);
       }),
       from: resolvedPath,

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-writer.browser.development.server.js

@@ -16,6 +16,8 @@ if (process.env.NODE_ENV !== "production") {
 
 var React = require('react');
 
+var assign = Object.assign;
+
 var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
 function error(format) {
@@ -543,10 +545,12 @@ var startPendingSuspenseBoundary1 = stringToPrecomputedChunk('<!--$?--><template
 var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
 var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
 var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
-var clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk('<template data-hash="');
-var clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk('" data-msg="');
-var clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk('" data-stack="');
-var clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk('"></template>');
+var clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk('<template');
+var clientRenderedSuspenseBoundaryErrorAttrInterstitial = stringToPrecomputedChunk('"');
+var clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk(' data-dgst="');
+var clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk(' data-msg="');
+var clientRenderedSuspenseBoundaryError1C = stringToPrecomputedChunk(' data-stck="');
+var clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk('></template>');
 var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
 var startSegmentHTML2 = stringToPrecomputedChunk('">');
 var endSegmentHTML = stringToPrecomputedChunk('</div>');
@@ -576,7 +580,7 @@ var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 // const SUSPENSE_PENDING_START_DATA = '$?';
 // const SUSPENSE_FALLBACK_START_DATA = '$!';
 //
-// function clientRenderBoundary(suspenseBoundaryID, errorHash, errorMsg, errorComponentStack) {
+// function clientRenderBoundary(suspenseBoundaryID, errorDigest, errorMsg, errorComponentStack) {
 //   // Find the fallback's first element.
 //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   if (!suspenseIdNode) {
@@ -590,9 +594,9 @@ var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
 //   // assign error metadata to first sibling
 //   let dataset = suspenseIdNode.dataset;
-//   if (errorHash) dataset.hash = errorHash;
+//   if (errorDigest) dataset.dgst = errorDigest;
 //   if (errorMsg) dataset.msg = errorMsg;
-//   if (errorComponentStack) dataset.stack = errorComponentStack;
+//   if (errorComponentStack) dataset.stck = errorComponentStack;
 //   // Tell React to retry it if the parent already hydrated.
 //   if (suspenseNode._reactRetry) {
 //     suspenseNode._reactRetry();
@@ -676,7 +680,7 @@ var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 
 var completeSegmentFunction = 'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
 var completeBoundaryFunction = 'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
-var clientRenderFunction = 'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.hash=c),d&&(a.msg=d),e&&(a.stack=e),b._reactRetry&&b._reactRetry())}';
+var clientRenderFunction = 'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),b._reactRetry&&b._reactRetry())}';
 var completeSegmentScript1Full = stringToPrecomputedChunk(completeSegmentFunction + ';$RS("');
 var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 var completeSegmentScript2 = stringToPrecomputedChunk('","');
@@ -881,6 +885,14 @@ function readContext(context) {
   return value;
 }
 
+var currentRequest = null;
+function prepareToUseHooksForRequest(request) {
+  currentRequest = request;
+}
+function resetHooksForRequest() {
+  currentRequest = null;
+}
+
 function readContext$1(context) {
   {
     if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
@@ -929,7 +941,7 @@ var Dispatcher = {
   useLayoutEffect: unsupportedHook,
   useImperativeHandle: unsupportedHook,
   useEffect: unsupportedHook,
-  useId: unsupportedHook,
+  useId: useId,
   useMutableSource: unsupportedHook,
   useSyncExternalStore: unsupportedHook,
   useCacheRefresh: function () {
@@ -956,6 +968,16 @@ function getCurrentCache() {
   return currentCache;
 }
 
+function useId() {
+  if (currentRequest === null) {
+    throw new Error('useId can only be used while React is rendering');
+  }
+
+  var id = currentRequest.identifierCount++; // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client
+
+  return ':' + currentRequest.identifierPrefix + 'S' + id.toString(32) + ':';
+}
+
 var ContextRegistry = ReactSharedInternals.ContextRegistry;
 function getOrCreateServerContext(globalName) {
   if (!ContextRegistry[globalName]) {
@@ -974,7 +996,7 @@ function defaultErrorHandler(error) {
 var OPEN = 0;
 var CLOSING = 1;
 var CLOSED = 2;
-function createRequest(model, bundlerConfig, onError, context) {
+function createRequest(model, bundlerConfig, onError, context, identifierPrefix) {
   var pingedSegments = [];
   var request = {
     status: OPEN,
@@ -991,6 +1013,8 @@ function createRequest(model, bundlerConfig, onError, context) {
     writtenSymbols: new Map(),
     writtenModules: new Map(),
     writtenProviders: new Map(),
+    identifierPrefix: identifierPrefix || '',
+    identifierCount: 1,
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function (key, value) {
       return resolveModelToJSON(request, this, key, value);
@@ -1603,6 +1627,7 @@ function performWork(request) {
   var prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
   setCurrentCache(request.cache);
+  prepareToUseHooksForRequest(request);
 
   try {
     var pingedSegments = request.pingedSegments;
@@ -1622,6 +1647,7 @@ function performWork(request) {
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
     setCurrentCache(prevCache);
+    resetHooksForRequest();
   }
 }
 
@@ -1747,9 +1773,20 @@ function importServerContexts(contexts) {
   return rootContextSnapshot;
 }
 
-function renderToReadableStream(model, options, context) {
-  var request = createRequest(model, {}, // Manifest, not used
-  options ? options.onError : undefined, context);
+function renderToReadableStream(model, options) {
+  var request = createRequest( // Wrap root in a dummy element that simply adds a flag
+  // to the current dispatcher to check later in the proxies.
+  assign({}, model, {
+    $$typeof: Symbol.for('react.element'),
+    props: {
+      children: model
+    },
+    type: function () {
+      React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current.isRsc = true;
+      return model;
+    }
+  }), {}, // Manifest, not used
+  options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined);
   var stream = new ReadableStream({
     type: 'bytes',
     start: function (controller) {