@shopify/cli-hydrogen 5.5.0 → 6.0.0

package/dist/generator-templates/starter/app/styles/app.css

@@ -48,9 +48,10 @@ aside header .close {
   text-decoration: none;
   transition: all 200ms;
   width: 20px;
-  &:hover {
-    opacity: 1;
-  }
+}
+
+aside header .close:hover {
+  opacity: 1;
 }
 
 aside header h2 {
@@ -64,9 +65,10 @@ aside main {
 
 aside p {
   margin: 0 0 0.25rem;
-  &:last-child {
-    margin: 0;
-  }
+}
+
+aside p:last-child {
+  margin: 0;
 }
 
 aside li {
@@ -110,16 +112,14 @@ aside li {
   width: 100%;
 }
 
-.overlay {
-  &:target {
-    opacity: 1;
-    pointer-events: auto;
-    visibility: visible;
-  }
-  /* reveal aside */
-  &:target aside {
-    transform: translateX(calc(var(--aside-width) * -1));
-  }
+.overlay:target {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+/* reveal aside */
+.overlay:target aside {
+  transform: translateX(calc(var(--aside-width) * -1));
 }
 
 /*

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

@@ -2,22 +2,22 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "build": "shopify hydrogen build",
-    "dev": "shopify hydrogen dev --codegen-unstable",
+    "dev": "shopify hydrogen dev --codegen",
     "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit",
-    "codegen": "shopify hydrogen codegen-unstable"
+    "codegen": "shopify hydrogen codegen"
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "1.19.1",
-    "@shopify/cli": "3.49.2",
-    "@shopify/cli-hydrogen": "^5.5.0",
-    "@shopify/hydrogen": "^2023.7.12",
-    "@shopify/remix-oxygen": "^1.1.8",
+    "@remix-run/react": "2.1.0",
+    "@shopify/cli": "3.50.0",
+    "@shopify/cli-hydrogen": "^6.0.0",
+    "@shopify/hydrogen": "^2023.10.0",
+    "@shopify/remix-oxygen": "^2.0.0",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",
@@ -25,8 +25,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "1.19.1",
-    "@remix-run/eslint-config": "1.19.1",
+    "@remix-run/dev": "2.1.0",
+    "@remix-run/eslint-config": "2.1.0",
     "@shopify/oxygen-workers-types": "^3.17.3",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

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

@@ -16,12 +16,4 @@ module.exports = {
   serverModuleFormat: 'esm',
   serverPlatform: 'neutral',
   serverMinify: process.env.NODE_ENV === 'production',
-  future: {
-    v2_dev: true,
-    v2_meta: true,
-    v2_headers: true,
-    v2_errorBoundary: true,
-    v2_routeConvention: true,
-    v2_normalizeFormMethod: true,
-  },
 };

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

@@ -55,7 +55,7 @@ export type ShopFragment = Pick<
 
 export type HeaderQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  headerMenuHandle: StorefrontAPI.Scalars['String'];
+  headerMenuHandle: StorefrontAPI.Scalars['String']['input'];
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
 
@@ -89,7 +89,7 @@ export type HeaderQuery = {
 
 export type FooterQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  footerMenuHandle: StorefrontAPI.Scalars['String'];
+  footerMenuHandle: StorefrontAPI.Scalars['String']['input'];
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
 
@@ -121,7 +121,7 @@ export type StoreRobotsQueryVariables = StorefrontAPI.Exact<{
 export type StoreRobotsQuery = {shop: Pick<StorefrontAPI.Shop, 'id'>};
 
 export type SitemapQueryVariables = StorefrontAPI.Exact<{
-  urlLimits?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
+  urlLimits?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
 
@@ -223,8 +223,8 @@ export type RecommendedProductsQuery = {
 
 export type CustomerAddressUpdateMutationVariables = StorefrontAPI.Exact<{
   address: StorefrontAPI.MailingAddressInput;
-  customerAccessToken: StorefrontAPI.Scalars['String'];
-  id: StorefrontAPI.Scalars['ID'];
+  customerAccessToken: StorefrontAPI.Scalars['String']['input'];
+  id: StorefrontAPI.Scalars['ID']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
@@ -241,8 +241,8 @@ export type CustomerAddressUpdateMutation = {
 };
 
 export type CustomerAddressDeleteMutationVariables = StorefrontAPI.Exact<{
-  customerAccessToken: StorefrontAPI.Scalars['String'];
-  id: StorefrontAPI.Scalars['ID'];
+  customerAccessToken: StorefrontAPI.Scalars['String']['input'];
+  id: StorefrontAPI.Scalars['ID']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
@@ -262,8 +262,8 @@ export type CustomerAddressDeleteMutation = {
 
 export type CustomerDefaultAddressUpdateMutationVariables =
   StorefrontAPI.Exact<{
-    addressId: StorefrontAPI.Scalars['ID'];
-    customerAccessToken: StorefrontAPI.Scalars['String'];
+    addressId: StorefrontAPI.Scalars['ID']['input'];
+    customerAccessToken: StorefrontAPI.Scalars['String']['input'];
     country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
     language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
   }>;
@@ -283,7 +283,7 @@ export type CustomerDefaultAddressUpdateMutation = {
 
 export type CustomerAddressCreateMutationVariables = StorefrontAPI.Exact<{
   address: StorefrontAPI.MailingAddressInput;
-  customerAccessToken: StorefrontAPI.Scalars['String'];
+  customerAccessToken: StorefrontAPI.Scalars['String']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
@@ -474,7 +474,7 @@ export type OrderFragment = Pick<
 export type OrderQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  orderId: StorefrontAPI.Scalars['ID'];
+  orderId: StorefrontAPI.Scalars['ID']['input'];
 }>;
 
 export type OrderQuery = {
@@ -644,12 +644,16 @@ export type CustomerOrdersFragment = Pick<
 
 export type CustomerOrdersQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  customerAccessToken: StorefrontAPI.Scalars['String'];
-  endCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
-  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
+  customerAccessToken: StorefrontAPI.Scalars['String']['input'];
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  startCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
 }>;
 
 export type CustomerOrdersQuery = {
@@ -697,7 +701,7 @@ export type CustomerOrdersQuery = {
 };
 
 export type CustomerUpdateMutationVariables = StorefrontAPI.Exact<{
-  customerAccessToken: StorefrontAPI.Scalars['String'];
+  customerAccessToken: StorefrontAPI.Scalars['String']['input'];
   customer: StorefrontAPI.CustomerUpdateInput;
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
@@ -784,7 +788,7 @@ export type AddressFragment = Pick<
 >;
 
 export type CustomerQueryVariables = StorefrontAPI.Exact<{
-  customerAccessToken: StorefrontAPI.Scalars['String'];
+  customerAccessToken: StorefrontAPI.Scalars['String']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
@@ -841,7 +845,7 @@ export type CustomerQuery = {
 };
 
 export type CustomerActivateMutationVariables = StorefrontAPI.Exact<{
-  id: StorefrontAPI.Scalars['ID'];
+  id: StorefrontAPI.Scalars['ID']['input'];
   input: StorefrontAPI.CustomerActivateInput;
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
@@ -874,7 +878,7 @@ export type LoginMutation = {
 };
 
 export type CustomerRecoverMutationVariables = StorefrontAPI.Exact<{
-  email: StorefrontAPI.Scalars['String'];
+  email: StorefrontAPI.Scalars['String']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
@@ -920,7 +924,7 @@ export type RegisterLoginMutation = {
 };
 
 export type CustomerResetMutationVariables = StorefrontAPI.Exact<{
-  id: StorefrontAPI.Scalars['ID'];
+  id: StorefrontAPI.Scalars['ID']['input'];
   input: StorefrontAPI.CustomerResetInput;
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
@@ -986,9 +990,9 @@ export type PredictiveQueryFragment = {
 export type PredictiveSearchQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  limit: StorefrontAPI.Scalars['Int'];
+  limit: StorefrontAPI.Scalars['Int']['input'];
   limitScope: StorefrontAPI.PredictiveSearchLimitScope;
-  searchTerm: StorefrontAPI.Scalars['String'];
+  searchTerm: StorefrontAPI.Scalars['String']['input'];
   types?: StorefrontAPI.InputMaybe<
     | Array<StorefrontAPI.PredictiveSearchType>
     | StorefrontAPI.PredictiveSearchType
@@ -1053,8 +1057,8 @@ export type PredictiveSearchQuery = {
 };
 
 export type ArticleQueryVariables = StorefrontAPI.Exact<{
-  articleHandle: StorefrontAPI.Scalars['String'];
-  blogHandle: StorefrontAPI.Scalars['String'];
+  articleHandle: StorefrontAPI.Scalars['String']['input'];
+  blogHandle: StorefrontAPI.Scalars['String']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
 }>;
@@ -1080,11 +1084,15 @@ export type ArticleQuery = {
 
 export type BlogQueryVariables = StorefrontAPI.Exact<{
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  blogHandle: StorefrontAPI.Scalars['String'];
-  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  startCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
-  endCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
+  blogHandle: StorefrontAPI.Scalars['String']['input'];
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
 }>;
 
 export type BlogQuery = {
@@ -1133,11 +1141,15 @@ export type ArticleItemFragment = Pick<
 
 export type BlogsQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  endCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
-  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  startCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
 }>;
 
 export type BlogsQuery = {
@@ -1182,13 +1194,17 @@ export type ProductItemFragment = Pick<
 };
 
 export type CollectionQueryVariables = StorefrontAPI.Exact<{
-  handle: StorefrontAPI.Scalars['String'];
+  handle: StorefrontAPI.Scalars['String']['input'];
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  startCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
-  endCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
 }>;
 
 export type CollectionQuery = {
@@ -1245,11 +1261,15 @@ export type CollectionFragment = Pick<
 
 export type StoreCollectionsQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  endCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
-  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  startCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
 }>;
 
 export type StoreCollectionsQuery = {
@@ -1274,7 +1294,7 @@ export type StoreCollectionsQuery = {
 export type PageQueryVariables = StorefrontAPI.Exact<{
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  handle: StorefrontAPI.Scalars['String'];
+  handle: StorefrontAPI.Scalars['String']['input'];
 }>;
 
 export type PageQuery = {
@@ -1295,10 +1315,10 @@ export type PolicyFragment = Pick<
 export type PolicyQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  privacyPolicy: StorefrontAPI.Scalars['Boolean'];
-  refundPolicy: StorefrontAPI.Scalars['Boolean'];
-  shippingPolicy: StorefrontAPI.Scalars['Boolean'];
-  termsOfService: StorefrontAPI.Scalars['Boolean'];
+  privacyPolicy: StorefrontAPI.Scalars['Boolean']['input'];
+  refundPolicy: StorefrontAPI.Scalars['Boolean']['input'];
+  shippingPolicy: StorefrontAPI.Scalars['Boolean']['input'];
+  termsOfService: StorefrontAPI.Scalars['Boolean']['input'];
 }>;
 
 export type PolicyQuery = {
@@ -1429,7 +1449,7 @@ export type ProductFragment = Pick<
 
 export type ProductQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  handle: StorefrontAPI.Scalars['String'];
+  handle: StorefrontAPI.Scalars['String']['input'];
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
   selectedOptions:
     | Array<StorefrontAPI.SelectedOptionInput>
@@ -1530,7 +1550,7 @@ export type ProductVariantsFragment = {
 export type ProductVariantsQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  handle: StorefrontAPI.Scalars['String'];
+  handle: StorefrontAPI.Scalars['String']['input'];
 }>;
 
 export type ProductVariantsQuery = {
@@ -1599,12 +1619,16 @@ export type SearchArticleFragment = {__typename: 'Article'} & Pick<
 
 export type SearchQueryVariables = StorefrontAPI.Exact<{
   country?: StorefrontAPI.InputMaybe<StorefrontAPI.CountryCode>;
-  endCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
-  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
+  endCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
+  first?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
   language?: StorefrontAPI.InputMaybe<StorefrontAPI.LanguageCode>;
-  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']>;
-  query: StorefrontAPI.Scalars['String'];
-  startCursor?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['String']>;
+  last?: StorefrontAPI.InputMaybe<StorefrontAPI.Scalars['Int']['input']>;
+  query: StorefrontAPI.Scalars['String']['input'];
+  startCursor?: StorefrontAPI.InputMaybe<
+    StorefrontAPI.Scalars['String']['input']
+  >;
 }>;
 
 export type SearchQuery = {

package/dist/lib/codegen.js

@@ -1,11 +1,9 @@
-import { loadCodegenConfig, generate } from '@graphql-codegen/cli';
-import { patchGqlPluck, pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
 import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
 import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { spawn } from 'node:child_process';
-import { fileURLToPath } from 'node:url';
 
 const nodePath = process.argv[1];
 const modulePath = fileURLToPath(import.meta.url);
@@ -65,16 +63,20 @@ function spawnCodegenProcess({
   return child;
 }
 async function codegen(options) {
-  await patchGqlPluck();
-  try {
-    return await generateTypes(options);
-  } catch (error) {
+  await import('@shopify/hydrogen-codegen/patch').catch((error) => {
+    throw new AbortError(
+      `Failed to patch dependencies for codegen.
+${error.stack}`,
+      "Please report this issue."
+    );
+  });
+  return generateTypes(options).catch((error) => {
     const { message, details } = normalizeCodegenError(
       error.message,
       options.rootDirectory
     );
     throw new AbortError(message, details);
-  }
+  });
 }
 async function generateTypes({
   watch,
@@ -82,30 +84,36 @@ async function generateTypes({
   forceSfapiVersion,
   ...dirs
 }) {
+  const { generate, loadCodegenConfig, CodegenContext } = await import('@graphql-codegen/cli');
   const { config: codegenConfig } = (
     // Load <root>/codegen.ts if available
     await loadCodegenConfig({
       configFilePath,
       searchPlaces: [dirs.rootDirectory]
     }) || // Fall back to default config
-    generateDefaultConfig(dirs, forceSfapiVersion)
+    await generateDefaultConfig(dirs, forceSfapiVersion)
   );
   await addHooksToHydrogenOptions(codegenConfig, dirs);
-  await generate(
-    {
+  const codegenContext = new CodegenContext({
+    config: {
       ...codegenConfig,
-      cwd: dirs.rootDirectory,
       watch,
       // Note: do not use `silent` without `watch`, it will swallow errors and
       // won't hide all logs. `errorsOnly` flag doesn't work either.
-      silent: !watch
+      silent: !watch,
+      // @ts-expect-error this is to avoid process.cwd() in tests
+      cwd: dirs.rootDirectory
     },
-    true
-  );
+    // https://github.com/dotansimha/graphql-code-generator/issues/9490
+    filepath: "not-used-but-must-be-set"
+  });
+  codegenContext.cwd = dirs.rootDirectory;
+  await generate(codegenContext, true);
   return Object.keys(codegenConfig.generates);
 }
-function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
-  const tsDefaultGlob = "*!(*.d).{ts,tsx}";
+async function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
+  const { schema, preset, pluckConfig } = await import('@shopify/hydrogen-codegen');
+  const defaultGlob = "*!(*.d).{ts,tsx,js,jsx}";
   const appDirRelative = relativePath(rootDirectory, appDirectory);
   return {
     filepath: "virtual:codegen",
@@ -117,10 +125,10 @@ function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersio
           preset,
           schema,
           documents: [
-            tsDefaultGlob,
-            // E.g. ./server.ts
-            joinPath(appDirRelative, "**", tsDefaultGlob)
-            // E.g. app/routes/_index.tsx
+            defaultGlob,
+            // E.g. ./server.(t|j)s
+            joinPath(appDirRelative, "**", defaultGlob)
+            // E.g. app/routes/_index.(t|j)sx
           ],
           ...!!forceSfapiVersion && {
             presetConfig: { importTypes: false },
@@ -143,6 +151,7 @@ function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersio
   };
 }
 async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
+  const { schema } = await import('@shopify/hydrogen-codegen');
   const [, options] = Object.entries(codegenConfig.generates).find(
     ([, value]) => (Array.isArray(value) ? value[0] : value)?.schema === schema
   ) || [];

package/dist/lib/flags.js

@@ -48,10 +48,17 @@ const commonFlags = {
     default: true,
     allowNo: true
   }),
+  codegen: Flags.boolean({
+    description: "Generate types for the Storefront API queries found in your project.",
+    required: false,
+    default: false,
+    deprecateAliases: true,
+    aliases: ["codegen-unstable"]
+  }),
   codegenConfigPath: Flags.string({
     description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
     required: false,
-    dependsOn: ["codegen-unstable"]
+    dependsOn: ["codegen"]
   }),
   styling: Flags.string({
     description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(

package/dist/lib/onboarding/common.js

@@ -58,12 +58,7 @@ async function handleRouteGeneration(controller, flagRoutes) {
           },
           {
             rootDirectory: directory,
-            appDirectory: joinPath(directory, "app"),
-            future: {
-              v2_errorBoundary: true,
-              v2_meta: true,
-              v2_routeConvention: true
-            }
+            appDirectory: joinPath(directory, "app")
           }
         );
         return result.routeGroups;
@@ -74,14 +69,7 @@ async function handleRouteGeneration(controller, flagRoutes) {
 function generateProjectEntries(options) {
   return Promise.all(
     ["root", "entry.server", "entry.client"].map(
-      (filename) => generateProjectFile(filename, {
-        v2Flags: {
-          isV2ErrorBoundary: true,
-          isV2Meta: true,
-          isV2RouteConvention: true
-        },
-        ...options
-      })
+      (filename) => generateProjectFile(filename, options)
     )
   );
 }

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

@@ -11,6 +11,7 @@ function getRequiredRemixVersion(require2 = createRequire(import.meta.url)) {
 function checkRemixVersions() {
   const require2 = createRequire(import.meta.url);
   const requiredVersionInHydrogen = getRequiredRemixVersion(require2);
+  const satisfiesSemver = require2("semver/functions/satisfies.js");
   const pkgs = [
     "dev",
     "react",
@@ -21,7 +22,7 @@ function checkRemixVersions() {
     "eslint-config"
   ].map((name) => getRemixPackageVersion(require2, name));
   const outOfSyncPkgs = pkgs.filter(
-    (pkg) => pkg.version && pkg.version !== requiredVersionInHydrogen
+    (pkg) => pkg.version && !satisfiesSemver(pkg.version, requiredVersionInHydrogen)
   );
   if (outOfSyncPkgs.length === 0)
     return;

package/dist/lib/remix-version-interop.js

@@ -1,46 +1,8 @@
 import { createRequire } from 'module';
-import { getRemixConfig } from './remix-config.js';
 
-function isRemixV2() {
-  try {
-    const require2 = createRequire(import.meta.url);
-    const version = require2("@remix-run/server-runtime/package.json")?.version ?? "";
-    return version.startsWith("2.");
-  } catch {
-    return false;
-  }
-}
-async function getV2Flags(root, remixConfigFuture) {
-  const isV2 = isRemixV2();
-  const futureFlags = {
-    ...!isV2 && (remixConfigFuture ?? (await getRemixConfig(root)).future)
-  };
-  return {
-    isV2Meta: isV2 || !!futureFlags.v2_meta,
-    isV2ErrorBoundary: isV2 || !!futureFlags.v2_errorBoundary,
-    isV2RouteConvention: isV2 ? !isV1RouteConventionInstalled() : !!futureFlags.v2_routeConvention
-  };
-}
 function convertRouteToV1(route) {
   return route.replace(/(^|\.)_index$/, "$1index").replace(/\.(?!\w+\])/g, "/");
 }
-function convertTemplateToRemixVersion(template, { isV2Meta, isV2ErrorBoundary }) {
-  template = isV2Meta ? convertToMetaV2(template) : convertToMetaV1(template);
-  template = isV2ErrorBoundary ? convertToErrorBoundaryV2(template) : convertToErrorBoundaryV1(template);
-  return template;
-}
-function convertToMetaV2(template) {
-  return template.replace(/type MetaFunction\s*,?/, "").replace(/export (const|function) metaV1.+?\n};?\n/s, "").replace(/import \{\s*\} from '@shopify\/remix-oxygen';/, "");
-}
-function convertToMetaV1(template) {
-  return template.replace(/type V2_MetaFunction\s*,?/, "").replace(/export (const|function) meta[^V].+?\n};?\n/s, "").replace(/(const|function) metaV1/, "$1 meta").replace(/import \{\s*\} from '@remix-run\/react';/, "");
-}
-function convertToErrorBoundaryV2(template) {
-  return template.replace(/type ErrorBoundaryComponent\s*,?/s, "").replace(/useCatch\s*,?/s, "").replace(/export function CatchBoundary.+?\n}/s, "").replace(/export (const|function) ErrorBoundaryV1.+?\n};?/s, "").replace(/import \{\s*\} from '@shopify\/remix-oxygen';/, "").replace(/import \{\s*\} from '@remix-run\/react';/, "");
-}
-function convertToErrorBoundaryV1(template) {
-  return template.replace(/useRouteError\s*,?/s, "").replace(/isRouteErrorResponse\s*,?/s, "").replace(/export function ErrorBoundary[^V].+?\n}/s, "").replace(/(const|function) ErrorBoundaryV1/, "$1 ErrorBoundary").replace(/import \{\s*\} from '@remix-run\/react';/, "");
-}
 function isV1RouteConventionInstalled() {
   try {
     const require2 = createRequire(import.meta.url);
@@ -51,4 +13,4 @@ function isV1RouteConventionInstalled() {
   }
 }
 
-export { convertRouteToV1, convertTemplateToRemixVersion, getV2Flags, isRemixV2 };
+export { convertRouteToV1, isV1RouteConventionInstalled };