Update Hydrogen CLI to use latest cli-kit prompts

.changeset/tender-plums-hang.md

@@ -0,0 +1,12 @@
+---
+'@shopify/cli-hydrogen': minor
+---
+
+Updated CLI prompts. It's recommended to update your version of `@shopify/cli` to `3.45.0` when updating `@shopify/cli-hydrogen`.
+
+```json
+"dependencies: {
+  "@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.14.3",
     "@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.14.3",
-    "@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() {

packages/cli/src/commands/hydrogen/generate/route.test.ts

@@ -1,24 +1,15 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {temporaryDirectoryTask} from 'tempy';
 import {runGenerate, GENERATOR_TEMPLATES_DIR} from './route.js';
-import {file, path, ui} from '@shopify/cli-kit';
+import {renderConfirmationPrompt} from '@shopify/cli-kit/node/ui';
+import {readFile, writeFile, mkdir} from '@shopify/cli-kit/node/fs';
+import {joinPath, dirname} from '@shopify/cli-kit/node/path';
 
 describe('generate/route', () => {
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock('@shopify/cli-kit', async () => {
-      const cliKit: any = await vi.importActual('@shopify/cli-kit');
-      return {
-        ...cliKit,
-        output: {
-          ...cliKit.output,
-          success: vi.fn(),
-        },
-        ui: {
-          prompt: vi.fn(),
-        },
-      };
-    });
+    vi.mock('@shopify/cli-kit/node/output');
+    vi.mock('@shopify/cli-kit/node/ui');
   });
 
   it('generates a route file', async () => {
@@ -38,7 +29,7 @@ describe('generate/route', () => {
 
       // Then
       expect(
-        await file.read(path.join(appRoot, 'app/routes', `${route}.jsx`)),
+        await readFile(joinPath(appRoot, 'app/routes', `${route}.jsx`)),
       ).toContain(`const str = 'hello world'`);
     });
   });
@@ -61,17 +52,17 @@ describe('generate/route', () => {
 
       // Then
       expect(
-        await file.read(path.join(appRoot, 'app/routes', `${route}.tsx`)),
+        await readFile(joinPath(appRoot, 'app/routes', `${route}.tsx`)),
       ).toContain(`const str = 'hello typescript'`);
     });
   });
 
   it('prompts the user if there the file already exists', async () => {
     await temporaryDirectoryTask(async (tmpDir) => {
       // Given
-      vi.mocked(ui.prompt).mockImplementationOnce(async () => {
-        return {value: 'overwrite'};
-      });
+      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
+        async () => true,
+      );
 
       const route = 'page/$pageHandle';
       const {appRoot, templatesRoot} = await createHydrogen(tmpDir, {
@@ -86,22 +77,20 @@ describe('generate/route', () => {
       });
 
       // Then
-      expect(ui.prompt).toHaveBeenCalledWith(
-        expect.arrayContaining([
-          expect.objectContaining({
-            message: expect.stringContaining('already exists'),
-          }),
-        ]),
+      expect(renderConfirmationPrompt).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.stringContaining('already exists'),
+        }),
       );
     });
   });
 
   it('does not prompt the user if the force property is true', async () => {
     await temporaryDirectoryTask(async (tmpDir) => {
       // Given
-      vi.mocked(ui.prompt).mockImplementationOnce(async () => {
-        return {value: 'overwrite'};
-      });
+      vi.mocked(renderConfirmationPrompt).mockImplementationOnce(
+        async () => true,
+      );
 
       const route = 'page/$pageHandle';
       const {appRoot, templatesRoot} = await createHydrogen(tmpDir, {
@@ -117,7 +106,7 @@ describe('generate/route', () => {
       });
 
       // Then
-      expect(ui.prompt).not.toHaveBeenCalled();
+      expect(renderConfirmationPrompt).not.toHaveBeenCalled();
     });
   });
 });
@@ -134,25 +123,25 @@ async function createHydrogen(
 ) {
   for (const item of files) {
     const [filePath, fileContent] = item;
-    const fullFilePath = path.join(directory, 'app', filePath);
-    await file.mkdir(path.dirname(fullFilePath));
-    await file.write(fullFilePath, fileContent);
+    const fullFilePath = joinPath(directory, 'app', filePath);
+    await mkdir(dirname(fullFilePath));
+    await writeFile(fullFilePath, fileContent);
   }
 
   for (const item of templates) {
     const [filePath, fileContent] = item;
-    const fullFilePath = path.join(
+    const fullFilePath = joinPath(
       directory,
       GENERATOR_TEMPLATES_DIR,
       'routes',
       `${filePath}.tsx`,
     );
-    await file.mkdir(path.dirname(fullFilePath));
-    await file.write(fullFilePath, fileContent);
+    await mkdir(dirname(fullFilePath));
+    await writeFile(fullFilePath, fileContent);
   }
 
   return {
-    appRoot: path.join(directory, 'app'),
+    appRoot: joinPath(directory, 'app'),
     templatesRoot: directory,
   };
 }