@shopify/hydrogen 2023.7.3 → 2023.7.4

package/dist/development/index.js

@@ -1,9 +1,10 @@
 import { createStorefrontClient as createStorefrontClient$1, SHOPIFY_STOREFRONT_ID_HEADER, getShopifyCookies, SHOPIFY_Y, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_S, SHOPIFY_STOREFRONT_S_HEADER, flattenConnection } from '@shopify/hydrogen-react';
 export { AnalyticsEventName, AnalyticsPageType, ExternalVideo, IMAGE_FRAGMENT, Image, MediaFile, ModelViewer, Money, ShopPayButton, ShopifySalesChannel, Video, flattenConnection, getClientBrowserParameters, getShopifyCookies, parseGid, parseMetafield, sendShopifyAnalytics, storefrontApiCustomScalars, useLoadScript, useMoney, useShopifyCookies } from '@shopify/hydrogen-react';
 import { redirect } from '@remix-run/server-runtime';
-import { lazy, useMemo, createElement, Suspense, Fragment } from 'react';
+import { lazy, createContext, forwardRef, useMemo, createElement, Suspense, Fragment, useState, useEffect, useContext } from 'react';
 import { useMatches, useLocation, useNavigation, Link, useFetcher } from '@remix-run/react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cspBuilder from 'content-security-policy-builder';
 
 // src/storefront.ts
 
@@ -332,7 +333,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.7.3";
+var LIB_VERSION = "2023.7.4";
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
@@ -1247,7 +1248,7 @@ function Pagination({
         replace: true
       }) : null;
     },
-    [hasNextPage, nextPageUrl]
+    [hasNextPage, nextPageUrl, state]
   );
   const PreviousLink = useMemo(
     () => function PrevLink(props) {
@@ -1259,7 +1260,7 @@ function Pagination({
         replace: true
       }) : null;
     },
-    [hasPreviousPage, previousPageUrl]
+    [hasPreviousPage, previousPageUrl, state]
   );
   return children({
     state,
@@ -1278,42 +1279,41 @@ function usePagination(connection) {
   const params = new URLSearchParams(search);
   const direction = params.get("direction");
   const isPrevious = direction === "previous";
-  const nodes = useMemo(() => {
-    if (!state || !state?.nodes) {
-      return flattenConnection(connection);
-    }
-    if (isPrevious) {
-      return [...flattenConnection(connection), ...state.nodes];
-    } else {
-      return [...state.nodes, ...flattenConnection(connection)];
-    }
-  }, [state, connection]);
-  const currentPageInfo = useMemo(() => {
-    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;
+  const [nodes, setNodes] = useState(flattenConnection(connection));
+  const [currentPageInfo, setCurrentPageInfo] = useState({
+    startCursor: connection.pageInfo.startCursor,
+    endCursor: connection.pageInfo.endCursor,
+    hasPreviousPage: connection.pageInfo.hasPreviousPage,
+    hasNextPage: connection.pageInfo.hasNextPage
+  });
+  useEffect(() => {
     if (state?.nodes) {
-      if (isPrevious) {
-        pageStartCursor = connection.pageInfo.startCursor;
-      } else {
-        pageEndCursor = connection.pageInfo.endCursor;
+      setNodes(
+        isPrevious ? [...flattenConnection(connection), ...state.nodes] : [...state.nodes, ...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 (state?.nodes) {
+        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
+      });
     }
-    const previousPageExists = state?.pageInfo?.hasPreviousPage === void 0 ? connection.pageInfo.hasPreviousPage : state.pageInfo.hasPreviousPage;
-    const nextPageExists = state?.pageInfo?.hasNextPage === void 0 ? connection.pageInfo.hasNextPage : state.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
-  ]);
+  }, [state, connection]);
   const previousPageUrl = useMemo(() => {
     const params2 = new URLSearchParams(search);
     params2.set("direction", "previous");
@@ -2056,10 +2056,14 @@ function VariantSelector({
   handle,
   options = [],
   variants: _variants = [],
+  productPath = "products",
   children
 }) {
   const variants = _variants instanceof Array ? _variants : flattenConnection(_variants);
-  const { searchParams, path, alreadyOnProductPage } = useVariantPath(handle);
+  const { searchParams, path, alreadyOnProductPage } = useVariantPath(
+    handle,
+    productPath
+  );
   const optionsWithOnlyOneValue = options.filter(
     (option) => option?.values?.length === 1
   );
@@ -2121,12 +2125,13 @@ var getSelectedProductOptions = (request) => {
   });
   return selectedOptions;
 };
-function useVariantPath(handle) {
+function useVariantPath(handle, productPath) {
   const { pathname, search } = useLocation();
   return useMemo(() => {
     const match = /(\/[a-zA-Z]{2}-[a-zA-Z]{2}\/)/g.exec(pathname);
     const isLocalePathname = match && match.length > 0;
-    const path = isLocalePathname ? `${match[0]}products/${handle}` : `/products/${handle}`;
+    productPath = productPath.startsWith("/") ? productPath.substring(1) : productPath;
+    const path = isLocalePathname ? `${match[0]}${productPath}/${handle}` : `/${productPath}/${handle}`;
     const searchParams = new URLSearchParams(search);
     return {
       searchParams,
@@ -2136,8 +2141,76 @@ function useVariantPath(handle) {
       alreadyOnProductPage: path === pathname,
       path
     };
-  }, [pathname, search, handle]);
+  }, [pathname, search, handle, productPath]);
+}
+
+// src/csp/nonce.ts
+function generateNonce() {
+  return toHexString(randomUint8Array());
+}
+function randomUint8Array() {
+  try {
+    return crypto.getRandomValues(new Uint8Array(16));
+  } catch (e) {
+    return new Uint8Array(16).map(() => Math.random() * 255 | 0);
+  }
 }
+function toHexString(byteArray) {
+  return Array.from(byteArray, function(byte) {
+    return ("0" + (byte & 255).toString(16)).slice(-2);
+  }).join("");
+}
+
+// src/csp/csp.ts
+var NonceContext = createContext(void 0);
+var NonceProvider = NonceContext.Provider;
+var useNonce = () => useContext(NonceContext);
+function createContentSecurityPolicy(directives = {}) {
+  const nonce = generateNonce();
+  const header = createCSPHeader(nonce, directives);
+  const Provider = ({ children }) => {
+    return createElement(NonceProvider, { value: nonce }, children);
+  };
+  return {
+    nonce,
+    header,
+    NonceProvider: Provider
+  };
+}
+function createCSPHeader(nonce, directives = {}) {
+  const nonceString = `'nonce-${nonce}'`;
+  const defaultDirectives = {
+    baseUri: ["'self'"],
+    defaultSrc: [
+      "'self'",
+      nonceString,
+      "https://cdn.shopify.com",
+      // Used for the Customer Account API
+      "https://shopify.com"
+    ],
+    frameAncestors: ["none"],
+    styleSrc: ["'self'", "'unsafe-inline'", "https://cdn.shopify.com"],
+    connectSrc: ["'self'", "https://monorail-edge.shopifysvc.com"]
+  };
+  {
+    defaultDirectives.connectSrc = ["*"];
+  }
+  const combinedDirectives = Object.assign({}, defaultDirectives, directives);
+  if (combinedDirectives.scriptSrc instanceof Array && !combinedDirectives.scriptSrc.includes(nonceString)) {
+    combinedDirectives.scriptSrc.push(nonceString);
+  } else if (combinedDirectives.defaultSrc instanceof Array && !combinedDirectives.defaultSrc.includes(nonceString)) {
+    combinedDirectives.defaultSrc.push(nonceString);
+  }
+  return cspBuilder({
+    directives: combinedDirectives
+  });
+}
+var Script = forwardRef(
+  (props, ref) => {
+    const nonce = useNonce();
+    return /* @__PURE__ */ jsx("script", { ...props, nonce, ref });
+  }
+);
 //! @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
@@ -2150,6 +2223,6 @@ function useVariantPath(handle) {
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartMetafieldsSet
 //! @see https://shopify.dev/docs/api/storefront/2023-07/mutations/cartMetafieldDelete
 
-export { CacheCustom, CacheLong, CacheNone, CacheShort, CartForm, InMemoryCache, Pagination, Seo, VariantSelector, cartAttributesUpdateDefault, cartBuyerIdentityUpdateDefault, cartCreateDefault, cartDiscountCodesUpdateDefault, cartGetDefault, cartGetIdDefault, cartLinesAddDefault, cartLinesRemoveDefault, cartLinesUpdateDefault, cartMetafieldDeleteDefault, cartMetafieldsSetDefault, cartNoteUpdateDefault, cartSelectedDeliveryOptionsUpdateDefault, cartSetIdDefault, createCartHandler, createStorefrontClient, createWithCache, generateCacheControlHeader, getPaginationVariables, getSelectedProductOptions, graphiqlLoader, isStorefrontApiError, storefrontRedirect };
+export { CacheCustom, CacheLong, CacheNone, CacheShort, CartForm, InMemoryCache, Pagination, Script, Seo, VariantSelector, cartAttributesUpdateDefault, cartBuyerIdentityUpdateDefault, cartCreateDefault, cartDiscountCodesUpdateDefault, cartGetDefault, cartGetIdDefault, cartLinesAddDefault, cartLinesRemoveDefault, cartLinesUpdateDefault, cartMetafieldDeleteDefault, cartMetafieldsSetDefault, cartNoteUpdateDefault, cartSelectedDeliveryOptionsUpdateDefault, cartSetIdDefault, createCartHandler, createContentSecurityPolicy, createStorefrontClient, createWithCache, generateCacheControlHeader, getPaginationVariables, getSelectedProductOptions, graphiqlLoader, isStorefrontApiError, storefrontRedirect, useNonce };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map