@shopify/hydrogen 0.11.1-experimental.1 → 0.11.1

package/CHANGELOG.md

@@ -1,24 +1,30 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
+## 0.11.1
 
-The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
-and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+### Patch Changes
 
-<!-- ## [Unreleased] -->
+- [#770](https://github.com/Shopify/hydrogen/pull/770) [`71e0255`](https://github.com/Shopify/hydrogen/commit/71e0255ea48dc1caa34d2c05a1556cc0ce6d4ce9) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Framework and global hooks content updates
 
-## 0.11.1-experimental.1
+* [#761](https://github.com/Shopify/hydrogen/pull/761) [`1142647`](https://github.com/Shopify/hydrogen/commit/114264716bc8f3027e3e6395d523714adbc92014) Thanks [@frehner](https://github.com/frehner)! - Fix issue with components that take in the `as` prop not validating other props when a component is passed to `as`.
 
-### Patch Changes
+- [#752](https://github.com/Shopify/hydrogen/pull/752) [`b96179f`](https://github.com/Shopify/hydrogen/commit/b96179fdf960da52332a981e29a742b677826834) Thanks [@jplhomer](https://github.com/jplhomer)! - Ensure ProductSeo knows how to handle `featuredImage = null`
 
-- 11426471: Fix issue with components that take in the `as` prop not validating other props when a component is passed to `as`.
-- b96179fd: Ensure ProductSeo knows how to handle `featuredImage = null`
-- 2e487b7e: Switch to using Changesets for changelogs.
-- 2d8ab7e2: Hydrogen docs: Preloaded queries and query timing
+* [#774](https://github.com/Shopify/hydrogen/pull/774) [`052f148`](https://github.com/Shopify/hydrogen/commit/052f148e0d33029cdc2540afa5ead32825962f3a) Thanks [@frandiox](https://github.com/frandiox)! - Fix internal url usage in platforms like Vercel, which already provides protocol and host in `request.url`.
 
-### Fixed
+- [#744](https://github.com/Shopify/hydrogen/pull/744) [`2e487b7`](https://github.com/Shopify/hydrogen/commit/2e487b7e70fe0572538dc2a24b6b6b36ba9fc804) Thanks [@jplhomer](https://github.com/jplhomer)! - Switch to using Changesets for changelogs.
+
+* [#775](https://github.com/Shopify/hydrogen/pull/775) [`d5b7ee1`](https://github.com/Shopify/hydrogen/commit/d5b7ee1d8312f64922d1f78afc82ec5ad4a3f457) Thanks [@cartogram](https://github.com/cartogram)! - In cases where the `initialVariantId` is missing on the `<ProductProvider />`, the `selectedVariantId` in the returned `object` from `useProduct()` will now use the first available variant _or_ the first variant (if non are available).
+
+- [#773](https://github.com/Shopify/hydrogen/pull/773) [`b6a053e`](https://github.com/Shopify/hydrogen/commit/b6a053e774da443b5692dec51546f5558b3018ad) Thanks [@frandiox](https://github.com/frandiox)! - Fix server bundle name in cases where CSS or images are imported in server components.
+
+* [#764](https://github.com/Shopify/hydrogen/pull/764) [`5e55da4`](https://github.com/Shopify/hydrogen/commit/5e55da4090692369ff6a3d57fbc6d29124bdf2e9) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Preload queries breaking fetch on Cloudfare [#764](https://github.com/Shopify/hydrogen/pull/764)
+
+- [#763](https://github.com/Shopify/hydrogen/pull/763) [`ea2857a`](https://github.com/Shopify/hydrogen/commit/ea2857a515866f37f392bca5da8be1139c055a64) Thanks [@frehner](https://github.com/frehner)! - Client-side apps now have React's `StrictMode` component wrapping the whole app, with an option to disable it. If you do turn it off, it is recommended that you still include the `StrictMode` component at as high of a level as possible in your React tree.
+
+  See also [React 17's docs](https://reactjs.org/docs/strict-mode.html) on `StrictMode`, and [React 18's updates](https://github.com/reactwg/react-18/discussions/19) to `StrictMode`.
 
-- Make `featuredImage` optional and handle it in <Seo />
+* [#747](https://github.com/Shopify/hydrogen/pull/747) [`2d8ab7e`](https://github.com/Shopify/hydrogen/commit/2d8ab7e2a8038ff8b43e6e9398e0bb2da72220a0) Thanks [@mcvinci](https://github.com/mcvinci)! - Hydrogen docs: Preloaded queries and query timing
 
 ## [0.11.0] - 2022-02-24
 

package/dist/esnext/components/AddToCartButton/AddToCartButton.client.js

@@ -6,12 +6,12 @@ import { useProduct } from '../ProductProvider';
  * It must be a descendent of the `CartProvider` component.
  */
 export function AddToCartButton(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b;
     const [addingItem, setAddingItem] = useState(false);
     const { variantId: explicitVariantId, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
     const { status, id, cartCreate, linesAdd } = useCart();
     const product = useProduct();
-    const variantId = (_h = (_e = (_b = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : (_a = product === null || product === void 0 ? void 0 : product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : (_d = (_c = product === null || product === void 0 ? void 0 : product.variants) === null || _c === void 0 ? void 0 : _c.find((variant) => variant.availableForSale)) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : (_g = (_f = product === null || product === void 0 ? void 0 : product.variants) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.id) !== null && _h !== void 0 ? _h : '';
+    const variantId = (_b = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : (_a = product === null || product === void 0 ? void 0 : product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
     const disabled = explicitVariantId === null ||
         variantId === '' ||
         (product === null || product === void 0 ? void 0 : product.selectedVariant) === null ||

package/dist/esnext/entry-client.js

@@ -1,19 +1,22 @@
-import React, { Suspense, useState } from 'react';
-// @ts-ignore
+import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
+// @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
 import { hydrateRoot } from 'react-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
 import { ServerStateProvider } from './client';
 import { Router } from './foundation/Router/Router.client';
-const renderHydrogen = async (ClientWrapper) => {
+const renderHydrogen = async (ClientWrapper, config) => {
     const root = document.getElementById('root');
     if (!root) {
         console.error(`Could not find a root element <div id="root"></div> to render.`);
         return;
     }
-    hydrateRoot(root, React.createElement(ErrorBoundary, { FallbackComponent: Error },
-        React.createElement(Suspense, { fallback: null },
-            React.createElement(Content, { clientWrapper: ClientWrapper }))));
+    // default to StrictMode on, unless explicitly turned off
+    const RootComponent = (config === null || config === void 0 ? void 0 : config.strictMode) !== false ? StrictMode : Fragment;
+    hydrateRoot(root, React.createElement(RootComponent, null,
+        React.createElement(ErrorBoundary, { FallbackComponent: Error },
+            React.createElement(Suspense, { fallback: null },
+                React.createElement(Content, { clientWrapper: ClientWrapper })))));
 };
 export default renderHydrogen;
 function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -96,7 +96,14 @@ export function preloadRequestCacheData(request, preloadQueries) {
                     promise = preloadQuery.fetcher().then((r) => {
                         data = { data: r };
                         collectQueryTimings(request, preloadQuery.key, 'resolved', getTime() - startApiTime);
-                    }, (e) => (data = { error: e }));
+                    }, (e) => {
+                        // The preload query failed for some reason:
+                        // On Cloudfare, this happens when a Cache item has expired at max-age
+                        //
+                        // We need to remove this entry from cache so that render cycle will retry on its own
+                        cache.delete(cacheKey);
+                        collectQueryTimings(request, preloadQuery.key, 'expired', getTime() - startApiTime);
+                    });
                 }
                 return promise;
             });

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

@@ -11,9 +11,10 @@ export interface HydrogenUseQueryOptions {
     preload?: PreloadOptions;
 }
 /**
- * The `useQuery` hook is a wrapper around Suspense calls and
- * global runtime's Cache if it exists.
- * It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
+ * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
+ * hook to call any third-party APIs.
  */
 export declare function useQuery<T>(
 /** A string or array to uniquely identify the current query. */
@@ -23,7 +24,9 @@ queryFn: () => Promise<T>,
 /** The options to manage the cache behavior of the sub-request. */
 queryOptions?: HydrogenUseQueryOptions): {
     data?: undefined;
-    error: Response;
+    error: Response; /**
+     * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
+     */
 } | {
     data: T;
     error?: undefined;

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

@@ -3,9 +3,10 @@ import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromC
 import { runDelayedFunction } from '../../framework/runtime';
 import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
 /**
- * The `useQuery` hook is a wrapper around Suspense calls and
- * global runtime's Cache if it exists.
- * It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
+ * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
+ * hook to call any third-party APIs.
  */
 export function useQuery(
 /** A string or array to uniquely identify the current query. */

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

@@ -100,7 +100,10 @@ function saveToPreloadAllPreload(query) {
  */
 function getUrlFromNodeRequest(request) {
     var _a;
+    const url = (_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url;
+    if (url && !url.startsWith('/'))
+        return url;
     // TODO: Find out how to determine https from `request` object without forwarded proto
     const secure = request.headers['x-forwarded-proto'] === 'https';
-    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
+    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + url}`).toString();
 }

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

@@ -43,7 +43,7 @@ export default () => {
         },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
-                const [[key, value]] = Object.entries(bundle);
+                const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);
                 delete bundle[key];
                 value.fileName = SSR_BUNDLE_NAME;
                 bundle[SSR_BUNDLE_NAME] = value;

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

@@ -4,7 +4,7 @@ import { GraphQLConnection } from '../../types';
  * The `useProductOptions` hook returns an object that enables you to keep track of the
  * selected variant and/or selling plan state, as well as callbacks for modifying the state.
  */
-export declare function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId, }: {
+export declare function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId: explicitVariantId, }: {
     /** The product's `VariantConnection`. */
     variants?: GraphQLConnection<Variant>;
     /** The product's `SellingPlanGroups`. */

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

@@ -5,18 +5,21 @@ import { getOptions, getSelectedVariant } from './helpers';
  * The `useProductOptions` hook returns an object that enables you to keep track of the
  * selected variant and/or selling plan state, as well as callbacks for modifying the state.
  */
-export function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId, }) {
+export function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId: explicitVariantId, }) {
     // The flattened variants
     const variants = useMemo(() => (variantsConnection ? flattenConnection(variantsConnection) : []), [variantsConnection]);
     // All the options available for a product, based on all the variants
     const options = useMemo(() => getOptions(variants), [variants]);
+    const initialVariantId = explicitVariantId === null
+        ? explicitVariantId
+        : variants.find((variant) => variant.id === explicitVariantId) ||
+            variants.find((variant) => variant.availableForSale) ||
+            variants[0];
     /**
      * Track the selectedVariant within the hook. If `initialVariantId`
      * is passed, use that as an initial value.
      */
-    const [selectedVariant, setSelectedVariant] = useState(initialVariantId == null
-        ? initialVariantId
-        : variants.find((variant) => variant.id === initialVariantId));
+    const [selectedVariant, setSelectedVariant] = useState(initialVariantId);
     /**
      * Track the selectedOptions within the hook. If a `initialVariantId`
      * is passed, use that to select initial options.
@@ -34,10 +37,7 @@ export function useProductOptions({ variants: variantsConnection, sellingPlanGro
      * values.
      */
     useEffect(() => {
-        const selectedVariant = initialVariantId == null
-            ? initialVariantId
-            : variants.find((variant) => variant.id === initialVariantId);
-        setSelectedVariant(selectedVariant);
+        setSelectedVariant(initialVariantId);
         const selectedOptions = (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.selectedOptions)
             ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
                 memo[optionSet.name] = optionSet.value;

package/dist/esnext/types.d.ts

@@ -41,8 +41,10 @@ export declare type ServerHandlerConfig = {
 };
 export declare type ClientHandlerConfig = {
     shopifyConfig: ShopifyConfig;
+    /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
+    strictMode?: boolean;
 };
-export declare type ClientHandler = (App: any, config: ClientHandlerConfig) => Promise<void>;
+export declare type ClientHandler = (App: React.ElementType, config: ClientHandlerConfig) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
         node: T;

package/dist/esnext/utilities/log/log-query-timeline.d.ts

@@ -1,7 +1,7 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
-export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
+export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload' | 'expired';
 export declare type QueryTiming = {
     name: string;
     timingType: TimingType;

package/dist/esnext/utilities/log/log-query-timeline.js

@@ -9,6 +9,7 @@ const TIMING_MAPPING = {
     rendered: 'Rendered',
     resolved: 'Resolved',
     preload: 'Preload',
+    expired: 'Expired',
 };
 export function collectQueryTimings(request, queryKey, timingType, duration) {
     request.ctx.queryTimings.push({
@@ -31,7 +32,6 @@ export function logQueryTimings(type, request) {
         const detectMultipleDataLoad = {};
         let suspenseWaterfallDetectedCount = 0;
         queryList.forEach((query, index) => {
-            var _a;
             if (query.timingType === 'requested' || query.timingType === 'preload') {
                 detectSuspenseWaterfall[query.name] = true;
             }
@@ -44,8 +44,9 @@ export function logQueryTimings(type, request) {
                     : 1;
             }
             const loadColor = query.timingType === 'preload' ? green : color;
-            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
-                ? ` (Took ${(_a = query.duration) === null || _a === void 0 ? void 0 : _a.toFixed(2)}ms)`
+            const duration = query.duration;
+            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved' || query.timingType === 'expired'
+                ? ` (Took ${duration === null || duration === void 0 ? void 0 : duration.toFixed(2)}ms)`
                 : ''}`));
             // SSR + RSC render path generates 2 `load` and `render` for each query
             // We want to avoid falsely identifying a suspense waterfall near the end

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.11.0";
+export declare const LIB_VERSION = "0.11.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.11.0';
+export const LIB_VERSION = '0.11.1';

package/dist/node/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -121,7 +121,14 @@ function preloadRequestCacheData(request, preloadQueries) {
                     promise = preloadQuery.fetcher().then((r) => {
                         data = { data: r };
                         (0, log_1.collectQueryTimings)(request, preloadQuery.key, 'resolved', (0, timing_1.getTime)() - startApiTime);
-                    }, (e) => (data = { error: e }));
+                    }, (e) => {
+                        // The preload query failed for some reason:
+                        // On Cloudfare, this happens when a Cache item has expired at max-age
+                        //
+                        // We need to remove this entry from cache so that render cycle will retry on its own
+                        cache.delete(cacheKey);
+                        (0, log_1.collectQueryTimings)(request, preloadQuery.key, 'expired', (0, timing_1.getTime)() - startApiTime);
+                    });
                 }
                 return promise;
             });

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

@@ -104,7 +104,10 @@ function saveToPreloadAllPreload(query) {
  */
 function getUrlFromNodeRequest(request) {
     var _a;
+    const url = (_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url;
+    if (url && !url.startsWith('/'))
+        return url;
     // TODO: Find out how to determine https from `request` object without forwarded proto
     const secure = request.headers['x-forwarded-proto'] === 'https';
-    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
+    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + url}`).toString();
 }

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

@@ -48,7 +48,7 @@ exports.default = () => {
         },
         generateBundle(options, bundle) {
             if (config.build.ssr) {
-                const [[key, value]] = Object.entries(bundle);
+                const [key, value] = Object.entries(bundle).find(([, value]) => value.type === 'chunk' && value.isEntry);
                 delete bundle[key];
                 value.fileName = SSR_BUNDLE_NAME;
                 bundle[SSR_BUNDLE_NAME] = value;

package/dist/node/types.d.ts

@@ -41,8 +41,10 @@ export declare type ServerHandlerConfig = {
 };
 export declare type ClientHandlerConfig = {
     shopifyConfig: ShopifyConfig;
+    /** React's StrictMode is on by default for your client side app; if you want to turn it off (not recommended), you can pass `false` */
+    strictMode?: boolean;
 };
-export declare type ClientHandler = (App: any, config: ClientHandlerConfig) => Promise<void>;
+export declare type ClientHandler = (App: React.ElementType, config: ClientHandlerConfig) => Promise<void>;
 export interface GraphQLConnection<T> {
     edges?: {
         node: T;

package/dist/node/utilities/log/log-query-timeline.d.ts

@@ -1,7 +1,7 @@
 import { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.server';
 import { QueryKey } from '../../types';
 import type { RenderType } from './log';
-export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
+export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload' | 'expired';
 export declare type QueryTiming = {
     name: string;
     timingType: TimingType;

package/dist/node/utilities/log/log-query-timeline.js

@@ -12,6 +12,7 @@ const TIMING_MAPPING = {
     rendered: 'Rendered',
     resolved: 'Resolved',
     preload: 'Preload',
+    expired: 'Expired',
 };
 function collectQueryTimings(request, queryKey, timingType, duration) {
     request.ctx.queryTimings.push({
@@ -35,7 +36,6 @@ function logQueryTimings(type, request) {
         const detectMultipleDataLoad = {};
         let suspenseWaterfallDetectedCount = 0;
         queryList.forEach((query, index) => {
-            var _a;
             if (query.timingType === 'requested' || query.timingType === 'preload') {
                 detectSuspenseWaterfall[query.name] = true;
             }
@@ -48,8 +48,9 @@ function logQueryTimings(type, request) {
                     : 1;
             }
             const loadColor = query.timingType === 'preload' ? kolorist_1.green : color;
-            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved'
-                ? ` (Took ${(_a = query.duration) === null || _a === void 0 ? void 0 : _a.toFixed(2)}ms)`
+            const duration = query.duration;
+            log.debug(color(`│ ${`${(query.timestamp - requestStartTime).toFixed(2)}ms`.padEnd(10)} ${loadColor(TIMING_MAPPING[query.timingType].padEnd(10))} ${query.name}${query.timingType === 'resolved' || query.timingType === 'expired'
+                ? ` (Took ${duration === null || duration === void 0 ? void 0 : duration.toFixed(2)}ms)`
                 : ''}`));
             // SSR + RSC render path generates 2 `load` and `render` for each query
             // We want to avoid falsely identifying a suspense waterfall near the end

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.11.1-experimental.1",
+  "version": "0.11.1",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",