npm - @shopify/create-hydrogen - Versions diffs - 5.0.16 → 5.0.18 - Mend

@shopify/create-hydrogen 5.0.16 → 5.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/assets/hydrogen/bundle/analyzer.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- Open this file in your browser for an interactive view of your bundle  -->
 <!-- saved from url=(0034)https://esbuild.github.io/analyze/ -->
@@ -94,7 +94,9 @@
         color: var(--fg-on);
       }
       code {
-        font: 14px/20px Noto Sans Mono, monospace;
+        font:
+          14px/20px Noto Sans Mono,
+          monospace;
         background: rgba(127, 127, 127, 0.2);
         padding: 2px 4px;
         margin-bottom: -2px;
@@ -102,7 +104,9 @@
       }
       pre {
         color: var(--pre);
-        font: 14px/20px Noto Sans Mono, monospace;
+        font:
+          14px/20px Noto Sans Mono,
+          monospace;
         padding: 0;
         margin: 0;
         white-space: pre-wrap;
@@ -598,12 +602,12 @@
             e === 1
               ? '1 byte'
               : e < 1024
-              ? xe(e) + ' bytes'
-              : e < 1024 * 1024
-              ? Ke(e / 1024) + ' kb'
-              : e < 1024 * 1024 * 1024
-              ? Ke(e / (1024 * 1024)) + ' mb'
-              : Ke(e / (1024 * 1024 * 1024)) + ' gb',
+                ? xe(e) + ' bytes'
+                : e < 1024 * 1024
+                  ? Ke(e / 1024) + ' kb'
+                  : e < 1024 * 1024 * 1024
+                    ? Ke(e / (1024 * 1024)) + ' mb'
+                    : Ke(e / (1024 * 1024 * 1024)) + ' gb',
           H = (e) =>
             e
               .replace(/&/g, '&amp;')
@@ -873,10 +877,10 @@
             e === Se
               ? ''
               : e === we
-              ? t + 'ESM'
-              : e === He
-              ? t + 'CJS'
-              : t + 'ESM & CJS',
+                ? t + 'ESM'
+                : e === He
+                  ? t + 'CJS'
+                  : t + 'ESM & CJS',
           Ft = (e, t) => {
             let r = t.o,
               s = 0,
@@ -920,8 +924,8 @@
               x === 'esm'
                 ? (l += O.bytes)
                 : x === 'cjs'
-                ? (o += O.bytes)
-                : (m += O.bytes),
+                  ? (o += O.bytes)
+                  : (m += O.bytes),
                 n++,
                 (u += O.bytes);
             }
@@ -1031,8 +1035,8 @@
                 (s.format === 'esm'
                   ? '<br>Module format: <b>ESM</b>'
                   : s.format === 'cjs'
-                  ? '<br>Module format: <b>CommonJS</b>'
-                  : '') +
+                    ? '<br>Module format: <b>CommonJS</b>'
+                    : '') +
                 '</p>'),
               el(i, pt, t);
             let u = d.createElement('a');

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

@@ -1,5 +1,94 @@
 # skeleton
+## 2025.1.3
+### Patch Changes
+- Bump Remix to 2.16.1 and vite to 6.2.0 ([#2784](https://github.com/Shopify/hydrogen/pull/2784)) by [@wizardlyhel](https://github.com/wizardlyhel)
+- Update skeleton and create-hydrogen cli to 3.75.4 ([#2769](https://github.com/Shopify/hydrogen/pull/2769)) by [@juanpprieto](https://github.com/juanpprieto)
+- Fixing typescript compile ([#2787](https://github.com/Shopify/hydrogen/pull/2787)) by [@balazsbajorics](https://github.com/balazsbajorics)
+  In tsconfig.json:
+  ```diff
+       "types": [
+         "@shopify/oxygen-workers-types",
+  -      "@remix-run/node",
+  +      "@remix-run/server-runtime",
+         "vite/client"
+       ],
+  ```
+- Updates `@shopify/cli-kit`, `@shopify/cli` and `@shopify/plugin-cloudflare` to `3.77.0`. ([#2810](https://github.com/Shopify/hydrogen/pull/2810)) by [@seanparsons](https://github.com/seanparsons)
+- Support for the Remix future flag `v3_routeConfig`. ([#2722](https://github.com/Shopify/hydrogen/pull/2722)) by [@seanparsons](https://github.com/seanparsons)
+  Please refer to the Remix documentation for more details on `v3_routeConfig` future flag: [https://remix.run/docs/en/main/start/future-flags#v3_routeconfig](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig)
+  1. Add the following npm package dev dependencies:
+     ```diff
+       "devDependencies": {
+         "@remix-run/dev": "^2.16.1",
+     +    "@remix-run/fs-routes": "^2.16.1",
+     +    "@remix-run/route-config": "^2.16.1",
+     ```
+  1. If you have `export function Layout` in your `root.tsx`, move this export into its own file. For example:
+     ```ts
+     // /app/layout.tsx
+     export default function Layout() {
+       const nonce = useNonce();
+       const data = useRouteLoaderData<RootLoader>('root');
+       return (
+         <html lang="en">
+         ...
+       );
+     }
+     ```
+  1. Create a `routes.ts` file.
+     ```ts
+     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()),
+     ]) satisfies RouteConfig;
+     ```
+  1. Update your `vite.config.ts`.
+     ```diff
+     export default defineConfig({
+       plugins: [
+         hydrogen(),
+         oxygen(),
+         remix({
+     -      presets: [hydrogen.preset()],
+     +      presets: [hydrogen.v3preset()],
+     ```
+- Updated dependencies [[`0425e50d`](https://github.com/Shopify/hydrogen/commit/0425e50dafe2f42326cba67076e5fcea2905e885), [`74ef1ba7`](https://github.com/Shopify/hydrogen/commit/74ef1ba7d41988350e9d2c81731c90381943d1f0)]:
+  - @shopify/remix-oxygen@2.0.12
+  - @shopify/hydrogen@2025.1.3
+## 2025.1.2
+### Patch Changes
+- Bump cli version ([#2760](https://github.com/Shopify/hydrogen/pull/2760)) by [@rbshop](https://github.com/rbshop)
+- Updated dependencies [[`128dfcd6`](https://github.com/Shopify/hydrogen/commit/128dfcd6b254a7465d93be49d3bcbff5251e5ffc)]:
+  - @shopify/hydrogen@2025.1.2
 ## 2025.1.1
 ### Patch Changes
@@ -574,25 +663,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) => (
@@ -626,8 +715,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,
                       }}
                     >
@@ -644,13 +733,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}
@@ -674,7 +763,7 @@
         <AddToCartButton
           disabled={!selectedVariant || !selectedVariant.availableForSale}
           onClick={() => {
-            open('cart');
+            open("cart");
           }}
           lines={
             selectedVariant
@@ -688,7 +777,7 @@
               : []
           }
         >
-          {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+          {selectedVariant?.availableForSale ? "Add to cart" : "Sold out"}
         </AddToCartButton>
       </div>
     );
@@ -711,7 +800,7 @@
         aria-label={name}
         className="product-option-label-swatch"
         style={{
-          backgroundColor: color || 'transparent',
+          backgroundColor: color || "transparent",
         }}
       >
         {!!image && <img src={image} alt={name} />}
@@ -1212,21 +1301,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",
     },
   );
   ```
@@ -1802,9 +1891,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.
@@ -1966,10 +2055,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 &&
@@ -1977,7 +2066,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;
@@ -2033,11 +2122,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)
@@ -2252,8 +2341,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/layout.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import {useNonce, Analytics} from '@shopify/hydrogen';
+import {
+  Links,
+  Meta,
+  Scripts,
+  useRouteLoaderData,
+  ScrollRestoration,
+  Outlet,
+} from '@remix-run/react';
+import resetStyles from '~/styles/reset.css?url';
+import appStyles from '~/styles/app.css?url';
+import {PageLayout} from '~/components/PageLayout';
+import { RootLoader } from './root';
+export default function Layout() {
+  const nonce = useNonce();
+  const data = useRouteLoaderData<RootLoader>('root');
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <link rel="stylesheet" href={resetStyles}></link>
+        <link rel="stylesheet" href={appStyles}></link>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {data ? (
+          <Analytics.Provider
+            cart={data.cart}
+            shop={data.shop}
+            consent={data.consent}
+          >
+            <PageLayout {...data}><Outlet /></PageLayout>
+          </Analytics.Provider>
+        ) : (
+          <Outlet />
+        )}
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+      </body>
+    </html>
+  );
+}

package/dist/assets/hydrogen/starter/app/root.tsx CHANGED Viewed

@@ -1,20 +1,12 @@
-import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
+import {getShopAnalytics} from '@shopify/hydrogen';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
-  Links,
-  Meta,
   Outlet,
-  Scripts,
   useRouteError,
-  useRouteLoaderData,
-  ScrollRestoration,
   isRouteErrorResponse,
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import favicon from '~/assets/favicon.svg';
-import resetStyles from '~/styles/reset.css?url';
-import appStyles from '~/styles/app.css?url';
-import {PageLayout} from '~/components/PageLayout';
 import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
 export type RootLoader = typeof loader;
@@ -141,39 +133,6 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
   };
 }
-export function Layout({children}: {children?: React.ReactNode}) {
-  const nonce = useNonce();
-  const data = useRouteLoaderData<RootLoader>('root');
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <link rel="stylesheet" href={resetStyles}></link>
-        <link rel="stylesheet" href={appStyles}></link>
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        {data ? (
-          <Analytics.Provider
-            cart={data.cart}
-            shop={data.shop}
-            consent={data.consent}
-          >
-            <PageLayout {...data}>{children}</PageLayout>
-          </Analytics.Provider>
-        ) : (
-          children
-        )}
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
-      </body>
-    </html>
-  );
-}
 export default function App() {
   return <Outlet />;
 }

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

@@ -19,9 +19,10 @@ export const meta: MetaFunction = () => {
 export async function loader({request, context}: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const isPredictive = url.searchParams.has('predictive');
-  const searchPromise = isPredictive
-    ? predictiveSearch({request, context})
-    : regularSearch({request, context});
+  const searchPromise: Promise<PredictiveSearchReturn | RegularSearchReturn> =
+    isPredictive
+      ? predictiveSearch({request, context})
+      : regularSearch({request, context});
   searchPromise.catch((error: Error) => {
     console.error(error);

package/dist/assets/hydrogen/starter/app/routes.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import {flatRoutes} from '@remix-run/fs-routes';
+import {layout, type RouteConfig} from '@remix-run/route-config';
+import {hydrogenRoutes} from '@shopify/hydrogen';
+export default hydrogenRoutes([
+  layout('./layout.tsx', (await flatRoutes())),
+]) satisfies RouteConfig;

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

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.1.1",
+  "version": "2025.1.3",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -14,13 +14,13 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.15.3",
-    "@remix-run/server-runtime": "^2.15.3",
-    "@shopify/hydrogen": "2025.1.1",
-    "@shopify/remix-oxygen": "^2.0.11",
-    "graphql": "^16.6.0",
+    "@remix-run/react": "^2.16.1",
+    "@remix-run/server-runtime": "^2.16.1",
+    "graphql": "^16.10.0",
+    "@shopify/hydrogen": "2025.1.3",
+    "@shopify/remix-oxygen": "^2.0.12",
     "graphql-tag": "^2.12.6",
-    "isbot": "^5.1.21",
+    "isbot": "^5.1.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -29,13 +29,16 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
     "@graphql-codegen/cli": "5.0.2",
-    "@remix-run/dev": "^2.15.3",
-    "@shopify/cli": "~3.74.1",
-    "@shopify/hydrogen-codegen": "^0.3.2",
-    "@shopify/mini-oxygen": "^3.1.1",
-    "@shopify/oxygen-workers-types": "^4.1.2",
+    "@remix-run/dev": "^2.16.1",
+    "@remix-run/fs-routes": "^2.16.1",
+    "@remix-run/route-config": "^2.16.1",
+    "@shopify/cli": "~3.77.0",
+    "@shopify/hydrogen-codegen": "^0.3.3",
+    "@shopify/mini-oxygen": "^3.1.2",
+    "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
-    "@total-typescript/ts-reset": "^0.4.2",
+    "@total-typescript/ts-reset": "^0.6.1",
+    "prettier": "^3.4.2",
     "@types/eslint": "^9.6.1",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
@@ -51,9 +54,8 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
-    "prettier": "^2.8.4",
     "typescript": "^5.2.2",
-    "vite": "^5.1.8",
+    "vite": "^6.2.0",
     "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {

package/dist/assets/hydrogen/starter/tsconfig.json CHANGED Viewed

@@ -16,7 +16,7 @@
     "baseUrl": ".",
     "types": [
       "@shopify/oxygen-workers-types",
-      "@remix-run/node",
+      "@remix-run/server-runtime",
       "vite/client"
     ],
     "paths": {

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

@@ -15,12 +15,13 @@ export default defineConfig({
     hydrogen(),
     oxygen(),
     remix({
-      presets: [hydrogen.preset()],
+      presets: [hydrogen.v3preset()],
       future: {
         v3_fetcherPersist: true,
         v3_relativeSplatPath: true,
         v3_throwAbortReason: true,
         v3_lazyRouteDiscovery: true,
+        v3_routeConfig: true,
         v3_singleFetch: true,
       },
     }),

package/dist/assets/hydrogen/tailwind/package.json CHANGED Viewed

@@ -3,6 +3,6 @@
     "defaults"
   ],
   "devDependencies": {
-    "@tailwindcss/vite": "4.0.0-beta.8"
+    "@tailwindcss/vite": "4.0.14"
   }
 }

package/dist/assets/hydrogen/vanilla-extract/package.json CHANGED Viewed

@@ -1,8 +1,8 @@
 {
   "dependencies": {
-    "@vanilla-extract/css": "^1.15.2"
+    "@vanilla-extract/css": "^1.17.1"
   },
   "devDependencies": {
-    "@vanilla-extract/vite-plugin": "^4.0.10"
+    "@vanilla-extract/vite-plugin": "^5.0.1"
   }
 }

package/dist/assets/hydrogen/virtual-routes/assets/debug-network.css CHANGED Viewed

@@ -390,11 +390,8 @@ button:active.primary {
   --gradient-color-end: transparent;
   --background-color: transparent;
-  background-image: linear-gradient(
-      to right,
-      var(--background-color),
-      var(--background-color)
-    ),
+  background-image:
+    linear-gradient(to right, var(--background-color), var(--background-color)),
     linear-gradient(to right, var(--background-color), var(--background-color)),
     linear-gradient(
       to right,
@@ -406,23 +403,43 @@ button:active.primary {
       var(--gradient-color-start),
       var(--gradient-color-end)
     );
-  background-position: left center, right center, left center, right center;
+  background-position:
+    left center,
+    right center,
+    left center,
+    right center;
   background-repeat: no-repeat;
   background-color: var(--background-color);
-  background-size: 20px 100%, 20px 100%, 0px 100%, 0px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    0px 100%,
+    0px 100%;
   background-attachment: local, local, scroll, scroll;
 }
 #tab-buttons-wrapper .fadCover.fadeLeft {
-  background-size: 20px 100%, 20px 100%, 40px 100%, 0px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    40px 100%,
+    0px 100%;
 }
 #tab-buttons-wrapper .fadCover.fadeRight {
-  background-size: 20px 100%, 20px 100%, 0px 100%, 40px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    0px 100%,
+    40px 100%;
 }
 #tab-buttons-wrapper .fadCover.fadeLeftRight {
-  background-size: 20px 100%, 20px 100%, 40px 100%, 40px 100%;
+  background-size:
+    20px 100%,
+    20px 100%,
+    40px 100%,
+    40px 100%;
 }
 .tabPanels .tabPanel {