@shopify/cli 3.65.1 → 3.65.3

package/dist/assets/hydrogen/starter/app/lib/search.ts

@@ -1,29 +1,79 @@
 import type {
-  PredictiveQueryFragment,
-  SearchProductFragment,
-  PredictiveProductFragment,
-  PredictiveCollectionFragment,
-  PredictivePageFragment,
-  PredictiveArticleFragment,
+  PredictiveSearchQuery,
+  RegularSearchQuery,
 } from 'storefrontapi.generated';
 
-export function applyTrackingParams(
-  resource:
-    | PredictiveQueryFragment
-    | SearchProductFragment
-    | PredictiveProductFragment
-    | PredictiveCollectionFragment
-    | PredictiveArticleFragment
-    | PredictivePageFragment,
-  params?: string,
-) {
-  if (params) {
-    return resource?.trackingParameters
-      ? `?${params}&${resource.trackingParameters}`
-      : `?${params}`;
-  } else {
-    return resource?.trackingParameters
-      ? `?${resource.trackingParameters}`
-      : '';
+type ResultWithItems<Type extends 'predictive' | 'regular', Items> = {
+  type: Type;
+  term: string;
+  error?: string;
+  result: {total: number; items: Items};
+};
+
+export type RegularSearchReturn = ResultWithItems<
+  'regular',
+  RegularSearchQuery
+>;
+export type PredictiveSearchReturn = ResultWithItems<
+  'predictive',
+  NonNullable<PredictiveSearchQuery['predictiveSearch']>
+>;
+
+/**
+ * Returns the empty state of a predictive search result to reset the search state.
+ */
+export function getEmptyPredictiveSearchResult(): PredictiveSearchReturn['result'] {
+  return {
+    total: 0,
+    items: {
+      articles: [],
+      collections: [],
+      products: [],
+      pages: [],
+      queries: [],
+    },
+  };
+}
+
+interface UrlWithTrackingParams {
+  /** The base URL to which the tracking parameters will be appended. */
+  baseUrl: string;
+  /** The trackingParams returned by the Storefront API. */
+  trackingParams?: string | null;
+  /** Any additional query parameters to be appended to the URL. */
+  params?: Record<string, string>;
+  /** The search term to be appended to the URL. */
+  term: string;
+}
+
+/**
+ * A utility function that appends tracking parameters to a URL. Tracking parameters are
+ * used internally by shopify to enhance search results and admin dashboards.
+ * @example
+ * ```ts
+ * const url = 'www.example.com';
+ * const trackingParams = 'utm_source=shopify&utm_medium=shopify_app&utm_campaign=storefront';
+ * const params = { foo: 'bar' };
+ * const term = 'search term';
+ * const url = urlWithTrackingParams({ baseUrl, trackingParams, params, term });
+ * console.log(url);
+ * // Output: 'https://www.example.com?foo=bar&q=search%20term&utm_source=shopify&utm_medium=shopify_app&utm_campaign=storefront'
+ * ```
+ */
+export function urlWithTrackingParams({
+  baseUrl,
+  trackingParams,
+  params: extraParams,
+  term,
+}: UrlWithTrackingParams) {
+  let search = new URLSearchParams({
+    ...extraParams,
+    q: encodeURIComponent(term),
+  }).toString();
+
+  if (trackingParams) {
+    search = `${search}&${trackingParams}`;
   }
+
+  return `${baseUrl}?${search}`;
 }

package/dist/assets/hydrogen/starter/app/root.tsx

@@ -26,18 +26,15 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   formMethod,
   currentUrl,
   nextUrl,
+  defaultShouldRevalidate,
 }) => {
   // revalidate when a mutation is performed e.g add to cart, login...
-  if (formMethod && formMethod !== 'GET') {
-    return true;
-  }
+  if (formMethod && formMethod !== 'GET') return true;
 
   // revalidate when manually revalidating via useRevalidator
-  if (currentUrl.toString() === nextUrl.toString()) {
-    return true;
-  }
+  if (currentUrl.toString() === nextUrl.toString()) return true;
 
-  return false;
+  return defaultShouldRevalidate;
 };
 
 export function links() {

package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx

@@ -14,6 +14,7 @@ import {
   useNavigation,
   useOutletContext,
   type MetaFunction,
+  type Fetcher,
 } from '@remix-run/react';
 import {
   UPDATE_ADDRESS_MUTATION,
@@ -364,9 +365,7 @@ export function AddressForm({
   address: CustomerAddressInput;
   defaultAddress: CustomerFragment['defaultAddress'];
   children: (props: {
-    stateForMethod: (
-      method: 'PUT' | 'POST' | 'DELETE',
-    ) => ReturnType<typeof useNavigation>['state'];
+    stateForMethod: (method: 'PUT' | 'POST' | 'DELETE') => Fetcher['state'];
   }) => React.ReactNode;
 }) {
   const {state, formMethod} = useNavigation();

package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx

@@ -1,16 +1,16 @@
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   Money,
-  Pagination,
   getPaginationVariables,
   flattenConnection,
 } from '@shopify/hydrogen';
-import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {CUSTOMER_ORDERS_QUERY} from '~/graphql/customer-account/CustomerOrdersQuery';
 import type {
   CustomerOrdersFragment,
   OrderItemFragment,
 } from 'customer-accountapi.generated';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Orders'}];
@@ -51,23 +51,9 @@ function OrdersTable({orders}: Pick<CustomerOrdersFragment, 'orders'>) {
   return (
     <div className="acccount-orders">
       {orders?.nodes.length ? (
-        <Pagination connection={orders}>
-          {({nodes, isLoading, PreviousLink, NextLink}) => {
-            return (
-              <>
-                <PreviousLink>
-                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
-                </PreviousLink>
-                {nodes.map((order) => {
-                  return <OrderItem key={order.id} order={order} />;
-                })}
-                <NextLink>
-                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
-                </NextLink>
-              </>
-            );
-          }}
-        </Pagination>
+        <PaginatedResourceSection connection={orders}>
+          {({node: order}) => <OrderItem key={order.id} order={order} />}
+        </PaginatedResourceSection>
       ) : (
         <EmptyOrders />
       )}

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,7 +1,8 @@
 import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
-import {Image, Pagination, getPaginationVariables} from '@shopify/hydrogen';
+import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
@@ -68,29 +69,15 @@ export default function Blog() {
     <div className="blog">
       <h1>{blog.title}</h1>
       <div className="blog-grid">
-        <Pagination connection={articles}>
-          {({nodes, isLoading, PreviousLink, NextLink}) => {
-            return (
-              <>
-                <PreviousLink>
-                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
-                </PreviousLink>
-                {nodes.map((article, index) => {
-                  return (
-                    <ArticleItem
-                      article={article}
-                      key={article.id}
-                      loading={index < 2 ? 'eager' : 'lazy'}
-                    />
-                  );
-                })}
-                <NextLink>
-                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
-                </NextLink>
-              </>
-            );
-          }}
-        </Pagination>
+        <PaginatedResourceSection connection={articles}>
+          {({node: article, index}) => (
+            <ArticleItem
+              article={article}
+              key={article.id}
+              loading={index < 2 ? 'eager' : 'lazy'}
+            />
+          )}
+        </PaginatedResourceSection>
       </div>
     </div>
   );

package/dist/assets/hydrogen/starter/app/routes/blogs._index.tsx

@@ -1,6 +1,7 @@
 import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
-import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
+import {getPaginationVariables} from '@shopify/hydrogen';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Blogs`}];
@@ -53,32 +54,18 @@ export default function Blogs() {
     <div className="blogs">
       <h1>Blogs</h1>
       <div className="blogs-grid">
-        <Pagination connection={blogs}>
-          {({nodes, isLoading, PreviousLink, NextLink}) => {
-            return (
-              <>
-                <PreviousLink>
-                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
-                </PreviousLink>
-                {nodes.map((blog) => {
-                  return (
-                    <Link
-                      className="blog"
-                      key={blog.handle}
-                      prefetch="intent"
-                      to={`/blogs/${blog.handle}`}
-                    >
-                      <h2>{blog.title}</h2>
-                    </Link>
-                  );
-                })}
-                <NextLink>
-                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
-                </NextLink>
-              </>
-            );
-          }}
-        </Pagination>
+        <PaginatedResourceSection connection={blogs}>
+          {({node: blog}) => (
+            <Link
+              className="blog"
+              key={blog.handle}
+              prefetch="intent"
+              to={`/blogs/${blog.handle}`}
+            >
+              <h2>{blog.title}</h2>
+            </Link>
+          )}
+        </PaginatedResourceSection>
       </div>
     </div>
   );

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -1,7 +1,6 @@
 import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {
-  Pagination,
   getPaginationVariables,
   Image,
   Money,
@@ -9,6 +8,7 @@ import {
 } from '@shopify/hydrogen';
 import type {ProductItemFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
@@ -77,20 +77,18 @@ export default function Collection() {
     <div className="collection">
       <h1>{collection.title}</h1>
       <p className="collection-description">{collection.description}</p>
-      <Pagination connection={collection.products}>
-        {({nodes, isLoading, PreviousLink, NextLink}) => (
-          <>
-            <PreviousLink>
-              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
-            </PreviousLink>
-            <ProductsGrid products={nodes} />
-            <br />
-            <NextLink>
-              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
-            </NextLink>
-          </>
+      <PaginatedResourceSection
+        connection={collection.products}
+        resourcesClassName="products-grid"
+      >
+        {({node: product, index}) => (
+          <ProductItem
+            key={product.id}
+            product={product}
+            loading={index < 8 ? 'eager' : undefined}
+          />
         )}
-      </Pagination>
+      </PaginatedResourceSection>
       <Analytics.CollectionView
         data={{
           collection: {
@@ -103,22 +101,6 @@ export default function Collection() {
   );
 }
 
-function ProductsGrid({products}: {products: ProductItemFragment[]}) {
-  return (
-    <div className="products-grid">
-      {products.map((product, index) => {
-        return (
-          <ProductItem
-            key={product.id}
-            product={product}
-            loading={index < 8 ? 'eager' : undefined}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
 function ProductItem({
   product,
   loading,

package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx

@@ -1,7 +1,8 @@
 import {useLoaderData, Link} from '@remix-run/react';
 import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Pagination, getPaginationVariables, Image} from '@shopify/hydrogen';
+import {getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
 export async function loader(args: LoaderFunctionArgs) {
   // Start fetching non-critical data without blocking time to first byte
@@ -47,33 +48,18 @@ export default function Collections() {
   return (
     <div className="collections">
       <h1>Collections</h1>
-      <Pagination connection={collections}>
-        {({nodes, isLoading, PreviousLink, NextLink}) => (
-          <div>
-            <PreviousLink>
-              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
-            </PreviousLink>
-            <CollectionsGrid collections={nodes} />
-            <NextLink>
-              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
-            </NextLink>
-          </div>
+      <PaginatedResourceSection
+        connection={collections}
+        resourcesClassName="collections-grid"
+      >
+        {({node: collection, index}) => (
+          <CollectionItem
+            key={collection.id}
+            collection={collection}
+            index={index}
+          />
         )}
-      </Pagination>
-    </div>
-  );
-}
-
-function CollectionsGrid({collections}: {collections: CollectionFragment[]}) {
-  return (
-    <div className="collections-grid">
-      {collections.map((collection, index) => (
-        <CollectionItem
-          key={collection.id}
-          collection={collection}
-          index={index}
-        />
-      ))}
+      </PaginatedResourceSection>
     </div>
   );
 }

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx

@@ -1,13 +1,9 @@
 import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
-import {
-  Pagination,
-  getPaginationVariables,
-  Image,
-  Money,
-} from '@shopify/hydrogen';
+import {getPaginationVariables, Image, Money} from '@shopify/hydrogen';
 import type {ProductItemFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
 export const meta: MetaFunction<typeof loader> = () => {
   return [{title: `Hydrogen | Products`}];
@@ -57,36 +53,18 @@ export default function Collection() {
   return (
     <div className="collection">
       <h1>Products</h1>
-      <Pagination connection={products}>
-        {({nodes, isLoading, PreviousLink, NextLink}) => (
-          <>
-            <PreviousLink>
-              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
-            </PreviousLink>
-            <ProductsGrid products={nodes} />
-            <br />
-            <NextLink>
-              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
-            </NextLink>
-          </>
-        )}
-      </Pagination>
-    </div>
-  );
-}
-
-function ProductsGrid({products}: {products: ProductItemFragment[]}) {
-  return (
-    <div className="products-grid">
-      {products.map((product, index) => {
-        return (
+      <PaginatedResourceSection
+        connection={products}
+        resourcesClassName="products-grid"
+      >
+        {({node: product, index}) => (
           <ProductItem
             key={product.id}
             product={product}
             loading={index < 8 ? 'eager' : undefined}
           />
-        );
-      })}
+        )}
+      </PaginatedResourceSection>
     </div>
   );
 }