@shopify/cli-hydrogen 5.5.1 → 6.0.0

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

@@ -1,103 +1,13 @@
 import { describe, it, expect } from 'vitest';
-import { convertRouteToV1, convertTemplateToRemixVersion } from './remix-version-interop.js';
+import { convertRouteToV1 } from './remix-version-interop.js';
 
 describe("remix-version-interop", () => {
-  describe("v2_routeConvention", () => {
-    it("converts routes to v1", () => {
-      expect(convertRouteToV1("_index")).toEqual("index");
-      expect(convertRouteToV1("path.to.file")).toEqual("path/to/file");
-      expect(convertRouteToV1("path.to._index")).toEqual("path/to/index");
-      expect(convertRouteToV1("patht.to.[sitemap.xml]")).toEqual(
-        "patht/to/[sitemap.xml]"
-      );
-    });
-  });
-  describe("v2_meta", () => {
-    const META_TEMPLATE = `
-    import {type MetaFunction} from '@shopify/remix-oxygen';
-    import {type V2_MetaFunction} from '@remix-run/react';
-    export const metaV1: MetaFunction = ({data}) => {
-      const title = 'title';
-      return {title};
-    };
-    export const meta: V2_MetaFunction = ({data}) => {
-      const title = 'title';
-      return [{title}];
-    };
-    `.replace(/^\s{4}/gm, "");
-    it("transforms meta exports to v2", async () => {
-      const result = convertTemplateToRemixVersion(META_TEMPLATE, {
-        isV2Meta: true
-      });
-      expect(result).toContain("type V2_MetaFunction");
-      expect(result).not.toContain("type MetaFunction");
-      expect(result).not.toContain("@shopify/remix-oxygen");
-      expect(result).toMatch(/return \[\{title\}\];/);
-      expect(result).not.toMatch(/return \{title\};/);
-    });
-    it("transforms meta exports to v1", async () => {
-      const result = convertTemplateToRemixVersion(META_TEMPLATE, {
-        isV2Meta: false
-      });
-      expect(result).toContain("type MetaFunction");
-      expect(result).not.toContain("type V2_MetaFunction");
-      expect(result).not.toContain("@remix-run/react");
-      expect(result).toMatch(/return \{title\};/);
-      expect(result).not.toMatch(/return \[\{title\}\];/);
-    });
-  });
-  describe("v2_errorBoundary", () => {
-    const ERROR_BOUNDARY_TEMPLATE = `
-    import {useCatch, isRouteErrorResponse, useRouteError} from "@remix-run/react";
-    import {type ErrorBoundaryComponent} from '@shopify/remix-oxygen';
-
-    export function CatchBoundary() {
-      const caught = useCatch();
-      console.error(caught);
-  
-      return <div>stuff</div>;
-    }
-
-    export const ErrorBoundaryV1 = ({error}: {error: Error}) => {
-      console.error(error);
-    
-      return <div>There was an error.</div>;
-    };
-
-    export function ErrorBoundary() {
-      const error = useRouteError();
-
-      if (isRouteErrorResponse(error)) {
-        return <div>RouteError</div>;
-      } else {
-        return <h1>Unknown Error</h1>;
-      }
-    }
-    `.replace(/^\s{4}/gm, "");
-    it("transforms ErrorBoundary exports to v2", async () => {
-      const result = convertTemplateToRemixVersion(ERROR_BOUNDARY_TEMPLATE, {
-        isV2ErrorBoundary: true
-      });
-      expect(result).toContain("export function ErrorBoundary");
-      expect(result).not.toContain("export const ErrorBoundary");
-      expect(result).not.toMatch("export function CatchBoundary");
-      expect(result).not.toContain("type ErrorBoundaryComponent");
-      expect(result).not.toContain("@shopify/remix-oxygen");
-      expect(result).toContain("useRouteError");
-      expect(result).toContain("isRouteErrorResponse");
-      expect(result).not.toContain("useCatch");
-    });
-    it("transforms ErrorBoundary exports to v1", async () => {
-      const result = convertTemplateToRemixVersion(ERROR_BOUNDARY_TEMPLATE, {
-        isV2ErrorBoundary: false
-      });
-      expect(result).toContain("export const ErrorBoundary");
-      expect(result).not.toContain("export function ErrorBoundary");
-      expect(result).toMatch("export function CatchBoundary");
-      expect(result).toContain("type ErrorBoundaryComponent");
-      expect(result).toContain("useCatch");
-      expect(result).not.toContain("useRouteError");
-      expect(result).not.toContain("isRouteErrorResponse");
-    });
+  it("converts routes to v1", () => {
+    expect(convertRouteToV1("_index")).toEqual("index");
+    expect(convertRouteToV1("path.to.file")).toEqual("path/to/file");
+    expect(convertRouteToV1("path.to._index")).toEqual("path/to/index");
+    expect(convertRouteToV1("patht.to.[sitemap.xml]")).toEqual(
+      "patht/to/[sitemap.xml]"
+    );
   });
 });

package/dist/lib/setups/css/postcss.js

@@ -1,7 +1,5 @@
 import { outputInfo } from '@shopify/cli-kit/node/output';
 import { canWriteFiles, mergePackageJson, copyAssets } from './assets.js';
-import { getCodeFormatOptions } from '../../format-code.js';
-import { replaceRemixConfig } from './replacers.js';
 
 async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
   const assetMap = {
@@ -19,10 +17,7 @@ async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, f
   }
   const workPromise = Promise.all([
     mergePackageJson("postcss", rootDirectory),
-    copyAssets("postcss", assetMap, rootDirectory),
-    getCodeFormatOptions(rootDirectory).then(
-      (formatConfig) => replaceRemixConfig(rootDirectory, formatConfig, { postcss: true })
-    )
+    copyAssets("postcss", assetMap, rootDirectory)
   ]);
   return {
     workPromise,

package/dist/lib/setups/css/tailwind.js

@@ -2,7 +2,7 @@ import { outputInfo } from '@shopify/cli-kit/node/output';
 import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { canWriteFiles, mergePackageJson, copyAssets } from './assets.js';
 import { getCodeFormatOptions } from '../../format-code.js';
-import { replaceRemixConfig, replaceRootLinks } from './replacers.js';
+import { replaceRootLinks } from './replacers.js';
 
 const tailwindCssPath = "styles/tailwind.css";
 async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
@@ -31,17 +31,11 @@ async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions },
       (content, filepath) => filepath === "tailwind.config.js" ? content.replace("{src-dir}", relativeAppDirectory) : content
     ),
     getCodeFormatOptions(rootDirectory).then(
-      (formatConfig) => Promise.all([
-        replaceRemixConfig(rootDirectory, formatConfig, {
-          tailwind: true,
-          postcss: true
-        }),
-        replaceRootLinks(appDirectory, formatConfig, {
-          name: "tailwindCss",
-          path: tailwindCssPath,
-          isDefault: true
-        })
-      ])
+      (formatConfig) => replaceRootLinks(appDirectory, formatConfig, {
+        name: "tailwindCss",
+        path: tailwindCssPath,
+        isDefault: true
+      })
     )
   ]);
   return {

package/dist/lib/setups/routes/generate.js

@@ -6,7 +6,7 @@ import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { transpileFile } from '../../transpile/index.js';
 import { getCodeFormatOptions, formatCode } from '../../../lib/format-code.js';
 import { getTemplateAppFile, GENERATOR_ROUTE_DIR, getStarterDir } from '../../../lib/build.js';
-import { getV2Flags, convertTemplateToRemixVersion, convertRouteToV1 } from '../../../lib/remix-version-interop.js';
+import { convertRouteToV1 } from '../../../lib/remix-version-interop.js';
 import { getRemixConfig } from '../../remix-config.js';
 import { findFileWithExtension } from '../../file.js';
 
@@ -53,18 +53,13 @@ async function getResolvedRoutes(routeKeys = Object.keys(ROUTE_MAP)) {
 const ALL_ROUTE_CHOICES = [...Object.keys(ROUTE_MAP), "all"];
 async function generateRoutes(options, remixConfig) {
   const { routeGroups, resolvedRouteFiles } = options.routeName === "all" ? await getResolvedRoutes() : await getResolvedRoutes([options.routeName]);
-  const { rootDirectory, appDirectory, future, tsconfigPath } = remixConfig || await getRemixConfig(options.directory);
+  const { rootDirectory, appDirectory } = remixConfig || await getRemixConfig(options.directory);
   const routesArray = resolvedRouteFiles.flatMap(
     (item) => GENERATOR_ROUTE_DIR + "/" + item
   );
-  const v2Flags = await getV2Flags(rootDirectory, future);
   const formatOptions = await getCodeFormatOptions(rootDirectory);
-  const localePrefix = await getLocalePrefix(
-    appDirectory,
-    options,
-    v2Flags.isV2RouteConvention
-  );
-  const typescript = !!(options.typescript ?? tsconfigPath?.endsWith("tsconfig.json"));
+  const localePrefix = await getLocalePrefix(appDirectory, options);
+  const typescript = !!(options.typescript ?? await fileExists(joinPath(rootDirectory, "tsconfig.json")));
   const routes = [];
   for (const route of routesArray) {
     routes.push(
@@ -74,8 +69,7 @@ async function generateRoutes(options, remixConfig) {
         localePrefix,
         rootDirectory,
         appDirectory,
-        formatOptions,
-        v2Flags
+        formatOptions
       })
     );
   }
@@ -83,11 +77,10 @@ async function generateRoutes(options, remixConfig) {
     routes,
     routeGroups,
     isTypescript: typescript,
-    v2Flags,
     formatOptions
   };
 }
-async function getLocalePrefix(appDirectory, { localePrefix, routeName }, isV2RouteConvention = true) {
+async function getLocalePrefix(appDirectory, { localePrefix, routeName, v1RouteConvention }) {
   if (localePrefix)
     return localePrefix;
   if (localePrefix !== void 0 || routeName === "all")
@@ -95,7 +88,7 @@ async function getLocalePrefix(appDirectory, { localePrefix, routeName }, isV2Ro
   const existingFiles = await readdir(joinPath(appDirectory, "routes")).catch(
     () => []
   );
-  const coreRouteWithLocaleRE = isV2RouteConvention ? /^\(\$(\w+)\)\.(_index|\$|cart).[jt]sx?$/ : /^\(\$(\w+)\)$/;
+  const coreRouteWithLocaleRE = v1RouteConvention ? /^\(\$(\w+)\)$/ : /^\(\$(\w+)\)\.(_index|\$|cart).[jt]sx?$/;
   const coreRouteWithLocale = existingFiles.find(
     (file) => coreRouteWithLocaleRE.test(file)
   );
@@ -112,7 +105,7 @@ async function generateProjectFile(routeFrom, {
   templatesRoot = getStarterDir(),
   formatOptions,
   localePrefix,
-  v2Flags = {},
+  v1RouteConvention = false,
   signal
 }) {
   const extension = (routeFrom.match(/(\.[jt]sx?)$/) ?? [])[1] ?? ".tsx";
@@ -127,7 +120,7 @@ async function generateProjectFile(routeFrom, {
   );
   const routeDestinationPath = joinPath(
     appDirectory,
-    getDestinationRoute(routeFrom, localePrefix, v2Flags) + (typescript ? extension : extension.replace(".ts", ".js"))
+    getDestinationRoute(routeFrom, localePrefix, { v1RouteConvention }) + (typescript ? extension : extension.replace(".ts", ".js"))
   );
   const result = {
     operation: "created",
@@ -160,10 +153,7 @@ async function generateProjectFile(routeFrom, {
       await copyFile(templateAppFilePath, destinationPath);
       continue;
     }
-    let templateContent = convertTemplateToRemixVersion(
-      await readFile(templateAppFilePath),
-      v2Flags
-    );
+    let templateContent = await readFile(templateAppFilePath);
     if (!typescript) {
       templateContent = await transpileFile(
         templateContent,
@@ -185,12 +175,12 @@ async function generateProjectFile(routeFrom, {
   }
   return result;
 }
-function getDestinationRoute(routeFrom, localePrefix, v2Flags) {
+function getDestinationRoute(routeFrom, localePrefix, options) {
   const routePath = routeFrom.replace(GENERATOR_ROUTE_DIR + "/", "");
-  const filePrefix = localePrefix && !NO_LOCALE_PATTERNS.some((pattern) => pattern.test(routePath)) ? `($${localePrefix})` + (v2Flags.isV2RouteConvention ? "." : "/") : "";
+  const filePrefix = localePrefix && !NO_LOCALE_PATTERNS.some((pattern) => pattern.test(routePath)) ? `($${localePrefix})` + (options.v1RouteConvention ? "/" : ".") : "";
   return GENERATOR_ROUTE_DIR + "/" + filePrefix + // The template file uses the v2 route convention, so we need to convert
   // it to v1 if the user is not using v2.
-  (v2Flags.isV2RouteConvention ? routePath : convertRouteToV1(routePath));
+  (options.v1RouteConvention ? convertRouteToV1(routePath) : routePath);
 }
 async function findRouteDependencies(routeFilePath, appDirectory) {
   const filesToCheck = /* @__PURE__ */ new Set([routeFilePath]);

package/dist/lib/setups/routes/generate.test.js

@@ -60,10 +60,7 @@ describe("generate/route", () => {
         });
         vi.mocked(getRemixConfig).mockResolvedValue({
           ...directories,
-          tsconfigPath: "somewhere/tsconfig.json",
-          future: {
-            v2_routeConvention: true
-          }
+          tsconfigPath: "somewhere/tsconfig.json"
         });
         const result = await generateRoutes({
           routeName: ["page"],
@@ -94,9 +91,7 @@ describe("generate/route", () => {
         });
         await generateProjectFile(route, {
           ...directories,
-          v2Flags: {
-            isV2RouteConvention: false
-          }
+          v1RouteConvention: true
         });
         expect(
           await readProjectFile(directories, route.replace(".", "/"), "jsx")
@@ -110,10 +105,7 @@ describe("generate/route", () => {
           files: [],
           templates: [[route + ".tsx", `const str = "hello world"`]]
         });
-        await generateProjectFile(route, {
-          ...directories,
-          v2Flags: { isV2RouteConvention: true }
-        });
+        await generateProjectFile(route, directories);
         expect(await readProjectFile(directories, route, "jsx")).toContain(
           `const str = 'hello world'`
         );
@@ -134,25 +126,22 @@ describe("generate/route", () => {
         const localePrefix = "locale";
         await generateProjectFile("routes/_index", {
           ...directories,
-          v2Flags: { isV2RouteConvention: true },
           localePrefix,
           typescript: true
         });
         await generateProjectFile("routes/pages.$handle", {
           ...directories,
-          v2Flags: { isV2RouteConvention: false },
+          v1RouteConvention: true,
           localePrefix,
           typescript: true
         });
         await generateProjectFile("routes/[sitemap.xml]", {
           ...directories,
-          v2Flags: { isV2RouteConvention: true },
           localePrefix,
           typescript: true
         });
         await generateProjectFile("routes/[robots.txt]", {
           ...directories,
-          v2Flags: { isV2RouteConvention: true },
           localePrefix,
           typescript: true
         });
@@ -179,8 +168,7 @@ describe("generate/route", () => {
         });
         await generateProjectFile(route, {
           ...directories,
-          typescript: true,
-          v2Flags: { isV2RouteConvention: true }
+          typescript: true
         });
         expect(await readProjectFile(directories, route)).toContain(
           `const str = 'hello typescript'`
@@ -198,8 +186,7 @@ describe("generate/route", () => {
           templates: [[route + ".tsx", 'const str = "hello world"']]
         });
         await generateProjectFile(route, {
-          ...directories,
-          v2Flags: { isV2RouteConvention: true }
+          ...directories
         });
         expect(renderConfirmationPrompt).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -266,7 +253,6 @@ export {Button, Text};
         vi.mocked(getRemixConfig).mockResolvedValue(directories);
         await generateProjectFile("routes/pages.$pageHandle", {
           ...directories,
-          v2Flags: { isV2RouteConvention: true },
           force: true
         });
         await Promise.all(

package/dist/lib/transpile/morph/typedefs.js

@@ -30,7 +30,7 @@ function generateTypeDefs(sourceFile, code) {
     for (const typeElement of typeElements) {
       if (typeElement === "SerializeFrom")
         continue;
-      const hasGeneric = typeElement === "V2_MetaFunction";
+      const hasGeneric = typeElement === "MetaFunction";
       typedefs.push(
         `/** ${hasGeneric ? "@template T " : ""}@typedef {import('${moduleSpecifier}').${typeElement}${hasGeneric ? "<T>" : ""}} ${typeElement} */`
       );

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.5.1",
+  "version": "6.0.0",
   "commands": {
     "hydrogen:build": {
       "id": "hydrogen:build",
@@ -40,12 +40,15 @@
           "description": "Disable warning about missing standard routes.",
           "allowNo": false
         },
-        "codegen-unstable": {
-          "name": "codegen-unstable",
+        "codegen": {
+          "name": "codegen",
           "type": "boolean",
           "description": "Generate types for the Storefront API queries found in your project.",
           "required": false,
-          "allowNo": false
+          "allowNo": false,
+          "aliases": [
+            "codegen-unstable"
+          ]
         },
         "codegen-config-path": {
           "name": "codegen-config-path",
@@ -54,7 +57,7 @@
           "required": false,
           "multiple": false,
           "dependsOn": [
-            "codegen-unstable"
+            "codegen"
           ]
         },
         "base": {
@@ -105,41 +108,48 @@
         }
       }
     },
-    "hydrogen:codegen-unstable": {
-      "id": "hydrogen:codegen-unstable",
+    "hydrogen:codegen": {
+      "id": "hydrogen:codegen",
       "description": "Generate types for the Storefront API queries found in your project.",
       "strict": true,
       "pluginName": "@shopify/cli-hydrogen",
       "pluginAlias": "@shopify/cli-hydrogen",
       "pluginType": "core",
-      "aliases": [],
+      "aliases": [
+        "codegen-unstable"
+      ],
+      "deprecateAliases": true,
       "flags": {
         "path": {
           "name": "path",
           "type": "option",
           "description": "The path to the directory of the Hydrogen storefront. The default is the current directory.",
-          "multiple": false
+          "multiple": false,
+          "deprecateAliases": true
         },
         "codegen-config-path": {
           "name": "codegen-config-path",
           "type": "option",
           "description": "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
           "required": false,
-          "multiple": false
+          "multiple": false,
+          "deprecateAliases": true
         },
         "force-sfapi-version": {
           "name": "force-sfapi-version",
           "type": "option",
           "description": "Force generating Storefront API types for a specific version instead of using the one provided in Hydrogen. A token can also be provided with this format: `<version>:<token>`.",
           "hidden": true,
-          "multiple": false
+          "multiple": false,
+          "deprecateAliases": true
         },
         "watch": {
           "name": "watch",
           "type": "boolean",
           "description": "Watch the project for changes to update types on file save.",
           "required": false,
-          "allowNo": false
+          "allowNo": false,
+          "deprecateAliases": true
         }
       },
       "args": {}
@@ -241,12 +251,15 @@
           "description": "Run the app in a worker environment closer to Oxygen production instead of a Node.js sandbox. This flag is unstable and may change without notice.",
           "allowNo": false
         },
-        "codegen-unstable": {
-          "name": "codegen-unstable",
+        "codegen": {
+          "name": "codegen",
           "type": "boolean",
           "description": "Generate types for the Storefront API queries found in your project. It updates the types on file save.",
           "required": false,
-          "allowNo": false
+          "allowNo": false,
+          "aliases": [
+            "codegen-unstable"
+          ]
         },
         "codegen-config-path": {
           "name": "codegen-config-path",
@@ -255,7 +268,7 @@
           "required": false,
           "multiple": false,
           "dependsOn": [
-            "codegen-unstable"
+            "codegen"
           ]
         },
         "sourcemap": {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "5.5.1",
+  "version": "6.0.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,12 +33,12 @@
   },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
-    "@graphql-codegen/cli": "3.3.1",
+    "@graphql-codegen/cli": "5.0.0",
     "@oclif/core": "2.11.7",
-    "@shopify/cli-kit": "3.49.2",
-    "@shopify/hydrogen-codegen": "^0.0.2",
+    "@shopify/cli-kit": "3.50.0",
+    "@shopify/hydrogen-codegen": "^0.1.0",
     "@shopify/mini-oxygen": "^2.2.3",
-    "@shopify/oxygen-cli": "^2.0.0",
+    "@shopify/oxygen-cli": "^2.3.2",
     "ansi-escapes": "^6.2.0",
     "diff": "^5.1.0",
     "fs-extra": "^11.1.0",
@@ -46,6 +46,7 @@
     "gunzip-maybe": "^1.4.2",
     "miniflare": "3.20230918.0",
     "prettier": "^2.8.4",
+    "semver": "^7.5.3",
     "source-map": "^0.7.4",
     "stack-trace": "^1.0.0-pre2",
     "tar-fs": "^2.1.1",
@@ -53,11 +54,14 @@
     "use-resize-observer": "^9.1.0",
     "ws": "^8.13.0"
   },
+  "optionalDependencies": {
+    "@parcel/watcher": "^2.3.0"
+  },
   "peerDependencies": {
-    "@remix-run/dev": "1.19.1",
-    "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen-react": "^2023.7.6",
-    "@shopify/remix-oxygen": "^1.1.8"
+    "@remix-run/dev": "^2.1.0",
+    "@remix-run/react": "^2.1.0",
+    "@shopify/hydrogen": "2023.10.0",
+    "@shopify/remix-oxygen": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "@remix-run/dev": {