Use color on stderr in CLI even when piping to stdout (#43450)

Use the stderr chalk instance in a few spots to preserve color while piping.

GitOrigin-RevId: 0375606679f01119001a7e9582fec65b259284e8

Author: thomasballinger

npm-packages/convex/CHANGELOG.md

@@ -1,11 +1,12 @@
 # Changelog
 
 ## Unreleased
+
 - The `--preview-create` parameter for `npx convex deploy` will now error if
   used with a deploy key that is not a preview deploy key. Previously, the flag
-  would be ignored in this situation, and `npx convex deploy` would deploy
-  to the production deployment. If you were depending on this behavior, make
-  sure to remove the `--preview-create` flag when deploying to production.
+  would be ignored in this situation, and `npx convex deploy` would deploy to
+  the production deployment. If you were depending on this behavior, make sure
+  to remove the `--preview-create` flag when deploying to production.
 
 ## 1.29.2
 

npm-packages/convex/eslint.config.mjs

@@ -155,6 +155,14 @@ export default [
                 "Use a `Filesystem` implementation like `nodeFs` instead of Node's 'fs/promises' package directly. Additionally, use synchronous filesystem IO within our CLI.",
             },
           ],
+          paths: [
+            {
+              name: "chalk",
+              importNames: ["default"],
+              message:
+                "Import { chalkStderr } from 'chalk' instead of the default chalk import. Use chalkStderr for stderr output (most cases). Only use default chalk with an eslint-disable comment if formatting text for stdout (e.g., logOutput() or console.log).",
+            },
+          ],
         },
       ],
       "no-restricted-syntax": [

npm-packages/convex/src/bundler/fs.ts

@@ -2,7 +2,7 @@
 // error messages.
 /* eslint-disable no-restricted-imports */
 /* eslint-disable no-restricted-syntax */
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import stdFs, { Dirent, Mode, ReadStream, Stats } from "fs";
 import * as fsPromises from "fs/promises";
 import os from "os";
@@ -36,21 +36,21 @@ function warnCrossFilesystem(dstPath: string) {
     // It's hard for these to use `logMessage` without creating a circular dependency, so just log directly.
     // eslint-disable-next-line no-console
     console.warn(
-      chalk.yellow(
+      chalkStderr.yellow(
         `Temporary directory '${tmpDirRoot}' and project directory '${dstDir}' are on different filesystems.`,
       ),
     );
     // eslint-disable-next-line no-console
     console.warn(
-      chalk.gray(
-        `  If you're running into errors with other tools watching the project directory, override the temporary directory location with the ${chalk.bold(
+      chalkStderr.gray(
+        `  If you're running into errors with other tools watching the project directory, override the temporary directory location with the ${chalkStderr.bold(
           tmpDirOverrideVar,
         )} environment variable.`,
       ),
     );
     // eslint-disable-next-line no-console
     console.warn(
-      chalk.gray(
+      chalkStderr.gray(
         `  Be sure to pick a temporary directory that's on the same filesystem as your project.`,
       ),
     );

npm-packages/convex/src/bundler/index.ts

@@ -1,5 +1,5 @@
 import path from "path";
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import esbuild from "esbuild";
 import { parse as parseAST } from "@babel/parser";
 import { Identifier, ImportSpecifier } from "@babel/types";
@@ -199,7 +199,7 @@ export async function bundle(
     });
   }
   for (const warning of result.warnings) {
-    logWarning(chalk.yellow(`esbuild warning: ${warning.text}`));
+    logWarning(chalkStderr.yellow(`esbuild warning: ${warning.text}`));
   }
   const sourceMaps = new Map();
   const modules: Bundle[] = [];
@@ -305,13 +305,13 @@ export async function bundleAuthConfig(ctx: Context, dir: string) {
     : authConfigPath;
   if (!ctx.fs.exists(chosenPath)) {
     logVerbose(
-      chalk.yellow(
+      chalkStderr.yellow(
         `Found no auth config file at ${authConfigTsPath} or ${authConfigPath} so there are no configured auth providers`,
       ),
     );
     return [];
   }
-  logVerbose(chalk.yellow(`Bundling auth config found at ${chosenPath}`));
+  logVerbose(chalkStderr.yellow(`Bundling auth config found at ${chosenPath}`));
   const result = await bundle(ctx, dir, [chosenPath], true, "browser");
   return result.modules;
 }
@@ -367,7 +367,7 @@ export async function entryPoints(
     const config = path.join(dirPath, "convex.config.ts");
     const isComponentDefinition = ctx.fs.exists(config);
     if (isComponentDefinition) {
-      logVerbose(chalk.yellow(`Skipping component directory ${dirPath}`));
+      logVerbose(chalkStderr.yellow(`Skipping component directory ${dirPath}`));
     }
     return isComponentDefinition;
   };
@@ -397,7 +397,7 @@ export async function entryPoints(
       const source = ctx.fs.readUtf8File(fpath);
       if (await doesImportConvexHttpRouter(source))
         logWarning(
-          chalk.yellow(
+          chalkStderr.yellow(
             `Found ${fpath}. HTTP action routes will not be imported from this file. Did you mean to include http${extension}?`,
           ),
         );
@@ -409,25 +409,27 @@ export async function entryPoints(
 
     // This should match isEntryPoint in the convex eslint plugin.
     if (!ENTRY_POINT_EXTENSIONS.some((ext) => relPath.endsWith(ext))) {
-      logVerbose(chalk.yellow(`Skipping non-JS file ${fpath}`));
+      logVerbose(chalkStderr.yellow(`Skipping non-JS file ${fpath}`));
     } else if (relPath.startsWith("_generated" + path.sep)) {
-      logVerbose(chalk.yellow(`Skipping ${fpath}`));
+      logVerbose(chalkStderr.yellow(`Skipping ${fpath}`));
     } else if (base.startsWith(".")) {
-      logVerbose(chalk.yellow(`Skipping dotfile ${fpath}`));
+      logVerbose(chalkStderr.yellow(`Skipping dotfile ${fpath}`));
     } else if (base.startsWith("#")) {
-      logVerbose(chalk.yellow(`Skipping likely emacs tempfile ${fpath}`));
+      logVerbose(chalkStderr.yellow(`Skipping likely emacs tempfile ${fpath}`));
     } else if (base === "schema.ts" || base === "schema.js") {
-      logVerbose(chalk.yellow(`Skipping ${fpath}`));
+      logVerbose(chalkStderr.yellow(`Skipping ${fpath}`));
     } else if ((base.match(/\./g) || []).length > 1) {
       // `auth.config.ts` and `convex.config.ts` are important not to bundle.
       // `*.test.ts` `*.spec.ts` are common in developer code.
-      logVerbose(chalk.yellow(`Skipping ${fpath} that contains multiple dots`));
+      logVerbose(
+        chalkStderr.yellow(`Skipping ${fpath} that contains multiple dots`),
+      );
     } else if (relPath.includes(" ")) {
       logVerbose(
-        chalk.yellow(`Skipping ${relPath} because it contains a space`),
+        chalkStderr.yellow(`Skipping ${relPath} because it contains a space`),
       );
     } else {
-      logVerbose(chalk.green(`Preparing ${fpath}`));
+      logVerbose(chalkStderr.green(`Preparing ${fpath}`));
       entryPoints.push(fpath);
     }
   }
@@ -444,7 +446,7 @@ export async function entryPoints(
       return true;
     }
     logVerbose(
-      chalk.yellow(
+      chalkStderr.yellow(
         `Skipping ${fpath} because it has no export or import to make it a valid TypeScript module`,
       ),
     );

npm-packages/convex/src/bundler/log.ts

@@ -1,5 +1,5 @@
 import { format } from "util";
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import ProgressBar, {
   ProgressBarInstance,
   ProgressBarOptions,
@@ -98,7 +98,7 @@ export function logFailure(message: string) {
     spinner.fail(message);
     spinner = null;
   } else {
-    logToStderr(`${chalk.red(`✖`)} ${message}`);
+    logToStderr(`${chalkStderr.red(`✖`)} ${message}`);
   }
 }
 
@@ -108,7 +108,7 @@ export function logFinishedStep(message: string) {
     spinner.succeed(message);
     spinner = null;
   } else {
-    logToStderr(`${chalk.green(`✔`)} ${message}`);
+    logToStderr(`${chalkStderr.green(`✔`)} ${message}`);
   }
 }
 

npm-packages/convex/src/cli/configure.ts

@@ -1,4 +1,4 @@
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import { Context } from "../bundler/context.js";
 import {
   logFailure,
@@ -260,7 +260,7 @@ export async function _deploymentCredentialsOrConfigure(
       const forceAnonymous = process.env.CONVEX_AGENT_MODE === "anonymous";
       if (forceAnonymous) {
         logWarning(
-          chalk.yellow.bold(
+          chalkStderr.yellow.bold(
             "CONVEX_AGENT_MODE=anonymous mode is in beta, functionality may change in the future.",
           ),
         );
@@ -461,15 +461,15 @@ export async function handleManuallySetUrlAndAdminKey(
   const didErase = await eraseDeploymentEnvVar(ctx);
   if (didErase) {
     logMessage(
-      chalk.yellowBright(
+      chalkStderr.yellowBright(
         `Removed the CONVEX_DEPLOYMENT environment variable from .env.local`,
       ),
     );
   }
   const envVarWrite = await writeConvexUrlToEnvFile(ctx, url);
   if (envVarWrite !== null) {
     logMessage(
-      chalk.green(
+      chalkStderr.green(
         `Saved the given --url as ${envVarWrite.envVar} to ${envVarWrite.envFile}`,
       ),
     );
@@ -567,19 +567,19 @@ async function selectNewProject(
     return await logAndHandleFetchError(ctx, err);
   }
   const teamMessage = didChooseBetweenTeams
-    ? " in team " + chalk.bold(teamSlug)
+    ? " in team " + chalkStderr.bold(teamSlug)
     : "";
   logFinishedStep(
-    `Created project ${chalk.bold(
+    `Created project ${chalkStderr.bold(
       projectSlug,
-    )}${teamMessage}, manage it at ${chalk.bold(
+    )}${teamMessage}, manage it at ${chalkStderr.bold(
       projectDashboardUrl(teamSlug, projectSlug),
     )}`,
   );
 
   if (projectsRemaining <= 2) {
     logWarning(
-      chalk.yellow.bold(
+      chalkStderr.yellow.bold(
         `Your account now has ${projectsRemaining} project${
           projectsRemaining === 1 ? "" : "s"
         } remaining.`,
@@ -643,7 +643,7 @@ async function selectExistingProject(
   showSpinner(`Reinitializing project ${projectSlug}...\n`);
   // TODO: Do we need to do codegen for existing projects? (-Ian)
   await doInitialCodegen(ctx, { init: false });
-  logFinishedStep(`Reinitialized project ${chalk.bold(projectSlug)}`);
+  logFinishedStep(`Reinitialized project ${chalkStderr.bold(projectSlug)}`);
   return { teamSlug, projectSlug, devDeployment };
 }
 

npm-packages/convex/src/cli/convexExport.ts

@@ -1,5 +1,5 @@
 import { Command } from "@commander-js/extra-typings";
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import { ensureHasConvexDependency } from "./lib/utils/utils.js";
 import { oneoffContext } from "../bundler/context.js";
 import {
@@ -36,7 +36,7 @@ export const convexExport = new Command("export")
     );
 
     const deploymentNotice = options.prod
-      ? ` in your ${chalk.bold("prod")} deployment`
+      ? ` in your ${chalkStderr.bold("prod")} deployment`
       : "";
     await exportFromDeployment(ctx, {
       ...options,

npm-packages/convex/src/cli/convexImport.ts

@@ -1,4 +1,4 @@
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import { ensureHasConvexDependency } from "./lib/utils/utils.js";
 import { oneoffContext } from "../bundler/context.js";
 import {
@@ -39,7 +39,7 @@ export const convexImport = new Command("import")
     );
 
     const deploymentNotice = options.prod
-      ? ` in your ${chalk.bold("prod")} deployment`
+      ? ` in your ${chalkStderr.bold("prod")} deployment`
       : "";
 
     await importIntoDeployment(ctx, filePath, {

npm-packages/convex/src/cli/dashboard.ts

@@ -1,5 +1,5 @@
 import { Command } from "@commander-js/extra-typings";
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import open from "open";
 import { Context, oneoffContext } from "../bundler/context.js";
 import { logMessage, logOutput, logWarning } from "../bundler/log.js";
@@ -41,8 +41,8 @@ export const dashboard = new Command("dashboard")
     );
 
     if (deployment.deploymentFields === null) {
-      const msg = `Self-hosted deployment configured.\n\`${chalk.bold("npx convex dashboard")}\` is not supported for self-hosted deployments.\nSee self-hosting instructions for how to self-host the dashboard.`;
-      logMessage(chalk.yellow(msg));
+      const msg = `Self-hosted deployment configured.\n\`${chalkStderr.bold("npx convex dashboard")}\` is not supported for self-hosted deployments.\nSee self-hosting instructions for how to self-host the dashboard.`;
+      logMessage(chalkStderr.yellow(msg));
       return;
     }
     const dashboardUrl = getDashboardUrl(ctx, deployment.deploymentFields);
@@ -66,7 +66,7 @@ export const dashboard = new Command("dashboard")
 
 async function logOrOpenUrl(ctx: Context, url: string, shouldOpen: boolean) {
   if (shouldOpen) {
-    logMessage(chalk.gray(`Opening ${url} in the default browser...`));
+    logMessage(chalkStderr.gray(`Opening ${url} in the default browser...`));
     try {
       // This can fail e.g. on a headless dev machine.
       await open(url);

npm-packages/convex/src/cli/data.ts

@@ -1,4 +1,4 @@
-import chalk from "chalk";
+import { chalkStderr } from "chalk";
 import { oneoffContext } from "../bundler/context.js";
 import {
   deploymentSelectionWithinProjectFromOptions,
@@ -34,7 +34,7 @@ export const data = new Command("data")
     );
 
     const deploymentNotice = deployment.deploymentFields?.deploymentName
-      ? `${chalk.bold(deployment.deploymentFields.deploymentName)} deployment's `
+      ? `${chalkStderr.bold(deployment.deploymentFields.deploymentName)} deployment's `
       : "";
 
     await dataInDeployment(ctx, {