@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/node/framework/cache.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateDefaultCacheControlHeader = void 0;
+const runtime_1 = require("./runtime");
+const CachingStrategy_1 = require("../framework/CachingStrategy");
+const log_1 = require("../utilities/log");
+function getCacheControlSetting(userCacheOptions, options) {
+    if (userCacheOptions && options) {
+        return {
+            ...userCacheOptions,
+            ...options,
+        };
+    }
+    else {
+        return userCacheOptions || (0, CachingStrategy_1.CacheSeconds)();
+    }
+}
+function generateDefaultCacheControlHeader(userCacheOptions) {
+    return (0, CachingStrategy_1.generateCacheControlHeader)(getCacheControlSetting(userCacheOptions));
+}
+exports.generateDefaultCacheControlHeader = generateDefaultCacheControlHeader;
+/**
+ * Get an item from the cache. If a match is found, returns a tuple
+ * containing the `JSON.parse` version of the response as well
+ * as the response itself so it can be checked for staleness.
+ */
+async function getItemFromCache(request) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache) {
+        return;
+    }
+    const response = await cache.match(request);
+    if (!response) {
+        (0, log_1.logCacheApiStatus)('MISS', request.url);
+        return;
+    }
+    (0, log_1.logCacheApiStatus)('HIT', request.url);
+    return response;
+}
+exports.getItemFromCache = getItemFromCache;
+/**
+ * Put an item into the cache.
+ */
+async function setItemInCache(request, response, userCacheOptions) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache) {
+        return;
+    }
+    /**
+     * We are manually managing staled request by adding this workaround.
+     * Why? cache control header support is dependent on hosting platform
+     *
+     * For example:
+     *
+     * Cloudflare's Cache API does not support `stale-while-revalidate`.
+     * Cloudflare cache control header has a very odd behaviour.
+     * Say we have the following cache control header on a request:
+     *
+     *   public, max-age=15, stale-while-revalidate=30
+     *
+     * When there is a cache.match HIT, the cache control header would become
+     *
+     *   public, max-age=14400, stale-while-revalidate=30
+     *
+     * == `stale-while-revalidate` workaround ==
+     * Update response max-age so that:
+     *
+     *   max-age = max-age + stale-while-revalidate
+     *
+     * For example:
+     *
+     *   public, max-age=1, stale-while-revalidate=9
+     *                    |
+     *                    V
+     *   public, max-age=10, stale-while-revalidate=9
+     *
+     * Store the following information in the response header:
+     *
+     *   cache-put-date   - UTC time string of when this request is PUT into cache
+     *
+     * Note on `cache-put-date`: The `response.headers.get('date')` isn't static. I am
+     * not positive what date this is returning but it is never over 500 ms
+     * after subtracting from the current timestamp.
+     *
+     * `isStale` function will use the above information to test for stale-ness of a cached response
+     */
+    const cacheControl = getCacheControlSetting(userCacheOptions);
+    // The padded cache-control to mimic stale-while-revalidate
+    request.headers.set('cache-control', generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl, {
+        maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
+    })));
+    // The cache-control we want to set on response
+    const cacheControlString = generateDefaultCacheControlHeader(getCacheControlSetting(cacheControl));
+    // CF will override cache-control, so we need to keep a
+    // non-modified real-cache-control
+    response.headers.set('cache-control', cacheControlString);
+    response.headers.set('real-cache-control', cacheControlString);
+    response.headers.set('cache-put-date', new Date().toUTCString());
+    (0, log_1.logCacheApiStatus)('PUT', request.url);
+    await cache.put(request, response);
+}
+exports.setItemInCache = setItemInCache;
+async function deleteItemFromCache(request) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache)
+        return;
+    (0, log_1.logCacheApiStatus)('DELETE', request.url);
+    await cache.delete(request);
+}
+exports.deleteItemFromCache = deleteItemFromCache;
+/**
+ * Manually check the response to see if it's stale.
+ */
+function isStale(request, response) {
+    const responseDate = response.headers.get('cache-put-date');
+    const cacheControl = response.headers.get('real-cache-control');
+    let responseMaxAge = 0;
+    if (cacheControl) {
+        const maxAgeMatch = cacheControl.match(/max-age=(\d*)/);
+        if (maxAgeMatch && maxAgeMatch.length > 1) {
+            responseMaxAge = parseFloat(maxAgeMatch[1]);
+        }
+    }
+    if (!responseDate) {
+        return false;
+    }
+    const ageInMs = new Date().valueOf() - new Date(responseDate).valueOf();
+    const age = ageInMs / 1000;
+    const result = age > responseMaxAge;
+    if (result) {
+        (0, log_1.logCacheApiStatus)('STALE', request.url);
+    }
+    return result;
+}
+exports.isStale = isStale;

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

@@ -0,0 +1,6 @@
+declare type HydrogenConfig = {
+    dev?: boolean;
+};
+export declare function setConfig(config: HydrogenConfig): void;
+export declare function getConfig(): HydrogenConfig;
+export {};

package/dist/node/framework/config.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = exports.setConfig = void 0;
+function setConfig(config) {
+    globalThis.__config = config;
+}
+exports.setConfig = setConfig;
+function getConfig() {
+    return globalThis.__config || {};
+}
+exports.getConfig = getConfig;

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

@@ -0,0 +1 @@
+export declare function graphiqlHtml(shop: string, token: string, apiVersion: string): string;

package/dist/node/framework/graphiql.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.graphiqlHtml = void 0;
+function graphiqlHtml(shop, token, apiVersion) {
+    return `<html>
+  <head>
+    <title>Shopify Storefront API</title>
+    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
+  </head>
+  <body style="margin: 0;">
+    <div id="graphiql" style="height: 100vh;"></div>
+    <script
+      crossorigin
+      src="https://unpkg.com/react/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+    ></script>
+    <script>
+      const fetcher = GraphiQL.createFetcher({
+        url: 'https://${shop}/api/${apiVersion}/graphql.json',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/graphql',
+          'X-Shopify-Storefront-Access-Token': '${token}'
+        }
+      });
+      ReactDOM.render(
+        React.createElement(GraphiQL, { fetcher: fetcher }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
+`;
+}
+exports.graphiqlHtml = graphiqlHtml;

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

@@ -0,0 +1,21 @@
+import type { IncomingMessage, NextFunction } from 'connect';
+import type { ServerResponse } from 'http';
+import type { ViteDevServer } from 'vite';
+import type { ShopifyConfig } from '../types';
+declare type HydrogenMiddlewareArgs = {
+    dev?: boolean;
+    indexTemplate: string | ((url: string) => Promise<string>);
+    getServerEntrypoint: () => any;
+    devServer?: ViteDevServer;
+    cache?: Cache;
+};
+export declare function graphiqlMiddleware({ getShopifyConfig, dev, }: {
+    getShopifyConfig: (request: IncomingMessage) => ShopifyConfig | Promise<ShopifyConfig>;
+    dev?: boolean;
+}): (request: IncomingMessage, response: ServerResponse, next: NextFunction) => Promise<void>;
+/**
+ * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
+ * Vite dev server plugin as well as production Node.js implementation.
+ */
+export declare function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }: HydrogenMiddlewareArgs): (request: IncomingMessage, response: ServerResponse, next: NextFunction) => Promise<void>;
+export {};

package/dist/node/framework/middleware.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hydrogenMiddleware = exports.graphiqlMiddleware = void 0;
+const graphiql_1 = require("./graphiql");
+function graphiqlMiddleware({ getShopifyConfig, dev, }) {
+    return async function (request, response, next) {
+        if (dev && isGraphiqlRequest(request)) {
+            const shopifyConfig = await getShopifyConfig(request);
+            return respondWithGraphiql(response, shopifyConfig);
+        }
+        next();
+    };
+}
+exports.graphiqlMiddleware = graphiqlMiddleware;
+let entrypointError = null;
+/**
+ * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
+ * Vite dev server plugin as well as production Node.js implementation.
+ */
+function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+    if (dev && devServer) {
+        // Store this globally for devtools
+        // @ts-ignore
+        globalThis.__viteDevServer = devServer;
+    }
+    /**
+     * We're running in the Node.js runtime without access to `fetch`,
+     * which is needed for proxy requests and server-side API requests.
+     */
+    const webPolyfills = !globalThis.fetch || !globalThis.ReadableStream
+        ? Promise.resolve().then(() => __importStar(require('../utilities/web-api-polyfill'))) : undefined;
+    return async function (request, response, next) {
+        var _a, _b, _c;
+        try {
+            await webPolyfills;
+            const entrypoint = await Promise.resolve(getServerEntrypoint()).catch((error) => {
+                // Errors are only thrown the first time we try to load the entry point.
+                // After refreshing the browser, this just loads an empty module
+                // and doesn't throw anymore. Store this error in the outer scope
+                // to keep throwing it on refresh until things are fixed.
+                entrypointError = error;
+            });
+            const handleRequest = (_a = entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.default) !== null && _a !== void 0 ? _a : entrypoint;
+            if (typeof handleRequest !== 'function') {
+                if (entrypointError) {
+                    throw entrypointError;
+                }
+                else {
+                    // This means there is no error when loading the entry point but
+                    // we are still not getting a function as the default export.
+                    throw new Error('Something is wrong in your project. Make sure to add "export default renderHydrogen(...)" in your server entry file.');
+                }
+            }
+            entrypointError = null;
+            await handleRequest(request, {
+                dev,
+                cache,
+                indexTemplate,
+                streamableResponse: response,
+            });
+        }
+        catch (e) {
+            if (dev && devServer)
+                devServer.ssrFixStacktrace(e);
+            response.statusCode = 500;
+            /**
+             * Attempt to print the error stack within the template.
+             * This allows the react-refresh plugin and other Vite runtime helpers
+             * to display the error and auto-refresh when the error is fixed, instead
+             * of a white screen that needs a manual refresh.
+             */
+            try {
+                const template = typeof indexTemplate === 'function'
+                    ? await indexTemplate((_c = (_b = request.originalUrl) !== null && _b !== void 0 ? _b : request.url) !== null && _c !== void 0 ? _c : '')
+                    : indexTemplate;
+                const html = template.replace(`<div id="root"></div>`, `<div id="root"><pre><code>${e.stack}</code></pre></div>`);
+                response.write(html);
+                next(e);
+            }
+            catch (_e) {
+                // If template loading is the culprit, give up and just return the error stack.
+                response.write(e.stack);
+                next(e);
+            }
+        }
+    };
+}
+exports.hydrogenMiddleware = hydrogenMiddleware;
+/**
+ * /graphiql and /___graphql are supported
+ */
+function isGraphiqlRequest(request) {
+    return /^\/(?:_{3})?graphi?ql/.test(request.url || '');
+}
+async function respondWithGraphiql(response, shopifyConfig) {
+    if (!shopifyConfig) {
+        throw new Error("You must provide a 'shopify' property in your Hydrogen config file");
+    }
+    const { storeDomain, storefrontToken, storefrontApiVersion } = shopifyConfig;
+    response.setHeader('Content-Type', 'text/html');
+    response.end((0, graphiql_1.graphiqlHtml)(storeDomain === null || storeDomain === void 0 ? void 0 : storeDomain.replace(/^https?:\/\//, ''), storefrontToken, storefrontApiVersion));
+}

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

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

package/dist/node/framework/plugin.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_plugin_hydrogen_config_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-config"));
+const vite_plugin_hydrogen_middleware_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-middleware"));
+const vite_plugin_hydrogen_client_middleware_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-client-middleware"));
+const vite_plugin_platform_entry_1 = __importDefault(require("./plugins/vite-plugin-platform-entry"));
+const vite_plugin_hydrogen_rsc_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-rsc"));
+const vite_plugin_ssr_interop_1 = __importDefault(require("./plugins/vite-plugin-ssr-interop"));
+const vite_plugin_purge_query_cache_1 = __importDefault(require("./plugins/vite-plugin-purge-query-cache"));
+const vite_plugin_hydration_auto_import_1 = __importDefault(require("./plugins/vite-plugin-hydration-auto-import"));
+const vite_plugin_inspect_1 = __importDefault(require("vite-plugin-inspect"));
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+const vite_plugin_css_modules_rsc_1 = __importDefault(require("./plugins/vite-plugin-css-modules-rsc"));
+const vite_plugin_client_imports_1 = __importDefault(require("./plugins/vite-plugin-client-imports"));
+exports.default = (pluginOptions = {}) => {
+    return [
+        process.env.VITE_INSPECT && (0, vite_plugin_inspect_1.default)(),
+        (0, vite_plugin_hydrogen_config_1.default)(),
+        (0, vite_plugin_hydrogen_client_middleware_1.default)(),
+        (0, vite_plugin_client_imports_1.default)(),
+        (0, vite_plugin_hydrogen_middleware_1.default)(pluginOptions),
+        (0, plugin_react_1.default)(),
+        (0, vite_plugin_hydration_auto_import_1.default)(),
+        (0, vite_plugin_ssr_interop_1.default)(),
+        (0, vite_plugin_css_modules_rsc_1.default)(),
+        (0, vite_plugin_hydrogen_rsc_1.default)(),
+        (0, vite_plugin_platform_entry_1.default)(),
+        pluginOptions.purgeQueryCacheOnBuild && (0, vite_plugin_purge_query_cache_1.default)(),
+    ];
+};

package/dist/node/framework/plugins/vite-plugin-client-imports.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export default function clientImports(): Plugin;

package/dist/node/framework/plugins/vite-plugin-client-imports.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function clientImports() {
+    return {
+        name: 'hydrogen:client-imports',
+        enforce: 'pre',
+        /**
+         * When importer does not end in `server.jsx`, and source is `@shopify/hydrogen`,
+         * replace with `@shopify/hydrogen/client`. This prevents other server-only imports
+         * from "leaking" into the client bundle.
+         */
+        async resolveId(source, importer, { ssr }) {
+            if (ssr)
+                return;
+            if (/\.server\.(j|t)sx?/.test(importer !== null && importer !== void 0 ? importer : ''))
+                return;
+            if ('@shopify/hydrogen' !== source)
+                return;
+            const resolution = await this.resolve('@shopify/hydrogen/client', importer, {
+                skipSelf: true,
+            });
+            if (resolution) {
+                return resolution.id;
+            }
+        },
+    };
+}
+exports.default = clientImports;

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

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export default function cssModulesRsc(): Plugin[];

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

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
+const magic_string_1 = __importDefault(require("magic-string"));
+const path_1 = __importDefault(require("path"));
+const cssModuleRE = /\.module\.(s?css|sass|less|stylus)/;
+function cssModulesRsc() {
+    // 1. Original CSS module: `.myStyle { color: red; }`
+    // 2. CSS module after 'pre' Vite transforms: `.myStyle_hashedXYZ { color: red; }`
+    // 3. CSS module after 'post' Vite transforms: `export const myStyle = 'myStyle_hashedXYZ';`
+    let cssMap = new Map();
+    let config;
+    return [
+        {
+            name: 'css-modules-rsc',
+            configResolved(_config) {
+                config = _config;
+                cssMap = new Map();
+                // Place this plugin before react-refresh to
+                // modify files before JSX is compiled.
+                // @ts-ignore
+                config.plugins.unshift(autoStyleTagPlugin());
+            },
+            transform(code, id) {
+                if (cssModuleRE.test(id)) {
+                    cssMap.set(id, code);
+                }
+            },
+        },
+        {
+            name: 'css-modules-rsc-post',
+            enforce: 'post',
+            transform(code, id) {
+                if (id.includes('.module.') && cssMap.has(id)) {
+                    const isDev = config.command === 'serve';
+                    const key = path_1.default.relative(config.root, id.split('?')[0]);
+                    const s = new magic_string_1.default(code);
+                    s.prepend((isDev
+                        ? `import {jsxDEV as _jsx} from 'react/jsx-dev-runtime';`
+                        : `import {jsx as _jsx} from 'react/jsx-runtime';`) +
+                        `export const StyleTag = () => _jsx('style', {dangerouslySetInnerHTML: {__html: ${JSON.stringify(cssMap.get(id))}}});` +
+                        `\nStyleTag.key = '${key}';\n`);
+                    s.replace(/export default \{/gs, `export default {\n  StyleTag,`);
+                    return {
+                        code: s.toString(),
+                        map: s.generateMap({ file: id, source: id }),
+                    };
+                }
+            },
+        },
+    ];
+}
+exports.default = cssModulesRsc;
+function autoStyleTagPlugin() {
+    return {
+        name: 'css-modules-auto-style-tag',
+        transform(code, id) {
+            id = id.split('?')[0];
+            if (/\.[jt]sx$/.test(id) &&
+                !id.endsWith(vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY) &&
+                !id.endsWith(path_1.default.format({
+                    name: vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
+                    ext: path_1.default.extname(id),
+                })) &&
+                cssModuleRE.test(code) &&
+                code.includes('export default')) {
+                const s = new magic_string_1.default(code);
+                // 1. Gather style tags in an array
+                let styleCount = 0;
+                s.prepend(`const __styleTags = [];\n`);
+                s.replace(/^import\s+(.+?)\s+from\s+['"]([^'"]+?\.module\.[^'"]+?)['"]/gm, (all, statements, from) => {
+                    if (!cssModuleRE.test(from)) {
+                        return all;
+                    }
+                    if (statements.startsWith('{')) {
+                        // Add default import
+                        const replacement = `__style${styleCount++}, {`;
+                        statements = statements.replace('{', replacement);
+                        all = all.replace('{', replacement);
+                    }
+                    const defaultImport = statements
+                        .split(',')[0]
+                        .replace(/\*\s+as\s+/, '')
+                        .trim();
+                    return all + `; __styleTags.push(${defaultImport}.StyleTag)`;
+                });
+                // 2. Wrap default export in a new component that includes the style tags
+                s.replace(/export default/gm, 'const __defaultExport = ');
+                s.append(`\nconst __ApplyStyleTags = function (props) {\n` +
+                    `  return <>{__styleTags.map(ST => <ST key={ST.key} />)}<__defaultExport {...props} /></>;` +
+                    `\n}\n\n` +
+                    `Object.defineProperty(__ApplyStyleTags, 'name', {value: 'ApplyStyleTags_' + (__defaultExport.name || '')});\n` +
+                    `export default __ApplyStyleTags;`);
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
+        },
+    };
+}

package/dist/node/framework/plugins/vite-plugin-hydration-auto-import.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vite';
+declare const _default: () => Plugin;
+export default _default;

package/dist/node/framework/plugins/vite-plugin-hydration-auto-import.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+const path_1 = __importDefault(require("path"));
+const magic_string_1 = __importDefault(require("magic-string"));
+const HYDROGEN_ENTRY_FILE = 'hydrogen-entry-client.jsx';
+exports.default = () => {
+    let config;
+    return {
+        name: 'vite-plugin-hydration-auto-import',
+        enforce: 'pre',
+        configResolved(_config) {
+            config = _config;
+        },
+        resolveId(id, importer) {
+            if ((/^\/?@shopify\/hydrogen\/entry-client$/.test(id) ||
+                id.endsWith(path_1.default.sep + HYDROGEN_ENTRY_FILE)) &&
+                (0, vite_1.normalizePath)(importer || '').endsWith('/index.html')) {
+                // Make this virtual import look like a local project file
+                // to enable React Refresh normally.
+                return path_1.default.join(config.root, HYDROGEN_ENTRY_FILE + '?virtual');
+            }
+            return null;
+        },
+        load(id) {
+            if (id.includes(HYDROGEN_ENTRY_FILE + '?virtual')) {
+                const code = new magic_string_1.default(`import renderHydrogen from '@shopify/hydrogen/entry-client';\n` +
+                    `export default renderHydrogen((props) => props.children);`);
+                return {
+                    code: code.toString(),
+                    map: { mappings: '' },
+                };
+            }
+            return null;
+        },
+    };
+};

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

@@ -0,0 +1,9 @@
+import { type Plugin } from 'vite';
+declare const _default: () => Plugin;
+/**
+ * This dev server middleware prevents Vite from applying immutable cache control headers to client
+ * components. These client components are part of the user's local source, but since they are
+ * referenced via import globs in the `react-dom-server-vite` NPM package, Vite assumes they
+ * are 3P deps that can be cached. This middleware responds to the requests early with `no-cache`.
+ */
+export default _default;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+/**
+ * This dev server middleware prevents Vite from applying immutable cache control headers to client
+ * components. These client components are part of the user's local source, but since they are
+ * referenced via import globs in the `react-dom-server-vite` NPM package, Vite assumes they
+ * are 3P deps that can be cached. This middleware responds to the requests early with `no-cache`.
+ */
+exports.default = () => {
+    return {
+        name: 'vite-plugin-hydrogen-client-middleware',
+        enforce: 'pre',
+        configureServer(server) {
+            server.middlewares.use(async (req, res, next) => {
+                const url = req.url;
+                try {
+                    if (url.includes('.client.js') &&
+                        url.includes('?v=') &&
+                        !url.includes('node_modules')) {
+                        const result = await server.transformRequest(url, { html: false });
+                        if (result) {
+                            return (0, vite_1.send)(req, res, result.code, 'js', {
+                                etag: result.etag,
+                                cacheControl: 'no-cache',
+                                headers: server.config.server.headers,
+                                map: result.map,
+                            });
+                        }
+                    }
+                }
+                catch (e) {
+                    next(e);
+                }
+                next();
+            });
+        },
+    };
+};

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

@@ -0,0 +1,3 @@
+import { Plugin } from 'vite';
+declare const _default: () => Plugin;
+export default _default;