chore: Misc cleaning

preactjs · Feb 7, 2022 · 3488f90 · 3488f90
1 parent 84dba1a
commit 3488f90
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 213 deletions.
diff --git a/packages/cli/lib/lib/output-hooks.js b/packages/cli/lib/lib/output-hooks.js
diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js
@@ -29,7 +29,7 @@ const cleanFilename = name =>
  * @returns {Promise<import('webpack').Configuration>}
  */
 async function clientConfig(env) {
-	const { isProd, source, src, cwd /*, port? */ } = env;
+	const { source, src, cwd } = env;
 	const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd);
 	const asyncLoader = IS_SOURCE_PREACT_X_OR_ABOVE
 		? require.resolve('@preact/async-loader')
@@ -84,7 +84,7 @@ async function clientConfig(env) {
 		// copy any static files
 		existsSync(source('assets')) && { from: 'assets', to: 'assets' },
 		// copy sw-debug
-		!isProd && {
+		!env.isProd && {
 			from: resolve(__dirname, '../../resources/sw-debug.js'),
 			to: 'sw-debug.js',
 		},
@@ -100,7 +100,7 @@ async function clientConfig(env) {
 		output: {
 			path: env.dest,
 			publicPath: '/',
-			filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
+			filename: env.isProd ? '[name].[chunkhash:5].js' : '[name].js',
 			chunkFilename: '[name].chunk.[chunkhash:5].js',
 		},
 
@@ -143,6 +143,8 @@ async function clientConfig(env) {
 		plugins: [
 			new webpack.DefinePlugin({
 				'process.env.ES_BUILD': false,
+				'process.env.ADD_SW': env.sw,
+				'process.env.PRERENDER': env.prerender,
 			}),
 			new PushManifestPlugin(env),
 			...(await renderHTMLPlugin(env)),
@@ -156,14 +158,12 @@ async function clientConfig(env) {
 	};
 }
 
-function getBabelEsmPlugin(config) {
+function getBabelEsmPlugin(env) {
 	const esmPlugins = [];
-	if (config.esm) {
+	if (env.esm) {
 		esmPlugins.push(
 			new BabelEsmPlugin({
-				filename: config.isProd
-					? '[name].[chunkhash:5].esm.js'
-					: '[name].esm.js',
+				filename: env.isProd ? '[name].[chunkhash:5].esm.js' : '[name].esm.js',
 				chunkFilename: '[name].chunk.[chunkhash:5].esm.js',
 				excludedPlugins: ['BabelEsmPlugin', 'InjectManifest'],
 				beforeStartExecution: plugins => {
@@ -196,7 +196,7 @@ function getBabelEsmPlugin(config) {
 /**
  * @returns {import('webpack').Configuration}
  */
-function isProd(config) {
+function isProd(env) {
 	let limit = 200 * 1000; // 200kb
 	const prodConfig = {
 		performance: Object.assign(
@@ -205,14 +205,12 @@ function isProd(config) {
 				maxAssetSize: limit,
 				maxEntrypointSize: limit,
 			},
-			config.pkg.performance
+			env.pkg.performance
 		),
 
 		plugins: [
 			new webpack.DefinePlugin({
-				'process.env.ADD_SW': config.sw,
-				'process.env.ESM': config.esm,
-				'process.env.PRERENDER': config.prerender,
+				'process.env.ESM': env.esm,
 			}),
 			new SizePlugin(),
 		],
@@ -252,7 +250,7 @@ function isProd(config) {
 		},
 	};
 
-	if (config['inline-css']) {
+	if (env['inline-css']) {
 		prodConfig.plugins.push(
 			new CrittersPlugin({
 				preload: 'media',
@@ -263,11 +261,11 @@ function isProd(config) {
 		);
 	}
 
-	if (config.analyze) {
+	if (env.analyze) {
 		prodConfig.plugins.push(new BundleAnalyzerPlugin());
 	}
 
-	if (config.brotli) {
+	if (env.brotli) {
 		prodConfig.plugins.push(
 			new CompressionPlugin({
 				filename: '[path].br[query]',
@@ -283,21 +281,17 @@ function isProd(config) {
 /**
  * @returns {import('webpack').Configuration}
  */
-function isDev(config) {
-	const { cwd, src, refresh } = config;
+function isDev(env) {
+	const { cwd, src } = env;
 
 	return {
 		infrastructureLogging: {
 			level: 'info',
 		},
 		plugins: [
 			new webpack.NamedModulesPlugin(),
-			...(refresh ? [new RefreshPlugin()] : []),
-			new webpack.DefinePlugin({
-				'process.env.ADD_SW': config.sw,
-				'process.env.PRERENDER': config.prerender,
-			}),
-		],
+			env.refresh && new RefreshPlugin(),
+		].filter(Boolean),
 
 		devServer: {
 			hot: true,
@@ -312,9 +306,9 @@ function isDev(config) {
 					ignored: [resolve(cwd, 'build'), resolve(cwd, 'node_modules')],
 				},
 			},
-			https: config.https,
-			port: config.port,
-			host: process.env.HOST || config.host || '0.0.0.0',
+			https: env.https,
+			port: env.port,
+			host: process.env.HOST || env.host || '0.0.0.0',
 			allowedHosts: 'all',
 			historyApiFallback: true,
 			client: {

diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
@@ -1,13 +1,11 @@
 const { join } = require('path');
-const { existsSync } = require('fs');
+const { access, readdir } = require('fs').promises;
 const { readFile } = require('fs').promises;
 const looksLike = require('html-looks-like');
 const { create, build } = require('./lib/cli');
 const { snapshot } = require('./lib/utils');
 const { subject } = require('./lib/output');
 const images = require('./images/build');
-const { promisify } = require('util');
-const glob = promisify(require('glob').glob);
 const minimatch = require('minimatch');
 
 const prerenderUrlFiles = [
@@ -79,12 +77,17 @@ describe('preact build', () => {
 
 	it('should use custom `.babelrc`', async () => {
 		// app with custom .babelrc enabling async functions
-		let app = await subject('custom-babelrc');
+		let dir = await subject('custom-babelrc');
 
-		await build(app);
+		await build(dir);
 
-		const bundleFiles = await glob(`${app}/build/bundle.*.js`);
-		const transpiledChunk = await readFile(bundleFiles[0], 'utf8');
+		const bundleFile = (await readdir(`${dir}/build`)).find(file =>
+			/bundle\.\w{5}\.js$/.test(file)
+		);
+		const transpiledChunk = await readFile(
+			`${dir}/build/${bundleFile}`,
+			'utf8'
+		);
 
 		// when tragetting only last 1 chrome version, babel preserves
 		// arrow function. So checking for the delay function code from delay function in
@@ -183,8 +186,8 @@ describe('preact build', () => {
 		let dir = await subject('custom-webpack');
 		await build(dir);
 
-		let file = join(dir, 'build/bundle.js');
-		expect(existsSync(file)).toBe(true);
+		let stableOutput = join(dir, 'build/bundle.js');
+		expect(await access(stableOutput)).toBeUndefined();
 	});
 
 	it('should use custom `template.html`', async () => {
@@ -218,13 +221,13 @@ describe('preact build', () => {
 		let dir = await subject('static-root');
 		await build(dir);
 		let file = join(dir, 'build', '.htaccess');
-		expect(existsSync(file)).toBe(true);
+		expect(await access(file)).toBeUndefined();
 	});
 
-	it('should error out for invalid argument', async () => {
+	it('should error out for invalid CLI argument', async () => {
 		let dir = await subject('custom-template');
 		const mockExit = jest.spyOn(process, 'exit').mockImplementation(() => {});
-		expect(build(dir, { 'service-worker': false })).rejects.toEqual(
+		await expect(build(dir, { 'service-worker': false })).rejects.toEqual(
 			new Error('Invalid argument found.')
 		);
 		expect(mockExit).toHaveBeenCalledWith(1);

diff --git a/packages/cli/tests/client.test.js b/packages/cli/tests/client.test.js
@@ -22,31 +22,6 @@ describe('client-side tests', () => {
 		PORT = await getPort();
 	});
 
-	it.skip('should hydrate routes progressively.', async () => {
-		let dir = await subject('progressive-hydration');
-		await build(dir);
-		const server = getServer(join(dir, 'build'), PORT);
-
-		// let page = await loadPage(chrome, `http://127.0.0.1:${PORT}/`);
-		const page = await chrome.newPage();
-
-		page.on('console', consoleMessage => {
-			// eslint-disable-next-line
-			console[consoleMessage.type()](consoleMessage.text());
-		});
-
-		await page.goto(`http://127.0.0.1:${PORT}/`);
-
-		// await waitUntilExpression(page, `window.booted`);
-		await sleep(500);
-
-		const mutations = await page.evaluate('window.mutations');
-
-		expect(mutations).toHaveLength(0);
-
-		server.server.close();
-	});
-
 	it('should hydrate routes progressively with preact8.', async () => {
 		let dir = await subject('progressive-hydration-preact8');
 		await build(dir, {}, true);

diff --git a/packages/cli/tests/lib/cli.js b/packages/cli/tests/lib/cli.js
@@ -1,13 +1,16 @@
 const { join } = require('path');
-const { mkdirSync, symlinkSync } = require('fs');
+const { mkdir, symlink } = require('fs').promises;
 const cmd = require('../../lib/commands');
 const { tmpDir } = require('./output');
 const shell = require('shelljs');
 
 const root = join(__dirname, '../../../..');
 
-function linkPackage(name, from, to) {
-	symlinkSync(join(from, 'node_modules', name), join(to, 'node_modules', name));
+async function linkPackage(name, from, to) {
+	await symlink(
+		join(from, 'node_modules', name),
+		join(to, 'node_modules', name)
+	);
 }
 
 const argv = {
@@ -28,17 +31,18 @@ exports.create = async function (template, name) {
 	return dest;
 };
 
-exports.build = function (cwd, options, installNodeModules = false) {
+exports.build = async function (cwd, options, installNodeModules = false) {
 	if (!installNodeModules) {
-		mkdirSync(join(cwd, 'node_modules'), { recursive: true }); // ensure exists, avoid exit()
-		linkPackage('preact', root, cwd);
-		linkPackage('preact-render-to-string', root, cwd);
+		await mkdir(join(cwd, 'node_modules'), { recursive: true }); // ensure exists, avoid exit()
+		await linkPackage('preact', root, cwd);
+		await linkPackage('preact-render-to-string', root, cwd);
 	} else {
 		shell.cd(cwd);
 		shell.exec('npm i');
 	}
-	let opts = Object.assign({ cwd }, argv);
-	return cmd.build(argv.src, Object.assign({}, opts, options));
+
+	let opts = Object.assign({}, { cwd }, argv, options);
+	return await cmd.build(argv.src, opts);
 };
 
 exports.watch = function (cwd, port, host = '127.0.0.1') {

diff --git a/packages/cli/tests/subjects/progressive-hydration/index.js b/packages/cli/tests/subjects/progressive-hydration/index.js
diff --git a/packages/cli/tests/subjects/progressive-hydration/package.json b/packages/cli/tests/subjects/progressive-hydration/package.json