refactor(cna): replace chalk with picocolors, glob with `fast-g…

…lob@2.2.7` (vercel#53146) Follows vercel#53115 - Replace `chalk` with `picocolors` - Note that `chalk.hex('#007acc')` has been replaced with `picocolors.blue` - Replace `glob` with `fast-glob@2.2.7` - Not only does `fast-glob` is a faster drop-in replacement of `glob` with first-party `Promise`-based API support, but also `fast-glob` is already a dependency of `cpy`: <img width="812" alt="image" src="https://github.com/vercel/next.js/assets/40715044/8efa24c4-5312-4b1c-bf8d-68255ca30b60"> Together the PR removes about `50 KiB` from the `create-next-app/dist/index.js`: <img width="570" alt="image" src="https://github.com/vercel/next.js/assets/40715044/db2f3723-14cc-48ce-9cb2-8aa1fb1d5e95"> Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
Strift · Jul 27, 2023 · d489cff · d489cff
1 parent 5bbe9bd
commit d489cff
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 96 deletions.
diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import retry from 'async-retry'
-import chalk from 'chalk'
+import { red, green, cyan } from 'picocolors'
 import fs from 'fs'
 import path from 'path'
 import {
@@ -76,7 +76,7 @@ export async function createApp({
     if (repoUrl) {
       if (repoUrl.origin !== 'https://github.com') {
         console.error(
-          `Invalid URL: ${chalk.red(
+          `Invalid URL: ${red(
             `"${example}"`
           )}. Only GitHub repositories are supported. Please use a GitHub URL and try again.`
         )
@@ -87,7 +87,7 @@ export async function createApp({
 
       if (!repoInfo) {
         console.error(
-          `Found invalid GitHub URL: ${chalk.red(
+          `Found invalid GitHub URL: ${red(
             `"${example}"`
           )}. Please fix the URL and try again.`
         )
@@ -98,7 +98,7 @@ export async function createApp({
 
       if (!found) {
         console.error(
-          `Could not locate the repository for ${chalk.red(
+          `Could not locate the repository for ${red(
             `"${example}"`
           )}. Please check that the repository exists and try again.`
         )
@@ -109,10 +109,10 @@ export async function createApp({
 
       if (!found) {
         console.error(
-          `Could not locate an example named ${chalk.red(
+          `Could not locate an example named ${red(
             `"${example}"`
           )}. It could be due to the following:\n`,
-          `1. Your spelling of example ${chalk.red(
+          `1. Your spelling of example ${red(
             `"${example}"`
           )} might be incorrect.\n`,
           `2. You might not be connected to the internet or you are behind a proxy.`
@@ -145,7 +145,7 @@ export async function createApp({
   const isOnline = !useYarn || (await getOnline())
   const originalDirectory = process.cwd()
 
-  console.log(`Creating a new Next.js app in ${chalk.green(root)}.`)
+  console.log(`Creating a new Next.js app in ${green(root)}.`)
   console.log()
 
   process.chdir(root)
@@ -161,7 +161,7 @@ export async function createApp({
       if (repoInfo) {
         const repoInfo2 = repoInfo
         console.log(
-          `Downloading files from repo ${chalk.cyan(
+          `Downloading files from repo ${cyan(
             example
           )}. This might take a moment.`
         )
@@ -171,7 +171,7 @@ export async function createApp({
         })
       } else {
         console.log(
-          `Downloading files for example ${chalk.cyan(
+          `Downloading files for example ${cyan(
             example
           )}. This might take a moment.`
         )
@@ -249,26 +249,24 @@ export async function createApp({
     cdpath = appPath
   }
 
-  console.log(`${chalk.green('Success!')} Created ${appName} at ${appPath}`)
+  console.log(`${green('Success!')} Created ${appName} at ${appPath}`)
 
   if (hasPackageJson) {
     console.log('Inside that directory, you can run several commands:')
     console.log()
-    console.log(chalk.cyan(`  ${packageManager} ${useYarn ? '' : 'run '}dev`))
+    console.log(cyan(`  ${packageManager} ${useYarn ? '' : 'run '}dev`))
     console.log('    Starts the development server.')
     console.log()
-    console.log(chalk.cyan(`  ${packageManager} ${useYarn ? '' : 'run '}build`))
+    console.log(cyan(`  ${packageManager} ${useYarn ? '' : 'run '}build`))
     console.log('    Builds the app for production.')
     console.log()
-    console.log(chalk.cyan(`  ${packageManager} start`))
+    console.log(cyan(`  ${packageManager} start`))
     console.log('    Runs the built app in production mode.')
     console.log()
     console.log('We suggest that you begin by typing:')
     console.log()
-    console.log(chalk.cyan('  cd'), cdpath)
-    console.log(
-      `  ${chalk.cyan(`${packageManager} ${useYarn ? '' : 'run '}dev`)}`
-    )
+    console.log(cyan('  cd'), cdpath)
+    console.log(`  ${cyan(`${packageManager} ${useYarn ? '' : 'run '}dev`)}`)
   }
   console.log()
 }
diff --git a/packages/create-next-app/helpers/install.ts b/packages/create-next-app/helpers/install.ts
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import chalk from 'chalk'
+import { yellow } from 'picocolors'
 import spawn from 'cross-spawn'
 import type { PackageManager } from './get-pkg-manager'
 
@@ -72,9 +72,9 @@ export function install(
        */
       args = ['install']
       if (!isOnline) {
-        console.log(chalk.yellow('You appear to be offline.'))
+        console.log(yellow('You appear to be offline.'))
         if (useYarn) {
-          console.log(chalk.yellow('Falling back to the local Yarn cache.'))
+          console.log(yellow('Falling back to the local Yarn cache.'))
           console.log()
           args.push('--offline')
         } else {

diff --git a/packages/create-next-app/helpers/is-folder-empty.ts b/packages/create-next-app/helpers/is-folder-empty.ts
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import chalk from 'chalk'
+import { green, blue } from 'picocolors'
 import fs from 'fs'
 import path from 'path'
 
@@ -35,14 +35,14 @@ export function isFolderEmpty(root: string, name: string): boolean {
 
   if (conflicts.length > 0) {
     console.log(
-      `The directory ${chalk.green(name)} contains files that could conflict:`
+      `The directory ${green(name)} contains files that could conflict:`
     )
     console.log()
     for (const file of conflicts) {
       try {
         const stats = fs.lstatSync(path.join(root, file))
         if (stats.isDirectory()) {
-          console.log(`  ${chalk.blue(file)}/`)
+          console.log(`  ${blue(file)}/`)
         } else {
           console.log(`  ${file}`)
         }

diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /* eslint-disable import/no-extraneous-dependencies */
-import chalk from 'chalk'
+import { cyan, green, red, yellow, bold, blue } from 'picocolors'
 import Commander from 'commander'
 import Conf from 'conf'
 import path from 'path'
@@ -34,7 +34,7 @@ const onPromptState = (state: any) => {
 const program = new Commander.Command(packageJson.name)
   .version(packageJson.version)
   .arguments('<project-directory>')
-  .usage(`${chalk.green('<project-directory>')} [options]`)
+  .usage(`${green('<project-directory>')} [options]`)
   .action((name) => {
     projectPath = name
   })
@@ -182,12 +182,10 @@ async function run(): Promise<void> {
   if (!projectPath) {
     console.log(
       '\nPlease specify the project directory:\n' +
-        `  ${chalk.cyan(program.name())} ${chalk.green(
-          '<project-directory>'
-        )}\n` +
+        `  ${cyan(program.name())} ${green('<project-directory>')}\n` +
         'For example:\n' +
-        `  ${chalk.cyan(program.name())} ${chalk.green('my-next-app')}\n\n` +
-        `Run ${chalk.cyan(`${program.name()} --help`)} to see all options.`
+        `  ${cyan(program.name())} ${green('my-next-app')}\n\n` +
+        `Run ${cyan(`${program.name()} --help`)} to see all options.`
     )
     process.exit(1)
   }
@@ -198,12 +196,12 @@ async function run(): Promise<void> {
   const { valid, problems } = validateNpmName(projectName)
   if (!valid) {
     console.error(
-      `Could not create a project called ${chalk.red(
+      `Could not create a project called ${red(
         `"${projectName}"`
       )} because of npm naming restrictions:`
     )
 
-    problems!.forEach((p) => console.error(`    ${chalk.red.bold('*')} ${p}`))
+    problems!.forEach((p) => console.error(`    ${red(bold('*'))} ${p}`))
     process.exit(1)
   }
 
@@ -253,7 +251,7 @@ async function run(): Promise<void> {
         program.typescript = false
         program.javascript = true
       } else {
-        const styledTypeScript = chalk.hex('#007acc')('TypeScript')
+        const styledTypeScript = blue('TypeScript')
         const { typescript } = await prompts(
           {
             type: 'toggle',
@@ -290,7 +288,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.eslint = true
       } else {
-        const styledEslint = chalk.hex('#007acc')('ESLint')
+        const styledEslint = blue('ESLint')
         const { eslint } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -312,7 +310,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.tailwind = false
       } else {
-        const tw = chalk.hex('#007acc')('Tailwind CSS')
+        const tw = blue('Tailwind CSS')
         const { tailwind } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -334,7 +332,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.srcDir = false
       } else {
-        const styledSrcDir = chalk.hex('#007acc')('`src/` directory')
+        const styledSrcDir = blue('`src/` directory')
         const { srcDir } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -353,7 +351,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.app = true
       } else {
-        const styledAppDir = chalk.hex('#007acc')('App Router')
+        const styledAppDir = blue('App Router')
         const { appRouter } = await prompts({
           onState: onPromptState,
           type: 'toggle',
@@ -374,7 +372,7 @@ async function run(): Promise<void> {
       if (ciInfo.isCI) {
         program.importAlias = '@/*'
       } else {
-        const styledImportAlias = chalk.hex('#007acc')('import alias')
+        const styledImportAlias = blue('import alias')
 
         const { customizeImportAlias } = await prompts({
           onState: onPromptState,
@@ -466,10 +464,10 @@ async function notifyUpdate(): Promise<void> {
           : 'npm i -g create-next-app'
 
       console.log(
-        chalk.yellow.bold('A new version of `create-next-app` is available!') +
+        yellow(bold('A new version of `create-next-app` is available!')) +
           '\n' +
           'You can update by running: ' +
-          chalk.cyan(updateMessage) +
+          cyan(updateMessage) +
           '\n'
       )
     }
@@ -485,10 +483,10 @@ run()
     console.log()
     console.log('Aborting installation.')
     if (reason.command) {
-      console.log(`  ${chalk.cyan(reason.command)} has failed.`)
+      console.log(`  ${cyan(reason.command)} has failed.`)
     } else {
       console.log(
-        chalk.red('Unexpected error. Please report it as a bug:') + '\n',
+        red('Unexpected error. Please report it as a bug:') + '\n',
         reason
       )
     }

diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -39,14 +39,14 @@
     "@types/validate-npm-package-name": "3.0.0",
     "@vercel/ncc": "0.34.0",
     "async-retry": "1.3.1",
-    "chalk": "2.4.2",
     "ci-info": "watson/ci-info#f43f6a1cefff47fb361c88cf4b943fdbcaafe540",
     "commander": "2.20.0",
     "conf": "10.2.0",
     "cpy": "7.3.0",
     "cross-spawn": "6.0.5",
-    "glob": "8.0.3",
+    "fast-glob": "2.2.7",
     "got": "10.7.0",
+    "picocolors": "1.0.0",
     "prettier-plugin-tailwindcss": "0.3.0",
     "prompts": "2.1.0",
     "tar": "6.1.15",

diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
@@ -2,18 +2,15 @@ import { install } from '../helpers/install'
 import { makeDir } from '../helpers/make-dir'
 
 import cpy from 'cpy'
-import globOrig from 'glob'
+import { async as glob } from 'fast-glob'
 import os from 'os'
 import fs from 'fs'
 import path from 'path'
-import chalk from 'chalk'
-import util from 'util'
+import { cyan, bold } from 'picocolors'
 import { Sema } from 'async-sema'
 
 import { GetTemplateFileArgs, InstallTemplateArgs } from './types'
 
-const glob = util.promisify(globOrig)
-
 /**
  * Get the file path for a given file in a template, e.g. "next.config.js".
  */
@@ -42,7 +39,7 @@ export const installTemplate = async ({
   srcDir,
   importAlias,
 }: InstallTemplateArgs) => {
-  console.log(chalk.bold(`Using ${packageManager}.`))
+  console.log(bold(`Using ${packageManager}.`))
 
   /**
    * Copy the template files to the target directory.
@@ -90,7 +87,11 @@ export const installTemplate = async ({
 
   // update import alias in any files if not using the default
   if (importAlias !== '@/*') {
-    const files = await glob('**/*', { cwd: root, dot: true })
+    const files = await glob<string>('**/*', {
+      cwd: root,
+      dot: true,
+      stats: false,
+    })
     const writeSema = new Sema(8, { capacity: files.length })
     await Promise.all(
       files.map(async (file) => {
@@ -232,7 +233,7 @@ export const installTemplate = async ({
     console.log()
     console.log('Installing dependencies:')
     for (const dependency of dependencies) {
-      console.log(`- ${chalk.cyan(dependency)}`)
+      console.log(`- ${cyan(dependency)}`)
     }
     console.log()