From 19cdf3e30f95c2472b70b34c411b0f88890b0aed Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Tue, 13 Dec 2022 01:41:46 -0600
Subject: [PATCH] refactor: prune flags (#1752)
* refactor: Revise inconsistent, unused, and deprecated flags
* docs: Adding changeset
---
.changeset/quiet-eels-fix.md | 5 ++
README.md | 9 +--
packages/cli/package.json | 1 -
packages/cli/src/commands/build.js | 6 +-
packages/cli/src/commands/watch.js | 4 --
packages/cli/src/index.js | 9 ++-
packages/cli/src/lib/webpack/run-webpack.js | 62 -------------------
.../src/lib/webpack/webpack-client-config.js | 13 +---
packages/cli/tests/build.test.js | 22 ++-----
packages/cli/tests/lib/cli.js | 2 +-
yarn.lock | 8 ---
11 files changed, 19 insertions(+), 122 deletions(-)
create mode 100644 .changeset/quiet-eels-fix.md
diff --git a/.changeset/quiet-eels-fix.md b/.changeset/quiet-eels-fix.md
new file mode 100644
index 000000000..335af1304
--- /dev/null
+++ b/.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`.
diff --git a/README.md b/README.md
index 2cec29c9d..8a57f2dab 100644
--- a/README.md
+++ b/README.md
@@ -123,13 +123,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
@@ -147,7 +145,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
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 54af9aa95..dce253c5f 100644
--- a/packages/cli/package.json
+++ b/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",
diff --git a/packages/cli/src/commands/build.js b/packages/cli/src/commands/build.js
index f1d2d3c87..c103160b4 100644
--- a/packages/cli/src/commands/build.js
+++ b/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);
};
diff --git a/packages/cli/src/commands/watch.js b/packages/cli/src/commands/watch.js
index 1529b8822..79b3f3049 100644
--- a/packages/cli/src/commands/watch.js
+++ b/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);
diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
index dc0601c37..0815c8b75 100755
--- a/packages/cli/src/index.js
+++ b/packages/cli/src/index.js
@@ -39,7 +39,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")'
@@ -55,8 +54,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);
@@ -69,9 +67,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")'
@@ -112,6 +108,9 @@ prog
});
prog.parse(process.argv, {
+ alias: {
+ inlineCss: ['inline-css'],
+ },
unknown: arg => {
const cmd = process.argv[2];
error(
diff --git a/packages/cli/src/lib/webpack/run-webpack.js b/packages/cli/src/lib/webpack/run-webpack.js
index 3733fd2c6..95ba62bf5 100644
--- a/packages/cli/src/lib/webpack/run-webpack.js
+++ b/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');
@@ -116,37 +115,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,
@@ -171,16 +139,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') {
@@ -207,24 +165,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
*/
@@ -246,5 +186,3 @@ module.exports = function (argv, isProd) {
return (isProd ? prodBuild : devBuild)(config, env);
};
-
-module.exports.writeJsonStats = writeJsonStats;
diff --git a/packages/cli/src/lib/webpack/webpack-client-config.js b/packages/cli/src/lib/webpack/webpack-client-config.js
index 9573b94e4..adebbab5b 100644
--- a/packages/cli/src/lib/webpack/webpack-client-config.js
+++ b/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');
@@ -198,7 +197,7 @@ function prodBuild(config) {
},
};
- if (config['inline-css']) {
+ if (config.inlineCss) {
prodConfig.plugins.push(
new CrittersPlugin({
preload: 'media',
@@ -213,16 +212,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: /(? {
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('');
- await buildFast(dir, { 'inline-css': false });
+ await buildFast(dir, { inlineCss: false });
head = await getOutputFile(dir, 'index.html');
expect(head).not.toMatch(/