@shopify/hydrogen 2023.4.1 → 2023.4.2

package/dist/development/index.js

@@ -1,8 +1,8 @@
-import { createStorefrontClient as createStorefrontClient$1, SHOPIFY_STOREFRONT_ID_HEADER, getShopifyCookies, SHOPIFY_Y, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_S, SHOPIFY_STOREFRONT_S_HEADER } from '@shopify/hydrogen-react';
+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, useMoney, useShopifyCookies } from '@shopify/hydrogen-react';
 import { redirect } from '@remix-run/server-runtime';
 import { lazy, useMemo, createElement, Suspense, Fragment } from 'react';
-import { useMatches, useLocation } from '@remix-run/react';
+import { useMatches, useLocation, useNavigation, Link } from '@remix-run/react';
 
 // src/storefront.ts
 
@@ -332,7 +332,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 {
@@ -1108,7 +1108,149 @@ function recursivelyInvokeOrReturn(value, ...rest) {
   }
   return value;
 }
+function Pagination({
+  connection,
+  children = () => {
+    console.warn("<Pagination> requires children to work properly");
+    return null;
+  }
+}) {
+  const transition = useNavigation();
+  const isLoading = transition.state === "loading";
+  const {
+    endCursor,
+    hasNextPage,
+    hasPreviousPage,
+    nextPageUrl,
+    nodes,
+    previousPageUrl,
+    startCursor
+  } = usePagination(connection);
+  const state = useMemo(
+    () => ({
+      pageInfo: {
+        endCursor,
+        hasPreviousPage,
+        startCursor
+      },
+      nodes
+    }),
+    [endCursor, hasPreviousPage, startCursor, nodes]
+  );
+  const NextLink = useMemo(
+    () => function NextLink2(props) {
+      return hasNextPage ? createElement(Link, {
+        preventScrollReset: true,
+        ...props,
+        to: nextPageUrl,
+        state,
+        replace: true
+      }) : null;
+    },
+    [hasNextPage, nextPageUrl]
+  );
+  const PreviousLink = useMemo(
+    () => function PrevLink(props) {
+      return hasPreviousPage ? createElement(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 } = useLocation();
+  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;
+    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 = 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 = 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;
+}
 
-export { CacheCustom, CacheLong, CacheNone, CacheShort, InMemoryCache, Seo, createStorefrontClient, createWithCache_unstable, generateCacheControlHeader, graphiqlLoader, isStorefrontApiError, storefrontRedirect };
+export { CacheCustom, CacheLong, CacheNone, CacheShort, InMemoryCache, Pagination as Pagination__unstable, Seo, createStorefrontClient, createWithCache_unstable, generateCacheControlHeader, getPaginationVariables as getPaginationVariables__unstable, graphiqlLoader, isStorefrontApiError, storefrontRedirect };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map