@shopify/hydrogen 0.11.1 → 0.13.1

package/dist/node/framework/middleware.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -31,11 +35,17 @@ function graphiqlMiddleware({ shopifyConfig, dev, }) {
     };
 }
 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.
@@ -46,8 +56,25 @@ function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, de
         var _a, _b, _c;
         try {
             await webPolyfills;
-            const entrypoint = await getServerEntrypoint();
-            const handleRequest = (_a = entrypoint.default) !== null && _a !== void 0 ? _a : entrypoint;
+            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;
             const eventResponse = await handleRequest(request, {
                 dev,
                 cache,
@@ -72,7 +99,6 @@ function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, de
         catch (e) {
             if (dev && devServer)
                 devServer.ssrFixStacktrace(e);
-            console.log(e.stack);
             response.statusCode = 500;
             /**
              * Attempt to print the error stack within the template.

package/dist/node/framework/plugin.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -34,6 +38,7 @@ const vite_plugin_hydration_auto_import_1 = __importDefault(require("./plugins/v
 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"));
 exports.default = (shopifyConfig, pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && (0, vite_plugin_inspect_1.default)(),
@@ -43,6 +48,7 @@ exports.default = (shopifyConfig, 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'))),
@@ -53,7 +59,10 @@ exports.default = (shopifyConfig, pluginOptions = {}) => {
                 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
-                    /(handle-worker-event|index|entry-server)\.js/.test(importer));
+                    /(handle-worker-event|index|entry-server)\.js/.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_platform_entry_1.default)(),

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,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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();
+    return [
+        {
+            name: 'css-modules-rsc',
+            configResolved() {
+                cssMap = new Map();
+            },
+            transform(code, id) {
+                if (/\.module\.(s?css|sass|less)/.test(id)) {
+                    cssMap.set(id, code);
+                }
+            },
+        },
+        {
+            name: 'css-modules-rsc-post',
+            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', {}, \`${cssMap.get(id)}\`);`);
+                }
+            },
+        },
+    ];
+}
+exports.default = cssModulesRsc;

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

@@ -3,87 +3,71 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: async (config, env) => ({
-            resolve: {
-                alias: {
-                    // This library is currently included as a compiled vendor lib, not published yet to NPM
-                    'react-server-dom-vite/client-proxy': require.resolve('@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js'),
+        config: async (config, env) => {
+            var _a, _b;
+            return ({
+                resolve: {
+                    alias: {
+                        // This library is currently included as a compiled vendor lib, not published yet to NPM
+                        'react-server-dom-vite/client-proxy': require.resolve('@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js'),
+                    },
                 },
-            },
-            build: {
-                sourcemap: true,
-                /**
-                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
-                 * We don't want this in our workers runtime, because `require` is not supported.
-                 */
-                rollupOptions: process.env.WORKER
-                    ? {
-                        output: {
-                            format: 'es',
-                        },
-                    }
-                    : {},
-            },
-            ssr: {
-                external: ['isomorphic-dompurify'],
-                /**
-                 * 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: Boolean(process.env.WORKER) || [/react-server-dom-vite/],
-                target: process.env.WORKER ? 'webworker' : 'node',
-            },
-            // Reload when updating local Hydrogen lib
-            server: process.env.LOCAL_DEV && {
-                watch: {
-                    ignored: ['!**/node_modules/@shopify/hydrogen/**'],
-                },
-            },
-            optimizeDeps: {
-                exclude: ['@shopify/hydrogen/client', '@shopify/hydrogen/entry-client'],
-                include: [
+                build: {
+                    minify: (_b = (_a = config.build) === null || _a === void 0 ? void 0 : _a.minify) !== null && _b !== void 0 ? _b : 'esbuild',
+                    sourcemap: true,
                     /**
-                     * Additionally, the following dependencies have trouble loading the
-                     * correct version of the dependency (server vs client). This tells Vite to take the
-                     * server versions and optimize them for ESM.
+                     * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                     * We don't want this in our workers runtime, because `require` is not supported.
                      */
-                    'react-helmet-async',
+                    rollupOptions: process.env.WORKER
+                        ? {
+                            output: {
+                                format: 'es',
+                            },
+                        }
+                        : {},
+                },
+                ssr: {
                     /**
-                     * Vite cannot find the following dependencies since they might be
-                     * required in RSC asynchronously. This tells Vite to optimize them
-                     * at server start to avoid posterior page reloads and issues (#429 #430).
+                     * Tell Vite to bundle everything when we're building for Workers.
+                     * Otherwise, bundle RSC plugin as a workaround to apply the vendor alias above.
                      */
-                    'react',
-                    'react-dom',
-                    'react-server-dom-vite/client-proxy',
-                ],
-            },
-            define: {
-                __DEV__: env.mode !== 'production',
-                __WORKER__: !!process.env.WORKER,
-            },
-            envPrefix: ['VITE_', 'PUBLIC_'],
-            base: process.env.HYDROGEN_ASSET_BASE_URL,
-        }),
-        // TODO: Remove when react-dom/fizz is fixed
-        generateBundle: process.env.WORKER
-            ? (options, bundle) => {
-                // There's only one key in bundle, normally `worker.js`
-                const [bundleKey] = Object.keys(bundle);
-                const workerBundle = bundle[bundleKey];
-                // It's always a chunk, this is just for TypeScript
-                if (workerBundle.type === 'chunk') {
-                    // React fizz and flight try to access an undefined value.
-                    // This puts a guard before accessing it.
-                    workerBundle.code = workerBundle.code.replace(/\((\w+)\.locked\)/gm, '($1 && $1.locked)');
-                    // `renderToReadableStream` is bugged in React.
-                    // This adds a workaround until these issues are fixed:
-                    // https://github.com/facebook/react/issues/22772
-                    // https://github.com/facebook/react/issues/23113
-                    workerBundle.code = workerBundle.code.replace(/var \w+\s*=\s*(\w+)\.completedRootSegment;/g, 'if($1.status===5)return\n$1.status=5;\n$&');
-                    workerBundle.code = workerBundle.code.replace(/(\w+)\.allPendingTasks\s*={2,3}\s*0\s*\&\&\s*\w+\.pingedTasks\.length/g, '$1.status=0;\n$&');
-                }
-            }
-            : undefined,
+                    noExternal: Boolean(process.env.WORKER) || [/react-server-dom-vite/],
+                    target: process.env.WORKER ? 'webworker' : 'node',
+                },
+                // Reload when updating local Hydrogen lib
+                server: process.env.LOCAL_DEV && {
+                    watch: {
+                        ignored: ['!**/node_modules/@shopify/hydrogen/**'],
+                    },
+                },
+                optimizeDeps: {
+                    exclude: ['@shopify/hydrogen/client', '@shopify/hydrogen/entry-client'],
+                    include: [
+                        /**
+                         * Additionally, the following dependencies have trouble loading the
+                         * correct version of the dependency (server vs client). This tells Vite to take the
+                         * server versions and optimize them for ESM.
+                         */
+                        'react-helmet-async',
+                        'react-error-boundary',
+                        /**
+                         * Vite cannot find the following dependencies since they might be
+                         * required in RSC asynchronously. This tells Vite to optimize them
+                         * at server start to avoid posterior page reloads and issues (#429 #430).
+                         */
+                        'react',
+                        'react-dom/client',
+                        'react-server-dom-vite/client-proxy',
+                    ],
+                },
+                define: {
+                    __DEV__: env.mode !== 'production',
+                    __WORKER__: !!process.env.WORKER,
+                },
+                envPrefix: ['VITE_', 'PUBLIC_'],
+                base: process.env.HYDROGEN_ASSET_BASE_URL,
+            });
+        },
     };
 };

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

@@ -66,7 +66,7 @@ exports.default = () => {
                 const packageJson = {
                     type: isESM ? 'module' : 'commonjs',
                     main: mainFile,
-                    exports: { '.': mainFile, mainFile },
+                    exports: { '.': mainFile, [mainFile]: mainFile },
                 };
                 fs_1.default.writeFileSync(path_1.default.join(options.dir, 'package.json'), JSON.stringify(packageJson, null, 2), 'utf-8');
             }