@shopify/cli 3.65.1 → 3.65.3

package/dist/assets/hydrogen/starter/app/components/SearchResults.tsx

@@ -0,0 +1,164 @@
+import {Link} from '@remix-run/react';
+import {Image, Money, Pagination} from '@shopify/hydrogen';
+import {urlWithTrackingParams, type RegularSearchReturn} from '~/lib/search';
+
+type SearchItems = RegularSearchReturn['result']['items'];
+type PartialSearchResult<ItemType extends keyof SearchItems> = Pick<
+  SearchItems,
+  ItemType
+> &
+  Pick<RegularSearchReturn, 'term'>;
+
+type SearchResultsProps = RegularSearchReturn & {
+  children: (args: SearchItems & {term: string}) => React.ReactNode;
+};
+
+export function SearchResults({
+  term,
+  result,
+  children,
+}: Omit<SearchResultsProps, 'error' | 'type'>) {
+  if (!result?.total) {
+    return null;
+  }
+
+  return children({...result.items, term});
+}
+
+SearchResults.Articles = SearchResultsArticles;
+SearchResults.Pages = SearchResultsPages;
+SearchResults.Products = SearchResultsProducts;
+SearchResults.Empty = SearchResultsEmpty;
+
+function SearchResultsArticles({
+  term,
+  articles,
+}: PartialSearchResult<'articles'>) {
+  if (!articles?.nodes.length) {
+    return null;
+  }
+
+  return (
+    <div className="search-result">
+      <h2>Articles</h2>
+      <div>
+        {articles?.nodes?.map((article) => {
+          const articleUrl = urlWithTrackingParams({
+            baseUrl: `/blogs/${article.handle}`,
+            trackingParams: article.trackingParameters,
+            term,
+          });
+
+          return (
+            <div className="search-results-item" key={article.id}>
+              <Link prefetch="intent" to={articleUrl}>
+                {article.title}
+              </Link>
+            </div>
+          );
+        })}
+      </div>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultsPages({term, pages}: PartialSearchResult<'pages'>) {
+  if (!pages?.nodes.length) {
+    return null;
+  }
+
+  return (
+    <div className="search-result">
+      <h2>Pages</h2>
+      <div>
+        {pages?.nodes?.map((page) => {
+          const pageUrl = urlWithTrackingParams({
+            baseUrl: `/pages/${page.handle}`,
+            trackingParams: page.trackingParameters,
+            term,
+          });
+
+          return (
+            <div className="search-results-item" key={page.id}>
+              <Link prefetch="intent" to={pageUrl}>
+                {page.title}
+              </Link>
+            </div>
+          );
+        })}
+      </div>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultsProducts({
+  term,
+  products,
+}: PartialSearchResult<'products'>) {
+  if (!products?.nodes.length) {
+    return null;
+  }
+
+  return (
+    <div className="search-result">
+      <h2>Products</h2>
+      <Pagination connection={products}>
+        {({nodes, isLoading, NextLink, PreviousLink}) => {
+          const ItemsMarkup = nodes.map((product) => {
+            const productUrl = urlWithTrackingParams({
+              baseUrl: `/products/${product.handle}`,
+              trackingParams: product.trackingParameters,
+              term,
+            });
+
+            return (
+              <div className="search-results-item" key={product.id}>
+                <Link prefetch="intent" to={productUrl}>
+                  {product.variants.nodes[0].image && (
+                    <Image
+                      data={product.variants.nodes[0].image}
+                      alt={product.title}
+                      width={50}
+                    />
+                  )}
+                  <div>
+                    <p>{product.title}</p>
+                    <small>
+                      <Money data={product.variants.nodes[0].price} />
+                    </small>
+                  </div>
+                </Link>
+              </div>
+            );
+          });
+
+          return (
+            <div>
+              <div>
+                <PreviousLink>
+                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+                </PreviousLink>
+              </div>
+              <div>
+                {ItemsMarkup}
+                <br />
+              </div>
+              <div>
+                <NextLink>
+                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+                </NextLink>
+              </div>
+            </div>
+          );
+        }}
+      </Pagination>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultsEmpty() {
+  return <p>No results, try a different search.</p>;
+}

package/dist/assets/hydrogen/starter/app/components/SearchResultsPredictive.tsx

@@ -0,0 +1,322 @@
+import {Link, useFetcher, type Fetcher} from '@remix-run/react';
+import {Image, Money} from '@shopify/hydrogen';
+import React, {useRef, useEffect} from 'react';
+import {
+  getEmptyPredictiveSearchResult,
+  urlWithTrackingParams,
+  type PredictiveSearchReturn,
+} from '~/lib/search';
+import {useAside} from './Aside';
+
+type PredictiveSearchItems = PredictiveSearchReturn['result']['items'];
+
+type UsePredictiveSearchReturn = {
+  term: React.MutableRefObject<string>;
+  total: number;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  items: PredictiveSearchItems;
+  fetcher: Fetcher<PredictiveSearchReturn>;
+};
+
+type SearchResultsPredictiveArgs = Pick<
+  UsePredictiveSearchReturn,
+  'term' | 'total' | 'inputRef' | 'items'
+> & {
+  state: Fetcher['state'];
+  closeSearch: () => void;
+};
+
+type PartialPredictiveSearchResult<
+  ItemType extends keyof PredictiveSearchItems,
+  ExtraProps extends keyof SearchResultsPredictiveArgs = 'term' | 'closeSearch',
+> = Pick<PredictiveSearchItems, ItemType> &
+  Pick<SearchResultsPredictiveArgs, ExtraProps>;
+
+type SearchResultsPredictiveProps = {
+  children: (args: SearchResultsPredictiveArgs) => React.ReactNode;
+};
+
+/**
+ * Component that renders predictive search results
+ */
+export function SearchResultsPredictive({
+  children,
+}: SearchResultsPredictiveProps) {
+  const aside = useAside();
+  const {term, inputRef, fetcher, total, items} = usePredictiveSearch();
+
+  /*
+   * Utility that resets the search input
+   */
+  function resetInput() {
+    if (inputRef.current) {
+      inputRef.current.blur();
+      inputRef.current.value = '';
+    }
+  }
+
+  /**
+   * Utility that resets the search input and closes the search aside
+   */
+  function closeSearch() {
+    resetInput();
+    aside.close();
+  }
+
+  return children({
+    items,
+    closeSearch,
+    inputRef,
+    state: fetcher.state,
+    term,
+    total,
+  });
+}
+
+SearchResultsPredictive.Articles = SearchResultsPredictiveArticles;
+SearchResultsPredictive.Collections = SearchResultsPredictiveCollections;
+SearchResultsPredictive.Pages = SearchResultsPredictivePages;
+SearchResultsPredictive.Products = SearchResultsPredictiveProducts;
+SearchResultsPredictive.Queries = SearchResultsPredictiveQueries;
+SearchResultsPredictive.Empty = SearchResultsPredictiveEmpty;
+
+function SearchResultsPredictiveArticles({
+  term,
+  articles,
+  closeSearch,
+}: PartialPredictiveSearchResult<'articles'>) {
+  if (!articles.length) return null;
+
+  return (
+    <div className="predictive-search-result" key="articles">
+      <h5>Articles</h5>
+      <ul>
+        {articles.map((article) => {
+          const articleUrl = urlWithTrackingParams({
+            baseUrl: `/blogs/${article.blog.handle}/${article.handle}`,
+            trackingParams: article.trackingParameters,
+            term: term.current ?? '',
+          });
+
+          return (
+            <li className="predictive-search-result-item" key={article.id}>
+              <Link onClick={closeSearch} to={articleUrl}>
+                {article.image?.url && (
+                  <Image
+                    alt={article.image.altText ?? ''}
+                    src={article.image.url}
+                    width={50}
+                    height={50}
+                  />
+                )}
+                <div>
+                  <span>{article.title}</span>
+                </div>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveCollections({
+  term,
+  collections,
+  closeSearch,
+}: PartialPredictiveSearchResult<'collections'>) {
+  if (!collections.length) return null;
+
+  return (
+    <div className="predictive-search-result" key="collections">
+      <h5>Collections</h5>
+      <ul>
+        {collections.map((collection) => {
+          const colllectionUrl = urlWithTrackingParams({
+            baseUrl: `/collections/${collection.handle}`,
+            trackingParams: collection.trackingParameters,
+            term: term.current,
+          });
+
+          return (
+            <li className="predictive-search-result-item" key={collection.id}>
+              <Link onClick={closeSearch} to={colllectionUrl}>
+                {collection.image?.url && (
+                  <Image
+                    alt={collection.image.altText ?? ''}
+                    src={collection.image.url}
+                    width={50}
+                    height={50}
+                  />
+                )}
+                <div>
+                  <span>{collection.title}</span>
+                </div>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictivePages({
+  term,
+  pages,
+  closeSearch,
+}: PartialPredictiveSearchResult<'pages'>) {
+  if (!pages.length) return null;
+
+  return (
+    <div className="predictive-search-result" key="pages">
+      <h5>Pages</h5>
+      <ul>
+        {pages.map((page) => {
+          const pageUrl = urlWithTrackingParams({
+            baseUrl: `/pages/${page.handle}`,
+            trackingParams: page.trackingParameters,
+            term: term.current,
+          });
+
+          return (
+            <li className="predictive-search-result-item" key={page.id}>
+              <Link onClick={closeSearch} to={pageUrl}>
+                <div>
+                  <span>{page.title}</span>
+                </div>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveProducts({
+  term,
+  products,
+  closeSearch,
+}: PartialPredictiveSearchResult<'products'>) {
+  if (!products.length) return null;
+
+  return (
+    <div className="predictive-search-result" key="products">
+      <h5>Products</h5>
+      <ul>
+        {products.map((product) => {
+          const productUrl = urlWithTrackingParams({
+            baseUrl: `/products/${product.handle}`,
+            trackingParams: product.trackingParameters,
+            term: term.current,
+          });
+
+          const image = product?.variants?.nodes?.[0].image;
+          return (
+            <li className="predictive-search-result-item" key={product.id}>
+              <Link to={productUrl} onClick={closeSearch}>
+                {image && (
+                  <Image
+                    alt={image.altText ?? ''}
+                    src={image.url}
+                    width={50}
+                    height={50}
+                  />
+                )}
+                <div>
+                  <p>{product.title}</p>
+                  <small>
+                    {product?.variants?.nodes?.[0].price && (
+                      <Money data={product.variants.nodes[0].price} />
+                    )}
+                  </small>
+                </div>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveQueries({
+  queries,
+  inputRef,
+}: PartialPredictiveSearchResult<'queries', 'inputRef'>) {
+  if (!queries.length) return null;
+
+  return (
+    <div className="predictive-search-result" key="queries">
+      <h5>Queries</h5>
+      <ul>
+        {queries.map((suggestion) => {
+          if (!suggestion) return null;
+
+          return (
+            <li className="predictive-search-result-item" key={suggestion.text}>
+              <div
+                role="presentation"
+                onClick={() => {
+                  if (!inputRef.current) return;
+                  inputRef.current.value = suggestion.text;
+                  inputRef.current.focus();
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: suggestion?.styledText,
+                }}
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveEmpty({
+  term,
+}: {
+  term: React.MutableRefObject<string>;
+}) {
+  if (!term.current) {
+    return null;
+  }
+
+  return (
+    <p>
+      No results found for <q>{term.current}</q>
+    </p>
+  );
+}
+
+/**
+ * Hook that returns the predictive search results and fetcher and input ref.
+ * @example
+ * '''ts
+ * const { items, total, inputRef, term, fetcher } = usePredictiveSearch();
+ * '''
+ **/
+function usePredictiveSearch(): UsePredictiveSearchReturn {
+  const fetcher = useFetcher<PredictiveSearchReturn>({key: 'search'});
+  const term = useRef<string>('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  if (fetcher?.state === 'loading') {
+    term.current = String(fetcher.formData?.get('q') || '');
+  }
+
+  // capture the search input element as a ref
+  useEffect(() => {
+    if (!inputRef.current) {
+      inputRef.current = document.querySelector('input[type="search"]');
+    }
+  }, []);
+
+  const {items, total} =
+    fetcher?.data?.result ?? getEmptyPredictiveSearchResult();
+
+  return {items, total, inputRef, term, fetcher};
+}

package/dist/assets/hydrogen/starter/app/entry.client.tsx

@@ -2,11 +2,13 @@ import {RemixBrowser} from '@remix-run/react';
 import {startTransition, StrictMode} from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>,
-  );
-});
+if (!window.location.origin.includes('webcache.googleusercontent.com')) {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}

package/dist/assets/hydrogen/starter/app/entry.server.tsx

@@ -15,7 +15,7 @@ export default async function handleRequest(
     shop: {
       checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
       storeDomain: context.env.PUBLIC_STORE_DOMAIN,
-    }
+    },
   });
 
   const body = await renderToReadableStream(

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

@@ -0,0 +1,43 @@
+import {createHydrogenContext} from '@shopify/hydrogen';
+import {AppSession} from '~/lib/session';
+import {CART_QUERY_FRAGMENT} from '~/lib/fragments';
+
+/**
+ * The context implementation is separate from server.ts
+ * so that type can be extracted for AppLoadContext
+ * */
+export async function createAppLoadContext(
+  request: Request,
+  env: Env,
+  executionContext: ExecutionContext,
+) {
+  /**
+   * Open a cache instance in the worker and a custom session instance.
+   */
+  if (!env?.SESSION_SECRET) {
+    throw new Error('SESSION_SECRET environment variable is not set');
+  }
+
+  const waitUntil = executionContext.waitUntil.bind(executionContext);
+  const [cache, session] = await Promise.all([
+    caches.open('hydrogen'),
+    AppSession.init(request, [env.SESSION_SECRET]),
+  ]);
+
+  const hydrogenContext = createHydrogenContext({
+    env,
+    request,
+    cache,
+    waitUntil,
+    session,
+    i18n: {language: 'EN', country: 'US'},
+    cart: {
+      queryFragment: CART_QUERY_FRAGMENT,
+    },
+  });
+
+  return {
+    ...hydrogenContext,
+    // declare additional Remix loader context
+  };
+}

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

@@ -55,6 +55,56 @@ export const CART_QUERY_FRAGMENT = `#graphql
       }
     }
   }
+  fragment CartLineComponent on ComponentizableCartLine {
+    id
+    quantity
+    attributes {
+      key
+      value
+    }
+    cost {
+      totalAmount {
+        ...Money
+      }
+      amountPerQuantity {
+        ...Money
+      }
+      compareAtAmountPerQuantity {
+        ...Money
+      }
+    }
+    merchandise {
+      ... on ProductVariant {
+        id
+        availableForSale
+        compareAtPrice {
+          ...Money
+        }
+        price {
+          ...Money
+        }
+        requiresShipping
+        title
+        image {
+          id
+          url
+          altText
+          width
+          height
+        }
+        product {
+          handle
+          title
+          id
+          vendor
+        }
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
   fragment CartApiQuery on Cart {
     updatedAt
     id
@@ -76,6 +126,9 @@ export const CART_QUERY_FRAGMENT = `#graphql
       nodes {
         ...CartLine
       }
+      nodes {
+        ...CartLineComponent
+      }
     }
     cost {
       subtotalAmount {