@shopify/hydrogen 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # Changelog
 
+## 0.19.0
+
+### Minor Changes
+
+- [#1053](https://github.com/Shopify/hydrogen/pull/1053) [`c407f304`](https://github.com/Shopify/hydrogen/commit/c407f304352e0b781fa8a729674153ee9b971977) Thanks [@blittle](https://github.com/blittle)! - The selected country is now persisted a part of the session. This means that the page can be refreshed and the country will still be selected. There are a few breaking changes:
+
+  1. `useCountry()` hook now only returns the currently selected country. The `setCountry()` method has been removed.
+  2. The `useCountry()` hook expects a `countryCode` and `countryName` to be a part of the user session.
+  3. The example `/countries` API route has been updated to accept a `POST` request to update the selected country. The CountrySelector components need to be updated to use that route.
+
+  ```diff
+  // src/routes/countries.server.jsx
+
+  -export async function api(request, {queryShop}) {
+  +export async function api(request, {queryShop, session}) {
+  +  if (request.method === 'POST') {
+  +    const {isoCode, name} = await request.json();
+  +
+  +    await session.set('countryCode', isoCode);
+  +    await session.set('countryName', name);
+  +
+  +    return 'success';
+  +  }
+
+     const {
+       data: {
+         localization: {availableCountries},
+       },
+     } = await queryShop({
+        query: QUERY,
+     });
+     return availableCountries.sort((a, b) => a.name.localeCompare(b.name));
+  }
+  ```
+
+  ```diff
+  // src/components/CountrySelector.client.jsx
+
+  export default function CountrySelector() {
+    const [listboxOpen, setListboxOpen] = useState(false);
+
+  - const [selectedCountry, setSelectedCountry] = useCountry();
+  + const [selectedCountry] = useCountry();
+
+  + const setSelectedCountry = useCallback(
+  +   ({isoCode, name}) => {
+  +     fetch(`/countries`, {
+  +       body: JSON.stringify({isoCode, name}),
+  +       method: 'POST',
+  +     })
+  +       .then(() => {
+  +         window.location.reload();
+  +       })
+  +       .catch((error) => {
+  +         console.error(error);
+  +       });
+  +   },
+  +   [],
+  + );
+
+    return (
+        ...
+    );
+  }
+  ```
+
+  4. Each server component page that depends on the selected country pulls it from the session with `useSession()`, rather than `serverProps`.
+
+  ```diff
+  // src/routes/products/[handle].server.jsx
+  + import { useSession } from '@shopify/hydrogen';
+
+  - export default function Product({country = {isoCode: 'US'}}) {
+  + export default function Product() {
+      const {handle} = useRouteParams();
+  +   const {countryCode = 'US'} = useSession();
+      ...
+    }
+  ```
+
+### Patch Changes
+
+- [#1264](https://github.com/Shopify/hydrogen/pull/1264) [`dc966e86`](https://github.com/Shopify/hydrogen/commit/dc966e86b35ffc8a41d8d62e129884926b8db8bc) Thanks [@arlyxiao](https://github.com/arlyxiao)! - Add more bots into user agents
+
+* [#1245](https://github.com/Shopify/hydrogen/pull/1245) [`07866e82`](https://github.com/Shopify/hydrogen/commit/07866e8277dfa3195ef1896b16a58df495a9155f) Thanks [@0x15f](https://github.com/0x15f)! - [#1245](https://github.com/Shopify/hydrogen/pull/1245) - Support optional `priority` prop on Image component. When `true`, the image will be eagerly loaded. Defaults to `false`.
+
+- [#1272](https://github.com/Shopify/hydrogen/pull/1272) [`c1888652`](https://github.com/Shopify/hydrogen/commit/c188865255c5f20d9db285e375c57127030e23e6) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Remove flight chunk
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/esnext/components/Image/Image.d.ts

@@ -11,6 +11,12 @@ export interface BaseImageProps {
      * then the value can be a property of the `loaderOptions` object (for example, `{scale: 2}`).
      */
     loaderOptions?: ImageLoaderOptions['options'];
+    /**
+     * Whether the image will be immediately loaded. Defaults to `false`. This prop should be used only when
+     * the image is visible above the fold. For more information, refer to the
+     * [Image Embed element's loading attribute](https://developer.mozilla.org/enUS/docs/Web/HTML/Element/img#attr-loading).
+     */
+    priority?: boolean;
 }
 interface MediaImagePropsBase extends BaseImageProps {
     /** An object with fields that correspond to the Storefront API's

package/dist/esnext/components/Image/Image.js

@@ -6,7 +6,7 @@ import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities'
  */
 export function Image(props) {
     var _a, _b, _c, _d;
-    const { data, options, src, id, alt, width, height, loader, loaderOptions, ...passthroughProps } = props;
+    const { data, options, src, id, alt, width, height, loader, loaderOptions, priority, ...passthroughProps } = props;
     if (!data && !src) {
         throw new Error('Image component: requires either an `data` or `src` prop.');
     }
@@ -21,6 +21,7 @@ export function Image(props) {
             loaderOptions,
             id,
             alt,
+            priority,
         })
         : {
             src,
@@ -29,16 +30,17 @@ export function Image(props) {
             width,
             height,
             loader,
+            priority,
             loaderOptions: { width, height, ...loaderOptions },
         };
     const srcPath = imgProps.loader
         ? imgProps.loader({ src: imgProps.src, options: imgProps.loaderOptions })
         : imgProps.src;
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: (_a = imgProps.id) !== null && _a !== void 0 ? _a : '', loading: "lazy", alt: (_b = imgProps.alt) !== null && _b !== void 0 ? _b : '', ...passthroughProps, src: srcPath, width: (_c = imgProps.width) !== null && _c !== void 0 ? _c : undefined, height: (_d = imgProps.height) !== null && _d !== void 0 ? _d : undefined }));
+    return (React.createElement("img", { id: (_a = imgProps.id) !== null && _a !== void 0 ? _a : '', loading: imgProps.priority ? 'eager' : 'lazy', alt: (_b = imgProps.alt) !== null && _b !== void 0 ? _b : '', ...passthroughProps, src: srcPath, width: (_c = imgProps.width) !== null && _c !== void 0 ? _c : undefined, height: (_d = imgProps.height) !== null && _d !== void 0 ? _d : undefined }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-function convertShopifyImageData({ data, options, loader, loaderOptions, id: propId, alt, }) {
+function convertShopifyImageData({ data, options, loader, priority, loaderOptions, id: propId, alt, }) {
     const { url: src, altText, id } = data;
     if (!src) {
         throw new Error(`<Image/> requires 'data.url' when using the 'data' prop`);
@@ -52,5 +54,6 @@ function convertShopifyImageData({ data, options, loader, loaderOptions, id: pro
         height,
         loader: loader ? loader : shopifyImageLoader,
         loaderOptions: { ...options, ...loaderOptions },
+        priority,
     };
 }

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,18 +1,5 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React from 'react';
 import { LocalizationContext } from './LocalizationContext.client';
-import { useServerProps } from '../../foundation/useServerProps';
 export default function LocalizationClientProvider({ localization, children, }) {
-    const { setServerProps } = useServerProps();
-    const [country, setCountry] = useState(localization.country);
-    const setter = useCallback((country) => {
-        setCountry(country);
-        setServerProps('country', country);
-    }, [setServerProps]);
-    const contextValue = useMemo(() => {
-        return {
-            country,
-            setCountry: setter,
-        };
-    }, [country, setter]);
-    return (React.createElement(LocalizationContext.Provider, { value: contextValue }, children));
+    return (React.createElement(LocalizationContext.Provider, { value: localization }, children));
 }

package/dist/esnext/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -2,6 +2,5 @@ import type { LocalizationQuery } from './LocalizationProvider.server';
 export declare type Localization = LocalizationQuery['localization'];
 export interface LocalizationContextValue {
     country?: Localization['country'];
-    setCountry(country: Localization['country']): void;
 }
 export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { PreloadOptions } from '../../types';
-import { Country, Currency } from '../../storefront-api-types';
+import { Country } from '../../storefront-api-types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
@@ -28,10 +28,6 @@ export declare type LocalizationQuery = {
     } & {
         country: {
             __typename?: 'Country';
-        } & Pick<Country, 'isoCode' | 'name'> & {
-            currency: {
-                __typename?: 'Currency';
-            } & Pick<Currency, 'isoCode'>;
-        };
+        } & Pick<Country, 'isoCode' | 'name'>;
     };
 };

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -3,6 +3,7 @@ import LocalizationClientProvider from './LocalizationClientProvider.client';
 import { useShop } from '../../foundation/useShop';
 import { useShopQuery } from '../../hooks/useShopQuery';
 import { CacheDays } from '../../framework/CachingStrategy';
+import { useSession } from '../../foundation/useSession/useSession';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
@@ -14,13 +15,21 @@ import { CacheDays } from '../../framework/CachingStrategy';
  */
 export function LocalizationProvider(props) {
     const { languageCode } = useShop();
+    const { countryCode, countryName } = useSession();
     const { data: { localization }, } = useShopQuery({
         query,
         variables: { language: languageCode },
         cache: CacheDays(),
         preload: props.preload,
     });
-    return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
+    return (React.createElement(LocalizationClientProvider, { localization: countryCode
+            ? {
+                country: {
+                    name: countryName,
+                    isoCode: countryCode,
+                },
+            }
+            : localization }, props.children));
 }
 const query = `
 query Localization($language: LanguageCode)
@@ -29,9 +38,6 @@ query Localization($language: LanguageCode)
     country {
       isoCode
       name
-      currency {
-        isoCode
-      }
     }
   }
 }

package/dist/esnext/entry-server.js

@@ -108,7 +108,7 @@ function getApiRoute(url, routes) {
  */
 async function render(url, { App, request, template, componentResponse, nonce, log }) {
     const state = { pathname: url.pathname, search: url.search };
-    const { AppSSR, rscReadable } = buildAppSSR({
+    const { AppSSR } = buildAppSSR({
         App,
         log,
         state,
@@ -120,10 +120,7 @@ async function render(url, { App, request, template, componentResponse, nonce, l
         componentResponse.writeHead({ status: 500 });
         return template;
     }
-    let [html, flight] = await Promise.all([
-        renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell),
-        bufferReadableStream(rscReadable.getReader()).catch(() => null),
-    ]);
+    let html = await renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell);
     const { headers, status, statusText } = getResponseOptions(componentResponse);
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
@@ -141,13 +138,6 @@ async function render(url, { App, request, template, componentResponse, nonce, l
     }
     headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
     html = applyHtmlHead(html, request.ctx.head, template);
-    if (flight) {
-        html = html.replace('</body>', () => `${flightContainer({
-            init: true,
-            nonce,
-            chunk: flight,
-        })}</body>`);
-    }
     postRequestTasks('ssr', status, request, componentResponse);
     return new Response(html, {
         status,
@@ -174,13 +164,7 @@ async function stream(url, { App, request, response, componentResponse, template
     const rscToScriptTagReadable = new ReadableStream({
         start(controller) {
             log.trace('rsc start chunks');
-            let init = true;
-            const encoder = new TextEncoder();
-            bufferReadableStream(rscReadable.getReader(), (chunk) => {
-                const scriptTag = flightContainer({ init, chunk, nonce });
-                controller.enqueue(encoder.encode(scriptTag));
-                init = false;
-            }).then(() => {
+            bufferReadableStream(rscReadable.getReader()).then(() => {
                 log.trace('rsc finish chunks');
                 return controller.close();
             });
@@ -528,21 +512,6 @@ async function createNodeWriter() {
     const { PassThrough } = await import(streamImport);
     return new PassThrough();
 }
-function flightContainer({ init, chunk, nonce, }) {
-    let script = `<script${nonce ? ` nonce="${nonce}"` : ''}>`;
-    if (init) {
-        script += 'var __flight=[];';
-    }
-    if (chunk) {
-        const normalizedChunk = chunk
-            // 1. Duplicate the escape char (\) for already escaped characters (e.g. \n or \").
-            .replace(/\\/g, String.raw `\\`)
-            // 2. Escape existing backticks to allow wrapping the whole thing in `...`.
-            .replace(/`/g, String.raw `\``);
-        script += `__flight.push(\`${normalizedChunk}\`)`;
-    }
-    return script + '</script>';
-}
 function postRequestTasks(type, status, request, componentResponse) {
     logServerResponse(type, request, status);
     logCacheControlHeaders(type, request, componentResponse);

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.js

@@ -31,6 +31,8 @@ export function ServerStateProvider({ serverState, setServerState, children, })
         else {
             newValue = input;
         }
+        if (!newValue)
+            return { ...prev };
         if (__DEV__) {
             const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
             if (privateProp) {

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

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

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

@@ -3,6 +3,6 @@ import { useServerRequest } from '../ServerRequestProvider';
 export const useSession = function () {
     var _a;
     const request = useServerRequest();
-    const session = (_a = request.ctx.session) === null || _a === void 0 ? void 0 : _a.get();
+    const session = ((_a = request.ctx.session) === null || _a === void 0 ? void 0 : _a.get()) || {};
     return session;
 };

package/dist/esnext/framework/Hydration/rsc.d.ts

@@ -1,6 +1,3 @@
-declare global {
-    var __flight: Array<string>;
-}
 /**
  * Much of this is borrowed from React's demo implementation:
  * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js

package/dist/esnext/framework/Hydration/rsc.js

@@ -7,26 +7,6 @@ import { createFromFetch, createFromReadableStream,
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';
 import { RSC_PATHNAME } from '../../constants';
 let rscReader;
-if (globalThis.__flight && __flight.length > 0) {
-    const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
-    try {
-        rscReader = new ReadableStream({
-            start(controller) {
-                const encoder = new TextEncoder();
-                const write = (chunk) => {
-                    controller.enqueue(encoder.encode(chunk));
-                    return 0;
-                };
-                __flight.forEach(write);
-                __flight.push = write;
-                contentLoaded.then(() => controller.close());
-            },
-        });
-    }
-    catch (_) {
-        // Old browser, will try a new hydration request later
-    }
-}
 function createResponseCache() {
     return new Map();
 }

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

@@ -4,14 +4,4 @@
  */
 export declare function useCountry(): (({
     __typename?: "Country" | undefined;
-} & Pick<import("../../storefront-api-types").Country, "name" | "isoCode"> & {
-    currency: {
-        __typename?: "Currency" | undefined;
-    } & Pick<import("../../storefront-api-types").Currency, "isoCode">;
-}) | ((country: {
-    __typename?: "Country" | undefined;
-} & Pick<import("../../storefront-api-types").Country, "name" | "isoCode"> & {
-    currency: {
-        __typename?: "Currency" | undefined;
-    } & Pick<import("../../storefront-api-types").Currency, "isoCode">;
-}) => void) | undefined)[];
+} & Pick<import("../../storefront-api-types").Country, "name" | "isoCode">) | undefined)[];

package/dist/esnext/hooks/useCountry/useCountry.js

@@ -13,5 +13,5 @@ function useLocalization() {
  */
 export function useCountry() {
     const context = useLocalization();
-    return [context.country, context.setCountry];
+    return [context.country];
 }

package/dist/esnext/node.d.ts

@@ -0,0 +1 @@
+export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage';

package/dist/esnext/node.js

@@ -0,0 +1 @@
+export { FileSessionStorage } from './foundation/FileSessionStorage/FileSessionStorage';

package/dist/esnext/utilities/bot-ua.js

@@ -8,6 +8,10 @@ const botUserAgents = [
     'applebot',
     'Baiduspider',
     'baiduspider',
+    'Bytespider',
+    '360Spider',
+    'PetalBot',
+    'Yisouspider',
     'bingbot',
     'Bingbot',
     'BingPreview',

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.18.0";
+export declare const LIB_VERSION = "0.19.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.18.0';
+export const LIB_VERSION = '0.19.0';

package/dist/node/entry-server.js

@@ -135,7 +135,7 @@ function getApiRoute(url, routes) {
  */
 async function render(url, { App, request, template, componentResponse, nonce, log }) {
     const state = { pathname: url.pathname, search: url.search };
-    const { AppSSR, rscReadable } = buildAppSSR({
+    const { AppSSR } = buildAppSSR({
         App,
         log,
         state,
@@ -147,10 +147,7 @@ async function render(url, { App, request, template, componentResponse, nonce, l
         componentResponse.writeHead({ status: 500 });
         return template;
     }
-    let [html, flight] = await Promise.all([
-        renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell),
-        (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader()).catch(() => null),
-    ]);
+    let html = await renderToBufferedString(AppSSR, { log, nonce }).catch(onErrorShell);
     const { headers, status, statusText } = getResponseOptions(componentResponse);
     /**
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
@@ -168,13 +165,6 @@ async function render(url, { App, request, template, componentResponse, nonce, l
     }
     headers.set(CONTENT_TYPE, HTML_CONTENT_TYPE);
     html = (0, Html_1.applyHtmlHead)(html, request.ctx.head, template);
-    if (flight) {
-        html = html.replace('</body>', () => `${flightContainer({
-            init: true,
-            nonce,
-            chunk: flight,
-        })}</body>`);
-    }
     postRequestTasks('ssr', status, request, componentResponse);
     return new Response(html, {
         status,
@@ -201,13 +191,7 @@ async function stream(url, { App, request, response, componentResponse, template
     const rscToScriptTagReadable = new ReadableStream({
         start(controller) {
             log.trace('rsc start chunks');
-            let init = true;
-            const encoder = new TextEncoder();
-            (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader(), (chunk) => {
-                const scriptTag = flightContainer({ init, chunk, nonce });
-                controller.enqueue(encoder.encode(scriptTag));
-                init = false;
-            }).then(() => {
+            (0, streaming_server_1.bufferReadableStream)(rscReadable.getReader()).then(() => {
                 log.trace('rsc finish chunks');
                 return controller.close();
             });
@@ -555,21 +539,6 @@ async function createNodeWriter() {
     const { PassThrough } = await Promise.resolve().then(() => __importStar(require(streamImport)));
     return new PassThrough();
 }
-function flightContainer({ init, chunk, nonce, }) {
-    let script = `<script${nonce ? ` nonce="${nonce}"` : ''}>`;
-    if (init) {
-        script += 'var __flight=[];';
-    }
-    if (chunk) {
-        const normalizedChunk = chunk
-            // 1. Duplicate the escape char (\) for already escaped characters (e.g. \n or \").
-            .replace(/\\/g, String.raw `\\`)
-            // 2. Escape existing backticks to allow wrapping the whole thing in `...`.
-            .replace(/`/g, String.raw `\``);
-        script += `__flight.push(\`${normalizedChunk}\`)`;
-    }
-    return script + '</script>';
-}
 function postRequestTasks(type, status, request, componentResponse) {
     (0, log_1.logServerResponse)(type, request, status);
     (0, log_1.logCacheControlHeaders)(type, request, componentResponse);

package/dist/node/framework/Hydration/rsc.d.ts

@@ -1,6 +1,3 @@
-declare global {
-    var __flight: Array<string>;
-}
 /**
  * Much of this is borrowed from React's demo implementation:
  * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js

package/dist/node/framework/Hydration/rsc.js

@@ -8,26 +8,6 @@ const react_1 = require("react");
 const react_server_dom_vite_1 = require("@shopify/hydrogen/vendor/react-server-dom-vite");
 const constants_1 = require("../../constants");
 let rscReader;
-if (globalThis.__flight && __flight.length > 0) {
-    const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
-    try {
-        rscReader = new ReadableStream({
-            start(controller) {
-                const encoder = new TextEncoder();
-                const write = (chunk) => {
-                    controller.enqueue(encoder.encode(chunk));
-                    return 0;
-                };
-                __flight.forEach(write);
-                __flight.push = write;
-                contentLoaded.then(() => controller.close());
-            },
-        });
-    }
-    catch (_) {
-        // Old browser, will try a new hydration request later
-    }
-}
 function createResponseCache() {
     return new Map();
 }

package/dist/node/utilities/bot-ua.js

@@ -11,6 +11,10 @@ const botUserAgents = [
     'applebot',
     'Baiduspider',
     'baiduspider',
+    'Bytespider',
+    '360Spider',
+    'PetalBot',
+    'Yisouspider',
     'bingbot',
     'Bingbot',
     'BingPreview',

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.18.0";
+export declare const LIB_VERSION = "0.19.0";

package/dist/node/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '0.18.0';
+exports.LIB_VERSION = '0.19.0';

package/package.json

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