@shopify/hydrogen 0.21.0 → 0.22.0

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

@@ -10,16 +10,11 @@ const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
 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';
-const virtualModuleId = 'virtual:hydrogen-config';
-const virtualProxyModuleId = virtualModuleId + ':proxy';
 exports.default = (pluginOptions) => {
-    let config;
     return {
-        name: 'vite-plugin-hydrogen-middleware',
-        configResolved(_config) {
-            config = _config;
-        },
+        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,
@@ -39,7 +34,7 @@ exports.default = (pluginOptions) => {
                 dev: true,
                 getShopifyConfig: async (incomingMessage) => {
                     var _a;
-                    const { default: hydrogenConfig } = await server.ssrLoadModule('virtual:hydrogen-config:proxy');
+                    const { default: hydrogenConfig } = await server.ssrLoadModule(vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
                     // @ts-ignore
                     const { address = 'localhost', port = '3000' } = ((_a = server.httpServer) === null || _a === void 0 ? void 0 : _a.address()) || {};
                     const url = new URL(`http://${address}:${port}${incomingMessage.url}`);
@@ -49,9 +44,8 @@ exports.default = (pluginOptions) => {
                     // @ts-expect-error Manually set `normalizedUrl` which a developer expects to be available
                     // via `ServerComponentRequest` during production runtime.
                     request.normalizedUrl = request.url;
-                    return typeof hydrogenConfig.shopify === 'function'
-                        ? hydrogenConfig.shopify(request)
-                        : hydrogenConfig.shopify;
+                    const { shopify } = hydrogenConfig;
+                    return typeof shopify === 'function' ? shopify(request) : shopify;
                 },
             }));
             server.middlewares.use(body_parser_1.default.raw({ type: '*/*' }));
@@ -65,26 +59,6 @@ exports.default = (pluginOptions) => {
                     : undefined,
             }));
         },
-        async resolveId(source, importer) {
-            if (source === virtualModuleId) {
-                const configPath = await findHydrogenConfigPath(config.root, pluginOptions.configPath);
-                return this.resolve(configPath, importer, {
-                    skipSelf: true,
-                });
-            }
-            if (source === virtualProxyModuleId) {
-                // Virtual modules convention
-                // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
-                return '\0' + virtualProxyModuleId;
-            }
-        },
-        async load(id) {
-            if (id === '\0' + virtualProxyModuleId) {
-                // Likely due to a bug in Vite, but the config cannot be loaded
-                // directly using ssrLoadModule. It needs to be proxied as follows:
-                return `import hc from 'virtual:hydrogen-config'; export default hc;`;
-            }
-        },
     };
 };
 async function polyfillOxygenEnv(config) {
@@ -99,18 +73,3 @@ async function polyfillOxygenEnv(config) {
     }
     globalThis.Oxygen = { env };
 }
-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('@shopify/hydrogen/dist/esnext/utilities/empty-hydrogen-config.js'));
-}

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

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-ignore
 const plugin_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin"));
 const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
-const vite_1 = require("vite");
+const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+const viteception_1 = require("../viteception");
 function default_1() {
     return (0, plugin_1.default)({
         isServerComponentImporterAllowed(importer, source) {
@@ -20,19 +21,13 @@ function default_1() {
                 /\.test\.[tj]sx?$/.test(importer));
         },
         async findClientComponentsForClientBuild() {
-            // In client build, we create a local server to discover client compoents.
-            const server = await (0, vite_1.createServer)({
-                clearScreen: false,
-                server: { middlewareMode: 'ssr' },
-            });
-            await Promise.all([
+            const { server } = await (0, viteception_1.viteception)([
                 // Load server entry to discover client components early
-                server.ssrLoadModule(vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY),
-                // Route globs are placed in hydrogen.config.js and need to
+                vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
+                // Route globs are placed in a virtual module and need to
                 // be loaded to discover client components in routes
-                server.ssrLoadModule('virtual:hydrogen-config:proxy'),
+                vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
             ]);
-            await server.close();
             // At this point, the server has loaded all the components in the module graph
             return plugin_1.default.findClientComponentsFromServer(server);
         },

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,105 @@
+"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) => {
+                    var _a, _b, _c, _d;
+                    let routesPath = (_b = (typeof hc.routes === 'string' ? hc.routes : (_a = hc.routes) === null || _a === void 0 ? void 0 : _a.files)) !== null && _b !== void 0 ? _b : '/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: '${(_d = (_c = hc.routes) === null || _c === void 0 ? void 0 : _c.basePath) !== null && _d !== void 0 ? _d : ''}',\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('@shopify/hydrogen/dist/esnext/utilities/empty-hydrogen-config.js'));
+}

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

@@ -36,10 +36,10 @@ exports.default = () => {
         },
         transform(code, id) {
             if ((0, vite_1.normalizePath)(id).includes('/hydrogen/dist/esnext/platforms/')) {
-                code = code
-                    .replace('__SERVER_ENTRY__', vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY)
-                    .replace('__INDEX_TEMPLATE__', (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client', 'index.html')));
                 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 }),
@@ -56,7 +56,7 @@ exports.default = () => {
                 // default export instead of exporting an
                 // object containing a 'default' property.
                 if (value.type === 'chunk' && !isESM) {
-                    value.code = value.code.replace(/((^|;)[\s]*)exports\[['"]default['"]\]\s*=/m, '$1module.exports =');
+                    value.code += `\nmodule.exports = exports.default || exports;`;
                 }
             }
         },

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

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

package/dist/node/framework/viteception.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viteception = void 0;
+const vite_1 = require("vite");
+async function viteception(paths) {
+    const isWorker = process.env.WORKER;
+    delete process.env.WORKER;
+    const server = await (0, vite_1.createServer)({
+        clearScreen: false,
+        server: { middlewareMode: 'ssr' },
+    });
+    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/storefront-api-types.d.ts

@@ -699,7 +699,7 @@ export declare type CartLineEstimatedCost = {
     /** The amount of the merchandise line. */
     amount: MoneyV2;
     /** The compare at amount of the merchandise line. */
-    compareAtAmount: MoneyV2;
+    compareAtAmount?: Maybe<MoneyV2>;
     /** The estimated cost of the merchandise line before discounts. */
     subtotalAmount: MoneyV2;
     /** The estimated total cost of the merchandise line. */

package/dist/node/streaming.server.d.ts

@@ -1,5 +1,7 @@
 import type { Writable } from 'stream';
-export declare const rscRenderToReadableStream: (App: JSX.Element) => ReadableStream<Uint8Array>;
+export declare const rscRenderToReadableStream: (App: JSX.Element, options?: {
+    onError?: ((error: Error) => void) | undefined;
+} | undefined) => ReadableStream<Uint8Array>;
 export declare const createFromReadableStream: (rs: ReadableStream<Uint8Array>) => {
     readRoot: () => JSX.Element;
 };

package/dist/node/types.d.ts

@@ -36,23 +36,30 @@ export declare type Hook = (params: {
     url: URL;
 } & Record<string, any>) => any | Promise<any>;
 export declare type ImportGlobEagerOutput = Record<string, Record<'default' | 'api', any>>;
-export declare type HydrogenConfigRoutes = {
-    files?: ImportGlobEagerOutput;
+export declare type InlineHydrogenRoutes = string | {
+    files: string;
     basePath?: string;
-    dirPrefix?: string;
+};
+export declare type ResolvedHydrogenRoutes = {
+    files: ImportGlobEagerOutput;
+    dirPrefix: string;
+    basePath: string;
 };
 declare type ConfigFetcher<T> = (request: ServerComponentRequest) => T | Promise<T>;
 export declare type ShopifyConfigFetcher = ConfigFetcher<ShopifyConfig>;
 export declare type ServerAnalyticsConnector = {
     request: (request: Request, data?: any, contentType?: 'json' | 'text') => void;
 };
-export declare type HydrogenConfig = {
-    routes?: HydrogenConfigRoutes | ImportGlobEagerOutput;
+export declare type InlineHydrogenConfig = {
+    routes?: InlineHydrogenRoutes;
     shopify?: ShopifyConfig | ShopifyConfigFetcher;
     serverAnalyticsConnectors?: Array<ServerAnalyticsConnector>;
     session?: (log: Logger) => SessionStorageAdapter;
     enableStreaming?: (request: ServerComponentRequest) => boolean;
 };
+export declare type ResolvedHydrogenConfig = Omit<InlineHydrogenConfig, 'routes'> & {
+    routes: ResolvedHydrogenRoutes;
+};
 export declare type ClientHandlerConfig = {
     /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
     strictMode?: boolean;

package/dist/node/utilities/apiRoutes.d.ts

@@ -1,6 +1,5 @@
-import { HydrogenConfig, HydrogenConfigRoutes } from '../types';
+import { InlineHydrogenConfig, ResolvedHydrogenRoutes } from '../types';
 import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
-import type { ASTNode } from 'graphql';
 import { SessionApi, SessionStorageAdapter } from '../foundation/session/session';
 declare type RouteParams = Record<string, string>;
 declare type RequestOptions = {
@@ -20,7 +19,7 @@ export declare type ApiRouteMatch = {
     params: RouteParams;
 };
 export declare function extractPathFromRoutesKey(routesKey: string, dirPrefix: string | RegExp): string;
-export declare function getApiRoutes(rawRoutes: HydrogenConfigRoutes): Array<HydrogenApiRoute>;
+export declare function getApiRoutes({ files: routes, basePath: topLevelPath, dirPrefix, }: Partial<ResolvedHydrogenRoutes>): Array<HydrogenApiRoute>;
 export declare function getApiRouteFromURL(url: URL, routes: Array<HydrogenApiRoute>): ApiRouteMatch | null;
 /** The `queryShop` utility is a function that helps you query the Storefront API.
  * It's similar to the `useShopQuery` hook, which is available in server components.
@@ -30,9 +29,9 @@ interface QueryShopArgs {
     /** A string of the GraphQL query.
      * If no query is provided, then the `useShopQuery` makes no calls to the Storefront API.
      */
-    query: ASTNode | string;
+    query: string;
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
 }
-export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: HydrogenConfig['shopify'], session?: SessionStorageAdapter): Promise<Response | Request>;
+export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: InlineHydrogenConfig['shopify'], session?: SessionStorageAdapter): Promise<Response | Request>;
 export {};

package/dist/node/utilities/apiRoutes.js

@@ -4,7 +4,6 @@ exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutes = exp
 const matchPath_1 = require("./matchPath");
 const log_1 = require("../utilities/log/");
 const fetch_1 = require("./fetch");
-const findRoutePrefix_1 = require("./findRoutePrefix");
 const storefrontApi_1 = require("./storefrontApi");
 const session_1 = require("../foundation/session/session");
 let memoizedApiRoutes = [];
@@ -32,20 +31,15 @@ function extractPathFromRoutesKey(routesKey, dirPrefix) {
     return path;
 }
 exports.extractPathFromRoutesKey = extractPathFromRoutesKey;
-function getApiRoutes(rawRoutes) {
-    var _a, _b;
-    const routes = ((_a = rawRoutes.files) !== null && _a !== void 0 ? _a : rawRoutes);
-    const topLevelPath = ((_b = rawRoutes.basePath) !== null && _b !== void 0 ? _b : '*');
-    const dirPrefix = rawRoutes.dirPrefix;
+function getApiRoutes({ files: routes, basePath: topLevelPath = '', dirPrefix = '', }) {
     if (!routes || memoizedRawRoutes === routes)
         return memoizedApiRoutes;
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
     const keys = Object.keys(routes);
-    const commonRoutePrefix = dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (0, findRoutePrefix_1.findRoutePrefix)(keys);
     const apiRoutes = keys
         .filter((key) => routes[key].api)
         .map((key) => {
-        const path = extractPathFromRoutesKey(key, commonRoutePrefix);
+        const path = extractPathFromRoutesKey(key, dirPrefix);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool

package/dist/node/utilities/fetch.d.ts

@@ -1,10 +1,9 @@
-import { ASTNode } from 'graphql';
 declare type FetchInit = {
     body?: string;
     method?: string;
     headers?: Record<string, string>;
 };
 export declare function fetchBuilder<T>(url: string, options?: FetchInit): () => Promise<T>;
-export declare function graphqlRequestBody(query: ASTNode | string, variables?: Record<string, any>): string;
+export declare function graphqlRequestBody(query: string, variables?: Record<string, any>): string;
 export declare function decodeShopifyId(id: string): string;
 export {};

package/dist/node/utilities/fetch.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = void 0;
-const graphql_1 = require("graphql");
 const version_1 = require("../version");
 const defaultHeaders = {
     'content-type': 'application/json',
@@ -23,9 +22,8 @@ function fetchBuilder(url, options = {}) {
 }
 exports.fetchBuilder = fetchBuilder;
 function graphqlRequestBody(query, variables) {
-    const queryString = typeof query === 'string' ? query : (0, graphql_1.print)(query);
     return JSON.stringify({
-        query: queryString,
+        query,
         variables,
     });
 }

package/dist/node/utilities/html-encoding.d.ts

@@ -1,2 +1 @@
 export declare function htmlEncode(html: string): string;
-export declare function htmlDecode(text: string): string;

package/dist/node/utilities/html-encoding.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlDecode = exports.htmlEncode = void 0;
+exports.htmlEncode = void 0;
 function htmlEncode(html) {
     return html
         .replace(/&/g, '&')
@@ -10,12 +10,3 @@ function htmlEncode(html) {
         .replace(/'/g, ''');
 }
 exports.htmlEncode = htmlEncode;
-function htmlDecode(text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .replace(/&quot;/g, '"')
-        .replace(/&#39;/g, "'");
-}
-exports.htmlDecode = htmlDecode;

package/dist/node/utilities/index.d.ts

@@ -9,4 +9,4 @@ export { getMeasurementAsParts, getMeasurementAsString } from './measurement';
 export { parseMetafieldValue } from './parseMetafieldValue';
 export { fetchBuilder, graphqlRequestBody, decodeShopifyId } from './fetch';
 export { getTime } from './timing';
-export { htmlEncode, htmlDecode } from './html-encoding';
+export { htmlEncode } from './html-encoding';

package/dist/node/utilities/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlDecode = exports.htmlEncode = exports.getTime = exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isClient = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = exports.addImageSizeParametersToUrl = void 0;
+exports.htmlEncode = exports.getTime = exports.decodeShopifyId = exports.graphqlRequestBody = exports.fetchBuilder = exports.parseMetafieldValue = exports.getMeasurementAsString = exports.getMeasurementAsParts = exports.isServer = exports.isClient = exports.flattenConnection = exports.wrapPromise = exports.loadScript = exports.useEmbeddedVideoUrl = exports.addParametersToEmbeddedVideoUrl = exports.shopifyImageLoader = exports.getShopifyImageDimensions = exports.addImageSizeParametersToUrl = void 0;
 var image_size_1 = require("./image_size");
 Object.defineProperty(exports, "addImageSizeParametersToUrl", { enumerable: true, get: function () { return image_size_1.addImageSizeParametersToUrl; } });
 Object.defineProperty(exports, "getShopifyImageDimensions", { enumerable: true, get: function () { return image_size_1.getShopifyImageDimensions; } });
@@ -31,4 +31,3 @@ var timing_1 = require("./timing");
 Object.defineProperty(exports, "getTime", { enumerable: true, get: function () { return timing_1.getTime; } });
 var html_encoding_1 = require("./html-encoding");
 Object.defineProperty(exports, "htmlEncode", { enumerable: true, get: function () { return html_encoding_1.htmlEncode; } });
-Object.defineProperty(exports, "htmlDecode", { enumerable: true, get: function () { return html_encoding_1.htmlDecode; } });

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.21.0";
+export declare const LIB_VERSION = "0.22.0";

package/dist/node/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '0.21.0';
+exports.LIB_VERSION = '0.22.0';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -70,12 +70,13 @@
     "@types/graphql": "^14.5.0",
     "@types/node": "^16.11.7",
     "@types/node-fetch": "^2.5.9",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "@types/uuid": "^8.3.4",
     "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
     "cpy-cli": "3.1.1",
+    "graphql-tag": "^2.12.6",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8",

package/vendor/react-server-dom-vite/cjs/react-server-dom-vite-plugin.js

@@ -93,6 +93,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
 }
 
 var rscViteFileRE = /\/react-server-dom-vite.js/;
+var noProxyRE = /[&?]no-proxy($|&)/;
 function ReactFlightVitePlugin() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$isServerComponen = _ref.isServerComponentImporterAllowed,
@@ -161,7 +162,23 @@ function ReactFlightVitePlugin() {
     },
     load: function (id) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return options.ssr && shouldCheckClientComponent(id) ? wrapIfClientComponent(id) : null;
+      if (!options.ssr || !shouldCheckClientComponent(id)) return;
+
+      if (server) {
+        var mod = server.moduleGraph.idToModuleMap.get(id.replace('/@fs', ''));
+
+        if (mod && mod.importers) {
+          if (Array.from(mod.importers).every(function (impMod) {
+            return noProxyRE.test(impMod.id);
+          })) {
+            // This module is only imported from client components
+            // so we don't need to create a module reference
+            return;
+          }
+        }
+      }
+
+      return wrapIfClientComponent(id);
     },
     transform: function (code, id) {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -284,7 +301,7 @@ async function proxyClientComponent(filepath, src) {
 }
 
 function shouldCheckClientComponent(id) {
-  return /\.[jt]sx?($|\?)/.test(id) && !/[&?]no-proxy($|&)/.test(id);
+  return /\.[jt]sx?($|\?)/.test(id) && !noProxyRE.test(id);
 }
 
 function findClientComponentsForDev(server) {

package/vendor/react-server-dom-vite/esm/react-server-dom-vite-plugin.js

@@ -89,6 +89,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
 }
 
 var rscViteFileRE = /\/react-server-dom-vite.js/;
+var noProxyRE = /[&?]no-proxy($|&)/;
 function ReactFlightVitePlugin() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$isServerComponen = _ref.isServerComponentImporterAllowed,
@@ -157,7 +158,23 @@ function ReactFlightVitePlugin() {
     },
     load: function (id) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return options.ssr && shouldCheckClientComponent(id) ? wrapIfClientComponent(id) : null;
+      if (!options.ssr || !shouldCheckClientComponent(id)) return;
+
+      if (server) {
+        var mod = server.moduleGraph.idToModuleMap.get(id.replace('/@fs', ''));
+
+        if (mod && mod.importers) {
+          if (Array.from(mod.importers).every(function (impMod) {
+            return noProxyRE.test(impMod.id);
+          })) {
+            // This module is only imported from client components
+            // so we don't need to create a module reference
+            return;
+          }
+        }
+      }
+
+      return wrapIfClientComponent(id);
     },
     transform: function (code, id) {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -280,7 +297,7 @@ async function proxyClientComponent(filepath, src) {
 }
 
 function shouldCheckClientComponent(id) {
-  return /\.[jt]sx?($|\?)/.test(id) && !/[&?]no-proxy($|&)/.test(id);
+  return /\.[jt]sx?($|\?)/.test(id) && !noProxyRE.test(id);
 }
 
 function findClientComponentsForDev(server) {

package/dist/esnext/utilities/findRoutePrefix.d.ts

@@ -1 +0,0 @@
-export declare function findRoutePrefix([first, ...rest]: string[]): string | RegExp;

package/dist/esnext/utilities/findRoutePrefix.js

@@ -1,17 +0,0 @@
-const DEFAULT_ROUTE_PREFIX = /^\.(\/src)?\/routes/;
-export function findRoutePrefix([first, ...rest]) {
-    if (!(first === null || first === void 0 ? void 0 : first.startsWith('./')))
-        return '';
-    let commonPrefix = '.';
-    if (rest.length > 0) {
-        const parts = first.split('/');
-        parts.pop(); // Last part is always different and has extension
-        for (const string of rest) {
-            const tmp = string.split('/');
-            const diffIndex = parts.findIndex((part, index) => part !== tmp[index]);
-            diffIndex >= 0 && parts.splice(diffIndex);
-        }
-        commonPrefix = parts.join('/');
-    }
-    return commonPrefix === '.' ? DEFAULT_ROUTE_PREFIX : commonPrefix;
-}

package/dist/node/foundation/Analytics/index.d.ts

@@ -1,2 +0,0 @@
-export { useServerAnalytics } from './hook';
-export { ClientAnalytics } from './ClientAnalytics';

package/dist/node/foundation/Analytics/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientAnalytics = exports.useServerAnalytics = void 0;
-var hook_1 = require("./hook");
-Object.defineProperty(exports, "useServerAnalytics", { enumerable: true, get: function () { return hook_1.useServerAnalytics; } });
-var ClientAnalytics_1 = require("./ClientAnalytics");
-Object.defineProperty(exports, "ClientAnalytics", { enumerable: true, get: function () { return ClientAnalytics_1.ClientAnalytics; } });

package/dist/node/utilities/findRoutePrefix.d.ts

@@ -1 +0,0 @@
-export declare function findRoutePrefix([first, ...rest]: string[]): string | RegExp;