@shopify/hydrogen 0.19.0 → 0.22.0

package/dist/node/framework/Hydration/rsc.js

@@ -3,14 +3,64 @@
 // so it is considered ESM instead of CJS?
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRefresh = exports.useServerResponse = void 0;
-// @ts-ignore
-const react_1 = require("react");
 const react_server_dom_vite_1 = require("@shopify/hydrogen/vendor/react-server-dom-vite");
 const constants_1 = require("../../constants");
 let rscReader;
-function createResponseCache() {
-    return new Map();
+// Hydrate an SSR response from <meta> tags placed in the DOM.
+const flightChunks = [];
+const FLIGHT_ATTRIBUTE = 'data-flight';
+function addElementToFlightChunks(el) {
+    // We don't need to decode, because `.getAttribute` already decodes
+    const chunk = el.getAttribute(FLIGHT_ATTRIBUTE);
+    if (chunk) {
+        flightChunks.push(chunk);
+    }
 }
+// Get initial payload
+document
+    .querySelectorAll('[' + FLIGHT_ATTRIBUTE + ']')
+    .forEach(addElementToFlightChunks);
+// Create a mutation observer on the document to detect when new
+// <meta data-flight> tags are added, and add them to the array.
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement &&
+                node.tagName === 'META' &&
+                node.hasAttribute(FLIGHT_ATTRIBUTE)) {
+                addElementToFlightChunks(node);
+            }
+        });
+    });
+});
+observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+});
+if (flightChunks.length > 0) {
+    const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
+    try {
+        rscReader = new ReadableStream({
+            start(controller) {
+                const encoder = new TextEncoder();
+                const write = (chunk) => {
+                    controller.enqueue(encoder.encode(chunk));
+                    return 0;
+                };
+                flightChunks.forEach(write);
+                flightChunks.push = write;
+                contentLoaded.then(() => {
+                    controller.close();
+                    observer.disconnect();
+                });
+            },
+        });
+    }
+    catch (_) {
+        // Old browser, will try a new hydration request later
+    }
+}
+const cache = new Map();
 /**
  * Much of this is borrowed from React's demo implementation:
  * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js
@@ -19,7 +69,6 @@ function createResponseCache() {
  */
 function useServerResponse(state) {
     const key = JSON.stringify(state);
-    const cache = (0, react_1.unstable_getCacheForType)(createResponseCache);
     let response = cache.get(key);
     if (response) {
         return response;
@@ -49,7 +98,6 @@ function useServerResponse(state) {
 }
 exports.useServerResponse = useServerResponse;
 function useRefresh() {
-    const refreshCache = (0, react_1.unstable_useCacheRefresh)();
-    refreshCache();
+    cache.clear();
 }
 exports.useRefresh = useRefresh;

package/dist/node/framework/cache/in-memory.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InMemoryCache = void 0;
-const log_1 = require("../../utilities/log");
 /**
  * This is an in-memory implementation of `Cache` that *barely*
  * works and is only meant to be used during development.
@@ -11,7 +10,6 @@ class InMemoryCache {
         this.store = new Map();
     }
     put(request, response) {
-        (0, log_1.logCacheApiStatus)('PUT-dev', request.url);
         this.store.set(request.url, {
             value: response,
             date: new Date(),
@@ -21,7 +19,6 @@ class InMemoryCache {
         var _a, _b;
         const match = this.store.get(request.url);
         if (!match) {
-            (0, log_1.logCacheApiStatus)('MISS-dev', request.url);
             return;
         }
         const { value, date } = match;
@@ -31,7 +28,6 @@ class InMemoryCache {
         const age = (new Date().valueOf() - date.valueOf()) / 1000;
         const isMiss = age > maxAge + swr;
         if (isMiss) {
-            (0, log_1.logCacheApiStatus)('MISS-dev', request.url);
             this.store.delete(request.url);
             return;
         }
@@ -39,7 +35,6 @@ class InMemoryCache {
         const headers = new Headers(value.headers);
         headers.set('cache', isStale ? 'STALE' : 'HIT');
         headers.set('date', date.toUTCString());
-        (0, log_1.logCacheApiStatus)(`${headers.get('cache')}-dev`, request.url);
         const response = new Response(value.body, {
             headers,
         });
@@ -47,7 +42,6 @@ class InMemoryCache {
     }
     delete(request) {
         this.store.delete(request.url);
-        (0, log_1.logCacheApiStatus)('DELETE-dev', request.url);
     }
     keys(request) {
         const cacheKeys = [];

package/dist/node/framework/cache-sub-request.d.ts

@@ -0,0 +1,17 @@
+import type { QueryKey, CachingStrategy } from '../types';
+export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+/**
+ * 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.
+ */
+export declare function getItemFromCache(key: QueryKey): Promise<undefined | [any, Response]>;
+/**
+ * Put an item into the cache.
+ */
+export declare function setItemInCache(key: QueryKey, value: any, userCacheOptions?: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
+/**
+ * Manually check the response to see if it's stale.
+ */
+export declare function isStale(key: QueryKey, response: Response): boolean;

package/dist/node/framework/cache-sub-request.js

@@ -0,0 +1,95 @@
+"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.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateSubRequestCacheControlHeader = void 0;
+const runtime_1 = require("./runtime");
+const hash_1 = require("../utilities/hash");
+const CacheApi = __importStar(require("./cache"));
+const CachingStrategy_1 = require("./CachingStrategy");
+/**
+ * Wrapper Cache functions for sub queries
+ */
+/**
+ * Cache API is weird. We just need a full URL, so we make one up.
+ */
+function getKeyUrl(key) {
+    return `https://shopify.dev/?${key}`;
+}
+function getCacheOption(userCacheOptions) {
+    return userCacheOptions || (0, CachingStrategy_1.CacheSeconds)();
+}
+function generateSubRequestCacheControlHeader(userCacheOptions) {
+    return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));
+}
+exports.generateSubRequestCacheControlHeader = generateSubRequestCacheControlHeader;
+/**
+ * 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(key) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl((0, hash_1.hashKey)(key));
+    const request = new Request(url);
+    const response = await CacheApi.getItemFromCache(request);
+    if (!response) {
+        return;
+    }
+    return [await response.json(), response];
+}
+exports.getItemFromCache = getItemFromCache;
+/**
+ * Put an item into the cache.
+ */
+async function setItemInCache(key, value, userCacheOptions) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache) {
+        return;
+    }
+    const url = getKeyUrl((0, hash_1.hashKey)(key));
+    const request = new Request(url);
+    const response = new Response(JSON.stringify(value));
+    await CacheApi.setItemInCache(request, response, getCacheOption(userCacheOptions));
+}
+exports.setItemInCache = setItemInCache;
+async function deleteItemFromCache(key) {
+    const cache = (0, runtime_1.getCache)();
+    if (!cache)
+        return;
+    const url = getKeyUrl((0, hash_1.hashKey)(key));
+    const request = new Request(url);
+    await CacheApi.deleteItemFromCache(request);
+}
+exports.deleteItemFromCache = deleteItemFromCache;
+/**
+ * Manually check the response to see if it's stale.
+ */
+function isStale(key, response) {
+    return CacheApi.isStale(new Request(getKeyUrl((0, hash_1.hashKey)(key))), response);
+}
+exports.isStale = isStale;

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

@@ -1,17 +1,17 @@
-import type { QueryKey, CachingStrategy } from '../types';
-export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
+import type { CachingStrategy } from '../types';
+export declare function generateDefaultCacheControlHeader(userCacheOptions?: CachingStrategy): string;
 /**
  * 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.
  */
-export declare function getItemFromCache(key: QueryKey): Promise<undefined | [any, Response]>;
+export declare function getItemFromCache(request: Request): Promise<Response | undefined>;
 /**
  * Put an item into the cache.
  */
-export declare function setItemInCache(key: QueryKey, value: any, userCacheOptions?: CachingStrategy): Promise<void>;
-export declare function deleteItemFromCache(key: QueryKey): Promise<void>;
+export declare function setItemInCache(request: Request, response: Response, userCacheOptions: CachingStrategy): Promise<void>;
+export declare function deleteItemFromCache(request: Request): Promise<void>;
 /**
  * Manually check the response to see if it's stale.
  */
-export declare function isStale(response: Response, userCacheOptions?: CachingStrategy): boolean;
+export declare function isStale(request: Request, response: Response): boolean;

package/dist/node/framework/cache.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateSubRequestCacheControlHeader = void 0;
+exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.generateDefaultCacheControlHeader = void 0;
 const runtime_1 = require("./runtime");
 const CachingStrategy_1 = require("../framework/CachingStrategy");
-const hash_1 = require("../utilities/hash");
 const log_1 = require("../utilities/log");
 function getCacheControlSetting(userCacheOptions, options) {
     if (userCacheOptions && options) {
@@ -16,47 +15,37 @@ function getCacheControlSetting(userCacheOptions, options) {
         return userCacheOptions || (0, CachingStrategy_1.CacheSeconds)();
     }
 }
-function generateSubRequestCacheControlHeader(userCacheOptions) {
+function generateDefaultCacheControlHeader(userCacheOptions) {
     return (0, CachingStrategy_1.generateCacheControlHeader)(getCacheControlSetting(userCacheOptions));
 }
-exports.generateSubRequestCacheControlHeader = generateSubRequestCacheControlHeader;
-/**
- * Cache API is weird. We just need a full URL, so we make one up.
- */
-function getKeyUrl(key) {
-    return `https://shopify.dev/?${key}`;
-}
+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(key) {
+async function getItemFromCache(request) {
     const cache = (0, runtime_1.getCache)();
     if (!cache) {
         return;
     }
-    const url = getKeyUrl((0, hash_1.hashKey)(key));
-    const request = new Request(url);
     const response = await cache.match(request);
     if (!response) {
-        (0, log_1.logCacheApiStatus)('MISS', url);
+        (0, log_1.logCacheApiStatus)('MISS', request.url);
         return;
     }
-    (0, log_1.logCacheApiStatus)('HIT', url);
-    return [await response.json(), response];
+    (0, log_1.logCacheApiStatus)('HIT', request.url);
+    return response;
 }
 exports.getItemFromCache = getItemFromCache;
 /**
  * Put an item into the cache.
  */
-async function setItemInCache(key, value, userCacheOptions) {
+async function setItemInCache(request, response, userCacheOptions) {
     const cache = (0, runtime_1.getCache)();
     if (!cache) {
         return;
     }
-    const url = getKeyUrl((0, hash_1.hashKey)(key));
-    const request = new Request(url);
     /**
      * We are manually managing staled request by adding this workaround.
      * Why? cache control header support is dependent on hosting platform
@@ -96,37 +85,51 @@ async function setItemInCache(key, value, userCacheOptions) {
      * `isStale` function will use the above information to test for stale-ness of a cached response
      */
     const cacheControl = getCacheControlSetting(userCacheOptions);
-    const headers = new Headers({
-        'cache-control': generateSubRequestCacheControlHeader(getCacheControlSetting(cacheControl, {
-            maxAge: (cacheControl.maxAge || 0) + (cacheControl.staleWhileRevalidate || 0),
-        })),
-        'cache-put-date': new Date().toUTCString(),
-    });
-    const response = new Response(JSON.stringify(value), { headers });
-    (0, log_1.logCacheApiStatus)('PUT', url);
+    // 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(key) {
+async function deleteItemFromCache(request) {
     const cache = (0, runtime_1.getCache)();
     if (!cache)
         return;
-    const url = getKeyUrl((0, hash_1.hashKey)(key));
-    const request = new Request(url);
-    (0, log_1.logCacheApiStatus)('DELETE', url);
+    (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(response, userCacheOptions) {
-    const responseMaxAge = getCacheControlSetting(userCacheOptions).maxAge || 0;
+function isStale(request, response) {
     const responseDate = response.headers.get('cache-put-date');
-    if (!responseDate)
+    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;
-    return age > responseMaxAge;
+    const result = age > responseMaxAge;
+    if (result) {
+        (0, log_1.logCacheApiStatus)('STALE', request.url);
+    }
+    return result;
 }
 exports.isStale = isStale;

package/dist/node/framework/middleware.js

@@ -75,26 +75,12 @@ function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, de
                 }
             }
             entrypointError = null;
-            const eventResponse = await handleRequest(request, {
+            await handleRequest(request, {
                 dev,
                 cache,
                 indexTemplate,
                 streamableResponse: response,
             });
-            /**
-             * If a `Response` was returned, that means it was not streamed.
-             * Convert the response into a proper Node.js response.
-             */
-            if (eventResponse) {
-                eventResponse.headers.forEach((value, key) => {
-                    response.setHeader(key, value);
-                });
-                response.statusCode = eventResponse.status;
-                if (eventResponse.body) {
-                    response.write(eventResponse.body);
-                }
-                response.end();
-            }
         }
         catch (e) {
             if (dev && devServer)

package/dist/node/framework/plugin.js

@@ -1,80 +1,34 @@
 "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;
-};
 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 = __importStar(require("./plugins/vite-plugin-hydrogen-middleware"));
+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_hydrogen_virtual_files_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-virtual-files"));
 const vite_plugin_platform_entry_1 = __importDefault(require("./plugins/vite-plugin-platform-entry"));
-// @ts-ignore
-const plugin_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin"));
+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 path_1 = __importDefault(require("path"));
 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 = {}) => {
-    let hydrogenUiPath;
-    try {
-        hydrogenUiPath = path_1.default.join(
-        // eslint-disable-next-line node/no-missing-require
-        path_1.default.dirname(require.resolve('@shopify/hydrogen-ui/client')));
-    }
-    catch (error) {
-        // hydrogen-ui isn't installed, so don't worry about it
-    }
     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, vite_plugin_hydrogen_virtual_files_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, plugin_1.default)({
-            clientComponentPaths: [
-                path_1.default.join(path_1.default.dirname(require.resolve('@shopify/hydrogen/package.json'))),
-                ...[hydrogenUiPath].filter(Boolean),
-            ],
-            isServerComponentImporterAllowed(importer, source) {
-                // Always allow the entry server (e.g. App.server.jsx) to be imported
-                // in other files such as worker.js or server.js.
-                const entryServer = process.env.HYDROGEN_SERVER_ENTRY || vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY;
-                return (source.includes(entryServer) ||
-                    // TODO update this after handleEvent is replaced with handleRequest
-                    /(index|entry-server|hydrogen\.config)\.[jt]s/.test(importer) ||
-                    // Support importing server components for testing
-                    // TODO: revisit this when RSC splits into two bundles
-                    /\.test\.[tj]sx?$/.test(importer));
-            },
-        }),
+        (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

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

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

@@ -1,18 +1,31 @@
 "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() {
+            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 (/\.module\.(s?css|sass|less)/.test(id)) {
+                if (cssModuleRE.test(id)) {
                     cssMap.set(id, code);
                 }
             },
@@ -22,10 +35,70 @@ function cssModulesRsc() {
             enforce: 'post',
             transform(code, id) {
                 if (id.includes('.module.') && cssMap.has(id)) {
-                    return code.replace(/export default .*$/gms, `import React from 'react'; export const StyleTag = () => React.createElement('style', {dangerouslySetInnerHTML: {__html: ${JSON.stringify(cssMap.get(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 }),
+                };
+            }
+        },
+    };
+}