@shopify/hydrogen 2023.4.0 → 2023.4.2

package/dist/development/index.cjs

@@ -402,7 +402,6 @@ async function fetchWithServerCache(url, requestInit, {
 
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
-var STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";
 
 // src/utils/uuid.ts
 function generateUUID() {
@@ -423,7 +422,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.4.0";
+var LIB_VERSION = "2023.4.2";
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
@@ -435,16 +434,17 @@ function minifyQuery(string) {
   return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
 }
 var defaultI18n = { language: "EN", country: "US" };
-function createStorefrontClient({
-  storefrontHeaders,
-  cache,
-  waitUntil,
-  buyerIp,
-  i18n,
-  requestGroupId,
-  storefrontId,
-  ...clientOptions
-}) {
+function createStorefrontClient(options) {
+  const {
+    storefrontHeaders,
+    cache,
+    waitUntil,
+    buyerIp,
+    i18n,
+    requestGroupId,
+    storefrontId,
+    ...clientOptions
+  } = options;
   if (!cache) {
     warnOnce(
       "Storefront API client created without a cache instance. This may slow down your sub-requests."
@@ -457,10 +457,11 @@ function createStorefrontClient({
     getShopifyDomain
   } = hydrogenReact.createStorefrontClient(clientOptions);
   const getHeaders = clientOptions.privateStorefrontToken ? getPrivateTokenHeaders : getPublicTokenHeaders;
-  const defaultHeaders = getHeaders({ contentType: "json" });
+  const defaultHeaders = getHeaders({
+    contentType: "json",
+    buyerIp: storefrontHeaders?.buyerIp || buyerIp
+  });
   defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = storefrontHeaders?.requestGroupId || requestGroupId || generateUUID();
-  if (storefrontHeaders?.buyerIp || buyerIp)
-    defaultHeaders[STOREFRONT_API_BUYER_IP_HEADER] = storefrontHeaders?.buyerIp || buyerIp || "";
   if (storefrontId)
     defaultHeaders[hydrogenReact.SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
   defaultHeaders["user-agent"] = `Hydrogen ${LIB_VERSION}`;
@@ -566,15 +567,15 @@ function throwError(response, errors, ErrorConstructor = Error) {
 }
 
 // src/with-cache.ts
-function createWithCache_unstable({
-  cache,
-  waitUntil
-}) {
-  return (cacheKey, strategy, actionFn) => runWithCache(cacheKey, actionFn, {
-    strategy,
-    cacheInstance: cache,
-    waitUntil
-  });
+function createWithCache_unstable(options) {
+  const { cache, waitUntil } = options;
+  return function withCache(cacheKey, strategy, actionFn) {
+    return runWithCache(cacheKey, actionFn, {
+      strategy,
+      cacheInstance: cache,
+      waitUntil
+    });
+  };
 }
 
 // src/cache/in-memory.ts
@@ -660,11 +661,12 @@ var InMemoryCache = class {
     return Promise.resolve(cacheKeys);
   }
 };
-async function storefrontRedirect({
-  storefront,
-  request,
-  response = new Response("Not Found", { status: 404 })
-}) {
+async function storefrontRedirect(options) {
+  const {
+    storefront,
+    request,
+    response = new Response("Not Found", { status: 404 })
+  } = options;
   const { pathname, search } = new URL(request.url);
   const redirectFrom = pathname + search;
   try {
@@ -715,7 +717,9 @@ var REDIRECT_QUERY = `#graphql
 `;
 
 // src/routing/graphiql.ts
-function graphiqlLoader({ context }) {
+var graphiqlLoader = async function graphiqlLoader2({
+  context
+}) {
   const storefront = context?.storefront;
   if (!storefront) {
     throw new Error(
@@ -782,7 +786,7 @@ function graphiqlLoader({ context }) {
   `,
     { status: 200, headers: { "content-type": "text/html" } }
   );
-}
+};
 
 // src/seo/generate-seo-tags.ts
 var ERROR_PREFIX = "Error in SEO input: ";
@@ -1194,6 +1198,148 @@ function recursivelyInvokeOrReturn(value, ...rest) {
   }
   return value;
 }
+function Pagination({
+  connection,
+  children = () => {
+    console.warn("<Pagination> requires children to work properly");
+    return null;
+  }
+}) {
+  const transition = react$1.useNavigation();
+  const isLoading = transition.state === "loading";
+  const {
+    endCursor,
+    hasNextPage,
+    hasPreviousPage,
+    nextPageUrl,
+    nodes,
+    previousPageUrl,
+    startCursor
+  } = usePagination(connection);
+  const state = react.useMemo(
+    () => ({
+      pageInfo: {
+        endCursor,
+        hasPreviousPage,
+        startCursor
+      },
+      nodes
+    }),
+    [endCursor, hasPreviousPage, startCursor, nodes]
+  );
+  const NextLink = react.useMemo(
+    () => function NextLink2(props) {
+      return hasNextPage ? react.createElement(react$1.Link, {
+        preventScrollReset: true,
+        ...props,
+        to: nextPageUrl,
+        state,
+        replace: true
+      }) : null;
+    },
+    [hasNextPage, nextPageUrl]
+  );
+  const PreviousLink = react.useMemo(
+    () => function PrevLink(props) {
+      return hasPreviousPage ? react.createElement(react$1.Link, {
+        preventScrollReset: true,
+        ...props,
+        to: previousPageUrl,
+        state,
+        replace: true
+      }) : null;
+    },
+    [hasPreviousPage, previousPageUrl]
+  );
+  return children({
+    state,
+    hasNextPage,
+    hasPreviousPage,
+    isLoading,
+    nextPageUrl,
+    nodes,
+    previousPageUrl,
+    NextLink,
+    PreviousLink
+  });
+}
+function usePagination(connection) {
+  const { state, search } = react$1.useLocation();
+  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;
+    if (state?.nodes) {
+      if (isPrevious) {
+        pageStartCursor = connection.pageInfo.startCursor;
+      } else {
+        pageEndCursor = connection.pageInfo.endCursor;
+      }
+    }
+    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
+  ]);
+  const previousPageUrl = react.useMemo(() => {
+    const params2 = new URLSearchParams(search);
+    params2.set("direction", "previous");
+    currentPageInfo.startCursor && params2.set("cursor", currentPageInfo.startCursor);
+    return `?${params2.toString()}`;
+  }, [search, currentPageInfo.startCursor]);
+  const nextPageUrl = react.useMemo(() => {
+    const params2 = new URLSearchParams(search);
+    params2.set("direction", "next");
+    currentPageInfo.endCursor && params2.set("cursor", currentPageInfo.endCursor);
+    return `?${params2.toString()}`;
+  }, [search, currentPageInfo.endCursor]);
+  return { ...currentPageInfo, previousPageUrl, nextPageUrl, nodes };
+}
+function getPaginationVariables(request, options = { pageBy: 20 }) {
+  if (!(request instanceof Request)) {
+    throw new Error(
+      "getPaginationVariables must be called with the Request object passed to your loader function"
+    );
+  }
+  const { pageBy } = options;
+  const searchParams = new URLSearchParams(new URL(request.url).search);
+  const cursor = searchParams.get("cursor") ?? void 0;
+  const direction = searchParams.get("direction") === "previous" ? "previous" : "next";
+  const isPrevious = direction === "previous";
+  const prevPage = {
+    last: pageBy,
+    startCursor: cursor ?? null
+  };
+  const nextPage = {
+    first: pageBy,
+    endCursor: cursor ?? null
+  };
+  const variables = isPrevious ? prevPage : nextPage;
+  return variables;
+}
 
 Object.defineProperty(exports, 'AnalyticsEventName', {
   enumerable: true,
@@ -1251,6 +1397,10 @@ Object.defineProperty(exports, 'getShopifyCookies', {
   enumerable: true,
   get: function () { return hydrogenReact.getShopifyCookies; }
 });
+Object.defineProperty(exports, 'parseGid', {
+  enumerable: true,
+  get: function () { return hydrogenReact.parseGid; }
+});
 Object.defineProperty(exports, 'parseMetafield', {
   enumerable: true,
   get: function () { return hydrogenReact.parseMetafield; }
@@ -1276,10 +1426,12 @@ exports.CacheLong = CacheLong;
 exports.CacheNone = CacheNone;
 exports.CacheShort = CacheShort;
 exports.InMemoryCache = InMemoryCache;
+exports.Pagination__unstable = Pagination;
 exports.Seo = Seo;
 exports.createStorefrontClient = createStorefrontClient;
 exports.createWithCache_unstable = createWithCache_unstable;
 exports.generateCacheControlHeader = generateCacheControlHeader;
+exports.getPaginationVariables__unstable = getPaginationVariables;
 exports.graphiqlLoader = graphiqlLoader;
 exports.isStorefrontApiError = isStorefrontApiError;
 exports.storefrontRedirect = storefrontRedirect;