refactor: Bump Node version, remove src arg in build & watch, and m…

…isc housekeeping (#1753)

* refactor: Drop rimraf for built-in fs.rm

* refactor: Drop src argument in build & watch cmds

* refactor: Extract info cmd from CLI entrypoint

* refactor: Remove update-notifier

* refactor: Switch from fs.promises to fs/promises

* docs: Adding changeset

.changeset/tender-lamps-boil.md

@@ -0,0 +1,9 @@
+---
+'preact-cli': major
+---
+
+Minimum supported Node version for `preact-cli` is now v14.14.0. Please upgrade if you are on an older version.
+
+`build` and `watch` commands will no longer take an optional `src` directory argument; if you want to change the source directory from the default (`./src`), please instead use the `--src` flag (i.e., `--src differentSrc`).
+
+Upon rebuild, the output directory will no longer be outright deleted; instead, it will be emptied. This has the benefit of better supporting containerized environments where specific directories are mounted. Emptying the directory, rather than deleting and recreating it, ensures a stable reference for those tools.

packages/cli/package.json

@@ -64,15 +64,13 @@
     "kleur": "^4.1.4",
     "mini-css-extract-plugin": "^2.5.3",
     "minimatch": "^3.0.3",
-    "native-url": "0.3.4",
     "optimize-plugin": "^1.3.0",
     "postcss": "^8.4.13",
     "postcss-load-config": "^3.1.4",
     "postcss-loader": "^6.2.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "promise-polyfill": "^8.2.3",
     "react-refresh": "0.11.0",
-    "rimraf": "^3.0.2",
     "sade": "^1.8.1",
     "size-plugin": "^2.0.2",
     "source-map": "^0.7.2",
@@ -81,7 +79,6 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.0",
     "typescript": "^4.6.4",
-    "update-notifier": "^5.1.0",
     "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.9.0",
@@ -109,6 +106,7 @@
     "preact-render-to-string": "^5.2.6",
     "preact-router": "^3.0.1",
     "puppeteer": "^17.1.3",
+    "rimraf": "^3.0.2",
     "sass": "^1.56.1",
     "sass-loader": "^12.4.0",
     "shelljs": "^0.8.5",
@@ -135,6 +133,6 @@
     }
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14.14.0"
   }
 }

packages/cli/src/commands/build.js

@@ -1,26 +1,32 @@
-const rimraf = require('rimraf');
-const { resolve } = require('path');
-const { promisify } = require('util');
+const { readdir, rm } = require('fs/promises');
+const { join, resolve } = require('path');
 const runWebpack = require('../lib/webpack/run-webpack');
 const { toBool } = require('../util');
 
-exports.build = async function buildCommand(src, argv) {
-	argv.src = src || argv.src;
+exports.build = async function buildCommand(argv) {
 	// add `default:true`s, `--no-*` disables
 	argv.prerender = toBool(argv.prerender);
 
 	let cwd = resolve(argv.cwd);
 
+	// Empties destination directory -- useful when mounted with Docker
+	// or similar situations where it's preferable to avoid directory deletion
+	let dest = resolve(cwd, argv.dest);
+	try {
+		await Promise.all(
+			(
+				await readdir(dest)
+			).map(item => rm(join(dest, item), { recursive: true }))
+		);
+	} catch (e) {
+		if (e.code != 'ENOENT') throw e;
+	}
+
 	// we explicitly set the path as `dotenv` otherwise uses
 	// `process.cwd()` -- this would cause issues in environments
 	// like mono-repos or our test suite subjects where project root
 	// and the current directory differ.
 	require('dotenv').config({ path: resolve(cwd, '.env') });
 
-	if (argv.clean === void 0) {
-		let dest = resolve(cwd, argv.dest);
-		await promisify(rimraf)(dest);
-	}
-
 	await runWebpack(argv, true);
 };

packages/cli/src/commands/info.js

@@ -0,0 +1,18 @@
+const envinfo = require('envinfo');
+
+exports.info = async function infoCommand() {
+	const info = await envinfo.run({
+		System: ['OS', 'CPU'],
+		Binaries: ['Node', 'Yarn', 'npm'],
+		Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
+		npmPackages: [
+			'preact',
+			'preact-cli',
+			'preact-router',
+			'preact-render-to-string',
+		],
+		npmGlobalPackages: ['preact-cli'],
+	});
+
+	process.stdout.write(`\nEnvironment Info:${info}\n`);
+};

packages/cli/src/commands/watch.js

@@ -1,10 +1,9 @@
+const { resolve } = require('path');
+const getPort = require('get-port');
 const runWebpack = require('../lib/webpack/run-webpack');
 const { isPortFree, toBool, warn } = require('../util');
-const getPort = require('get-port');
-const { resolve } = require('path');
 
-exports.watch = async function watchCommand(src, argv) {
-	argv.src = src || argv.src;
+exports.watch = async function watchCommand(argv) {
 	if (argv.sw) {
 		argv.sw = toBool(argv.sw);
 	}

packages/cli/src/index.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
-const envinfo = require('envinfo');
 const sade = require('sade');
-const notifier = require('update-notifier');
 const { green } = require('kleur');
+const { build } = require('./commands/build');
+const { info } = require('./commands/info');
+const { watch } = require('./commands/watch');
 const { error } = require('./util');
 const pkg = require('../package.json');
 
@@ -18,16 +19,10 @@ if (
 	);
 }
 
-// Safe to load async-based funcs
-const commands = require('./commands');
-
-// installHooks();
-notifier({ pkg }).notify();
-
 const prog = sade('preact').version(pkg.version);
 
 prog
-	.command('build [src]')
+	.command('build')
 	.describe(
 		'Create a production build. You can disable "default: true" flags by prefixing them with --no-<option>'
 	)
@@ -38,7 +33,7 @@ prog
 	.option('--babelConfig', 'Path to custom Babel config', '.babelrc')
 	.option(
 		'--template',
-		'Path to custom HTML template (default "src/template.html")'
+		'Path to custom HTML template  (default src/template.html)'
 	)
 	.option(
 		'--analyze',
@@ -54,10 +49,10 @@ prog
 	.option('--inlineCss', 'Adds critical CSS to the prerendered HTML', true)
 	.option('-c, --config', 'Path to custom CLI config', 'preact.config.js')
 	.option('-v, --verbose', 'Verbose output', false)
-	.action((src, argv) => exec(commands.build(src, argv)));
+	.action(argv => exec(build(argv)));
 
 prog
-	.command('watch [src]')
+	.command('watch')
 	.describe('Start a live-reload server for development')
 	.option('--src', 'Specify source directory', 'src')
 	.option('--cwd', 'A directory to use instead of $PWD', '.')
@@ -82,27 +77,12 @@ prog
 	.option('-c, --config', 'Path to custom CLI config', 'preact.config.js')
 	.option('-H, --host', 'Set server hostname', '0.0.0.0')
 	.option('-p, --port', 'Set server port (default 8080)')
-	.action((src, argv) => exec(commands.watch(src, argv)));
+	.action(argv => exec(watch(argv)));
 
 prog
 	.command('info')
 	.describe('Print out debugging information about the local environment')
-	.action(() =>
-		exec(envinfo
-			.run({
-				System: ['OS', 'CPU'],
-				Binaries: ['Node', 'Yarn', 'npm'],
-				Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
-				npmPackages: [
-					'preact',
-					'preact-cli',
-					'preact-router',
-					'preact-render-to-string',
-				],
-				npmGlobalPackages: ['preact-cli'],
-			})
-			.then(info => process.stdout.write(`\nEnvironment Info:${info}\n`))
-	));
+	.action(() => exec(info()));
 
 prog.parse(process.argv, {
 	alias: {

packages/cli/src/lib/webpack/transform-config.js

@@ -1,6 +1,6 @@
 const { resolve } = require('path');
 const webpack = require('webpack');
-const { stat } = require('fs').promises;
+const { stat } = require('fs/promises');
 const { error, esmImport, tryResolveConfig, warn } = require('../../util');
 
 const FILE = 'preact.config';

packages/cli/src/lib/webpack/webpack-base-config.js

@@ -1,6 +1,5 @@
 const webpack = require('webpack');
 const path = require('path');
-const { resolve, dirname } = require('path');
 const { readFileSync, existsSync } = require('fs');
 const autoprefixer = require('autoprefixer');
 const browserslist = require('browserslist');
@@ -38,10 +37,12 @@ function findAllNodeModules(startDir) {
 }
 
 function resolveTsconfig(cwd, isProd) {
-	if (existsSync(resolve(cwd, `tsconfig.${isProd ? 'prod' : 'dev'}.json`))) {
-		return resolve(cwd, `tsconfig.${isProd ? 'prod' : 'dev'}.json`);
-	} else if (existsSync(resolve(cwd, 'tsconfig.json'))) {
-		return resolve(cwd, 'tsconfig.json');
+	if (
+		existsSync(path.resolve(cwd, `tsconfig.${isProd ? 'prod' : 'dev'}.json`))
+	) {
+		return path.resolve(cwd, `tsconfig.${isProd ? 'prod' : 'dev'}.json`);
+	} else if (existsSync(path.resolve(cwd, 'tsconfig.json'))) {
+		return path.resolve(cwd, 'tsconfig.json');
 	}
 }
 
@@ -54,9 +55,9 @@ module.exports = function createBaseConfig(config, env) {
 	const { isProd, isServer } = env;
 
 	// Apply base-level `config` values
-	config.dest = resolve(cwd, config.dest || 'build');
+	config.dest = path.resolve(cwd, config.dest || 'build');
 	config.manifest = readJson(source('manifest.json')) || {};
-	config.pkg = readJson(resolve(cwd, 'package.json')) || {};
+	config.pkg = readJson(path.resolve(cwd, 'package.json')) || {};
 
 	// use browserslist config environment, config default, or default browsers
 	// default browsers are '> 0.5%, last 2 versions, Firefox ESR, not dead'
@@ -111,7 +112,6 @@ module.exports = function createBaseConfig(config, env) {
 			alias: {
 				style: source('style'),
 				'preact-cli-entrypoint': source('index'),
-				url: dirname(require.resolve('native-url/package.json')),
 				'react/jsx-runtime': require.resolve('preact/jsx-runtime'),
 				react: require.resolve('preact/compat'),
 				'react-dom/test-utils': require.resolve('preact/test-utils'),

packages/cli/src/util.js

@@ -1,8 +1,8 @@
-const { blue, yellow, red } = require('kleur');
-const { normalize, resolve } = require('path');
 const { statSync, existsSync } = require('fs');
+const { normalize, resolve } = require('path');
+const { createServer } = require('net');
+const { blue, yellow, red } = require('kleur');
 const symbols = require('./symbols');
-const net = require('net');
 
 exports.isDir = function (str) {
 	return existsSync(str) && statSync(str).isDirectory();
@@ -42,7 +42,7 @@ exports.esmImport = require('esm')(module);
 exports.isPortFree = async function (port) {
 	try {
 		await new Promise((resolve, reject) => {
-			const server = net.createServer();
+			const server = createServer();
 			server.unref();
 			server.on('error', reject);
 			server.listen({ port }, () => {

packages/cli/tests/build.test.js

@@ -1,6 +1,12 @@
 const { join } = require('path');
-const { access, mkdir, readdir, readFile, rename, writeFile } =
-	require('fs').promises;
+const {
+	access,
+	mkdir,
+	readdir,
+	readFile,
+	rename,
+	writeFile,
+} = require('fs/promises');
 const looksLike = require('html-looks-like');
 const { create, build, buildFast } = require('./lib/cli');
 const { snapshot } = require('./lib/utils');

packages/cli/tests/config-formats.test.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { access } = require('fs').promises;
+const { access } = require('fs/promises');
 const { build, buildFast } = require('./lib/cli');
 const { subject } = require('./lib/output');
 

packages/cli/tests/lib/cli.js

@@ -1,6 +1,7 @@
 const { join } = require('path');
-const { mkdir } = require('fs').promises;
-const { build: buildCmd, watch: watchCmd } = require('../../src/commands');
+const { mkdir } = require('fs/promises');
+const { build: buildCmd } = require('../../src/commands/build');
+const { watch: watchCmd } = require('../../src/commands/watch');
 const {
 	create: createCmd,
 } = require('../../../create-cli/src/commands/create');
@@ -31,7 +32,7 @@ const build = (exports.build = async function (cwd, options) {
 	await linkPackage('preact-render-to-string', cwd);
 
 	let opts = Object.assign({ cwd }, argv, options);
-	return await buildCmd(opts.src, opts);
+	return await buildCmd(opts);
 });
 
 exports.buildFast = async function (cwd, options) {
@@ -49,5 +50,5 @@ exports.watch = function (cwd, options) {
 	};
 
 	let opts = Object.assign({ cwd }, argv, options);
-	return watchCmd(opts.src, opts);
+	return watchCmd(opts);
 };

packages/cli/tests/lib/output.js

@@ -1,4 +1,4 @@
-const { mkdir } = require('fs').promises;
+const { mkdir } = require('fs/promises');
 const copy = require('ncp');
 const { resolve } = require('path');
 const { promisify } = require('util');

packages/cli/tests/lib/utils.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 const { join, relative, resolve } = require('path');
-const { stat, symlink, readFile, writeFile } = require('fs').promises;
+const { stat, symlink, readFile, writeFile } = require('fs/promises');
 const pRetry = require('p-retry');
 const { promisify } = require('util');
 const glob = promisify(require('glob').glob);
@@ -101,7 +101,10 @@ async function handleOptimize(cwd, config) {
 		let config = await readFile(configFile, 'utf8');
 		// Don't alter config in subsequent runs of same subject
 		if (/optimizePlugin/.test(config)) return;
-		config = config.replace(/}(?![\s\S]*})(?:;?)/m, `${disableOptimizePluginConfig}};`);
+		config = config.replace(
+			/}(?![\s\S]*})(?:;?)/m,
+			`${disableOptimizePluginConfig}};`
+		);
 		await writeFile(configFile, config);
 	} catch {
 		await writeFile(configFile, disableOptimizePluginConfigFile);

packages/cli/tests/service-worker.test.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { readFile, writeFile } = require('fs').promises;
+const { readFile, writeFile } = require('fs/promises');
 const { create, build } = require('./lib/cli');
 const { sleep } = require('./lib/utils');
 const { getServer } = require('./server');

packages/cli/tests/watch.test.js

@@ -1,4 +1,4 @@
-const { mkdir, readFile, rename, writeFile } = require('fs').promises;
+const { mkdir, readFile, rename, writeFile } = require('fs/promises');
 const { join, resolve } = require('path');
 const startChrome = require('./lib/chrome');
 const { create, watch } = require('./lib/cli');