@shopify/hydrogen 0.6.1 → 0.7.0

package/dist/esnext/framework/ClientMarker/ClientMarker.js

@@ -1,7 +1,30 @@
 import React, { useContext } from 'react';
 import { HydrationContext } from '../Hydration/HydrationContext.server';
 import { renderReactProps } from '../Hydration/react-utils';
-export function ClientMarker({ name, id, props: allProps, component: Component, named, }) {
+export function wrapInClientMarker(meta) {
+    const { component, name } = meta;
+    if (!component ||
+        (typeof component !== 'function' &&
+            !Object.prototype.hasOwnProperty.call(component, 'render'))) {
+        // This is not a React component, return it as is.
+        return component;
+    }
+    // Use object syntax here to make sure the function name
+    // comes from the meta params for better error stacks.
+    const wrappedComponent = {
+        // eslint-disable-next-line react/display-name
+        [name]: (props) => React.createElement(ClientMarker, { ...{ props, meta } }),
+    }[name];
+    // Relay component properties such as `Image.Fragment`
+    for (const [key, value] of Object.entries(component)) {
+        Object.defineProperty(wrappedComponent, key, {
+            enumerable: true,
+            value,
+        });
+    }
+    return wrappedComponent;
+}
+function ClientMarker({ props: allProps, meta: { name, id, component: Component, named }, }) {
     const isHydrating = useContext(HydrationContext);
     if (!isHydrating)
         return React.createElement(Component, { ...allProps });

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

@@ -1,5 +1,6 @@
 import { createElement, Fragment } from 'react';
 import { wrapPromise } from '../../utilities';
+import importClientComponent from './client-imports';
 const cache = new Map();
 const moduleCache = new Map();
 /**
@@ -110,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;
     }, {});
 }
@@ -122,7 +125,7 @@ async function eagerLoadModules(manifest) {
         if (moduleCache.has(module.id)) {
             return moduleCache.get(module.id);
         }
-        const mod = await import(/* @vite-ignore */ module.id);
+        const mod = await importClientComponent(module.id);
         moduleCache.set(module.id, mod);
         return mod;
     })

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

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

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

@@ -0,0 +1,25 @@
+// Transform relative paths to absolute in order
+// to match component IDs from ClientMarker.
+function normalizeComponentPaths(componentObject, prefix) {
+    return Object.entries(componentObject).reduce((acc, [key, value]) => {
+        acc[prefix + key.replace(/\.\.\//gm, '')] = value;
+        return acc;
+    }, {});
+}
+// These strings are replaced in a plugin with real globs
+// and paths that depend on the user project structure.
+const allClientComponents = {
+    ...normalizeComponentPaths(
+    // @ts-ignore
+    import.meta.glob('__LIB_COMPONENTS_GLOB__'), `__LIB_COMPONENTS_PREFIX__`),
+    ...normalizeComponentPaths(
+    // @ts-ignore
+    import.meta.glob('__USER_COMPONENTS_GLOB__'), `__USER_COMPONENTS_PREFIX__`),
+};
+export default function importClientComponent(moduleId) {
+    const modImport = allClientComponents[moduleId];
+    if (!modImport) {
+        throw new Error(`Could not find client component ${moduleId}`);
+    }
+    return modImport();
+}

package/dist/esnext/framework/Hydration/react-utils.js

@@ -26,6 +26,7 @@ export function renderReactProps(props) {
  */
 function renderReactProp(prop) {
     if (typeof prop === 'object' &&
+        prop !== null &&
         prop['$$typeof'] === Symbol.for('react.element')) {
         if (prop.type instanceof Function) {
             /**

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/graphiql.js

@@ -1,4 +1,4 @@
-import { DEFAULT_API_VERSION } from '../foundation';
+import { DEFAULT_API_VERSION } from '../foundation/ShopifyProvider/consts';
 export function graphiqlHtml(shop, token, apiVersion = DEFAULT_API_VERSION) {
     return `<html>
   <head>

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,37 +1,16 @@
+import { normalizePath } from 'vite';
 import path from 'path';
+import { proxyClientComponent } from '../server-components';
+import { resolve } from './resolver';
 import { promises as fs } from 'fs';
-import glob from 'fast-glob';
-import { tagClientComponents, wrapClientComponents } from '../server-components';
 export default () => {
     let config;
-    let clientManifest;
     return {
         name: 'vite-plugin-react-server-components-shim',
         enforce: 'pre',
         configResolved(_config) {
             config = _config;
         },
-        buildStart() {
-            if (config.build.ssr || config.command !== 'build')
-                return;
-            const hydrogenComponentPath = path.dirname(
-            // eslint-disable-next-line node/no-missing-require
-            require.resolve('@shopify/hydrogen'));
-            /**
-             * Grab each of the client components in this project and emit them as chunks.
-             * This allows us to dynamically import them later during partial hydration in production.
-             */
-            const clientComponents = glob
-                .sync(path.resolve(config.root, './src/**/*.client.(j|t)sx'))
-                .concat(glob.sync(path.join(hydrogenComponentPath, '**/*.client.js')));
-            clientComponents.forEach((id) => {
-                this.emitFile({
-                    type: 'chunk',
-                    id,
-                    preserveSignature: 'strict',
-                });
-            });
-        },
         async resolveId(source, importer) {
             if (!importer)
                 return null;
@@ -56,39 +35,51 @@ export default () => {
                     'When using Hydrogen components within Client Components, use the `@shopify/hydrogen/client` entrypoint instead.');
             }
         },
-        transform(src, id, options) {
+        async load(id, options) {
             if (!isSSR(options))
                 return null;
-            /**
-             * When a server component imports a client component, tag a `?fromServer`
-             * identifier at the end of the import to indicate that we should transform
-             * it with a ClientMarker (below).
-             *
-             * We are manually passing `@shopify/hydrogen/client` as an additional "from"
-             * identifier to allow local Server Components to import them as tagged Client Components.
-             * We should also accept this as a plugin argument for other third-party packages.
-             */
-            if (/\.server\.(j|t)sx?$/.test(id)) {
-                return tagClientComponents(src);
+            // Wrapped components won't match this becase they end in ?no-proxy
+            if (/\.client\.[jt]sx?$/.test(id)) {
+                return proxyClientComponent({ id });
+            }
+            // Temporary fix for sourcemap warnings in client components. This can be fixed in @vitejs/react-plugin.
+            // `react-ssr-prepass` sourcemap seems to be broken and crashes in workers/Jest.
+            if (id.endsWith('?no-proxy') ||
+                id.includes('dist/react-ssr-prepass.es.js')) {
+                return {
+                    code: await fs.readFile(id.split('?')[0], 'utf-8'),
+                    map: { mappings: '' },
+                };
             }
+            return null;
         },
-        async load(id, options) {
-            if (!isSSR(options))
-                return null;
+        transform(code, id) {
             /**
-             * Client components being loaded from server components need to be
-             * wrapped in a ClientMarker so we can serialize their props and
-             * dynamically load them in the browser.
+             * In order to allow dynamic component imports from RSC, we use Vite's import.meta.glob.
+             * This replaces the glob import path placeholders in importer-dev.ts with resolved paths
+             * to all client components (both user and Hydrogen components).
+             *
+             * NOTE: Glob import paths MUST be relative to the importer file (client-imports.ts) in
+             * order to get the `?v=xxx` querystring from Vite added to the import URL.
+             * If the paths are relative to the root instead, Vite won't add the querystring
+             * and we will have duplicated files in the browser (with duplicated contexts, etc).
              */
-            if (id.includes('?fromServer')) {
-                return await wrapClientComponents({
-                    id,
-                    getManifestFile: getFileFromClientManifest,
-                    root: config.root,
-                    isBuild: config.command === 'build',
-                });
+            if (id.includes('/Hydration/client-imports')) {
+                // eslint-disable-next-line node/no-missing-require
+                const hydrogenPath = path.dirname(resolve('@shopify/hydrogen'));
+                const importerPath = path.join(hydrogenPath, 'framework', 'Hydration');
+                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__', normalizePath(userPrefix))
+                    .replace('__USER_COMPONENTS_GLOB__', normalizePath(userGlob))
+                    .replace('__LIB_COMPONENTS_PREFIX__', normalizePath(libPrefix))
+                    .replace('__LIB_COMPONENTS_GLOB__', normalizePath(libGlob));
             }
-            return null;
         },
     };
     // Mitigation for upcoming minor Vite update
@@ -106,29 +97,4 @@ export default () => {
         }
         return false;
     }
-    async function getFileFromClientManifest(manifestId) {
-        const manifest = await getClientManifest();
-        const fileName = '/' + manifestId.split('/').pop();
-        const matchingKey = Object.keys(manifest).find((key) => key.endsWith(fileName));
-        if (!matchingKey) {
-            throw new Error(`Could not find a matching entry in the manifest for: ${manifestId}`);
-        }
-        return manifest[matchingKey].file;
-    }
-    async function getClientManifest() {
-        if (config.command !== 'build') {
-            return {};
-        }
-        if (clientManifest)
-            return clientManifest;
-        try {
-            const manifest = JSON.parse(await fs.readFile(path.resolve(config.root, './dist/client/manifest.json'), 'utf-8'));
-            clientManifest = manifest;
-            return manifest;
-        }
-        catch (e) {
-            console.error(`Failed to load client manifest:`);
-            console.error(e);
-        }
-    }
 };

package/dist/esnext/framework/server-components.d.ts

@@ -1,12 +1,4 @@
-export declare function wrapClientComponents({ id, getManifestFile, root, isBuild, }: {
+export declare function proxyClientComponent({ id, src, }: {
     id: string;
-    getManifestFile: (manifestId: string) => Promise<string>;
-    root: string;
-    isBuild: boolean;
+    src?: string;
 }): Promise<string>;
-export declare function tagClientComponents(src: string, additionalReferences?: Array<string | RegExp>): {
-    code: string;
-    map: {
-        mappings: string;
-    };
-};

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

@@ -1,72 +1,68 @@
-export async function wrapClientComponents({ id, getManifestFile, root, isBuild, }) {
-    const normalizedId = id.slice(0, id.indexOf('?fromServer'));
-    const manifestId = normalizedId.replace(root, '');
-    const name = id.split('/').pop().split('.').shift();
-    /**
-     * ?fromServer can designate named exports as a comma-separated list.
-     * ?fromServer=Foo,Bar
-     *
-     * Re-named exports are also supported:
-     * ?fromServer=Foo:Baz,Bar
-     */
-    const names = id.includes('?fromServer=')
-        ? id
-            .slice(id.indexOf('?fromServer=') + '?fromServer='.length)
-            .split(',')
-            .map((name) => name.split(':').shift())
-        : [];
-    /**
-     * Determine the id of the chunk to be imported. If we're building
-     * the production bundle, we need to reference the chunk generated
-     * during the client manifest. Otherwise, we can pass the normalizedId
-     * and Vite's dev server will load it as expected.
-     */
-    const importId = isBuild
-        ? '/' + (await getManifestFile(manifestId))
-        : normalizedId;
-    const isNamedExport = names.length > 0;
-    let code = `import React from 'react';
-  import {ClientMarker} from '@shopify/hydrogen/marker';`;
-    if (!isNamedExport) {
-        code += `
-  import _Component from '${normalizedId}';
-
-  export default function _ClientComponent(props) {
-    return React.createElement(ClientMarker, { name: '${name}', id: '${importId}', props, component: _Component, named: false });
-  }
-  export * from '${normalizedId}';`;
+import { init, parse } from 'es-module-lexer';
+import { promises as fs } from 'fs';
+import { transformWithEsbuild } from 'vite';
+import MagicString from 'magic-string';
+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;
+    if (!src) {
+        src = await fs.readFile(id, 'utf-8');
     }
-    else {
-        code += `
-  import {${names
-            .map((name, idx) => name + ' as ' + `_Component${idx}`)
-            .join(', ')}} from '${normalizedId}';`;
-        names.forEach((name, idx) => {
-            code += `\n
-  export function ${name}(props) {
-    return React.createElement(ClientMarker, { name: '${name}', id: '${importId}', props, component: _Component${idx}, named: true });
-  }`;
-        });
+    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);
+            }
+        }
+        return acc;
+    }, { components: [], other: [] });
+    if (!hasDefaultExport && namedImports.components.length === 0) {
+        return `export * from '${importFrom}';\n`;
     }
-    return code;
+    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(', ');
+        }
+    }
+    if (namedImports.components.length) {
+        s.append('* as namedImports');
+    }
+    s.append(` 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 (hasDefaultExport) {
+        s.append(generateComponentExport({
+            id,
+            componentName: defaultComponentName,
+            isDefault: true,
+        }));
+    }
+    namedImports.components.forEach((name) => s.append(generateComponentExport({
+        id,
+        componentName: name,
+        isDefault: false,
+    })));
+    return s.toString();
 }
-export function tagClientComponents(src, additionalReferences = []) {
-    const modulePatterns = [/[\w\/\.]+\.client(?:\.(?:j|t)sx?)?/]
-        // @ts-ignore
-        .concat(additionalReferences)
-        .map((pattern) => (pattern instanceof RegExp ? pattern.source : pattern));
-    const fromModulePattern = modulePatterns.join('|');
-    /**
-     * Default exports
-     * @see https://rubular.com/r/XZjsrolet5twvB
-     */
-    let regex = new RegExp(`import\\s*\\w*\\s*from\\s*(?:'|")(?:(${fromModulePattern}))`, 'g');
-    let code = src.replace(regex, (mod) => mod + '?fromServer');
-    /**
-     * Named exports
-     * @see https://rubular.com/r/6qdREcs4T9Nw1e
-     */
-    regex = new RegExp(`import\\s*{([\\w\\s,]+)}\\s*from\\s*(?:'|")(?:(${fromModulePattern}))`, 'g');
-    code = code.replace(regex, (mod, imports) => `${mod}?fromServer=${imports.replace(/ as /g, ':').replace(/ /g, '')}`);
-    return { code, map: { mappings: '' } };
+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`;
 }