refactor(task-manager): use Listr directly

rather than a custom wrapper, we can use the Listr API directly to peel off layers of abstraction, reduce custom code, and benefit from the library’s types.
guardian · Jun 25, 2024 · 7aa10bc · 7aa10bc
1 parent 2b874f4
commit 7aa10bc
Show file tree

Hide file tree

Showing 50 changed files with 747 additions and 650 deletions.
diff --git a/tools/__tasks__/compile/conf/clean.js b/tools/__tasks__/compile/conf/clean.js
@@ -3,8 +3,9 @@ const rimraf = require('rimraf');
 
 const { paths } = require('../../config');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clear template rendering artefacts',
+	title: 'Clear template rendering artefacts',
 	task: () =>
 		rimraf.sync(path.resolve(paths.root, 'common', 'conf', 'assets')),
 };

diff --git a/tools/__tasks__/compile/conf/copy.js b/tools/__tasks__/compile/conf/copy.js
@@ -3,8 +3,9 @@ const cpy = require('cpy');
 
 const { paths } = require('../../config');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Copy assets',
+	title: 'Copy assets',
 	task: () =>
 		Promise.all([
 			cpy('curl.js', paths.conf, {

diff --git a/tools/__tasks__/compile/conf/index.js b/tools/__tasks__/compile/conf/index.js
@@ -1,13 +1,18 @@
 const copy = require('./copy.js');
 const inlineSVGs = require('../inline-svgs/index.js');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Compile assets for template rendering in Play',
-	task: [
-		// prettier: multi-line
-		copy,
-		inlineSVGs,
-	],
+	title: 'Compile assets for template rendering in Play',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				// prettier: multi-line
+				copy,
+				inlineSVGs,
+			],
+			{ concurrent: false },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/css/clean.js b/tools/__tasks__/compile/css/clean.js
@@ -3,8 +3,9 @@ const rimraf = require('rimraf');
 
 const { paths } = require('../../config');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clear CSS build artefacts',
+	title: 'Clear CSS build artefacts',
 	task: () => {
 		rimraf.sync(path.resolve(paths.target, 'stylesheets'));
 		rimraf.sync(path.resolve(paths.hash, 'stylesheets'));

diff --git a/tools/__tasks__/compile/css/index.dev.js b/tools/__tasks__/compile/css/index.dev.js
@@ -3,15 +3,20 @@ const mkdir = require('./mkdir.js');
 const images = require('../images/index.js');
 const sass = require('./sass.js');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Compile CSS',
-	task: [
-		// prettier: multi-line
-		clean,
-		mkdir,
-		images,
-		sass,
-	],
+	title: 'Compile CSS (dev)',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				// prettier: multi-line
+				clean,
+				mkdir,
+				images,
+				sass,
+			],
+			{ concurrent: false },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/css/index.js b/tools/__tasks__/compile/css/index.js
@@ -3,15 +3,20 @@ const mkdir = require('./mkdir.js');
 const images = require('../images/index.js');
 const sass = require('./sass.js');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Compile CSS',
-	task: [
-		// prettier: multi-line
-		clean,
-		mkdir,
-		images,
-		sass,
-	],
+	title: 'Compile CSS',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				// prettier: multi-line
+				clean,
+				mkdir,
+				images,
+				sass,
+			],
+			{ concurrent: false },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/css/mkdir.js b/tools/__tasks__/compile/css/mkdir.js
@@ -1,8 +1,9 @@
 const mkdirp = require('mkdirp');
 const { paths } = require('../../config');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Create CSS target directory',
+	title: 'Create CSS target directory',
 	task: () => mkdirp.sync(`${paths.target}/stylesheets`),
 };
 

diff --git a/tools/__tasks__/compile/css/sass.js b/tools/__tasks__/compile/css/sass.js
@@ -1,45 +1,51 @@
 const compile = require('../../../compile-css');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Compile Sass',
-	task: [
-		{
-			description: 'Old IE',
-			task: () =>
-				compile('old-ie.*.scss', {
-					browsers: 'Explorer 8',
-					remify: false,
-				}),
-		},
-		{
-			description: 'IE9',
-			task: () =>
-				compile('ie9.*.scss', {
-					browsers: 'Explorer 9',
-				}),
-		},
-		{
-			description: 'Email',
-			task: () =>
-				compile('head.email-{article,front}.scss', {
-					remify: false,
-				}),
-		},
-		{
-			description: 'Modern',
-			task: () =>
-				compile('!(_|ie9|old-ie|*email-article|*email-front)*.scss'),
-		},
-		{
-			description: 'Inline',
-			task: () => compile('inline/*.scss'),
-		},
-		{
-			description: 'Atoms',
-			task: () => compile('atoms/*.scss'),
-		},
-	],
-	concurrent: true,
+	title: 'Compile Sass',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				{
+					title: 'Old IE',
+					task: () =>
+						compile('old-ie.*.scss', {
+							browsers: 'Explorer 8',
+							remify: false,
+						}),
+				},
+				{
+					title: 'IE9',
+					task: () =>
+						compile('ie9.*.scss', {
+							browsers: 'Explorer 9',
+						}),
+				},
+				{
+					title: 'Email',
+					task: () =>
+						compile('head.email-{article,front}.scss', {
+							remify: false,
+						}),
+				},
+				{
+					title: 'Modern',
+					task: () =>
+						compile(
+							'!(_|ie9|old-ie|*email-article|*email-front)*.scss',
+						),
+				},
+				{
+					title: 'Inline',
+					task: () => compile('inline/*.scss'),
+				},
+				{
+					title: 'Atoms',
+					task: () => compile('atoms/*.scss'),
+				},
+			],
+			{ concurrent: !!ctx.verbose ? false : true },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/data/amp.js b/tools/__tasks__/compile/data/amp.js
@@ -10,8 +10,9 @@ const ampIframeHtml = path.join(paths.vendor, 'data/amp-iframe.html');
 // The static assets
 const staticDir = path.resolve(paths.target, 'data', 'vendor');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Copy AMP iframe HTML',
+	title: 'Copy AMP iframe HTML',
 	task: () =>
 		cpy(ampIframeHtml, staticDir, {
 			parents: false,

diff --git a/tools/__tasks__/compile/data/clean.js b/tools/__tasks__/compile/data/clean.js
@@ -3,8 +3,9 @@ const rimraf = require('rimraf');
 
 const { paths } = require('../../config');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clear Data build artefacts',
+	title: 'Clear Data build artefacts',
 	task: () => {
 		rimraf.sync(path.resolve(paths.target, 'data'));
 		rimraf.sync(path.resolve(paths.hash, 'data'));

diff --git a/tools/__tasks__/compile/data/download.js b/tools/__tasks__/compile/data/download.js
@@ -20,8 +20,9 @@ const currentVendorListJSON = path.join(
 	'data/cmp_vendorlist.json',
 );
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Downloading data files',
+	title: 'Downloading data files',
 	task: () =>
 		new Promise((resolve, reject) => {
 			request(vendorListOfficialUrl, (error, response, body) => {

diff --git a/tools/__tasks__/compile/data/index.dev.js b/tools/__tasks__/compile/data/index.dev.js
@@ -2,14 +2,19 @@ const clean = require('./clean.js');
 const download = require('./download.js');
 const amp = require('./amp.js');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clean download and build data assets (dev)',
-	task: [
-		// prettier: multi-line
-		clean,
-		download,
-		amp,
-	],
+	title: 'Clean download and build data assets (dev)',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				// prettier: multi-line
+				clean,
+				download,
+				amp,
+			],
+			{ concurrent: false },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/data/index.js b/tools/__tasks__/compile/data/index.js
@@ -2,14 +2,19 @@ const clean = require('./clean.js');
 const download = require('./download.js');
 const amp = require('./amp.js');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clean download and build data assets',
-	task: [
-		// prettier: multi-line
-		clean,
-		download,
-		amp,
-	],
+	title: 'Clean download and build data assets',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				// prettier: multi-line
+				clean,
+				download,
+				amp,
+			],
+			{ concurrent: false },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/data/index.watch.js b/tools/__tasks__/compile/data/index.watch.js
@@ -2,14 +2,19 @@ const clean = require('./clean.js');
 const download = require('./download.js');
 const amp = require('./amp.js');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clean, download and build data assets (watch)',
-	task: [
-		// prettier: multi-line
-		clean,
-		download,
-		amp,
-	],
+	title: 'Clean, download and build data assets (watch)',
+	task: (ctx, task) =>
+		task.newListr(
+			[
+				// prettier: multi-line
+				clean,
+				download,
+				amp,
+			],
+			{ concurrent: false },
+		),
 };
 
 module.exports = task;
diff --git a/tools/__tasks__/compile/hash/clean.js b/tools/__tasks__/compile/hash/clean.js
@@ -3,8 +3,9 @@ const rimraf = require('rimraf');
 
 const { paths } = require('../../config');
 
+/** @type {import('listr2').ListrTask} */
 const task = {
-	description: 'Clear asset hash artefacts',
+	title: 'Clear asset hash artefacts',
 	task: () => rimraf.sync(path.resolve(paths.hash, 'assets')),
 };