@shopify/create-hydrogen 5.0.20 → 5.0.21

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

@@ -1,7 +1,9 @@
 import {flatRoutes} from '@remix-run/fs-routes';
-import {layout, type RouteConfig} from '@remix-run/route-config';
+import {type RouteConfig} from '@remix-run/route-config';
 import {hydrogenRoutes} from '@shopify/hydrogen';
 
 export default hydrogenRoutes([
-  layout('./layout.tsx', (await flatRoutes())),
+  ...(await flatRoutes()),
+  // Manual route definitions can be added to this array, in addition to or instead of using the `flatRoutes` file-based routing convention.
+  // See https://remix.run/docs/en/main/guides/routing for more details
 ]) satisfies RouteConfig;

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

@@ -27,12 +27,17 @@ img {
 * components/Aside
 * --------------------------------------------------
 */
+@media (max-width: 45em) {
+  html:has(.overlay.expanded) {
+    overflow: hidden;
+  }
+}
+
 aside {
   background: var(--color-light);
   box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
   height: 100vh;
-  max-width: var(--aside-width);
-  min-width: var(--aside-width);
+  width: min(var(--aside-width), 100vw);
   position: fixed;
   right: calc(-1 * var(--aside-width));
   top: 0;
@@ -201,6 +206,11 @@ button.reset:hover:not(:has(> *)) {
   margin-left: auto;
 }
 
+.header-ctas > * {
+  min-width: fit-content;
+}
+
+
 /*
 * --------------------------------------------------
 * components/Footer
@@ -212,14 +222,16 @@ button.reset:hover:not(:has(> *)) {
 }
 
 .footer-menu {
-  align-items: center;
+  justify-content: center;
   display: flex;
+  flex-wrap: wrap;
   grid-gap: 1rem;
   padding: 1rem;
 }
 
 .footer-menu a {
   color: var(--color-light);
+  min-width: fit-content;
 }
 
 /*

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

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "2025.1.5",
+  "version": "2025.1.7",
   "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.1.3",
+    "@shopify/hydrogen": "2025.1.4",
     "@shopify/remix-oxygen": "^2.0.12",
     "graphql-tag": "^2.12.6",
     "isbot": "^5.1.22",
@@ -32,9 +32,9 @@
     "@remix-run/dev": "^2.16.1",
     "@remix-run/fs-routes": "^2.16.1",
     "@remix-run/route-config": "^2.16.1",
-    "@shopify/cli": "~3.77.1",
+    "@shopify/cli": "~3.78.1",
     "@shopify/hydrogen-codegen": "^0.3.3",
-    "@shopify/mini-oxygen": "^3.1.2",
+    "@shopify/mini-oxygen": "^3.2.1",
     "@shopify/oxygen-workers-types": "^4.1.6",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.6.1",
@@ -55,7 +55,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
     "typescript": "^5.2.2",
-    "vite": "^6.2.0",
+    "vite": "^6.2.4",
     "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {

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

@@ -331,11 +331,9 @@ export type RecommendedProductFragment = Pick<
   priceRange: {
     minVariantPrice: Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>;
   };
-  images: {
-    nodes: Array<
-      Pick<StorefrontAPI.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>
-    >;
-  };
+  featuredImage?: StorefrontAPI.Maybe<
+    Pick<StorefrontAPI.Image, 'id' | 'url' | 'altText' | 'width' | 'height'>
+  >;
 };
 
 export type RecommendedProductsQueryVariables = StorefrontAPI.Exact<{
@@ -353,14 +351,12 @@ export type RecommendedProductsQuery = {
             'amount' | 'currencyCode'
           >;
         };
-        images: {
-          nodes: Array<
-            Pick<
-              StorefrontAPI.Image,
-              'id' | 'url' | 'altText' | 'width' | 'height'
-            >
-          >;
-        };
+        featuredImage?: StorefrontAPI.Maybe<
+          Pick<
+            StorefrontAPI.Image,
+            'id' | 'url' | 'altText' | 'width' | 'height'
+          >
+        >;
       }
     >;
   };
@@ -374,22 +370,29 @@ export type ArticleQueryVariables = StorefrontAPI.Exact<{
 }>;
 
 export type ArticleQuery = {
-  blog?: StorefrontAPI.Maybe<{
-    articleByHandle?: StorefrontAPI.Maybe<
-      Pick<StorefrontAPI.Article, 'title' | 'contentHtml' | 'publishedAt'> & {
-        author?: StorefrontAPI.Maybe<Pick<StorefrontAPI.ArticleAuthor, 'name'>>;
-        image?: StorefrontAPI.Maybe<
-          Pick<
-            StorefrontAPI.Image,
-            'id' | 'altText' | 'url' | 'width' | 'height'
-          >
-        >;
-        seo?: StorefrontAPI.Maybe<
-          Pick<StorefrontAPI.Seo, 'description' | 'title'>
-        >;
-      }
-    >;
-  }>;
+  blog?: StorefrontAPI.Maybe<
+    Pick<StorefrontAPI.Blog, 'handle'> & {
+      articleByHandle?: StorefrontAPI.Maybe<
+        Pick<
+          StorefrontAPI.Article,
+          'handle' | 'title' | 'contentHtml' | 'publishedAt'
+        > & {
+          author?: StorefrontAPI.Maybe<
+            Pick<StorefrontAPI.ArticleAuthor, 'name'>
+          >;
+          image?: StorefrontAPI.Maybe<
+            Pick<
+              StorefrontAPI.Image,
+              'id' | 'altText' | 'url' | 'width' | 'height'
+            >
+          >;
+          seo?: StorefrontAPI.Maybe<
+            Pick<StorefrontAPI.Seo, 'description' | 'title'>
+          >;
+        }
+      >;
+    }
+  >;
 };
 
 export type BlogQueryVariables = StorefrontAPI.Exact<{
@@ -407,7 +410,7 @@ export type BlogQueryVariables = StorefrontAPI.Exact<{
 
 export type BlogQuery = {
   blog?: StorefrontAPI.Maybe<
-    Pick<StorefrontAPI.Blog, 'title'> & {
+    Pick<StorefrontAPI.Blog, 'title' | 'handle'> & {
       seo?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.Seo, 'title' | 'description'>
       >;
@@ -587,6 +590,24 @@ export type StoreCollectionsQuery = {
   };
 };
 
+export type MoneyCollectionItemFragment = Pick<
+  StorefrontAPI.MoneyV2,
+  'amount' | 'currencyCode'
+>;
+
+export type CollectionItemFragment = Pick<
+  StorefrontAPI.Product,
+  'id' | 'handle' | 'title'
+> & {
+  featuredImage?: StorefrontAPI.Maybe<
+    Pick<StorefrontAPI.Image, 'id' | 'altText' | 'url' | 'width' | 'height'>
+  >;
+  priceRange: {
+    minVariantPrice: Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>;
+    maxVariantPrice: Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>;
+  };
+};
+
 export type CatalogQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
@@ -637,7 +658,7 @@ export type PageQueryVariables = StorefrontAPI.Exact<{
 
 export type PageQuery = {
   page?: StorefrontAPI.Maybe<
-    Pick<StorefrontAPI.Page, 'id' | 'title' | 'body'> & {
+    Pick<StorefrontAPI.Page, 'handle' | 'id' | 'title' | 'body'> & {
       seo?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.Seo, 'description' | 'title'>
       >;
@@ -1181,15 +1202,15 @@ interface GeneratedQueryTypes {
     return: FeaturedCollectionQuery;
     variables: FeaturedCollectionQueryVariables;
   };
-  '#graphql\n  fragment RecommendedProduct on Product {\n    id\n    title\n    handle\n    priceRange {\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    images(first: 1) {\n      nodes {\n        id\n        url\n        altText\n        width\n        height\n      }\n    }\n  }\n  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)\n    @inContext(country: $country, language: $language) {\n    products(first: 4, sortKey: UPDATED_AT, reverse: true) {\n      nodes {\n        ...RecommendedProduct\n      }\n    }\n  }\n': {
+  '#graphql\n  fragment RecommendedProduct on Product {\n    id\n    title\n    handle\n    priceRange {\n      minVariantPrice {\n        amount\n        currencyCode\n      }\n    }\n    featuredImage {\n      id\n      url\n      altText\n      width\n      height\n    }\n  }\n  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)\n    @inContext(country: $country, language: $language) {\n    products(first: 4, sortKey: UPDATED_AT, reverse: true) {\n      nodes {\n        ...RecommendedProduct\n      }\n    }\n  }\n': {
     return: RecommendedProductsQuery;
     variables: RecommendedProductsQueryVariables;
   };
-  '#graphql\n  query Article(\n    $articleHandle: String!\n    $blogHandle: String!\n    $country: CountryCode\n    $language: LanguageCode\n  ) @inContext(language: $language, country: $country) {\n    blog(handle: $blogHandle) {\n      articleByHandle(handle: $articleHandle) {\n        title\n        contentHtml\n        publishedAt\n        author: authorV2 {\n          name\n        }\n        image {\n          id\n          altText\n          url\n          width\n          height\n        }\n        seo {\n          description\n          title\n        }\n      }\n    }\n  }\n': {
+  '#graphql\n  query Article(\n    $articleHandle: String!\n    $blogHandle: String!\n    $country: CountryCode\n    $language: LanguageCode\n  ) @inContext(language: $language, country: $country) {\n    blog(handle: $blogHandle) {\n      handle\n      articleByHandle(handle: $articleHandle) {\n        handle\n        title\n        contentHtml\n        publishedAt\n        author: authorV2 {\n          name\n        }\n        image {\n          id\n          altText\n          url\n          width\n          height\n        }\n        seo {\n          description\n          title\n        }\n      }\n    }\n  }\n': {
     return: ArticleQuery;
     variables: ArticleQueryVariables;
   };
-  '#graphql\n  query Blog(\n    $language: LanguageCode\n    $blogHandle: String!\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(language: $language) {\n    blog(handle: $blogHandle) {\n      title\n      seo {\n        title\n        description\n      }\n      articles(\n        first: $first,\n        last: $last,\n        before: $startCursor,\n        after: $endCursor\n      ) {\n        nodes {\n          ...ArticleItem\n        }\n        pageInfo {\n          hasPreviousPage\n          hasNextPage\n          hasNextPage\n          endCursor\n          startCursor\n        }\n\n      }\n    }\n  }\n  fragment ArticleItem on Article {\n    author: authorV2 {\n      name\n    }\n    contentHtml\n    handle\n    id\n    image {\n      id\n      altText\n      url\n      width\n      height\n    }\n    publishedAt\n    title\n    blog {\n      handle\n    }\n  }\n': {
+  '#graphql\n  query Blog(\n    $language: LanguageCode\n    $blogHandle: String!\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(language: $language) {\n    blog(handle: $blogHandle) {\n      title\n      handle\n      seo {\n        title\n        description\n      }\n      articles(\n        first: $first,\n        last: $last,\n        before: $startCursor,\n        after: $endCursor\n      ) {\n        nodes {\n          ...ArticleItem\n        }\n        pageInfo {\n          hasPreviousPage\n          hasNextPage\n          hasNextPage\n          endCursor\n          startCursor\n        }\n\n      }\n    }\n  }\n  fragment ArticleItem on Article {\n    author: authorV2 {\n      name\n    }\n    contentHtml\n    handle\n    id\n    image {\n      id\n      altText\n      url\n      width\n      height\n    }\n    publishedAt\n    title\n    blog {\n      handle\n    }\n  }\n': {
     return: BlogQuery;
     variables: BlogQueryVariables;
   };
@@ -1205,11 +1226,11 @@ interface GeneratedQueryTypes {
     return: StoreCollectionsQuery;
     variables: StoreCollectionsQueryVariables;
   };
-  '#graphql\n  query Catalog(\n    $country: CountryCode\n    $language: LanguageCode\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(country: $country, language: $language) {\n    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {\n      nodes {\n        ...ProductItem\n      }\n      pageInfo {\n        hasPreviousPage\n        hasNextPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n  #graphql\n  fragment MoneyProductItem on MoneyV2 {\n    amount\n    currencyCode\n  }\n  fragment ProductItem on Product {\n    id\n    handle\n    title\n    featuredImage {\n      id\n      altText\n      url\n      width\n      height\n    }\n    priceRange {\n      minVariantPrice {\n        ...MoneyProductItem\n      }\n      maxVariantPrice {\n        ...MoneyProductItem\n      }\n    }\n  }\n\n': {
+  '#graphql\n  query Catalog(\n    $country: CountryCode\n    $language: LanguageCode\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(country: $country, language: $language) {\n    products(first: $first, last: $last, before: $startCursor, after: $endCursor) {\n      nodes {\n        ...CollectionItem\n      }\n      pageInfo {\n        hasPreviousPage\n        hasNextPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n  #graphql\n  fragment MoneyCollectionItem on MoneyV2 {\n    amount\n    currencyCode\n  }\n  fragment CollectionItem on Product {\n    id\n    handle\n    title\n    featuredImage {\n      id\n      altText\n      url\n      width\n      height\n    }\n    priceRange {\n      minVariantPrice {\n        ...MoneyCollectionItem\n      }\n      maxVariantPrice {\n        ...MoneyCollectionItem\n      }\n    }\n  }\n\n': {
     return: CatalogQuery;
     variables: CatalogQueryVariables;
   };
-  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
+  '#graphql\n  query Page(\n    $language: LanguageCode,\n    $country: CountryCode,\n    $handle: String!\n  )\n  @inContext(language: $language, country: $country) {\n    page(handle: $handle) {\n      handle\n      id\n      title\n      body\n      seo {\n        description\n        title\n      }\n    }\n  }\n': {
     return: PageQuery;
     variables: PageQueryVariables;
   };

package/dist/create-app.js

@@ -1435,7 +1435,7 @@ end
 
 ${jm.cyan(p)}
 
-This flag is required in non-interactive terminal environments, such as a CI environment, or when piping input from another process.`,"To resolve this, specify the option in the command, or run the command in an interactive environment such as your local terminal.")})}async resultWithEnvironment(a,o,p){let d=a.flags,h=this.environmentsFilename();if(!d.environment||!h)return a;let g=await ACe(d.environment,h,{from:d.path});if(!g)return a;let y=await super.parse(QAr(o),p),v=await super.parse(o,[...p||this.argv,...ZAr(g,o,y)]);return XAr(y.flags,v.flags,d.environment,g),v}};Tie.baseFlags={};async function YAr(s){await cie(()=>({cmd_all_verbose:s.verbose,cmd_all_path_override:s.path!==void 0,cmd_all_path_override_hash:s.path===void 0?void 0:b3e(s.path)}))}function XAr(s,a,o,p){let d={};for(let[g,y]of Object.entries(a)){let v=Object.prototype.hasOwnProperty.call(s,g),C=Object.prototype.hasOwnProperty.call(p,g);if(!v&&C){let w=g==="password"?`********${y.substr(-4)}`:y;d[g]=w}}if(Object.keys(d).length===0)return;let h=Object.entries(d).map(([g,y])=>`${g}: ${y}`);Lx({headline:["Using applicable flags from",{userInput:o},"environment:"],body:[{list:{items:h}}]})}function QAr(s){return s?.flags?{...s,flags:Object.fromEntries(Object.entries(s.flags).map(([a,o])=>{let p={...o};return delete p.default,[a,p]}))}:s}function ZAr(s,a,o){let p=[];for(let[d,h]of Object.entries(s)){let g=a?.flags&&Object.prototype.hasOwnProperty.call(a.flags,d),y=o.flags&&Object.prototype.hasOwnProperty.call(o.flags,d);if(g&&!y)if(typeof h=="boolean")if(h)p.push(`--${d}`);else throw new Pl(bg`Environments can only specify true for boolean flags. Attempted to set ${jm.yellow(d)} to false.`);else Array.isArray(h)?h.forEach(v=>p.push(`--${d}`,`${v}`)):p.push(`--${d}`,`${h}`)}return p}var PCe=Tie;var OS=xg(Vfe(),1);yi();var F1=xg(Vfe(),1);yi();yi();yi();import{fileURLToPath as NCe}from"node:url";yi();import{exec as eSr}from"node:child_process";import{promisify as tSr}from"node:util";var UE=tSr(eSr);function OCe(){let s=process.listeners("warning")[0];s&&(process.removeAllListeners("warning"),process.prependListener("warning",a=>{a.name!="ExperimentalWarning"&&s(a)}))}var Fie=new URL("../../..",import.meta.url).pathname,jD=Fie.endsWith("/hydrogen/packages/"),rde=jD?Fie:void 0,rSr="assets/hydrogen",nSr="starter",Tw="routes",tde;async function iSr(){if(tde??=await mie("package.json",{cwd:NCe(import.meta.url),type:"file"}),!tde)throw new Pl("Could not find assets directory","Please report this error.");return tde}async function Yy(s,...a){return el(em(await iSr()),process.env.SHOPIFY_UNIT_TEST?"assets":`dist/${rSr}`,s??"",...a)}async function _Y(s,a){a??=await E9();let o=new URL(`${a}/app${s?`/${s}`:""}`,import.meta.url);return o.protocol==="file:"?NCe(o):o.toString()}function E9(s=!!process.env.SHOPIFY_UNIT_TEST){return s?mY():Yy(nSr)}function mY(){if(!jD)throw new Pl("Trying to use skeleton source dir outside of Hydrogen monorepo.","Please report this error.");return el(em(Fie),"templates","skeleton")}async function nde(){let{stdout:s}=await UE("npm root"),a=s.trim();return!a&&jD&&(a=el(em(Fie),"node_modules")),a}var ICe=["tailwind","vanilla-extract","css-modules","postcss"];async function BCe(s,a,o,p=(d,h)=>d){let d=await Yy(s);return Promise.all(Object.entries(a).map(async([h,g])=>{let y=await d1(el(d,h));await H1(el(o,g),p(y,h))}))}async function LCe(s,a,o){let p=Object.values(s).map(h=>Sf(el(a,h)).then(g=>g?h:null)),d=(await Promise.all(p)).filter(Boolean);return!(d.length>0&&!o&&!await $E({message:`Some files already exist (${d.join(", ")}). Overwrite?`,defaultValue:!1}))}yi();yi();import{readdir as mkr}from"node:fs/promises";yi();var Qie=xg(XSe(),1);import*as QSe from"fs/promises";import*as ZSe from"path";var u1e={arrowParens:"always",singleQuote:!0,bracketSpacing:!1,trailingComma:"all"};async function dC(s=process.cwd()){let a=(await QSe.lstat(s)).isFile()?s:ZSe.resolve(s,"prettier.file");try{return await Qie.resolveConfig(a)||u1e}catch{return u1e}}async function Bw(s,a=u1e,o=""){let p=uie(o);return Qie.format(s,{parser:p===".tsx"||p===".ts"?"typescript":"babel",...a})}async function vS(s,a,o){let p=await o(await d1(s));if(typeof p=="string")return a&&(p=await Bw(p,a,s)),H1(s,p)}var gkr=["tsx","ts","jsx","js","mjs","cjs"];async function Dg(s,a,o=gkr){let p=await mkr(s);if(p.includes(a)){let d=n_(s,a);if(!await _ie(d))return{filepath:d};for(let h of["ts","js"]){let g=n_(s,`${a}/index.${h}`);if(await Sf(n_(s,g)))return{filepath:g,extension:h,astType:h}}}else for(let d of o){let h=`${a}.${d}`;if(p.includes(h)){let g=d==="mjs"||d==="cjs"?"js":d;return{filepath:n_(s,h),extension:d,astType:g}}}return{}}var e6e=Object.freeze(["dependencies","devDependencies","peerDependencies"]);async function QM(s,a,o){let p=await x9(el(a,"package.json")),d=await x9(el(s,"package.json")),h=new Set(["comment",...o?.ignoredKeys??[]]),g=Object.keys(d).filter(v=>!e6e.includes(v));for(let v of g){if(h.has(v))continue;let C=d[v],w=p[v],k=Array.isArray(C)&&Array.isArray(w)?[...w,...C]:typeof C=="object"&&typeof w=="object"?{...w,...C}:C;p[v]=k}let y=Object.entries(p.dependencies||{}).find(([v])=>v.startsWith("@remix-run/"))?.[1];for(let v of e6e)h.has(v)||d[v]&&(p[v]=[...new Set([...Object.keys(p[v]??{}),...Object.keys(d[v]??{})])].sort().reduce((C,w)=>{let k=d[v]?.[w]??p[v]?.[w];return w.startsWith("@remix-run/")&&y&&(k=y),C[w]=k,C},{}));await V3e(a,o?.onResult?.(p)??p)}async function t6e(s,a){let p=(await d1(el(s,"tsconfig.json"))).match(/"types": \[(.*?)\]/)?.[1];p&&vS(el(a,"tsconfig.json"),!1,d=>d.replace(/"types":\s*\[[^\]]*\]/,`"types": [${p}]`))}yi();yi();async function wY(s){let a=await import("@ast-grep/napi");if(!(s in a))throw new Error(`Wrong language for AST: ${s}`);return a[s]}async function r6e(s,a,o){let{filepath:p,astType:d}=await Dg(s,"layout");if(!p||!d)throw new Pl(`Could not find root file in ${s}`);await vS(p,a,async h=>{let g=`import ${o.isDefault?o.name:`{${o.name}}`} from '${(o.isAbsolute?"":"./")+o.path}';`;if(h.includes(g.split("from")[0]))return;let v=(await wY(d)).parse(h).root(),C=v.findAll({rule:{kind:"import_statement"}}).reverse(),w=C.find(q=>q.text().includes(".css"))||C.shift(),k=v.find({rule:{kind:"jsx_element",regex:"resetStyles",has:{kind:"jsx_opening_element",has:{kind:"identifier",pattern:"link"}}}});if(!w||!k)throw new Pl('Could not find a "links" export in root file. Please add one and try again.');let N=w.text(),T=k.text(),P=o.isConditional?`{${o.name} && <link rel="stylesheet" href={${o.name}}></link>}`:`<link rel="stylesheet" href={${o.name}}></link>`;return h.replace(N,N+`
+This flag is required in non-interactive terminal environments, such as a CI environment, or when piping input from another process.`,"To resolve this, specify the option in the command, or run the command in an interactive environment such as your local terminal.")})}async resultWithEnvironment(a,o,p){let d=a.flags,h=this.environmentsFilename();if(!d.environment||!h)return a;let g=await ACe(d.environment,h,{from:d.path});if(!g)return a;let y=await super.parse(QAr(o),p),v=await super.parse(o,[...p||this.argv,...ZAr(g,o,y)]);return XAr(y.flags,v.flags,d.environment,g),v}};Tie.baseFlags={};async function YAr(s){await cie(()=>({cmd_all_verbose:s.verbose,cmd_all_path_override:s.path!==void 0,cmd_all_path_override_hash:s.path===void 0?void 0:b3e(s.path)}))}function XAr(s,a,o,p){let d={};for(let[g,y]of Object.entries(a)){let v=Object.prototype.hasOwnProperty.call(s,g),C=Object.prototype.hasOwnProperty.call(p,g);if(!v&&C){let w=g==="password"?`********${y.substr(-4)}`:y;d[g]=w}}if(Object.keys(d).length===0)return;let h=Object.entries(d).map(([g,y])=>`${g}: ${y}`);Lx({headline:["Using applicable flags from",{userInput:o},"environment:"],body:[{list:{items:h}}]})}function QAr(s){return s?.flags?{...s,flags:Object.fromEntries(Object.entries(s.flags).map(([a,o])=>{let p={...o};return delete p.default,[a,p]}))}:s}function ZAr(s,a,o){let p=[];for(let[d,h]of Object.entries(s)){let g=a?.flags&&Object.prototype.hasOwnProperty.call(a.flags,d),y=o.flags&&Object.prototype.hasOwnProperty.call(o.flags,d);if(g&&!y)if(typeof h=="boolean")if(h)p.push(`--${d}`);else throw new Pl(bg`Environments can only specify true for boolean flags. Attempted to set ${jm.yellow(d)} to false.`);else Array.isArray(h)?h.forEach(v=>p.push(`--${d}`,`${v}`)):p.push(`--${d}`,`${h}`)}return p}var PCe=Tie;var OS=xg(Vfe(),1);yi();var F1=xg(Vfe(),1);yi();yi();yi();import{fileURLToPath as NCe}from"node:url";yi();import{exec as eSr}from"node:child_process";import{promisify as tSr}from"node:util";var UE=tSr(eSr);function OCe(){let s=process.listeners("warning")[0];s&&(process.removeAllListeners("warning"),process.prependListener("warning",a=>{a.name!="ExperimentalWarning"&&s(a)}))}var Fie=new URL("../../..",import.meta.url).pathname,jD=Fie.endsWith("/hydrogen/packages/"),rde=jD?Fie:void 0,rSr="assets/hydrogen",nSr="starter",Tw="routes",tde;async function iSr(){if(tde??=await mie("package.json",{cwd:NCe(import.meta.url),type:"file"}),!tde)throw new Pl("Could not find assets directory","Please report this error.");return tde}async function Yy(s,...a){return el(em(await iSr()),process.env.SHOPIFY_UNIT_TEST?"assets":`dist/${rSr}`,s??"",...a)}async function _Y(s,a){a??=await E9();let o=new URL(`${a}/app${s?`/${s}`:""}`,import.meta.url);return o.protocol==="file:"?NCe(o):o.toString()}function E9(s=!!process.env.SHOPIFY_UNIT_TEST){return s?mY():Yy(nSr)}function mY(){if(!jD)throw new Pl("Trying to use skeleton source dir outside of Hydrogen monorepo.","Please report this error.");return el(em(Fie),"templates","skeleton")}async function nde(){let{stdout:s}=await UE("npm root"),a=s.trim();return!a&&jD&&(a=el(em(Fie),"node_modules")),a}var ICe=["tailwind","vanilla-extract","css-modules","postcss"];async function BCe(s,a,o,p=(d,h)=>d){let d=await Yy(s);return Promise.all(Object.entries(a).map(async([h,g])=>{let y=await d1(el(d,h));await H1(el(o,g),p(y,h))}))}async function LCe(s,a,o){let p=Object.values(s).map(h=>Sf(el(a,h)).then(g=>g?h:null)),d=(await Promise.all(p)).filter(Boolean);return!(d.length>0&&!o&&!await $E({message:`Some files already exist (${d.join(", ")}). Overwrite?`,defaultValue:!1}))}yi();yi();import{readdir as mkr}from"node:fs/promises";yi();var Qie=xg(XSe(),1);import*as QSe from"fs/promises";import*as ZSe from"path";var u1e={arrowParens:"always",singleQuote:!0,bracketSpacing:!1,trailingComma:"all"};async function dC(s=process.cwd()){let a=(await QSe.lstat(s)).isFile()?s:ZSe.resolve(s,"prettier.file");try{return await Qie.resolveConfig(a)||u1e}catch{return u1e}}async function Bw(s,a=u1e,o=""){let p=uie(o);return Qie.format(s,{parser:p===".tsx"||p===".ts"?"typescript":"babel",...a})}async function vS(s,a,o){let p=await o(await d1(s));if(typeof p=="string")return a&&(p=await Bw(p,a,s)),H1(s,p)}var gkr=["tsx","ts","jsx","js","mjs","cjs"];async function Dg(s,a,o=gkr){let p=await mkr(s);if(p.includes(a)){let d=n_(s,a);if(!await _ie(d))return{filepath:d};for(let h of["ts","js"]){let g=n_(s,`${a}/index.${h}`);if(await Sf(n_(s,g)))return{filepath:g,extension:h,astType:h}}}else for(let d of o){let h=`${a}.${d}`;if(p.includes(h)){let g=d==="mjs"||d==="cjs"?"js":d;return{filepath:n_(s,h),extension:d,astType:g}}}return{}}var e6e=Object.freeze(["dependencies","devDependencies","peerDependencies"]);async function QM(s,a,o){let p=await x9(el(a,"package.json")),d=await x9(el(s,"package.json")),h=new Set(["comment",...o?.ignoredKeys??[]]),g=Object.keys(d).filter(v=>!e6e.includes(v));for(let v of g){if(h.has(v))continue;let C=d[v],w=p[v],k=Array.isArray(C)&&Array.isArray(w)?[...w,...C]:typeof C=="object"&&typeof w=="object"?{...w,...C}:C;p[v]=k}let y=Object.entries(p.dependencies||{}).find(([v])=>v.startsWith("@remix-run/"))?.[1];for(let v of e6e)h.has(v)||d[v]&&(p[v]=[...new Set([...Object.keys(p[v]??{}),...Object.keys(d[v]??{})])].sort().reduce((C,w)=>{let k=d[v]?.[w]??p[v]?.[w];return w.startsWith("@remix-run/")&&y&&(k=y),C[w]=k,C},{}));await V3e(a,o?.onResult?.(p)??p)}async function t6e(s,a){let p=(await d1(el(s,"tsconfig.json"))).match(/"types": \[(.*?)\]/)?.[1];p&&vS(el(a,"tsconfig.json"),!1,d=>d.replace(/"types":\s*\[[^\]]*\]/,`"types": [${p}]`))}yi();yi();async function wY(s){let a=await import("@ast-grep/napi");if(!(s in a))throw new Error(`Wrong language for AST: ${s}`);return a[s]}async function r6e(s,a,o){let{filepath:p,astType:d}=await Dg(s,"root");if(!p||!d)throw new Pl(`Could not find root file in ${s}`);await vS(p,a,async h=>{let g=`import ${o.isDefault?o.name:`{${o.name}}`} from '${(o.isAbsolute?"":"./")+o.path}';`;if(h.includes(g.split("from")[0]))return;let v=(await wY(d)).parse(h).root(),C=v.findAll({rule:{kind:"import_statement"}}).reverse(),w=C.find(q=>q.text().includes(".css"))||C.shift(),k=v.find({rule:{kind:"jsx_element",regex:"resetStyles",has:{kind:"jsx_opening_element",has:{kind:"identifier",pattern:"link"}}}});if(!w||!k)throw new Pl('Could not find a "links" export in root file. Please add one and try again.');let N=w.text(),T=k.text(),P=o.isConditional?`{${o.name} && <link rel="stylesheet" href={${o.name}}></link>}`:`<link rel="stylesheet" href={${o.name}}></link>`;return h.replace(N,N+`
 `+g).replace(T,P+`
 `+T)})}async function Zie(s,a,o,p){let{filepath:d,astType:h}=await Dg(s,"vite.config");if(!d||!h)throw new Pl(`Could not find vite.config file in ${s}`);await vS(d,a,async g=>{let y=`import ${o.isDefault?o.name:`{${o.name}}`} from '${o.path}';`;if(new RegExp(`['"]${o.path.replace("/","\\/")}['"]`).test(g))return;let C=(await wY(h)).parse(g).root(),w=C.findAll({rule:{kind:"import_statement"}}).pop(),k=C.find(ykr);if(!w||!k)throw new Pl('Could not find a "plugins" key in Vite config file. Please add one and try again.');let N=w.text(),T=k.text(),P=`${o.name}(${p?JSON.stringify(p):""})`;return g.replace(N,N+`
 `+y).replace(T,T.replace("[",`[${P},`))})}var ykr={rule:{pattern:"[$$$]",inside:{kind:"pair",stopBy:"neighbor",has:{field:"key",regex:"^plugins$",stopBy:"neighbor"},inside:{kind:"object",stopBy:"neighbor",all:[{inside:{kind:"export_statement",regex:"export default",stopBy:"end"}},{not:{inside:{kind:"object",stopBy:"end"}}}]}}}};var n6e="styles/tailwind.css";async function i6e({rootDirectory:s,appDirectory:a},o=!1){let p=LD(s,a),d={"tailwind.css":el(p,n6e)};if(!await LCe(d,a,o)){lY("Skipping CSS setup as some files already exist. You may use `--force` or `-f` to override it.");return}return{workPromise:Promise.all([QM(await Yy("tailwind"),s),BCe("tailwind",d,s),dC(s).then(g=>Promise.all([r6e(a,g,{name:"tailwindCss",path:`${n6e}?url`,isDefault:!0}),Zie(s,g,{name:"tailwindcss",path:"@tailwindcss/vite",isDefault:!0})]))]),generatedAssets:Object.values(d),needsInstallDeps:!0}}yi();async function s6e({rootDirectory:s}){return{workPromise:Promise.all([QM(await Yy("vanilla-extract"),s),dC(s).then(o=>Zie(s,o,{path:"@vanilla-extract/vite-plugin",name:"vanillaExtractPlugin",isDefault:!1}))]),generatedAssets:[],needsInstallDeps:!0}}var ZM=[...ICe,"none"],TY={tailwind:"Tailwind v4","vanilla-extract":"Vanilla Extract","css-modules":"CSS Modules",postcss:"PostCSS"};function a6e(s,a,o){switch(s){case"tailwind":return i6e(a,o);case"vanilla-extract":return s6e(a);case"postcss":case"css-modules":return{workPromise:Promise.resolve(),generatedAssets:[],needsInstallDeps:!1};default:throw new Error("Unknown strategy")}}async function o6e(s){let a=Object.entries({...TY,...s?.extraChoices});return RD({message:"Select a styling library",...s,choices:a.map(([o,p])=>({value:o,label:p})),defaultValue:"tailwind"})}yi();yi();yi();yi();async function Lw(s,a,o=!0){let{transpileTs:p}=await import("./morph-3JSBLNUD.js");return p(s,a,o)}yi();var u6e={checkJs:!1,target:"ES2022",module:"ES2022",moduleResolution:"bundler",baseUrl:".",paths:{"~/*":["app/*"]}},vkr=new Set(["noLib","target","module","moduleResolution","checkJs","experimentalDecorators","allowSyntheticDefaultImports","baseUrl","paths",...Object.keys(u6e)]);function xkr(s,a=!1){let o={compilerOptions:{...u6e}};if(s.include&&(o.include=s.include.filter(p=>a||!p.endsWith(".d.ts")).map(p=>p.replace(/(?<!\.d)\.ts(x?)$/,".js$1"))),s.compilerOptions)for(let p of vkr)s.compilerOptions[p]!==void 0&&(o.compilerOptions[p]=s.compilerOptions[p]);return o}async function c1e(s,a=!0){let o=el(s,"app/routes.ts"),d=(await d1(o)).replace("./layout.tsx","./layout.jsx");await H1(o,d);let h=await x3e("**/*.+(ts|tsx)",{absolute:!0,cwd:s,dot:!0,ignore:["**/node_modules/**"]}),g=await dC();for(let y of h){if(y.endsWith(".d.ts")){a||await pY(y);continue}let v=await d1(y),C=await Bw(await Lw(v,y,a),g);await pY(y),await H1(y.replace(/\.ts(x?)$/,".js$1"),C)}try{let y=el(s,"remix.config.js"),v=await d1(y);v=v.replace(/\/server\.ts/gim,"/server.js"),await H1(y,v)}catch(y){f1(`Could not change TS extensions in remix.config.js:
@@ -1549,7 +1549,7 @@ if (!$profileContent -or $profileContent -NotLike '*Invoke-Local-H2*') {
       productionUrl
     }
   }
-`;async function m5e(s){let{hydrogenStorefronts:a}=await uq(nNr,s);return a.map(o=>({...o,parsedId:_5e(o.id)}))}var Fhe={js:"JavaScript",ts:"TypeScript"};async function y5e(s,a,o){let p=o??await p6e({abortSignal:s.signal,extraChoices:{none:"Set up later "+qE.dim(`(run \`${a} setup markets\`)`)}}),d=p==="none"?void 0:p;return{i18nStrategy:d,setupI18n:async h=>{d&&await l6e(d,h)}}}async function v5e(s,a){let o=a===!0?"all":a===!1?[]:await h5e({abortSignal:s.signal}),p=o==="all"||o.length>0;return{needsRouteGeneration:p,setupRoutes:async(d,h,g)=>{if(p)return(await f5e({routeName:o,directory:d,force:!0,typescript:h==="ts",localePrefix:g?.i18nStrategy==="subfolders"?"locale":!1,signal:s.signal,...g},{rootDirectory:d,appDirectory:el(d,"app")})).routeGroups}}}function x5e(s){return Promise.all(["routes.ts","layout.tsx","root","entry.server","entry.client","../server.ts"].map(a=>khe(a,s)))}async function b5e(s,a,o){return a===C2?{}:o??await $E({confirmationMessage:"Yes",cancellationMessage:"No",message:["Create a global",{command:C2},"alias to run commands instead of",{command:a},"?"],abortSignal:s.signal})?{createShortcut:async()=>{try{return(await r5e()).length>0}catch(d){return f1("Failed to create shortcut."+(d?.stack??d?.message??d)),!1}},showShortcutBanner:()=>Lx({body:`You'll need to restart your terminal session to make \`${C2}\` alias available.`})}:{}}async function D5e(s){Ise(!0);let{session:a,config:o}=await JTe();zTe(o);let p=await m5e(a),d=await aNr(p),h;return d?h=d.title:h=await die({message:"New storefront name",defaultValue:WTe(o.shopName),abortSignal:s.signal}),{...o,id:d?.id,title:h,session:a}}async function aNr(s){let a=[{label:"Create a new storefront",value:null},...s.map(({id:p,title:d,productionUrl:h})=>({label:`${d} (${h})`,value:p}))];if(a.length===1)return;let o=await RD({message:"Select a Hydrogen storefront to link",choices:a});return o?s.find(({id:p})=>p===o):void 0}async function Lse({storefrontInfo:s,controller:a,force:o,path:p}){let d=s&&pie(s.title),h=p??d??await die({message:"Where would you like to create your storefront?",defaultValue:"hydrogen-storefront",abortSignal:a.signal}),g=n_(process.cwd(),h);if(await g5e(g)){if(!o&&d&&(h=await die({message:`There's already a folder called \`${d}\`. Where do you want to create the app?`,defaultValue:d,abortSignal:a.signal}),g=n_(process.cwd(),h),await g5e(g)||(o=!0)),!o&&!await $E({message:`The directory ${qE.cyan(h)} is not empty. Do you want to delete the existing files and continue?`,defaultValue:!1,abortSignal:a.signal})){Lx({body:`Destination path ${qE.cyan(h)} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`});return}await RM(g,{force:!0})}return{name:BM(h),location:h,directory:g,storefrontTitle:s?.title}}async function Rse(s,a,o){let p=o??await RD({message:"Select a language",choices:[{label:"JavaScript",value:"js"},{label:"TypeScript",value:"ts"}],defaultValue:"js",abortSignal:a.signal});return{language:p,async transpileProject(){p!=="ts"&&await c1e(s)}}}async function E5e(s,a,o){let p=o??await o6e({abortSignal:a.signal,extraChoices:{none:"Skip and set up later"}}),d=p==="none"?void 0:p;return{cssStrategy:d,async setupCss(){if(d){if(d==="postcss"||d==="css-modules")return;let h=await a6e(d,{rootDirectory:s,appDirectory:el(s,"app")},!0);h&&await h.workPromise}}}}async function jse(s,a,o,p){let d=o??yie(),h="npm";if(p!==!1)if(d==="unknown"){let g=await RD({message:"Select package manager to install dependencies",choices:[{label:"NPM",value:"npm"},{label:"PNPM",value:"pnpm"},{label:"Yarn v1",value:"yarn"},{label:"Skip and install later",value:"no"}],defaultValue:"npm",abortSignal:a.signal});g==="no"?p=!1:(h=g,p=!0)}else p===void 0&&(h=d,p=await $E({message:`Install dependencies with ${d}?`,confirmationMessage:"Yes",cancellationMessage:"No",abortSignal:a.signal}));return jD&&(await gS(el(mY(),".npmrc"),el(s,".npmrc")).catch(()=>{}),p||await sNr(await nde(),el(s,"node_modules")).catch(()=>{})),{packageManager:h,shouldInstallDeps:p,installDeps:p?async()=>{await $3e({directory:s,packageManager:h,args:[],signal:a.signal})}:()=>{}}}var oNr=`
+`;async function m5e(s){let{hydrogenStorefronts:a}=await uq(nNr,s);return a.map(o=>({...o,parsedId:_5e(o.id)}))}var Fhe={js:"JavaScript",ts:"TypeScript"};async function y5e(s,a,o){let p=o??await p6e({abortSignal:s.signal,extraChoices:{none:"Set up later "+qE.dim(`(run \`${a} setup markets\`)`)}}),d=p==="none"?void 0:p;return{i18nStrategy:d,setupI18n:async h=>{d&&await l6e(d,h)}}}async function v5e(s,a){let o=a===!0?"all":a===!1?[]:await h5e({abortSignal:s.signal}),p=o==="all"||o.length>0;return{needsRouteGeneration:p,setupRoutes:async(d,h,g)=>{if(p)return(await f5e({routeName:o,directory:d,force:!0,typescript:h==="ts",localePrefix:g?.i18nStrategy==="subfolders"?"locale":!1,signal:s.signal,...g},{rootDirectory:d,appDirectory:el(d,"app")})).routeGroups}}}function x5e(s){return Promise.all(["routes.ts","root","entry.server","entry.client","../server.ts"].map(a=>khe(a,s)))}async function b5e(s,a,o){return a===C2?{}:o??await $E({confirmationMessage:"Yes",cancellationMessage:"No",message:["Create a global",{command:C2},"alias to run commands instead of",{command:a},"?"],abortSignal:s.signal})?{createShortcut:async()=>{try{return(await r5e()).length>0}catch(d){return f1("Failed to create shortcut."+(d?.stack??d?.message??d)),!1}},showShortcutBanner:()=>Lx({body:`You'll need to restart your terminal session to make \`${C2}\` alias available.`})}:{}}async function D5e(s){Ise(!0);let{session:a,config:o}=await JTe();zTe(o);let p=await m5e(a),d=await aNr(p),h;return d?h=d.title:h=await die({message:"New storefront name",defaultValue:WTe(o.shopName),abortSignal:s.signal}),{...o,id:d?.id,title:h,session:a}}async function aNr(s){let a=[{label:"Create a new storefront",value:null},...s.map(({id:p,title:d,productionUrl:h})=>({label:`${d} (${h})`,value:p}))];if(a.length===1)return;let o=await RD({message:"Select a Hydrogen storefront to link",choices:a});return o?s.find(({id:p})=>p===o):void 0}async function Lse({storefrontInfo:s,controller:a,force:o,path:p}){let d=s&&pie(s.title),h=p??d??await die({message:"Where would you like to create your storefront?",defaultValue:"hydrogen-storefront",abortSignal:a.signal}),g=n_(process.cwd(),h);if(await g5e(g)){if(!o&&d&&(h=await die({message:`There's already a folder called \`${d}\`. Where do you want to create the app?`,defaultValue:d,abortSignal:a.signal}),g=n_(process.cwd(),h),await g5e(g)||(o=!0)),!o&&!await $E({message:`The directory ${qE.cyan(h)} is not empty. Do you want to delete the existing files and continue?`,defaultValue:!1,abortSignal:a.signal})){Lx({body:`Destination path ${qE.cyan(h)} already exists and is not an empty directory. You may use \`--force\` or \`-f\` to override it.`});return}await RM(g,{force:!0})}return{name:BM(h),location:h,directory:g,storefrontTitle:s?.title}}async function Rse(s,a,o){let p=o??await RD({message:"Select a language",choices:[{label:"JavaScript",value:"js"},{label:"TypeScript",value:"ts"}],defaultValue:"js",abortSignal:a.signal});return{language:p,async transpileProject(){p!=="ts"&&await c1e(s)}}}async function E5e(s,a,o){let p=o??await o6e({abortSignal:a.signal,extraChoices:{none:"Skip and set up later"}}),d=p==="none"?void 0:p;return{cssStrategy:d,async setupCss(){if(d){if(d==="postcss"||d==="css-modules")return;let h=await a6e(d,{rootDirectory:s,appDirectory:el(s,"app")},!0);h&&await h.workPromise}}}}async function jse(s,a,o,p){let d=o??yie(),h="npm";if(p!==!1)if(d==="unknown"){let g=await RD({message:"Select package manager to install dependencies",choices:[{label:"NPM",value:"npm"},{label:"PNPM",value:"pnpm"},{label:"Yarn v1",value:"yarn"},{label:"Skip and install later",value:"no"}],defaultValue:"npm",abortSignal:a.signal});g==="no"?p=!1:(h=g,p=!0)}else p===void 0&&(h=d,p=await $E({message:`Install dependencies with ${d}?`,confirmationMessage:"Yes",cancellationMessage:"No",abortSignal:a.signal}));return jD&&(await gS(el(mY(),".npmrc"),el(s,".npmrc")).catch(()=>{}),p||await sNr(await nde(),el(s,"node_modules")).catch(()=>{})),{packageManager:h,shouldInstallDeps:p,installDeps:p?async()=>{await $3e({directory:s,packageManager:h,args:[],signal:a.signal})}:()=>{}}}var oNr=`
 node_modules
 /.cache
 /build

package/package.json

@@ -5,7 +5,7 @@
     "@shopify:registry": "https://registry.npmjs.org"
   },
   "license": "MIT",
-  "version": "5.0.20",
+  "version": "5.0.21",
   "type": "module",
   "repository": {
     "type": "git",

package/dist/assets/hydrogen/starter/app/layout.tsx

@@ -1,46 +0,0 @@
-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>
-  );
-}