@shopify/hydrogen 0.7.0 → 0.8.2

package/dist/esnext/utilities/log/log.js

@@ -0,0 +1,70 @@
+import { yellow, red, green, italic, lightBlue } from 'kolorist';
+import { getTime } from '../timing';
+const defaultLogger = {
+    trace(context, ...args) {
+        console.log(...args);
+    },
+    debug(context, ...args) {
+        console.log(...args);
+    },
+    warn(context, ...args) {
+        console.warn(yellow('WARN: '), ...args);
+    },
+    error(context, ...args) {
+        console.error(red('ERROR: '), ...args);
+    },
+    fatal(context, ...args) {
+        console.error(red('FATAL: '), ...args);
+    },
+};
+let logger = defaultLogger;
+export function getLoggerFromContext(context) {
+    return {
+        trace: (...args) => logger.trace(context, ...args),
+        debug: (...args) => logger.debug(context, ...args),
+        warn: (...args) => logger.warn(context, ...args),
+        error: (...args) => logger.error(context, ...args),
+        fatal: (...args) => logger.fatal(context, ...args),
+    };
+}
+export function setLogger(newLogger) {
+    logger = newLogger;
+}
+export function resetLogger() {
+    logger = defaultLogger;
+}
+export const log = {
+    trace(...args) {
+        return logger.trace({}, ...args);
+    },
+    debug(...args) {
+        return logger.debug({}, ...args);
+    },
+    warn(...args) {
+        return logger.warn({}, ...args);
+    },
+    error(...args) {
+        return logger.error({}, ...args);
+    },
+    fatal(...args) {
+        return logger.fatal({}, ...args);
+    },
+};
+export function logServerResponse(type, log, request, responseStatus) {
+    const coloredResponseStatus = responseStatus >= 500
+        ? red(responseStatus)
+        : responseStatus >= 400
+            ? yellow(responseStatus)
+            : responseStatus >= 300
+                ? lightBlue(responseStatus)
+                : green(responseStatus);
+    const styledType = italic(type);
+    const paddedTiming = pad((getTime() - request.time).toFixed(2) + ' ms', '          ');
+    const url = type === 'rsc'
+        ? decodeURIComponent(request.url.substring(request.url.indexOf('=') + 1))
+        : request.url;
+    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${paddedTiming} ${url}`);
+}
+function pad(str, _pad) {
+    return (str + _pad).substring(0, _pad.length);
+}

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

@@ -2,6 +2,6 @@
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.
  */
-export declare function wrapPromise(promise: Promise<any>): {
-    read: () => any;
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
 };

package/dist/esnext/utilities/suspense.js

@@ -11,14 +11,8 @@ export function wrapPromise(promise) {
     }, (err) => {
         status = 'error';
         response = err;
-        throw err;
     });
     const read = () => {
-        /**
-         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
-         * We instead throw the exception above in the suspender. We should revisit
-         * this and add a better server fetch implementation.
-         */
         switch (status) {
             case 'pending':
                 throw suspender;

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

@@ -0,0 +1,7 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export declare function getTime(): number;

package/dist/esnext/utilities/timing.js

@@ -0,0 +1,14 @@
+/**
+ * Not all environments have access to Performance.now(). This is to prevent
+ * timing side channel attacks.
+ *
+ * See: https://community.cloudflare.com/t/cloudflare-workers-how-do-i-measure-execution-time-of-my-method/69672
+ */
+export function getTime() {
+    if (typeof performance !== 'undefined' && performance.now) {
+        return performance.now();
+    }
+    else {
+        return Date.now();
+    }
+}

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.7.0";
+export declare const LIB_VERSION = "0.8.2";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.7.0';
+export const LIB_VERSION = '0.8.2';

package/dist/node/framework/ClientMarker/ClientMarker.js

@@ -34,7 +34,6 @@ function wrapInClientMarker(meta) {
     // 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_1.default.createElement(ClientMarker, { ...{ props, meta } }),
     }[name];
     // Relay component properties such as `Image.Fragment`
@@ -48,7 +47,7 @@ function wrapInClientMarker(meta) {
 }
 exports.wrapInClientMarker = wrapInClientMarker;
 function ClientMarker({ props: allProps, meta: { name, id, component: Component, named }, }) {
-    const isHydrating = react_1.useContext(HydrationContext_server_1.HydrationContext);
+    const isHydrating = (0, react_1.useContext)(HydrationContext_server_1.HydrationContext);
     if (!isHydrating)
         return react_1.default.createElement(Component, { ...allProps });
     let { children, ...props } = allProps;
@@ -58,7 +57,7 @@ function ClientMarker({ props: allProps, meta: { name, id, component: Component,
      * serialize props to JSON below, and React element Functions
      * cannot be serialized.
      */
-    props = react_utils_1.renderReactProps(props);
+    props = (0, react_utils_1.renderReactProps)(props);
     /**
      * Components ending in *Provider are special components to
      * Hydrogen's RSC implementation. They are rendered during

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

@@ -31,7 +31,7 @@ exports.useServerResponse = useServerResponse;
  * promise events to the Suspense boundary until the content has loaded.
  */
 function createFromFetch(fetchPromise) {
-    return utilities_1.wrapPromise(fetchPromise
+    return (0, utilities_1.wrapPromise)(fetchPromise
         .then((response) => {
         if (!response.ok) {
             throw new Error(`Hydration request failed: ${response.statusText}`);
@@ -68,7 +68,7 @@ async function convertHydrationResponseToReactComponents(response) {
             return null;
         // Assume it's an array of tuples, defined in the component as a fragment.
         if (!isReactTuple(item)) {
-            return react_1.createElement(react_1.Fragment, {
+            return (0, react_1.createElement)(react_1.Fragment, {
                 children: item.map(wireSyntaxToReactElement),
             });
         }
@@ -105,7 +105,7 @@ async function convertHydrationResponseToReactComponents(response) {
             const mod = modules[type.replace('@', 'M')];
             type = module.named ? mod[module.name] : mod.default;
         }
-        return react_1.createElement(type, { ...allProps, key });
+        return (0, react_1.createElement)(type, { ...allProps, key });
     }
     /**
      * The manifest is listed as `J0` for some reason. This is how React does it.
@@ -133,7 +133,7 @@ async function eagerLoadModules(manifest) {
         if (moduleCache.has(module.id)) {
             return moduleCache.get(module.id);
         }
-        const mod = await client_imports_1.default(module.id);
+        const mod = await (0, client_imports_1.default)(module.id);
         moduleCache.set(module.id, mod);
         return mod;
     })

package/dist/node/framework/Hydration/HydrationContext.server.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HydrationContext = void 0;
 const react_1 = require("react");
-exports.HydrationContext = react_1.createContext(false);
+exports.HydrationContext = (0, react_1.createContext)(false);

package/dist/node/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -7,6 +7,7 @@
  */
 export declare class ServerComponentRequest extends Request {
     cookies: Map<string, string>;
+    time: number;
     constructor(input: any);
     constructor(input: RequestInfo, init?: RequestInit);
     private parseCookies;

package/dist/node/framework/Hydration/ServerComponentRequest.server.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerComponentRequest = void 0;
+const timing_1 = require("../../utilities/timing");
 /**
  * This augments the `Request` object from the Fetch API:
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
@@ -19,6 +20,7 @@ class ServerComponentRequest extends Request {
                 method: input.method,
             });
         }
+        this.time = (0, timing_1.getTime)();
         this.cookies = this.parseCookies();
     }
     parseCookies() {

package/dist/node/framework/Hydration/ServerComponentResponse.server.js

@@ -31,7 +31,7 @@ class ServerComponentResponse extends Response {
             ...DEFAULT_CACHE_OPTIONS,
             ...((_a = this.cacheOptions) !== null && _a !== void 0 ? _a : {}),
         };
-        return cache_1.generateCacheControlHeader(options);
+        return (0, cache_1.generateCacheControlHeader)(options);
     }
     writeHead({ status, statusText, headers, } = {}) {
         if (status || statusText) {
@@ -53,7 +53,7 @@ class ServerComponentResponse extends Response {
     send(body) {
         if (typeof body === 'object' &&
             body.$$typeof === Symbol.for('react.element')) {
-            this.customBody = server_1.renderToString(body);
+            this.customBody = (0, server_1.renderToString)(body);
         }
         else {
             this.customBody = body;

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

@@ -45,7 +45,7 @@ function renderReactProp(prop) {
              * set expectations as thus when passing components as
              * props within Server Components.
              */
-            return parseReactFromString(server_1.renderToString(prop));
+            return parseReactFromString((0, server_1.renderToString)(prop));
         }
         else {
             return {
@@ -57,8 +57,8 @@ function renderReactProp(prop) {
     return prop;
 }
 function parseReactFromString(input, options = {}) {
-    return dom_to_react_1.default(
+    return (0, dom_to_react_1.default)(
     // @ts-ignore
-    html_dom_parser_1.default(input, { lowerCaseTags: false, lowerCaseAttributeNames: false }), options);
+    (0, html_dom_parser_1.default)(input, { lowerCaseTags: false, lowerCaseAttributeNames: false }), options);
 }
 exports.parseReactFromString = parseReactFromString;

package/dist/node/framework/Hydration/wire.server.js

@@ -8,7 +8,7 @@ const react_utils_1 = require("./react-utils");
  */
 function generateWireSyntaxFromRenderedHtml(html) {
     const clientComponents = new ClientComponents_server_1.ClientComponents();
-    const wireModel = react_utils_1.parseReactFromString(html, {
+    const wireModel = (0, react_utils_1.parseReactFromString)(html, {
         library: {
             // @ts-ignore
             createElement: convertToWireSyntax,

package/dist/node/framework/Hydration/writer.server.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HydrationWriter = void 0;
+/* eslint-disable @typescript-eslint/no-empty-function */
 /**
  * HydrationWriter is an implementation of `WritableStream` which
  * keeps track of chunks emitted from React's `pipeToNodeWritable`.

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

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/node/framework/cache.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.getCacheControlHeader = exports.generateCacheControlHeader = void 0;
+exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.hashKey = exports.getCacheControlHeader = exports.generateCacheControlHeader = void 0;
 const runtime_1 = require("./runtime");
 const DEFAULT_SUBREQUEST_CACHE_OPTIONS = {
     maxAge: 1,
@@ -33,6 +33,7 @@ function hashKey(key) {
      */
     return rawKey.map((k) => JSON.stringify(k)).join('');
 }
+exports.hashKey = hashKey;
 /**
  * Cache API is weird. We just need a full URL, so we make one up.
  */
@@ -45,7 +46,7 @@ function getKeyUrl(key) {
  * as the response itself so it can be checked for staleness.
  */
 async function getItemFromCache(key) {
-    const cache = runtime_1.getCache();
+    const cache = (0, runtime_1.getCache)();
     if (!cache) {
         return;
     }
@@ -61,7 +62,7 @@ exports.getItemFromCache = getItemFromCache;
  * Put an item into the cache.
  */
 async function setItemInCache(key, value, userCacheOptions) {
-    const cache = runtime_1.getCache();
+    const cache = (0, runtime_1.getCache)();
     if (!cache) {
         return;
     }
@@ -83,7 +84,7 @@ async function setItemInCache(key, value, userCacheOptions) {
 }
 exports.setItemInCache = setItemInCache;
 async function deleteItemFromCache(key) {
-    const cache = runtime_1.getCache();
+    const cache = (0, runtime_1.getCache)();
     if (!cache)
         return;
     const url = getKeyUrl(hashKey(key));

package/dist/node/framework/middleware.js

@@ -74,7 +74,7 @@ function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, de
              * polyfill has loaded above.
              */
             const { ServerComponentRequest } = await Promise.resolve().then(() => __importStar(require('./Hydration/ServerComponentRequest.server')));
-            const eventResponse = await handle_event_1.default(
+            const eventResponse = await (0, handle_event_1.default)(
             /**
              * Mimic a `FetchEvent`
              */
@@ -143,5 +143,5 @@ async function respondWithGraphiql(response, shopifyConfig) {
     }
     const { storeDomain, storefrontToken, graphqlApiVersion } = shopifyConfig;
     response.setHeader('Content-Type', 'text/html');
-    response.end(graphiql_1.graphiqlHtml(storeDomain === null || storeDomain === void 0 ? void 0 : storeDomain.replace(/^https?:\/\//, ''), storefrontToken, graphqlApiVersion));
+    response.end((0, graphiql_1.graphiqlHtml)(storeDomain === null || storeDomain === void 0 ? void 0 : storeDomain.replace(/^https?:\/\//, ''), storefrontToken, graphqlApiVersion));
 }

package/dist/node/framework/plugin.js

@@ -10,10 +10,10 @@ const vite_plugin_inspect_1 = __importDefault(require("vite-plugin-inspect"));
 const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
 exports.default = (shopifyConfig, pluginOptions) => {
     return [
-        process.env.VITE_INSPECT && vite_plugin_inspect_1.default(),
-        vite_plugin_hydrogen_config_1.default(),
-        vite_plugin_hydrogen_middleware_1.default(shopifyConfig, pluginOptions),
-        vite_plugin_react_server_components_shim_1.default(),
-        plugin_react_1.default(),
+        process.env.VITE_INSPECT && (0, vite_plugin_inspect_1.default)(),
+        (0, vite_plugin_hydrogen_config_1.default)(),
+        (0, vite_plugin_hydrogen_middleware_1.default)(shopifyConfig, pluginOptions),
+        (0, vite_plugin_react_server_components_shim_1.default)(),
+        (0, plugin_react_1.default)(),
     ];
 };

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

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

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: (_, env) => ({
+        config: async (config, env) => ({
             resolve: {
                 alias: {
                     /**
@@ -18,6 +18,17 @@ exports.default = () => {
             },
             build: {
                 sourcemap: true,
+                /**
+                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                 * We don't want this in our workers runtime, because `require` is not supported.
+                 */
+                rollupOptions: process.env.WORKER
+                    ? {
+                        output: {
+                            format: 'es',
+                        },
+                    }
+                    : {},
             },
             ssr: {
                 external: ['isomorphic-dompurify'],
@@ -57,6 +68,7 @@ exports.default = () => {
             define: {
                 __DEV__: env.mode !== 'production',
             },
+            envPrefix: ['VITE_', 'PUBLIC_'],
         }),
     };
 };

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

@@ -1,4 +1,10 @@
-import type { Plugin } from 'vite';
+import { Plugin } from 'vite';
 import type { HydrogenVitePluginOptions, ShopifyConfig } from '../../types';
 declare const _default: (shopifyConfig: ShopifyConfig, pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;
+declare global {
+    var Oxygen: {
+        env: Record<string, string | undefined>;
+        [key: string]: any;
+    };
+}

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

@@ -3,6 +3,7 @@ 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 path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
 const middleware_1 = require("../middleware");
@@ -16,19 +17,20 @@ exports.default = (shopifyConfig, pluginOptions) => {
          * 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);
             }
+            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(middleware_1.graphiqlMiddleware({
+            server.middlewares.use((0, middleware_1.graphiqlMiddleware)({
                 shopifyConfig,
                 dev: true,
             }));
-            return () => server.middlewares.use(middleware_1.hydrogenMiddleware({
+            return () => server.middlewares.use((0, middleware_1.hydrogenMiddleware)({
                 dev: true,
                 shopifyConfig,
                 indexTemplate: getIndexTemplate,
@@ -41,3 +43,15 @@ exports.default = (shopifyConfig, pluginOptions) => {
         },
     };
 };
+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-react-server-components-shim.js

@@ -7,7 +7,6 @@ const vite_1 = require("vite");
 const path_1 = __importDefault(require("path"));
 const server_components_1 = require("../server-components");
 const resolver_1 = require("./resolver");
-const fs_1 = require("fs");
 exports.default = () => {
     let config;
     return {
@@ -45,16 +44,7 @@ exports.default = () => {
                 return null;
             // Wrapped components won't match this becase they end in ?no-proxy
             if (/\.client\.[jt]sx?$/.test(id)) {
-                return server_components_1.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_1.promises.readFile(id.split('?')[0], 'utf-8'),
-                    map: { mappings: '' },
-                };
+                return (0, server_components_1.proxyClientComponent)({ id });
             }
             return null;
         },
@@ -71,35 +61,23 @@ exports.default = () => {
              */
             if (id.includes('/Hydration/client-imports')) {
                 // eslint-disable-next-line node/no-missing-require
-                const hydrogenPath = path_1.default.dirname(resolver_1.resolve('@shopify/hydrogen'));
+                const hydrogenPath = path_1.default.dirname((0, resolver_1.resolve)('@shopify/hydrogen'));
                 const importerPath = path_1.default.join(hydrogenPath, 'framework', 'Hydration');
-                const importerToRootPath = vite_1.normalizePath(path_1.default.relative(importerPath, config.root));
+                const importerToRootPath = (0, vite_1.normalizePath)(path_1.default.relative(importerPath, config.root));
                 const [importerToRootNested] = importerToRootPath.match(/(\.\.\/)+(\.\.)?/) || [];
                 const userPrefix = path_1.default.normalize(path_1.default.join(importerPath, importerToRootNested.replace(/\/?$/, path_1.default.sep)));
                 const userGlob = path_1.default.join(importerToRootPath, 'src', '**/*.client.[jt]sx');
                 const libPrefix = hydrogenPath + path_1.default.sep;
                 const libGlob = path_1.default.join(path_1.default.relative(importerPath, hydrogenPath), 'components', '**/*.client.js');
                 return code
-                    .replace('__USER_COMPONENTS_PREFIX__', vite_1.normalizePath(userPrefix))
-                    .replace('__USER_COMPONENTS_GLOB__', vite_1.normalizePath(userGlob))
-                    .replace('__LIB_COMPONENTS_PREFIX__', vite_1.normalizePath(libPrefix))
-                    .replace('__LIB_COMPONENTS_GLOB__', vite_1.normalizePath(libGlob));
+                    .replace('__USER_COMPONENTS_PREFIX__', (0, vite_1.normalizePath)(userPrefix))
+                    .replace('__USER_COMPONENTS_GLOB__', (0, vite_1.normalizePath)(userGlob))
+                    .replace('__LIB_COMPONENTS_PREFIX__', (0, vite_1.normalizePath)(libPrefix))
+                    .replace('__LIB_COMPONENTS_GLOB__', (0, vite_1.normalizePath)(libGlob));
             }
         },
     };
-    // Mitigation for upcoming minor Vite update
-    // https://github.com/vitejs/vite/pull/5253
-    // TO-DO: When the vite package is updated with the above Vite PR,
-    // clean up this function and treat `options` param as objects
-    // from this point forward
-    // Timeline: Targetting for Vite 2.7
     function isSSR(options) {
-        if (typeof options === 'boolean') {
-            return options;
-        }
-        if (typeof options === 'object') {
-            return !!options.ssr;
-        }
-        return false;
+        return !!(options === null || options === void 0 ? void 0 : options.ssr);
     }
 };

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

@@ -8,68 +8,46 @@ const es_module_lexer_1 = require("es-module-lexer");
 const fs_1 = require("fs");
 const vite_1 = require("vite");
 const magic_string_1 = __importDefault(require("magic-string"));
+const DEFAULT_EXPORT = 'default';
 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 es_module_lexer_1.init;
     if (!src) {
         src = await fs_1.promises.readFile(id, 'utf-8');
     }
-    const { code } = await vite_1.transformWithEsbuild(src, id);
-    const [, exportStatements] = es_module_lexer_1.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);
-            }
+    const { code } = await (0, vite_1.transformWithEsbuild)(src, id);
+    const [, exportStatements] = (0, es_module_lexer_1.parse)(code);
+    // Classify exports in components to wrap vs. everything else (e.g. GQL Fragments)
+    const otherExports = [];
+    const componentExports = [];
+    for (const key of exportStatements) {
+        if (key !== DEFAULT_EXPORT &&
+            /^use[A-Z]|Fragment$|Context$|^[A-Z_]+$/.test(key)) {
+            otherExports.push(key);
         }
-        return acc;
-    }, { components: [], other: [] });
-    if (!hasDefaultExport && namedImports.components.length === 0) {
-        return `export * from '${importFrom}';\n`;
-    }
-    const s = new magic_string_1.default(`import {wrapInClientMarker} from '@shopify/hydrogen/marker';`);
-    s.append('\nimport ');
-    if (hasDefaultExport) {
-        s.append(defaultComponentName);
-        if (namedImports.components.length > 0) {
-            s.append(', ');
+        else {
+            componentExports.push(key);
         }
     }
-    if (namedImports.components.length) {
-        s.append('* as namedImports');
+    if (componentExports.length === 0) {
+        return `export * from '${importFrom}';\n`;
     }
-    s.append(` from '${importFrom}';\n\n`);
+    const s = new magic_string_1.default(`import {wrapInClientMarker} from '@shopify/hydrogen/marker';\n` +
+        `import * as allImports 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 (otherExports.length > 0) {
+        s.append(`export {${otherExports.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,
-    })));
+    // Wrap components in Client Marker
+    componentExports.forEach((key) => {
+        var _a;
+        const isDefault = key === DEFAULT_EXPORT;
+        const componentName = isDefault
+            ? (_a = id.split('/').pop()) === null || _a === void 0 ? void 0 : _a.split('.').shift()
+            : key;
+        s.append(`export ${isDefault ? DEFAULT_EXPORT : `const ${componentName} =`} wrapInClientMarker({ name: '${componentName}', id: '${id}', component: allImports['${key}'], named: ${!isDefault} });\n`);
+    });
     return s.toString();
 }
 exports.proxyClientComponent = proxyClientComponent;
-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`;
-}