@shopify/hydrogen 0.11.0-experimental.1 → 0.11.1-experimental.0

package/dist/esnext/framework/middleware.js

@@ -1,5 +1,4 @@
 import { graphiqlHtml } from './graphiql';
-import handleEvent from '../handle-event';
 export function graphiqlMiddleware({ shopifyConfig, dev, }) {
     return async function (request, response, next) {
         const graphiqlRequest = dev && isGraphiqlRequest(request);
@@ -14,51 +13,24 @@ export function graphiqlMiddleware({ shopifyConfig, dev, }) {
  * Vite dev server plugin as well as production Node.js implementation.
  */
 export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+    /**
+     * We're running in the Node.js runtime without access to `fetch`,
+     * which is needed for proxy requests and server-side API requests.
+     */
+    const webPolyfills = !globalThis.fetch || !globalThis.ReadableStream
+        ? import('../utilities/web-api-polyfill')
+        : undefined;
     return async function (request, response, next) {
-        const url = new URL('http://' + request.headers.host + request.originalUrl);
+        var _a, _b, _c;
         try {
-            /**
-             * We're running in the Node.js runtime without access to `fetch`,
-             * which is needed for proxy requests and server-side API requests.
-             */
-            if (!globalThis.fetch) {
-                const fetch = await import('node-fetch');
-                const { default: AbortController } = await import('abort-controller');
-                // @ts-ignore
-                globalThis.fetch = fetch;
-                // @ts-ignore
-                globalThis.Request = fetch.Request;
-                // @ts-ignore
-                globalThis.Response = fetch.Response;
-                // @ts-ignore
-                globalThis.Headers = fetch.Headers;
-                // @ts-ignore
-                globalThis.AbortController = AbortController;
-            }
-            if (!globalThis.ReadableStream) {
-                const { ReadableStream, WritableStream, TransformStream } = await import('web-streams-polyfill/ponyfill');
-                Object.assign(globalThis, {
-                    ReadableStream,
-                    WritableStream,
-                    TransformStream,
-                });
-            }
-            /**
-             * Dynamically import ServerComponentResponse after the `fetch`
-             * polyfill has loaded above.
-             */
-            const { ServerComponentRequest } = await import('./Hydration/ServerComponentRequest.server');
-            const eventResponse = await handleEvent(
-            /**
-             * Mimic a `FetchEvent`
-             */
-            {}, {
-                request: new ServerComponentRequest(request),
-                entrypoint: await getServerEntrypoint(),
-                indexTemplate,
-                streamableResponse: response,
+            await webPolyfills;
+            const entrypoint = await getServerEntrypoint();
+            const handleRequest = (_a = entrypoint.default) !== null && _a !== void 0 ? _a : entrypoint;
+            const eventResponse = await handleRequest(request, {
                 dev,
                 cache,
+                indexTemplate,
+                streamableResponse: response,
             });
             /**
              * If a `Response` was returned, that means it was not streamed.
@@ -88,7 +60,7 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
              */
             try {
                 const template = typeof indexTemplate === 'function'
-                    ? await indexTemplate(url.toString())
+                    ? await indexTemplate((_c = (_b = request.originalUrl) !== null && _b !== void 0 ? _b : request.url) !== null && _c !== void 0 ? _c : '')
                     : indexTemplate;
                 const html = template.replace(`<div id="root"></div>`, `<div id="root"><pre><code>${e.stack}</code></pre></div>`);
                 response.write(html);

package/dist/esnext/framework/plugin.js

@@ -1,9 +1,12 @@
 import hydrogenConfig from './plugins/vite-plugin-hydrogen-config';
-import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware';
+import hydrogenMiddleware, { HYDROGEN_DEFAULT_SERVER_ENTRY, } from './plugins/vite-plugin-hydrogen-middleware';
+import hydrogenClientMiddleware from './plugins/vite-plugin-hydrogen-client-middleware';
+import platformEntry from './plugins/vite-plugin-platform-entry';
 // @ts-ignore
 import rsc from '@shopify/hydrogen/vendor/react-server-dom-vite/plugin';
 import ssrInterop from './plugins/vite-plugin-ssr-interop';
 import purgeQueryCache from './plugins/vite-plugin-purge-query-cache';
+import hydrationAutoImport from './plugins/vite-plugin-hydration-auto-import';
 import inspect from 'vite-plugin-inspect';
 import react from '@vitejs/plugin-react';
 import path from 'path';
@@ -11,17 +14,25 @@ export default (shopifyConfig, pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && inspect(),
         hydrogenConfig(),
+        hydrogenClientMiddleware(),
         hydrogenMiddleware(shopifyConfig, pluginOptions),
         react(),
+        hydrationAutoImport(),
         ssrInterop(),
         rsc({
             clientComponentPaths: [
                 path.join(path.dirname(require.resolve('@shopify/hydrogen/package.json'))),
             ],
-            isServerComponentImporterAllowed(importer) {
-                return /(handle-worker-event|index)\.js/.test(importer);
+            isServerComponentImporterAllowed(importer, source) {
+                // Always allow the entry server (e.g. App.server.jsx) to be imported
+                // in other files such as worker.js or server.js.
+                const entryServer = process.env.HYDROGEN_SERVER_ENTRY || HYDROGEN_DEFAULT_SERVER_ENTRY;
+                return (source.includes(entryServer) ||
+                    // TODO update this after handleEvent is replaced with handleRequest
+                    /(handle-worker-event|index|entry-server)\.js/.test(importer));
             },
         }),
+        platformEntry(),
         pluginOptions.purgeQueryCacheOnBuild && purgeQueryCache(),
     ];
 };

package/dist/esnext/framework/plugins/vite-plugin-hydration-auto-import.d.ts

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

package/dist/esnext/framework/plugins/vite-plugin-hydration-auto-import.js

@@ -0,0 +1,38 @@
+import { normalizePath } from 'vite';
+import path from 'path';
+import MagicString from 'magic-string';
+const HYDROGEN_ENTRY_FILE = 'hydrogen-entry-client.jsx';
+export default () => {
+    let config;
+    return {
+        name: 'vite-plugin-hydration-auto-import',
+        enforce: 'pre',
+        configResolved(_config) {
+            config = _config;
+        },
+        resolveId(id, importer) {
+            if ((/^\/?@shopify\/hydrogen\/entry-client$/.test(id) ||
+                id.endsWith(path.sep + HYDROGEN_ENTRY_FILE)) &&
+                normalizePath(importer || '').endsWith('/index.html')) {
+                // Make this virtual import look like a local project file
+                // to enable React Refresh normally.
+                return path.join(config.root, HYDROGEN_ENTRY_FILE + '?virtual');
+            }
+            return null;
+        },
+        load(id) {
+            if (id.includes(HYDROGEN_ENTRY_FILE + '?virtual')) {
+                const code = new MagicString(`import renderHydrogen from '@shopify/hydrogen/entry-client';\n` +
+                    `export default renderHydrogen((props) => props.children);`);
+                return {
+                    code: code.toString(),
+                    map: code.generateMap({
+                        file: HYDROGEN_ENTRY_FILE,
+                        source: HYDROGEN_ENTRY_FILE,
+                    }),
+                };
+            }
+            return null;
+        },
+    };
+};

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

@@ -0,0 +1,9 @@
+import { type Plugin } from 'vite';
+declare const _default: () => Plugin;
+/**
+ * This dev server middleware prevents Vite from applying immutable cache control headers to client
+ * components. These client components are part of the user's local source, but since they are
+ * referenced via import globs in the `react-dom-server-vite` NPM package, Vite assumes they
+ * are 3P deps that can be cached. This middleware responds to the requests early with `no-cache`.
+ */
+export default _default;

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

@@ -0,0 +1,37 @@
+import { send } from 'vite';
+/**
+ * This dev server middleware prevents Vite from applying immutable cache control headers to client
+ * components. These client components are part of the user's local source, but since they are
+ * referenced via import globs in the `react-dom-server-vite` NPM package, Vite assumes they
+ * are 3P deps that can be cached. This middleware responds to the requests early with `no-cache`.
+ */
+export default () => {
+    return {
+        name: 'vite-plugin-hydrogen-client-middleware',
+        enforce: 'pre',
+        configureServer(server) {
+            server.middlewares.use(async (req, res, next) => {
+                const url = req.url;
+                try {
+                    if (url.includes('.client.js') &&
+                        url.includes('?v=') &&
+                        !url.includes('node_modules')) {
+                        const result = await server.transformRequest(url, { html: false });
+                        if (result) {
+                            return send(req, res, result.code, 'js', {
+                                etag: result.etag,
+                                cacheControl: 'no-cache',
+                                headers: server.config.server.headers,
+                                map: result.map,
+                            });
+                        }
+                    }
+                }
+                catch (e) {
+                    next(e);
+                }
+                next();
+            });
+        },
+    };
+};

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

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

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

@@ -4,6 +4,7 @@ import path from 'path';
 import { promises as fs } from 'fs';
 import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware';
 import { InMemoryCache } from '../cache/in-memory';
+export const HYDROGEN_DEFAULT_SERVER_ENTRY = '/src/App.server';
 export default (shopifyConfig, pluginOptions) => {
     return {
         name: 'vite-plugin-hydrogen-middleware',
@@ -31,7 +32,8 @@ export default (shopifyConfig, pluginOptions) => {
                 dev: true,
                 shopifyConfig,
                 indexTemplate: getIndexTemplate,
-                getServerEntrypoint: async () => await server.ssrLoadModule(process.env.HYDROGEN_SERVER_ENTRY || '/src/entry-server'),
+                getServerEntrypoint: () => server.ssrLoadModule(process.env.HYDROGEN_SERVER_ENTRY ||
+                    HYDROGEN_DEFAULT_SERVER_ENTRY),
                 devServer: server,
                 cache: (pluginOptions === null || pluginOptions === void 0 ? void 0 : pluginOptions.devCache)
                     ? new InMemoryCache()

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

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

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

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

package/dist/esnext/hooks/useProduct/useProduct.d.ts

@@ -2,4 +2,153 @@
  * The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of
  * a `ProductProvider` component.
  */
-export declare function useProduct(): import("../../components/ProductProvider/context").ProductContextType | null;
+export declare function useProduct(): {
+    id?: string | undefined;
+    title?: string | undefined;
+    handle?: any;
+    compareAtPriceRange?: Partial<{
+        __typename?: "ProductPriceRange" | undefined;
+    } & {
+        maxVariantPrice: {
+            __typename?: "MoneyV2" | undefined;
+        } & {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "currencyCode" | "amount">;
+        minVariantPrice: {
+            __typename?: "MoneyV2" | undefined;
+        } & {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "currencyCode" | "amount">;
+    }> | undefined;
+    descriptionHtml?: any;
+    priceRange?: Partial<{
+        __typename?: "ProductPriceRange" | undefined;
+    } & {
+        maxVariantPrice: {
+            __typename?: "MoneyV2" | undefined;
+        } & {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "currencyCode" | "amount">;
+        minVariantPrice: {
+            __typename?: "MoneyV2" | undefined;
+        } & {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../graphql/types/types").MoneyV2, "currencyCode" | "amount">;
+    }> | undefined;
+    media?: (({
+        __typename?: "ExternalVideo" | undefined;
+    } & {
+        __typename?: "ExternalVideo" | undefined;
+    } & Pick<import("../../graphql/types/types").ExternalVideo, "mediaContentType"> & {
+        __typename?: "ExternalVideo" | undefined;
+    } & Pick<import("../../graphql/types/types").ExternalVideo, "id" | "host" | "embeddedUrl">) | ({
+        __typename?: "MediaImage" | undefined;
+    } & {
+        __typename?: "MediaImage" | undefined;
+    } & Pick<import("../../graphql/types/types").MediaImage, "mediaContentType"> & {
+        image?: import("../../graphql/types/types").Maybe<{
+            __typename?: "Image" | undefined;
+        } & {
+            __typename?: "Image" | undefined;
+        } & Pick<import("../../graphql/types/types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
+    }) | ({
+        __typename?: "Model3d" | undefined;
+    } & {
+        __typename?: "Model3d" | undefined;
+    } & Pick<import("../../graphql/types/types").Model3d, "mediaContentType"> & {
+        __typename?: "Model3d" | undefined;
+    } & Pick<import("../../graphql/types/types").Model3d, "id" | "alt" | "mediaContentType"> & {
+        previewImage?: import("../../graphql/types/types").Maybe<{
+            __typename?: "Image" | undefined;
+        } & Pick<import("../../graphql/types/types").Image, "url">> | undefined;
+        sources: ({
+            __typename?: "Model3dSource" | undefined;
+        } & Pick<import("../../graphql/types/types").Model3dSource, "url">)[];
+    }) | ({
+        __typename?: "Video" | undefined;
+    } & {
+        __typename?: "Video" | undefined;
+    } & Pick<import("../../graphql/types/types").Video, "mediaContentType"> & {
+        __typename?: "Video" | undefined;
+    } & Pick<import("../../graphql/types/types").Video, "id"> & {
+        previewImage?: import("../../graphql/types/types").Maybe<{
+            __typename?: "Image" | undefined;
+        } & Pick<import("../../graphql/types/types").Image, "url">> | undefined;
+        sources: ({
+            __typename?: "VideoSource" | undefined;
+        } & Pick<import("../../graphql/types/types").VideoSource, "url" | "mimeType">)[];
+    }))[] | undefined;
+    mediaConnection?: ({
+        __typename?: "MediaConnection" | undefined;
+    } & {
+        edges: ({
+            __typename?: "MediaEdge" | undefined;
+        } & {
+            node: ({
+                __typename?: "ExternalVideo" | undefined;
+            } & {
+                __typename?: "ExternalVideo" | undefined;
+            } & Pick<import("../../graphql/types/types").ExternalVideo, "mediaContentType"> & {
+                __typename?: "ExternalVideo" | undefined;
+            } & Pick<import("../../graphql/types/types").ExternalVideo, "id" | "host" | "embeddedUrl">) | ({
+                __typename?: "MediaImage" | undefined;
+            } & {
+                __typename?: "MediaImage" | undefined;
+            } & Pick<import("../../graphql/types/types").MediaImage, "mediaContentType"> & {
+                image?: import("../../graphql/types/types").Maybe<{
+                    __typename?: "Image" | undefined;
+                } & {
+                    __typename?: "Image" | undefined;
+                } & Pick<import("../../graphql/types/types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
+            }) | ({
+                __typename?: "Model3d" | undefined;
+            } & {
+                __typename?: "Model3d" | undefined;
+            } & Pick<import("../../graphql/types/types").Model3d, "mediaContentType"> & {
+                __typename?: "Model3d" | undefined;
+            } & Pick<import("../../graphql/types/types").Model3d, "id" | "alt" | "mediaContentType"> & {
+                previewImage?: import("../../graphql/types/types").Maybe<{
+                    __typename?: "Image" | undefined;
+                } & Pick<import("../../graphql/types/types").Image, "url">> | undefined;
+                sources: ({
+                    __typename?: "Model3dSource" | undefined;
+                } & Pick<import("../../graphql/types/types").Model3dSource, "url">)[];
+            }) | ({
+                __typename?: "Video" | undefined;
+            } & {
+                __typename?: "Video" | undefined;
+            } & Pick<import("../../graphql/types/types").Video, "mediaContentType"> & {
+                __typename?: "Video" | undefined;
+            } & Pick<import("../../graphql/types/types").Video, "id"> & {
+                previewImage?: import("../../graphql/types/types").Maybe<{
+                    __typename?: "Image" | undefined;
+                } & Pick<import("../../graphql/types/types").Image, "url">> | undefined;
+                sources: ({
+                    __typename?: "VideoSource" | undefined;
+                } & Pick<import("../../graphql/types/types").VideoSource, "url" | "mimeType">)[];
+            });
+        })[];
+    }) | undefined;
+    metafields?: import("../../types").ParsedMetafield[] | undefined;
+    metafieldsConnection?: import("../../types").GraphQLConnection<import("../../types").RawMetafield> | undefined;
+    images?: Partial<import("../../graphql/types/types").Image>[] | undefined;
+    imagesConnection?: import("../../types").GraphQLConnection<import("../../components/Image/ImageFragment").ImageFragmentFragment> | undefined;
+    collections?: Partial<import("../../graphql/types/types").Collection>[] | undefined;
+    collectionsConnection?: import("../../types").GraphQLConnection<Partial<import("../../graphql/types/types").Collection>> | undefined;
+    variants?: import("../useProductOptions").Variant[] | Partial<import("../useProductOptions").Variant>[] | undefined;
+    variantsConnection?: import("../../types").GraphQLConnection<import("../useProductOptions").Variant> | undefined;
+    options?: import("../useProductOptions").OptionWithValues[] | undefined;
+    selectedVariant?: import("../useProductOptions").Variant | null | undefined;
+    setSelectedVariant?: import("../useProductOptions").SelectVariantCallback | undefined;
+    selectedOptions?: import("../useProductOptions").SelectedOptions | undefined;
+    setSelectedOption?: import("../useProductOptions").SelectOptionCallback | undefined;
+    setSelectedOptions?: import("../useProductOptions").SelectOptionsCallback | undefined;
+    isOptionInStock?: import("../useProductOptions").OptionsInStockCallback | undefined;
+    setSelectedSellingPlan?: import("../useProductOptions").SelectedSellingPlanCallback | undefined;
+    selectedSellingPlan?: import("../useProductOptions").SellingPlan | undefined;
+    selectedSellingPlanAllocation?: import("../useProductOptions").SellingPlanAllocation | undefined;
+    sellingPlanGroups?: (Omit<import("../useProductOptions").SellingPlanGroup, "sellingPlans"> & {
+        sellingPlans: import("../useProductOptions").SellingPlan[];
+    })[] | undefined;
+    sellingPlanGroupsConnection?: import("../../types").GraphQLConnection<import("../useProductOptions").SellingPlanGroup> | undefined;
+};

package/dist/esnext/hooks/useProduct/useProduct.js

@@ -1,10 +1,43 @@
 import { useContext } from 'react';
-import { ProductContext } from '../../components/ProductProvider/context';
+import { ProductContext, ProductOptionsContext, } from '../../components/ProductProvider/context';
 /**
  * The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of
  * a `ProductProvider` component.
  */
 export function useProduct() {
-    const context = useContext(ProductContext);
-    return context;
+    var _a;
+    const data = useContext(ProductContext);
+    let state;
+    try {
+        state = (_a = useContext(ProductOptionsContext)) !== null && _a !== void 0 ? _a : { ...stateFallback };
+    }
+    catch (error) {
+        // for server components which can't use state
+        state = { ...stateFallback };
+    }
+    return {
+        ...state,
+        ...data,
+    };
+}
+const stateFallback = {
+    variants: undefined,
+    variantsConnection: undefined,
+    options: undefined,
+    selectedVariant: undefined,
+    setSelectedVariant: NotAvailable('setSelectedVariant'),
+    selectedOptions: undefined,
+    setSelectedOption: NotAvailable('setSelectedOption'),
+    setSelectedOptions: NotAvailable('setSelectedOptions'),
+    isOptionInStock: undefined,
+    setSelectedSellingPlan: NotAvailable('setSelectedSellingPlan'),
+    selectedSellingPlan: undefined,
+    selectedSellingPlanAllocation: undefined,
+    sellingPlanGroups: undefined,
+    sellingPlanGroupsConnection: undefined,
+};
+function NotAvailable(propName) {
+    return () => {
+        throw new Error(`The '${propName}' function is not available in server components`);
+    };
 }

package/dist/esnext/hooks/useProductOptions/types.d.ts

@@ -38,7 +38,7 @@ export interface ProductOptionsHookValue {
     /** An array of the product's options and values. */
     options: OptionWithValues[];
     /** The selected variant. */
-    selectedVariant?: Variant;
+    selectedVariant?: Variant | null;
     /** A callback to set the selected variant to the variant passed as an argument. */
     setSelectedVariant: SelectVariantCallback;
     selectedOptions: SelectedOptions;

package/dist/esnext/hooks/useProductOptions/useProductOptions.d.ts

@@ -10,5 +10,5 @@ export declare function useProductOptions({ variants: variantsConnection, sellin
     /** The product's `SellingPlanGroups`. */
     sellingPlanGroups?: GraphQLConnection<SellingPlanGroup>;
     /** The initially selected variant. */
-    initialVariantId?: Variant['id'];
+    initialVariantId?: Variant['id'] | null;
 }): ProductOptionsHookValue;

package/dist/esnext/hooks/useProductOptions/useProductOptions.js

@@ -14,9 +14,9 @@ export function useProductOptions({ variants: variantsConnection, sellingPlanGro
      * Track the selectedVariant within the hook. If `initialVariantId`
      * is passed, use that as an initial value.
      */
-    const [selectedVariant, setSelectedVariant] = useState(initialVariantId
-        ? variants.find((variant) => variant.id === initialVariantId)
-        : undefined);
+    const [selectedVariant, setSelectedVariant] = useState(initialVariantId == null
+        ? initialVariantId
+        : variants.find((variant) => variant.id === initialVariantId));
     /**
      * Track the selectedOptions within the hook. If a `initialVariantId`
      * is passed, use that to select initial options.
@@ -34,9 +34,9 @@ export function useProductOptions({ variants: variantsConnection, sellingPlanGro
      * values.
      */
     useEffect(() => {
-        const selectedVariant = initialVariantId
-            ? variants.find((variant) => variant.id === initialVariantId)
-            : undefined;
+        const selectedVariant = initialVariantId == null
+            ? initialVariantId
+            : variants.find((variant) => variant.id === initialVariantId);
         setSelectedVariant(selectedVariant);
         const selectedOptions = (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.selectedOptions)
             ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {

package/dist/esnext/hooks/useShopQuery/hooks.d.ts

@@ -1,5 +1,5 @@
 import { ASTNode } from 'graphql';
-import type { CacheOptions } from '../../types';
+import type { CachingStrategy, PreloadOptions } from '../../types';
 export interface UseShopQueryResponse<T> {
     /** The data returned by the query. */
     data: T;
@@ -8,15 +8,22 @@ export interface UseShopQueryResponse<T> {
 /**
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
-export declare function useShopQuery<T>({ query, variables, cache, locale, }: {
+export declare function useShopQuery<T>({ query, variables, cache, locale, preload, }: {
     /** A string of the GraphQL query.
      * If no query is provided, useShopQuery will make no calls to the Storefront API.
      */
     query?: ASTNode | string;
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
-    /** An object containing cache-control options for the sub-request. */
-    cache?: CacheOptions;
+    /** The [caching strategy](/custom-storefronts/hydrogen/framework/cache#caching-strategies) to
+     * help you determine which cache control header to set.
+     */
+    cache?: CachingStrategy;
     /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
     locale?: string;
+    /** Whether to[preload the query](/custom-storefronts/hydrogen/framework/preloaded-queries).
+     * Defaults to `false`. Specify `true` to preload the query for the URL or `'*'`
+     * to preload the query for all requests.
+     */
+    preload?: PreloadOptions;
 }): UseShopQueryResponse<T>;

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

@@ -1,21 +1,24 @@
 import { useShop } from '../../foundation/useShop';
-import { log } from '../../utilities/log';
+import { getLoggerWithContext } from '../../utilities/log';
 import { useQuery } from '../../foundation/useQuery';
 import { fetchBuilder, graphqlRequestBody } from '../../utilities';
 import { getConfig } from '../../framework/config';
+import { useServerRequest } from '../../foundation/ServerRequestProvider';
 /**
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
-export function useShopQuery({ query, variables = {}, cache = {}, locale = '', }) {
+export function useShopQuery({ query, variables = {}, cache, locale = '', preload = false, }) {
     if (!import.meta.env.SSR) {
         throw new Error('Shopify Storefront API requests should only be made from the server.');
     }
+    const serverRequest = useServerRequest();
+    const log = getLoggerWithContext(serverRequest);
     const body = query ? graphqlRequestBody(query, variables) : '';
     const { request, key } = createShopRequest(body, locale);
     const { data, error: fetchError } = useQuery(key, query
         ? fetchBuilder(request)
         : // If no query, avoid calling SFAPI & return nothing
-            async () => ({ data: undefined, errors: undefined }), { cache });
+            async () => ({ data: undefined, errors: undefined }), { cache, preload });
     /**
      * The fetch request itself failed, so we handle that differently than a GraphQL error
      */

package/dist/esnext/index.d.ts

@@ -2,7 +2,8 @@ export * from './foundation/';
 export * from './components/';
 export * from './hooks/';
 export { flattenConnection, fetchBuilder, graphqlRequestBody, decodeShopifyId, isClient, getTime, } from './utilities';
-export { log, setLogger, Logger } from './utilities/log';
+export { log, setLogger, setLoggerOptions, Logger } from './utilities/log';
 export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';
 export * from './hooks/useShopQuery';
 export { CartQuery } from './graphql/graphql-constants';
+export { generateCacheControlHeader, NoStore, CacheSeconds, CacheMinutes, CacheHours, CacheDays, CacheWeeks, CacheMonths, CacheCustom, } from './framework/CachingStrategy';