@shopify/hydrogen 0.6.2 → 0.7.1

package/dist/esnext/framework/Hydration/Cache.client.js

@@ -111,7 +111,9 @@ export async function convertHydrationResponseToReactComponents(response) {
 function createManifestFromWirePayload(payload) {
     return payload.split('\n').reduce((memo, row) => {
         const [key, ...values] = row.split(':');
-        memo[key] = JSON.parse(values.join(':'));
+        if (key) {
+            memo[key] = JSON.parse(values.join(':'));
+        }
         return memo;
     }, {});
 }

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.d.ts

@@ -2,6 +2,10 @@ import { CacheOptions } from '../../types';
 export declare class ServerComponentResponse extends Response {
     private wait;
     private cacheOptions?;
+    customStatus?: {
+        code?: number;
+        text?: string;
+    };
     /**
      * Allow custom body to be a string or a Promise.
      */
@@ -14,6 +18,12 @@ export declare class ServerComponentResponse extends Response {
     canStream(): boolean;
     cache(options: CacheOptions): void;
     get cacheControlHeader(): string;
+    writeHead({ status, statusText, headers, }?: {
+        status?: number;
+        statusText?: string;
+        headers?: Record<string, any>;
+    }): void;
+    redirect(location: string, status?: number): void;
     /**
      * Send the response from a Server Component. Renders React components to string,
      * and returns `null` to make React happy.

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.js

@@ -30,6 +30,19 @@ export class ServerComponentResponse extends Response {
         };
         return generateCacheControlHeader(options);
     }
+    writeHead({ status, statusText, headers, } = {}) {
+        if (status || statusText) {
+            this.customStatus = { code: status, text: statusText };
+        }
+        if (headers) {
+            for (const [key, value] of Object.entries(headers)) {
+                this.headers.set(key, value);
+            }
+        }
+    }
+    redirect(location, status = 307) {
+        this.writeHead({ status, headers: { location } });
+    }
     /**
      * Send the response from a Server Component. Renders React components to string,
      * and returns `null` to make React happy.

package/dist/esnext/framework/Hydration/client-imports.d.ts

@@ -1 +1 @@
-export default function importDevClientComponent(moduleId: string): any;
+export default function importClientComponent(moduleId: string): any;

package/dist/esnext/framework/Hydration/client-imports.js

@@ -16,7 +16,7 @@ const allClientComponents = {
     // @ts-ignore
     import.meta.glob('__USER_COMPONENTS_GLOB__'), `__USER_COMPONENTS_PREFIX__`),
 };
-export default function importDevClientComponent(moduleId) {
+export default function importClientComponent(moduleId) {
     const modImport = allClientComponents[moduleId];
     if (!modImport) {
         throw new Error(`Could not find client component ${moduleId}`);

package/dist/esnext/framework/Hydration/wire.server.js

@@ -68,7 +68,7 @@ export function generateWireSyntaxFromRenderedHtml(html) {
         .map((component, idx) => {
         return `M${idx + 1}:${JSON.stringify(component)}`;
     })
-        .join('\n') + `\nJ0:${JSON.stringify(wireModel)}`);
+        .join('\n') + `\nJ0:${JSON.stringify(wireModel)}`).trim();
 }
 function isDomNode(item) {
     return item !== null && typeof item === 'object' && '_owner' in item;

package/dist/esnext/framework/Hydration/writer.server.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /**
  * HydrationWriter is an implementation of `WritableStream` which
  * keeps track of chunks emitted from React's `pipeToNodeWritable`.

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

@@ -10,9 +10,13 @@ declare type HydrogenMiddlewareArgs = {
     devServer?: ViteDevServer;
     cache?: Cache;
 };
+export declare function graphiqlMiddleware({ shopifyConfig, dev, }: {
+    shopifyConfig: ShopifyConfig;
+    dev: boolean;
+}): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
 /**
  * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
  * Vite dev server plugin as well as production Node.js implementation.
  */
-export default function hydrogenMiddleware({ dev, shopifyConfig, cache, indexTemplate, getServerEntrypoint, devServer, }: HydrogenMiddlewareArgs): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
+export declare function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }: HydrogenMiddlewareArgs): (request: IncomingMessage, response: http.ServerResponse, next: NextFunction) => Promise<void>;
 export {};

package/dist/esnext/framework/middleware.js

@@ -1,15 +1,20 @@
 import { graphiqlHtml } from './graphiql';
 import handleEvent from '../handle-event';
-/**
- * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
- * Vite dev server plugin as well as production Node.js implementation.
- */
-export default function hydrogenMiddleware({ dev, shopifyConfig, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+export function graphiqlMiddleware({ shopifyConfig, dev, }) {
     return async function (request, response, next) {
         const graphiqlRequest = dev && isGraphiqlRequest(request);
         if (graphiqlRequest) {
             return respondWithGraphiql(response, shopifyConfig);
         }
+        next();
+    };
+}
+/**
+ * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
+ * Vite dev server plugin as well as production Node.js implementation.
+ */
+export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+    return async function (request, response, next) {
         const url = new URL('http://' + request.headers.host + request.originalUrl);
         const isReactHydrationRequest = url.pathname === '/react';
         /**
@@ -96,9 +101,8 @@ export default function hydrogenMiddleware({ dev, shopifyConfig, cache, indexTem
 }
 function shouldInterceptRequest(request, isReactHydrationRequest) {
     var _a;
-    return ((/text\/html|application\/hydrogen/.test((_a = request.headers['accept']) !== null && _a !== void 0 ? _a : '') ||
-        isReactHydrationRequest) &&
-        request.url !== '/favicon.ico');
+    return (/text\/html|application\/hydrogen/.test((_a = request.headers['accept']) !== null && _a !== void 0 ? _a : '') ||
+        isReactHydrationRequest);
 }
 /**
  * /graphiql and /___graphql are supported

package/dist/esnext/framework/plugins/resolver.d.ts

@@ -0,0 +1 @@
+export declare function resolve(path: string): string;

package/dist/esnext/framework/plugins/resolver.js

@@ -0,0 +1,3 @@
+export function resolve(path) {
+    return require.resolve(path);
+}

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

@@ -1,7 +1,7 @@
 export default () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: () => ({
+        config: (_, env) => ({
             resolve: {
                 alias: {
                     /**
@@ -52,6 +52,9 @@ export default () => {
                     'react-router-dom',
                 ],
             },
+            define: {
+                __DEV__: env.mode !== 'production',
+            },
         }),
     };
 };

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

@@ -1,6 +1,6 @@
 import path from 'path';
 import { promises as fs } from 'fs';
-import hydrogenMiddleware from '../middleware';
+import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware';
 import { InMemoryCache } from '../cache/in-memory';
 export default (shopifyConfig, pluginOptions) => {
     return {
@@ -17,7 +17,13 @@ export default (shopifyConfig, pluginOptions) => {
                 const indexHtml = await fs.readFile(resolve('index.html'), 'utf-8');
                 return await server.transformIndexHtml(url, indexHtml);
             }
-            server.middlewares.use(hydrogenMiddleware({
+            // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
+            // By running this middleware first, we avoid that.
+            server.middlewares.use(graphiqlMiddleware({
+                shopifyConfig,
+                dev: true,
+            }));
+            return () => server.middlewares.use(hydrogenMiddleware({
                 dev: true,
                 shopifyConfig,
                 indexTemplate: getIndexTemplate,

package/dist/esnext/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -1,5 +1,7 @@
+import { normalizePath } from 'vite';
 import path from 'path';
 import { proxyClientComponent } from '../server-components';
+import { resolve } from './resolver';
 export default () => {
     let config;
     return {
@@ -32,7 +34,7 @@ export default () => {
                     'When using Hydrogen components within Client Components, use the `@shopify/hydrogen/client` entrypoint instead.');
             }
         },
-        load(id, options) {
+        async load(id, options) {
             if (!isSSR(options))
                 return null;
             // Wrapped components won't match this becase they end in ?no-proxy
@@ -54,19 +56,19 @@ export default () => {
              */
             if (id.includes('/Hydration/client-imports')) {
                 // eslint-disable-next-line node/no-missing-require
-                const hydrogenPath = path.dirname(require.resolve('@shopify/hydrogen'));
+                const hydrogenPath = path.dirname(resolve('@shopify/hydrogen'));
                 const importerPath = path.join(hydrogenPath, 'framework', 'Hydration');
-                const importerToRootPath = path.relative(importerPath, config.root);
-                const [importerToRootNested] = importerToRootPath.match(/(\.\.\/)+/) || [];
-                const userPrefix = path.normalize(path.join(importerPath, importerToRootNested));
+                const importerToRootPath = normalizePath(path.relative(importerPath, config.root));
+                const [importerToRootNested] = importerToRootPath.match(/(\.\.\/)+(\.\.)?/) || [];
+                const userPrefix = path.normalize(path.join(importerPath, importerToRootNested.replace(/\/?$/, path.sep)));
                 const userGlob = path.join(importerToRootPath, 'src', '**/*.client.[jt]sx');
                 const libPrefix = hydrogenPath + path.sep;
                 const libGlob = path.join(path.relative(importerPath, hydrogenPath), 'components', '**/*.client.js');
                 return code
-                    .replace('__USER_COMPONENTS_PREFIX__', userPrefix)
-                    .replace('__USER_COMPONENTS_GLOB__', userGlob)
-                    .replace('__LIB_COMPONENTS_PREFIX__', libPrefix)
-                    .replace('__LIB_COMPONENTS_GLOB__', libGlob);
+                    .replace('__USER_COMPONENTS_PREFIX__', normalizePath(userPrefix))
+                    .replace('__USER_COMPONENTS_GLOB__', normalizePath(userGlob))
+                    .replace('__LIB_COMPONENTS_PREFIX__', normalizePath(libPrefix))
+                    .replace('__LIB_COMPONENTS_GLOB__', normalizePath(libGlob));
             }
         },
     };

package/dist/esnext/framework/server-components.js

@@ -2,9 +2,8 @@ import { init, parse } from 'es-module-lexer';
 import { promises as fs } from 'fs';
 import { transformWithEsbuild } from 'vite';
 import MagicString from 'magic-string';
+const DEFAULT_EXPORT = 'default';
 export async function proxyClientComponent({ id, src, }) {
-    var _a;
-    const defaultComponentName = (_a = id.split('/').pop()) === null || _a === void 0 ? void 0 : _a.split('.').shift();
     // Modify the import ID to avoid infinite wraps
     const importFrom = `${id}?no-proxy`;
     await init;
@@ -13,56 +12,35 @@ export async function proxyClientComponent({ id, src, }) {
     }
     const { code } = await transformWithEsbuild(src, id);
     const [, exportStatements] = parse(code);
-    const hasDefaultExport = exportStatements.includes('default');
-    // Split namedImports in components to wrap and everything else (e.g. GQL Fragments)
-    const namedImports = exportStatements.reduce((acc, i) => {
-        if (i !== 'default') {
-            // Add here any other naming pattern for a non-component export
-            if (/^use[A-Z]|Fragment$|Context$|^[A-Z_]+$/.test(i)) {
-                acc.other.push(i);
-            }
-            else {
-                acc.components.push(i);
-            }
+    // Classify exports in components to wrap vs. everything else (e.g. GQL Fragments)
+    const otherExports = [];
+    const componentExports = [];
+    for (const key of exportStatements) {
+        if (key !== DEFAULT_EXPORT &&
+            /^use[A-Z]|Fragment$|Context$|^[A-Z_]+$/.test(key)) {
+            otherExports.push(key);
         }
-        return acc;
-    }, { components: [], other: [] });
-    if (!hasDefaultExport && namedImports.components.length === 0) {
-        return `export * from '${importFrom}';\n`;
-    }
-    const s = new MagicString(`import {wrapInClientMarker} from '@shopify/hydrogen/marker';`);
-    s.append('\nimport ');
-    if (hasDefaultExport) {
-        s.append(defaultComponentName);
-        if (namedImports.components.length > 0) {
-            s.append(', ');
+        else {
+            componentExports.push(key);
         }
     }
-    if (namedImports.components.length) {
-        s.append('* as namedImports');
+    if (componentExports.length === 0) {
+        return `export * from '${importFrom}';\n`;
     }
-    s.append(` from '${importFrom}';\n\n`);
+    const s = new MagicString(`import {wrapInClientMarker} from '@shopify/hydrogen/marker';\n` +
+        `import * as allImports from '${importFrom}';\n\n`);
     // Re-export other stuff directly without wrapping
-    if (namedImports.other.length > 0) {
-        s.append(`export {${namedImports.other.join(', ')}} from '${importFrom}';\n`);
+    if (otherExports.length > 0) {
+        s.append(`export {${otherExports.join(', ')}} from '${importFrom}';\n`);
     }
-    if (hasDefaultExport) {
-        s.append(generateComponentExport({
-            id,
-            componentName: defaultComponentName,
-            isDefault: true,
-        }));
-    }
-    namedImports.components.forEach((name) => s.append(generateComponentExport({
-        id,
-        componentName: name,
-        isDefault: false,
-    })));
+    // Wrap components in Client Marker
+    componentExports.forEach((key) => {
+        var _a;
+        const isDefault = key === DEFAULT_EXPORT;
+        const componentName = isDefault
+            ? (_a = id.split('/').pop()) === null || _a === void 0 ? void 0 : _a.split('.').shift()
+            : key;
+        s.append(`export ${isDefault ? DEFAULT_EXPORT : `const ${componentName} =`} wrapInClientMarker({ name: '${componentName}', id: '${id}', component: allImports['${key}'], named: ${!isDefault} });\n`);
+    });
     return s.toString();
 }
-function generateComponentExport({ id, isDefault, componentName, }) {
-    const component = isDefault
-        ? componentName
-        : `namedImports['${componentName}']`;
-    return `export ${isDefault ? 'default' : `const ${componentName} =`} wrapInClientMarker({ name: '${componentName}', id: '${id}', component: ${component}, named: ${!isDefault} });\n`;
-}