@shopify/create-hydrogen 5.0.28 → 5.0.30

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');

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

@@ -1,7 +1,4 @@
-import {
-  Link,
-  useLoaderData,
-} from 'react-router';
+import {Link, useLoaderData} from 'react-router';
 import type {Route} from './+types/blogs.$blogHandle._index';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
@@ -26,11 +23,7 @@ export async function loader(args: Route.LoaderArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  request,
-  params,
-}: Route.LoaderArgs) {
+async function loadCriticalData({context, request, params}: Route.LoaderArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });

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

@@ -1,7 +1,4 @@
-import {
-  Link,
-  useLoaderData,
-} from 'react-router';
+import {Link, useLoaderData} from 'react-router';
 import type {Route} from './+types/blogs._index';
 import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';

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

@@ -1,8 +1,4 @@
-import {
-  useLoaderData,
-  data,
-  type HeadersFunction,
-} from 'react-router';
+import {useLoaderData, data, type HeadersFunction} from 'react-router';
 import type {Route} from './+types/cart';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';

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

@@ -1,7 +1,5 @@
 import type {Route} from './+types/collections.all';
-import {
-  useLoaderData,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
 import {getPaginationVariables, Image, Money} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {ProductItem} from '~/components/ProductItem';

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

@@ -1,6 +1,4 @@
-import {
-  useLoaderData,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
 import type {Route} from './+types/pages.$handle';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
@@ -22,11 +20,7 @@ export async function loader(args: Route.LoaderArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  request,
-  params,
-}: Route.LoaderArgs) {
+async function loadCriticalData({context, request, params}: Route.LoaderArgs) {
   if (!params.handle) {
     throw new Error('Missing page handle');
   }

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

@@ -1,7 +1,4 @@
-import {
-  Link,
-  useLoaderData,
-} from 'react-router';
+import {Link, useLoaderData} from 'react-router';
 import type {Route} from './+types/policies.$handle';
 import {type Shop} from '@shopify/hydrogen/storefront-api-types';
 

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

@@ -4,7 +4,7 @@ import type {PoliciesQuery, PolicyItemFragment} from 'storefrontapi.generated';
 
 export async function loader({context}: Route.LoaderArgs) {
   const data: PoliciesQuery = await context.storefront.query(POLICIES_QUERY);
-  
+
   const shopPolicies = data.shop;
   const policies: PolicyItemFragment[] = [
     shopPolicies?.privacyPolicy,

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

@@ -1,7 +1,4 @@
-import {
-  redirect,
-  useLoaderData,
-} from 'react-router';
+import {redirect, useLoaderData} from 'react-router';
 import type {Route} from './+types/products.$handle';
 import {
   getSelectedProductOptions,
@@ -40,11 +37,7 @@ export async function loader(args: Route.LoaderArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  params,
-  request,
-}: Route.LoaderArgs) {
+async function loadCriticalData({context, params, request}: Route.LoaderArgs) {
   const {handle} = params;
   const {storefront} = context;
 

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

@@ -1,6 +1,4 @@
-import {
-  useLoaderData,
-} from 'react-router';
+import {useLoaderData} from 'react-router';
 import type {Route} from './+types/search';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {SearchForm} from '~/components/SearchForm';
@@ -10,7 +8,10 @@ import {
   type PredictiveSearchReturn,
   getEmptyPredictiveSearchResult,
 } from '~/lib/search';
-import type {RegularSearchQuery, PredictiveSearchQuery} from 'storefrontapi.generated';
+import type {
+  RegularSearchQuery,
+  PredictiveSearchQuery,
+} from 'storefrontapi.generated';
 
 export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Search`}];
@@ -225,9 +226,13 @@ async function regularSearch({
   const term = String(url.searchParams.get('q') || '');
 
   // Search articles, pages, and products for the `q` term
-  const {errors, ...items}: {errors?: Array<{message: string}>} & RegularSearchQuery = await storefront.query(SEARCH_QUERY, {
-    variables: {...variables, term},
-  });
+  const {
+    errors,
+    ...items
+  }: {errors?: Array<{message: string}>} & RegularSearchQuery =
+    await storefront.query(SEARCH_QUERY, {
+      variables: {...variables, term},
+    });
 
   if (!items) {
     throw new Error('No search data returned from Shopify API');
@@ -389,17 +394,18 @@ async function predictiveSearch({
   if (!term) return {type, term, result: getEmptyPredictiveSearchResult()};
 
   // Predictively search articles, collections, pages, products, and queries (suggestions)
-  const {predictiveSearch: items, errors}: PredictiveSearchQuery & {errors?: Array<{message: string}>} = await storefront.query(
-    PREDICTIVE_SEARCH_QUERY,
-    {
+  const {
+    predictiveSearch: items,
+    errors,
+  }: PredictiveSearchQuery & {errors?: Array<{message: string}>} =
+    await storefront.query(PREDICTIVE_SEARCH_QUERY, {
       variables: {
         // customize search options as needed
         limit,
         limitScope: 'EACH',
         term,
       },
-    },
-  );
+    });
 
   if (errors) {
     throw new Error(

package/dist/assets/hydrogen/starter/app/styles/app.css

@@ -22,6 +22,57 @@ img {
   cursor: pointer;
 }
 
+/*
+* --------------------------------------------------
+* components/MockShopNotice
+* --------------------------------------------------
+*/
+.mock-shop-notice {
+  background: var(--color-light);
+  border: 1px solid var(--color-dark);
+  border-left-width: 0.5rem;
+  margin: 1rem 0;
+  padding: 0;
+
+  .inner {
+    padding: 0.875rem 1rem;
+  }
+
+  h2 {
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+
+  p {
+    font-size: 1rem;
+    line-height: 1.4;
+    margin-bottom: 0.5rem;
+  }
+
+  footer {
+    background: rgba(0, 0, 0, 0.06);
+    padding: 0.5rem 1rem;
+  }
+
+  .small {
+    font-size: 0.875rem;
+    line-height: 1.4;
+    margin-bottom: 0.5rem;
+  }
+
+  code {
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 0.25rem;
+    padding: 0.1em 0.3em;
+  }
+
+  a {
+    text-decoration: underline;
+    text-underline-offset: 6px;
+  }
+}
+
 /*
 * --------------------------------------------------
 * components/Aside

package/dist/assets/hydrogen/starter/guides/predictiveSearch/predictiveSearch.md

@@ -15,7 +15,7 @@ This integration uses the storefront API (SFAPI) [predictiveSearch](https://shop
 
 | File                                                                                             | Description                                                                                                                                            |
 | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [`app/components/SearchFormPredictive.tsx`](../../app/components/SearchFormPredictive.tsx)       | A fully customizable form component configured to make form `GET` requests to the `/search` route.                                                    |
+| [`app/components/SearchFormPredictive.tsx`](../../app/components/SearchFormPredictive.tsx)       | A fully customizable form component configured to make form `GET` requests to the `/search` route.                                                     |
 | [`app/components/SearchResultsPredictive.tsx`](../../app/components/SearchResultsPredictive.tsx) | A fully customizable search results wrapper, that provides compound components to render `articles`, `pages`, `products`, `collections` and `queries`. |
 
 ## Instructions
@@ -217,10 +217,10 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const isPredictive = url.searchParams.has('predictive');
 
   if (!isPredictive) {
-    return {}
+    return {};
   }
 
-  const searchPromise = predictiveSearch({request, context})
+  const searchPromise = predictiveSearch({request, context});
 
   searchPromise.catch((error: Error) => {
     console.error(error);

package/dist/assets/hydrogen/starter/guides/search/search.md

@@ -212,7 +212,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const isRegular = !url.searchParams.has('predictive');
 
   if (!isRegular) {
-    return {}
+    return {};
   }
 
   const searchPromise = regularSearch({request, context});

package/dist/assets/hydrogen/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.10.1",
+  "version": "2026.1.2",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,12 +14,12 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@shopify/hydrogen": "2025.10.1",
+    "@shopify/hydrogen": "2026.1.2",
     "graphql": "^16.10.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^5.1.22",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router": "7.12.0",
     "react-router-dom": "7.12.0"
   },
@@ -30,15 +30,15 @@
     "@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/hydrogen-codegen": "^0.3.3",
-    "@shopify/mini-oxygen": "^4.0.0",
+    "@shopify/cli": "3.91.1",
+    "@shopify/hydrogen-codegen": "0.3.3",
+    "@shopify/mini-oxygen": "4.0.1",
     "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/eslint": "^9.6.1",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "eslint": "^9.18.0",
@@ -58,6 +58,6 @@
     "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": "^22 || ^24"
   }
 }

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: {