@shopify/hydrogen 0.1.0

package/dist/esnext/framework/middleware.js

@@ -0,0 +1,116 @@
+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, indexTemplate, getServerEntrypoint, devServer, }) {
+    return async function (request, response, next) {
+        const graphiqlRequest = dev && isGraphiqlRequest(request);
+        if (graphiqlRequest) {
+            return respondWithGraphiql(response, shopifyConfig);
+        }
+        const url = new URL('http://' + request.headers.host + request.originalUrl);
+        const isReactHydrationRequest = url.pathname === '/react';
+        /**
+         * If it's a dev environment, it's assumed that Vite's dev server is handling
+         * any static or JS requests, so we need to ensure that we don't try to handle them.
+         *
+         * If it's a product environment, it's assumed that the developer is handling
+         * static requests with e.g. static middleware.
+         */
+        if (dev && !shouldInterceptRequest(request, isReactHydrationRequest)) {
+            return next();
+        }
+        try {
+            /**
+             * We're running in the Node.js runtime without access to `fetch`,
+             * which is needed for proxy requests and server-side API requests.
+             */
+            if (!globalThis.fetch) {
+                const fetch = await import('node-fetch');
+                // @ts-ignore
+                globalThis.fetch = fetch.default;
+                // @ts-ignore
+                globalThis.Request = fetch.Request;
+                // @ts-ignore
+                globalThis.Response = fetch.Response;
+                // @ts-ignore
+                globalThis.Headers = fetch.Headers;
+            }
+            /**
+             * Dynamically import ServerComponentResponse after the `fetch`
+             * polyfill has loaded above.
+             */
+            const { ServerComponentRequest } = await import('../foundation/Hydration/ServerComponentRequest.server');
+            const eventResponse = await handleEvent(
+            /**
+             * Mimic a `FetchEvent`
+             */
+            {}, {
+                request: new ServerComponentRequest(request),
+                entrypoint: await getServerEntrypoint(),
+                indexTemplate,
+                streamableResponse: response,
+                dev,
+            });
+            /**
+             * If a `Response` was returned, that means it was not streamed.
+             * Convert the response into a proper Node.js response.
+             */
+            if (eventResponse) {
+                eventResponse.headers.forEach((value, key) => {
+                    response.setHeader(key, value);
+                });
+                response.statusCode = eventResponse.status;
+                response.end(eventResponse.body);
+            }
+        }
+        catch (e) {
+            if (dev && devServer)
+                devServer.ssrFixStacktrace(e);
+            console.log(e.stack);
+            response.statusCode = 500;
+            /**
+             * Attempt to print the error stack within the template.
+             * This allows the react-refresh plugin and other Vite runtime helpers
+             * to display the error and auto-refresh when the error is fixed, instead
+             * of a white screen that needs a manual refresh.
+             */
+            try {
+                const template = typeof indexTemplate === 'function'
+                    ? await indexTemplate(url.toString())
+                    : indexTemplate;
+                const html = template.replace(`<div id="root"></div>`, `<div id="root"><pre><code>${e.stack}</code></pre></div>`);
+                response.write(html);
+                next(e);
+            }
+            catch (_e) {
+                // If template loading is the culprit, give up and just return the error stack.
+                response.write(e.stack);
+                next(e);
+            }
+        }
+    };
+}
+function shouldInterceptRequest(request, isReactHydrationRequest) {
+    var _a;
+    return ((((_a = request.headers['accept']) === null || _a === void 0 ? void 0 : _a.includes('text/html')) ||
+        isReactHydrationRequest) &&
+        request.method === 'GET' &&
+        request.url !== '/favicon.ico');
+}
+/**
+ * /graphiql and /___graphql are supported
+ */
+function isGraphiqlRequest(request) {
+    return /^\/(?:_{3})?graphi?ql/.test(request.url || '');
+}
+async function respondWithGraphiql(response, shopifyConfig) {
+    if (!shopifyConfig) {
+        throw new Error("You must provide shopifyConfig to Hydrogen's Vite middleware");
+    }
+    const { storeDomain, storefrontToken, graphqlApiVersion } = shopifyConfig;
+    response.setHeader('Content-Type', 'text/html');
+    response.end(graphiqlHtml(storeDomain, storefrontToken, graphqlApiVersion));
+}

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

@@ -0,0 +1,3 @@
+import { ShopifyConfig } from '../types';
+declare const _default: (shopifyConfig: ShopifyConfig) => ("" | import("vite").Plugin | import("vite").PluginOption[] | undefined)[];
+export default _default;

package/dist/esnext/framework/plugin.js

@@ -0,0 +1,14 @@
+import hydrogenConfig from './plugins/vite-plugin-hydrogen-config';
+import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware';
+import reactServerComponentShim from './plugins/vite-plugin-react-server-components-shim';
+import inspect from 'vite-plugin-inspect';
+import react from '@vitejs/plugin-react';
+export default (shopifyConfig) => {
+    return [
+        process.env.VITE_INSPECT && inspect(),
+        hydrogenConfig(),
+        hydrogenMiddleware(shopifyConfig),
+        reactServerComponentShim(),
+        react(),
+    ];
+};

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

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

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

@@ -0,0 +1,43 @@
+export default () => {
+    return {
+        name: 'vite-plugin-hydrogen-config',
+        config: () => ({
+            resolve: {
+                alias: {
+                    /**
+                     * For some reason, when building in a worker, Vite always
+                     * pulls the client version instead of the server version of these
+                     * dependencies. We intentially force it to load the server versions.
+                     */
+                    'html-dom-parser': process.env.WORKER
+                        ? 'html-dom-parser/lib/server/html-to-dom'
+                        : 'html-dom-parser',
+                },
+            },
+            build: {
+                sourcemap: true,
+            },
+            ssr: {
+                external: ['isomorphic-dompurify'],
+                /**
+                 * Tell Vite to bundle everything when we're building for Workers.
+                 */
+                noExternal: Boolean(process.env.WORKER),
+                target: process.env.WORKER ? 'webworker' : 'node',
+            },
+            optimizeDeps: {
+                /**
+                 * 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.
+                 */
+                include: [
+                    'html-dom-parser',
+                    'html-react-parser',
+                    'focus-trap-react',
+                    'react-helmet-async',
+                ],
+            },
+        }),
+    };
+};

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

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

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

@@ -0,0 +1,28 @@
+import path from 'path';
+import { promises as fs } from 'fs';
+import hydrogenMiddleware from '../middleware';
+export default (shopifyConfig) => {
+    return {
+        name: 'vite-plugin-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.
+         */
+        configureServer(server) {
+            const resolve = (p) => path.resolve(server.config.root, p);
+            async function getIndexTemplate(url) {
+                const indexHtml = await fs.readFile(resolve('index.html'), 'utf-8');
+                return await server.transformIndexHtml(url, indexHtml);
+            }
+            server.middlewares.use(hydrogenMiddleware({
+                dev: true,
+                shopifyConfig,
+                indexTemplate: getIndexTemplate,
+                getServerEntrypoint: async () => await server.ssrLoadModule(resolve('./src/entry-server')),
+                devServer: server,
+            }));
+        },
+    };
+};

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

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

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

@@ -0,0 +1,123 @@
+import path from 'path';
+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() {
+            var _a;
+            if (config.build.ssr || config.command !== 'build')
+                return;
+            /**
+             * By default, it's assumed the path to Hydrogen components is adjacent to the config
+             * in node_modules. However, in the case of the Yarn monorepo (or E2E tests), this
+             * path needs to be customized. We use an environment variable in that case.
+             */
+            const hydrogenComponentPath = (_a = process.env.HYDROGEN_PATH) !== null && _a !== void 0 ? _a : './node_modules/@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.resolve(config.root, hydrogenComponentPath, 'dist/esnext/**/*.client.js')));
+            clientComponents.forEach((id) => {
+                this.emitFile({
+                    type: 'chunk',
+                    id,
+                    preserveSignature: 'strict',
+                });
+            });
+        },
+        async resolveId(source, importer) {
+            if (!importer)
+                return null;
+            /**
+             * Throw errors when non-Server Components try to load Server Components.
+             */
+            if (/\.server(\.(j|t)sx?)?$/.test(source) &&
+                !/\.server\.(j|t)sx?$/.test(importer) &&
+                // Ignore entrypoints, index re-exports, ClientMarker, handle-worker-event
+                !/(entry-server\.(j|t)sx?|index\.(html|js)|ClientMarker\.js|handle-worker-event\.js)$/.test(importer)) {
+                throw new Error(`Cannot import ${source} from "${importer}". ` +
+                    'By convention, Server Components can only be imported from other Server Component files. ' +
+                    'That way nobody accidentally sends these to the client by indirectly importing it.');
+            }
+            /**
+             * Throw errors when Client Components try to load Hydrogen components from the
+             * server-only entrypoint.
+             */
+            if (/@shopify\/hydrogen$/.test(source) &&
+                /\.client\.(j|t)sx?$/.test(importer)) {
+                throw new Error(`Cannot import @shopify/hydrogen from "${importer}". ` +
+                    'When using Hydrogen components within Client Components, use the `@shopify/hydrogen/client` entrypoint instead.');
+            }
+        },
+        transform(src, id, ssr) {
+            if (!ssr)
+                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);
+            }
+        },
+        async load(id, ssr) {
+            if (!ssr)
+                return null;
+            /**
+             * 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.
+             */
+            if (id.includes('?fromServer')) {
+                return await wrapClientComponents({
+                    id,
+                    getManifestFile: getFileFromClientManifest,
+                    root: config.root,
+                    isBuild: config.command === 'build',
+                });
+            }
+            return null;
+        },
+    };
+    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

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

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

@@ -0,0 +1,72 @@
+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}';`;
+    }
+    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 });
+  }`;
+        });
+    }
+    return code;
+}
+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: '' } };
+}