@shopify/cli-hydrogen 11.1.9 → 11.1.11

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

@@ -1,5 +1,33 @@
 # skeleton
 
+## 2026.1.2
+
+### Patch Changes
+
+- Improve gift card accessibility in Skeleton template ([#3518](https://github.com/Shopify/hydrogen/pull/3518)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Updated shopify/cli dependencies for cli-hydrogen ([#3553](https://github.com/Shopify/hydrogen/pull/3553)) by [@andguy95](https://github.com/andguy95)
+
+- Updated loaders that used `customerAccount.handleAuthStatus()` to now await it. ([#3523](https://github.com/Shopify/hydrogen/pull/3523)) by [@fredericoo](https://github.com/fredericoo)
+
+  ### Migration
+
+  If you call `handleAuthStatus()` in your own loaders, update those callsites to use `await`.
+
+- Updated dependencies [[`16b0e7baca0dfd1fb330d12dac924c7593d169a8`](https://github.com/Shopify/hydrogen/commit/16b0e7baca0dfd1fb330d12dac924c7593d169a8), [`1c19b87782818dbdb4252754d2d44eb9a44fe50f`](https://github.com/Shopify/hydrogen/commit/1c19b87782818dbdb4252754d2d44eb9a44fe50f), [`029fa2d0e2297f67b37c650ba8e875ee5dee81b3`](https://github.com/Shopify/hydrogen/commit/029fa2d0e2297f67b37c650ba8e875ee5dee81b3)]:
+  - @shopify/hydrogen@2026.1.2
+
+## 2026.1.1
+
+### Patch Changes
+
+- Added a notice with relevant information on how to link a store in case there is no store linked yet ([#3448](https://github.com/Shopify/hydrogen/pull/3448)) by [@fredericoo](https://github.com/fredericoo)
+
+- Fixed an issue where users without addresses could not add the first one ([#3456](https://github.com/Shopify/hydrogen/pull/3456)) by [@fredericoo](https://github.com/fredericoo)
+
+- Updated dependencies [[`ff93a1daf2207e52e1f8331f9ff2ccd1f9b7fed6`](https://github.com/Shopify/hydrogen/commit/ff93a1daf2207e52e1f8331f9ff2ccd1f9b7fed6)]:
+  - @shopify/hydrogen@2026.1.1
+
 ## 2026.1.0
 
 ### Major Changes

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

@@ -5,6 +5,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import {useId} from 'react';
 
 type AsideType = 'search' | 'cart' | 'mobile' | 'closed';
 type AsideContextValue = {
@@ -34,7 +35,7 @@ export function Aside({
 }) {
   const {type: activeType, close} = useAside();
   const expanded = type === activeType;
-
+  const id = useId();
   useEffect(() => {
     const abortController = new AbortController();
 
@@ -57,11 +58,12 @@ export function Aside({
       aria-modal
       className={`overlay ${expanded ? 'expanded' : ''}`}
       role="dialog"
+      aria-labelledby={id}
     >
       <button className="close-outside" onClick={close} />
       <aside>
         <header>
-          <h3>{heading}</h3>
+          <h3 id={id}>{heading}</h3>
           <button className="close reset" onClick={close} aria-label="Close">
             &times;
           </button>

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

@@ -1,4 +1,4 @@
-import {useOptimisticCart, type OptimisticCartLine} from '@shopify/hydrogen';
+import {useOptimisticCart} from '@shopify/hydrogen';
 import {Link} from 'react-router';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
@@ -50,7 +50,10 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
   const childrenMap = getLineItemChildrenMap(cart?.lines?.nodes ?? []);
 
   return (
-    <div className={className}>
+    <section
+      className={className}
+      aria-label={layout === 'page' ? 'Cart page' : 'Cart drawer'}
+    >
       <CartEmpty hidden={linesCount} layout={layout} />
       <div className="cart-details">
         <p id="cart-lines" className="sr-only">
@@ -79,7 +82,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
         </div>
         {cartHasItems && <CartSummary cart={cart} layout={layout} />}
       </div>
-    </div>
+    </section>
   );
 }
 

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

@@ -1,7 +1,7 @@
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
-import {useEffect, useRef} from 'react';
+import {useEffect, useId, useRef, useState} from 'react';
 import {useFetcher} from 'react-router';
 
 type CartSummaryProps = {
@@ -12,11 +12,16 @@ type CartSummaryProps = {
 export function CartSummary({cart, layout}: CartSummaryProps) {
   const className =
     layout === 'page' ? 'cart-summary-page' : 'cart-summary-aside';
+  const summaryId = useId();
+  const discountsHeadingId = useId();
+  const discountCodeInputId = useId();
+  const giftCardHeadingId = useId();
+  const giftCardInputId = useId();
 
   return (
-    <div aria-labelledby="cart-summary" className={className}>
-      <h4>Totals</h4>
-      <dl className="cart-subtotal">
+    <div aria-labelledby={summaryId} className={className}>
+      <h4 id={summaryId}>Totals</h4>
+      <dl role="group" className="cart-subtotal">
         <dt>Subtotal</dt>
         <dd>
           {cart?.cost?.subtotalAmount?.amount ? (
@@ -26,8 +31,16 @@ export function CartSummary({cart, layout}: CartSummaryProps) {
           )}
         </dd>
       </dl>
-      <CartDiscounts discountCodes={cart?.discountCodes} />
-      <CartGiftCard giftCardCodes={cart?.appliedGiftCards} />
+      <CartDiscounts
+        discountCodes={cart?.discountCodes}
+        discountsHeadingId={discountsHeadingId}
+        discountCodeInputId={discountCodeInputId}
+      />
+      <CartGiftCard
+        giftCardCodes={cart?.appliedGiftCards}
+        giftCardHeadingId={giftCardHeadingId}
+        giftCardInputId={giftCardInputId}
+      />
       <CartCheckoutActions checkoutUrl={cart?.checkoutUrl} />
     </div>
   );
@@ -48,8 +61,12 @@ function CartCheckoutActions({checkoutUrl}: {checkoutUrl?: string}) {
 
 function CartDiscounts({
   discountCodes,
+  discountsHeadingId,
+  discountCodeInputId,
 }: {
   discountCodes?: CartApiQueryFragment['discountCodes'];
+  discountsHeadingId: string;
+  discountCodeInputId: string;
 }) {
   const codes: string[] =
     discountCodes
@@ -57,13 +74,17 @@ function CartDiscounts({
       ?.map(({code}) => code) || [];
 
   return (
-    <div>
+    <section aria-label="Discounts">
       {/* Have existing discount, display it with a remove option */}
       <dl hidden={!codes.length}>
         <div>
-          <dt>Discount(s)</dt>
+          <dt id={discountsHeadingId}>Discounts</dt>
           <UpdateDiscountForm>
-            <div className="cart-discount">
+            <div
+              className="cart-discount"
+              role="group"
+              aria-labelledby={discountsHeadingId}
+            >
               <code>{codes?.join(', ')}</code>
               &nbsp;
               <button type="submit" aria-label="Remove discount">
@@ -77,11 +98,11 @@ function CartDiscounts({
       {/* Show an input to apply a discount */}
       <UpdateDiscountForm discountCodes={codes}>
         <div>
-          <label htmlFor="discount-code-input" className="sr-only">
+          <label htmlFor={discountCodeInputId} className="sr-only">
             Discount code
           </label>
           <input
-            id="discount-code-input"
+            id={discountCodeInputId}
             type="text"
             name="discountCode"
             placeholder="Discount code"
@@ -92,7 +113,7 @@ function CartDiscounts({
           </button>
         </div>
       </UpdateDiscountForm>
-    </div>
+    </section>
   );
 }
 
@@ -118,52 +139,110 @@ function UpdateDiscountForm({
 
 function CartGiftCard({
   giftCardCodes,
+  giftCardHeadingId,
+  giftCardInputId,
 }: {
   giftCardCodes: CartApiQueryFragment['appliedGiftCards'] | undefined;
+  giftCardHeadingId: string;
+  giftCardInputId: string;
 }) {
   const giftCardCodeInput = useRef<HTMLInputElement>(null);
+  const removeButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const previousCardIdsRef = useRef<string[]>([]);
   const giftCardAddFetcher = useFetcher({key: 'gift-card-add'});
+  const [removedCardIndex, setRemovedCardIndex] = useState<number | null>(null);
 
   useEffect(() => {
     if (giftCardAddFetcher.data) {
-      giftCardCodeInput.current!.value = '';
+      if (giftCardCodeInput.current !== null) {
+        giftCardCodeInput.current.value = '';
+      }
     }
   }, [giftCardAddFetcher.data]);
 
+  useEffect(() => {
+    const currentCardIds = giftCardCodes?.map((card) => card.id) || [];
+
+    if (removedCardIndex !== null && giftCardCodes) {
+      const focusTargetIndex = Math.min(
+        removedCardIndex,
+        giftCardCodes.length - 1,
+      );
+      const focusTargetCard = giftCardCodes[focusTargetIndex];
+      const focusButton = focusTargetCard
+        ? removeButtonRefs.current.get(focusTargetCard.id)
+        : null;
+
+      if (focusButton) {
+        focusButton.focus();
+      } else if (giftCardCodeInput.current) {
+        giftCardCodeInput.current.focus();
+      }
+
+      setRemovedCardIndex(null);
+    }
+
+    previousCardIdsRef.current = currentCardIds;
+  }, [giftCardCodes, removedCardIndex]);
+
+  const handleRemoveClick = (cardId: string) => {
+    const index = previousCardIdsRef.current.indexOf(cardId);
+    if (index !== -1) {
+      setRemovedCardIndex(index);
+    }
+  };
+
   return (
-    <div>
+    <section aria-label="Gift cards">
       {giftCardCodes && giftCardCodes.length > 0 && (
         <dl>
-          <dt>Applied Gift Card(s)</dt>
+          <dt id={giftCardHeadingId}>Applied Gift Card(s)</dt>
           {giftCardCodes.map((giftCard) => (
-            <RemoveGiftCardForm key={giftCard.id} giftCardId={giftCard.id}>
-              <div className="cart-discount">
+            <dd key={giftCard.id} className="cart-discount">
+              <RemoveGiftCardForm
+                giftCardId={giftCard.id}
+                lastCharacters={giftCard.lastCharacters}
+                onRemoveClick={() => handleRemoveClick(giftCard.id)}
+                buttonRef={(el: HTMLButtonElement | null) => {
+                  if (el) {
+                    removeButtonRefs.current.set(giftCard.id, el);
+                  } else {
+                    removeButtonRefs.current.delete(giftCard.id);
+                  }
+                }}
+              >
                 <code>***{giftCard.lastCharacters}</code>
                 &nbsp;
                 <Money data={giftCard.amountUsed} />
-                &nbsp;
-                <button type="submit">Remove</button>
-              </div>
-            </RemoveGiftCardForm>
+              </RemoveGiftCardForm>
+            </dd>
           ))}
         </dl>
       )}
 
       <AddGiftCardForm fetcherKey="gift-card-add">
         <div>
+          <label htmlFor={giftCardInputId} className="sr-only">
+            Gift card code
+          </label>
           <input
+            id={giftCardInputId}
             type="text"
             name="giftCardCode"
             placeholder="Gift card code"
             ref={giftCardCodeInput}
           />
           &nbsp;
-          <button type="submit" disabled={giftCardAddFetcher.state !== 'idle'}>
+          <button
+            type="submit"
+            disabled={giftCardAddFetcher.state !== 'idle'}
+            aria-label="Apply gift card code"
+          >
             Apply
           </button>
         </div>
       </AddGiftCardForm>
-    </div>
+    </section>
   );
 }
 
@@ -187,10 +266,16 @@ function AddGiftCardForm({
 
 function RemoveGiftCardForm({
   giftCardId,
+  lastCharacters,
   children,
+  onRemoveClick,
+  buttonRef,
 }: {
   giftCardId: string;
+  lastCharacters: string;
   children: React.ReactNode;
+  onRemoveClick?: () => void;
+  buttonRef?: (el: HTMLButtonElement | null) => void;
 }) {
   return (
     <CartForm
@@ -201,6 +286,15 @@ function RemoveGiftCardForm({
       }}
     >
       {children}
+      &nbsp;
+      <button
+        type="submit"
+        aria-label={`Remove gift card ending in ${lastCharacters}`}
+        onClick={onRemoveClick}
+        ref={buttonRef}
+      >
+        Remove
+      </button>
     </CartForm>
   );
 }

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

@@ -136,7 +136,7 @@ function SearchToggle() {
   );
 }
 
-function CartBadge({count}: {count: number | null}) {
+function CartBadge({count}: {count: number}) {
   const {open} = useAside();
   const {publish, shop, cart, prevCart} = useAnalytics();
 
@@ -154,14 +154,14 @@ function CartBadge({count}: {count: number | null}) {
         } as CartViewPayload);
       }}
     >
-      Cart {count === null ? <span>&nbsp;</span> : count}
+      Cart <span aria-label={`(items: ${count})`}>{count}</span>
     </a>
   );
 }
 
 function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
   return (
-    <Suspense fallback={<CartBadge count={null} />}>
+    <Suspense fallback={<CartBadge count={0} />}>
       <Await resolve={cart}>
         <CartBanner />
       </Await>

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

@@ -0,0 +1,20 @@
+export function MockShopNotice() {
+  return (
+    <section
+      className="mock-shop-notice"
+      aria-labelledby="mock-shop-notice-heading"
+    >
+      <div className="inner">
+        <h2 id="mock-shop-notice-heading">Welcome to Hydrogen!</h2>
+        <p>
+          You&rsquo;re seeing mocked products because no store is connected to
+          this project yet.
+        </p>
+        <p>
+          Link a store by running <code>npx shopify hydrogen link</code> in your
+          terminal.
+        </p>
+      </div>
+    </section>
+  );
+}

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

@@ -6,9 +6,8 @@ import {NonceProvider} from '@shopify/hydrogen';
 if (!window.location.origin.includes('webcache.googleusercontent.com')) {
   startTransition(() => {
     // Extract nonce from existing script tags
-    const existingNonce = document
-      .querySelector<HTMLScriptElement>('script[nonce]')
-      ?.nonce;
+    const existingNonce =
+      document.querySelector<HTMLScriptElement>('script[nonce]')?.nonce;
 
     hydrateRoot(
       document,

package/dist/assets/hydrogen/starter/app/routes/[robots.txt].tsx

@@ -1,13 +1,8 @@
 import type {Route} from './+types/[robots.txt]';
-import {parseGid} from '@shopify/hydrogen';
 
-export async function loader({request, context}: Route.LoaderArgs) {
+export function loader({request}: Route.LoaderArgs) {
   const url = new URL(request.url);
-
-  const {shop} = await context.storefront.query(ROBOTS_QUERY);
-
-  const shopId = parseGid(shop.id).id;
-  const body = robotsTxtData({url: url.origin, shopId});
+  const body = robotsTxtData({url: url.origin});
 
   return new Response(body, {
     status: 200,
@@ -19,35 +14,31 @@ export async function loader({request, context}: Route.LoaderArgs) {
   });
 }
 
-function robotsTxtData({url, shopId}: {shopId?: string; url?: string}) {
+function robotsTxtData({url}: {url?: string}) {
   const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
 
   return `
 User-agent: *
-${generalDisallowRules({sitemapUrl, shopId})}
+${generalDisallowRules({sitemapUrl})}
 
 # Google adsbot ignores robots.txt unless specifically named!
 User-agent: adsbot-google
-Disallow: /checkouts/
-Disallow: /checkout
-Disallow: /carts
-Disallow: /orders
-${shopId ? `Disallow: /${shopId}/checkouts` : ''}
-${shopId ? `Disallow: /${shopId}/orders` : ''}
-Disallow: /*?*oseid=*
-Disallow: /*preview_theme_id*
-Disallow: /*preview_script_id*
+Disallow: /cart
+Disallow: /account
+Disallow: /search
+Allow: /search/
+Disallow: /search/?*
 
 User-agent: Nutch
 Disallow: /
 
 User-agent: AhrefsBot
 Crawl-delay: 10
-${generalDisallowRules({sitemapUrl, shopId})}
+${generalDisallowRules({sitemapUrl})}
 
 User-agent: AhrefsSiteAudit
 Crawl-delay: 10
-${generalDisallowRules({sitemapUrl, shopId})}
+${generalDisallowRules({sitemapUrl})}
 
 User-agent: MJ12bot
 Crawl-Delay: 10
@@ -61,21 +52,8 @@ Crawl-delay: 1
  * This function generates disallow rules that generally follow what Shopify's
  * Online Store has as defaults for their robots.txt
  */
-function generalDisallowRules({
-  shopId,
-  sitemapUrl,
-}: {
-  shopId?: string;
-  sitemapUrl?: string;
-}) {
-  return `Disallow: /admin
-Disallow: /cart
-Disallow: /orders
-Disallow: /checkouts/
-Disallow: /checkout
-${shopId ? `Disallow: /${shopId}/checkouts` : ''}
-${shopId ? `Disallow: /${shopId}/orders` : ''}
-Disallow: /carts
+function generalDisallowRules({sitemapUrl}: {sitemapUrl?: string}) {
+  return `Disallow: /cart
 Disallow: /account
 Disallow: /collections/*sort_by*
 Disallow: /*/collections/*sort_by*
@@ -85,33 +63,16 @@ Disallow: /collections/*%2b*
 Disallow: /*/collections/*+*
 Disallow: /*/collections/*%2B*
 Disallow: /*/collections/*%2b*
-Disallow: */collections/*filter*&*filter*
+Disallow: /*/collections/*filter*&*filter*
 Disallow: /blogs/*+*
 Disallow: /blogs/*%2B*
 Disallow: /blogs/*%2b*
 Disallow: /*/blogs/*+*
 Disallow: /*/blogs/*%2B*
 Disallow: /*/blogs/*%2b*
-Disallow: /*?*oseid=*
-Disallow: /*preview_theme_id*
-Disallow: /*preview_script_id*
 Disallow: /policies/
-Disallow: /*/*?*ls=*&ls=*
-Disallow: /*/*?*ls%3D*%3Fls%3D*
-Disallow: /*/*?*ls%3d*%3fls%3d*
 Disallow: /search
 Allow: /search/
 Disallow: /search/?*
-Disallow: /apple-app-site-association
-Disallow: /.well-known/shopify/monorail
 ${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}`;
 }
-
-const ROBOTS_QUERY = `#graphql
-  query StoreRobots($country: CountryCode, $language: LanguageCode)
-   @inContext(country: $country, language: $language) {
-    shop {
-      id
-    }
-  }
-` as const;

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

@@ -1,8 +1,4 @@
-import {
-  Await,
-  useLoaderData,
-  Link,
-} from 'react-router';
+import {Await, useLoaderData, Link} from 'react-router';
 import type {Route} from './+types/_index';
 import {Suspense} from 'react';
 import {Image} from '@shopify/hydrogen';
@@ -11,6 +7,7 @@ import type {
   RecommendedProductsQuery,
 } from 'storefrontapi.generated';
 import {ProductItem} from '~/components/ProductItem';
+import {MockShopNotice} from '~/components/MockShopNotice';
 
 export const meta: Route.MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
@@ -37,6 +34,7 @@ async function loadCriticalData({context}: Route.LoaderArgs) {
   ]);
 
   return {
+    isShopLinked: Boolean(context.env.PUBLIC_STORE_DOMAIN),
     featuredCollection: collections.nodes[0],
   };
 }
@@ -64,6 +62,7 @@ export default function Homepage() {
   const data = useLoaderData<typeof loader>();
   return (
     <div className="home">
+      {data.isShopLinked ? null : <MockShopNotice />}
       <FeaturedCollection collection={data.featuredCollection} />
       <RecommendedProducts products={data.recommendedProducts} />
     </div>
@@ -84,7 +83,11 @@ function FeaturedCollection({
     >
       {image && (
         <div className="featured-collection-image">
-          <Image data={image} sizes="100vw" />
+          <Image
+            data={image}
+            sizes="100vw"
+            alt={image.altText || collection.title}
+          />
         </div>
       )}
       <h1>{collection.title}</h1>
@@ -98,8 +101,11 @@ function RecommendedProducts({
   products: Promise<RecommendedProductsQuery | null>;
 }) {
   return (
-    <div className="recommended-products">
-      <h2>Recommended Products</h2>
+    <section
+      className="recommended-products"
+      aria-labelledby="recommended-products"
+    >
+      <h2 id="recommended-products">Recommended Products</h2>
       <Suspense fallback={<div>Loading...</div>}>
         <Await resolve={products}>
           {(response) => (
@@ -114,7 +120,7 @@ function RecommendedProducts({
         </Await>
       </Suspense>
       <br />
-    </div>
+    </section>
   );
 }
 

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

@@ -3,7 +3,7 @@ import type {Route} from './+types/account.$';
 
 // fallback wild card for all unauthenticated routes in account section
 export async function loader({context}: Route.LoaderArgs) {
-  context.customerAccount.handleAuthStatus();
+  await context.customerAccount.handleAuthStatus();
 
   return redirect('/account');
 }

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

@@ -32,7 +32,7 @@ export const meta: Route.MetaFunction = () => {
 };
 
 export async function loader({context}: Route.LoaderArgs) {
-  context.customerAccount.handleAuthStatus();
+  await context.customerAccount.handleAuthStatus();
 
   return {};
 }
@@ -264,23 +264,23 @@ export default function Addresses() {
     <div className="account-addresses">
       <h2>Addresses</h2>
       <br />
-      {!addresses.nodes.length ? (
-        <p>You have no addresses saved.</p>
-      ) : (
+      <div>
         <div>
-          <div>
-            <legend>Create address</legend>
-            <NewAddressForm />
-          </div>
-          <br />
-          <hr />
-          <br />
+          <legend>Create address</legend>
+          <NewAddressForm key={addresses.nodes.length} />
+        </div>
+        <br />
+        <hr />
+        <br />
+        {!addresses.nodes.length ? (
+          <p>You have no addresses saved.</p>
+        ) : (
           <ExistingAddresses
             addresses={addresses}
             defaultAddress={defaultAddress}
           />
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }

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

@@ -20,7 +20,7 @@ export const meta: Route.MetaFunction = () => {
 };
 
 export async function loader({context}: Route.LoaderArgs) {
-  context.customerAccount.handleAuthStatus();
+  await context.customerAccount.handleAuthStatus();
 
   return {};
 }

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

@@ -14,14 +14,11 @@ export function shouldRevalidate() {
 
 export async function loader({context}: Route.LoaderArgs) {
   const {customerAccount} = context;
-  const {data, errors} = await customerAccount.query(
-    CUSTOMER_DETAILS_QUERY,
-    {
-      variables: {
-        language: customerAccount.i18n.language,
-      },
+  const {data, errors} = await customerAccount.query(CUSTOMER_DETAILS_QUERY, {
+    variables: {
+      language: customerAccount.i18n.language,
     },
-  );
+  });
 
   if (errors?.length || !data?.customer) {
     throw new Error('Customer not found');