@shopify/cli 3.65.1 → 3.65.3

package/dist/assets/hydrogen/i18n/domains.ts

@@ -1,18 +1,13 @@
-import type {LanguageCode, CountryCode} from './mock-i18n-types.js';
+import type {I18nBase} from './mock-i18n-types.js';
 
-export type I18nLocale = {language: LanguageCode; country: CountryCode};
-
-/**
- * @returns {I18nLocale}
- */
-function getLocaleFromRequest(request: Request): I18nLocale {
-  const defaultLocale: I18nLocale = {language: 'EN', country: 'US'};
+export function getLocaleFromRequest(request: Request): I18nBase {
+  const defaultLocale: I18nBase = {language: 'EN', country: 'US'};
   const supportedLocales = {
     ES: 'ES',
     FR: 'FR',
     DE: 'DE',
     JP: 'JA',
-  } as Record<I18nLocale['country'], I18nLocale['language']>;
+  } as Record<I18nBase['country'], I18nBase['language']>;
 
   const url = new URL(request.url);
   const domain = url.hostname
@@ -24,5 +19,3 @@ function getLocaleFromRequest(request: Request): I18nLocale {
     ? {language: supportedLocales[domain], country: domain}
     : defaultLocale;
 }
-
-export {getLocaleFromRequest};

package/dist/assets/hydrogen/i18n/mock-i18n-types.ts

@@ -1,3 +1,5 @@
 // Mock types so we don't need to depend on Hydrogen React
-export type CountryCode = 'US' | 'ES' | 'FR' | 'DE' | 'JP';
-export type LanguageCode = 'EN' | 'ES' | 'FR' | 'DE' | 'JA';
+export type I18nBase = {
+  language: 'EN' | 'ES' | 'FR' | 'DE' | 'JA';
+  country: 'US' | 'ES' | 'FR' | 'DE' | 'JP';
+};

package/dist/assets/hydrogen/i18n/subdomains.ts

@@ -1,18 +1,13 @@
-import type {LanguageCode, CountryCode} from './mock-i18n-types.js';
+import type {I18nBase} from './mock-i18n-types.js';
 
-export type I18nLocale = {language: LanguageCode; country: CountryCode};
-
-/**
- * @returns {I18nLocale}
- */
-function getLocaleFromRequest(request: Request): I18nLocale {
-  const defaultLocale: I18nLocale = {language: 'EN', country: 'US'};
+export function getLocaleFromRequest(request: Request): I18nBase {
+  const defaultLocale: I18nBase = {language: 'EN', country: 'US'};
   const supportedLocales = {
     ES: 'ES',
     FR: 'FR',
     DE: 'DE',
     JP: 'JA',
-  } as Record<I18nLocale['country'], I18nLocale['language']>;
+  } as Record<I18nBase['country'], I18nBase['language']>;
 
   const url = new URL(request.url);
   const firstSubdomain = url.hostname
@@ -23,5 +18,3 @@ function getLocaleFromRequest(request: Request): I18nLocale {
     ? {language: supportedLocales[firstSubdomain], country: firstSubdomain}
     : defaultLocale;
 }
-
-export {getLocaleFromRequest};

package/dist/assets/hydrogen/i18n/subfolders.ts

@@ -1,15 +1,10 @@
-import type {LanguageCode, CountryCode} from './mock-i18n-types.js';
+import type {I18nBase} from './mock-i18n-types.js';
 
-export type I18nLocale = {
-  language: LanguageCode;
-  country: CountryCode;
+export interface I18nLocale extends I18nBase {
   pathPrefix: string;
-};
+}
 
-/**
- * @returns {I18nLocale}
- */
-function getLocaleFromRequest(request: Request): I18nLocale {
+export function getLocaleFromRequest(request: Request): I18nLocale {
   const url = new URL(request.url);
   const firstPathPart = url.pathname.split('/')[1]?.toUpperCase() ?? '';
 
@@ -25,5 +20,3 @@ function getLocaleFromRequest(request: Request): I18nLocale {
 
   return {language, country, pathPrefix};
 }
-
-export {getLocaleFromRequest};

package/dist/assets/hydrogen/starter/CHANGELOG.md

@@ -1,5 +1,170 @@
 # skeleton
 
+## 2024.7.4
+
+### Patch Changes
+
+- Search & Predictive Search improvements ([#2363](https://github.com/Shopify/hydrogen/pull/2363)) by [@juanpprieto](https://github.com/juanpprieto)
+
+- 1. Create a app/lib/context file and use `createHydrogenContext` in it. ([#2333](https://github.com/Shopify/hydrogen/pull/2333)) by [@michenly](https://github.com/michenly)
+
+  ```.ts
+  // in app/lib/context
+
+  import {createHydrogenContext} from '@shopify/hydrogen';
+
+  export async function createAppLoadContext(
+    request: Request,
+    env: Env,
+    executionContext: ExecutionContext,
+  ) {
+      const hydrogenContext = createHydrogenContext({
+        env,
+        request,
+        cache,
+        waitUntil,
+        session,
+        i18n: {language: 'EN', country: 'US'},
+        cart: {
+          queryFragment: CART_QUERY_FRAGMENT,
+        },
+        // ensure to overwrite any options that is not using the default values from your server.ts
+      });
+
+    return {
+      ...hydrogenContext,
+      // declare additional Remix loader context
+    };
+  }
+
+  ```
+
+  2. Use `createAppLoadContext` method in server.ts Ensure to overwrite any options that is not using the default values in `createHydrogenContext`.
+
+  ```diff
+  // in server.ts
+
+  - import {
+  -   createCartHandler,
+  -   createStorefrontClient,
+  -   createCustomerAccountClient,
+  - } from '@shopify/hydrogen';
+  + import {createAppLoadContext} from '~/lib/context';
+
+  export default {
+    async fetch(
+      request: Request,
+      env: Env,
+      executionContext: ExecutionContext,
+    ): Promise<Response> {
+
+  -   const {storefront} = createStorefrontClient(
+  -     ...
+  -   );
+
+  -   const customerAccount = createCustomerAccountClient(
+  -     ...
+  -   );
+
+  -   const cart = createCartHandler(
+  -     ...
+  -   );
+
+  +   const appLoadContext = await createAppLoadContext(
+  +      request,
+  +      env,
+  +      executionContext,
+  +   );
+
+      /**
+        * Create a Remix request handler and pass
+        * Hydrogen's Storefront client to the loader context.
+        */
+      const handleRequest = createRequestHandler({
+        build: remixBuild,
+        mode: process.env.NODE_ENV,
+  -      getLoadContext: (): AppLoadContext => ({
+  -        session,
+  -        storefront,
+  -        customerAccount,
+  -        cart,
+  -        env,
+  -        waitUntil,
+  -      }),
+  +      getLoadContext: () => appLoadContext,
+      });
+    }
+  ```
+
+  3. Use infer type for AppLoadContext in env.d.ts
+
+  ```diff
+  // in env.d.ts
+
+  + import type {createAppLoadContext} from '~/lib/context';
+
+  + interface AppLoadContext extends Awaited<ReturnType<typeof createAppLoadContext>> {
+  - interface AppLoadContext {
+  -  env: Env;
+  -  cart: HydrogenCart;
+  -  storefront: Storefront;
+  -  customerAccount: CustomerAccount;
+  -  session: AppSession;
+  -  waitUntil: ExecutionContext['waitUntil'];
+  }
+
+  ```
+
+- Use type `HydrogenEnv` for all the env.d.ts ([#2333](https://github.com/Shopify/hydrogen/pull/2333)) by [@michenly](https://github.com/michenly)
+
+  ```diff
+  // in env.d.ts
+
+  + import type {HydrogenEnv} from '@shopify/hydrogen';
+
+  + interface Env extends HydrogenEnv {}
+  - interface Env {
+  -   SESSION_SECRET: string;
+  -  PUBLIC_STOREFRONT_API_TOKEN: string;
+  -  PRIVATE_STOREFRONT_API_TOKEN: string;
+  -  PUBLIC_STORE_DOMAIN: string;
+  -  PUBLIC_STOREFRONT_ID: string;
+  -  PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
+  -  PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
+  -  PUBLIC_CHECKOUT_DOMAIN: string;
+  - }
+
+  ```
+
+- Add a hydration check for google web cache. This prevents an infinite redirect when viewing the cached version of a hydrogen site on Google. ([#2334](https://github.com/Shopify/hydrogen/pull/2334)) by [@blittle](https://github.com/blittle)
+
+  Update your entry.server.jsx file to include this check:
+
+  ```diff
+  + if (!window.location.origin.includes("webcache.googleusercontent.com")) {
+     startTransition(() => {
+       hydrateRoot(
+         document,
+         <StrictMode>
+           <RemixBrowser />
+         </StrictMode>
+       );
+     });
+  + }
+  ```
+
+- Updated dependencies [[`a2d9acf9`](https://github.com/Shopify/hydrogen/commit/a2d9acf95e019c39df0b10f4841a1d809b810c80), [`c0d7d917`](https://github.com/Shopify/hydrogen/commit/c0d7d9176c80b996064d8e897876f954807c7640), [`b09e9a4c`](https://github.com/Shopify/hydrogen/commit/b09e9a4ca7b931e48462c2d174ca9f67c37f1da2), [`c204eacf`](https://github.com/Shopify/hydrogen/commit/c204eacf0273f625109523ee81053cdc0c4de7e1), [`bf4e3d3c`](https://github.com/Shopify/hydrogen/commit/bf4e3d3c00744a066b50250a12e4f3c675691811), [`20a8e63b`](https://github.com/Shopify/hydrogen/commit/20a8e63b5fd1c8acadda7612c5d4cc411e0c5932), [`6e5d8ea7`](https://github.com/Shopify/hydrogen/commit/6e5d8ea71a2639925d5817b662af26a6b2ba3c6d), [`7c4f67a6`](https://github.com/Shopify/hydrogen/commit/7c4f67a684ad31edea10d1407d00201bbaaa9822), [`dfb9be77`](https://github.com/Shopify/hydrogen/commit/dfb9be7721c7d10cf4354fda60db4e666625518e), [`31ea19e8`](https://github.com/Shopify/hydrogen/commit/31ea19e8957dbc4487314b014a14920444d37f78)]:
+  - @shopify/cli-hydrogen@8.4.0
+  - @shopify/hydrogen@2024.7.3
+  - @shopify/remix-oxygen@2.0.6
+
+## 2024.7.3
+
+### Patch Changes
+
+- Updated dependencies [[`150854ed`](https://github.com/Shopify/hydrogen/commit/150854ed1352245eef180cc6b2bceb41dd8cc898)]:
+  - @shopify/hydrogen@2024.7.2
+
 ## 2024.7.2
 
 ### Patch Changes

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

@@ -5,6 +5,9 @@ import {useVariantUrl} from '~/lib/variants';
 import {Link} from '@remix-run/react';
 import {ProductPrice} from './ProductPrice';
 import {useAside} from './Aside';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+
+type CartLine = OptimisticCartLine<CartApiQueryFragment>;
 
 /**
  * A single line item in the cart. It displays the product image, title, price.
@@ -15,7 +18,7 @@ export function CartLineItem({
   line,
 }: {
   layout: CartLayout;
-  line: OptimisticCartLine;
+  line: CartLine;
 }) {
   const {id, merchandise} = line;
   const {product, title, image, selectedOptions} = merchandise;
@@ -70,7 +73,7 @@ export function CartLineItem({
  * These controls are disabled when the line item is new, and the server
  * hasn't yet responded that it was successfully added to the cart.
  */
-function CartLineQuantity({line}: {line: OptimisticCartLine}) {
+function CartLineQuantity({line}: {line: CartLine}) {
   if (!line || typeof line?.quantity === 'undefined') return null;
   const {id: lineId, quantity, isOptimistic} = line;
   const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));

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

@@ -1,4 +1,4 @@
-import {type OptimisticCartLine, useOptimisticCart} from '@shopify/hydrogen';
+import {useOptimisticCart} from '@shopify/hydrogen';
 import {Link} from '@remix-run/react';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
@@ -34,7 +34,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
       <div className="cart-details">
         <div aria-labelledby="cart-lines">
           <ul>
-            {(cart?.lines?.nodes ?? []).map((line: OptimisticCartLine) => (
+            {(cart?.lines?.nodes ?? []).map((line) => (
               <CartLineItem key={line.id} line={line} layout={layout} />
             ))}
           </ul>

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

@@ -1,4 +1,4 @@
-import {Await} from '@remix-run/react';
+import {Await, Link} from '@remix-run/react';
 import {Suspense} from 'react';
 import type {
   CartApiQueryFragment,
@@ -10,9 +10,10 @@ import {Footer} from '~/components/Footer';
 import {Header, HeaderMenu} from '~/components/Header';
 import {CartMain} from '~/components/CartMain';
 import {
-  PredictiveSearchForm,
-  PredictiveSearchResults,
-} from '~/components/Search';
+  SEARCH_ENDPOINT,
+  SearchFormPredictive,
+} from '~/components/SearchFormPredictive';
+import {SearchResultsPredictive} from '~/components/SearchResultsPredictive';
 
 interface PageLayoutProps {
   cart: Promise<CartApiQueryFragment | null>;
@@ -73,9 +74,9 @@ function SearchAside() {
     <Aside type="search" heading="SEARCH">
       <div className="predictive-search">
         <br />
-        <PredictiveSearchForm>
-          {({fetchResults, inputRef}) => (
-            <div>
+        <SearchFormPredictive>
+          {({fetchResults, goToSearch, inputRef}) => (
+            <>
               <input
                 name="q"
                 onChange={fetchResults}
@@ -85,19 +86,64 @@ function SearchAside() {
                 type="search"
               />
               &nbsp;
-              <button
-                onClick={() => {
-                  window.location.href = inputRef?.current?.value
-                    ? `/search?q=${inputRef.current.value}`
-                    : `/search`;
-                }}
-              >
-                Search
-              </button>
-            </div>
+              <button onClick={goToSearch}>Search</button>
+            </>
           )}
-        </PredictiveSearchForm>
-        <PredictiveSearchResults />
+        </SearchFormPredictive>
+
+        <SearchResultsPredictive>
+          {({items, total, term, state, inputRef, closeSearch}) => {
+            const {articles, collections, pages, products, queries} = items;
+
+            if (state === 'loading' && term.current) {
+              return <div>Loading...</div>;
+            }
+
+            if (!total) {
+              return <SearchResultsPredictive.Empty term={term} />;
+            }
+
+            return (
+              <>
+                <SearchResultsPredictive.Queries
+                  queries={queries}
+                  inputRef={inputRef}
+                />
+                <SearchResultsPredictive.Products
+                  products={products}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                <SearchResultsPredictive.Collections
+                  collections={collections}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                <SearchResultsPredictive.Pages
+                  pages={pages}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                <SearchResultsPredictive.Articles
+                  articles={articles}
+                  closeSearch={closeSearch}
+                  term={term}
+                />
+                {term.current && total ? (
+                  <Link
+                    onClick={closeSearch}
+                    to={`${SEARCH_ENDPOINT}?q=${term.current}`}
+                  >
+                    <p>
+                      View all results for <q>{term.current}</q>
+                      &nbsp; →
+                    </p>
+                  </Link>
+                ) : null}
+              </>
+            );
+          }}
+        </SearchResultsPredictive>
       </div>
     </Aside>
   );

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {Pagination} from '@shopify/hydrogen';
+
+/**
+ * <PaginatedResourceSection > is a component that encapsulate how the previous and next behaviors throughout your application.
+ */
+
+export function PaginatedResourceSection<NodesType>({
+  connection,
+  children,
+  resourcesClassName,
+}: {
+  connection: React.ComponentProps<typeof Pagination<NodesType>>['connection'];
+  children: React.FunctionComponent<{node: NodesType; index: number}>;
+  resourcesClassName?: string;
+}) {
+  return (
+    <Pagination connection={connection}>
+      {({nodes, isLoading, PreviousLink, NextLink}) => {
+        const resoucesMarkup = nodes.map((node, index) =>
+          children({node, index}),
+        );
+
+        return (
+          <div>
+            <PreviousLink>
+              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+            </PreviousLink>
+            {resourcesClassName ? (
+              <div className={resourcesClassName}>{resoucesMarkup}</div>
+            ) : (
+              resoucesMarkup
+            )}
+            <NextLink>
+              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+            </NextLink>
+          </div>
+        );
+      }}
+    </Pagination>
+  );
+}

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

@@ -0,0 +1,68 @@
+import {useRef, useEffect} from 'react';
+import {Form, type FormProps} from '@remix-run/react';
+
+type SearchFormProps = Omit<FormProps, 'children'> & {
+  children: (args: {
+    inputRef: React.RefObject<HTMLInputElement>;
+  }) => React.ReactNode;
+};
+
+/**
+ * Search form component that sends search requests to the `/search` route.
+ * @example
+ * ```tsx
+ * <SearchForm>
+ *  {({inputRef}) => (
+ *    <>
+ *      <input
+ *        ref={inputRef}
+ *        type="search"
+ *        defaultValue={term}
+ *        name="q"
+ *        placeholder="Search…"
+ *      />
+ *      <button type="submit">Search</button>
+ *   </>
+ *  )}
+ *  </SearchForm>
+ */
+export function SearchForm({children, ...props}: SearchFormProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useFocusOnCmdK(inputRef);
+
+  if (typeof children !== 'function') {
+    return null;
+  }
+
+  return (
+    <Form method="get" {...props}>
+      {children({inputRef})}
+    </Form>
+  );
+}
+
+/**
+ * Focuses the input when cmd+k is pressed
+ */
+function useFocusOnCmdK(inputRef: React.RefObject<HTMLInputElement>) {
+  // focus the input when cmd+k is pressed
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'k' && event.metaKey) {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+
+      if (event.key === 'Escape') {
+        inputRef.current?.blur();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [inputRef]);
+}

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

@@ -0,0 +1,76 @@
+import {
+  useFetcher,
+  useNavigate,
+  type FormProps,
+  type Fetcher,
+} from '@remix-run/react';
+import React, {useRef, useEffect} from 'react';
+import type {PredictiveSearchReturn} from '~/lib/search';
+import {useAside} from './Aside';
+
+type SearchFormPredictiveChildren = (args: {
+  fetchResults: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  goToSearch: () => void;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  fetcher: Fetcher<PredictiveSearchReturn>;
+}) => React.ReactNode;
+
+type SearchFormPredictiveProps = Omit<FormProps, 'children'> & {
+  children: SearchFormPredictiveChildren | null;
+};
+
+export const SEARCH_ENDPOINT = '/search';
+
+/**
+ *  Search form component that sends search requests to the `/search` route
+ **/
+export function SearchFormPredictive({
+  children,
+  className = 'predictive-search-form',
+  ...props
+}: SearchFormPredictiveProps) {
+  const fetcher = useFetcher<PredictiveSearchReturn>({key: 'search'});
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const navigate = useNavigate();
+  const aside = useAside();
+
+  /** Reset the input value and blur the input */
+  function resetInput(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (inputRef?.current?.value) {
+      inputRef.current.blur();
+    }
+  }
+
+  /** Navigate to the search page with the current input value */
+  function goToSearch() {
+    const term = inputRef?.current?.value;
+    navigate(SEARCH_ENDPOINT + (term ? `?q=${term}` : ''));
+    aside.close();
+  }
+
+  /** Fetch search results based on the input value */
+  function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
+    fetcher.submit(
+      {q: event.target.value || '', limit: 5, predictive: true},
+      {method: 'GET', action: SEARCH_ENDPOINT},
+    );
+  }
+
+  // ensure the passed input has a type of search, because SearchResults
+  // will select the element based on the input
+  useEffect(() => {
+    inputRef?.current?.setAttribute('type', 'search');
+  }, []);
+
+  if (typeof children !== 'function') {
+    return null;
+  }
+
+  return (
+    <fetcher.Form {...props} className={className} onSubmit={resetInput}>
+      {children({inputRef, fetcher, fetchResults, goToSearch})}
+    </fetcher.Form>
+  );
+}