[CLI]: Upgrade from Listr to Listr2 (#6444)

* initial listr to listr2 refactor pass through commands

* updated package.json to use listr2 and remove listr and the verbose render

* updated some lib functions which used listr

* Fixed renderOptions to rendererOptions

* Updated generator files

* Updated destroy files

* Update tests with listr2 changes

* Updated createYargsForComponentGeneration.test.js mock

* Replaced manual mock with automatic one

* Removed caret (^) from listr2 package dependency

* Updated test project fixture

* tracking yarn.lock

* updated yarn.lock

* Remove duplicate test-project migrations

* Remove TODO's for greater verbose output support

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>

packages/cli/package.json

@@ -49,8 +49,7 @@
     "fast-glob": "3.2.12",
     "fs-extra": "10.1.0",
     "latest-version": "5.1.0",
-    "listr": "0.14.3",
-    "listr-verbose-renderer": "0.6.0",
+    "listr2": "5.0.5",
     "lodash": "4.17.21",
     "param-case": "3.0.4",
     "pascalcase": "1.0.0",

packages/cli/src/commands/__tests__/build.test.js

@@ -20,12 +20,8 @@ jest.mock('@redwoodjs/internal/dist/config', () => {
   }
 })
 
-import Listr from 'listr'
-jest.mock('listr', () => {
-  return jest.fn().mockImplementation(function FakeListr() {
-    return { run: jest.fn() }
-  })
-})
+import { Listr } from 'listr2'
+jest.mock('listr2')
 
 // Make sure prerender doesn't get triggered
 jest.mock('execa', () =>

packages/cli/src/commands/buildHandler.js

@@ -2,8 +2,7 @@ import fs from 'fs'
 import path from 'path'
 
 import execa from 'execa'
-import Listr from 'listr'
-import VerboseRenderer from 'listr-verbose-renderer'
+import { Listr } from 'listr2'
 import rimraf from 'rimraf'
 import terminalLink from 'terminal-link'
 
@@ -137,7 +136,7 @@ export const handler = async ({
   }
 
   const jobs = new Listr(tasks, {
-    renderer: verbose && VerboseRenderer,
+    renderer: verbose && 'verbose',
   })
 
   try {

packages/cli/src/commands/dataMigrate/install.js

@@ -2,7 +2,7 @@ import path from 'path'
 
 import execa from 'execa'
 import fs from 'fs-extra'
-import Listr from 'listr'
+import { Listr } from 'listr2'
 import terminalLink from 'terminal-link'
 
 import { errorTelemetry } from '@redwoodjs/telemetry'
@@ -86,7 +86,7 @@ export const handler = async () => {
         },
       },
     ],
-    { collapse: false, exitOnError: true }
+    { rendererOptions: { collapse: false }, exitOnError: true }
   )
 
   try {

packages/cli/src/commands/dataMigrate/up.js

@@ -1,8 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import Listr from 'listr'
-import VerboseRenderer from 'listr-verbose-renderer'
+import { Listr } from 'listr2'
 import terminalLink from 'terminal-link'
 
 import { registerApiSideBabelHook } from '@redwoodjs/internal/dist/build/babel/api'
@@ -160,8 +159,8 @@ export const handler = async () => {
   })
 
   const tasks = new Listr(migrationTasks, {
-    collapse: false,
-    renderer: VerboseRenderer,
+    rendererOptions: { collapse: false },
+    renderer: 'verbose',
   })
 
   try {

packages/cli/src/commands/deploy/__tests__/baremetal.test.js

@@ -1,4 +1,4 @@
-import Listr from 'listr'
+import { Listr } from 'listr2'
 
 jest.mock('@redwoodjs/internal/dist/paths', () => {
   return {
@@ -738,7 +738,7 @@ describe('commands', () => {
       { environment: 'staging', releaseDir: '2022051120000' },
       {}
     )
-    const tasks = servers[0].task()._tasks
+    const tasks = servers[0].task().tasks
 
     expect(tasks[0].title).toMatch('Connecting')
     expect(tasks[9].title).toMatch('Disconnecting')
@@ -749,7 +749,7 @@ describe('commands', () => {
       { environment: 'staging', releaseDir: '2022051120000' },
       {}
     )
-    const tasks = servers[0].task()._tasks
+    const tasks = servers[0].task().tasks
 
     expect(tasks[1].title).toMatch('Cloning')
   })
@@ -763,7 +763,7 @@ describe('commands', () => {
       },
       {}
     )
-    const tasks = servers[0].task()._tasks
+    const tasks = servers[0].task().tasks
 
     expect(tasks.length).toEqual(3)
     expect(tasks[1].title).toMatch('Enabling maintenance')
@@ -778,7 +778,7 @@ describe('commands', () => {
       },
       {}
     )
-    const tasks = servers[0].task()._tasks
+    const tasks = servers[0].task().tasks
 
     expect(tasks.length).toEqual(3)
     expect(tasks[1].title).toMatch('Rolling back 2 release(s)')
@@ -792,7 +792,7 @@ describe('commands', () => {
       },
       {}
     )
-    const tasks = servers[0].task()._tasks
+    const tasks = servers[0].task().tasks
 
     expect(tasks[1].title).toEqual('Before update: `touch update`')
     expect(tasks[5].title).toEqual('After install: `touch install`')

packages/cli/src/commands/deploy/baremetal.js

@@ -3,8 +3,7 @@ import path from 'path'
 
 import toml from '@iarna/toml'
 import boxen from 'boxen'
-import Listr from 'listr'
-import VerboseRenderer from 'listr-verbose-renderer'
+import { Listr } from 'listr2'
 import terminalLink from 'terminal-link'
 import { titleCase } from 'title-case'
 
@@ -684,7 +683,7 @@ export const handler = async (yargs) => {
     const tasks = new Listr(commands(yargs, ssh), {
       concurrent: true,
       exitOnError: true,
-      renderer: yargs.verbose && VerboseRenderer,
+      renderer: yargs.verbose && 'verbose',
     })
     await tasks.run()
   } catch (e) {

packages/cli/src/commands/deploy/serverless.js

@@ -5,8 +5,7 @@ import boxen from 'boxen'
 import chalk from 'chalk'
 import { config } from 'dotenv-defaults'
 import execa from 'execa'
-import Listr from 'listr'
-import VerboseRenderer from 'listr-verbose-renderer'
+import { Listr } from 'listr2'
 import prompts from 'prompts'
 import terminalLink from 'terminal-link'
 
@@ -142,7 +141,7 @@ export const handler = async (yargs) => {
     ],
     {
       exitOnError: true,
-      renderer: yargs.verbose && VerboseRenderer,
+      renderer: yargs.verbose && 'verbose',
     }
   )
   try {
@@ -205,7 +204,7 @@ export const handler = async (yargs) => {
           ],
           {
             exitOnError: true,
-            renderer: yargs.verbose && VerboseRenderer,
+            renderer: yargs.verbose && 'verbose',
           }
         )
 

packages/cli/src/commands/destroy/cell/__tests__/cell.test.js

@@ -36,7 +36,7 @@ test('destroys cell files', async () => {
     filesFn: files,
     name: 'User',
   })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   await t.run()
 
@@ -55,7 +55,7 @@ test('destroys cell files with stories and tests', async () => {
     stories: true,
     tests: true,
   })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   await t.run()
 

packages/cli/src/commands/destroy/component/__tests__/component.test.js

@@ -26,7 +26,7 @@ afterEach(() => {
 test('destroys component files', async () => {
   const unlinkSpy = jest.spyOn(fs, 'unlinkSync')
   const t = tasks({ componentName: 'component', filesFn: files, name: 'About' })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   return t.run().then(() => {
     const generatedFiles = Object.keys(files({ name: 'About' }))
@@ -45,7 +45,7 @@ test('destroys component files including stories and tests', async () => {
     stories: true,
     tests: true,
   })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   return t.run().then(() => {
     const generatedFiles = Object.keys(

packages/cli/src/commands/destroy/directive/__tests__/directive.test.js

@@ -33,7 +33,7 @@ test('destroys directive files', async () => {
     filesFn: (args) => files({ ...args, type: 'validator' }),
     name: 'require-admin',
   })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   return t.run().then(() => {
     const generatedFiles = Object.keys(

packages/cli/src/commands/destroy/function/__tests__/function.test.js

@@ -30,7 +30,7 @@ test('destroys service files', async () => {
     filesFn: files,
     name: 'sendMail',
   })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   return t.run().then(async () => {
     const generatedFiles = Object.keys(files({ name: 'sendMail' }))

packages/cli/src/commands/destroy/graphiql/graphiql.js

@@ -1,4 +1,4 @@
-import Listr from 'listr'
+import { Listr } from 'listr2'
 
 import {
   existsAnyExtensionSync,
@@ -46,7 +46,7 @@ export const handler = () => {
         task: removeGraphiqlFromGraphqlHandler,
       },
     ],
-    { collapse: false, exitOnError: true }
+    { rendererOptions: { collapse: false }, exitOnError: true }
   )
   try {
     tasks.run()

packages/cli/src/commands/destroy/helpers.js

@@ -1,4 +1,4 @@
-import Listr from 'listr'
+import { Listr } from 'listr2'
 
 import { deleteFilesTask } from '../../lib'
 import c from '../../lib/colors'
@@ -14,7 +14,7 @@ const tasks = ({ componentName, filesFn, name }) =>
         },
       },
     ],
-    { collapse: false, exitOnError: true }
+    { rendererOptions: { collapse: false }, exitOnError: true }
   )
 
 export const createYargsForComponentDestroy = ({

packages/cli/src/commands/destroy/layout/__tests__/layout.test.js

@@ -26,7 +26,7 @@ afterEach(() => {
 test('destroys layout files', async () => {
   const unlinkSpy = jest.spyOn(fs, 'unlinkSync')
   const t = tasks({ componentName: 'layout', filesFn: files, name: 'Blog' })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   return t.run().then(() => {
     const generatedFiles = Object.keys(files({ name: 'Blog' }))
@@ -45,7 +45,7 @@ test('destroys layout files with stories and tests', async () => {
     stories: true,
     tests: true,
   })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
   return t.run().then(() => {
     const generatedFiles = Object.keys(

packages/cli/src/commands/destroy/page/__tests__/page.test.js

@@ -36,9 +36,9 @@ afterEach(() => {
 test('destroys page files', async () => {
   const unlinkSpy = jest.spyOn(fs, 'unlinkSync')
   const t = tasks({ name: 'About' })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
-  return t._tasks[0].run().then(() => {
+  return t.tasks[0].run().then(() => {
     const generatedFiles = Object.keys(files({ name: 'About' }))
     expect(generatedFiles.length).toEqual(unlinkSpy.mock.calls.length)
     generatedFiles.forEach((f) => expect(unlinkSpy).toHaveBeenCalledWith(f))
@@ -60,9 +60,9 @@ test('destroys page files with stories and tests', async () => {
 
   const unlinkSpy = jest.spyOn(fs, 'unlinkSync')
   const t = tasks(fileOptions)
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
-  return t._tasks[0].run().then(() => {
+  return t.tasks[0].run().then(() => {
     const generatedFiles = Object.keys(files(fileOptions))
     expect(generatedFiles.length).toEqual(unlinkSpy.mock.calls.length)
     generatedFiles.forEach((f) => expect(unlinkSpy).toHaveBeenCalledWith(f))
@@ -71,9 +71,9 @@ test('destroys page files with stories and tests', async () => {
 
 test('cleans up route from Routes.js', async () => {
   const t = tasks({ name: 'About' })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
-  return t._tasks[1].run().then(() => {
+  return t.tasks[1].run().then(() => {
     const routes = fs.readFileSync(getPaths().web.routes)
     expect(routes).toEqual(
       [
@@ -88,9 +88,9 @@ test('cleans up route from Routes.js', async () => {
 
 test('cleans up route with a custom path from Routes.js', async () => {
   const t = tasks({ name: 'About', path: '/about-us' })
-  t.setRenderer('silent')
+  t.options.renderer = 'silent'
 
-  return t._tasks[1].run().then(() => {
+  return t.tasks[1].run().then(() => {
     const routes = fs.readFileSync(getPaths().web.routes)
     expect(routes).toEqual(
       [

packages/cli/src/commands/destroy/page/page.js

@@ -1,5 +1,5 @@
 import camelcase from 'camelcase'
-import Listr from 'listr'
+import { Listr } from 'listr2'
 
 import { deleteFilesTask, removeRoutesFromRouterTask } from '../../../lib'
 import c from '../../../lib/colors'
@@ -44,7 +44,7 @@ export const tasks = ({ name, path }) =>
         task: async () => removeRoutesFromRouterTask([camelcase(name)]),
       },
     ],
-    { collapse: false, exitOnError: true }
+    { rendererOptions: { collapse: false }, exitOnError: true }
   )
 
 export const handler = async ({ name, path }) => {