@shopify/cli-hydrogen 10.0.2 → 10.1.0

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

@@ -1,5 +1,14 @@
 # skeleton
 
+## 2025.4.1
+
+### Patch Changes
+
+- Add a new tokenless Storefront API route to the starter template. ([#2948](https://github.com/Shopify/hydrogen/pull/2948)) by [@blittle](https://github.com/blittle)
+
+- Updated dependencies [[`d44fab3d`](https://github.com/Shopify/hydrogen/commit/d44fab3d07c5e255edcd22745d4d7e2db2c3e60f)]:
+  - @shopify/hydrogen@2025.4.1
+
 ## 2025.4.0
 
 ### Patch Changes
@@ -164,13 +173,13 @@
   1. Add a routes.ts file. This is your new Remix route configuration file.
 
      ```ts
-     import {flatRoutes} from '@remix-run/fs-routes';
-     import {layout, type RouteConfig} from '@remix-run/route-config';
-     import {hydrogenRoutes} from '@shopify/hydrogen';
+     import { flatRoutes } from "@remix-run/fs-routes";
+     import { layout, type RouteConfig } from "@remix-run/route-config";
+     import { hydrogenRoutes } from "@shopify/hydrogen";
 
      export default hydrogenRoutes([
        // Your entire app reading from routes folder using Layout from layout.tsx
-       layout('./layout.tsx', await flatRoutes()),
+       layout("./layout.tsx", await flatRoutes()),
      ]) satisfies RouteConfig;
      ```
 
@@ -761,25 +770,25 @@
   8. Update the `ProductForm` component.
 
   ```tsx
-  import {Link, useNavigate} from '@remix-run/react';
-  import {type MappedProductOptions} from '@shopify/hydrogen';
+  import { Link, useNavigate } from "@remix-run/react";
+  import { type MappedProductOptions } from "@shopify/hydrogen";
   import type {
     Maybe,
     ProductOptionValueSwatch,
-  } from '@shopify/hydrogen/storefront-api-types';
-  import {AddToCartButton} from './AddToCartButton';
-  import {useAside} from './Aside';
-  import type {ProductFragment} from 'storefrontapi.generated';
+  } from "@shopify/hydrogen/storefront-api-types";
+  import { AddToCartButton } from "./AddToCartButton";
+  import { useAside } from "./Aside";
+  import type { ProductFragment } from "storefrontapi.generated";
 
   export function ProductForm({
     productOptions,
     selectedVariant,
   }: {
     productOptions: MappedProductOptions[];
-    selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
+    selectedVariant: ProductFragment["selectedOrFirstAvailableVariant"];
   }) {
     const navigate = useNavigate();
-    const {open} = useAside();
+    const { open } = useAside();
     return (
       <div className="product-form">
         {productOptions.map((option) => (
@@ -813,8 +822,8 @@
                       to={`/products/${handle}?${variantUriQuery}`}
                       style={{
                         border: selected
-                          ? '1px solid black'
-                          : '1px solid transparent',
+                          ? "1px solid black"
+                          : "1px solid transparent",
                         opacity: available ? 1 : 0.3,
                       }}
                     >
@@ -831,13 +840,13 @@
                     <button
                       type="button"
                       className={`product-options-item${
-                        exists && !selected ? ' link' : ''
+                        exists && !selected ? " link" : ""
                       }`}
                       key={option.name + name}
                       style={{
                         border: selected
-                          ? '1px solid black'
-                          : '1px solid transparent',
+                          ? "1px solid black"
+                          : "1px solid transparent",
                         opacity: available ? 1 : 0.3,
                       }}
                       disabled={!exists}
@@ -861,7 +870,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open('cart');
+            open("cart");
           }}
           lines={
             selectedVariant
@@ -875,7 +884,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
         </AddToCartButton>
       </div>
     );
@@ -898,7 +907,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || 'transparent',
+          backgroundColor: color || "transparent",
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1399,21 +1408,21 @@
   New `withCache.fetch` is for caching simple fetch requests. This method caches the responses if they are OK responses, and you can pass `shouldCacheResponse`, `cacheKey`, etc. to modify behavior. `data` is the consumed body of the response (we need to consume to cache it).
 
   ```ts
-  const withCache = createWithCache({cache, waitUntil, request});
+  const withCache = createWithCache({ cache, waitUntil, request });
 
-  const {data, response} = await withCache.fetch<{data: T; error: string}>(
-    'my-cms.com/api',
+  const { data, response } = await withCache.fetch<{ data: T; error: string }>(
+    "my-cms.com/api",
     {
-      method: 'POST',
-      headers: {'Content-type': 'application/json'},
+      method: "POST",
+      headers: { "Content-type": "application/json" },
       body,
     },
     {
       cacheStrategy: CacheLong(),
       // Cache if there are no data errors or a specific data that make this result not suited for caching
       shouldCacheResponse: (result) => !result?.error,
-      cacheKey: ['my-cms', body],
-      displayName: 'My CMS query',
+      cacheKey: ["my-cms", body],
+      displayName: "My CMS query",
     },
   );
   ```
@@ -1989,9 +1998,9 @@
 
   ```tsx
   // app/lib/root-data.ts
-  import {useMatches} from '@remix-run/react';
-  import type {SerializeFrom} from '@shopify/remix-oxygen';
-  import type {loader} from '~/root';
+  import { useMatches } from "@remix-run/react";
+  import type { SerializeFrom } from "@shopify/remix-oxygen";
+  import type { loader } from "~/root";
 
   /**
    * Access the result of the root loader from a React component.
@@ -2153,10 +2162,10 @@
 - This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a `($locale).tsx` route with the following contents: ([#1732](https://github.com/Shopify/hydrogen/pull/1732)) by [@blittle](https://github.com/blittle)
 
   ```ts
-  import {type LoaderFunctionArgs} from '@remix-run/server-runtime';
+  import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 
-  export async function loader({params, context}: LoaderFunctionArgs) {
-    const {language, country} = context.storefront.i18n;
+  export async function loader({ params, context }: LoaderFunctionArgs) {
+    const { language, country } = context.storefront.i18n;
 
     if (
       params.locale &&
@@ -2164,7 +2173,7 @@
     ) {
       // If the locale URL param is defined, yet we still are still at the default locale
       // then the the locale param must be invalid, send to the 404 page
-      throw new Response(null, {status: 404});
+      throw new Response(null, { status: 404 });
     }
 
     return null;
@@ -2220,11 +2229,11 @@
   ```yaml
   projects:
     default:
-      schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+      schema: "node_modules/@shopify/hydrogen/storefront.schema.json"
       documents:
-        - '!*.d.ts'
-        - '*.{ts,tsx,js,jsx}'
-        - 'app/**/*.{ts,tsx,js,jsx}'
+        - "!*.d.ts"
+        - "*.{ts,tsx,js,jsx}"
+        - "app/**/*.{ts,tsx,js,jsx}"
   ```
 
 - Improve resiliency of `HydrogenSession` ([#1583](https://github.com/Shopify/hydrogen/pull/1583)) by [@blittle](https://github.com/blittle)
@@ -2439,8 +2448,8 @@
   ```ts
   // root.tsx
 
-  import {useMatches} from '@remix-run/react';
-  import {type SerializeFrom} from '@shopify/remix-oxygen';
+  import { useMatches } from "@remix-run/react";
+  import { type SerializeFrom } from "@shopify/remix-oxygen";
 
   export const useRootLoaderData = () => {
     const [root] = useMatches();

package/dist/assets/hydrogen/starter/app/routes/api.$version.[graphql.json].tsx

@@ -0,0 +1,14 @@
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function action({params, context, request}: LoaderFunctionArgs) {
+  const response = await fetch(
+    `https://${context.env.PUBLIC_CHECKOUT_DOMAIN}/api/${params.version}/graphql.json`,
+    {
+      method: 'POST',
+      body: request.body,
+      headers: request.headers,
+    },
+  );
+
+  return new Response(response.body, {headers: new Headers(response.headers)});
+}

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

@@ -1,7 +1,12 @@
 import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import {data, type LoaderFunctionArgs, type ActionFunctionArgs, type HeadersFunction} from '@shopify/remix-oxygen';
+import {
+  data,
+  type LoaderFunctionArgs,
+  type ActionFunctionArgs,
+  type HeadersFunction,
+} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 
 export const meta: MetaFunction = () => {

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

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.4.0",
+  "version": "2025.4.1",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -17,7 +17,7 @@
     "@remix-run/react": "^2.16.1",
     "@remix-run/server-runtime": "^2.16.1",
     "graphql": "^16.10.0",
-    "@shopify/hydrogen": "2025.4.0",
+    "@shopify/hydrogen": "2025.4.1",
     "@shopify/remix-oxygen": "^2.0.12",
     "graphql-tag": "^2.12.6",
     "isbot": "^5.1.22",

package/dist/lib/setups/routes/generate.js

@@ -22,7 +22,8 @@ const ROUTE_MAP = {
   account: "account*",
   search: ["search", "api.predictive-search"],
   robots: "[robots.txt]",
-  sitemap: ["[sitemap.xml]", "sitemap.$type.$page[.xml]"]
+  sitemap: ["[sitemap.xml]", "sitemap.$type.$page[.xml]"],
+  tokenlessApi: "api.$version.[graphql.json]"
 };
 let allRouteTemplateFiles = [];
 async function getResolvedRoutes(routeKeys = Object.keys(ROUTE_MAP)) {

package/oclif.manifest.json

@@ -880,7 +880,7 @@
       "aliases": [],
       "args": {
         "routeName": {
-          "description": "The route to generate. One of home,page,cart,products,collections,policies,blogs,account,search,robots,sitemap,all.",
+          "description": "The route to generate. One of home,page,cart,products,collections,policies,blogs,account,search,robots,sitemap,tokenlessApi,all.",
           "name": "routeName",
           "options": [
             "home",
@@ -894,6 +894,7 @@
             "search",
             "robots",
             "sitemap",
+            "tokenlessApi",
             "all"
           ],
           "required": true
@@ -1748,5 +1749,5 @@
       ]
     }
   },
-  "version": "10.0.2"
+  "version": "10.1.0"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "10.0.2",
+  "version": "10.1.0",
   "license": "MIT",
   "type": "module",
   "repository": {