@shopify/cli-hydrogen 5.1.1 → 5.2.0

package/dist/commands/hydrogen/setup.test.js

@@ -0,0 +1,62 @@
+import { fileURLToPath } from 'node:url';
+import { vi, describe, beforeEach, it, expect } from 'vitest';
+import { inTemporaryDirectory, copyFile, fileExists, readFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { runSetup } from './setup.js';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+
+vi.mock("../../lib/shell.js");
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  const original = await vi.importActual("@shopify/cli-kit/node/ui");
+  return {
+    ...original,
+    renderConfirmationPrompt: vi.fn(),
+    renderSelectPrompt: vi.fn(),
+    renderTextPrompt: vi.fn(),
+    renderInfo: vi.fn()
+  };
+});
+describe("setup", () => {
+  const outputMock = mockAndCaptureOutput();
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+  beforeEach(() => {
+    outputMock.clear();
+  });
+  it("sets up an i18n strategy and generates routes", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      await copyFile(
+        fileURLToPath(
+          new URL("../../../../../templates/hello-world", import.meta.url)
+        ),
+        tmpDir
+      );
+      await expect(
+        fileExists(joinPath(tmpDir, "app/routes/_index.tsx"))
+      ).resolves.toBeFalsy();
+      vi.mocked(renderConfirmationPrompt).mockResolvedValueOnce(true);
+      await expect(
+        runSetup({
+          directory: tmpDir,
+          markets: "subfolders",
+          installDeps: false
+        })
+      ).resolves.not.toThrow();
+      await expect(
+        fileExists(joinPath(tmpDir, "app/routes/($locale)._index.tsx"))
+      ).resolves.toBeTruthy();
+      const serverFile = await readFile(`${tmpDir}/server.ts`);
+      expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
+      expect(serverFile).toMatch(/url.pathname/);
+      const output = outputMock.info();
+      expect(output).toMatch("success");
+      expect(output).not.toMatch("warning");
+      expect(output).toMatch(/Markets:\s*Subfolders/);
+      expect(output).toMatch("Routes");
+      expect(output).toMatch("Home (/ & /:catchAll)");
+      expect(output).toMatch("Account (/account/*)");
+    });
+  });
+});

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -93,7 +93,7 @@ function activeLinkStyle({
   isPending: boolean;
 }) {
   return {
-    fontWeight: isActive ? 'bold' : '',
+    fontWeight: isActive ? 'bold' : undefined,
     color: isPending ? 'grey' : 'white',
   };
 }

package/dist/generator-templates/starter/app/components/Header.tsx

@@ -172,7 +172,7 @@ function activeLinkStyle({
   isPending: boolean;
 }) {
   return {
-    fontWeight: isActive ? 'bold' : '',
+    fontWeight: isActive ? 'bold' : undefined,
     color: isPending ? 'grey' : 'black',
   };
 }

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -1,13 +1,13 @@
 import {
-  useParams,
-  useFetcher,
   Link,
   Form,
+  useParams,
+  useFetcher,
+  useFetchers,
   type FormProps,
 } from '@remix-run/react';
 import {Image, Money, Pagination} from '@shopify/hydrogen';
 import React, {useRef, useEffect} from 'react';
-import {useFetchers} from '@remix-run/react';
 
 import type {
   PredictiveProductFragment,

package/dist/generator-templates/starter/app/root.tsx

@@ -5,19 +5,40 @@ import {
   Outlet,
   Scripts,
   useCatch,
+  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
+  type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import type {CustomerAccessToken} from '@shopify/hydrogen-react/storefront-api-types';
+import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {HydrogenSession} from '../server';
 import favicon from '../public/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
 export function links() {
   return [
     {rel: 'stylesheet', href: resetStyles},
@@ -93,6 +114,7 @@ export default function App() {
         </Layout>
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );
@@ -133,6 +155,7 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );

package/dist/generator-templates/starter/app/routes/$.tsx

@@ -5,3 +5,7 @@ export async function loader({request}: LoaderArgs) {
     status: 404,
   });
 }
+
+export default function CatchAllPage() {
+  return null;
+}

package/dist/generator-templates/starter/app/routes/_index.tsx

@@ -1,6 +1,10 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Await, useLoaderData, Link} from '@remix-run/react';
+import {
+  Await,
+  useLoaderData,
+  Link,
+  type V2_MetaFunction,
+} from '@remix-run/react';
 import {Suspense} from 'react';
 import {Image, Money} from '@shopify/hydrogen';
 import type {

package/dist/generator-templates/starter/app/routes/account.$.tsx

@@ -1,5 +1,4 @@
-import type {LoaderArgs} from '@shopify/remix-oxygen';
-import {redirect} from '@shopify/remix-oxygen';
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 
 export async function loader({context}: LoaderArgs) {
   if (await context.session.get('customerAccessToken')) {

package/dist/generator-templates/starter/app/routes/account.addresses.tsx

@@ -5,13 +5,13 @@ import {
   redirect,
   type ActionArgs,
   type LoaderArgs,
-  type V2_MetaFunction,
 } from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
+  type V2_MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account.orders._index.tsx

@@ -1,11 +1,6 @@
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Money, Pagination, getPaginationVariables} from '@shopify/hydrogen';
-import {
-  json,
-  redirect,
-  type LoaderArgs,
-  type V2_MetaFunction,
-} from '@shopify/remix-oxygen';
+import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 import type {
   CustomerOrdersFragment,
   OrderItemFragment,

package/dist/generator-templates/starter/app/routes/account.profile.tsx

@@ -1,12 +1,17 @@
 import type {CustomerFragment} from 'storefrontapi.generated';
 import type {CustomerUpdateInput} from '@shopify/hydrogen/storefront-api-types';
-import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
-import {json, redirect, type V2_MetaFunction} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type ActionArgs,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
+  type V2_MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account.tsx

@@ -109,13 +109,13 @@ function AccountLayout({
     <div className="account">
       <h1>{heading}</h1>
       <br />
-      <AcccountMenu />
+      <AccountMenu />
       {children}
     </div>
   );
 }
 
-function AcccountMenu() {
+function AccountMenu() {
   function isActiveStyle({
     isActive,
     isPending,
@@ -124,10 +124,11 @@ function AcccountMenu() {
     isPending: boolean;
   }) {
     return {
-      fontWeight: isActive ? 'bold' : '',
+      fontWeight: isActive ? 'bold' : undefined,
       color: isPending ? 'grey' : 'black',
     };
   }
+
   return (
     <nav role="navigation">
       <NavLink to="/account/orders" style={isActiveStyle}>

package/dist/generator-templates/starter/app/routes/account_.activate.$id.$activationToken.tsx

@@ -1,5 +1,9 @@
-import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
-import {json, redirect} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type ActionArgs,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
 import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
 
 type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account_.login.tsx

@@ -3,9 +3,13 @@ import {
   redirect,
   type ActionArgs,
   type LoaderArgs,
-  type V2_MetaFunction,
 } from '@shopify/remix-oxygen';
-import {Form, Link, useActionData} from '@remix-run/react';
+import {
+  Form,
+  Link,
+  useActionData,
+  type V2_MetaFunction,
+} from '@remix-run/react';
 
 type ActionResponse = {
   error: string | null;

package/dist/generator-templates/starter/app/routes/account_.logout.tsx

@@ -1,9 +1,5 @@
-import {
-  json,
-  redirect,
-  type ActionArgs,
-  type V2_MetaFunction,
-} from '@shopify/remix-oxygen';
+import {json, redirect, type ActionArgs} from '@shopify/remix-oxygen';
+import {type V2_MetaFunction} from '@remix-run/react';
 
 export const meta: V2_MetaFunction = () => {
   return [{title: 'Logout'}];

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = ({data}) => {

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Image, Pagination, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 

package/dist/generator-templates/starter/app/routes/blogs._index.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = () => {

package/dist/generator-templates/starter/app/routes/cart.tsx

@@ -1,8 +1,7 @@
-import {Await, useMatches} from '@remix-run/react';
+import {Await, useMatches, type V2_MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
 import type {CartQueryData} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {type ActionArgs, json} from '@shopify/remix-oxygen';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '~/components/Cart';

package/dist/generator-templates/starter/app/routes/collections.$handle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link, type V2_MetaFunction} from '@remix-run/react';
 import {
   Pagination,
   getPaginationVariables,

package/dist/generator-templates/starter/app/routes/pages.$handle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 
 export const meta: V2_MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data.page.title}`}];

package/dist/generator-templates/starter/app/routes/policies.$handle.tsx

@@ -1,7 +1,6 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
-import {type Shop} from '@shopify/hydrogen-react/storefront-api-types';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
+import {type Shop} from '@shopify/hydrogen/storefront-api-types';
 
 type SelectedPolicies = keyof Pick<
   Shop,

package/dist/generator-templates/starter/app/routes/products.$handle.tsx

@@ -1,8 +1,12 @@
 import {Suspense} from 'react';
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import type {FetcherWithComponents} from '@remix-run/react';
-import {Await, Link, useLoaderData} from '@remix-run/react';
+import {
+  Await,
+  Link,
+  useLoaderData,
+  type V2_MetaFunction,
+  type FetcherWithComponents,
+} from '@remix-run/react';
 import type {
   ProductFragment,
   ProductVariantsQuery,
@@ -17,7 +21,10 @@ import {
   getSelectedProductOptions,
   CartForm,
 } from '@shopify/hydrogen';
-import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';
+import type {
+  CartLineInput,
+  SelectedOption,
+} from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/utils';
 
 export const meta: V2_MetaFunction = ({data}) => {
@@ -47,15 +54,6 @@ export async function loader({params, request, context}: LoaderArgs) {
     variables: {handle, selectedOptions},
   });
 
-  // In order to show which variants are available in the UI, we need to query
-  // all of them. But there might be a *lot*, so instead separate the variants
-  // into it's own separate query that is deferred. So there's a brief moment
-  // where variant options might show as available when they're not, but after
-  // this deffered query resolves, the UI will update.
-  const variants = storefront.query(VARIANTS_QUERY, {
-    variables: {handle},
-  });
-
   if (!product?.id) {
     throw new Response(null, {status: 404});
   }
@@ -63,7 +61,8 @@ export async function loader({params, request, context}: LoaderArgs) {
   const firstVariant = product.variants.nodes[0];
   const firstVariantIsDefault = Boolean(
     firstVariant.selectedOptions.find(
-      (option) => option.name === 'Title' && option.value === 'Default Title',
+      (option: SelectedOption) =>
+        option.name === 'Title' && option.value === 'Default Title',
     ),
   );
 
@@ -76,6 +75,16 @@ export async function loader({params, request, context}: LoaderArgs) {
       return redirectToFirstVariant({product, request});
     }
   }
+
+  // In order to show which variants are available in the UI, we need to query
+  // all of them. But there might be a *lot*, so instead separate the variants
+  // into it's own separate query that is deferred. So there's a brief moment
+  // where variant options might show as available when they're not, but after
+  // this deffered query resolves, the UI will update.
+  const variants = storefront.query(VARIANTS_QUERY, {
+    variables: {handle},
+  });
+
   return defer({product, variants});
 }
 
@@ -337,7 +346,6 @@ const PRODUCT_VARIANT_FRAGMENT = `#graphql
       title
       handle
     }
-    quantityAvailable
     selectedOptions {
       name
       value

package/dist/generator-templates/starter/app/routes/search.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {getPaginationVariables} from '@shopify/hydrogen';
 
 import {SearchForm, SearchResults, NoSearchResults} from '~/components/Search';

package/dist/generator-templates/starter/package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.48.0",
-    "@shopify/cli-hydrogen": "^5.1.1",
-    "@shopify/hydrogen": "^2023.7.1",
-    "@shopify/remix-oxygen": "^1.1.2",
+    "@shopify/cli-hydrogen": "^5.2.0",
+    "@shopify/hydrogen": "^2023.7.3",
+    "@shopify/remix-oxygen": "^1.1.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@remix-run/dev": "1.19.1",
-    "@shopify/oxygen-workers-types": "^3.17.2",
+    "@shopify/oxygen-workers-types": "^3.17.3",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",

package/dist/generator-templates/starter/remix.config.js

@@ -17,6 +17,7 @@ module.exports = {
   serverPlatform: 'neutral',
   serverMinify: process.env.NODE_ENV === 'production',
   future: {
+    v2_dev: true,
     v2_meta: true,
     v2_headers: true,
     v2_errorBoundary: true,

package/dist/generator-templates/starter/storefrontapi.generated.d.ts

@@ -1350,7 +1350,7 @@ export type PoliciesQuery = {
 
 export type ProductVariantFragment = Pick<
   StorefrontAPI.ProductVariant,
-  'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+  'availableForSale' | 'id' | 'sku' | 'title'
 > & {
   compareAtPrice?: StorefrontAPI.Maybe<
     Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1377,7 +1377,7 @@ export type ProductFragment = Pick<
   selectedVariant?: StorefrontAPI.Maybe<
     Pick<
       StorefrontAPI.ProductVariant,
-      'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+      'availableForSale' | 'id' | 'sku' | 'title'
     > & {
       compareAtPrice?: StorefrontAPI.Maybe<
         Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1402,7 +1402,7 @@ export type ProductFragment = Pick<
     nodes: Array<
       Pick<
         StorefrontAPI.ProductVariant,
-        'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+        'availableForSale' | 'id' | 'sku' | 'title'
       > & {
         compareAtPrice?: StorefrontAPI.Maybe<
           Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1446,7 +1446,7 @@ export type ProductQuery = {
       selectedVariant?: StorefrontAPI.Maybe<
         Pick<
           StorefrontAPI.ProductVariant,
-          'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+          'availableForSale' | 'id' | 'sku' | 'title'
         > & {
           compareAtPrice?: StorefrontAPI.Maybe<
             Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1471,7 +1471,7 @@ export type ProductQuery = {
         nodes: Array<
           Pick<
             StorefrontAPI.ProductVariant,
-            'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+            'availableForSale' | 'id' | 'sku' | 'title'
           > & {
             compareAtPrice?: StorefrontAPI.Maybe<
               Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1503,7 +1503,7 @@ export type ProductVariantsFragment = {
     nodes: Array<
       Pick<
         StorefrontAPI.ProductVariant,
-        'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+        'availableForSale' | 'id' | 'sku' | 'title'
       > & {
         compareAtPrice?: StorefrontAPI.Maybe<
           Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1539,7 +1539,7 @@ export type ProductVariantsQuery = {
       nodes: Array<
         Pick<
           StorefrontAPI.ProductVariant,
-          'availableForSale' | 'id' | 'quantityAvailable' | 'sku' | 'title'
+          'availableForSale' | 'id' | 'sku' | 'title'
         > & {
           compareAtPrice?: StorefrontAPI.Maybe<
             Pick<StorefrontAPI.MoneyV2, 'amount' | 'currencyCode'>
@@ -1839,11 +1839,11 @@ interface GeneratedQueryTypes {
     return: PoliciesQuery;
     variables: PoliciesQueryVariables;
   };
-  '#graphql\n  query Product(\n    $country: CountryCode\n    $handle: String!\n    $language: LanguageCode\n    $selectedOptions: [SelectedOptionInput!]!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...Product\n    }\n  }\n  #graphql\n  fragment Product on Product {\n    id\n    title\n    vendor\n    handle\n    descriptionHtml\n    description\n    options {\n      name\n      values\n    }\n    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {\n      ...ProductVariant\n    }\n    variants(first: 1) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n    seo {\n      description\n      title\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    quantityAvailable\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n': {
+  '#graphql\n  query Product(\n    $country: CountryCode\n    $handle: String!\n    $language: LanguageCode\n    $selectedOptions: [SelectedOptionInput!]!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...Product\n    }\n  }\n  #graphql\n  fragment Product on Product {\n    id\n    title\n    vendor\n    handle\n    descriptionHtml\n    description\n    options {\n      name\n      values\n    }\n    selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {\n      ...ProductVariant\n    }\n    variants(first: 1) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n    seo {\n      description\n      title\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n': {
     return: ProductQuery;
     variables: ProductQueryVariables;
   };
-  '#graphql\n  #graphql\n  fragment ProductVariants on Product {\n    variants(first: 250) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    quantityAvailable\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n  query ProductVariants(\n    $country: CountryCode\n    $language: LanguageCode\n    $handle: String!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...ProductVariants\n    }\n  }\n': {
+  '#graphql\n  #graphql\n  fragment ProductVariants on Product {\n    variants(first: 250) {\n      nodes {\n        ...ProductVariant\n      }\n    }\n  }\n  #graphql\n  fragment ProductVariant on ProductVariant {\n    availableForSale\n    compareAtPrice {\n      amount\n      currencyCode\n    }\n    id\n    image {\n      __typename\n      id\n      url\n      altText\n      width\n      height\n    }\n    price {\n      amount\n      currencyCode\n    }\n    product {\n      title\n      handle\n    }\n    selectedOptions {\n      name\n      value\n    }\n    sku\n    title\n    unitPrice {\n      amount\n      currencyCode\n    }\n  }\n\n\n  query ProductVariants(\n    $country: CountryCode\n    $language: LanguageCode\n    $handle: String!\n  ) @inContext(country: $country, language: $language) {\n    product(handle: $handle) {\n      ...ProductVariants\n    }\n  }\n': {
     return: ProductVariantsQuery;
     variables: ProductVariantsQueryVariables;
   };

package/dist/lib/ast.js

@@ -0,0 +1,9 @@
+async function importLangAstGrep(lang) {
+  const astGrep = await import('@ast-grep/napi');
+  if (!(lang in astGrep)) {
+    throw new Error(`Wrong language for AST: ${lang}`);
+  }
+  return astGrep[lang];
+}
+
+export { importLangAstGrep };

package/dist/lib/check-version.test.js

@@ -34,6 +34,7 @@ describe("checkHydrogenVersion()", () => {
       await checkHydrogenVersion("dir");
       expect(checkForNewVersion).toHaveBeenCalledWith(
         "@shopify/hydrogen",
+        // Calver
         expect.stringMatching(/20\d{2}\.\d{1,2}\.\d{1,3}/)
       );
     });