@shopify/hydrogen 1.2.0 → 1.3.2

package/dist/esnext/framework/plugin.js

@@ -1,11 +1,10 @@
 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';
 import ssrInterop from './plugins/vite-plugin-ssr-interop.js';
-import purgeQueryCache from './plugins/vite-plugin-purge-query-cache.js';
 import hydrationAutoImport from './plugins/vite-plugin-hydration-auto-import.js';
 import inspect from 'vite-plugin-inspect';
 import react from '@vitejs/plugin-react';
@@ -13,11 +12,12 @@ import cssRsc from './plugins/vite-plugin-css-rsc.js';
 import cssModulesRsc from './plugins/vite-plugin-css-modules-rsc.js';
 import clientImports from './plugins/vite-plugin-client-imports.js';
 import suppressWarnings from './plugins/vite-plugin-hydrogen-suppress-warnings.js';
+import assetsVersion from './plugins/vite-plugin-assets-version.js';
 const hydrogenPlugin = (pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && inspect(),
-        hydrogenConfig(),
-        hydrogenClientMiddleware(),
+        hydrogenConfig(pluginOptions),
+        hydrogenClientComponentsCache(),
         clientImports(),
         hydrogenMiddleware(pluginOptions),
         hydrogenVirtualFiles(pluginOptions),
@@ -28,7 +28,8 @@ const hydrogenPlugin = (pluginOptions = {}) => {
         rsc(pluginOptions),
         platformEntry(),
         suppressWarnings(),
-        pluginOptions.purgeQueryCacheOnBuild && purgeQueryCache(),
+        pluginOptions.assetHashVersion &&
+            assetsVersion(pluginOptions.assetHashVersion),
     ];
 };
 export default hydrogenPlugin; // For ESM

package/dist/esnext/framework/plugins/vite-plugin-assets-version.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export default function assetsVersion(version?: string): Plugin;

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

@@ -0,0 +1,12 @@
+/* -- 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',
+        augmentChunkHash() {
+            return version ?? '';
+        },
+    };
+}

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

@@ -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

@@ -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

@@ -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 {
@@ -35,7 +43,6 @@ export default function cssRsc() {
             if (server) {
                 const tags = [];
                 const foundCssFiles = new Set();
-                const { browserHash = '' } = server._optimizedDeps?.metadata || {};
                 for (const [key, value] of server.moduleGraph.idToModuleMap.entries()) {
                     if (
                     // Note: Some CSS-in-JS libraries use `.css.js`
@@ -55,10 +62,6 @@ export default function cssRsc() {
                                     ? url.replace('?', timestampQuery + '&')
                                     : url + timestampQuery;
                             }
-                            if (browserHash && !url.includes('v=')) {
-                                // Append the hash at the end
-                                url += (url.includes('?') ? '&' : '?') + `v=${browserHash}`;
-                            }
                             tags.push(value.type === 'css'
                                 ? { tag: 'link', attrs: { rel: 'stylesheet', href: url } }
                                 : { tag: 'script', attrs: { type: 'module', src: url } });

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

@@ -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/{node/framework/plugins/vite-plugin-purge-query-cache.d.ts → esnext/framework/plugins/vite-plugin-hydrogen-client-components-cache.d.ts}

@@ -1,3 +1,3 @@
-import type { Plugin } from 'vite';
+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}

@@ -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.d.ts

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

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

@@ -1,102 +1,116 @@
-export default () => {
+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: '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'),
-                },
-            },
-            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: {
+        name: 'hydrogen:config',
+        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/],
-                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, // Used in unit tests
-            },
-            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

@@ -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

@@ -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

@@ -2,6 +2,15 @@ import { normalizePath } from 'vite';
 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__';
@@ -14,9 +23,11 @@ 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;
+    let resolvedConfigPath;
     return {
         name: 'hydrogen:virtual-files',
         configResolved(_config) {
@@ -27,16 +38,19 @@ export default (pluginOptions) => {
         },
         resolveId(source, importer) {
             if (source === VIRTUAL_HYDROGEN_CONFIG_ID) {
-                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => 
-                // This direct dependency on a real file
-                // makes HMR work for the virtual module.
-                this.resolve(hcPath, importer, { skipSelf: true }));
+                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => {
+                    resolvedConfigPath = normalizePath(hcPath);
+                    // This direct dependency on a real file
+                    // makes HMR work for the virtual module.
+                    return this.resolve(hcPath, importer, { skipSelf: true });
+                });
             }
             if ([
                 VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
                 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
@@ -44,10 +58,17 @@ 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) {
-                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default hc;`;
+                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default typeof hc === 'function' ? hc() : hc;`;
             }
             if (id === '\0' + VIRTUAL_PROXY_HYDROGEN_ROUTES_ID) {
                 return `import hr from '${VIRTUAL_HYDROGEN_ROUTES_ID}'; export default hr;`;
@@ -66,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}';`;
@@ -82,13 +106,27 @@ export default (pluginOptions) => {
                 });
             }
         },
+        transform(code, id) {
+            if (id === resolvedConfigPath) {
+                const s = new MagicString(code);
+                // Wrap in function to avoid evaluating `Oxygen.env`
+                // in the config until we have polyfilled it properly.
+                s.replace(/export\s+default\s+(\w+)\s*\(/g, (all, m1) => all.replace(m1, `() => ${m1}`));
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
+        },
     };
     async function importHydrogenConfig() {
         if (server) {
             const loaded = await server.ssrLoadModule(VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
             return loaded.default;
         }
-        const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
+        const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], {
+            root: config.root,
+        });
         return loaded[0].default;
     }
 };

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

@@ -4,10 +4,23 @@ import MagicString from 'magic-string';
 import path from 'path';
 import fs from 'fs';
 import fastGlob from 'fast-glob';
+import { isVite3 } from '../../utilities/vite.js';
 const SSR_BUNDLE_NAME = 'index.js';
 // Keep this in the outer scope to share it
 // across client <> server builds.
 let clientBuildPath;
+/* -- Plugin notes:
+ * This plugin simplifies the way a platform entry file imports user files. This is
+ * needed to write generic integrations with different platform providers.
+ *
+ * Instead of using relative paths:
+ * `import handleRequest from '../../<arbitrary_path>/src/App.server';`
+ * `import indexTemplate from '../../<arbitrary_path>/dist/client/index.html?raw';`
+ *
+ *  It allows importing from a known static path which dynamically resolves the user files:
+ * `import {handleRequest, indexTemplate} from '@shopify/hydrogen/platforms';`
+ *
+ */
 export default () => {
     let config;
     let isESM;
@@ -18,7 +31,7 @@ export default () => {
             config = _config;
             if (config.build.ssr) {
                 const { output = {} } = config.build.rollupOptions || {};
-                const { format = '' } = (Array.isArray(output) ? output[0] : output) || {};
+                const { format = isVite3 ? 'es' : '' } = (Array.isArray(output) ? output[0] : output) || {};
                 isESM = Boolean(process.env.WORKER) || ['es', 'esm'].includes(format);
             }
         },

package/dist/esnext/framework/plugins/vite-plugin-ssr-interop.js

@@ -1,6 +1,10 @@
+/* -- Plugin notes:
+ * This plugin makes sure we don't leak server logic to the browser when importing
+ * the `useEnvContext` utility.
+ */
 export default () => {
     return {
-        name: 'vite-plugin-ssr-interop',
+        name: 'hydrogen:ssr-interop',
         enforce: 'pre',
         transform(code, id, options = {}) {
             if (options.ssr && id.includes('foundation/ssr-interop')) {

package/dist/esnext/framework/types.d.ts

@@ -3,6 +3,7 @@ export interface HydrogenVitePluginOptions {
     purgeQueryCacheOnBuild?: boolean;
     configPath?: string;
     optimizeBoundaries?: boolean | 'build';
+    assetHashVersion?: string;
     /**
      * Experimental features
      */

package/dist/esnext/framework/viteception.js

@@ -1,10 +1,16 @@
 import { createServer } from 'vite';
+import { isVite3 } from '../utilities/vite.js';
 export async function viteception(paths, options) {
     const isWorker = process.env.WORKER;
     delete process.env.WORKER;
     const server = await createServer({
         clearScreen: false,
-        server: { middlewareMode: 'ssr' },
+        server: {
+            middlewareMode: isVite3 ? true : 'ssr',
+            hmr: false,
+        },
+        // @ts-ignore
+        appType: 'custom',
         ...options,
     });
     if (isWorker) {