refactor: prune flags (#1752)

* refactor: Revise inconsistent, unused, and deprecated flags

* docs: Adding changeset

.changeset/quiet-eels-fix.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': major
+---
+
+Removes `--json` & `--brotli` flags from `preact build`. Also removes `--rhl` alias for `--refresh` from `preact watch`.

README.md

@@ -131,13 +131,11 @@ $ [npm run / yarn] preact build
     --cwd              A directory to use instead of $PWD  (default .)
     --sw               Generate and attach a Service Worker  (default true)
     --babelConfig      Path to custom Babel config (default .babelrc)
-    --json             Generate build stats for bundle analysis
-    --template         Path to custom HTML template (default 'src/template.html')
-    --analyze          Launch interactive Analyzer to inspect production bundle(s)
     --prerender        Renders route(s) into generated static HTML  (default true)
     --prerenderUrls    Path to pre-rendered routes config  (default prerender-urls.json)
-    --brotli           Adds brotli redirects to the service worker  (default false)
-    --inline-css       Adds critical css to the prerendered markup  (default true)
+    --template         Path to custom HTML template (default 'src/template.html')
+    --inlineCss        Adds critical css to the prerendered markup  (default true)
+    --analyze          Launch interactive Analyzer to inspect production bundle(s) (default false)
     -c, --config       Path to custom CLI config  (default preact.config.js)
     -v, --verbose      Verbose output
     -h, --help         Displays this message
@@ -155,7 +153,6 @@ $ [npm run / yarn] preact watch
     --clear            Clear the console (default true)
     --sw               Generate and attach a Service Worker  (default false)
     --babelConfig      Path to custom Babel config (default .babelrc)
-    --json             Generate build stats for bundle analysis
     --https            Run server with HTTPS protocol
     --key              Path to PEM key for custom SSL certificate
     --cert             Path to custom SSL certificate

packages/cli/package.json

@@ -46,7 +46,6 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist": "^4.20.3",
-    "compression-webpack-plugin": "^9.2.0",
     "console-clear": "^1.0.0",
     "copy-webpack-plugin": "^9.1.0",
     "critters-webpack-plugin": "^3.0.2",

packages/cli/src/commands/build.js

@@ -22,9 +22,5 @@ exports.build = async function buildCommand(src, argv) {
 		await promisify(rimraf)(dest);
 	}
 
-	let stats = await runWebpack(argv, true);
-
-	if (argv.json) {
-		await runWebpack.writeJsonStats(cwd, stats);
-	}
+	await runWebpack(argv, true);
 };

packages/cli/src/commands/watch.js

@@ -4,10 +4,6 @@ const getPort = require('get-port');
 const { resolve } = require('path');
 
 exports.watch = async function watchCommand(src, argv) {
-	if (argv.rhl) {
-		delete argv.rhl;
-		argv.refresh = argv.rhl;
-	}
 	argv.src = src || argv.src;
 	if (argv.sw) {
 		argv.sw = toBool(argv.sw);

packages/cli/src/index.js

@@ -35,7 +35,6 @@ prog
 	.option('--cwd', 'A directory to use instead of $PWD', '.')
 	.option('--sw', 'Generate and attach a Service Worker', true)
 	.option('--babelConfig', 'Path to custom Babel config', '.babelrc')
-	.option('--json', 'Generate build stats for bundle analysis', false)
 	.option(
 		'--template',
 		'Path to custom HTML template (default "src/template.html")'
@@ -51,8 +50,7 @@ prog
 		'Path to prerendered routes config',
 		'prerender-urls.json'
 	)
-	.option('--brotli', 'Builds brotli compressed bundles of JS resources', false)
-	.option('--inline-css', 'Adds critical CSS to the prerendered HTML', true)
+	.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(commands.build);
@@ -65,9 +63,7 @@ prog
 	.option('--clear', 'Clears the console when the devServer updates', true)
 	.option('--sw', 'Generate and attach a Service Worker')
 	.option('--babelConfig', 'Path to custom Babel config', '.babelrc')
-	.option('--rhl', 'Deprecated, use --refresh instead', false)
 	.option('--refresh', 'Enables experimental prefresh functionality', false)
-	.option('--json', 'Generate build stats for bundle analysis', false)
 	.option(
 		'--template',
 		'Path to custom HTML template (default "src/template.html")'
@@ -108,6 +104,9 @@ prog
 	});
 
 prog.parse(process.argv, {
+	alias: {
+		inlineCss: ['inline-css'],
+	},
 	unknown: arg => {
 		const cmd = process.argv[2];
 		error(

packages/cli/src/lib/webpack/render-html-plugin.js

@@ -87,7 +87,7 @@ module.exports = async function renderHTMLPlugin(config, env) {
 						title,
 						url,
 						manifest: config.manifest,
-						inlineCss: config['inline-css'],
+						inlineCss: config['inlineCss'],
 						config,
 						env,
 						prerenderData: values,

packages/cli/src/lib/webpack/run-webpack.js

@@ -2,7 +2,6 @@ const ip = require('ip');
 const webpack = require('webpack');
 const { resolve } = require('path');
 const clear = require('console-clear');
-const { writeFile } = require('fs').promises;
 const { bold, red, green, magenta } = require('kleur');
 const DevServer = require('webpack-dev-server');
 const clientConfig = require('./webpack-client-config');
@@ -117,37 +116,6 @@ function showStats(stats, isProd) {
 	return stats;
 }
 
-function writeJsonStats(cwd, stats) {
-	let outputPath = resolve(cwd, 'stats.json');
-	let jsonStats = stats.toJson({
-		json: true,
-		chunkModules: true,
-		source: false,
-	});
-
-	function strip(stats) {
-		stats.modules.forEach(stripLoaderFromModuleNames);
-		stats.chunks.forEach(c => {
-			(
-				c.modules ||
-				(c.mapModules != null ? c.mapModules(Object) : c.getModules())
-			).forEach(stripLoaderFromModuleNames);
-		});
-		if (stats.children) stats.children.forEach(strip);
-	}
-
-	strip(jsonStats);
-
-	return writeFile(outputPath, JSON.stringify(jsonStats)).then(() => {
-		process.stdout.write('\nWebpack output stats generated.\n\n');
-		process.stdout.write('You can upload your stats.json to:\n');
-		process.stdout.write(
-			'- https://chrisbateman.github.io/webpack-visualizer/\n'
-		);
-		process.stdout.write('- https://webpack.github.io/analyse/\n');
-	});
-}
-
 function allFields(stats, field, fields = [], name = null) {
 	const info = stats.toJson({
 		errors: true,
@@ -172,16 +140,6 @@ function allFields(stats, field, fields = [], name = null) {
 	return fields;
 }
 
-const keysToNormalize = [
-	'issuer',
-	'issuerName',
-	'identifier',
-	'name',
-	'module',
-	'moduleName',
-	'moduleIdentifier',
-];
-
 /** Removes all loaders from any resource identifiers found in a string */
 function stripLoaderPrefix(str) {
 	if (typeof str === 'string') {
@@ -208,24 +166,6 @@ function replaceAll(str, find, replace) {
 	return s + str.substring(index);
 }
 
-function stripLoaderFromModuleNames(m) {
-	for (let key in m) {
-		if (
-			Object.prototype.hasOwnProperty.call(m, key) &&
-			m[key] != null &&
-			~keysToNormalize.indexOf(key)
-		) {
-			m[key] = stripLoaderPrefix(m[key]);
-		}
-	}
-
-	if (m.reasons) {
-		m.reasons.forEach(stripLoaderFromModuleNames);
-	}
-
-	return m;
-}
-
 /**
  * @param {boolean} isProd
  */
@@ -247,5 +187,3 @@ module.exports = function (argv, isProd) {
 
 	return (isProd ? prodBuild : devBuild)(config, env);
 };
-
-module.exports.writeJsonStats = writeJsonStats;

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

@@ -12,7 +12,6 @@ const CrittersPlugin = require('critters-webpack-plugin');
 const renderHTMLPlugin = require('./render-html-plugin');
 const baseConfig = require('./webpack-base-config');
 const { InjectManifest } = require('workbox-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const RefreshPlugin = require('@prefresh/webpack');
 const { normalizePath, warn } = require('../../util');
 const OptimizePlugin = require('optimize-plugin');
@@ -191,7 +190,7 @@ function prodBuild(config) {
 		},
 	};
 
-	if (config['inline-css']) {
+	if (config.inlineCss) {
 		prodConfig.plugins.push(
 			new CrittersPlugin({
 				preload: 'media',
@@ -206,16 +205,6 @@ function prodBuild(config) {
 		prodConfig.plugins.push(new BundleAnalyzerPlugin());
 	}
 
-	if (config.brotli) {
-		prodConfig.plugins.push(
-			new CompressionPlugin({
-				filename: '[path][base].br[query]',
-				algorithm: 'brotliCompress',
-				test: /(?<!legacy)\.js$/,
-			})
-		);
-	}
-
 	return prodConfig;
 }
 

packages/cli/tests/build.test.js

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { access, mkdir, readdir, readFile, rename, unlink, writeFile } =
+const { access, mkdir, readdir, readFile, rename, writeFile } =
 	require('fs').promises;
 const looksLike = require('html-looks-like');
 const { create, build, buildFast } = require('./lib/cli');
@@ -172,20 +172,6 @@ describe('preact build', () => {
 			expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(false);
 		});
 
-		it('--json', async () => {
-			let dir = await subject('minimal');
-
-			await buildFast(dir, { json: true });
-			expect(await access(join(dir, 'stats.json'))).toBeUndefined();
-			// Need to clean up manually as it is placed in project root
-			await unlink(join(dir, 'stats.json'));
-
-			await buildFast(dir, { json: false });
-			await expect(access(join(dir, 'stats.json'))).rejects.toThrow(
-				'no such file or directory'
-			);
-		});
-
 		it('--template', async () => {
 			let dir = await subject('custom-template');
 
@@ -239,14 +225,14 @@ describe('preact build', () => {
 			).toBeUndefined();
 		});
 
-		it('--inline-css', async () => {
+		it('--inlineCss', async () => {
 			let dir = await subject('minimal');
 
-			await buildFast(dir, { 'inline-css': true });
+			await buildFast(dir, { inlineCss: true });
 			let head = await getHead(dir);
 			expect(head).toMatch('<style>h1{color:red}</style>');
 
-			await buildFast(dir, { 'inline-css': false });
+			await buildFast(dir, { inlineCss: false });
 			head = await getOutputFile(dir, 'index.html');
 			expect(head).not.toMatch(/<style>[^<]*<\/style>/);
 		});

packages/cli/tests/lib/cli.js

@@ -24,7 +24,7 @@ const build = (exports.build = async function (cwd, options) {
 		config: 'preact.config.js',
 		prerender: true,
 		prerenderUrls: 'prerender-urls.json',
-		'inline-css': true,
+		inlineCss: true,
 	};
 
 	await mkdir(join(cwd, 'node_modules'), { recursive: true }); // ensure exists, avoid exit()

yarn.lock

@@ -3628,14 +3628,6 @@ compressible@~2.0.16:
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
-compression-webpack-plugin@^9.2.0:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-9.2.0.tgz#57fd539d17c5907eebdeb4e83dcfe2d7eceb9ef6"
-  integrity sha512-R/Oi+2+UHotGfu72fJiRoVpuRifZT0tTC6UqFD/DUo+mv8dbOow9rVOuTvDv5nPPm3GZhHL/fKkwxwIHnJ8Nyw==
-  dependencies:
-    schema-utils "^4.0.0"
-    serialize-javascript "^6.0.0"
-
 compression@^1.7.4:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"