@shopify/cli-hydrogen 11.1.10 → 11.1.12

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

@@ -1,5 +1,35 @@
 # skeleton
 
+## 2026.1.3
+
+### Patch Changes
+
+- Improve screen reader experience for paginated product grids by hiding decorative arrow characters from assistive technology. ([#3557](https://github.com/Shopify/hydrogen/pull/3557)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Fix broken `aria-label` on territory code input in address form. The label was the raw developer string `"territoryCode"` instead of a human-readable `"Country code"`. ([#3607](https://github.com/Shopify/hydrogen/pull/3607)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Add aria-label to ProductPrice for improved screen reader accessibility ([#3558](https://github.com/Shopify/hydrogen/pull/3558)) by [@itsjustriley](https://github.com/itsjustriley)
+
+- Updated dependencies [[`108243003a7f36349a446478f4e8ab0cade3e13a`](https://github.com/Shopify/hydrogen/commit/108243003a7f36349a446478f4e8ab0cade3e13a)]:
+  - @shopify/hydrogen@2026.1.3
+
+## 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

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/PaginatedResourceSection.tsx

@@ -2,15 +2,17 @@ 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.
+ * <PaginatedResourceSection> encapsulates the previous and next pagination behaviors throughout your application.
  */
 export function PaginatedResourceSection<NodesType>({
   connection,
   children,
+  ariaLabel,
   resourcesClassName,
 }: {
   connection: React.ComponentProps<typeof Pagination<NodesType>>['connection'];
   children: React.FunctionComponent<{node: NodesType; index: number}>;
+  ariaLabel?: string;
   resourcesClassName?: string;
 }) {
   return (
@@ -23,15 +25,33 @@ export function PaginatedResourceSection<NodesType>({
         return (
           <div>
             <PreviousLink>
-              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+              {isLoading ? (
+                'Loading...'
+              ) : (
+                <span>
+                  <span aria-hidden="true">↑</span> Load previous
+                </span>
+              )}
             </PreviousLink>
             {resourcesClassName ? (
-              <div className={resourcesClassName}>{resourcesMarkup}</div>
+              <div
+                aria-label={ariaLabel}
+                className={resourcesClassName}
+                role={ariaLabel ? 'region' : undefined}
+              >
+                {resourcesMarkup}
+              </div>
             ) : (
               resourcesMarkup
             )}
             <NextLink>
-              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+              {isLoading ? (
+                'Loading...'
+              ) : (
+                <span>
+                  Load more <span aria-hidden="true">↓</span>
+                </span>
+              )}
             </NextLink>
           </div>
         );

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

@@ -9,7 +9,7 @@ export function ProductPrice({
   compareAtPrice?: MoneyV2 | null;
 }) {
   return (
-    <div className="product-price">
+    <div aria-label="Price" className="product-price" role="group">
       {compareAtPrice ? (
         <div className="product-price-on-sale">
           {price ? <Money data={price} /> : null}

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

@@ -83,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>
@@ -97,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) => (
@@ -113,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 {};
 }
@@ -468,7 +468,7 @@ export function AddressForm({
         />
         <label htmlFor="territoryCode">Country Code*</label>
         <input
-          aria-label="territoryCode"
+          aria-label="Country code"
           autoComplete="country"
           defaultValue={address?.territoryCode ?? ''}
           id="territoryCode"

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/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2026.1.1",
+  "version": "2026.1.3",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,7 +14,7 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@shopify/hydrogen": "*2026.1.1",
+    "@shopify/hydrogen": "2026.1.3",
     "graphql": "^16.10.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^5.1.22",
@@ -30,9 +30,9 @@
     "@graphql-codegen/cli": "5.0.2",
     "@react-router/dev": "7.12.0",
     "@react-router/fs-routes": "7.12.0",
-    "@shopify/cli": "3.85.4",
+    "@shopify/cli": "3.91.1",
     "@shopify/hydrogen-codegen": "0.3.3",
-    "@shopify/mini-oxygen": "4.0.1",
+    "@shopify/mini-oxygen": "4.0.2",
     "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.6.1",

package/dist/assets/hydrogen/starter/storefrontapi.generated.d.ts

@@ -377,13 +377,6 @@ export type FooterQuery = {
   >;
 };
 
-export type StoreRobotsQueryVariables = StorefrontAPI.Exact<{
-  country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-}>;
-
-export type StoreRobotsQuery = {shop: Pick<StorefrontAPI.Shop, 'id'>};
-
 export type FeaturedCollectionFragment = Pick<
   StorefrontAPI.Collection,
   'id' | 'title' | 'handle'
@@ -1283,10 +1276,6 @@ interface GeneratedQueryTypes {
     return: FooterQuery;
     variables: FooterQueryVariables;
   };
-  '#graphql\n  query StoreRobots($country: CountryCode, $language: LanguageCode)\n   @inContext(country: $country, language: $language) {\n    shop {\n      id\n    }\n  }\n': {
-    return: StoreRobotsQuery;
-    variables: StoreRobotsQueryVariables;
-  };
   '#graphql\n  fragment FeaturedCollection on Collection {\n    id\n    title\n    image {\n      id\n      url\n      altText\n      width\n      height\n    }\n    handle\n  }\n  query FeaturedCollection($country: CountryCode, $language: LanguageCode)\n    @inContext(country: $country, language: $language) {\n    collections(first: 1, sortKey: UPDATED_AT, reverse: true) {\n      nodes {\n        ...FeaturedCollection\n      }\n    }\n  }\n': {
     return: FeaturedCollectionQuery;
     variables: FeaturedCollectionQueryVariables;

package/dist/assets/hydrogen/starter/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [hydrogen(), oxygen(), reactRouter(), tsconfigPaths()],
   build: {
     // Allow a strict Content-Security-Policy
-    // withtout inlining assets as base64:
+    // without inlining assets as base64:
     assetsInlineLimit: 0,
   },
   ssr: {

package/dist/assets/hydrogen/vite/vite.config.js

@@ -21,7 +21,7 @@ export default defineConfig({
   ],
   build: {
     // Allow a strict Content-Security-Policy
-    // withtout inlining assets as base64:
+    // without inlining assets as base64:
     assetsInlineLimit: 0,
   },
   ssr: {

package/dist/commands/hydrogen/dev.js

@@ -7,7 +7,7 @@ import { renderSuccess, renderInfo } from '@shopify/cli-kit/node/ui';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { removeFile } from '@shopify/cli-kit/node/fs';
 import { setH2OVerbose, isH2Verbose, muteDevLogs, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, overrideFlag, flagsToCamelObject, DEFAULT_INSPECTOR_PORT, DEFAULT_APP_PORT } from '../../lib/flags.js';
+import { commonFlags, overrideFlag, flagsToCamelObject, DEFAULT_APP_PORT, DEFAULT_INSPECTOR_PORT } from '../../lib/flags.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { displayDevUpgradeNotice } from './upgrade.js';
@@ -103,6 +103,9 @@ async function runDev({
   if (!process.env.NODE_ENV) process.env.NODE_ENV = "development";
   if (verbose) setH2OVerbose();
   if (!isH2Verbose()) muteDevLogs();
+  if (appPort === 0) {
+    appPort = await findPort(DEFAULT_APP_PORT);
+  }
   const root = appPath ?? process.cwd();
   const cliCommandPromise = getCliCommand(root);
   const backgroundPromise = getDevConfigInBackground(

package/dist/commands/hydrogen/upgrade.js

@@ -6,7 +6,7 @@ import { ensureInsideGitDirectory, isClean } from '@shopify/cli-kit/node/git';
 import Command from '@shopify/cli-kit/node/base-command';
 import { renderSuccess, renderInfo, renderConfirmationPrompt, renderTasks, renderSelectPrompt, renderWarning } from '@shopify/cli-kit/node/ui';
 import { isDirectory, readFile, mkdir, fileExists, touchFile, removeFile, writeFile } from '@shopify/cli-kit/node/fs';
-import { getPackageManager, getDependencies, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { getPackageManager, getDependencies } from '@shopify/cli-kit/node/node-package-manager';
 import { exec } from '@shopify/cli-kit/node/system';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { resolvePath, joinPath, dirname } from '@shopify/cli-kit/node/path';
@@ -106,7 +106,7 @@ async function runUpgrade({
       availableUpgrades,
       currentDependencies
     });
-    cumulativeRelease = getCummulativeRelease({
+    cumulativeRelease = getCumulativeRelease({
       availableUpgrades,
       currentVersion,
       currentDependencies,
@@ -128,7 +128,11 @@ async function runUpgrade({
     appPath,
     selectedRelease,
     currentDependencies,
-    targetVersion
+    targetVersion,
+    cumulativeRemoveDependencies: cumulativeRelease.removeDependencies,
+    cumulativeRemoveDevDependencies: cumulativeRelease.removeDevDependencies,
+    cumulativeDependencies: cumulativeRelease.dependencies,
+    cumulativeDevDependencies: cumulativeRelease.devDependencies
   });
   await validateUpgrade({
     appPath,
@@ -336,20 +340,31 @@ async function getSelectedRelease({
   ) : void 0;
   return targetRelease ?? promptUpgradeOptions(currentVersion, availableUpgrades);
 }
-function getCummulativeRelease({
+function getCumulativeRelease({
   availableUpgrades,
   selectedRelease,
   currentVersion,
   currentDependencies
 }) {
   const currentPinnedVersion = getAbsoluteVersion(currentVersion);
-  if (!availableUpgrades?.length) {
-    return { features: [], fixes: [] };
-  }
+  const empty = {
+    features: [],
+    fixes: [],
+    removeDependencies: [],
+    removeDevDependencies: [],
+    dependencies: {},
+    devDependencies: {}
+  };
+  if (!availableUpgrades?.length) return empty;
   if (selectedRelease.dependencies?.["@shopify/hydrogen"] === "next") {
     return {
+      ...empty,
       features: selectedRelease.features || [],
-      fixes: selectedRelease.fixes || []
+      fixes: selectedRelease.fixes || [],
+      removeDependencies: selectedRelease.removeDependencies ?? [],
+      removeDevDependencies: selectedRelease.removeDevDependencies ?? [],
+      dependencies: selectedRelease.dependencies ?? {},
+      devDependencies: selectedRelease.devDependencies ?? {}
     };
   }
   const upgradingReleases = availableUpgrades.filter((release) => {
@@ -359,14 +374,65 @@ function getCummulativeRelease({
     if (!isSameHydrogenVersion || !currentDependencies) return false;
     return hasOutdatedDependencies({ release, currentDependencies });
   });
-  return upgradingReleases.reduce(
-    (acc, release) => {
-      acc.features = [...acc.features, ...release.features];
-      acc.fixes = [...acc.fixes, ...release.fixes];
-      return acc;
-    },
-    { features: [], fixes: [] }
+  const features = upgradingReleases.flatMap((r) => r.features);
+  const fixes = upgradingReleases.flatMap((r) => r.fixes);
+  const releasesByVersion = [...upgradingReleases].sort(
+    (a, b) => semver.compare(a.version, b.version)
   );
+  const removedDepsAt = /* @__PURE__ */ new Map();
+  const removedDevDepsAt = /* @__PURE__ */ new Map();
+  releasesByVersion.forEach((release, i) => {
+    release.removeDependencies?.forEach((dep) => {
+      removedDepsAt.set(dep, i);
+    });
+    release.removeDevDependencies?.forEach((dep) => {
+      removedDevDepsAt.set(dep, i);
+    });
+  });
+  const reinstalledDeps = /* @__PURE__ */ new Set();
+  const reinstalledDevDeps = /* @__PURE__ */ new Set();
+  for (let i = 0; i < releasesByVersion.length; i++) {
+    const release = releasesByVersion[i];
+    if (!release) continue;
+    const dependencies2 = release.dependencies ?? {};
+    const devDependencies2 = release.devDependencies ?? {};
+    Object.keys(dependencies2).forEach((dep) => {
+      const removalI = removedDepsAt.get(dep);
+      if (removalI !== void 0 && i >= removalI) {
+        reinstalledDeps.add(dep);
+      }
+    });
+    Object.keys(devDependencies2).forEach((dep) => {
+      const removalI = removedDevDepsAt.get(dep);
+      if (removalI !== void 0 && i >= removalI) {
+        reinstalledDevDeps.add(dep);
+      }
+    });
+  }
+  const removeDependencies = [
+    ...new Set(
+      releasesByVersion.flatMap((r) => r.removeDependencies ?? []).filter((dep) => !reinstalledDeps.has(dep))
+    )
+  ];
+  const removeDevDependencies = [
+    ...new Set(
+      releasesByVersion.flatMap((r) => r.removeDevDependencies ?? []).filter((dep) => !reinstalledDevDeps.has(dep))
+    )
+  ];
+  const dependencies = {};
+  const devDependencies = {};
+  for (const release of releasesByVersion) {
+    Object.assign(dependencies, release.dependencies ?? {});
+    Object.assign(devDependencies, release.devDependencies ?? {});
+  }
+  return {
+    features,
+    fixes,
+    removeDependencies,
+    removeDevDependencies,
+    dependencies,
+    devDependencies
+  };
 }
 function displayConfirmation({
   cumulativeRelease,
@@ -377,7 +443,7 @@ function displayConfirmation({
   if (features.length || fixes.length) {
     renderInfo({
       headline: `Included in this upgrade:`,
-      //@ts-ignore we know that filter(Boolean) will always return an array
+      // @ts-expect-error - filter(Boolean) removes falsy values, leaving only objects
       customSections: [
         features.length && {
           title: "Features",
@@ -461,10 +527,20 @@ function maybeIncludeDependency({
 function buildUpgradeCommandArgs({
   selectedRelease,
   currentDependencies,
-  targetVersion
+  targetVersion,
+  cumulativeDependencies,
+  cumulativeDevDependencies
 }) {
   const args = [];
-  for (const dependency of Object.entries(selectedRelease.dependencies)) {
+  const effectiveDependencies = {
+    ...cumulativeDependencies ?? {},
+    ...selectedRelease.dependencies
+  };
+  const effectiveDevDependencies = {
+    ...cumulativeDevDependencies ?? {},
+    ...selectedRelease.devDependencies
+  };
+  for (const dependency of Object.entries(effectiveDependencies)) {
     const shouldUpgradeDep = maybeIncludeDependency({
       currentDependencies,
       dependency,
@@ -480,7 +556,7 @@ function buildUpgradeCommandArgs({
       )}`
     );
   }
-  for (const dependency of Object.entries(selectedRelease.devDependencies)) {
+  for (const dependency of Object.entries(effectiveDevDependencies)) {
     const shouldUpgradeDep = maybeIncludeDependency({
       currentDependencies,
       dependency,
@@ -497,7 +573,7 @@ function buildUpgradeCommandArgs({
     );
   }
   const currentRemix = Object.entries(currentDependencies).find(isRemixDependency);
-  const selectedRemix = Object.entries(selectedRelease.dependencies).find(
+  const selectedRemix = Object.entries(effectiveDependencies).find(
     isRemixDependency
   );
   if (currentRemix && selectedRemix) {
@@ -514,7 +590,7 @@ function buildUpgradeCommandArgs({
   const currentReactRouter = Object.entries(currentDependencies).find(
     isReactRouterDependency
   );
-  const selectedReactRouter = Object.entries(selectedRelease.dependencies).find(
+  const selectedReactRouter = Object.entries(effectiveDependencies).find(
     isReactRouterDependency
   );
   if (selectedReactRouter) {
@@ -537,12 +613,16 @@ async function upgradeNodeModules({
   appPath,
   selectedRelease,
   currentDependencies,
-  targetVersion
+  targetVersion,
+  cumulativeRemoveDependencies,
+  cumulativeRemoveDevDependencies,
+  cumulativeDependencies,
+  cumulativeDevDependencies
 }) {
   const tasks = [];
   const depsToRemove = [
-    ...selectedRelease.removeDependencies || [],
-    ...selectedRelease.removeDevDependencies || []
+    ...cumulativeRemoveDependencies,
+    ...cumulativeRemoveDevDependencies
   ].filter((dep) => dep in currentDependencies);
   if (depsToRemove.length > 0) {
     tasks.push({
@@ -559,17 +639,24 @@ async function upgradeNodeModules({
   const upgradeArgs = buildUpgradeCommandArgs({
     selectedRelease,
     currentDependencies,
-    targetVersion
+    targetVersion,
+    cumulativeDependencies,
+    cumulativeDevDependencies
   });
   if (upgradeArgs.length > 0) {
     tasks.push({
       title: `Upgrading dependencies`,
       task: async () => {
-        await installNodeModules({
-          directory: appPath,
-          packageManager: await getPackageManager(appPath),
-          args: upgradeArgs
-        });
+        const packageManager = await getPackageManager(appPath);
+        const command = packageManager === "npm" ? "install" : packageManager === "yarn" ? "add" : packageManager === "pnpm" ? "add" : packageManager === "bun" ? "install" : "install";
+        const extraArgs = packageManager === "npm" || packageManager === "unknown" ? ["--legacy-peer-deps"] : [];
+        await exec(
+          resolvePackageManagerName(packageManager),
+          [command, ...extraArgs, ...upgradeArgs],
+          {
+            cwd: appPath
+          }
+        );
       }
     });
   }
@@ -577,6 +664,9 @@ async function upgradeNodeModules({
     await renderTasks(tasks, {});
   }
 }
+function resolvePackageManagerName(packageManager) {
+  return packageManager === "unknown" ? "npm" : packageManager;
+}
 async function uninstallNodeModules({
   directory,
   packageManager,
@@ -584,8 +674,12 @@ async function uninstallNodeModules({
 }) {
   if (args.length === 0) return;
   const command = packageManager === "npm" ? "uninstall" : packageManager === "yarn" ? "remove" : packageManager === "pnpm" ? "remove" : packageManager === "bun" ? "remove" : "uninstall";
-  const actualPackageManager = packageManager === "unknown" ? "npm" : packageManager;
-  await exec(actualPackageManager, [command, ...args], { cwd: directory });
+  const extraArgs = packageManager === "npm" || packageManager === "unknown" ? ["--legacy-peer-deps"] : [];
+  await exec(
+    resolvePackageManagerName(packageManager),
+    [command, ...extraArgs, ...args],
+    { cwd: directory }
+  );
 }
 function appendRemixDependencies({
   currentDependencies,
@@ -954,4 +1048,4 @@ async function displayDevUpgradeNotice({
   }
 }
 
-export { buildUpgradeCommandArgs, Upgrade as default, displayConfirmation, displayDevUpgradeNotice, getAbsoluteVersion, getAvailableUpgrades, getChangelog, getCummulativeRelease, getHydrogenVersion, getPackageVersion, getSelectedRelease, isRunningFromHydrogenMonorepo, runUpgrade, upgradeNodeModules, validateUpgrade };
+export { buildUpgradeCommandArgs, Upgrade as default, displayConfirmation, displayDevUpgradeNotice, getAbsoluteVersion, getAvailableUpgrades, getChangelog, getCumulativeRelease, getHydrogenVersion, getPackageVersion, getSelectedRelease, isRunningFromHydrogenMonorepo, runUpgrade, upgradeNodeModules, validateUpgrade };

package/dist/lib/onboarding/common.js

@@ -277,6 +277,8 @@ async function handleDependencies(projectDir, controller, packageManagerFromFlag
         cancellationMessage: "No",
         abortSignal: controller.signal
       });
+    } else {
+      actualPackageManager = detectedPackageManager;
     }
   }
   if (isHydrogenMonorepo) {

package/dist/lib/patch-cli.js

@@ -0,0 +1,198 @@
+import { readFileSync, existsSync, writeFileSync, unlinkSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+function isErrnoException(err) {
+  return err instanceof Error && "code" in err;
+}
+const MARKER = "// [hydrogen-monorepo-patch]";
+function getRunJsPath(root) {
+  return resolve(root, "node_modules", "@shopify", "cli", "bin", "run.js");
+}
+function isPatchApplied(content) {
+  return content.includes(MARKER);
+}
+function generatePatchedContent() {
+  return `#!/usr/bin/env node
+${MARKER}
+
+// Mirrors upstream @shopify/cli/bin/run.js behavior.
+// This is not introduced by the patch \u2014 @shopify/cli ships with this line.
+// Changing it here would create a behavioral divergence between dev and production.
+process.removeAllListeners('warning')
+
+// --- Monorepo detection ---
+// Walk up from cwd to find the hydrogen monorepo root.
+// We look for packages/cli/package.json with the correct package name \u2014
+// if it matches, we know we're inside the monorepo and should load the
+// local @shopify/cli-hydrogen
+const {existsSync, readFileSync} = await import('node:fs');
+const {resolve, dirname} = await import('node:path');
+
+let monorepoRoot = null;
+let dir = process.cwd();
+while (true) {
+  const candidate = resolve(dir, 'packages', 'cli', 'package.json');
+  if (existsSync(candidate)) {
+    try {
+      const pkg = JSON.parse(readFileSync(candidate, 'utf8'));
+      if (pkg.name === '@shopify/cli-hydrogen') {
+        monorepoRoot = dir;
+        break;
+      }
+    } catch {
+      // Ignore malformed package.json and keep walking
+    }
+  }
+  const parent = dirname(dir);
+  if (parent === dir) break; // reached filesystem root
+  dir = parent;
+}
+
+if (monorepoRoot) {
+  // We're in the hydrogen monorepo. Start @shopify/cli normally but
+  // inject pluginAdditions so oclif loads @shopify/cli-hydrogen from
+  // the monorepo's workspace (packages/cli) instead of the version
+  // bundled inside @shopify/cli/dist.
+  //
+  // This uses the same pluginAdditions mechanism that ShopifyConfig
+  // uses internally
+  const {fileURLToPath} = await import('node:url');
+  const {Config, run, flush} = await import('@oclif/core');
+
+  // root must point to @shopify/cli's installed location so oclif
+  // can find its package.json, oclif config, and bundled commands.
+  const cliRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+  const c = '\\x1b[38;5;209m';
+  const d = '\\x1b[2m';
+  const r = '\\x1b[0m';
+  console.log('');
+  console.log(c + '  \u250C\u2500\u2500 hydrogen-monorepo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510' + r);
+  console.log(c + '  \u2502' + r + '                                                          ' + c + '\u2502' + r);
+  console.log(c + '  \u2502' + r + '  Using local cli-hydrogen plugin from packages/cli       ' + c + '\u2502' + r);
+  console.log(c + '  \u2502' + r + d + '  Bundled commands replaced with local source             ' + r + c + '\u2502' + r);
+  console.log(c + '  \u2502' + r + '                                                          ' + c + '\u2502' + r);
+  console.log(c + '  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518' + r);
+  console.log('');
+
+  // Tell ShopifyConfig to skip its own monorepo detection since we
+  // are handling pluginAdditions ourselves.
+  process.env.IGNORE_HYDROGEN_MONOREPO = '1';
+
+  const config = new Config({
+    root: cliRoot,
+    // pluginAdditions tells oclif's plugin loader to read the
+    // monorepo root's package.json, find @shopify/cli-hydrogen in
+    // its dependencies (workspace:*), and load that as a core plugin.
+    // Because workspace:* symlinks to packages/cli, oclif loads the
+    // local source code \u2014 exactly what we want for development.
+    pluginAdditions: {
+      core: ['@shopify/cli-hydrogen'],
+      path: monorepoRoot,
+    },
+    // Skip the oclif manifest cache so commands are loaded fresh from
+    // disk rather than from a potentially stale oclif.manifest.json.
+    ignoreManifest: true,
+  });
+
+  await config.load();
+
+  // --- Post-load command replacement ---
+  // After loading, both the bundled hydrogen commands (from @shopify/cli's
+  // root plugin) and the local ones (from pluginAdditions) are registered.
+  // Since @shopify/cli@3.83.0 (which upgraded to oclif v4),
+  // determinePriority is no longer an overridable instance method, so we
+  // manually replace the bundled commands with the external plugin's
+  // versions using oclif's private _commands Map.
+  const externalPlugin = Array.from(config.plugins.values()).find(
+    (p) => p.name === '@shopify/cli-hydrogen' && !p.isRoot,
+  );
+
+  if (!externalPlugin) {
+    throw new Error(
+      '[hydrogen-monorepo] Could not find local @shopify/cli-hydrogen plugin. ' +
+      'The patch may need updating for the current @shopify/cli version.'
+    );
+  }
+
+  const cmds = config._commands;
+  if (!cmds || !(cmds instanceof Map)) {
+    throw new Error(
+      '[hydrogen-monorepo] Cannot replace bundled commands \u2014 oclif internals changed. ' +
+      'The patch may need updating for the current oclif version.'
+    );
+  }
+
+  // Delete bundled hydrogen commands (canonical IDs + aliases + hidden aliases)
+  for (const command of externalPlugin.commands) {
+    if (!command.id.startsWith('hydrogen')) continue;
+    cmds.delete(command.id);
+    for (const alias of [...(command.aliases ?? []), ...(command.hiddenAliases ?? [])]) {
+      cmds.delete(alias);
+    }
+  }
+  // Re-insert commands from the local plugin. loadCommands handles
+  // alias registration and command permutations correctly.
+  config.loadCommands(externalPlugin);
+
+  await run(process.argv.slice(2), config);
+  await flush();
+} else {
+  // Not in the monorepo \u2014 run the standard @shopify/cli entrypoint.
+  const {default: runCLI} = await import('../dist/index.js');
+  runCLI({development: false});
+}
+`;
+}
+function generateOriginalContent() {
+  return `#!/usr/bin/env node
+
+process.removeAllListeners('warning')
+
+import runCLI from '../dist/index.js'
+
+runCLI({development: false})
+`;
+}
+function applyPatch(runJsPath) {
+  let current;
+  try {
+    current = readFileSync(runJsPath, "utf8");
+  } catch (err) {
+    if (isErrnoException(err) && err.code === "ENOENT") {
+      throw new Error(
+        `@shopify/cli is not installed (${runJsPath} not found). Run 'pnpm install' first.`
+      );
+    }
+    throw err;
+  }
+  if (isPatchApplied(current)) return false;
+  const backupPath = runJsPath + ".backup";
+  if (!existsSync(backupPath)) {
+    writeFileSync(backupPath, current);
+  }
+  writeFileSync(runJsPath, generatePatchedContent());
+  return true;
+}
+function removePatch(runJsPath) {
+  let current;
+  try {
+    current = readFileSync(runJsPath, "utf8");
+  } catch (err) {
+    if (isErrnoException(err) && err.code === "ENOENT") {
+      return false;
+    }
+    throw err;
+  }
+  if (!isPatchApplied(current)) return false;
+  const backupPath = runJsPath + ".backup";
+  const hasBackup = existsSync(backupPath);
+  const original = hasBackup ? readFileSync(backupPath, "utf8") : generateOriginalContent();
+  writeFileSync(runJsPath, original);
+  if (hasBackup) {
+    unlinkSync(backupPath);
+  }
+  return true;
+}
+
+export { MARKER, applyPatch, generateOriginalContent, generatePatchedContent, getRunJsPath, isPatchApplied, removePatch };

package/dist/lib/template-pack.js

@@ -1,8 +1,14 @@
+import { createReadStream } from 'node:fs';
 import { execFileSync } from 'node:child_process';
 import { readFile, writeFile, mkdtemp, rm } from 'node:fs/promises';
-import { join } from 'node:path';
+import { join, isAbsolute } from 'node:path';
+import { pipeline } from 'node:stream/promises';
 import { tmpdir } from 'node:os';
+import gunzipMaybe from 'gunzip-maybe';
+import { extract } from 'tar-fs';
 
+const WINDOWS_SHELL_OPTS = process.platform === "win32" ? { shell: true } : {};
+const PNPM_PACK_TIMEOUT_IN_MS = 6e4;
 const DEPENDENCY_SECTIONS = [
   "dependencies",
   "devDependencies",
@@ -20,7 +26,9 @@ async function getPackedTemplatePackageJson(sourceTemplateDir) {
       ["pack", "--pack-destination", tempDir, "--json"],
       {
         cwd: sourceTemplateDir,
-        encoding: "utf8"
+        encoding: "utf8",
+        timeout: PNPM_PACK_TIMEOUT_IN_MS,
+        ...WINDOWS_SHELL_OPTS
       }
     );
     const parsedResult = JSON.parse(rawPackResult.trim());
@@ -28,14 +36,15 @@ async function getPackedTemplatePackageJson(sourceTemplateDir) {
     if (!packedTarball) {
       throw new Error("pnpm pack did not return a tarball filename.");
     }
-    const packedManifestRaw = execFileSync(
-      "tar",
-      [
-        "-xOf",
-        packedTarball.startsWith("/") ? packedTarball : join(tempDir, packedTarball),
-        "package/package.json"
-      ],
-      { encoding: "utf8" }
+    const tarballPath = isAbsolute(packedTarball) ? packedTarball : join(tempDir, packedTarball);
+    await pipeline(
+      createReadStream(tarballPath),
+      gunzipMaybe(),
+      extract(tempDir)
+    );
+    const packedManifestRaw = await readFile(
+      join(tempDir, "package", "package.json"),
+      "utf8"
     );
     return JSON.parse(packedManifestRaw);
   } finally {
@@ -81,4 +90,4 @@ async function replaceWorkspaceProtocolVersions({
   );
 }
 
-export { replaceWorkspaceProtocolVersions };
+export { WINDOWS_SHELL_OPTS, replaceWorkspaceProtocolVersions };

package/oclif.manifest.json

@@ -1676,5 +1676,5 @@
       ]
     }
   },
-  "version": "11.1.10"
+  "version": "11.1.12"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "11.1.10",
+  "version": "11.1.12",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -58,8 +58,8 @@
     "@react-router/dev": "7.12.0",
     "graphql-config": "^5.0.3",
     "vite": "^5.1.0 || ^6.2.0",
-    "@shopify/hydrogen-codegen": "0.3.3",
-    "@shopify/mini-oxygen": "4.0.1"
+    "@shopify/mini-oxygen": "4.0.2",
+    "@shopify/hydrogen-codegen": "0.3.3"
   },
   "peerDependenciesMeta": {
     "@graphql-codegen/cli": {