refactor(cli): remove ora (#4449)

refactor(cli): remove ora

.changeset/six-rings-hammer.md

@@ -0,0 +1,5 @@
+---
+"@wagmi/cli": patch
+---
+
+Removed `ora` for `nanospinner`.

packages/cli/package.json

@@ -76,7 +76,7 @@
     "fdir": "^6.1.1",
     "find-up": "^6.3.0",
     "fs-extra": "^11.2.0",
-    "ora": "^6.3.1",
+    "nanospinner": "1.2.2",
     "pathe": "^1.1.2",
     "picocolors": "^1.0.0",
     "picomatch": "^3.0.0",

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

@@ -43,15 +43,15 @@ test('generates output', async () => {
   await generate()
 
   expect(console.formatted).toMatchInlineSnapshot(`
-      "- Validating plugins
-      ✔ Validating plugins
-      - Resolving contracts
-      ✔ Resolving contracts
-      - Running plugins
-      ✔ Running plugins
-      - Writing to generated.js
-      ✔ Writing to generated.js"
-    `)
+    "- Validating plugins
+    √ Validating plugins
+    - Resolving contracts
+    √ Resolving contracts
+    - Running plugins
+    √ Running plugins
+    - Writing to generated.js
+    √ Writing to generated.js"
+  `)
 })
 
 test('generates typescript output', async () => {
@@ -77,15 +77,15 @@ test('generates typescript output', async () => {
   await generate()
 
   expect(console.formatted).toMatchInlineSnapshot(`
-      "- Validating plugins
-      ✔ Validating plugins
-      - Resolving contracts
-      ✔ Resolving contracts
-      - Running plugins
-      ✔ Running plugins
-      - Writing to generated.ts
-      ✔ Writing to generated.ts"
-    `)
+    "- Validating plugins
+    √ Validating plugins
+    - Resolving contracts
+    √ Resolving contracts
+    - Running plugins
+    √ Running plugins
+    - Writing to generated.ts
+    √ Writing to generated.ts"
+  `)
   await expect(typecheck(paths.tsconfig)).resolves.toMatchInlineSnapshot('""')
 })
 
@@ -124,15 +124,15 @@ test('generates output with plugin', async () => {
   await generate()
 
   expect(console.formatted).toMatchInlineSnapshot(`
-      "- Validating plugins
-      ✔ Validating plugins
-      - Resolving contracts
-      ✔ Resolving contracts
-      - Running plugins
-      ✔ Running plugins
-      - Writing to generated.ts
-      ✔ Writing to generated.ts"
-    `)
+    "- Validating plugins
+    √ Validating plugins
+    - Resolving contracts
+    √ Resolving contracts
+    - Running plugins
+    √ Running plugins
+    - Writing to generated.ts
+    √ Writing to generated.ts"
+  `)
   /* eslint-disable no-irregular-whitespace */
   await expect(
     readFile(resolve(dir, 'generated.ts'), 'utf8'),
@@ -273,12 +273,12 @@ test('behavior: displays message if no contracts found', async () => {
 
   expect(console.formatted).toMatchInlineSnapshot(
     `
-          "- Validating plugins
-          ✔ Validating plugins
-          - Resolving contracts
-          ✖ Resolving contracts
-          No contracts found."
-        `,
+    "- Validating plugins
+    √ Validating plugins
+    - Resolving contracts
+    × Resolving contracts
+    No contracts found."
+  `,
   )
 })
 
@@ -389,16 +389,16 @@ test('behavior: displays message if using --watch flag without watchers configur
   await generate({ watch: true })
 
   expect(console.formatted).toMatchInlineSnapshot(`
-          "- Validating plugins
-          ✔ Validating plugins
-          - Resolving contracts
-          ✔ Resolving contracts
-          - Running plugins
-          ✔ Running plugins
-          - Writing to generated.ts
-          ✔ Writing to generated.ts
-          Used --watch flag, but no plugins are watching."
-        `)
+    "- Validating plugins
+    √ Validating plugins
+    - Resolving contracts
+    √ Resolving contracts
+    - Running plugins
+    √ Running plugins
+    - Writing to generated.ts
+    √ Writing to generated.ts
+    Used --watch flag, but no plugins are watching."
+  `)
 })
 
 test.todo('behavior: save config file logs change')

packages/cli/src/commands/generate.ts

@@ -76,12 +76,12 @@ export async function generate(options: Generate = {}) {
       ...x,
       id: `${x.name}-${i}`,
     }))
-    const spinner = logger.spinner()
-    spinner.start('Validating plugins')
+    const spinner = logger.spinner('Validating plugins')
+    spinner.start()
     for (const plugin of plugins) {
       await plugin.validate?.()
     }
-    spinner.succeed()
+    spinner.success()
 
     // Add plugin contracts to config contracts
     const contractConfigs = config.contracts ?? []
@@ -113,11 +113,11 @@ export async function generate(options: Generate = {}) {
     const sortedAscContractMap = new Map([...contractMap].sort())
     const contracts = [...sortedAscContractMap.values()]
     if (!contracts.length && !options.watch) {
-      spinner.fail()
+      spinner.error()
       logger.warn('No contracts found.')
       return
     }
-    spinner.succeed()
+    spinner.success()
 
     // Run plugins
     const imports = []
@@ -144,7 +144,7 @@ export async function generate(options: Generate = {}) {
       result.imports && imports.push(result.imports)
       result.prepend && prepend.push(result.prepend)
     }
-    spinner.succeed()
+    spinner.success()
 
     // Write output to file
     spinner.start(`Writing to ${pc.gray(config.out)}`)
@@ -155,7 +155,7 @@ export async function generate(options: Generate = {}) {
       prepend,
       filename: config.out,
     })
-    spinner.succeed()
+    spinner.success()
 
     if (options.watch) {
       if (!watchConfigs.length) {
@@ -227,16 +227,18 @@ export async function generate(options: Generate = {}) {
                 result.prepend && prepend.push(result.prepend)
               }
 
-              const spinner = logger.spinner()
-              spinner.start(`Writing to ${pc.gray(config.out)}`)
+              const spinner = logger.spinner(
+                `Writing to ${pc.gray(config.out)}`,
+              )
+              spinner.start()
               await writeContracts({
                 content,
                 contracts,
                 imports,
                 prepend,
                 filename: config.out,
               })
-              spinner.succeed()
+              spinner.success()
             }, watchWriteDelay)
             needsWrite = false
           }

packages/cli/src/commands/init.test.ts

@@ -38,10 +38,10 @@ test('creates config file', async () => {
   expect(
     console.formatted.replaceAll(dir, 'path/to/project'),
   ).toMatchInlineSnapshot(`
-        "- Creating config
-        ✔ Creating config
-        Config created at wagmi.config.js"
-      `)
+    "- Creating config
+    √ Creating config
+    Config created at wagmi.config.js"
+  `)
 })
 
 test('parameters: config', async () => {
@@ -68,10 +68,10 @@ test('parameters: config', async () => {
   expect(
     console.formatted.replaceAll(dir, 'path/to/project'),
   ).toMatchInlineSnapshot(`
-          "- Creating config
-          ✔ Creating config
-          Config created at foo.config.ts"
-        `)
+    "- Creating config
+    √ Creating config
+    Config created at foo.config.ts"
+  `)
 })
 
 test('parameters: content', async () => {
@@ -104,10 +104,10 @@ test('parameters: content', async () => {
   expect(
     console.formatted.replaceAll(dir, 'path/to/project'),
   ).toMatchInlineSnapshot(`
-          "- Creating config
-          ✔ Creating config
-          Config created at wagmi.config.ts"
-        `)
+    "- Creating config
+    √ Creating config
+    Config created at wagmi.config.ts"
+  `)
 })
 
 test('parameters: root', async () => {
@@ -135,10 +135,10 @@ test('parameters: root', async () => {
   expect(
     console.formatted.replaceAll(dir, 'path/to/project'),
   ).toMatchInlineSnapshot(`
-          "- Creating config
-          ✔ Creating config
-          Config created at foo/wagmi.config.js"
-        `)
+    "- Creating config
+    √ Creating config
+    Config created at foo/wagmi.config.js"
+  `)
 })
 
 test('behavior: creates config file in TypeScript format', async () => {
@@ -166,10 +166,10 @@ test('behavior: creates config file in TypeScript format', async () => {
   expect(
     console.formatted.replaceAll(dir, 'path/to/project'),
   ).toMatchInlineSnapshot(`
-          "- Creating config
-          ✔ Creating config
-          Config created at wagmi.config.ts"
-        `)
+    "- Creating config
+    √ Creating config
+    Config created at wagmi.config.ts"
+  `)
 })
 
 test('behavior: displays config file location when config exists', async () => {

packages/cli/src/commands/init.ts

@@ -47,8 +47,8 @@ export async function init(options: Init = {}) {
     return configPath
   }
 
-  const spinner = logger.spinner()
-  spinner.start('Creating config')
+  const spinner = logger.spinner('Creating config')
+  spinner.start()
   // Check if project is using TypeScript
   const isUsingTypeScript = await getIsUsingTypeScript()
   const rootDir = resolve(options.root || process.cwd())
@@ -86,7 +86,7 @@ export async function init(options: Init = {}) {
 
   const formatted = await format(content)
   await fs.writeFile(outPath, formatted)
-  spinner.succeed()
+  spinner.success()
   logger.success(
     `Config created at ${pc.gray(relative(process.cwd(), outPath))}`,
   )

packages/cli/src/logger.test.ts

@@ -20,14 +20,13 @@ test.each(['success', 'info', 'log', 'warn', 'error'])('%s()', (level) => {
 
 test('spinner', () => {
   const console = watchConsole()
-  const spinner = logger.spinner()
-
-  spinner.start('Foo bar baz')
-  spinner.succeed('Foo bar baz')
-  spinner.fail('Foo bar baz')
+  const spinner = logger.spinner('start')
+  spinner.start()
+  spinner.success('success')
+  spinner.error('error')
   expect(console.formatted).toMatchInlineSnapshot(`
-      "- Foo bar baz
-      ✔ Foo bar baz
-      ✖ Foo bar baz"
-    `)
+    "- start
+    √ success
+    × error"
+  `)
 })

packages/cli/src/logger.ts

@@ -1,5 +1,5 @@
 import { format as utilFormat } from 'node:util'
-import ora from 'ora'
+import { createSpinner } from 'nanospinner'
 import pc from 'picocolors'
 
 function format(args: any[]) {
@@ -30,9 +30,8 @@ export function error(...args: any[]) {
   console.error(pc.red(format(args)))
 }
 
-export function spinner() {
-  return ora({
+export function spinner(text: string) {
+  return createSpinner(text, {
     color: 'yellow',
-    spinner: 'dots',
   })
 }