@shopify/cli-hydrogen 4.0.8 → 4.1.0

package/README.md

@@ -3,3 +3,12 @@
 The Hydrogen extension for the [Shopify CLI](https://shopify.dev/apps/tools/cli). Hydrogen is a set of tools, utilities, and best-in-class examples for building a commerce application with [Remix](https://wwww.remix.run).
 
 [Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
+
+## Contributing
+
+The most common way to test the cli changes locally is to do the following:
+
+- Run `npm run build` in this directory (`packages/cli` from the root of the repo).
+- Run `npx shopify hydrogen` anywhere else in the monorepo, for example `npx shopify hydrogen init`.
+- If you want to test a command inside of a template, run the command from within that template or use the `--path` flag to point to another template or any Hydrogen app.
+- If you want to make changes to a file that is generated when running `npx shopify hydrogen generate`, make changes to that file from inside of the `templates/skeleton` directory.

package/dist/commands/hydrogen/build.d.ts

@@ -4,9 +4,12 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Build extends Command {
     static description: string;
     static flags: {
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         sourcemap: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         "disable-route-warning": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        base: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        entry: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        target: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/build.js

@@ -1,13 +1,14 @@
 import path from 'path';
-import { file, output } from '@shopify/cli-kit';
-import colors from '@shopify/cli-kit/node/colors';
-import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
-import { commonFlags, flagsToCamelObject } from '../../utils/flags.js';
+import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
+import { rmdir, fileSize, copyFile } from '@shopify/cli-kit/node/fs';
+import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
+import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
-import Flags from '@oclif/core/lib/flags.js';
-import { checkLockfileStatus } from '../../utils/check-lockfile.js';
-import { findMissingRoutes } from '../../utils/missing-routes.js';
+import { Flags } from '@oclif/core';
+import { checkLockfileStatus } from '../../lib/check-lockfile.js';
+import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+import { colors } from '../../lib/colors.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 class Build extends Command {
@@ -22,7 +23,10 @@ class Build extends Command {
     ["disable-route-warning"]: Flags.boolean({
       description: "Disable warning about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
-    })
+    }),
+    base: deprecated("--base")(),
+    entry: deprecated("--entry")(),
+    target: deprecated("--target")()
   };
   async run() {
     const { flags } = await this.parse(Build);
@@ -43,9 +47,9 @@ async function runBuild({
   console.time(LOG_WORKER_BUILT);
   const [remixConfig] = await Promise.all([
     getRemixConfig(root),
-    file.rmdir(buildPath, { force: true })
+    rmdir(buildPath, { force: true })
   ]);
-  output.info(`
+  outputInfo(`
 \u{1F3D7}\uFE0F  Building in ${process.env.NODE_ENV} mode...`);
   const { build } = await import('@remix-run/dev/dist/compiler/build.js');
   const { logCompileFailure } = await import('@remix-run/dev/dist/compiler/onCompileFailure.js');
@@ -62,14 +66,14 @@ async function runBuild({
   ]);
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
-    const sizeMB = await file.size(buildPathWorkerFile) / (1024 * 1024);
-    output.info(
-      output.content`   ${colors.dim(
+    const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
+    outputInfo(
+      outputContent`   ${colors.dim(
         path.relative(root, buildPathWorkerFile)
-      )}  ${output.token.yellow(sizeMB.toFixed(2))} MB\n`
+      )}  ${outputToken.yellow(sizeMB.toFixed(2))} MB\n`
     );
     if (sizeMB >= 1) {
-      output.warn(
+      outputWarn(
         `\u{1F6A8} Worker bundle exceeds 1 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
 `
       );
@@ -80,7 +84,7 @@ async function runBuild({
     if (missingRoutes.length) {
       const packageManager = await getPackageManager(root);
       const exec = packageManager === "npm" ? "npx" : packageManager;
-      output.warn(
+      outputWarn(
         `Heads up: Shopify stores have a number of standard routes that aren\u2019t set up yet.
 Some functionality and backlinks might not work as expected until these are created or redirects are set up.
 This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ? "s" : ""}. For more details, run \`${exec} shopify hydrogen check routes\`.
@@ -91,7 +95,7 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
   process.exit(0);
 }
 async function copyPublicFiles(publicPath, buildPathClient) {
-  return file.copy(publicPath, buildPathClient);
+  return copyFile(publicPath, buildPathClient);
 }
 
 export { copyPublicFiles, Build as default, runBuild };

package/dist/commands/hydrogen/check.d.ts

@@ -4,14 +4,11 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class GenerateRoute extends Command {
     static description: string;
     static flags: {
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     static args: {
-        name: string;
-        description: string;
-        required: boolean;
-        options: string[];
-    }[];
+        resource: _oclif_core_lib_interfaces_parser_js.Arg<string, Record<string, unknown>>;
+    };
     run(): Promise<void>;
 }
 

package/dist/commands/hydrogen/check.js

@@ -1,25 +1,26 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { path } from '@shopify/cli-kit';
-import { commonFlags } from '../../utils/flags.js';
-import { getRemixConfig } from '../../utils/config.js';
-import { logMissingRoutes, findMissingRoutes } from '../../utils/missing-routes.js';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { commonFlags } from '../../lib/flags.js';
+import { getRemixConfig } from '../../lib/config.js';
+import { logMissingRoutes, findMissingRoutes } from '../../lib/missing-routes.js';
+import { Args } from '@oclif/core';
 
 class GenerateRoute extends Command {
   static description = "Returns diagnostic information about a Hydrogen storefront.";
   static flags = {
     path: commonFlags.path
   };
-  static args = [
-    {
+  static args = {
+    resource: Args.string({
       name: "resource",
       description: `The resource to check. Currently only 'routes' is supported.`,
       required: true,
       options: ["routes"]
-    }
-  ];
+    })
+  };
   async run() {
     const { flags, args } = await this.parse(GenerateRoute);
-    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
     if (args.resource === "routes") {
       await runCheckRoutes({ directory });
     } else {

package/dist/commands/hydrogen/dev.d.ts

@@ -4,9 +4,10 @@ import Command from '@shopify/cli-kit/node/base-command';
 declare class Dev extends Command {
     static description: string;
     static flags: {
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
-        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        port: _oclif_core_lib_interfaces_parser_js.OptionFlag<number, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         "disable-virtual-routes": _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
+        host: _oclif_core_lib_interfaces_parser_js.OptionFlag<unknown, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     run(): Promise<void>;
 }

package/dist/commands/hydrogen/dev.js

@@ -1,15 +1,16 @@
 import path from 'path';
 import fs from 'fs/promises';
-import { output, file } from '@shopify/cli-kit';
+import { outputInfo } from '@shopify/cli-kit/node/output';
+import { fileExists } from '@shopify/cli-kit/node/fs';
 import { copyPublicFiles } from './build.js';
-import { getProjectPaths, getRemixConfig } from '../../utils/config.js';
-import { muteDevLogs } from '../../utils/log.js';
-import { commonFlags, flagsToCamelObject } from '../../utils/flags.js';
+import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
+import { muteDevLogs } from '../../lib/log.js';
+import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
-import Flags from '@oclif/core/lib/flags.js';
-import { startMiniOxygen } from '../../utils/mini-oxygen.js';
-import { checkHydrogenVersion } from '../../utils/check-version.js';
-import { addVirtualRoutes } from '../../utils/virtual-routes.js';
+import { Flags } from '@oclif/core';
+import { startMiniOxygen } from '../../lib/mini-oxygen.js';
+import { checkHydrogenVersion } from '../../lib/check-version.js';
+import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 
 const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
@@ -23,7 +24,8 @@ class Dev extends Command {
       description: "Disable rendering fallback routes when a route file doesn't exist",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
       default: false
-    })
+    }),
+    host: deprecated("--host")()
   };
   async run() {
     const { flags } = await this.parse(Dev);
@@ -47,11 +49,11 @@ async function runDev({
     const config = await getRemixConfig(root);
     return disableVirtualRoutes ? config : addVirtualRoutes(config);
   };
-  const getFilePaths = (file2) => {
-    const fileRelative = path.relative(root, file2);
+  const getFilePaths = (file) => {
+    const fileRelative = path.relative(root, file);
     return [fileRelative, path.resolve(root, fileRelative)];
   };
-  const serverBundleExists = () => file.exists(buildPathWorkerFile);
+  const serverBundleExists = () => fileExists(buildPathWorkerFile);
   let miniOxygenStarted = false;
   async function safeStartMiniOxygen() {
     if (miniOxygenStarted)
@@ -86,9 +88,9 @@ async function runDev({
       console.timeEnd(LOG_INITIAL_BUILD);
       await safeStartMiniOxygen();
     },
-    async onFileCreated(file2) {
-      const [relative, absolute] = getFilePaths(file2);
-      output.info(`
+    async onFileCreated(file) {
+      const [relative, absolute] = getFilePaths(file);
+      outputInfo(`
 \u{1F4C4} File created: ${relative}`);
       if (absolute.startsWith(publicPath)) {
         await copyPublicFiles(
@@ -97,9 +99,9 @@ async function runDev({
         );
       }
     },
-    async onFileChanged(file2) {
-      const [relative, absolute] = getFilePaths(file2);
-      output.info(`
+    async onFileChanged(file) {
+      const [relative, absolute] = getFilePaths(file);
+      outputInfo(`
 \u{1F4C4} File changed: ${relative}`);
       if (absolute.startsWith(publicPath)) {
         await copyPublicFiles(
@@ -108,16 +110,16 @@ async function runDev({
         );
       }
     },
-    async onFileDeleted(file2) {
-      const [relative, absolute] = getFilePaths(file2);
-      output.info(`
+    async onFileDeleted(file) {
+      const [relative, absolute] = getFilePaths(file);
+      outputInfo(`
 \u{1F4C4} File deleted: ${relative}`);
       if (absolute.startsWith(publicPath)) {
         await fs.unlink(absolute.replace(publicPath, buildPathClient));
       }
     },
     onRebuildStart() {
-      output.info(LOG_REBUILDING);
+      outputInfo(LOG_REBUILDING);
       console.time(LOG_REBUILT);
     },
     async onRebuildFinish() {

package/dist/commands/hydrogen/g.d.ts

@@ -0,0 +1,10 @@
+import Command from '@shopify/cli-kit/node/base-command';
+
+declare class GenerateRouteShortcut extends Command {
+    static description: string;
+    static strict: boolean;
+    static hidden: boolean;
+    run(): Promise<void>;
+}
+
+export { GenerateRouteShortcut as default };

package/dist/commands/hydrogen/g.js

@@ -0,0 +1,17 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import GenerateRoute from './generate/route.js';
+
+class GenerateRouteShortcut extends Command {
+  static description = "Shortcut for `hydrogen generate`. See `hydrogen generate --help` for more information.";
+  static strict = false;
+  static hidden = true;
+  async run() {
+    const [command, ...args] = this.argv;
+    if (command === "r" || command === "route") {
+      return new GenerateRoute(args, this.config).run();
+    }
+    throw new Error(`Invalid command argument "${command}".`);
+  }
+}
+
+export { GenerateRouteShortcut as default };

package/dist/commands/hydrogen/generate/route.d.ts

@@ -1,5 +1,6 @@
 import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
 import Command from '@shopify/cli-kit/node/base-command';
+import { RemixV2Flags } from '../../../lib/remix-version-interop.js';
 
 declare const GENERATOR_TEMPLATES_DIR = "generator-templates";
 interface Result {
@@ -8,27 +9,24 @@ interface Result {
 declare class GenerateRoute extends Command {
     static description: string;
     static flags: {
-        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        adapter: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         typescript: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
-        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined>;
+        path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
     };
     static hidden: true;
     static args: {
-        name: string;
-        description: string;
-        required: boolean;
-        options: string[];
-        env: string;
-    }[];
+        route: _oclif_core_lib_interfaces_parser_js.Arg<string, Record<string, unknown>>;
+    };
     run(): Promise<void>;
 }
-declare function runGenerate(route: string, { directory, typescript, force, adapter, templatesRoot, }: {
+declare function runGenerate(routeFrom: string, routeTo: string, { directory, typescript, force, adapter, templatesRoot, v2Flags, }: {
     directory: string;
     typescript?: boolean;
     force?: boolean;
     adapter?: string;
     templatesRoot?: string;
+    v2Flags?: RemixV2Flags;
 }): Promise<Result>;
 
 export { GENERATOR_TEMPLATES_DIR, GenerateRoute as default, runGenerate };

package/dist/commands/hydrogen/generate/route.js

@@ -1,11 +1,13 @@
 import { fileURLToPath } from 'url';
 import Command from '@shopify/cli-kit/node/base-command';
-import { path, file, ui } from '@shopify/cli-kit';
+import { fileExists, readFile, mkdir, writeFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, joinPath, relativePath, relativizePath, dirname } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { commonFlags } from '../../../utils/flags.js';
-import Flags from '@oclif/core/lib/flags.js';
-import { transpileFile, format, resolveFormatConfig } from '../../../utils/transpile-ts.js';
+import { renderSuccess, renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { commonFlags } from '../../../lib/flags.js';
+import { Flags, Args } from '@oclif/core';
+import { transpileFile, format, resolveFormatConfig } from '../../../lib/transpile-ts.js';
+import { getV2Flags, convertRouteToV2, convertTemplateToRemixVersion } from '../../../lib/remix-version-interop.js';
 
 const GENERATOR_TEMPLATES_DIR = "generator-templates";
 const ROUTE_MAP = {
@@ -35,37 +37,43 @@ class GenerateRoute extends Command {
     path: commonFlags.path
   };
   static hidden;
-  static args = [
-    {
+  static args = {
+    route: Args.string({
       name: "route",
       description: `The route to generate. One of ${ROUTES.join()}.`,
       required: true,
       options: ROUTES,
       env: "SHOPIFY_HYDROGEN_ARG_ROUTE"
-    }
-  ];
+    })
+  };
   async run() {
     const result = /* @__PURE__ */ new Map();
-    const { flags, args } = await this.parse(GenerateRoute);
-    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    const { route } = args;
+    const {
+      flags,
+      args: { route }
+    } = await this.parse(GenerateRoute);
     const routePath = route === "all" ? Object.values(ROUTE_MAP).flat() : ROUTE_MAP[route];
     if (!routePath) {
       throw new AbortError(
         `No route found for ${route}. Try one of ${ROUTES.join()}.`
       );
     }
-    const isTypescript = flags.typescript || await file.exists(path.join(directory, "tsconfig.json"));
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    const isTypescript = flags.typescript || await fileExists(joinPath(directory, "tsconfig.json"));
     const routesArray = Array.isArray(routePath) ? routePath : [routePath];
     try {
+      const { isV2RouteConvention, ...v2Flags } = await getV2Flags(directory);
       for (const item of routesArray) {
+        const routeFrom = item;
+        const routeTo = isV2RouteConvention ? convertRouteToV2(item) : item;
         result.set(
-          item,
-          await runGenerate(item, {
+          routeTo,
+          await runGenerate(routeFrom, routeTo, {
             directory,
             typescript: isTypescript,
             force: flags.force,
-            adapter: flags.adapter
+            adapter: flags.adapter,
+            v2Flags
           })
         );
       }
@@ -81,62 +89,56 @@ class GenerateRoute extends Command {
       body: {
         list: {
           items: Array.from(result.entries()).map(
-            ([path2, { operation }]) => `[${operation}] app/routes${path2}${extension}`
+            ([path, { operation }]) => `[${operation}] app/routes${path}${extension}`
           )
         }
       }
     });
   }
 }
-async function runGenerate(route, {
+async function runGenerate(routeFrom, routeTo, {
   directory,
   typescript,
   force,
   adapter,
-  templatesRoot = fileURLToPath(new URL("../../../", import.meta.url))
+  templatesRoot = fileURLToPath(new URL("../../../", import.meta.url)),
+  v2Flags = {}
 }) {
   let operation;
   const extension = typescript ? ".tsx" : ".jsx";
-  const templatePath = path.join(
+  const templatePath = joinPath(
     templatesRoot,
     GENERATOR_TEMPLATES_DIR,
     "routes",
-    `${route}.tsx`
+    `${routeFrom}.tsx`
   );
-  const destinationPath = path.join(
+  const destinationPath = joinPath(
     directory,
     "app",
     "routes",
-    `${route}${extension}`
+    `${routeTo}${extension}`
   );
-  const relativeDestinationPath = path.relative(directory, destinationPath);
-  if (!force && await file.exists(destinationPath)) {
-    const options = [
-      { name: "No", value: "skip" },
-      { name: `Yes`, value: "overwrite" }
-    ];
-    const choice = await ui.prompt([
-      {
-        type: "select",
-        name: "value",
-        message: `The file ${path.relativize(
-          relativeDestinationPath
-        )} already exists. Do you want to overwrite it?`,
-        choices: options
-      }
-    ]);
-    operation = choice.value === "skip" ? "skipped" : "overwritten";
+  const relativeDestinationPath = relativePath(directory, destinationPath);
+  if (!force && await fileExists(destinationPath)) {
+    const shouldOverwrite = await renderConfirmationPrompt({
+      message: `The file ${relativizePath(
+        relativeDestinationPath
+      )} already exists. Do you want to overwrite it?`,
+      defaultValue: false
+    });
+    operation = shouldOverwrite ? "overwritten" : "skipped";
     if (operation === "skipped") {
       return { operation };
     }
   } else {
     operation = "generated";
   }
-  let templateContent = await file.read(templatePath);
+  let templateContent = await readFile(templatePath);
+  templateContent = convertTemplateToRemixVersion(templateContent, v2Flags);
   if (!typescript) {
-    const jsConfigPath = path.join(directory, "jsconfig.json");
-    const config = await file.exists(jsConfigPath) ? JSON.parse(
-      (await file.read(jsConfigPath, { encoding: "utf8" })).replace(
+    const jsConfigPath = joinPath(directory, "jsconfig.json");
+    const config = await fileExists(jsConfigPath) ? JSON.parse(
+      (await readFile(jsConfigPath, { encoding: "utf8" })).replace(
         /^\s*\/\/.*$/gm,
         ""
       )
@@ -154,10 +156,10 @@ async function runGenerate(route, {
     await resolveFormatConfig(destinationPath),
     destinationPath
   );
-  if (!await file.exists(path.dirname(destinationPath))) {
-    await file.mkdir(path.dirname(destinationPath));
+  if (!await fileExists(dirname(destinationPath))) {
+    await mkdir(dirname(destinationPath));
   }
-  await file.write(destinationPath, templateContent);
+  await writeFile(destinationPath, templateContent);
   return {
     operation
   };