@shopify/hydrogen 2023.10.2 → 2023.10.3

package/dist/development/index.cjs

@@ -457,7 +457,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.10.2";
+var LIB_VERSION = "2023.10.3";
 
 // src/utils/graphql.ts
 function minifyQuery(string) {
@@ -1435,11 +1435,12 @@ function Pagination({
       pageInfo: {
         endCursor,
         hasPreviousPage,
+        hasNextPage,
         startCursor
       },
       nodes
     }),
-    [endCursor, hasPreviousPage, startCursor, nodes]
+    [endCursor, hasNextPage, hasPreviousPage, startCursor, nodes]
   );
   const NextLink = react.useMemo(
     () => react.forwardRef(function NextLink2(props, ref) {
@@ -1511,17 +1512,52 @@ function usePagination(connection) {
   const params = new URLSearchParams(search);
   const direction = params.get("direction");
   const isPrevious = direction === "previous";
-  const [nodes, setNodes] = react.useState(hydrogenReact.flattenConnection(connection));
-  const [currentPageInfo, setCurrentPageInfo] = react.useState({
-    startCursor: connection.pageInfo.startCursor,
-    endCursor: connection.pageInfo.endCursor,
-    hasPreviousPage: connection.pageInfo.hasPreviousPage,
-    hasNextPage: connection.pageInfo.hasNextPage
-  });
+  const nodes = react.useMemo(() => {
+    if (!globalThis?.window?.__hydrogenHydrated || !state || !state?.nodes) {
+      return hydrogenReact.flattenConnection(connection);
+    }
+    if (isPrevious) {
+      return [...hydrogenReact.flattenConnection(connection), ...state.nodes];
+    } else {
+      return [...state.nodes, ...hydrogenReact.flattenConnection(connection)];
+    }
+  }, [state, connection]);
+  const currentPageInfo = react.useMemo(() => {
+    const hydrogenHydrated = globalThis?.window?.__hydrogenHydrated;
+    let pageStartCursor = !hydrogenHydrated || state?.pageInfo?.startCursor === void 0 ? connection.pageInfo.startCursor : state.pageInfo.startCursor;
+    let pageEndCursor = !hydrogenHydrated || state?.pageInfo?.endCursor === void 0 ? connection.pageInfo.endCursor : state.pageInfo.endCursor;
+    let previousPageExists = !hydrogenHydrated || state?.pageInfo?.hasPreviousPage === void 0 ? connection.pageInfo.hasPreviousPage : state.pageInfo.hasPreviousPage;
+    let nextPageExists = !hydrogenHydrated || state?.pageInfo?.hasNextPage === void 0 ? connection.pageInfo.hasNextPage : state.pageInfo.hasNextPage;
+    if (state?.nodes) {
+      if (isPrevious) {
+        pageStartCursor = connection.pageInfo.startCursor;
+        previousPageExists = connection.pageInfo.hasPreviousPage;
+      } else {
+        pageEndCursor = connection.pageInfo.endCursor;
+        nextPageExists = connection.pageInfo.hasNextPage;
+      }
+    }
+    return {
+      startCursor: pageStartCursor,
+      endCursor: pageEndCursor,
+      hasPreviousPage: previousPageExists,
+      hasNextPage: nextPageExists
+    };
+  }, [
+    isPrevious,
+    state,
+    connection.pageInfo.hasNextPage,
+    connection.pageInfo.hasPreviousPage,
+    connection.pageInfo.startCursor,
+    connection.pageInfo.endCursor
+  ]);
   const urlRef = react.useRef({
     params: getParamsWithoutPagination(search),
     pathname
   });
+  react.useEffect(() => {
+    window.__hydrogenHydrated = true;
+  }, []);
   react.useEffect(() => {
     if (
       // If the URL changes (independent of pagination params)
@@ -1537,39 +1573,8 @@ function usePagination(connection) {
         preventScrollReset: true,
         state: { nodes: void 0, pageInfo: void 0 }
       });
-    } else if (state?.nodes) {
-      setNodes(
-        isPrevious ? [...hydrogenReact.flattenConnection(connection), ...state.nodes] : [...state.nodes, ...hydrogenReact.flattenConnection(connection)]
-      );
-      if (state?.pageInfo) {
-        let pageStartCursor = state?.pageInfo?.startCursor === void 0 ? connection.pageInfo.startCursor : state.pageInfo.startCursor;
-        let pageEndCursor = state?.pageInfo?.endCursor === void 0 ? connection.pageInfo.endCursor : state.pageInfo.endCursor;
-        let previousPageExists = state?.pageInfo?.hasPreviousPage === void 0 ? connection.pageInfo.hasPreviousPage : state.pageInfo.hasPreviousPage;
-        let nextPageExists = state?.pageInfo?.hasNextPage === void 0 ? connection.pageInfo.hasNextPage : state.pageInfo.hasNextPage;
-        if (isPrevious) {
-          pageStartCursor = connection.pageInfo.startCursor;
-          previousPageExists = connection.pageInfo.hasPreviousPage;
-        } else {
-          pageEndCursor = connection.pageInfo.endCursor;
-          nextPageExists = connection.pageInfo.hasNextPage;
-        }
-        setCurrentPageInfo({
-          startCursor: pageStartCursor,
-          endCursor: pageEndCursor,
-          hasPreviousPage: previousPageExists,
-          hasNextPage: nextPageExists
-        });
-      }
-    } else {
-      setNodes(hydrogenReact.flattenConnection(connection));
-      setCurrentPageInfo({
-        startCursor: connection.pageInfo.startCursor,
-        endCursor: connection.pageInfo.endCursor,
-        hasPreviousPage: connection.pageInfo.hasPreviousPage,
-        hasNextPage: connection.pageInfo.hasNextPage
-      });
     }
-  }, [state, connection, isPrevious, search, navigate, pathname]);
+  }, [pathname, search]);
   const previousPageUrl = react.useMemo(() => {
     const params2 = new URLSearchParams(search);
     params2.set("direction", "previous");
@@ -1815,14 +1820,20 @@ function toHexString(byteArray) {
 }
 
 // src/customer/customer.ts
+var DEFAULT_CUSTOMER_API_VERSION = "2024-01";
 function createCustomerClient({
   session,
   customerAccountId,
   customerAccountUrl,
-  customerApiVersion = "2023-10",
+  customerApiVersion = DEFAULT_CUSTOMER_API_VERSION,
   request,
   waitUntil
 }) {
+  if (customerApiVersion !== DEFAULT_CUSTOMER_API_VERSION) {
+    console.log(
+      `[h2:warn:createCustomerClient] You are using Customer Account API version ${customerApiVersion} when this version of Hydrogen was built for ${DEFAULT_CUSTOMER_API_VERSION}.`
+    );
+  }
   if (!request?.url) {
     throw new Error(
       "[h2:error:createCustomerClient] The request object does not contain a URL."
@@ -1901,7 +1912,7 @@ function createCustomerClient({
       throwGraphQLError({ ...errorOptions, errors });
     }
     try {
-      return parseJSON(body).data;
+      return parseJSON(body);
     } catch (e) {
       throwGraphQLError({ ...errorOptions, errors: [{ message: body }] });
     }
@@ -2056,6 +2067,17 @@ function createCustomerClient({
     }
   };
 }
+
+// src/changelogHandler.ts
+var DEFAULT_GITHUB_CHANGELOG_URL = "https://raw.githubusercontent.com/Shopify/hydrogen/main/docs/changelog.json";
+async function changelogHandler({
+  request,
+  changelogUrl
+}) {
+  new URL(request.url).searchParams;
+  const GITHUB_CHANGELOG_URL = changelogUrl || DEFAULT_GITHUB_CHANGELOG_URL;
+  return fetch(GITHUB_CHANGELOG_URL);
+}
 var INPUT_NAME = "cartFormInput";
 function CartForm({
   children,
@@ -2866,21 +2888,32 @@ function createContentSecurityPolicy(directives = {}) {
 }
 function createCSPHeader(nonce, directives = {}) {
   const nonceString = `'nonce-${nonce}'`;
+  const styleSrc = ["'self'", "'unsafe-inline'", "https://cdn.shopify.com"];
+  const connectSrc = ["'self'", "https://monorail-edge.shopifysvc.com"];
+  const defaultSrc = [
+    "'self'",
+    nonceString,
+    "https://cdn.shopify.com",
+    // Used for the Customer Account API
+    "https://shopify.com"
+  ];
   const defaultDirectives = {
     baseUri: ["'self'"],
-    defaultSrc: [
-      "'self'",
-      nonceString,
-      "https://cdn.shopify.com",
-      // Used for the Customer Account API
-      "https://shopify.com"
-    ],
+    defaultSrc,
     frameAncestors: ["none"],
-    styleSrc: ["'self'", "'unsafe-inline'", "https://cdn.shopify.com"],
-    connectSrc: ["'self'", "https://monorail-edge.shopifysvc.com"]
+    styleSrc,
+    connectSrc
   };
   {
-    defaultDirectives.connectSrc = ["*"];
+    defaultDirectives.styleSrc = [...styleSrc, "localhost:*"];
+    defaultDirectives.defaultSrc = [...defaultSrc, "localhost:*"];
+    defaultDirectives.connectSrc = [
+      ...connectSrc,
+      "localhost:*",
+      // For HMR:
+      "ws://localhost:*",
+      "ws://127.0.0.1:*"
+    ];
   }
   const combinedDirectives = Object.assign({}, defaultDirectives, directives);
   if (combinedDirectives.scriptSrc instanceof Array && !combinedDirectives.scriptSrc.includes(nonceString)) {
@@ -2929,6 +2962,9 @@ function OptimisticInput({ id, data }) {
     )
   ] });
 }
+function ShopPayButton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(hydrogenReact.ShopPayButton, { channel: "hydrogen", ...props });
+}
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartCreate
 //! @see https://shopify.dev/docs/api/storefront/latest/queries/cart
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesAdd
@@ -2973,10 +3009,6 @@ Object.defineProperty(exports, 'Money', {
   enumerable: true,
   get: function () { return hydrogenReact.Money; }
 });
-Object.defineProperty(exports, 'ShopPayButton', {
-  enumerable: true,
-  get: function () { return hydrogenReact.ShopPayButton; }
-});
 Object.defineProperty(exports, 'ShopifySalesChannel', {
   enumerable: true,
   get: function () { return hydrogenReact.ShopifySalesChannel; }
@@ -3035,6 +3067,7 @@ exports.OptimisticInput = OptimisticInput;
 exports.Pagination = Pagination;
 exports.Script = Script;
 exports.Seo = Seo;
+exports.ShopPayButton = ShopPayButton;
 exports.StorefrontApiError = StorefrontApiError;
 exports.VariantSelector = VariantSelector;
 exports.cartAttributesUpdateDefault = cartAttributesUpdateDefault;
@@ -3051,6 +3084,7 @@ exports.cartMetafieldsSetDefault = cartMetafieldsSetDefault;
 exports.cartNoteUpdateDefault = cartNoteUpdateDefault;
 exports.cartSelectedDeliveryOptionsUpdateDefault = cartSelectedDeliveryOptionsUpdateDefault;
 exports.cartSetIdDefault = cartSetIdDefault;
+exports.changelogHandler = changelogHandler;
 exports.createCartHandler = createCartHandler;
 exports.createContentSecurityPolicy = createContentSecurityPolicy;
 exports.createCustomerClient__unstable = createCustomerClient;