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 4ea10ff84..ca088b721 100644 --- a/README.md +++ b/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 diff --git a/packages/cli/package.json b/packages/cli/package.json index 6e7361721..0578e919e 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 98bcdd1fe..81a6962b8 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 6058d2c95..6b4075dde 100755 --- a/packages/cli/src/index.js +++ b/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( diff --git a/packages/cli/src/lib/webpack/render-html-plugin.js b/packages/cli/src/lib/webpack/render-html-plugin.js index 4f141ce23..ec5ab737d 100644 --- a/packages/cli/src/lib/webpack/render-html-plugin.js +++ b/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, diff --git a/packages/cli/src/lib/webpack/run-webpack.js b/packages/cli/src/lib/webpack/run-webpack.js index 6354c2d59..3bc2fcdb7 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'); @@ -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; diff --git a/packages/cli/src/lib/webpack/webpack-client-config.js b/packages/cli/src/lib/webpack/webpack-client-config.js index c4061c649..d77668858 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'); @@ -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: /(? { 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(/