@shopify/hydrogen 2023.4.1 → 2023.4.2

package/dist/development/index.cjs

@@ -422,7 +422,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.4.1";
+var LIB_VERSION = "2023.4.2";
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
@@ -1198,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,
@@ -1284,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;