@shopify/hydrogen 1.0.2 → 1.1.0

package/dist/esnext/entry-server.js

@@ -10,7 +10,6 @@ import { ServerPropsProvider } from './foundation/ServerPropsProvider';
 import { isBotUA } from './utilities/bot-ua';
 import { getCache, setCache } from './foundation/runtime';
 import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, bufferReadableStream, } from './streaming.server';
-import { RSC_PATHNAME } from './constants';
 import { stripScriptsFromTemplate } from './utilities/template';
 import { setLogger } from './utilities/log/log';
 import { Analytics } from './foundation/Analytics/Analytics.server';
@@ -110,7 +109,7 @@ export const renderHydrogen = (App) => {
 async function processRequest(handleRequest, App, url, request, sessionApi, options, response, hydrogenConfig, revalidate = false) {
     const { dev, nonce, indexTemplate, streamableResponse: nodeResponse } = options;
     const log = getLoggerWithContext(request);
-    const isRSCRequest = url.pathname === RSC_PATHNAME;
+    const isRSCRequest = request.isRscRequest();
     const apiRoute = !isRSCRequest && getApiRoute(url, hydrogenConfig.routes);
     // The API Route might have a default export, making it also a server component
     // If it does, only render the API route if the request method is GET
@@ -123,8 +122,11 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
             : apiResponse;
     }
     const state = isRSCRequest
-        ? parseJSON(url.searchParams.get('state') || '{}')
-        : { pathname: url.pathname, search: url.search };
+        ? parseJSON(decodeURIComponent(url.searchParams.get('state') || '{}'))
+        : {
+            pathname: decodeURIComponent(url.pathname),
+            search: decodeURIComponent(url.search),
+        };
     const rsc = runRSC({ App, state, log, request, response });
     if (isRSCRequest) {
         const buffered = await bufferReadableStream(rsc.readable.getReader());
@@ -552,13 +554,13 @@ function tagOnWrite(response) {
 async function cacheResponse(response, request, chunks, revalidate) {
     const cache = getCache();
     /**
-     * Only cache on cachable responses where response
+     * Only full page cache on cachable responses where response
      *
      * - have content to cache
      * - have status 200
      * - does not have no-store on cache-control header
      * - does not have set-cookie header
-     * - is not a POST request
+     * - is a GET request
      * - does not have a session or does not have an active customer access token
      */
     if (cache &&
@@ -566,7 +568,7 @@ async function cacheResponse(response, request, chunks, revalidate) {
         response.status === 200 &&
         response.cache().mode !== NO_STORE &&
         !response.headers.has('Set-Cookie') &&
-        !/post/i.test(request.method) &&
+        /get/i.test(request.method) &&
         !sessionHasCustomerAccessToken(request)) {
         if (revalidate) {
             await saveCacheResponse(response, request, chunks);
@@ -593,10 +595,9 @@ async function saveCacheResponse(response, request, chunks) {
     const cache = getCache();
     if (cache && chunks.length > 0) {
         const { headers, status, statusText } = getResponseOptions(response);
-        const url = new URL(request.url);
         headers.set('cache-control', response.cacheControlHeader);
         const currentHeader = headers.get('Content-Type');
-        if (!currentHeader && url.pathname !== RSC_PATHNAME) {
+        if (!currentHeader && !request.isRscRequest()) {
             headers.set('Content-Type', HTML_CONTENT_TYPE);
         }
         await setItemInCache(request.cacheKey(), new Response(chunks.join(''), {

package/dist/esnext/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.client.js

@@ -18,7 +18,7 @@ export function PerformanceMetrics() {
                     const initTime = new Date().getTime();
                     ClientAnalytics.publish(ClientAnalytics.eventNames.PERFORMANCE, true, data);
                     const pageData = ClientAnalytics.getPageAnalyticsData();
-                    const shopId = pageData.shopify.shopId || '';
+                    const shopId = pageData.shopify?.shopId;
                     fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
                         method: 'post',
                         headers: {
@@ -28,7 +28,9 @@ export function PerformanceMetrics() {
                             schema_id: 'hydrogen_buyer_performance/2.0',
                             payload: {
                                 ...data,
-                                shop_id: shopId.substring(shopId.lastIndexOf('/') + 1) || '',
+                                shop_id: shopId
+                                    ? shopId.substring(shopId.lastIndexOf('/') + 1)
+                                    : '',
                             },
                             metadata: {
                                 event_created_at_ms: initTime,

package/dist/esnext/foundation/DevTools/components/Heading.js

@@ -1,6 +1,6 @@
 import React from 'react';
 export function Heading({ linkText, url, children, }) {
-    return (React.createElement("span", { style: { display: 'flex', alignItems: 'baseline', padding: '0 0 0.5em' } },
+    return (React.createElement("span", { style: { display: 'flex', alignItems: 'baseline', padding: '0 0 0em' } },
         React.createElement("span", { style: { paddingRight: '0em', flex: 1, fontWeight: 'bold' } },
             children,
             ' '),

package/dist/esnext/foundation/DevTools/components/Panels.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { ClientAnalytics } from '../../Analytics';
 import { Performance } from './Performance.client';
 import { Settings } from './Settings.client';
+const isComponentPanel = (panel) => panel.component !== undefined;
 export function Panels({ settings }) {
     const [selectedPanel, setSelectedPanel] = useState(0);
     const [navigations, setNavigations] = useState([]);
@@ -22,36 +23,41 @@ export function Panels({ settings }) {
         });
     }, [setNavigations, navigations]);
     const panels = getPanels({ settings, performance: { navigations } });
-    const panelComponents = panels.map((obj, index) => (React.createElement("div", { key: obj.content, style: { display: selectedPanel === index ? 'block' : 'none' } }, obj.panel)));
+    const panelComponents = panels.map((obj, index) => isComponentPanel(obj) ? (React.createElement("div", { key: obj.content, style: { display: selectedPanel === index ? 'block' : 'none' } }, obj.component)) : null);
     return (React.createElement("div", { style: { display: 'flex', height: '100%' } },
-        React.createElement("div", { style: { borderRight: '1px solid', padding: '1em 0em' } }, panels.map(({ content, icon, id }, index) => {
+        React.createElement("div", { style: { borderRight: '1px solid', padding: '1em 0em' } }, panels.map((panel, index) => {
             const active = selectedPanel === index;
-            return (React.createElement("button", { key: id, type: "button", style: {
-                    lineHeight: 2,
-                    padding: '0em 1.25em',
-                    fontWeight: active ? 'bold' : 'normal',
-                    display: 'flex',
-                    alignItems: 'center',
-                }, onClick: () => setSelectedPanel(index) },
-                React.createElement("span", { style: { paddingRight: '0.4em' } }, icon),
-                React.createElement("span", { style: { fontFamily: 'monospace' } }, content)));
+            const style = {
+                padding: '0em 1.25em',
+                fontWeight: 'bold',
+                textDecoration: active ? 'underline' : 'none',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            };
+            if (isComponentPanel(panel)) {
+                return (React.createElement("button", { key: panel.id, type: "button", style: style, onClick: () => setSelectedPanel(index) },
+                    React.createElement("span", null, panel.content)));
+            }
+            return (React.createElement("a", { style: style, target: "_blank", rel: "noreferrer", href: panel.url, key: panel.url },
+                panel.content,
+                React.createElement("span", null, "\u2197")));
         })),
-        React.createElement("div", { style: { padding: '1.25em', width: '100%' } }, panelComponents[selectedPanel ? selectedPanel : 0])));
-}
-function Panel({ children }) {
-    return React.createElement("div", null, children);
+        React.createElement("div", { style: { padding: '1em', width: '100%' } }, panelComponents[selectedPanel ? selectedPanel : 0])));
 }
 function getPanels({ settings, performance }) {
     const panels = {
         settings: {
             content: 'Settings',
-            panel: React.createElement(Settings, { ...settings }),
-            icon: '🎛',
+            component: React.createElement(Settings, { ...settings }),
         },
         performance: {
             content: 'Performance',
-            panel: React.createElement(Performance, { ...performance }),
-            icon: '⏱',
+            component: React.createElement(Performance, { ...performance }),
+        },
+        graphiql: {
+            content: 'GraphiQL',
+            url: '/___graphql',
         },
     };
     return Object.keys(panels).map((key) => {

package/dist/esnext/foundation/DevTools/components/Performance.client.js

@@ -19,7 +19,6 @@ const Item = ({ label, value, unit }) => {
     return (React.createElement("span", { style: {
             fontFamily: 'monospace',
             padding: '0 2em 0 0',
-            fontSize: '0.75em',
         } },
         label && label.padEnd(10),
         val));

package/dist/esnext/foundation/DevTools/components/Settings.client.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Heading } from './Heading';
 import { Table } from './Table';
 const KEY_MAP = {
     locale: 'Locale',
@@ -14,7 +13,5 @@ export function Settings(props) {
             type: typeof value,
         };
     });
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Heading, null, "Config"),
-        React.createElement(Table, { items: items })));
+    return React.createElement(Table, { items: items });
 }

package/dist/esnext/foundation/DevTools/components/Table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export function Table({ items }) {
-    const itemsMarkup = items.map(({ key, value }) => (React.createElement("div", { key: key, style: { display: 'flex' } },
-        React.createElement("span", { style: { width: '30%', fontFamily: 'monospace', paddingRight: '1em' } }, key),
-        React.createElement("span", { style: { width: '70%', fontFamily: 'monospace', fontWeight: 'bold' } }, value))));
+    const itemsMarkup = items.map(({ key, value }) => (React.createElement("div", { key: key, style: { display: 'flex', paddingBottom: '1em', flexDirection: 'column' } },
+        React.createElement("span", { style: { fontWeight: 'bold' } }, key),
+        React.createElement("span", { style: { width: '70%', fontFamily: 'monospace' } }, value))));
     return React.createElement("ul", null, itemsMarkup);
 }

package/dist/esnext/foundation/HydrogenRequest/HydrogenRequest.server.js

@@ -43,9 +43,7 @@ export class HydrogenRequest extends Request {
         }
         this.time = getTime();
         this.id = generateId();
-        this.normalizedUrl = this.isRscRequest()
-            ? normalizeUrl(this.url)
-            : this.url;
+        this.normalizedUrl = decodeURIComponent(this.isRscRequest() ? normalizeUrl(this.url) : this.url);
         this.ctx = {
             cache: new Map(),
             head: new HeadData({}),

package/dist/esnext/foundation/ServerPropsProvider/ServerPropsProvider.js

@@ -13,12 +13,12 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
             setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
         });
     }, [setServerProps, setServerPropsForRsc]);
-    const setLocationServerPropsCallback = useCallback((input, propValue) => {
+    const setLocationServerPropsCallback = useCallback((input) => {
         // Flush the existing user server state when location changes, leaving only the persisted state
         startTransition(() => {
-            setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
+            setServerPropsForRsc(input);
             setServerProps({});
-            setLocationServerProps((prev) => getNewValue(prev, input, propValue));
+            setLocationServerProps(input);
         });
     }, [setServerProps, setServerPropsForRsc, setLocationServerProps]);
     const getProposedLocationServerPropsCallback = useCallback((input, propValue) => {

package/dist/esnext/foundation/fetchSync/ResponseSync.d.ts

@@ -0,0 +1,14 @@
+declare type ResponseSyncInit = [string, ResponseInit];
+export declare class ResponseSync extends Response {
+    #private;
+    bodyUsed: boolean;
+    constructor(init: ResponseSyncInit);
+    text(): string;
+    json(): any;
+    /**
+     * @deprecated Access response properties at the top level instead.
+     */
+    get response(): this;
+    static toSerializable(response: Response): Promise<ResponseSyncInit>;
+}
+export {};

package/dist/esnext/foundation/fetchSync/ResponseSync.js

@@ -0,0 +1,38 @@
+import { parseJSON } from '../../utilities/parse';
+import { log } from '../../utilities/log';
+export class ResponseSync extends Response {
+    bodyUsed = true;
+    #text;
+    #json;
+    constructor(init) {
+        super(...init);
+        this.#text = init[0];
+    }
+    // @ts-expect-error Changing inherited types
+    text() {
+        return this.#text;
+    }
+    json() {
+        return (this.#json ??= parseJSON(this.#text));
+    }
+    /**
+     * @deprecated Access response properties at the top level instead.
+     */
+    get response() {
+        if (__HYDROGEN_DEV__) {
+            log.warn(`Property 'response' is deprecated from the result of 'fetchSync'.` +
+                ` Access response properties at the top level instead.`);
+        }
+        return this;
+    }
+    static async toSerializable(response) {
+        return [
+            await response.text(),
+            {
+                status: response.status,
+                statusText: response.statusText,
+                headers: Array.from(response.headers.entries()),
+            },
+        ];
+    }
+}

package/dist/esnext/foundation/fetchSync/client/fetchSync.d.ts

@@ -1,8 +1,8 @@
-import type { FetchResponse } from '../types';
+import { ResponseSync } from '../ResponseSync';
 /**
  * Fetch a URL for use in a client component Suspense boundary.
  */
-export declare function fetchSync(url: string, options?: RequestInit): FetchResponse;
+export declare function fetchSync(url: string, options?: RequestInit): ResponseSync;
 /**
  * Preload a URL for use in  a client component Suspense boundary.
  * Useful for placing higher in the tree to avoid waterfalls.

package/dist/esnext/foundation/fetchSync/client/fetchSync.js

@@ -1,19 +1,14 @@
-import { parseJSON } from '../../../utilities/parse';
 import { suspendFunction, preloadFunction } from '../../../utilities/suspense';
+import { ResponseSync } from '../ResponseSync';
 /**
  * Fetch a URL for use in a client component Suspense boundary.
  */
 export function fetchSync(url, options) {
-    const [text, response] = suspendFunction([url, options], async () => {
+    const responseSyncInit = suspendFunction([url, options], async () => {
         const response = await globalThis.fetch(new URL(url, window.location.origin), options);
-        const text = await response.text();
-        return [text, response];
+        return ResponseSync.toSerializable(response);
     });
-    return {
-        response,
-        json: () => parseJSON(text),
-        text: () => text,
-    };
+    return new ResponseSync(responseSyncInit);
 }
 /**
  * Preload a URL for use in  a client component Suspense boundary.

package/dist/esnext/foundation/fetchSync/server/fetchSync.d.ts

@@ -1,8 +1,8 @@
 import { type HydrogenUseQueryOptions } from '../../useQuery/hooks';
-import type { FetchResponse } from '../types';
+import { ResponseSync } from '../ResponseSync';
 /**
  * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
  * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
  * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
  */
-export declare function fetchSync(url: string, options?: Omit<RequestInit, 'cache'> & HydrogenUseQueryOptions): FetchResponse;
+export declare function fetchSync(url: string, options?: Omit<RequestInit, 'cache'> & HydrogenUseQueryOptions): ResponseSync;

package/dist/esnext/foundation/fetchSync/server/fetchSync.js

@@ -1,6 +1,6 @@
-import { parseJSON } from '../../../utilities/parse';
 import { useQuery } from '../../useQuery/hooks';
 import { useUrl } from '../../useUrl';
+import { ResponseSync } from '../ResponseSync';
 /**
  * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
  * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
@@ -10,11 +10,10 @@ export function fetchSync(url, options) {
     const { cache, preload, shouldCacheResponse, ...requestInit } = options ?? {};
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { origin } = useUrl();
-    const { data: useQueryResponse, error } = useQuery(// eslint-disable-line react-hooks/rules-of-hooks
-    [url, requestInit], async () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { data, error } = useQuery([url, requestInit], async () => {
         const response = await globalThis.fetch(new URL(url, origin), requestInit);
-        const text = await response.text();
-        return [text, response];
+        return ResponseSync.toSerializable(response);
     }, {
         cache,
         preload,
@@ -23,10 +22,5 @@ export function fetchSync(url, options) {
     if (error) {
         throw error;
     }
-    const [data, response] = useQueryResponse;
-    return {
-        response,
-        json: () => parseJSON(data),
-        text: () => data,
-    };
+    return new ResponseSync(data);
 }

package/dist/esnext/framework/graphiql.js

@@ -1,38 +1,34 @@
 export function graphiqlHtml(shop, token, apiVersion) {
-    return `<html>
-  <head>
-    <title>Shopify Storefront API</title>
-    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
-  </head>
-  <body style="margin: 0;">
-    <div id="graphiql" style="height: 100vh;"></div>
-    <script
-      crossorigin
-      src="https://unpkg.com/react/umd/react.production.min.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-    ></script>
-    <script>
-      const fetcher = GraphiQL.createFetcher({
-        url: 'https://${shop}/api/${apiVersion}/graphql.json',
-        headers: {
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8/>
+  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+  <title>Shopify Storefront API</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
+  <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
+  <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script>window.addEventListener('load', function (event) {
+    GraphQLPlayground.init(document.getElementById('root'), {
+      endpoint:'https://${shop}/api/${apiVersion}/graphql.json',
+      settings:{
+        'request.globalHeaders': {
           Accept: 'application/json',
           'Content-Type': 'application/graphql',
           'X-Shopify-Storefront-Access-Token': '${token}'
         }
-      });
-      ReactDOM.render(
-        React.createElement(GraphiQL, { fetcher: fetcher }),
-        document.getElementById('graphiql'),
-      );
-    </script>
-  </body>
+      },
+      tabs: [{
+        endpoint: 'https://${shop}/api/${apiVersion}/graphql.json',
+        query: '{ shop { name } }'
+      }]
+    })
+  })</script>
+</body>
 </html>
 `;
 }

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

@@ -3,12 +3,16 @@ import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware
 import MagicString from 'magic-string';
 import path from 'path';
 import fs from 'fs';
+import fastGlob from 'fast-glob';
 const SSR_BUNDLE_NAME = 'index.js';
+// Keep this in the outer scope to share it
+// across client <> server builds.
+let clientBuildPath;
 export default () => {
     let config;
     let isESM;
     return {
-        name: 'vite-plugin-platform-entry',
+        name: 'hydrogen:platform-entry',
         enforce: 'pre',
         configResolved(_config) {
             config = _config;
@@ -29,18 +33,43 @@ export default () => {
             }
             return null;
         },
-        transform(code, id) {
-            if (normalizePath(id).includes('/hydrogen/dist/esnext/platforms/')) {
+        async transform(code, id, options) {
+            if (config.command === 'build' &&
+                options?.ssr &&
+                /@shopify\/hydrogen\/.+platforms\/virtual\./.test(normalizePath(id))) {
                 const ms = new MagicString(code);
-                ms.replace('__SERVER_ENTRY__', HYDROGEN_DEFAULT_SERVER_ENTRY);
-                const indexTemplatePath = normalizePath(path.resolve(config.root, config.build.outDir, '..', 'client', 'index.html'));
-                ms.replace('__INDEX_TEMPLATE__', indexTemplatePath);
+                ms.replace('__HYDROGEN_ENTRY__', HYDROGEN_DEFAULT_SERVER_ENTRY);
+                if (!clientBuildPath) {
+                    // Default value
+                    clientBuildPath = normalizePath(path.resolve(config.root, config.build.outDir, '..', 'client'));
+                }
+                ms.replace('__HYDROGEN_HTML_TEMPLATE__', normalizePath(path.resolve(clientBuildPath, 'index.html')));
+                ms.replace('__HYDROGEN_RELATIVE_CLIENT_BUILD__', normalizePath(path.relative(normalizePath(path.resolve(config.root, config.build.outDir)), clientBuildPath)));
+                const files = clientBuildPath
+                    ? (await fastGlob('**/*', {
+                        cwd: clientBuildPath,
+                        ignore: ['**/index.html', `**/${config.build.assetsDir}/**`],
+                    })).map((file) => '/' + file)
+                    : [];
+                ms.replace("\\['__HYDROGEN_ASSETS__'\\]", JSON.stringify(files));
+                ms.replace('__HYDROGEN_ASSETS_DIR__', config.build.assetsDir);
+                ms.replace('__HYDROGEN_ASSETS_BASE_URL__', (process.env.HYDROGEN_ASSET_BASE_URL || '').replace(/\/$/, ''));
+                // Remove the poison pill
+                ms.replace('throw', '//');
                 return {
                     code: ms.toString(),
                     map: ms.generateMap({ file: id, source: id }),
                 };
             }
         },
+        buildEnd(err) {
+            if (!err && !config.build.ssr && config.command === 'build') {
+                // Save outDir from client build in the outer scope in order
+                // to read it during the server build. The CLI runs Vite in
+                // the same process so the scope is shared across builds.
+                clientBuildPath = normalizePath(path.resolve(config.root, config.build.outDir));
+            }
+        },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
                 const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -40,15 +40,17 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
     let text;
     let data;
     let useQueryError;
+    let response = null;
     try {
-        text = fetchSync(url, {
+        response = fetchSync(url, {
             ...requestInit,
             cache,
             preload,
             shouldCacheResponse,
-        }).text();
+        });
+        text = response.text();
         try {
-            data = JSON.parse(text);
+            data = response.json();
         }
         catch (error) {
             useQueryError = new Error('Unable to parse response:\n' + text);
@@ -82,15 +84,16 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
      */
     if (data?.errors) {
         const errors = Array.isArray(data.errors) ? data.errors : [data.errors];
+        const requestId = response?.headers?.get('x-request-id') ?? '';
         for (const error of errors) {
             if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
-                throw new Error(error.message);
+                throw new Error(`Storefront API GraphQL Error: ${error.message}.\nRequest id: ${requestId}`);
             }
             else {
-                log.error('GraphQL Error', error);
+                log.error('Storefront API GraphQL Error', error, 'Storefront API GraphQL request id', requestId);
             }
         }
-        log.error(`GraphQL errors: ${errors.length}`);
+        log.error(`Storefront API GraphQL error count: ${errors.length}`);
     }
     if (__HYDROGEN_DEV__ &&
         (log.options().showUnusedQueryProperties ||

package/dist/esnext/platforms/index.d.ts

@@ -0,0 +1 @@
+export * from './virtual';

package/dist/esnext/platforms/index.js

@@ -0,0 +1 @@
+export * from './virtual';

package/dist/esnext/platforms/node.js

@@ -1,11 +1,6 @@
 import '../utilities/web-api-polyfill';
 import path from 'path';
-// @ts-ignore
-// eslint-disable-next-line node/no-missing-import
-import entrypoint from '__SERVER_ENTRY__';
-// @ts-ignore
-// eslint-disable-next-line node/no-missing-import
-import indexTemplate from '__INDEX_TEMPLATE__?raw';
+import { handleRequest, indexTemplate, relativeClientBuildPath } from './virtual';
 import { hydrogenMiddleware } from '../framework/middleware';
 // @ts-ignore
 import serveStatic from 'serve-static';
@@ -14,13 +9,12 @@ import compression from 'compression';
 import bodyParser from 'body-parser';
 import connect from 'connect';
 import { InMemoryCache } from '../framework/cache/in-memory';
-const handleRequest = entrypoint;
 export async function createServer({ cache = new InMemoryCache(), } = {}) {
     // @ts-ignore
     globalThis.Oxygen = { env: process.env };
     const app = connect();
     app.use(compression());
-    app.use(serveStatic(path.resolve(__dirname, '../client'), {
+    app.use(serveStatic(path.resolve(__dirname, relativeClientBuildPath), {
         index: false,
     }));
     app.use(bodyParser.raw({ type: '*/*' }));

package/dist/esnext/platforms/virtual.d.ts

@@ -0,0 +1,8 @@
+import type { RequestHandler } from '../shared-types';
+export declare const handleRequest: RequestHandler;
+export { default as indexTemplate } from '__HYDROGEN_HTML_TEMPLATE__?raw';
+export declare const assets: Set<string>;
+export declare const assetPrefix: string;
+export declare const isAsset: (pathname?: string) => boolean;
+export declare const relativeClientBuildPath: string;
+export declare const assetBasePath: string;

package/dist/esnext/platforms/virtual.js

@@ -0,0 +1,14 @@
+// This file is modified by Vite at build time
+// with user project information and re-exports it.
+// @ts-ignore
+// eslint-disable-next-line node/no-missing-import
+import appEntry from '__HYDROGEN_ENTRY__';
+export const handleRequest = appEntry;
+// eslint-disable-next-line node/no-missing-import
+export { default as indexTemplate } from '__HYDROGEN_HTML_TEMPLATE__?raw';
+export const assets = new Set(['__HYDROGEN_ASSETS__']);
+export const assetPrefix = '/__HYDROGEN_ASSETS_DIR__/';
+export const isAsset = (pathname = '') => pathname.startsWith(assetPrefix) || assets.has(pathname);
+export const relativeClientBuildPath = '__HYDROGEN_RELATIVE_CLIENT_BUILD__';
+export const assetBasePath = '__HYDROGEN_ASSETS_BASE_URL__';
+throw new Error('This file must be overwritten in a Vite plugin');

package/dist/esnext/platforms/worker.js

@@ -1,12 +1,12 @@
-// @ts-ignore
-// eslint-disable-next-line node/no-missing-import
-import entrypoint from '__SERVER_ENTRY__';
-// @ts-ignore
-// eslint-disable-next-line node/no-missing-import
-import indexTemplate from '__INDEX_TEMPLATE__?raw';
-const handleRequest = entrypoint;
+import { handleRequest, indexTemplate, isAsset, assetBasePath } from './virtual';
 export default {
     async fetch(request, env, context) {
+        // Proxy assets to the CDN. This should be removed
+        // once the proxy is implemented in Oxygen itself.
+        const url = new URL(request.url);
+        if (assetBasePath && isAsset(url.pathname)) {
+            return fetch(request.url.replace(url.origin, assetBasePath), request);
+        }
         if (!globalThis.Oxygen) {
             globalThis.Oxygen = { env };
         }

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.0.2";
+export declare const LIB_VERSION = "1.1.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.0.2';
+export const LIB_VERSION = '1.1.0';

package/dist/node/framework/graphiql.js

@@ -2,40 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.graphiqlHtml = void 0;
 function graphiqlHtml(shop, token, apiVersion) {
-    return `<html>
-  <head>
-    <title>Shopify Storefront API</title>
-    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
-  </head>
-  <body style="margin: 0;">
-    <div id="graphiql" style="height: 100vh;"></div>
-    <script
-      crossorigin
-      src="https://unpkg.com/react/umd/react.production.min.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-    ></script>
-    <script>
-      const fetcher = GraphiQL.createFetcher({
-        url: 'https://${shop}/api/${apiVersion}/graphql.json',
-        headers: {
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset=utf-8/>
+  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+  <title>Shopify Storefront API</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
+  <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
+  <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script>window.addEventListener('load', function (event) {
+    GraphQLPlayground.init(document.getElementById('root'), {
+      endpoint:'https://${shop}/api/${apiVersion}/graphql.json',
+      settings:{
+        'request.globalHeaders': {
           Accept: 'application/json',
           'Content-Type': 'application/graphql',
           'X-Shopify-Storefront-Access-Token': '${token}'
         }
-      });
-      ReactDOM.render(
-        React.createElement(GraphiQL, { fetcher: fetcher }),
-        document.getElementById('graphiql'),
-      );
-    </script>
-  </body>
+      },
+      tabs: [{
+        endpoint: 'https://${shop}/api/${apiVersion}/graphql.json',
+        query: '{ shop { name } }'
+      }]
+    })
+  })</script>
+</body>
 </html>
 `;
 }

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

@@ -8,12 +8,16 @@ const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middle
 const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
+const fast_glob_1 = __importDefault(require("fast-glob"));
 const SSR_BUNDLE_NAME = 'index.js';
+// Keep this in the outer scope to share it
+// across client <> server builds.
+let clientBuildPath;
 exports.default = () => {
     let config;
     let isESM;
     return {
-        name: 'vite-plugin-platform-entry',
+        name: 'hydrogen:platform-entry',
         enforce: 'pre',
         configResolved(_config) {
             config = _config;
@@ -34,18 +38,43 @@ exports.default = () => {
             }
             return null;
         },
-        transform(code, id) {
-            if ((0, vite_1.normalizePath)(id).includes('/hydrogen/dist/esnext/platforms/')) {
+        async transform(code, id, options) {
+            if (config.command === 'build' &&
+                options?.ssr &&
+                /@shopify\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
                 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);
+                ms.replace('__HYDROGEN_ENTRY__', vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
+                if (!clientBuildPath) {
+                    // Default value
+                    clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client'));
+                }
+                ms.replace('__HYDROGEN_HTML_TEMPLATE__', (0, vite_1.normalizePath)(path_1.default.resolve(clientBuildPath, 'index.html')));
+                ms.replace('__HYDROGEN_RELATIVE_CLIENT_BUILD__', (0, vite_1.normalizePath)(path_1.default.relative((0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir)), clientBuildPath)));
+                const files = clientBuildPath
+                    ? (await (0, fast_glob_1.default)('**/*', {
+                        cwd: clientBuildPath,
+                        ignore: ['**/index.html', `**/${config.build.assetsDir}/**`],
+                    })).map((file) => '/' + file)
+                    : [];
+                ms.replace("\\['__HYDROGEN_ASSETS__'\\]", JSON.stringify(files));
+                ms.replace('__HYDROGEN_ASSETS_DIR__', config.build.assetsDir);
+                ms.replace('__HYDROGEN_ASSETS_BASE_URL__', (process.env.HYDROGEN_ASSET_BASE_URL || '').replace(/\/$/, ''));
+                // Remove the poison pill
+                ms.replace('throw', '//');
                 return {
                     code: ms.toString(),
                     map: ms.generateMap({ file: id, source: id }),
                 };
             }
         },
+        buildEnd(err) {
+            if (!err && !config.build.ssr && config.command === 'build') {
+                // Save outDir from client build in the outer scope in order
+                // to read it during the server build. The CLI runs Vite in
+                // the same process so the scope is shared across builds.
+                clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir));
+            }
+        },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
                 const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -35,6 +35,11 @@
       "import": "./dist/esnext/framework/cache/*.js",
       "require": "./dist/node/framework/cache/*.js"
     },
+    "./platforms": {
+      "types": "./dist/esnext/platforms/virtual.d.ts",
+      "import": "./dist/esnext/platforms/virtual.js",
+      "require": "./dist/node/platforms/virtual.js"
+    },
     "./package.json": "./package.json",
     "./*": "./dist/esnext/*.js"
   },

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

@@ -297,6 +297,19 @@ function ReactFlightVitePlugin() {
 
         return findClientBoundariesForClientBuild(serverBuildEntries, optimizeBoundaries !== false).then(injectGlobs);
       }
+    },
+    handleHotUpdate: function (_ref2) {
+      var modules = _ref2.modules;
+
+      if (modules.some(function (mod) {
+        return mod.meta && mod.meta.isClientComponent;
+      })) {
+        return modules.filter(function (mod) {
+          return !mod.meta || !mod.meta.ssr;
+        });
+      }
+
+      return modules;
     }
   };
 }
@@ -466,9 +479,9 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
         exports: []
       };
       lastModImports.forEach(function (mod) {
-        mod.variables.forEach(function (_ref2) {
-          var name = _ref2[0],
-              alias = _ref2[1];
+        mod.variables.forEach(function (_ref3) {
+          var name = _ref3[0],
+              alias = _ref3[1];
 
           if (name === '*' && !alias) {
             var _accModInfo$exports;
@@ -501,8 +514,8 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // the original module before marking it as client boundary.
 
   return currentMod.meta.imports.some(function (imp) {
-    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
-      var name = _ref3[0];
+    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref4) {
+      var name = _ref4[0];
       return accModInfo.exports.includes(name);
     });
   });
@@ -540,12 +553,12 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
 
 
   var imports = [];
-  rawImports.forEach(function (_ref4) {
-    var startMod = _ref4.s,
-        endMod = _ref4.e,
-        dynamicImportIndex = _ref4.d,
-        startStatement = _ref4.ss,
-        endStatement = _ref4.se;
+  rawImports.forEach(function (_ref5) {
+    var startMod = _ref5.s,
+        endMod = _ref5.e,
+        dynamicImportIndex = _ref5.d,
+        startStatement = _ref5.ss,
+        endStatement = _ref5.se;
     if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
 
     var rawModPath = code.slice(startMod, endMod);
@@ -593,7 +606,8 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
   assign(currentModule.meta, {
     isFacade: isFacade,
     namedExports: namedExports,
-    imports: imports
+    imports: imports,
+    ssr: true
   });
 }
 

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

@@ -293,6 +293,19 @@ function ReactFlightVitePlugin() {
 
         return findClientBoundariesForClientBuild(serverBuildEntries, optimizeBoundaries !== false).then(injectGlobs);
       }
+    },
+    handleHotUpdate: function (_ref2) {
+      var modules = _ref2.modules;
+
+      if (modules.some(function (mod) {
+        return mod.meta && mod.meta.isClientComponent;
+      })) {
+        return modules.filter(function (mod) {
+          return !mod.meta || !mod.meta.ssr;
+        });
+      }
+
+      return modules;
     }
   };
 }
@@ -462,9 +475,9 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
         exports: []
       };
       lastModImports.forEach(function (mod) {
-        mod.variables.forEach(function (_ref2) {
-          var name = _ref2[0],
-              alias = _ref2[1];
+        mod.variables.forEach(function (_ref3) {
+          var name = _ref3[0],
+              alias = _ref3[1];
 
           if (name === '*' && !alias) {
             var _accModInfo$exports;
@@ -497,8 +510,8 @@ function isDirectImportInServer(originalMod, currentMod, accModInfo) {
   // the original module before marking it as client boundary.
 
   return currentMod.meta.imports.some(function (imp) {
-    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref3) {
-      var name = _ref3[0];
+    return imp.from === accModInfo.file && (imp.variables || []).some(function (_ref4) {
+      var name = _ref4[0];
       return accModInfo.exports.includes(name);
     });
   });
@@ -536,12 +549,12 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
 
 
   var imports = [];
-  rawImports.forEach(function (_ref4) {
-    var startMod = _ref4.s,
-        endMod = _ref4.e,
-        dynamicImportIndex = _ref4.d,
-        startStatement = _ref4.ss,
-        endStatement = _ref4.se;
+  rawImports.forEach(function (_ref5) {
+    var startMod = _ref5.s,
+        endMod = _ref5.e,
+        dynamicImportIndex = _ref5.d,
+        startStatement = _ref5.ss,
+        endStatement = _ref5.se;
     if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
 
     var rawModPath = code.slice(startMod, endMod);
@@ -589,7 +602,8 @@ function augmentModuleGraph(moduleGraph, id, code, root, resolveAlias) {
   assign(currentModule.meta, {
     isFacade: isFacade,
     namedExports: namedExports,
-    imports: imports
+    imports: imports,
+    ssr: true
   });
 }
 

package/dist/esnext/foundation/fetchSync/types.d.ts

@@ -1,5 +0,0 @@
-export interface FetchResponse {
-    response: Response;
-    json: () => any;
-    text: () => any;
-}

package/dist/esnext/foundation/fetchSync/types.js

@@ -1 +0,0 @@
-export {};