fix: finally done

.github/workflows/build.yml

@@ -35,10 +35,10 @@ jobs:
       - run: make reinstall
 
       - name: assets test
-        run: ./tools/task-runner/runner validate test
+        run: node ./tools/task-runner/runner.mjs validate test
 
       - name: assets compile
-        run: ./tools/task-runner/runner compile
+        run: node ./tools/task-runner/runner.mjs compile
         env:
           NODE_ENV: production
 

dev/bs-config.mjs

@@ -1,4 +1,5 @@
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 // To run browser-sync with this config:
 //
@@ -55,7 +56,7 @@ export default {
     scrollThrottle: 0,
     reloadDelay: 0,
     reloadDebounce: 100,
-    plugins: [path.dirname(require.resolve('bs-fullscreen-message'))],
+    plugins: [path.dirname(fileURLToPath(import.meta.resolve('bs-fullscreen-message')))],
     injectChanges: true,
     startPath: null,
     minify: false,

dev/watch → dev/watch.mjs

@@ -1,6 +1,5 @@
-#!/usr/bin/env node --experimental-default-type=module
-
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import cpy from 'cpy';
 import chalk from 'chalk';
 import bs from 'browser-sync';
@@ -78,6 +77,11 @@ mainWebpackBundler.watch(...watchArguments);
 // ********************************** Sass **********************************
 
 import { watch } from 'chokidar';
+import compileSass from '../tools/compile-css.mjs';
+import { parseDir } from 'sass-graph';
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.dirname(__filename); // get the name of the directory
 
 const sassDir = path.resolve(__dirname, '../', 'static', 'src', 'stylesheets');
 const targetDir = path.resolve(__dirname, '../', 'static', 'target');
@@ -89,11 +93,10 @@ const inlineStylesDir = path.resolve(
     'assets',
     'inline-stylesheets'
 );
-const sassGraph = require('sass-graph').parseDir(sassDir, {
+const sassGraph = parseDir(sassDir, {
     loadPaths: [sassDir],
 });
 
-import compileSass from '../tools/compile-css.mjs';
 
 // when we detect a change in a sass file, we look up the tree of imports
 // and only compile what we need to. anything matching this regex, we can just ignore in dev.

dev/webpack-loaders/svg-loader/index.js

@@ -1,7 +1,7 @@
-import path from 'node:path';
+const path = require('path');
 
 /** @type {(content: string) => string} content */
-export default function svgLoader(content) {
+module.exports = function svgLoader(content) {
     const match = content.match(/<svg([^>]+)+>([\s\S]+)<\/svg>/i);
     const prefix = 'inline-';
     const imageType = path
@@ -16,5 +16,5 @@ export default function svgLoader(content) {
 
     this.value = markup;
 
-    return `export default ${JSON.stringify({ markup })}`;
+    return `module.exports = ${JSON.stringify({ markup })}`;
 };

git-hooks/pre-push

@@ -37,8 +37,11 @@ const confirmIfMain = execa.shell(
     .catch(() => Promise.reject(new Error('Ok, stopping 😉')));
 const validate = () =>
     execa(
-        './tools/task-runner/runner',
-        ['validate/scalafmt.mjs', 'validate-head/index.mjs', 'validate/check-for-disallowed-strings.mjs'],
+        'node',
+        [
+          './tools/task-runner/runner.mjs',
+          'validate/scalafmt.mjs', 'validate-head/index.mjs', 'validate/check-for-disallowed-strings.mjs'
+        ],
         {
             stdio: 'inherit',
         }

makefile

@@ -31,7 +31,7 @@ check-node-env: # PRIVATE
 # Watch and automatically compile/reload all JS/SCSS.
 # Uses port 3000 insead of 9000.
 watch: compile-watch
-	@./dev/watch.mjs
+	@node ./dev/watch.mjs
 
 sbt: # PRIVATE
 	./sbt
@@ -40,70 +40,70 @@ sbt: # PRIVATE
 
 # Compile all assets in production.
 compile: install
-	@NODE_ENV=production ./tools/task-runner/runner compile/index.mjs
+	@NODE_ENV=production node ./tools/task-runner/runner.mjs compile/index.mjs
 
 # Compile all assets in development.
 compile-dev: install
-	@NODE_ENV=development ./tools/task-runner/runner compile/index.mjs --dev
+	@NODE_ENV=development node ./tools/task-runner/runner.mjs compile/index.mjs --dev
 
 # Compile atom-specific JS
 compile-atoms: install
-	@./tools/task-runner/runner compile/javascript/index.atoms.js
+	@node ./tools/task-runner/runner.mjs compile/javascript/index.atoms.js
 
 # Compile all assets for watch.
 compile-watch: install # PRIVATE
-	@NODE_ENV=development ./tools/task-runner/runner compile/index.watch.mjs
+	@NODE_ENV=development node ./tools/task-runner/runner.mjs compile/index.watch.mjs
 
 compile-javascript: install # PRIVATE
-	@./tools/task-runner/runner compile/javascript/index.mjs
+	@node ./tools/task-runner/runner.mjs compile/javascript/index.mjs
 
 compile-javascript-dev: install # PRIVATE
-	@./tools/task-runner/runner compile/javascript/index.mjs --dev
+	@node ./tools/task-runner/runner.mjs compile/javascript/index.mjs --dev
 
 compile-css: install # PRIVATE
-	@./tools/task-runner/runner compile/css/index.mjs
+	@node ./tools/task-runner/runner.mjs compile/css/index.mjs
 
 compile-images: install # PRIVATE
-	@./tools/task-runner/runner compile/images/index.mjs
+	@node ./tools/task-runner/runner.mjs compile/images/index.mjs
 
 compile-svgs: install # PRIVATE
-	@./tools/task-runner/runner compile/inline-svgs/index.mjs
+	@node ./tools/task-runner/runner.mjs compile/inline-svgs/index.mjs
 
 # *********************** CHECKS ***********************
 
 # Run the JS test suite.
 test: install
-	@./tools/task-runner/runner test/javascript --verbose
+	@node ./tools/task-runner/runner.mjs test/javascript --verbose
 
 # Run the modern JS test suite in watch mode.
 test-watch: install
 	@yarn test -- --watch --coverage
 
 # Check the JS test suite coverage.
 coverage: install
-	@./tools/task-runner/runner test/javascript/coverage --stdout
+	@node ./tools/task-runner/runner.mjs test/javascript/coverage --stdout
 
 # Validate all assets.
 validate: install
-	@./tools/task-runner/runner validate/index.mjs --verbose
+	@node ./tools/task-runner/runner.mjs validate/index.mjs --verbose
 	@yarn prettier */test/resources/*.json --check
 
 # Validate all SCSS.
 validate-sass: install # PRIVATE
-	@./tools/task-runner/runner validate/sass --verbose
+	@node ./tools/task-runner/runner.mjs validate/sass --verbose
 
 # Validate all JS.
 validate-javascript: install # PRIVATE
-	@./tools/task-runner/runner validate/javascript
+	@node ./tools/task-runner/runner.mjs validate/javascript
 
 # Fix JS linting errors.
 fix: install
-	@./tools/task-runner/runner validate/javascript-fix.mjs
+	@node ./tools/task-runner/runner.mjs validate/javascript-fix.mjs
 	@yarn prettier */test/resources/*.json --write
 
 # Fix committed JS linting errors.
 fix-commits: install
-	@./tools/task-runner/runner validate-head/javascript-fix.mjs
+	@node ./tools/task-runner/runner.mjs validate-head/javascript-fix.mjs
 
 # Update caniuse db used by browserslist
 # https://github.com/browserslist/update-db

package.json

@@ -43,6 +43,7 @@
 		"@types/googletag": "^1.1.3",
 		"@types/jest": "29.5.12",
 		"@types/lodash-es": "^4.17.4",
+		"@types/webpack-bundle-analyzer": "4.7.0",
 		"@types/webpack-env": "^1.16.2",
 		"@types/youtube": "^0.0.44",
 		"@typescript-eslint/eslint-plugin": "5.61.0",
@@ -67,7 +68,7 @@
 		"copy-webpack-plugin": "6",
 		"core-js": "^3.19.1",
 		"cp-file": "^7.0.0",
-		"cpy": "^11.0.1",
+		"cpy": "10",
 		"css-loader": "^5.2.7",
 		"cssstats": "^3.1.0",
 		"csstype": "^3.0.6",
@@ -143,7 +144,7 @@
 		"videojs-playlist": "guardian/videojs-playlist#0.1.4",
 		"web-vitals": "3.5.1",
 		"webpack": "^5.79.0",
-		"webpack-bundle-analyzer": "^4.8.0",
+		"webpack-bundle-analyzer": "4.10.2",
 		"webpack-cli": "^5.0.1",
 		"webpack-dev-server": "^4.13.2",
 		"webpack-merge": "^4.2.2",

tools/__tasks__/compile/conf/index.mjs

@@ -1,9 +1,7 @@
 export default {
 	description: 'Compile assets for template rendering in Play',
 	task: [
-		await import('./copy.mjs').then((module) => module.default),
-		await import('../inline-svgs/index.mjs').then(
-			(module) => module.default,
-		),
+		(await import('./copy.mjs')).default,
+		(await import('../inline-svgs/index.mjs')).default,
 	],
 };

tools/__tasks__/compile/css/index.dev.mjs

@@ -1,9 +1,9 @@
 export default {
 	description: 'Compile CSS',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('./mkdir.mjs').then((module) => module.default),
-		await import('../images/index.mjs').then((module) => module.default),
-		await import('./sass.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('./mkdir.mjs')).default,
+		(await import('../images/index.mjs')).default,
+		(await import('./sass.mjs')).default,
 	],
 };

tools/__tasks__/compile/css/index.mjs

@@ -1,9 +1,9 @@
 export default {
 	description: 'Compile CSS',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('./mkdir.mjs').then((module) => module.default),
-		await import('../images/index.mjs').then((module) => module.default),
-		await import('./sass.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('./mkdir.mjs')).default,
+		(await import('../images/index.mjs')).default,
+		(await import('./sass.mjs')).default,
 	],
 };

tools/__tasks__/compile/data/index.dev.js

@@ -1,8 +1,8 @@
 export default {
 	description: 'Clean download and build data assets (dev)',
 	task: [
-		import('./clean.mjs'),
-		import('./download.mjs'),
-		import('./amp.mjs'),
+		(await import('./clean.mjs')).default,
+		(await import('./download.mjs')).default,
+		(await import('./amp.mjs')).default,
 	],
 };

tools/__tasks__/compile/data/index.dev.mjs

@@ -1,8 +1,8 @@
 export default {
 	description: 'Clean download and build data assets (dev)',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('./download.mjs').then((module) => module.default),
-		await import('./amp.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('./download.mjs')).default,
+		(await import('./amp.mjs')).default,
 	],
 };

tools/__tasks__/compile/data/index.mjs

@@ -1,8 +1,8 @@
 export default {
 	description: 'Clean download and build data assets',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('./download.mjs').then((module) => module.default),
-		await import('./amp.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('./download.mjs')).default,
+		(await import('./amp.mjs')).default,
 	],
 };

tools/__tasks__/compile/data/index.watch.mjs

@@ -1,8 +1,8 @@
 export default {
 	description: 'Clean, download and build data assets (watch)',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('./download.mjs').then((module) => module.default),
-		await import('./amp.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('./download.mjs')).default,
+		(await import('./amp.mjs')).default,
 	],
 };

tools/__tasks__/compile/hash/index.mjs

@@ -15,7 +15,7 @@ const { hash, target } = paths;
 export default {
 	description: 'Version assets',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
 		{
 			description: 'Hash assets',
 			task: () => {

tools/__tasks__/compile/images/copy.mjs

@@ -1,5 +1,5 @@
-import path from 'node:path';
 import cpy from 'cpy';
+import path from 'node:path';
 import { paths } from '../.././config.mjs';
 
 export default {

tools/__tasks__/compile/images/index.mjs

@@ -1,9 +1,9 @@
 export default {
 	description: 'Compile images',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('./copy.mjs').then((module) => module.default),
-		await import('./icons.mjs').then((module) => module.default),
-		await import('./svg.mjs').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('./copy.mjs')).default,
+		(await import('./icons.mjs')).default,
+		(await import('./svg.mjs')).default,
 	],
 };

tools/__tasks__/compile/images/svg.mjs

@@ -9,9 +9,7 @@ const stat = pify(fs.stat);
 
 import { paths } from '../../config.mjs';
 
-const { src } = paths;
-
-const srcDir = path.resolve(src);
+const srcDir = path.resolve(paths.src);
 
 export default {
 	description:

tools/__tasks__/compile/index.dev.js

@@ -1,10 +1,10 @@
 export default {
 	description: 'Compile assets for development',
 	task: [
-		await import('./conf/clean.mjs'),
-		await import('./css/index.dev.mjs'),
-		await import('./data/index.dev'),
-		await import('./javascript/index.dev'),
-		await import('./conf/index.mjs'),
+		(await import('./conf/clean.mjs')).default,
+		(await import('./css/index.dev.mjs')).default,
+		(await import('./data/index.dev')).default,
+		(await import('./javascript/index.dev')).default,
+		(await import('./conf/index.mjs')).default,
 	],
 };

tools/__tasks__/compile/javascript/index.atoms.mjs

@@ -1,10 +1,8 @@
 export default {
 	description: 'Compile JS',
 	task: [
-		await import('./clean.mjs').then((module) => module.default),
-		await import('../inline-svgs/index.mjs').then(
-			(module) => module.default,
-		),
-		await import('./webpack-atoms').then((module) => module.default),
+		(await import('./clean.mjs')).default,
+		(await import('../inline-svgs/index.mjs')).default,
+		(await import('./webpack-atoms')).default,
 	],
 };

tools/__tasks__/compile/javascript/webpack.mjs

@@ -20,7 +20,7 @@ export default {
 				}
 				const info = stats.toJson();
 				if (stats.hasErrors()) {
-					throw new Error(chalk.red(info.errors));
+					throw new Error(chalk.red(info.errors.map(e => JSON.stringify(e))));
 				}
 				observer.complete();
 			});