@shopify/hydrogen 0.1.0

package/dist/node/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/node/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const fs_1 = require("fs");
+const middleware_1 = __importDefault(require("../middleware"));
+exports.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_1.default.resolve(server.config.root, p);
+            async function getIndexTemplate(url) {
+                const indexHtml = await fs_1.promises.readFile(resolve('index.html'), 'utf-8');
+                return await server.transformIndexHtml(url, indexHtml);
+            }
+            server.middlewares.use(middleware_1.default({
+                dev: true,
+                shopifyConfig,
+                indexTemplate: getIndexTemplate,
+                getServerEntrypoint: async () => await server.ssrLoadModule(resolve('./src/entry-server')),
+                devServer: server,
+            }));
+        },
+    };
+};

package/dist/node/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/node/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const fs_1 = require("fs");
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const server_components_1 = require("../server-components");
+exports.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 = fast_glob_1.default
+                .sync(path_1.default.resolve(config.root, './src/**/*.client.(j|t)sx'))
+                .concat(fast_glob_1.default.sync(path_1.default.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 server_components_1.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 server_components_1.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_1.promises.readFile(path_1.default.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/node/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/node/framework/server-components.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagClientComponents = exports.wrapClientComponents = void 0;
+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;
+}
+exports.wrapClientComponents = wrapClientComponents;
+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: '' } };
+}
+exports.tagClientComponents = tagClientComponents;