@shopify/hydrogen 2023.7.3 → 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;
@@ -422,7 +427,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 {
@@ -1337,7 +1342,7 @@ function Pagination({
         replace: true
       }) : null;
     },
-    [hasNextPage, nextPageUrl]
+    [hasNextPage, nextPageUrl, state]
   );
   const PreviousLink = react.useMemo(
     () => function PrevLink(props) {
@@ -1349,7 +1354,7 @@ function Pagination({
         replace: true
       }) : null;
     },
-    [hasPreviousPage, previousPageUrl]
+    [hasPreviousPage, previousPageUrl, state]
   );
   return children({
     state,
@@ -1368,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");
@@ -2146,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
   );
@@ -2211,12 +2219,13 @@ 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,
@@ -2226,8 +2235,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 = 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
@@ -2331,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;
@@ -2348,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;
@@ -2356,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