@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -3,31 +3,72 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.HYDROGEN_DEFAULT_SERVER_ENTRY = void 0;
+const vite_1 = require("vite");
+const body_parser_1 = __importDefault(require("body-parser"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
-const middleware_1 = __importDefault(require("../middleware"));
-exports.default = (shopifyConfig) => {
+const middleware_1 = require("../middleware");
+const in_memory_1 = require("../cache/in-memory");
+const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+exports.HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
+exports.default = (pluginOptions) => {
     return {
-        name: 'vite-plugin-hydrogen-middleware',
+        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.
          */
-        configureServer(server) {
+        async 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({
+            await polyfillOxygenEnv(server.config);
+            // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
+            // By running this middleware first, we avoid that.
+            server.middlewares.use((0, middleware_1.graphiqlMiddleware)({
+                dev: true,
+                getShopifyConfig: async (incomingMessage) => {
+                    const { default: hydrogenConfig } = await server.ssrLoadModule(vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
+                    // @ts-ignore
+                    const { address = 'localhost', port = '3000' } = server.httpServer?.address() || {};
+                    const url = new URL(`http://${address}:${port}${incomingMessage.url}`);
+                    const request = new Request(url.toString(), {
+                        headers: incomingMessage.headers,
+                    });
+                    // @ts-expect-error Manually set `normalizedUrl` which a developer expects to be available
+                    // via `HydrogenRequest` during production runtime.
+                    request.normalizedUrl = request.url;
+                    const { shopify } = hydrogenConfig;
+                    return typeof shopify === 'function' ? shopify(request) : shopify;
+                },
+            }));
+            server.middlewares.use(body_parser_1.default.raw({ type: '*/*' }));
+            return () => server.middlewares.use((0, middleware_1.hydrogenMiddleware)({
                 dev: true,
-                shopifyConfig,
                 indexTemplate: getIndexTemplate,
-                getServerEntrypoint: async () => await server.ssrLoadModule(resolve('./src/entry-server')),
+                getServerEntrypoint: () => server.ssrLoadModule(exports.HYDROGEN_DEFAULT_SERVER_ENTRY),
                 devServer: server,
+                cache: pluginOptions?.devCache
+                    ? new in_memory_1.InMemoryCache()
+                    : undefined,
             }));
         },
     };
 };
+async function polyfillOxygenEnv(config) {
+    const env = await (0, vite_1.loadEnv)(config.mode, config.root, '');
+    const publicPrefixes = Array.isArray(config.envPrefix)
+        ? config.envPrefix
+        : [config.envPrefix || ''];
+    for (const key of Object.keys(env)) {
+        if (publicPrefixes.some((prefix) => key.startsWith(prefix))) {
+            delete env[key];
+        }
+    }
+    globalThis.Oxygen = { env };
+}

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.d.ts

@@ -0,0 +1,2 @@
+import { HydrogenVitePluginOptions } from '../types';
+export default function (options?: HydrogenVitePluginOptions): any;

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-ignore
+const plugin_js_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin.js"));
+const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
+const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+function default_1(options) {
+    return (0, plugin_js_1.default)({
+        serverBuildEntries: [
+            vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
+            vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
+        ],
+        isServerComponentImporterAllowed(importer, source) {
+            return (
+            // Always allow the entry server (e.g. App.server.jsx) to be imported
+            // in other files such as worker.js or server.js.
+            source.includes(vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY) ||
+                /(index|entry-server|hydrogen\.config)\.[jt]s/.test(importer) ||
+                // Support importing server components for testing
+                // TODO: revisit this when RSC splits into two bundles
+                /\.test\.[tj]sx?$/.test(importer));
+        },
+        ...options,
+    });
+}
+exports.default = default_1;

package/dist/node/framework/plugins/vite-plugin-hydrogen-suppress-warnings.d.ts

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

package/dist/node/framework/plugins/vite-plugin-hydrogen-suppress-warnings.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = () => {
+    return {
+        name: 'hydrogen:suppress-warnings',
+        configResolved(config) {
+            // TODO: Fix the actual issues that cause these warnings
+            const filterOut = (msg) => msg.startsWith("@shopify/hydrogen doesn't appear to be written in CJS") ||
+                (msg.includes('missing source files') &&
+                    ['kolorist'].some((lib) => msg.includes(lib)));
+            for (const method of ['warn', 'warnOnce']) {
+                const original = config.logger[method];
+                config.logger[method] = (msg, ...args) => {
+                    if (filterOut(msg))
+                        return;
+                    return original(msg, ...args);
+                };
+            }
+        },
+    };
+};

package/dist/node/framework/plugins/vite-plugin-hydrogen-virtual-files.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+import type { HydrogenVitePluginOptions } from '../types';
+export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
+export declare const VIRTUAL_PROXY_HYDROGEN_CONFIG_ID: string;
+export declare const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID: string;
+declare const _default: (pluginOptions: HydrogenVitePluginOptions) => Plugin;
+export default _default;

package/dist/node/framework/plugins/vite-plugin-hydrogen-virtual-files.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID = exports.HYDROGEN_DEFAULT_SERVER_ENTRY = void 0;
+const vite_1 = require("vite");
+const path_1 = __importDefault(require("path"));
+const fs_1 = require("fs");
+const viteception_1 = require("../viteception");
+exports.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__';
+const PROXY_PREFIX = 'proxy__';
+const HYDROGEN_CONFIG_ID = 'hydrogen.config.ts';
+const VIRTUAL_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + HYDROGEN_CONFIG_ID;
+exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDROGEN_CONFIG_ID;
+const HYDROGEN_ROUTES_ID = 'hydrogen-routes.server.jsx';
+const VIRTUAL_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + HYDROGEN_ROUTES_ID;
+exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDROGEN_ROUTES_ID;
+exports.default = (pluginOptions) => {
+    let config;
+    let server;
+    return {
+        name: 'hydrogen:virtual-files',
+        configResolved(_config) {
+            config = _config;
+        },
+        configureServer(_server) {
+            server = _server;
+        },
+        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 }));
+            }
+            if ([
+                exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
+                exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
+                VIRTUAL_HYDROGEN_ROUTES_ID,
+            ].includes(source)) {
+                // Virtual modules convention
+                // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
+                return '\0' + source;
+            }
+        },
+        load(id) {
+            // 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' + exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
+                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default hc;`;
+            }
+            if (id === '\0' + exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID) {
+                return `import hr from '${VIRTUAL_HYDROGEN_ROUTES_ID}'; export default hr;`;
+            }
+            if (id === '\0' + VIRTUAL_HYDROGEN_ROUTES_ID) {
+                return importHydrogenConfig().then((hc) => {
+                    let routesPath = (typeof hc.routes === 'string' ? hc.routes : hc.routes?.files) ??
+                        '/src/routes';
+                    if (routesPath.startsWith('./')) {
+                        routesPath = routesPath.slice(1);
+                    }
+                    if (!routesPath.includes('*')) {
+                        if (!routesPath.endsWith('/')) {
+                            routesPath += '/';
+                        }
+                        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};`;
+                    if (config.command === 'serve') {
+                        // Add dependency on Hydrogen config for HMR
+                        code += `\nimport '${VIRTUAL_HYDROGEN_CONFIG_ID}';`;
+                    }
+                    return { code };
+                });
+            }
+        },
+    };
+    async function importHydrogenConfig() {
+        if (server) {
+            const loaded = await server.ssrLoadModule(exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
+            return loaded.default;
+        }
+        const { loaded } = await (0, viteception_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
+        return loaded[0].default;
+    }
+};
+async function findHydrogenConfigPath(root, userProvidedPath) {
+    let configPath = userProvidedPath;
+    if (!configPath) {
+        // Find the config file in the project root
+        const files = await fs_1.promises.readdir(root);
+        configPath = files.find((file) => /^hydrogen\.config\.[jt]s$/.test(file));
+    }
+    if (configPath) {
+        configPath = (0, vite_1.normalizePath)(configPath);
+        if (!configPath.startsWith('/'))
+            configPath = path_1.default.resolve(root, configPath);
+    }
+    return (configPath ||
+        require.resolve(
+        // eslint-disable-next-line node/no-missing-require
+        '@shopify/hydrogen/utilities/empty-hydrogen-config'));
+}

package/dist/node/framework/plugins/vite-plugin-platform-entry.d.ts

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

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
+const magic_string_1 = __importDefault(require("magic-string"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const SSR_BUNDLE_NAME = 'index.js';
+exports.default = () => {
+    let config;
+    let isESM;
+    return {
+        name: 'vite-plugin-platform-entry',
+        enforce: 'pre',
+        configResolved(_config) {
+            config = _config;
+            if (config.build.ssr) {
+                const { output = {} } = config.build.rollupOptions || {};
+                const { format = '' } = (Array.isArray(output) ? output[0] : output) || {};
+                isESM = Boolean(process.env.WORKER) || ['es', 'esm'].includes(format);
+            }
+        },
+        resolveId(source, importer) {
+            if ((0, vite_1.normalizePath)(source).includes('/hydrogen/platforms/')) {
+                const hydrogenPath = path_1.default.dirname(require.resolve('@shopify/hydrogen/package.json'));
+                const platformEntryName = source.split(path_1.default.sep).pop() || '';
+                const platformEntryPath = path_1.default.resolve(hydrogenPath, 'dist', 'esnext', 'platforms', platformEntryName);
+                return this.resolve(platformEntryPath, importer, {
+                    skipSelf: true,
+                });
+            }
+            return null;
+        },
+        transform(code, id) {
+            if ((0, vite_1.normalizePath)(id).includes('/hydrogen/dist/esnext/platforms/')) {
+                const ms = new magic_string_1.default(code);
+                ms.replace('__SERVER_ENTRY__', vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
+                const indexTemplatePath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client', 'index.html'));
+                ms.replace('__INDEX_TEMPLATE__', indexTemplatePath);
+                return {
+                    code: ms.toString(),
+                    map: ms.generateMap({ file: id, source: id }),
+                };
+            }
+        },
+        generateBundle(options, bundle) {
+            if (config.build.ssr) {
+                const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);
+                delete bundle[key];
+                value.fileName = SSR_BUNDLE_NAME;
+                bundle[SSR_BUNDLE_NAME] = value;
+                // This ensures the file has a proper
+                // default export instead of exporting an
+                // object containing a 'default' property.
+                if (value.type === 'chunk' && !isESM) {
+                    value.code += `\nmodule.exports = exports.default || exports;`;
+                }
+            }
+        },
+        writeBundle(options) {
+            if (config.build.ssr && options.dir) {
+                const mainFile = `./${SSR_BUNDLE_NAME}`;
+                const packageJson = {
+                    type: isESM ? 'module' : 'commonjs',
+                    main: mainFile,
+                    exports: { '.': mainFile, [mainFile]: mainFile },
+                };
+                fs_1.default.writeFileSync(path_1.default.join(options.dir, 'package.json'), JSON.stringify(packageJson, null, 2), 'utf-8');
+            }
+        },
+    };
+};

package/dist/node/framework/plugins/vite-plugin-purge-query-cache.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-purge-query-cache.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const crypto_1 = __importDefault(require("crypto"));
+exports.default = () => {
+    const buildCacheId = crypto_1.default.randomBytes(8).toString('hex').slice(0, 8);
+    return {
+        name: 'vite-plugin-purge-query-cache',
+        enforce: 'pre',
+        transform(code) {
+            return code.replace('__QUERY_CACHE_ID__', buildCacheId);
+        },
+    };
+};

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = () => {
+    return {
+        name: 'vite-plugin-ssr-interop',
+        enforce: 'pre',
+        transform(code, id, options = {}) {
+            if (options.ssr && id.includes('foundation/ssr-interop')) {
+                return {
+                    code: code
+                        .replace(/(\s*META_ENV_SSR\s*=\s*)false/, '$1import.meta.env.SSR')
+                        .replace(/\/\/@SSR\s*/g, ''),
+                    map: { mappings: '' },
+                };
+            }
+        },
+    };
+};

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

@@ -0,0 +1,6 @@
+export interface HydrogenVitePluginOptions {
+    devCache?: boolean;
+    purgeQueryCacheOnBuild?: boolean;
+    configPath?: string;
+    optimizeBoundaries?: boolean | 'build';
+}

package/dist/node/framework/viteception.d.ts

@@ -0,0 +1,5 @@
+import { InlineConfig } from 'vite';
+export declare function viteception(paths: string[], options?: InlineConfig): Promise<{
+    server: import("vite").ViteDevServer;
+    loaded: Record<string, any>[];
+}>;

package/dist/node/framework/viteception.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viteception = void 0;
+const vite_1 = require("vite");
+async function viteception(paths, options) {
+    const isWorker = process.env.WORKER;
+    delete process.env.WORKER;
+    const server = await (0, vite_1.createServer)({
+        clearScreen: false,
+        server: { middlewareMode: 'ssr' },
+        ...options,
+    });
+    if (isWorker) {
+        process.env.WORKER = isWorker;
+    }
+    const loaded = await Promise.all(paths.map((path) => server.ssrLoadModule(path)));
+    await server.close();
+    return { server, loaded };
+}
+exports.viteception = viteception;

package/dist/node/shared-types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from 'http';
+export interface RuntimeContext {
+    waitUntil: (fn: Promise<any>) => void;
+}
+export interface RequestHandlerOptions {
+    indexTemplate: string | ((url: string) => Promise<string | {
+        default: string;
+    }>);
+    cache?: Cache;
+    streamableResponse?: ServerResponse;
+    dev?: boolean;
+    context?: RuntimeContext;
+    nonce?: string;
+    buyerIpHeader?: string;
+}
+export interface RequestHandler {
+    (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
+}
+export declare type ShopifyConfig = {
+    defaultLanguageCode?: string;
+    defaultCountryCode?: string;
+    storeDomain: string;
+    storefrontToken: string;
+    storefrontApiVersion: string;
+    multipassSecret?: string;
+};

package/dist/node/shared-types.js

@@ -0,0 +1,5 @@
+"use strict";
+// These types are shared in ESM and CJS builds.
+// Do not import anything from subfolders here to avoid
+// affecting the files generated in the CJS build.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/node/utilities/web-api-polyfill.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_fetch_1 = __importStar(require("node-fetch"));
+const abort_controller_1 = __importDefault(require("abort-controller"));
+const ponyfill_1 = require("web-streams-polyfill/ponyfill");
+const undici_1 = require("undici");
+if (!globalThis.fetch) {
+    Object.assign(globalThis, {
+        fetch: node_fetch_1.default,
+        Request: node_fetch_1.Request,
+        Response: node_fetch_1.Response,
+        Headers: node_fetch_1.Headers,
+        AbortController: abort_controller_1.default,
+    });
+}
+if (!globalThis.FormData) {
+    Object.assign(globalThis, {
+        FormData: undici_1.FormData,
+    });
+}
+if (!globalThis.ReadableStream) {
+    Object.assign(globalThis, {
+        ReadableStream: ponyfill_1.ReadableStream,
+        WritableStream: ponyfill_1.WritableStream,
+        TransformStream: ponyfill_1.TransformStream,
+    });
+}