Restore clack prompts and migrate tern-cli build to ESM

Author: Prateek32177

packages/tern-cli/package-lock.json

@@ -17,6 +17,11 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@hookflo/tern-dev": "latest"
+    "@hookflo/tern-dev": "latest",
+    "@clack/prompts": "latest"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=18"
   }
 }

packages/tern-cli/package.json

@@ -1,6 +1,6 @@
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { confirm } from "./prompts";
+import * as clack from "@clack/prompts";
 
 /** Returns the target handler file path for a framework/platform pair. */
 export function getFilePath(framework: string, platform: string): string {
@@ -48,10 +48,10 @@ export async function createHandlerFile(
   const fullPath = path.join(process.cwd(), filePath);
 
   if (fs.existsSync(fullPath)) {
-    const overwrite = await confirm(
-      `${path.basename(fullPath)} already exists. overwrite?`,
-    );
-    if (!overwrite) {
+    const overwrite = await clack.confirm({
+      message: `${path.basename(fullPath)} already exists. overwrite?`,
+    });
+    if (clack.isCancel(overwrite) || !overwrite) {
       return false;
     }
   }

packages/tern-cli/src/files.ts

@@ -1,12 +1,13 @@
 #!/usr/bin/env node
-import { GRAY, RESET } from "./colors";
-import { createConfig } from "./config";
-import { createHandlerFile, getFilePath, getWebhookPath } from "./files";
-import { installTern } from "./install";
-import { printEnvBlock, printLogo, printStep, printStepDone, printStepFile, printSummary } from "./print";
-import { getTemplate } from "./templates";
-import { startTunnel } from "./tunnel";
-import { askQuestions, ENV_VARS, getPlatformLabel } from "./wizard";
+import "./patch-clack.js";
+import { GRAY, RESET } from "./colors.js";
+import { createConfig } from "./config.js";
+import { createHandlerFile, getFilePath, getWebhookPath } from "./files.js";
+import { installTern } from "./install.js";
+import { printEnvBlock, printLogo, printStep, printStepDone, printStepFile, printSummary } from "./print.js";
+import { getTemplate } from "./templates.js";
+import { startTunnel } from "./tunnel.js";
+import { askQuestions, ENV_VARS, getPlatformLabel } from "./wizard.js";
 
 function actionLabel(action: "both" | "handler" | "tunnel"): string {
   if (action === "both") return "handler + local testing";

packages/tern-cli/src/index.ts

@@ -1,6 +1,6 @@
 import { execSync } from "node:child_process";
 import * as fs from "node:fs";
-import { printStep, printStepDone } from "./print";
+import { printStep, printStepDone } from "./print.js";
 
 /** Detects the package manager install command from lockfiles. */
 export function detectPackageManager(): string {

packages/tern-cli/src/install.ts

@@ -0,0 +1,24 @@
+import { GREEN } from "./colors.js";
+
+let clackPatched = false;
+
+export function patchClackColors(): void {
+  if (clackPatched) return;
+  clackPatched = true;
+
+  process.env.FORCE_COLOR = "3";
+
+  const originalWrite = process.stdout.write.bind(process.stdout);
+  process.stdout.write = ((chunk: string | Uint8Array, ...args: unknown[]) => {
+    if (typeof chunk === "string") {
+      chunk = chunk
+        .replace(/\x1b\[32m/g, GREEN)
+        .replace(/\x1b\[36m/g, GREEN)
+        .replace(/\x1b\[2;32m/g, GREEN);
+    }
+
+    return originalWrite(chunk as never, ...(args as never[]));
+  }) as typeof process.stdout.write;
+}
+
+patchClackColors();

packages/tern-cli/src/patch-clack.ts

@@ -1,4 +1,4 @@
-import { CYAN, GRAY, GREEN, MUTED, RED, RESET, WHITE, YELLOW } from "./colors";
+import { CYAN, GRAY, GREEN, MUTED, RED, RESET, WHITE, YELLOW } from "./colors.js";
 
 const LABEL_WIDTH = 16;
 

packages/tern-cli/src/print.ts

@@ -1,6 +1,6 @@
 import { spawn } from "node:child_process";
-import { copyToClipboard } from "./clipboard";
-import { openBrowser } from "./browser";
+import { copyToClipboard } from "./clipboard.js";
+import { openBrowser } from "./browser.js";
 import {
   printEvent,
   printExit,
@@ -9,7 +9,7 @@ import {
   printStepDone,
   printUrlBox,
   startConnectingAnimation,
-} from "./print";
+} from "./print.js";
 
 /** Starts tern-dev forwarding and streams connection updates. */
 export function startTunnel(

packages/tern-cli/src/prompts.ts

@@ -1,4 +1,4 @@
-import { select, text } from "./prompts";
+import * as clack from "@clack/prompts";
 
 /** Platform option metadata shown in the setup wizard. */
 export const PLATFORMS = [
@@ -57,33 +57,51 @@ export interface WizardAnswers {
   port: string;
 }
 
+function handleCancel(value: unknown): void {
+  if (!clack.isCancel(value)) return;
+  clack.cancel("cancelled");
+  process.exit(0);
+}
+
 /** Runs the interactive setup wizard. */
 export async function askQuestions(): Promise<WizardAnswers> {
-  const platform = await select<Platform>(
-    "which platform are you integrating?",
-    PLATFORMS,
-  );
+  const platform = await clack.select<Platform>({
+    message: "which platform are you integrating?",
+    options: [...PLATFORMS],
+  });
+  handleCancel(platform);
 
-  const framework = await select<Framework>(
-    "which framework are you using?",
-    FRAMEWORKS,
-  );
+  const framework = await clack.select<Framework>({
+    message: "which framework are you using?",
+    options: [...FRAMEWORKS],
+  });
+  handleCancel(framework);
 
-  const action = await select<Action>("what would you like to do?", [
-    { value: "both", label: "set up webhook handler + test locally" },
-    { value: "handler", label: "set up webhook handler only" },
-    { value: "tunnel", label: "test locally only" },
-  ]);
+  const action = await clack.select<Action>({
+    message: "what would you like to do?",
+    options: [
+      { value: "both", label: "set up webhook handler + test locally" },
+      { value: "handler", label: "set up webhook handler only" },
+      { value: "tunnel", label: "test locally only" },
+    ],
+  });
+  handleCancel(action);
 
   let port = "3000";
   if (action !== "handler") {
-    port = await text("which port is your app running on?", "3000", (v: string) => {
-      const n = Number(v);
-      if (!Number.isInteger(n) || n < 1 || n > 65535) {
-        return "enter a valid port number";
-      }
-      return undefined;
+    const entered = await clack.text({
+      message: "which port is your app running on?",
+      placeholder: "3000",
+      defaultValue: "3000",
+      validate: (v: string) => {
+        const n = Number(v);
+        if (!Number.isInteger(n) || n < 1 || n > 65535)
+          return "enter a valid port number";
+        return undefined;
+      },
     });
+    handleCancel(entered);
+    port = entered;
   }
 
   return { platform, framework, action, port };