Update Hydrogen CLI to use latest cli-kit prompts

.changeset/tender-plums-hang.md

@@ -0,0 +1,13 @@
+---
+'@shopify/cli-hydrogen': minor
+'@shopify/create-hydrogen': minor
+---
+
+Updated CLI prompts. It's recommended to update your version of `@shopify/cli` to `3.45.0` when updating `@shopify/cli-hydrogen`.
+
+```diff
+"dependencies": {
+-  "@shopify/cli": "3.x.x",
++  "@shopify/cli": "3.45.0",
+}
+```

.changeset/tricky-llamas-call.md

@@ -1,5 +1,5 @@
 ---
-'@shopify/cli-hydrogen': patch
+'@shopify/cli-hydrogen': minor
 ---
 
 Added a new `shortcut` command that creates a global `h2` alias for the Hydrogen CLI:

packages/cli/package.json

@@ -21,20 +21,21 @@
     "@types/prettier": "^2.7.2",
     "@types/recursive-readdir": "^2.2.1",
     "@types/tar-fs": "^2.0.1",
-    "oclif": "^3.4.2",
-    "vitest": "^0.28.1",
-    "tempy": "^3.0.0"
+    "oclif": "2.1.4",
+    "tempy": "^3.0.0",
+    "vitest": "^0.28.1"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.15.0",
     "@shopify/hydrogen-react": "^2023.1.7",
     "@shopify/remix-oxygen": "^1.0.4"
   },
   "dependencies": {
-    "@oclif/core": "^1.20.4",
+    "@oclif/core": "2.1.4",
     "@remix-run/dev": "1.15.0",
-    "@shopify/cli-kit": "3.29.0",
+    "@shopify/cli-kit": "3.45.0",
     "@shopify/mini-oxygen": "^1.3.1",
+    "ansi-colors": "^4.1.3",
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
     "gunzip-maybe": "^1.4.2",

packages/cli/src/commands/hydrogen/build.ts

@@ -1,17 +1,19 @@
 import path from 'path';
-import {output, file} from '@shopify/cli-kit';
-import colors from '@shopify/cli-kit/node/colors';
-import {getProjectPaths, getRemixConfig} from '../../utils/config.js';
 import {
-  deprecated,
-  commonFlags,
-  flagsToCamelObject,
-} from '../../utils/flags.js';
+  outputInfo,
+  outputWarn,
+  outputContent,
+  outputToken,
+} from '@shopify/cli-kit/node/output';
+import {fileSize, copyFile, rmdir} from '@shopify/cli-kit/node/fs';
+import {getProjectPaths, getRemixConfig} from '../../lib/config.js';
+import {deprecated, commonFlags, 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 = '📦 Worker built';
 
@@ -34,7 +36,6 @@ export default class Build extends Command {
   };
 
   async run(): Promise<void> {
-    // @ts-ignore
     const {flags} = await this.parse(Build);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
 
@@ -64,10 +65,10 @@ export async function runBuild({
 
   const [remixConfig] = await Promise.all([
     getRemixConfig(root),
-    file.rmdir(buildPath, {force: true}),
+    rmdir(buildPath, {force: true}),
   ]);
 
-  output.info(`\n🏗️  Building in ${process.env.NODE_ENV} mode...`);
+  outputInfo(`\n🏗️  Building in ${process.env.NODE_ENV} mode...`);
 
   const {build} = await import('@remix-run/dev/dist/compiler/build.js');
   const {logCompileFailure} = await import(
@@ -89,18 +90,17 @@ export async function runBuild({
 
   if (process.env.NODE_ENV !== 'development') {
     console.timeEnd(LOG_WORKER_BUILT);
-    const sizeMB = (await file.size(buildPathWorkerFile)) / (1024 * 1024);
+    const sizeMB = (await fileSize(buildPathWorkerFile)) / (1024 * 1024);
 
-    output.info(
-      output.content`   ${colors.dim(
+    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(
         `🚨 Worker bundle exceeds 1 MB! This can delay your worker response.${
-          // @ts-ignore
           remixConfig.serverMinify
             ? ''
             : ' Minify your bundle by adding `serverMinify: true` to remix.config.js.'
@@ -115,7 +115,7 @@ export async function runBuild({
       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’t set up yet.\n` +
           `Some functionality and backlinks might not work as expected until these are created or redirects are set up.\n` +
           `This build is missing ${missingRoutes.length} route${
@@ -135,5 +135,5 @@ export async function copyPublicFiles(
   publicPath: string,
   buildPathClient: string,
 ) {
-  return file.copy(publicPath, buildPathClient);
+  return copyFile(publicPath, buildPathClient);
 }

packages/cli/src/commands/hydrogen/check.ts

@@ -1,11 +1,10 @@
 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 {
-  findMissingRoutes,
-  logMissingRoutes,
-} 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 {findMissingRoutes, logMissingRoutes} from '../../lib/missing-routes.js';
+
+import {Args} from '@oclif/core';
 
 export default class GenerateRoute extends Command {
   static description =
@@ -15,19 +14,18 @@ export default class GenerateRoute extends Command {
     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(): Promise<void> {
-    // @ts-ignore
     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});

packages/cli/src/commands/hydrogen/dev.ts

@@ -1,19 +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 {
-  deprecated,
-  commonFlags,
-  flagsToCamelObject,
-} from '../../utils/flags.js';
+import {getProjectPaths, getRemixConfig} from '../../lib/config.js';
+import {muteDevLogs} from '../../lib/log.js';
+import {deprecated, commonFlags, 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🏁 Initial build';
 const LOG_REBUILDING = '🧱 Rebuilding...';
@@ -35,7 +32,6 @@ export default class Dev extends Command {
   };
 
   async run(): Promise<void> {
-    // @ts-ignore
     const {flags} = await this.parse(Dev);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
 
@@ -74,7 +70,7 @@ async function runDev({
     return [fileRelative, path.resolve(root, fileRelative)] as const;
   };
 
-  const serverBundleExists = () => file.exists(buildPathWorkerFile);
+  const serverBundleExists = () => fileExists(buildPathWorkerFile);
 
   let miniOxygenStarted = false;
   async function safeStartMiniOxygen() {
@@ -118,7 +114,7 @@ async function runDev({
     },
     async onFileCreated(file: string) {
       const [relative, absolute] = getFilePaths(file);
-      output.info(`\n📄 File created: ${relative}`);
+      outputInfo(`\n📄 File created: ${relative}`);
 
       if (absolute.startsWith(publicPath)) {
         await copyPublicFiles(
@@ -129,7 +125,7 @@ async function runDev({
     },
     async onFileChanged(file: string) {
       const [relative, absolute] = getFilePaths(file);
-      output.info(`\n📄 File changed: ${relative}`);
+      outputInfo(`\n📄 File changed: ${relative}`);
 
       if (absolute.startsWith(publicPath)) {
         await copyPublicFiles(
@@ -140,14 +136,14 @@ async function runDev({
     },
     async onFileDeleted(file: string) {
       const [relative, absolute] = getFilePaths(file);
-      output.info(`\n📄 File deleted: ${relative}`);
+      outputInfo(`\n📄 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() {