@shopify/create-hydrogen 5.0.23 → 5.0.24

package/dist/assets/hydrogen/starter/.cursor/rules/hydrogen-react-router.mdc

@@ -1,7 +1,7 @@
 ---
-description: This Hydrogen project is based on react-router, NOT @remix-run/react!
-globs: *
-alwaysApply: false
+description: 
+globs: 
+alwaysApply: true
 ---
 
 # React Router Import Rule for Hydrogen
@@ -29,6 +29,8 @@ When you see imports from Remix packages, replace them with their equivalent Rea
 | `@remix-run/server-runtime` | `react-router` |
 | `@remix-run/testing` | `react-router` |
 
+NEVER USE 'react-router-dom' imports!
+
 ## Common Import Examples
 
 ```js

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

@@ -1,5 +1,11 @@
 # skeleton
 
+## 2025.5.1
+
+### Patch Changes
+
+- Bumping the cli to 3.80.4 ([#2956](https://github.com/Shopify/hydrogen/pull/2956)) by [@balazsbajorics](https://github.com/balazsbajorics)
+
 ## 2025.5.0
 
 ### Patch Changes
@@ -160,13 +166,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;
      ```
 
@@ -757,25 +763,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) => (
@@ -809,8 +815,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,
                       }}
                     >
@@ -827,13 +833,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}
@@ -857,7 +863,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open('cart');
+            open("cart");
           }}
           lines={
             selectedVariant
@@ -871,7 +877,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
         </AddToCartButton>
       </div>
     );
@@ -894,7 +900,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || 'transparent',
+          backgroundColor: color || "transparent",
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1395,21 +1401,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",
     },
   );
   ```
@@ -1985,9 +1991,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.
@@ -2149,10 +2155,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 &&
@@ -2160,7 +2166,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;
@@ -2216,11 +2222,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)
@@ -2435,8 +2441,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/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.5.0",
+  "version": "2025.5.1",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -31,7 +31,7 @@
     "@graphql-codegen/cli": "5.0.2",
     "@react-router/dev": "7.6.0",
     "@react-router/fs-routes": "7.6.0",
-    "@shopify/cli": "~3.79.2",
+    "@shopify/cli": "~3.80.4",
     "@shopify/hydrogen-codegen": "^0.3.3",
     "@shopify/mini-oxygen": "^3.2.1",
     "@shopify/oxygen-workers-types": "^4.1.6",