@shopify/hydrogen 1.0.2 → 1.3.0

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

@@ -1,11 +1,12 @@
-import type { CountryCode, LanguageCode } from '../../storefront-api-types';
+import type { CountryCode, LanguageCode } from '../../storefront-api-types.js';
 import type { ReactNode } from 'react';
-import type { ShopifyConfigFetcher, ShopifyConfig } from '../../types';
+import type { ShopifyConfigFetcher, ShopifyConfig } from '../../types.js';
 export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLanguageCode' | 'defaultCountryCode'> {
     defaultLanguageCode: `${LanguageCode}`;
     defaultCountryCode: `${CountryCode}`;
     storefrontId: string | null;
 }
+export declare type Locale = string;
 export interface LocalizationContextValue {
     country: {
         isoCode: `${CountryCode}`;
@@ -13,7 +14,7 @@ export interface LocalizationContextValue {
     language: {
         isoCode: `${LanguageCode}`;
     };
-    locale: `${LanguageCode}-${CountryCode}`;
+    locale: Locale;
 }
 export declare type ShopifyProviderProps = {
     /** Shopify connection information. Defaults to the `shopify` property in the `hydrogen.config.js` file. */

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.js';
+import { log } from '../../utilities/log/index.js';
+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.js';
 /**
  * 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 { suspendFunction, preloadFunction } from '../../../utilities/suspense.js';
+import { ResponseSync } from '../ResponseSync.js';
 /**
  * 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 { type HydrogenUseQueryOptions } from '../../useQuery/index.js';
+import { ResponseSync } from '../ResponseSync.js';
 /**
  * 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 { useQuery } from '../../useQuery/index.js';
+import { useUrl } from '../../useUrl/index.js';
+import { ResponseSync } from '../ResponseSync.js';
 /**
  * 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/foundation/index.d.ts

@@ -1,3 +1,3 @@
-export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './ServerPropsProvider';
-export { useShop } from './useShop';
-export { useUrl } from './useUrl';
+export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './ServerPropsProvider/index.js';
+export { useShop } from './useShop/index.js';
+export { useUrl } from './useUrl/index.js';

package/dist/esnext/foundation/index.js

@@ -1,3 +1,3 @@
-export { ServerPropsProvider, ServerPropsContext, } from './ServerPropsProvider';
-export { useShop } from './useShop';
-export { useUrl } from './useUrl';
+export { ServerPropsProvider, ServerPropsContext, } from './ServerPropsProvider/index.js';
+export { useShop } from './useShop/index.js';
+export { useUrl } from './useUrl/index.js';

package/dist/esnext/foundation/session/session-types.d.ts

@@ -0,0 +1,15 @@
+export declare type SessionSyncApi = {
+    get: () => Record<string, string>;
+    set: (data: Record<string, any>) => any;
+};
+export declare type SessionApi = {
+    get: () => Promise<Record<string, string>>;
+    set: (key: string, value: string) => Promise<void>;
+    destroy: () => Promise<void>;
+    getFlash: (key: string) => any;
+};
+export declare type SessionStorageAdapter = {
+    get: (request: Request) => Promise<Record<string, string>>;
+    set: (request: Request, value: Record<string, string>) => Promise<string>;
+    destroy: (request: Request) => Promise<string>;
+};

package/dist/esnext/foundation/session/session.d.ts

@@ -1,27 +1,18 @@
-import { Logger } from '../../utilities/log';
-import type { HydrogenResponse } from '../HydrogenResponse/HydrogenResponse.server';
-import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server';
-export declare type SessionSyncApi = {
-    get: () => Record<string, string>;
-};
-export declare type SessionApi = {
-    get: () => Promise<Record<string, string>>;
-    set: (key: string, value: string) => Promise<void>;
-    destroy: () => Promise<void>;
-};
-export declare type SessionStorageAdapter = {
-    get: (request: Request) => Promise<Record<string, string>>;
-    set: (request: Request, value: Record<string, string>) => Promise<string>;
-    destroy: (request: Request) => Promise<string>;
-};
+import { Logger } from '../../utilities/log/index.js';
+import type { HydrogenResponse } from '../HydrogenResponse/HydrogenResponse.server.js';
+import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server.js';
+import type { SessionStorageAdapter } from './session-types.js';
 export declare function getSyncSessionApi(request: HydrogenRequest, componentResponse: HydrogenResponse, log: Logger, session?: SessionStorageAdapter): {
     get(): any;
+    set(data: Record<string, any>): any;
 };
 export declare const emptySessionImplementation: (log: Logger) => {
+    getFlash(key: string): Promise<null>;
     get(): Promise<{}>;
     set(key: string, value: string): Promise<void>;
     destroy(): Promise<void>;
 };
 export declare const emptySyncSessionImplementation: (log: Logger) => {
     get(): {};
+    set(data: Record<string, any>): null;
 };

package/dist/esnext/foundation/session/session.js

@@ -1,4 +1,4 @@
-import { wrapPromise } from '../../utilities/suspense';
+import { wrapPromise } from '../../utilities/suspense.js';
 export function getSyncSessionApi(request, componentResponse, log, session) {
     const sessionPromises = {};
     return session
@@ -9,11 +9,23 @@ export function getSyncSessionApi(request, componentResponse, log, session) {
                 }
                 return sessionPromises.getPromise.read();
             },
+            set(data) {
+                if (!sessionPromises.setPromise) {
+                    sessionPromises.setPromise = wrapPromise(session.set(request, data));
+                }
+                const cookie = sessionPromises.setPromise.read();
+                componentResponse.headers.set('Set-Cookie', cookie);
+                return cookie;
+            },
         }
         : emptySyncSessionImplementation(log);
 }
 export const emptySessionImplementation = function (log) {
     return {
+        async getFlash(key) {
+            log.warn('No session adapter has been configured!');
+            return null;
+        },
         async get() {
             log.warn('No session adapter has been configured!');
             return {};
@@ -33,5 +45,9 @@ export const emptySyncSessionImplementation = function (log) {
             log.warn('No session adapter has been configured!');
             return {};
         },
+        set(data) {
+            log.warn('No session adapter has been configured!');
+            return null;
+        },
     };
 };

package/dist/esnext/foundation/ssr-interop.d.ts

@@ -4,7 +4,7 @@
  * In the server, this file is transformed by Vite to inject server logic.
  * NOTE: Do not remove SSR-prefixed comments in this file.
  */
-import type { HydrogenRequest } from './HydrogenRequest/HydrogenRequest.server';
+import type { HydrogenRequest } from './HydrogenRequest/HydrogenRequest.server.js';
 export declare const META_ENV_SSR = false;
 declare type ServerGetter<T> = (request: HydrogenRequest) => T;
 /**
@@ -21,7 +21,7 @@ declare type ServerGetter<T> = (request: HydrogenRequest) => T;
  * The returned type depends on what the server getter returns.
  * @example
  * ```js
- * import {MyClientContext} from './my-client-react-context-provider';
+ * import {MyClientContext} from './my-client-react-context-provider.js';
  * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
  * ```
  */

package/dist/esnext/foundation/ssr-interop.js

@@ -5,7 +5,7 @@
  * NOTE: Do not remove SSR-prefixed comments in this file.
  */
 import { useContext } from 'react';
-//@SSR import {useServerRequest} from './ServerRequestProvider';
+//@SSR import {useServerRequest} from './ServerRequestProvider/index.js';
 // This is replaced by Vite to import.meta.env.SSR
 export const META_ENV_SSR = false;
 const reactContextType = Symbol.for('react.context');
@@ -23,7 +23,7 @@ const reactContextType = Symbol.for('react.context');
  * The returned type depends on what the server getter returns.
  * @example
  * ```js
- * import {MyClientContext} from './my-client-react-context-provider';
+ * import {MyClientContext} from './my-client-react-context-provider.js';
  * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
  * ```
  */

package/dist/esnext/foundation/useNavigate/useNavigate.js

@@ -1,5 +1,5 @@
-import { useRouter } from '../Router/BrowserRouter.client';
-import { useBasePath } from '../useRouteParams/RouteParamsProvider.client';
+import { useRouter } from '../Router/BrowserRouter.client.js';
+import { useBasePath } from '../useRouteParams/RouteParamsProvider.client.js';
 /**
  * The useNavigate hook imperatively navigates between routes.
  */

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types';
+import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types.js';
 export interface HydrogenUseQueryOptions {
     /** The [caching strategy](https://shopify.dev/custom-storefronts/hydrogen/framework/cache#caching-strategies) to help you
      * determine which cache control header to set.
@@ -13,6 +13,9 @@ export interface HydrogenUseQueryOptions {
      */
     shouldCacheResponse?: (body: any) => boolean;
 }
+declare global {
+    var __HYDROGEN_CACHE_ID__: string;
+}
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this

package/dist/esnext/foundation/useQuery/hooks.js

@@ -1,7 +1,7 @@
-import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log';
-import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../Cache/cache-sub-request';
-import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
-import { CacheShort, NO_STORE } from '../Cache/strategies';
+import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log/index.js';
+import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../Cache/cache-sub-request.js';
+import { useRequestCacheData, useServerRequest, } from '../ServerRequestProvider/index.js';
+import { CacheShort, NO_STORE } from '../Cache/strategies/index.js';
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
@@ -19,7 +19,7 @@ queryFn,
 queryOptions) {
     const request = useServerRequest();
     const withCacheIdKey = [
-        '__QUERY_CACHE_ID__',
+        __HYDROGEN_CACHE_ID__,
         ...(typeof key === 'string' ? [key] : key),
     ];
     const fetcher = cachedQueryFnBuilder(withCacheIdKey, queryFn, queryOptions);

package/dist/esnext/foundation/useQuery/index.d.ts

@@ -1 +1 @@
-export { useQuery } from './hooks';
+export { useQuery, type HydrogenUseQueryOptions, shouldPreloadQuery, } from './hooks.js';

package/dist/esnext/foundation/useQuery/index.js

@@ -1 +1 @@
-export { useQuery } from './hooks';
+export { useQuery, shouldPreloadQuery, } from './hooks.js';

package/dist/esnext/foundation/useRequestContext/index.js

@@ -1,4 +1,4 @@
-import { META_ENV_SSR, useEnvContext } from '../ssr-interop';
+import { META_ENV_SSR, useEnvContext } from '../ssr-interop.js';
 /**
  * Provides access to the current request context.
  * @param scope - An optional string used to scope the request context. It is recommended to

package/dist/esnext/foundation/useRouteParams/useRouteParams.js

@@ -1,5 +1,5 @@
-import { useEnvContext } from '../ssr-interop';
-import { RouteParamsContext } from './RouteParamsProvider.client';
+import { useEnvContext } from '../ssr-interop.js';
+import { RouteParamsContext } from './RouteParamsProvider.client.js';
 /**
  *  The `useRouteParams` hook retrieves the parameters of an active route. The hook is available in both server and client components.
  */

package/dist/esnext/foundation/useServerProps/index.d.ts

@@ -1 +1 @@
-export { useServerProps } from './use-server-props';
+export { useServerProps } from './use-server-props.js';

package/dist/esnext/foundation/useServerProps/index.js

@@ -1 +1 @@
-export { useServerProps } from './use-server-props';
+export { useServerProps } from './use-server-props.js';

package/dist/esnext/foundation/useServerProps/use-server-props.d.ts

@@ -1,4 +1,4 @@
-import { ServerPropsContextValue, InternalServerPropsContextValue } from '../ServerPropsProvider/ServerPropsProvider';
+import { ServerPropsContextValue, InternalServerPropsContextValue } from '../ServerPropsProvider/ServerPropsProvider.js';
 /**
  * The `useServerProps` hook allows you to manage the [server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) passed to your server components when using Hydrogen as a React Server Component framework. The server props get cleared when you navigate from one route to another.
  *

package/dist/esnext/foundation/useServerProps/use-server-props.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ServerPropsContext, } from '../ServerPropsProvider/ServerPropsProvider';
+import { ServerPropsContext, } from '../ServerPropsProvider/ServerPropsProvider.js';
 /**
  * The `useServerProps` hook allows you to manage the [server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) passed to your server components when using Hydrogen as a React Server Component framework. The server props get cleared when you navigate from one route to another.
  *

package/dist/esnext/foundation/useSession/useSession.d.ts

@@ -1,2 +1,3 @@
 /** The `useSession` hook reads session data in server components. */
 export declare const useSession: () => Record<string, string>;
+export declare const useFlashSession: (key: string) => string;

package/dist/esnext/foundation/useSession/useSession.js

@@ -1,7 +1,20 @@
-import { useServerRequest } from '../ServerRequestProvider';
+import { useServerRequest } from '../ServerRequestProvider/index.js';
 /** The `useSession` hook reads session data in server components. */
 export const useSession = function () {
     const request = useServerRequest();
     const session = request.ctx.session?.get() || {};
     return session;
 };
+export const useFlashSession = function (key) {
+    const request = useServerRequest();
+    const data = request.ctx.session?.get() || {};
+    let value = data[key];
+    if (value) {
+        delete data[key];
+        request.ctx.flashSession[key] = value;
+    }
+    request.ctx.session?.set(data);
+    value = request.ctx.flashSession[key];
+    delete request.ctx.flashSession[key];
+    return value;
+};

package/dist/esnext/foundation/useShop/index.d.ts

@@ -1 +1 @@
-export { useShop } from './use-shop';
+export { useShop } from './use-shop.js';

package/dist/esnext/foundation/useShop/index.js

@@ -1 +1 @@
-export { useShop } from './use-shop';
+export { useShop } from './use-shop.js';

package/dist/esnext/foundation/useShop/use-shop.d.ts

@@ -3,4 +3,4 @@
  * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  * The `useShop` hook must be a descendent of a `ShopifyProvider` component.
  */
-export declare function useShop(): import("../ShopifyProvider/types").ShopifyContextValue;
+export declare function useShop(): import("../ShopifyProvider/types.js").ShopifyContextValue;

package/dist/esnext/foundation/useShop/use-shop.js

@@ -1,5 +1,5 @@
-import { ShopifyContext } from '../ShopifyProvider';
-import { useEnvContext } from '../ssr-interop';
+import { ShopifyContext } from '../ShopifyProvider/index.js';
+import { useEnvContext } from '../ssr-interop.js';
 /**
  * The `useShop` hook provides access to values within
  * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).

package/dist/esnext/foundation/useUrl/index.d.ts

@@ -1 +1 @@
-export { useUrl } from './useUrl';
+export { useUrl } from './useUrl.js';

package/dist/esnext/foundation/useUrl/index.js

@@ -1 +1 @@
-export { useUrl } from './useUrl';
+export { useUrl } from './useUrl.js';

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,8 +1,8 @@
 import { useContext, useMemo } from 'react';
-import { RSC_PATHNAME } from '../../constants';
-import { parseJSON } from '../../utilities/parse';
-import { RouterContext } from '../Router/BrowserRouter.client';
-import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
+import { RSC_PATHNAME } from '../../constants.js';
+import { parseJSON } from '../../utilities/parse.js';
+import { RouterContext } from '../Router/BrowserRouter.client.js';
+import { useEnvContext, META_ENV_SSR } from '../ssr-interop.js';
 /**
  * The `useUrl` hook retrieves the current URL in a server or client component.
  */

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/load-config.js

@@ -1,6 +1,6 @@
 // Provide Hydrogen config loader to external tools like the CLI
-import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './plugins/vite-plugin-hydrogen-virtual-files';
-import { viteception } from './viteception';
+import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './plugins/vite-plugin-hydrogen-virtual-files.js';
+import { viteception } from './viteception.js';
 export async function loadConfig(options = { root: process.cwd() }) {
     const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], options);
     return { configuration: loaded[0].default };

package/dist/esnext/framework/middleware.d.ts

@@ -1,4 +1,4 @@
-import type { ShopifyConfig } from '../shared-types';
+import type { ShopifyConfig } from '../shared-types.js';
 import type { IncomingMessage, NextFunction } from 'connect';
 import type { ServerResponse } from 'http';
 import type { ViteDevServer } from 'vite';

package/dist/esnext/framework/middleware.js

@@ -1,4 +1,4 @@
-import { graphiqlHtml } from './graphiql';
+import { graphiqlHtml } from './graphiql.js';
 export function graphiqlMiddleware({ getShopifyConfig, dev, }) {
     return async function (request, response, next) {
         if (dev && isGraphiqlRequest(request)) {
@@ -24,7 +24,7 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
      * which is needed for proxy requests and server-side API requests.
      */
     const webPolyfills = !globalThis.fetch || !globalThis.ReadableStream
-        ? import('../utilities/web-api-polyfill')
+        ? import('../utilities/web-api-polyfill.js')
         : undefined;
     return async function (request, response, next) {
         try {

package/dist/esnext/framework/plugin.d.ts

@@ -1,4 +1,4 @@
-import type { HydrogenVitePluginOptions } from './types';
+import type { HydrogenVitePluginOptions } from './types.js';
 import type { Plugin } from 'vite';
 declare const hydrogenPlugin: {
     (pluginOptions?: HydrogenVitePluginOptions): Plugin[];