@shopify/hydrogen 2023.7.2 → 2023.7.4

package/dist/development/index.cjs

@@ -5,6 +5,11 @@ var serverRuntime = require('@remix-run/server-runtime');
 var react = require('react');
 var react$1 = require('@remix-run/react');
 var jsxRuntime = require('react/jsx-runtime');
+var cspBuilder = require('content-security-policy-builder');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var cspBuilder__default = /*#__PURE__*/_interopDefault(cspBuilder);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -164,7 +169,9 @@ function CacheLong(overrideOptions) {
   return {
     mode: PUBLIC,
     maxAge: 3600,
+    // 1 hour
     staleWhileRevalidate: 82800,
+    // 23 Hours
     ...overrideOptions
   };
 }
@@ -218,7 +225,7 @@ async function setItem(cache, request, response, userCacheOptions) {
   );
   response.headers.set("cache-control", paddedCacheControlString);
   response.headers.set("real-cache-control", cacheControlString);
-  response.headers.set("cache-put-date", new Date().toUTCString());
+  response.headers.set("cache-put-date", (/* @__PURE__ */ new Date()).toUTCString());
   await cache.put(request, response);
 }
 async function deleteItem(cache, request) {
@@ -235,7 +242,7 @@ function calculateAge(response, responseDate) {
       responseMaxAge = parseFloat(maxAgeMatch[1]);
     }
   }
-  const ageInMs = new Date().valueOf() - new Date(responseDate).valueOf();
+  const ageInMs = (/* @__PURE__ */ new Date()).valueOf() - new Date(responseDate).valueOf();
   return [ageInMs / 1e3, responseMaxAge];
 }
 function isStale(request, response) {
@@ -321,6 +328,7 @@ async function runWithCache(cacheKey, actionFn, {
     return actionFn();
   }
   const key = hashKey([
+    // '__HYDROGEN_CACHE_ID__', // TODO purgeQueryCacheOnBuild
     ...typeof cacheKey === "string" ? [cacheKey] : cacheKey
   ]);
   const cachedItem = await getItemFromCache(cacheInstance, key);
@@ -419,7 +427,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.7.2";
+var LIB_VERSION = "2023.7.4";
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
@@ -537,6 +545,20 @@ function createStorefrontClient(options) {
   }
   return {
     storefront: {
+      /**
+       * Sends a GraphQL query to the Storefront API.
+       *
+       * Example:
+       *
+       * ```js
+       * async function loader ({context: {storefront}}) {
+       *   const data = await storefront.query('query { ... }', {
+       *     variables: {},
+       *     cache: storefront.CacheLong()
+       *   });
+       * }
+       * ```
+       */
       query: (query, payload) => {
         query = minifyQuery(query);
         if (isMutationRE.test(query)) {
@@ -546,6 +568,19 @@ function createStorefrontClient(options) {
         }
         return fetchStorefrontApi({ ...payload, query });
       },
+      /**
+       * Sends a GraphQL mutation to the Storefront API.
+       *
+       * Example:
+       *
+       * ```js
+       * async function loader ({context: {storefront}}) {
+       *   await storefront.mutate('mutation { ... }', {
+       *     variables: {},
+       *   });
+       * }
+       * ```
+       */
       mutate: (mutation, payload) => {
         mutation = minifyQuery(mutation);
         if (isQueryRE.test(mutation)) {
@@ -565,6 +600,25 @@ function createStorefrontClient(options) {
       getPrivateTokenHeaders,
       getShopifyDomain,
       getApiUrl: getStorefrontApiUrl,
+      /**
+       * Wether it's a GraphQL error returned in the Storefront API response.
+       *
+       * Example:
+       *
+       * ```js
+       * async function loader ({context: {storefront}}) {
+       *   try {
+       *     await storefront.query(...);
+       *   } catch(error) {
+       *     if (storefront.isApiError(error)) {
+       *       // ...
+       *     }
+       *
+       *     throw error;
+       *   }
+       * }
+       * ```
+       */
       isApiError: isStorefrontApiError,
       i18n: i18n ?? defaultI18n
     }
@@ -787,11 +841,11 @@ var graphiqlLoader = async function graphiqlLoader2({
     <script
       crossorigin
       src="https://unpkg.com/react@18/umd/react.development.js"
-    ><\/script>
+    ></script>
     <script
       crossorigin
       src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
-    ><\/script>
+    ></script>
     <link rel="stylesheet" href="https://unpkg.com/graphiql@3/graphiql.min.css" />
   </head>
 
@@ -800,7 +854,7 @@ var graphiqlLoader = async function graphiqlLoader2({
     <script
       src="https://unpkg.com/graphiql@3/graphiql.min.js"
       type="application/javascript"
-    ><\/script>
+    ></script>
     <script>
       const windowUrl = new URL(document.URL);
 
@@ -830,7 +884,7 @@ var graphiqlLoader = async function graphiqlLoader2({
           variables
         }),
       );
-    <\/script>
+    </script>
   </body>
 </html>
   `,
@@ -1013,6 +1067,7 @@ function generateSeoTags(seoInput) {
               type: "application/ld+json",
               children: JSON.stringify(block)
             },
+            // @ts-expect-error
             `json-ld-${block?.["@type"] || block?.name || index++}`
           );
           tagResults.push(tag);
@@ -1287,7 +1342,7 @@ function Pagination({
         replace: true
       }) : null;
     },
-    [hasNextPage, nextPageUrl]
+    [hasNextPage, nextPageUrl, state]
   );
   const PreviousLink = react.useMemo(
     () => function PrevLink(props) {
@@ -1299,7 +1354,7 @@ function Pagination({
         replace: true
       }) : null;
     },
-    [hasPreviousPage, previousPageUrl]
+    [hasPreviousPage, previousPageUrl, state]
   );
   return children({
     state,
@@ -1318,42 +1373,41 @@ function usePagination(connection) {
   const params = new URLSearchParams(search);
   const direction = params.get("direction");
   const isPrevious = direction === "previous";
-  const nodes = react.useMemo(() => {
-    if (!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(() => {
-    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] = 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
+  });
+  react.useEffect(() => {
     if (state?.nodes) {
-      if (isPrevious) {
-        pageStartCursor = connection.pageInfo.startCursor;
-      } else {
-        pageEndCursor = connection.pageInfo.endCursor;
+      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 (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 = react.useMemo(() => {
     const params2 = new URLSearchParams(search);
     params2.set("direction", "previous");
@@ -1398,18 +1452,17 @@ function CartForm({
   route
 }) {
   const fetcher = react$1.useFetcher();
-  return /* @__PURE__ */ jsxRuntime.jsxs(fetcher.Form, {
-    action: route || "",
-    method: "post",
-    children: [
-      (action || inputs) && /* @__PURE__ */ jsxRuntime.jsx("input", {
+  return /* @__PURE__ */ jsxRuntime.jsxs(fetcher.Form, { action: route || "", method: "post", children: [
+    (action || inputs) && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
         type: "hidden",
         name: INPUT_NAME,
         value: JSON.stringify({ action, inputs })
-      }),
-      typeof children === "function" ? children(fetcher) : children
-    ]
-  });
+      }
+    ),
+    typeof children === "function" ? children(fetcher) : children
+  ] });
 }
 CartForm.INPUT_NAME = INPUT_NAME;
 CartForm.ACTIONS = {
@@ -2097,10 +2150,14 @@ function VariantSelector({
   handle,
   options = [],
   variants: _variants = [],
+  productPath = "products",
   children
 }) {
   const variants = _variants instanceof Array ? _variants : hydrogenReact.flattenConnection(_variants);
-  const { searchParams, path, alreadyOnProductPage } = useVariantPath(handle);
+  const { searchParams, path, alreadyOnProductPage } = useVariantPath(
+    handle,
+    productPath
+  );
   const optionsWithOnlyOneValue = options.filter(
     (option) => option?.values?.length === 1
   );
@@ -2125,7 +2182,10 @@ function VariantSelector({
             )
           );
           const currentParam = searchParams.get(option.name);
-          const calculatedActiveValue = currentParam ? currentParam === value : false;
+          const calculatedActiveValue = currentParam ? (
+            // If a URL parameter exists for the current option, check if it equals the current value
+            currentParam === value
+          ) : false;
           if (calculatedActiveValue) {
             activeValue = value;
           }
@@ -2159,31 +2219,103 @@ var getSelectedProductOptions = (request) => {
   });
   return selectedOptions;
 };
-function useVariantPath(handle) {
+function useVariantPath(handle, productPath) {
   const { pathname, search } = react$1.useLocation();
   return react.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,
+      // If the current pathname matches the product page, we need to make sure
+      // that we append to the current search params. Otherwise all the search
+      // params can be generated new.
       alreadyOnProductPage: path === pathname,
       path
     };
-  }, [pathname, search, handle]);
+  }, [pathname, search, handle, productPath]);
 }
-//! @see https://shopify.dev/docs/api/storefront/2023-07/mutations/cartMetafieldDelete
-//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartBuyerIdentityUpdate
-//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartDiscountCodesUpdate
-//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartMetafieldsSet
-//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartNoteUpdate
-//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartSelectedDeliveryOptionsUpdate
-//! @see https://shopify.dev/docs/api/storefront/latest/queries/cart
+
+// 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 = react.createContext(void 0);
+var NonceProvider = NonceContext.Provider;
+var useNonce = () => react.useContext(NonceContext);
+function createContentSecurityPolicy(directives = {}) {
+  const nonce = generateNonce();
+  const header = createCSPHeader(nonce, directives);
+  const Provider = ({ children }) => {
+    return react.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__default.default({
+    directives: combinedDirectives
+  });
+}
+var Script = react.forwardRef(
+  (props, ref) => {
+    const nonce = useNonce();
+    return /* @__PURE__ */ jsxRuntime.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
-//! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesRemove
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesUpdate
+//! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesRemove
+//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartDiscountCodesUpdate
+//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartBuyerIdentityUpdate
+//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartNoteUpdate
+//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartSelectedDeliveryOptionsUpdate
+//! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartMetafieldsSet
+//! @see https://shopify.dev/docs/api/storefront/2023-07/mutations/cartMetafieldDelete
 
 Object.defineProperty(exports, 'AnalyticsEventName', {
   enumerable: true,
@@ -2276,6 +2408,7 @@ exports.CacheShort = CacheShort;
 exports.CartForm = CartForm;
 exports.InMemoryCache = InMemoryCache;
 exports.Pagination = Pagination;
+exports.Script = Script;
 exports.Seo = Seo;
 exports.VariantSelector = VariantSelector;
 exports.cartAttributesUpdateDefault = cartAttributesUpdateDefault;
@@ -2293,6 +2426,7 @@ exports.cartNoteUpdateDefault = cartNoteUpdateDefault;
 exports.cartSelectedDeliveryOptionsUpdateDefault = cartSelectedDeliveryOptionsUpdateDefault;
 exports.cartSetIdDefault = cartSetIdDefault;
 exports.createCartHandler = createCartHandler;
+exports.createContentSecurityPolicy = createContentSecurityPolicy;
 exports.createStorefrontClient = createStorefrontClient;
 exports.createWithCache = createWithCache;
 exports.generateCacheControlHeader = generateCacheControlHeader;
@@ -2301,5 +2435,6 @@ exports.getSelectedProductOptions = getSelectedProductOptions;
 exports.graphiqlLoader = graphiqlLoader;
 exports.isStorefrontApiError = isStorefrontApiError;
 exports.storefrontRedirect = storefrontRedirect;
+exports.useNonce = useNonce;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map