@shopify/hydrogen 1.4.3 → 1.4.4

package/dist/esnext/foundation/Router/BrowserRouter.client.js

@@ -108,7 +108,13 @@ function useScrollRestoration({ location, pending, serverProps, scrollNeedsResto
         }
         // If there is a location hash, scroll to it
         if (location.hash) {
-            const element = document.querySelector(location.hash);
+            let element;
+            try {
+                element = document.querySelector(location.hash);
+            }
+            catch (err) {
+                // Do nothing, hash may not be a valid selector
+            }
             if (element) {
                 element.scrollIntoView();
                 onFinishNavigating();

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

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

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

@@ -1,8 +1,33 @@
 import path from 'path';
 import MagicString from 'magic-string';
-import { normalizePath } from 'vite';
+import { normalizePath, } from 'vite';
 const VITE_CSS_CHUNK_NAME = 'style.css';
 const INJECT_STYLES_COMMENT = '<!--__INJECT_STYLES__-->';
+const CSS_EXTENSIONS_RE = /\.(css|sass|scss|stylus|less)(\.|\?|$)/;
+const CSS_MODULES_EXTENSIONS_RE = /\.module\.(css|sass|scss|stylus|less)(\?|$)/;
+const EVENT_CSS_IMPORT = 'hydrogen-css-modules-update-imports';
+const EVENT_CSS_CLASSES = 'hydrogen-css-modules-update-classes';
+const CSS_MODULES_HMR_INJECT = `
+import {createHotContext, injectQuery} from "/@vite/client";
+
+if (!import.meta.hot) {
+  import.meta.hot = createHotContext("/index.html");
+}
+
+import.meta.hot.on('${EVENT_CSS_IMPORT}', ({ids, timestamp}) => {
+  ids.forEach((id) => {
+    import(injectQuery(id, 't=' + timestamp));
+  });
+});
+
+import.meta.hot.on('${EVENT_CSS_CLASSES}', ({replacements}) => {
+  replacements.forEach(([oldClass, newClass]) => {
+    document.querySelectorAll('.' + oldClass).forEach(node => {
+      node.classList.replace(oldClass, newClass);
+    })
+  });
+});
+`;
 // Keep this in the outer scope to share it
 // across client <> server builds.
 let clientBuildPath;
@@ -16,6 +41,10 @@ let clientBuildPath;
  */
 export default function cssRsc() {
     let config;
+    let server;
+    let isUsingCssModules = false;
+    const hmrCssCopy = new Map();
+    const hmrCssQueue = new Set();
     return {
         name: 'hydrogen:css-rsc',
         enforce: 'post',
@@ -27,6 +56,9 @@ export default function cssRsc() {
         configResolved(_config) {
             config = _config;
         },
+        configureServer(_server) {
+            server = _server;
+        },
         transform(code, id, options) {
             if (options?.ssr && id.includes('index.html?raw')) {
                 // Mark the client build index.html to inject styles later
@@ -37,17 +69,63 @@ export default function cssRsc() {
                     map: s.generateMap({ file: id, source: id }),
                 };
             }
+            // Manual HMR for CSS Modules
+            if (server && CSS_MODULES_EXTENSIONS_RE.test(id)) {
+                isUsingCssModules = true;
+                const file = id.split('?')[0];
+                // Note: this "CSS" file is actually JavaScript code.
+                // Get a copy of how this CSS was before the current update
+                const oldCode = hmrCssCopy.get(file);
+                // Save a copy of the current CSS for future updates
+                hmrCssCopy.set(file, code);
+                if (!oldCode || !hmrCssQueue.has(file))
+                    return;
+                hmrCssQueue.delete(file);
+                // Diff old code with new code and use the exported class names as a reference
+                // to find out how the resulting CSS classes are renamed.  With this, we can
+                // update classes in the DOM without requesting a full rendering from the server.
+                // Example:
+                // Previous code => export const red = ".red_k3tz4_module";
+                // New code      => export const red = ".red_t93kw_module";
+                const classRE = /export const (.+?) = "(.+?)"/g;
+                const oldClasses = [...oldCode.matchAll(classRE)];
+                const replacements = [];
+                for (const [, newKey, newClass] of code.matchAll(classRE)) {
+                    const oldClass = oldClasses.find(([, oldKey]) => oldKey === newKey)?.[2];
+                    if (oldClass && oldClass !== newClass) {
+                        replacements.push([oldClass, newClass]);
+                    }
+                }
+                if (replacements.length > 0) {
+                    // This event asks the browser to replace old
+                    // hash-based CSS classes with new ones.
+                    // Example: from `.red_k3tz4_module` to `.red_t93kw_module`
+                    server.ws.send({
+                        type: 'custom',
+                        event: EVENT_CSS_CLASSES,
+                        data: { replacements },
+                    });
+                }
+            }
         },
         transformIndexHtml(html, { server }) {
             // Add discovered styles during dev
             if (server) {
-                const tags = [];
+                const tags = (isUsingCssModules
+                    ? [
+                        {
+                            tag: 'script',
+                            attrs: { type: 'module' },
+                            children: CSS_MODULES_HMR_INJECT,
+                        },
+                    ]
+                    : []);
                 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(normalizePath(key).split('/').pop())) {
+                    CSS_EXTENSIONS_RE.test(normalizePath(key).split('/').pop())) {
                         let { url, file, lastHMRTimestamp, importers } = value;
                         if (!foundCssFiles.has(file) &&
                             !Array.from(importers).some((importer) => foundCssFiles.has(importer.file))) {
@@ -112,5 +190,24 @@ export default function cssRsc() {
                 }
             }
         },
+        async handleHotUpdate({ modules, server }) {
+            if (modules.every((m) => CSS_MODULES_EXTENSIONS_RE.test(m.file || ''))) {
+                // Opt-out of Vite's default HMR for CSS Modules, we'll handle this manually
+                const file = modules[0].file;
+                hmrCssQueue.add(file);
+                // This event asks the browser to download fresh CSS files.
+                // Fetching these fresh CSS files will trigger another event
+                // from the `transform` hook to replace classes in the DOM.
+                server.ws.send({
+                    type: 'custom',
+                    event: EVENT_CSS_IMPORT,
+                    data: {
+                        ids: modules.map((m) => m.id),
+                        timestamp: modules[0].lastHMRTimestamp || Date.now(),
+                    },
+                });
+                return [];
+            }
+        },
     };
 }

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

@@ -49,7 +49,7 @@ export default () => {
         async transform(code, id, options) {
             if (config.command === 'build' &&
                 options?.ssr &&
-                /@shopify\/hydrogen\/.+platforms\/virtual\./.test(normalizePath(id))) {
+                /\/hydrogen\/.+platforms\/virtual\./.test(normalizePath(id))) {
                 const ms = new MagicString(code);
                 ms.replace('__HYDROGEN_ENTRY__', HYDROGEN_DEFAULT_SERVER_ENTRY);
                 if (!clientBuildPath) {

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.4.3";
+export declare const LIB_VERSION = "1.4.4";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.4.3';
+export const LIB_VERSION = '1.4.4';

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

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

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

@@ -8,6 +8,31 @@ 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__-->';
+const CSS_EXTENSIONS_RE = /\.(css|sass|scss|stylus|less)(\.|\?|$)/;
+const CSS_MODULES_EXTENSIONS_RE = /\.module\.(css|sass|scss|stylus|less)(\?|$)/;
+const EVENT_CSS_IMPORT = 'hydrogen-css-modules-update-imports';
+const EVENT_CSS_CLASSES = 'hydrogen-css-modules-update-classes';
+const CSS_MODULES_HMR_INJECT = `
+import {createHotContext, injectQuery} from "/@vite/client";
+
+if (!import.meta.hot) {
+  import.meta.hot = createHotContext("/index.html");
+}
+
+import.meta.hot.on('${EVENT_CSS_IMPORT}', ({ids, timestamp}) => {
+  ids.forEach((id) => {
+    import(injectQuery(id, 't=' + timestamp));
+  });
+});
+
+import.meta.hot.on('${EVENT_CSS_CLASSES}', ({replacements}) => {
+  replacements.forEach(([oldClass, newClass]) => {
+    document.querySelectorAll('.' + oldClass).forEach(node => {
+      node.classList.replace(oldClass, newClass);
+    })
+  });
+});
+`;
 // Keep this in the outer scope to share it
 // across client <> server builds.
 let clientBuildPath;
@@ -21,6 +46,10 @@ let clientBuildPath;
  */
 function cssRsc() {
     let config;
+    let server;
+    let isUsingCssModules = false;
+    const hmrCssCopy = new Map();
+    const hmrCssQueue = new Set();
     return {
         name: 'hydrogen:css-rsc',
         enforce: 'post',
@@ -32,6 +61,9 @@ function cssRsc() {
         configResolved(_config) {
             config = _config;
         },
+        configureServer(_server) {
+            server = _server;
+        },
         transform(code, id, options) {
             if (options?.ssr && id.includes('index.html?raw')) {
                 // Mark the client build index.html to inject styles later
@@ -42,17 +74,63 @@ function cssRsc() {
                     map: s.generateMap({ file: id, source: id }),
                 };
             }
+            // Manual HMR for CSS Modules
+            if (server && CSS_MODULES_EXTENSIONS_RE.test(id)) {
+                isUsingCssModules = true;
+                const file = id.split('?')[0];
+                // Note: this "CSS" file is actually JavaScript code.
+                // Get a copy of how this CSS was before the current update
+                const oldCode = hmrCssCopy.get(file);
+                // Save a copy of the current CSS for future updates
+                hmrCssCopy.set(file, code);
+                if (!oldCode || !hmrCssQueue.has(file))
+                    return;
+                hmrCssQueue.delete(file);
+                // Diff old code with new code and use the exported class names as a reference
+                // to find out how the resulting CSS classes are renamed.  With this, we can
+                // update classes in the DOM without requesting a full rendering from the server.
+                // Example:
+                // Previous code => export const red = ".red_k3tz4_module";
+                // New code      => export const red = ".red_t93kw_module";
+                const classRE = /export const (.+?) = "(.+?)"/g;
+                const oldClasses = [...oldCode.matchAll(classRE)];
+                const replacements = [];
+                for (const [, newKey, newClass] of code.matchAll(classRE)) {
+                    const oldClass = oldClasses.find(([, oldKey]) => oldKey === newKey)?.[2];
+                    if (oldClass && oldClass !== newClass) {
+                        replacements.push([oldClass, newClass]);
+                    }
+                }
+                if (replacements.length > 0) {
+                    // This event asks the browser to replace old
+                    // hash-based CSS classes with new ones.
+                    // Example: from `.red_k3tz4_module` to `.red_t93kw_module`
+                    server.ws.send({
+                        type: 'custom',
+                        event: EVENT_CSS_CLASSES,
+                        data: { replacements },
+                    });
+                }
+            }
         },
         transformIndexHtml(html, { server }) {
             // Add discovered styles during dev
             if (server) {
-                const tags = [];
+                const tags = (isUsingCssModules
+                    ? [
+                        {
+                            tag: 'script',
+                            attrs: { type: 'module' },
+                            children: CSS_MODULES_HMR_INJECT,
+                        },
+                    ]
+                    : []);
                 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())) {
+                    CSS_EXTENSIONS_RE.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))) {
@@ -117,6 +195,25 @@ function cssRsc() {
                 }
             }
         },
+        async handleHotUpdate({ modules, server }) {
+            if (modules.every((m) => CSS_MODULES_EXTENSIONS_RE.test(m.file || ''))) {
+                // Opt-out of Vite's default HMR for CSS Modules, we'll handle this manually
+                const file = modules[0].file;
+                hmrCssQueue.add(file);
+                // This event asks the browser to download fresh CSS files.
+                // Fetching these fresh CSS files will trigger another event
+                // from the `transform` hook to replace classes in the DOM.
+                server.ws.send({
+                    type: 'custom',
+                    event: EVENT_CSS_IMPORT,
+                    data: {
+                        ids: modules.map((m) => m.id),
+                        timestamp: modules[0].lastHMRTimestamp || Date.now(),
+                    },
+                });
+                return [];
+            }
+        },
     };
 }
 exports.default = cssRsc;

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

@@ -54,7 +54,7 @@ exports.default = () => {
         async transform(code, id, options) {
             if (config.command === 'build' &&
                 options?.ssr &&
-                /@shopify\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
+                /\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
                 const ms = new magic_string_1.default(code);
                 ms.replace('__HYDROGEN_ENTRY__', vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
                 if (!clientBuildPath) {

package/package.json

@@ -7,16 +7,13 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.4.3",
+  "version": "1.4.4",
   "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"
-    },
+    "./experimental": "./dist/esnext/experimental.js",
     "./plugin": {
       "import": "./dist/esnext/framework/plugin.js",
       "require": "./dist/node/framework/plugin.js"