npm - @shopify/hydrogen - Versions diffs - 1.3.1 → 1.3.2 - Mend

@shopify/hydrogen 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/esnext/entry-client.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { Suspense, useState, StrictMode, Fragment, useEffect, } from 'react';
 import { hydrateRoot } from 'react-dom/client';
-import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary/dist/react-error-boundary.esm';
 import { createFromFetch, createFromReadableStream,
 // @ts-ignore
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';

package/dist/esnext/entry-server.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { ServerPropsProvider } from './foundation/ServerPropsProvider/index.js';
 import { isBotUA } from './utilities/bot-ua.js';
 import { getCache, setCache } from './foundation/runtime.js';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, bufferReadableStream, } from './streaming.server.js';
-import { stripScriptsFromTemplate } from './utilities/template.js';
+import { getTemplate } from './utilities/template.js';
 import { Analytics } from './foundation/Analytics/Analytics.server.js';
 import { DevTools } from './foundation/DevTools/DevTools.server.js';
 import { getSyncSessionApi } from './foundation/session/session.js';
@@ -21,6 +21,13 @@ import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from
 import { CacheShort, NO_STORE } from './foundation/Cache/strategies/index.js';
 import { getBuiltInRoute } from './foundation/BuiltInRoutes/BuiltInRoutes.js';
 import { FORM_REDIRECT_COOKIE } from './constants.js';
+// Importing 'stream' directly breaks Vite resolve
+// when building for workers, even though this code
+// does not run in a worker. Looks like tree-shaking
+// kicks in after the import analysis/bundle.
+// @ts-ignore
+import stream from 'virtual__stream';
+const PassThrough = stream.PassThrough;
 const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
@@ -45,7 +52,7 @@ export const renderHydrogen = (App) => {
         request.ctx.buyerIpHeader = buyerIpHeader;
         setLogger(hydrogenConfig.logger);
         const log = getLoggerWithContext(request);
-        const response = new HydrogenResponse(null, {
+        const response = new HydrogenResponse(request.url, null, {
             headers: headers || {},
         });
         if (request.cookies.get(FORM_REDIRECT_COOKIE)) {
@@ -97,6 +104,7 @@ export const renderHydrogen = (App) => {
                                 maxAge: 10,
                             }));
                             await processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig, true);
+                            response.markAsSent();
                         }
                         catch (e) {
                             log.error('Cache revalidate error', e);
@@ -108,7 +116,9 @@ export const renderHydrogen = (App) => {
                 return cachedResponse;
             }
         }
-        return processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig);
+        const result = await processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig);
+        response.markAsSent();
+        return result;
     };
     if (__HYDROGEN_WORKER__)
         return handleRequest;
@@ -161,19 +171,10 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
         request,
         response,
         nodeResponse,
-        template: await getTemplate(indexTemplate, url),
         revalidate,
+        template: await getTemplate(indexTemplate, url),
     });
 }
-async function getTemplate(indexTemplate, url) {
-    let template = typeof indexTemplate === 'function'
-        ? await indexTemplate(url.toString())
-        : indexTemplate;
-    if (template && typeof template !== 'string') {
-        template = template.default;
-    }
-    return template;
-}
 function getApiRoute(url, routes) {
     const apiRoutes = getApiRoutes(routes);
     return getApiRouteFromURL(url, apiRoutes);
@@ -192,18 +193,21 @@ function assembleHtml({ ssrHtml, rscPayload, request, template, }) {
  * Run the SSR/Fizz part of the App. If streaming is disabled,
  * this buffers the output and applies SEO enhancements.
  */
-async function runSSR({ rsc, state, request, response, nodeResponse, template, nonce, dev, log, revalidate, }) {
+async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev, log, revalidate, template: { raw: template, noScriptTemplate, bootstrapModules, bootstrapScripts, linkHeader, }, }) {
     let ssrDidError;
     const didError = () => rsc.didError() ?? ssrDidError;
     const [rscReadableForFizz, rscReadableForFlight] = rsc.readable.tee();
     const rscResponse = createFromReadableStream(rscReadableForFizz);
     const RscConsumer = () => rscResponse.readRoot();
-    const { noScriptTemplate, bootstrapScripts, bootstrapModules } = stripScriptsFromTemplate(template);
     const AppSSR = (React.createElement(Html, { template: response.canStream() ? noScriptTemplate : template, hydrogenConfig: request.ctx.hydrogenConfig },
         React.createElement(ServerRequestProvider, { request: request },
             React.createElement(ServerPropsProvider, { initialServerProps: state, setServerPropsForRsc: () => { }, setRscResponseFromApiRoute: () => { } },
                 React.createElement(Suspense, { fallback: null },
                     React.createElement(RscConsumer, null))))));
+    if (linkHeader) {
+        const existingLinkHeader = response.headers.get('Link');
+        response.headers.set('Link', existingLinkHeader ? existingLinkHeader + ', ' + linkHeader : linkHeader);
+    }
     log.trace('start ssr');
     const rscReadable = response.canStream()
         ? new ReadableStream({
@@ -380,7 +384,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, template, n
                     // Redirects found after any async code
                     return nodeResponse.end();
                 }
-                const bufferedResponse = await createNodeWriter();
+                const bufferedResponse = new PassThrough();
                 const bufferedRscPromise = bufferReadableStream(rscReadable.getReader());
                 let ssrHtml = '';
                 bufferedResponse.on('data', (chunk) => (ssrHtml += chunk.toString()));
@@ -499,15 +503,6 @@ function isRedirect(response) {
     const status = response.status ?? response.statusCode ?? 0;
     return status >= 300 && status < 400;
 }
-async function createNodeWriter() {
-    // Importing 'stream' directly breaks Vite resolve
-    // when building for workers, even though this code
-    // does not run in a worker. Looks like tree-shaking
-    // kicks in after the import analysis/bundle.
-    const streamImport = __HYDROGEN_WORKER__ ? '' : 'stream';
-    const { PassThrough } = await import(streamImport);
-    return new PassThrough();
-}
 function flightContainer(chunk) {
     return `<meta data-flight="${htmlEncode(chunk)}" />`;
 }

package/dist/esnext/foundation/HydrogenResponse/HydrogenResponse.server.d.ts CHANGED Viewed

@@ -2,9 +2,13 @@ import type { CachingStrategy } from '../../types.js';
 import React from 'react';
 export declare class HydrogenResponse extends Response {
     private wait;
+    private sent;
     private cacheOptions;
     status: number;
     statusText: string;
+    url: string;
+    constructor(url: string, body: any, init: any);
+    markAsSent(): void;
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.

package/dist/esnext/foundation/HydrogenResponse/HydrogenResponse.server.js CHANGED Viewed

@@ -1,17 +1,32 @@
 import { CacheShort, generateCacheControlHeader, } from '../Cache/strategies/index.js';
 import Redirect from '../Redirect/Redirect.client.js';
 import React from 'react';
+import { log } from '../../utilities/log/log.js';
 export class HydrogenResponse extends Response {
     wait = false;
+    sent = false;
     cacheOptions = CacheShort();
     status = 200;
     statusText = '';
+    url;
+    constructor(url, body, init) {
+        super(body, init);
+        this.url = url;
+    }
+    markAsSent() {
+        this.sent = true;
+    }
     /**
      * Buffer the current response until all queries have resolved,
      * and prevent it from streaming back early.
      */
     doNotStream() {
-        this.wait = true;
+        if (!this.sent) {
+            this.wait = true;
+        }
+        else {
+            log.warn(`response.doNotStream() failed, the stream has already started on: ${this.url}\nDisabling streaming should always be the first thing in your route server component.`);
+        }
     }
     canStream() {
         return !this.wait;

package/dist/esnext/foundation/fetchSync/ResponseSync.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
-declare type ResponseSyncInit = [string, ResponseInit];
+declare type ResponseSyncInit = [string, ResponseInit, string];
 export declare class ResponseSync extends Response {
     #private;
     bodyUsed: boolean;
+    url: string;
     constructor(init: ResponseSyncInit);
     text(): string;
     json(): any;

package/dist/esnext/foundation/fetchSync/ResponseSync.js CHANGED Viewed

@@ -4,16 +4,27 @@ export class ResponseSync extends Response {
     bodyUsed = true;
     #text;
     #json;
+    url;
     constructor(init) {
-        super(...init);
+        super(init[0], init[1]);
         this.#text = init[0];
+        this.url = init[2];
     }
     // @ts-expect-error Changing inherited types
     text() {
         return this.#text;
     }
     json() {
-        return (this.#json ??= parseJSON(this.#text));
+        try {
+            return (this.#json ??= parseJSON(this.#text));
+        }
+        catch (e) {
+            if (!this.ok) {
+                throw new Error(`Request to ${this.url} failed with ${this.status} and the response body is not parseable.\nMake sure to handle the error state when using fetchSync.`);
+            }
+            else
+                throw e;
+        }
     }
     /**
      * @deprecated Access response properties at the top level instead.
@@ -33,6 +44,7 @@ export class ResponseSync extends Response {
                 statusText: response.statusText,
                 headers: Array.from(response.headers.entries()),
             },
+            response.url,
         ];
     }
 }

package/dist/esnext/framework/plugin.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import hydrogenConfig from './plugins/vite-plugin-hydrogen-config.js';
 import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware.js';
-import hydrogenClientMiddleware from './plugins/vite-plugin-hydrogen-client-middleware.js';
+import hydrogenClientComponentsCache from './plugins/vite-plugin-hydrogen-client-components-cache.js';
 import hydrogenVirtualFiles from './plugins/vite-plugin-hydrogen-virtual-files.js';
 import platformEntry from './plugins/vite-plugin-platform-entry.js';
 import rsc from './plugins/vite-plugin-hydrogen-rsc.js';
@@ -17,7 +17,7 @@ const hydrogenPlugin = (pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && inspect(),
         hydrogenConfig(pluginOptions),
-        hydrogenClientMiddleware(),
+        hydrogenClientComponentsCache(),
         clientImports(),
         hydrogenMiddleware(pluginOptions),
         hydrogenVirtualFiles(pluginOptions),

package/dist/esnext/framework/plugins/vite-plugin-assets-version.js CHANGED Viewed

@@ -1,3 +1,7 @@
+/* -- Plugin notes:
+ * Used to manually change the hash of output chunks (`index.k12dw5q.js`)
+ * when their content have not been updated.
+ */
 export default function assetsVersion(version) {
     return {
         name: 'hydrogen:augment-with-version',

package/dist/esnext/framework/plugins/vite-plugin-client-imports.js CHANGED Viewed

@@ -1,3 +1,8 @@
+/* -- Plugin notes:
+ * This plugin allows to import always from '@shopify/hydrogen' path, instead of
+ * using '@shopify/hydrogen/client' in browser files. It does this by redirecting
+ * the server path to the browser path if the importer file is a client component.
+ */
 export default function clientImports() {
     return {
         name: 'hydrogen:client-imports',
@@ -14,9 +19,7 @@ export default function clientImports() {
                 return;
             if ('@shopify/hydrogen' !== source)
                 return;
-            const resolution = await this.resolve('@shopify/hydrogen/client', importer, {
-                skipSelf: true,
-            });
+            const resolution = await this.resolve('@shopify/hydrogen/client', importer, { skipSelf: true });
             if (resolution) {
                 return resolution.id;
             }

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

@@ -1,6 +1,9 @@
 import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware.js';
 import MagicString from 'magic-string';
 import path from 'path';
+/* -- Plugin notes:
+ * Old approach to inlining CSS inside server components. This is deprecated.
+ */
 const cssModuleRE = /\.module\.(s?css|sass|less|stylus)/;
 export default function cssModulesRsc() {
     // 1. Original CSS module: `.myStyle { color: red; }`

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

@@ -6,6 +6,14 @@ const INJECT_STYLES_COMMENT = '<!--__INJECT_STYLES__-->';
 // Keep this in the outer scope to share it
 // across client <> server builds.
 let clientBuildPath;
+/* -- Plugin notes:
+ * This plugin collects all the CSS imported in both client and server components and
+ * extracts it in a single stylesheet that is added to the <head>. It does this by:
+ * 1. Removing all the CSS generated during the client build. The client build CSS is a sub-set of the
+ * server build CSS because it can only find CSS imported in client components. This avoids duplicates.
+ * 2. Force Vite to collect CSS in every file during the server build, and emit it as a chunk.
+ * 3. Move the generated CSS chunk in the server build to the client build output as an asset, and link to it in `index.html`.
+ */
 export default function cssRsc() {
     let config;
     return {

package/dist/esnext/framework/plugins/vite-plugin-hydration-auto-import.js CHANGED Viewed

@@ -2,10 +2,16 @@ import { normalizePath } from 'vite';
 import path from 'path';
 import MagicString from 'magic-string';
 const HYDROGEN_ENTRY_FILE = 'hydrogen-entry-client.jsx';
+/* -- Plugin notes:
+ * Originally, every Hydrogen app required a `src/entry-client.jsx` file. However, this file
+ * was rarely modified by the user. This plugin provides a virtual file with the same content of
+ * that file, which allows to remove it by default from the file system.
+ * The virtual file created here is imported in `index.html` in a script tag.
+ */
 export default () => {
     let config;
     return {
-        name: 'vite-plugin-hydration-auto-import',
+        name: 'hydrogen:client-hydration-auto-import',
         enforce: 'pre',
         configResolved(_config) {
             config = _config;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-client-components-cache.d.ts ADDED Viewed

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

package/dist/esnext/framework/plugins/{vite-plugin-hydrogen-client-middleware.js → vite-plugin-hydrogen-client-components-cache.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { send } from 'vite';
-/**
+/* -- Plugin notes:
  * 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
@@ -7,7 +7,7 @@ import { send } from 'vite';
  */
 export default () => {
     return {
-        name: 'vite-plugin-hydrogen-client-middleware',
+        name: 'hydrogen:client-components-cache',
         enforce: 'pre',
         configureServer(server) {
             server.middlewares.use(async (req, res, next) => {

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js CHANGED Viewed

@@ -1,106 +1,116 @@
 import Crypto from 'crypto';
+/* -- Plugin notes:
+ * Provide configuration options to Vite to ensure Hydrogen is built correctly
+ * for worker environments, using latest ES syntax, and some other requirements.
+ */
 export default (pluginOptions) => {
     const rollupOptions = {
         output: {},
     };
     const isWorker = Boolean(process.env.WORKER) && process.env.WORKER !== 'undefined';
-    if (isWorker) {
-        /**
-         * 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.output = {
-            format: 'es',
-        };
-    }
-    if (process.env.NODE_ENV !== 'development' && !process.env.LOCAL_DEV) {
-        /**
-         * Ofuscate production asset name - To prevent ad blocker logics that blocks
-         * certain files due to how it is named.
-         */
-        rollupOptions.output = {
-            ...rollupOptions.output,
-            chunkFileNames: 'assets/[hash].js',
-        };
-    }
     return {
         name: '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'),
-                },
-            },
-            build: {
-                minify: config.build?.minify ?? (process.env.LOCAL_DEV ? false : 'esbuild'),
-                sourcemap: true,
-                rollupOptions: config.build?.rollupOptions
-                    ? Object.assign(rollupOptions, config.build.rollupOptions)
-                    : rollupOptions,
-                target: config.build?.ssr
-                    ? isWorker
-                        ? 'es2022' // CFW (Updates weekly to latest V8)
-                        : 'es2020' // Node (Support for v14.19 used in SB)
-                    : 'modules', // Browsers (Vite default value)
-            },
-            ssr: {
+        config: async (config, env) => {
+            // @ts-ignore
+            const isSsrBuild = env.ssrBuild ?? !!config.build?.ssr;
+            /**
+             * 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.output = {
+                format: isWorker || !isSsrBuild ? 'es' : 'cjs',
+                inlineDynamicImports: isSsrBuild ? true : undefined,
+            };
+            if (process.env.NODE_ENV !== 'development' && !process.env.LOCAL_DEV) {
                 /**
-                 * Tell Vite to bundle everything when we're building for Workers.
-                 * Otherwise, bundle RSC plugin as a workaround to apply the vendor alias above.
+                 * Ofuscate production asset name - To prevent ad blocker logics that blocks
+                 * certain files due to how it is named.
                  */
-                noExternal: isWorker || [/react-server-dom-vite/, /@shopify\/hydrogen/],
-                target: isWorker ? 'webworker' : 'node',
-            },
-            // Reload when updating local Hydrogen lib
-            server: process.env.LOCAL_DEV && {
-                watch: {
-                    ignored: [
-                        '!**/node_modules/@shopify/hydrogen/**',
-                        '!**/node_modules/@shopify/hydrogen-ui/**',
-                    ],
+                rollupOptions.output = {
+                    ...rollupOptions.output,
+                    chunkFileNames: 'assets/[hash].js',
+                };
+            }
+            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'),
+                    },
                 },
-            },
-            optimizeDeps: {
-                exclude: [
-                    '@shopify/hydrogen',
-                    '@shopify/hydrogen/client',
-                    '@shopify/hydrogen/entry-client',
-                    '@shopify/hydrogen-ui',
-                ],
-                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',
+                build: {
+                    minify: config.build?.minify ?? (process.env.LOCAL_DEV ? false : 'esbuild'),
+                    sourcemap: true,
+                    rollupOptions: config.build?.rollupOptions
+                        ? Object.assign(rollupOptions, config.build.rollupOptions)
+                        : rollupOptions,
+                    target: config.build?.ssr
+                        ? isWorker
+                            ? 'es2022' // CFW (Updates weekly to latest V8)
+                            : 'es2020' // Node (Support for v14.19 used in SB)
+                        : 'modules', // Browsers (Vite default value)
+                },
+                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/client',
-                    'react-server-dom-vite/client-proxy',
-                    // https://github.com/vitejs/vite/issues/6215
-                    'react/jsx-runtime',
-                    // https://github.com/nfriedly/set-cookie-parser/issues/50
-                    'set-cookie-parser',
-                    'undici',
-                ],
-            },
-            define: {
-                __HYDROGEN_DEV__: env.mode !== 'production',
-                __HYDROGEN_WORKER__: isWorker,
-                __HYDROGEN_TEST__: false,
-                __HYDROGEN_CACHE_ID__: pluginOptions.purgeQueryCacheOnBuild
-                    ? `"${Crypto.randomBytes(8).toString('hex').slice(0, 8)}"`
-                    : '"__QUERY_CACHE_ID__"',
-            },
-            envPrefix: ['VITE_', 'PUBLIC_'],
-            base: process.env.HYDROGEN_ASSET_BASE_URL,
-        }),
+                    noExternal: isWorker || [
+                        /react-server-dom-vite/,
+                        /@shopify\/hydrogen/,
+                    ],
+                    target: isWorker ? 'webworker' : 'node',
+                },
+                // Reload when updating local Hydrogen lib
+                server: process.env.LOCAL_DEV && {
+                    watch: {
+                        ignored: [
+                            '!**/node_modules/@shopify/hydrogen/**',
+                            '!**/node_modules/@shopify/hydrogen-ui/**',
+                        ],
+                    },
+                },
+                optimizeDeps: {
+                    exclude: [
+                        '@shopify/hydrogen',
+                        '@shopify/hydrogen/client',
+                        '@shopify/hydrogen/entry-client',
+                        '@shopify/hydrogen-ui',
+                    ],
+                    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',
+                        // https://github.com/vitejs/vite/issues/6215
+                        'react/jsx-runtime',
+                        // https://github.com/nfriedly/set-cookie-parser/issues/50
+                        'set-cookie-parser',
+                        'undici',
+                    ],
+                },
+                define: {
+                    __HYDROGEN_DEV__: env.mode !== 'production',
+                    __HYDROGEN_WORKER__: isWorker,
+                    __HYDROGEN_TEST__: false,
+                    __HYDROGEN_CACHE_ID__: pluginOptions.purgeQueryCacheOnBuild
+                        ? `"${Crypto.randomBytes(8).toString('hex').slice(0, 8)}"`
+                        : '"__QUERY_CACHE_ID__"',
+                },
+                envPrefix: ['VITE_', 'PUBLIC_'],
+                base: process.env.HYDROGEN_ASSET_BASE_URL,
+            };
+        },
     };
 };

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.js CHANGED Viewed

@@ -6,15 +6,15 @@ import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware.js';
 import { InMemoryCache } from '../cache/in-memory.js';
 import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './vite-plugin-hydrogen-virtual-files.js';
 export const HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
+/* -- Plugin notes:
+ * By adding a middleware to the Vite dev server, we can handle SSR without needing
+ * a custom node script. It works by handling any requests for `text/html` documents,
+ * loading them in an SSR context, rendering them using the `entry-server` endpoint in the
+ * user's project, and injecting the static HTML into the template.
+ */
 export default (pluginOptions) => {
     return {
         name: 'hydrogen:middleware',
-        /**
-         * By adding a middleware to the Vite dev server, we can handle SSR without needing
-         * a custom node script. It works by handling any requests for `text/html` documents,
-         * loading them in an SSR context, rendering them using the `entry-server` endpoint in the
-         * user's project, and injecting the static HTML into the template.
-         */
         async configureServer(server) {
             const resolve = (p) => path.resolve(server.config.root, p);
             async function getIndexTemplate(url) {

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-suppress-warnings.js CHANGED Viewed

@@ -1,3 +1,8 @@
+/* -- Plugin notes:
+ * Vite prints some warnings automatically are not important and
+ * not actionable. We hide them here to prevent confusing devs when
+ * real warnings or errors appear.
+ */
 export default () => {
     return {
         name: 'hydrogen:suppress-warnings',

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-virtual-files.js CHANGED Viewed

@@ -3,6 +3,14 @@ import path from 'path';
 import { promises as fs } from 'fs';
 import { viteception } from '../viteception.js';
 import MagicString from 'magic-string';
+import { isVite3 } from '../../utilities/vite.js';
+/* -- Plugin notes:
+ * The Hydrogen framework needs to import certain files from the user app, such as
+ * routes and config. A priori, we can't import these files from the framework
+ * because we don't know the user path to write it in an `import * from '...'` statement.
+ * Instead, we import "virtual files" that are resolved by Vite in this plugin.
+ * These virtual files can include the user path and re-export the in-app files.
+ */
 export const 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__';
@@ -15,6 +23,7 @@ export const VIRTUAL_PROXY_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + PROXY_PREFIX +
 const HYDROGEN_ROUTES_ID = 'hydrogen-routes.server.jsx';
 const VIRTUAL_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + HYDROGEN_ROUTES_ID;
 export const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDROGEN_ROUTES_ID;
+const VIRTUAL_STREAM_ID = 'virtual__stream';
 export default (pluginOptions) => {
     let config;
     let server;
@@ -41,6 +50,7 @@ export default (pluginOptions) => {
                 VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
                 VIRTUAL_HYDROGEN_ROUTES_ID,
                 VIRTUAL_ERROR_FILE,
+                VIRTUAL_STREAM_ID,
             ].includes(source)) {
                 // Virtual modules convention
                 // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
@@ -48,6 +58,13 @@ export default (pluginOptions) => {
             }
         },
         load(id) {
+            if (id === '\0' + VIRTUAL_STREAM_ID) {
+                return {
+                    code: process.env.WORKER
+                        ? `export default {};`
+                        : `export {default} from 'stream';`,
+                };
+            }
             // 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' + VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
@@ -70,7 +87,10 @@ export default (pluginOptions) => {
                         routesPath += '**/*.server.[jt](s|sx)';
                     }
                     const [dirPrefix] = routesPath.split('/*');
-                    let code = `export default {\n  dirPrefix: '${dirPrefix}',\n  basePath: '${hc.routes?.basePath ?? ''}',\n  files: import.meta.globEager('${routesPath}')\n};`;
+                    const importGlob = isVite3
+                        ? `import.meta.glob('${routesPath}', {eager: true})`
+                        : `import.meta.globEager('${routesPath}')`;
+                    let code = `export default {\n  dirPrefix: '${dirPrefix}',\n  basePath: '${hc.routes?.basePath ?? ''}',\n  files: ${importGlob}\n};`;
                     if (config.command === 'serve') {
                         // Add dependency on Hydrogen config for HMR
                         code += `\nimport '${VIRTUAL_HYDROGEN_CONFIG_ID}';`;