@shopify/hydrogen 1.0.2 → 1.3.0

package/dist/node/framework/plugins/vite-plugin-css-rsc.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const magic_string_1 = __importDefault(require("magic-string"));
+const vite_1 = require("vite");
+const VITE_CSS_CHUNK_NAME = 'style.css';
+const INJECT_STYLES_COMMENT = '<!--__INJECT_STYLES__-->';
+// Keep this in the outer scope to share it
+// across client <> server builds.
+let clientBuildPath;
+function cssRsc() {
+    let config;
+    return {
+        name: 'hydrogen:css-rsc',
+        enforce: 'post',
+        config() {
+            // Disable CSS code split to avoid preloading styles
+            // that are already included in index.html
+            return { build: { cssCodeSplit: false } };
+        },
+        configResolved(_config) {
+            config = _config;
+        },
+        transform(code, id, options) {
+            if (options?.ssr && id.includes('index.html?raw')) {
+                // Mark the client build index.html to inject styles later
+                const s = new magic_string_1.default(code);
+                s.replace('</head>', INJECT_STYLES_COMMENT + '</head>');
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
+        },
+        transformIndexHtml(html, { server }) {
+            // Add discovered styles during dev
+            if (server) {
+                const tags = [];
+                const foundCssFiles = new Set();
+                for (const [key, value] of server.moduleGraph.idToModuleMap.entries()) {
+                    if (
+                    // Note: Some CSS-in-JS libraries use `.css.js`
+                    // extension and we should match it here:
+                    /\.(css|sass|scss|stylus|less)(\.|\?|$)/.test((0, vite_1.normalizePath)(key).split('/').pop())) {
+                        let { url, file, lastHMRTimestamp, importers } = value;
+                        if (!foundCssFiles.has(file) &&
+                            !Array.from(importers).some((importer) => foundCssFiles.has(importer.file))) {
+                            foundCssFiles.add(file);
+                            // Vite is adding hash and timestamp to the CSS files downloaded
+                            // from client components. Adding the same query string params
+                            // here prevents this file from being downloaded twice.
+                            if (lastHMRTimestamp) {
+                                const timestampQuery = `?t=${lastHMRTimestamp}`;
+                                // The timestamp needs to be the first query string param.
+                                url = url.includes('?')
+                                    ? url.replace('?', timestampQuery + '&')
+                                    : url + timestampQuery;
+                            }
+                            tags.push(value.type === 'css'
+                                ? { tag: 'link', attrs: { rel: 'stylesheet', href: url } }
+                                : { tag: 'script', attrs: { type: 'module', src: url } });
+                        }
+                    }
+                }
+                return tags;
+            }
+        },
+        generateBundle(options, bundle, isWrite) {
+            if (config.build?.ssr) {
+                // -- Server build
+                if (!clientBuildPath) {
+                    // Default value
+                    clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client'));
+                }
+                const relativeClientPath = (0, vite_1.normalizePath)(path_1.default.relative((0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir)), clientBuildPath));
+                let cssAssetFileName = '';
+                const cssAsset = Object.values(bundle).find((file) => file.type === 'asset' && file.name === VITE_CSS_CHUNK_NAME);
+                const outputChunk = Object.values(bundle).find((file) => file.type === 'chunk' && file.isEntry);
+                if (cssAsset) {
+                    cssAssetFileName = cssAsset.fileName;
+                    // Move the CSS file to the client build assets
+                    cssAsset.fileName = (0, vite_1.normalizePath)(path_1.default.join(relativeClientPath, cssAsset.fileName));
+                }
+                let assetPrefix = process.env.HYDROGEN_ASSET_BASE_URL || '/';
+                if (!assetPrefix.endsWith('/'))
+                    assetPrefix += '/';
+                // Add a reference to the CSS file in indexTemplate
+                outputChunk.code = outputChunk.code.replace(INJECT_STYLES_COMMENT, cssAssetFileName &&
+                    `<link rel="stylesheet" href="${assetPrefix + cssAssetFileName}">`);
+            }
+            else {
+                // -- Client build
+                // Save outDir from client build in the outer scope
+                // to read it during the server build. The CLI runs Vite in
+                // the same process so the scope is shared across builds.
+                clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir));
+                const indexHtml = bundle['index.html'];
+                const cssAsset = Object.values(bundle).find((file) => file.type === 'asset' && file.name === VITE_CSS_CHUNK_NAME);
+                if (cssAsset) {
+                    // The client build CSS is incomplete because it only includes
+                    // CSS imported in client components (server components are not
+                    // discovered in this build). Remove it from this build and
+                    // let it be added by the server build after this.
+                    delete bundle[cssAsset.fileName];
+                    indexHtml.source = indexHtml.source.replace(new RegExp(`\\s*<link[^<>]+${cssAsset.fileName.replace('.', '\\.')}.*?>`, ''), '');
+                }
+            }
+        },
+    };
+}
+exports.default = cssRsc;

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.d.ts

@@ -1,3 +1,4 @@
 import { Plugin } from 'vite';
-declare const _default: () => Plugin;
+import type { HydrogenVitePluginOptions } from '../types.js';
+declare const _default: (pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;

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

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = () => {
+const crypto_1 = __importDefault(require("crypto"));
+exports.default = (pluginOptions) => {
     const rollupOptions = {
         output: {},
     };
@@ -25,7 +29,7 @@ exports.default = () => {
         };
     }
     return {
-        name: 'vite-plugin-hydrogen-config',
+        name: 'hydrogen:config',
         config: async (config, env) => ({
             resolve: {
                 alias: {
@@ -50,7 +54,7 @@ exports.default = () => {
                  * Tell Vite to bundle everything when we're building for Workers.
                  * Otherwise, bundle RSC plugin as a workaround to apply the vendor alias above.
                  */
-                noExternal: isWorker || [/react-server-dom-vite/],
+                noExternal: isWorker || [/react-server-dom-vite/, /@shopify\/hydrogen/],
                 target: isWorker ? 'webworker' : 'node',
             },
             // Reload when updating local Hydrogen lib
@@ -95,7 +99,10 @@ exports.default = () => {
             define: {
                 __HYDROGEN_DEV__: env.mode !== 'production',
                 __HYDROGEN_WORKER__: isWorker,
-                __HYDROGEN_TEST__: false, // Used in unit tests
+                __HYDROGEN_TEST__: false,
+                __HYDROGEN_CACHE_ID__: pluginOptions.purgeQueryCacheOnBuild
+                    ? `"${crypto_1.default.randomBytes(8).toString('hex').slice(0, 8)}"`
+                    : '"__QUERY_CACHE_ID__"',
             },
             envPrefix: ['VITE_', 'PUBLIC_'],
             base: process.env.HYDROGEN_ASSET_BASE_URL,

package/dist/node/framework/plugins/vite-plugin-hydrogen-middleware.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import type { HydrogenVitePluginOptions } from '../types';
+import type { HydrogenVitePluginOptions } from '../types.js';
 export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
 declare const _default: (pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;

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

@@ -8,9 +8,9 @@ const vite_1 = require("vite");
 const body_parser_1 = __importDefault(require("body-parser"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
-const middleware_1 = require("../middleware");
-const in_memory_1 = require("../cache/in-memory");
-const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+const middleware_js_1 = require("../middleware.js");
+const in_memory_js_1 = require("../cache/in-memory.js");
+const vite_plugin_hydrogen_virtual_files_js_1 = require("./vite-plugin-hydrogen-virtual-files.js");
 exports.HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
 exports.default = (pluginOptions) => {
     return {
@@ -30,10 +30,10 @@ exports.default = (pluginOptions) => {
             await polyfillOxygenEnv(server.config);
             // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
             // By running this middleware first, we avoid that.
-            server.middlewares.use((0, middleware_1.graphiqlMiddleware)({
+            server.middlewares.use((0, middleware_js_1.graphiqlMiddleware)({
                 dev: true,
                 getShopifyConfig: async (incomingMessage) => {
-                    const { default: hydrogenConfig } = await server.ssrLoadModule(vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
+                    const { default: hydrogenConfig } = await server.ssrLoadModule(vite_plugin_hydrogen_virtual_files_js_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
                     // @ts-ignore
                     const { address = 'localhost', port = '3000' } = server.httpServer?.address() || {};
                     const url = new URL(`http://${address}:${port}${incomingMessage.url}`);
@@ -48,13 +48,13 @@ exports.default = (pluginOptions) => {
                 },
             }));
             server.middlewares.use(body_parser_1.default.raw({ type: '*/*' }));
-            return () => server.middlewares.use((0, middleware_1.hydrogenMiddleware)({
+            return () => server.middlewares.use((0, middleware_js_1.hydrogenMiddleware)({
                 dev: true,
                 indexTemplate: getIndexTemplate,
                 getServerEntrypoint: () => server.ssrLoadModule(exports.HYDROGEN_DEFAULT_SERVER_ENTRY),
                 devServer: server,
                 cache: pluginOptions?.devCache
-                    ? new in_memory_1.InMemoryCache()
+                    ? new in_memory_js_1.InMemoryCache()
                     : undefined,
             }));
         },

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.d.ts

@@ -1,2 +1,2 @@
-import { HydrogenVitePluginOptions } from '../types';
+import { HydrogenVitePluginOptions } from '../types.js';
 export default function (options?: HydrogenVitePluginOptions): any;

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

@@ -5,19 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-ignore
 const plugin_js_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin.js"));
-const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
-const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+const vite_plugin_hydrogen_middleware_js_1 = require("./vite-plugin-hydrogen-middleware.js");
+const vite_plugin_hydrogen_virtual_files_js_1 = require("./vite-plugin-hydrogen-virtual-files.js");
 function default_1(options) {
     return (0, plugin_js_1.default)({
         serverBuildEntries: [
-            vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
-            vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
+            vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
+            vite_plugin_hydrogen_virtual_files_js_1.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
         ],
         isServerComponentImporterAllowed(importer, source) {
             return (
             // Always allow the entry server (e.g. App.server.jsx) to be imported
             // in other files such as worker.js or server.js.
-            source.includes(vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY) ||
+            source.includes(vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY) ||
                 /(index|entry-server|hydrogen\.config)\.[jt]s/.test(importer) ||
                 // Support importing server components for testing
                 // TODO: revisit this when RSC splits into two bundles

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

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import type { HydrogenVitePluginOptions } from '../types';
+import type { HydrogenVitePluginOptions } from '../types.js';
 export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
 export declare const VIRTUAL_PROXY_HYDROGEN_CONFIG_ID: string;
 export declare const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID: string;

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

@@ -7,11 +7,14 @@ exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = exports.VIRTUAL_PROXY_HYDROGEN_CONFIG
 const vite_1 = require("vite");
 const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
-const viteception_1 = require("../viteception");
+const viteception_js_1 = require("../viteception.js");
+const magic_string_1 = __importDefault(require("magic-string"));
 exports.HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
 // The character ":" breaks Vite with Node >= 16.15. Use "_" instead
 const VIRTUAL_PREFIX = 'virtual__';
 const PROXY_PREFIX = 'proxy__';
+const ERROR_FILE = 'error.jsx';
+const VIRTUAL_ERROR_FILE = VIRTUAL_PREFIX + ERROR_FILE;
 const HYDROGEN_CONFIG_ID = 'hydrogen.config.ts';
 const VIRTUAL_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + HYDROGEN_CONFIG_ID;
 exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDROGEN_CONFIG_ID;
@@ -21,6 +24,7 @@ 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) {
@@ -31,15 +35,18 @@ exports.default = (pluginOptions) => {
         },
         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 = (0, vite_1.normalizePath)(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,
                 exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
                 VIRTUAL_HYDROGEN_ROUTES_ID,
+                VIRTUAL_ERROR_FILE,
             ].includes(source)) {
                 // Virtual modules convention
                 // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
@@ -50,7 +57,7 @@ exports.default = (pluginOptions) => {
             // Likely due to a bug in Vite, but virtual modules cannot be loaded
             // directly using ssrLoadModule from a Vite plugin. It needs to be proxied as follows:
             if (id === '\0' + exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
-                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default hc;`;
+                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default typeof hc === 'function' ? hc() : hc;`;
             }
             if (id === '\0' + exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID) {
                 return `import hr from '${VIRTUAL_HYDROGEN_ROUTES_ID}'; export default hr;`;
@@ -77,6 +84,25 @@ exports.default = (pluginOptions) => {
                     return { code };
                 });
             }
+            if (id === '\0' + VIRTUAL_ERROR_FILE) {
+                return importHydrogenConfig().then((hc) => {
+                    const errorPath = hc.serverErrorPage ?? '/src/Error.{jsx,tsx}';
+                    const code = `const errorPage = import.meta.glob("${errorPath}");\n export default Object.values(errorPage)[0];`;
+                    return { code };
+                });
+            }
+        },
+        transform(code, id) {
+            if (id === resolvedConfigPath) {
+                const s = new magic_string_1.default(code);
+                // Wrap in function to avoid evaluating `Oxygen.env`
+                // in the config until we have polyfilled it properly.
+                s.replace(/export\s+default\s+(\w+)\s*\(/g, (all, m1) => all.replace(m1, `() => ${m1}`));
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
         },
     };
     async function importHydrogenConfig() {
@@ -84,7 +110,9 @@ exports.default = (pluginOptions) => {
             const loaded = await server.ssrLoadModule(exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
             return loaded.default;
         }
-        const { loaded } = await (0, viteception_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
+        const { loaded } = await (0, viteception_js_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], {
+            root: config.root,
+        });
         return loaded[0].default;
     }
 };

package/dist/node/framework/plugins/vite-plugin-platform-entry.js

@@ -4,16 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const vite_1 = require("vite");
-const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
+const vite_plugin_hydrogen_middleware_js_1 = require("./vite-plugin-hydrogen-middleware.js");
 const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
+const fast_glob_1 = __importDefault(require("fast-glob"));
 const SSR_BUNDLE_NAME = 'index.js';
+// Keep this in the outer scope to share it
+// across client <> server builds.
+let clientBuildPath;
 exports.default = () => {
     let config;
     let isESM;
     return {
-        name: 'vite-plugin-platform-entry',
+        name: 'hydrogen:platform-entry',
         enforce: 'pre',
         configResolved(_config) {
             config = _config;
@@ -34,18 +38,43 @@ exports.default = () => {
             }
             return null;
         },
-        transform(code, id) {
-            if ((0, vite_1.normalizePath)(id).includes('/hydrogen/dist/esnext/platforms/')) {
+        async transform(code, id, options) {
+            if (config.command === 'build' &&
+                options?.ssr &&
+                /@shopify\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
                 const ms = new magic_string_1.default(code);
-                ms.replace('__SERVER_ENTRY__', vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
-                const indexTemplatePath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client', 'index.html'));
-                ms.replace('__INDEX_TEMPLATE__', indexTemplatePath);
+                ms.replace('__HYDROGEN_ENTRY__', vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
+                if (!clientBuildPath) {
+                    // Default value
+                    clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client'));
+                }
+                ms.replace('__HYDROGEN_HTML_TEMPLATE__', (0, vite_1.normalizePath)(path_1.default.resolve(clientBuildPath, 'index.html')));
+                ms.replace('__HYDROGEN_RELATIVE_CLIENT_BUILD__', (0, vite_1.normalizePath)(path_1.default.relative((0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir)), clientBuildPath)));
+                const files = clientBuildPath
+                    ? (await (0, fast_glob_1.default)('**/*', {
+                        cwd: clientBuildPath,
+                        ignore: ['**/index.html', `**/${config.build.assetsDir}/**`],
+                    })).map((file) => '/' + file)
+                    : [];
+                ms.replace("\\['__HYDROGEN_ASSETS__'\\]", JSON.stringify(files));
+                ms.replace('__HYDROGEN_ASSETS_DIR__', config.build.assetsDir);
+                ms.replace('__HYDROGEN_ASSETS_BASE_URL__', (process.env.HYDROGEN_ASSET_BASE_URL || '').replace(/\/$/, ''));
+                // Remove the poison pill
+                ms.replace('throw', '//');
                 return {
                     code: ms.toString(),
                     map: ms.generateMap({ file: id, source: id }),
                 };
             }
         },
+        buildEnd(err) {
+            if (!err && !config.build.ssr && config.command === 'build') {
+                // Save outDir from client build in the outer scope in order
+                // to read it during the server build. The CLI runs Vite in
+                // the same process so the scope is shared across builds.
+                clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir));
+            }
+        },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
                 const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);

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

@@ -3,4 +3,18 @@ export interface HydrogenVitePluginOptions {
     purgeQueryCacheOnBuild?: boolean;
     configPath?: string;
     optimizeBoundaries?: boolean | 'build';
+    assetHashVersion?: string;
+    /**
+     * Experimental features
+     */
+    experimental?: {
+        /**
+         * CSS compatibility with React Server Components.
+         * - `global` inlines all the styles in the DOM and works for all types of CSS.
+         * - `modules-only` inlines the styles in RSC responses and only works for CSS Modules.
+         * @defaultValue `modules-only`
+         * @experimental
+         */
+        css: 'global' | 'modules-only';
+    };
 }

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

@@ -1,5 +1,6 @@
 /// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'http';
+import type { SessionStorageAdapter } from './foundation/session/session-types';
 export interface RuntimeContext {
     waitUntil: (fn: Promise<any>) => void;
 }
@@ -13,6 +14,8 @@ export interface RequestHandlerOptions {
     context?: RuntimeContext;
     nonce?: string;
     buyerIpHeader?: string;
+    sessionApi?: SessionStorageAdapter;
+    headers?: Headers;
 }
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;

package/package.json

@@ -7,12 +7,16 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.0.2",
+  "version": "1.3.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
   "exports": {
     ".": "./dist/esnext/index.js",
+    "./experimental": {
+      "import": "./dist/esnext/experimental.js",
+      "require": "./dist/node/experimental.js"
+    },
     "./plugin": {
       "import": "./dist/esnext/framework/plugin.js",
       "require": "./dist/node/framework/plugin.js"
@@ -35,6 +39,11 @@
       "import": "./dist/esnext/framework/cache/*.js",
       "require": "./dist/node/framework/cache/*.js"
     },
+    "./platforms": {
+      "types": "./dist/esnext/platforms/virtual.d.ts",
+      "import": "./dist/esnext/platforms/virtual.js",
+      "require": "./dist/node/platforms/virtual.js"
+    },
     "./package.json": "./package.json",
     "./*": "./dist/esnext/*.js"
   },
@@ -57,7 +66,9 @@
     "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",
-    "prepack": "yarn build"
+    "prepack": "yarn build",
+    "test:vitest": "vitest",
+    "test:vitest:ci": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -78,6 +89,9 @@
     "@graphql-codegen/typescript-operations": "2.3.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@rollup/plugin-graphql": "^1.0.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.3.0",
     "@types/body-parser": "^1.19.2",
     "@types/connect": "^3.4.34",
     "@types/graphql": "^14.5.0",
@@ -90,11 +104,14 @@
     "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
     "cpy-cli": "^3.1.0",
+    "eslint-plugin-import": "^2.26.0",
+    "happy-dom": "^6.0.4",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
     "raw-loader": "^4.0.2",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "vitest": "^0.22.0"
   },
   "peerDependencies": {
     "body-parser": "^1.20.0",

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

@@ -126,6 +126,13 @@ function ReactFlightVitePlugin() {
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
+    buildStart: function () {
+      // Let other plugins differentiate between pure SSR and RSC builds
+      if (config?.build?.ssr) process.env.VITE_RSC_BUILD = 'true';
+    },
+    buildEnd: function () {
+      if (config?.build?.ssr) delete process.env.VITE_RSC_BUILD;
+    },
     configureServer: function (_server) {
       server = _server;
       var seenModules = {};
@@ -295,8 +302,21 @@ function ReactFlightVitePlugin() {
           throw new Error('[react-server-dom-vite] Parameter serverBuildEntries is required for client build');
         }
 
-        return findClientBoundariesForClientBuild(serverBuildEntries, optimizeBoundaries !== false).then(injectGlobs);
+        return findClientBoundariesForClientBuild(serverBuildEntries, optimizeBoundaries !== false, config.root).then(injectGlobs);
+      }
+    },
+    handleHotUpdate: function (_ref2) {
+      var modules = _ref2.modules;
+
+      if (modules.some(function (mod) {
+        return mod.meta && mod.meta.isClientComponent;
+      })) {
+        return modules.filter(function (mod) {
+          return !mod.meta || !mod.meta.ssr;
+        });
       }
+
+      return modules;
     }
   };
 }
@@ -385,9 +405,10 @@ function findClientBoundaries(moduleGraph) {
   return clientBoundaries;
 }
 
-async function findClientBoundariesForClientBuild(serverEntries, optimizeBoundaries) {
+async function findClientBoundariesForClientBuild(serverEntries, optimizeBoundaries, root) {
   // Viteception
   var server = await vite.createServer({
+    root: root,
     clearScreen: false,
     server: {
       middlewareMode: 'ssr'
@@ -466,9 +487,9 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
         exports: []
       };
       lastModImports.forEach(function (mod) {
-        mod.variables.forEach(function (_ref2) {
-          var name = _ref2[0],
-              alias = _ref2[1];
+        mod.variables.forEach(function (_ref3) {
+          var name = _ref3[0],
+              alias = _ref3[1];
 
           if (name === '*' && !alias) {
             var _accModInfo$exports;
@@ -501,8 +522,8 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // the original module before marking it as client boundary.
 
   return currentMod.meta.imports.some(function (imp) {
-    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
-      var name = _ref3[0];
+    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref4) {
+      var name = _ref4[0];
       return accModInfo.exports.includes(name);
     });
   });
@@ -540,12 +561,12 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
 
 
   var imports = [];
-  rawImports.forEach(function (_ref4) {
-    var startMod = _ref4.s,
-        endMod = _ref4.e,
-        dynamicImportIndex = _ref4.d,
-        startStatement = _ref4.ss,
-        endStatement = _ref4.se;
+  rawImports.forEach(function (_ref5) {
+    var startMod = _ref5.s,
+        endMod = _ref5.e,
+        dynamicImportIndex = _ref5.d,
+        startStatement = _ref5.ss,
+        endStatement = _ref5.se;
     if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
 
     var rawModPath = code.slice(startMod, endMod);
@@ -593,7 +614,8 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
   assign(currentModule.meta, {
     isFacade: isFacade,
     namedExports: namedExports,
-    imports: imports
+    imports: imports,
+    ssr: true
   });
 }