chore: Misc cleaning (#1613)

Author: rschristian

.changeset/unlucky-brooms-rule.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Removing old & non-functional config helper `setHtmlTemplate`

README.md

@@ -13,7 +13,6 @@
   - [preact watch](#preact-watch)
   - [preact list](#preact-list)
   - [preact info](#preact-info)
-- [Deploying](#deploying)
 - [Pre-rendering](#pre-rendering)
 - [Custom Configuration](#custom-configuration)
   - [Plugins](#plugins)
@@ -25,6 +24,8 @@
 - [Using CSS preprocessors](#using-css-preprocessors)
   - [SASS](#sass)
   - [LESS](#less)
+- [Using Environment Variables](#using-environment-variables)
+- [Route-Based Code Splitting](#route-based-code-splitting)
 
 ### Features
 
@@ -44,7 +45,7 @@
 
 ### Requirements
 
-> **Important**: [Node.js](https://nodejs.org/en/) > V8.x and npm 5.2+ is a minimum requirement.
+> **Important**: [Node.js](https://nodejs.org/en/) >= v12 is required.
 
 ### Usage
 
@@ -148,7 +149,7 @@ $ preact watch
     --prerender        Pre-render static content on first run
     --prerenderUrls    Path to pre-rendered routes config  (default prerender-urls.json)
     --template         Path to custom HTML template
-    --refresh          Will use [`Preact-refresh`](https://github.com/JoviDeCroock/preact-refresh) to do hot-reloading
+    --refresh          Enables experimental preact-refresh functionality
     -c, --config       Path to custom CLI config  (default preact.config.js)
     -H, --host         Set server hostname  (default 0.0.0.0)
     -p, --port         Set server port  (default 8080)
@@ -172,18 +173,6 @@ $ preact list
 
 Prints debugging information concerning the local environment.
 
-### Deploying
-
-```sh
-# create a production build:
-npm run build
-
-# generate configuration in Firebase Hosting format:
-npm run serve -- --server config
-
-# Copy your static files to a server!
-```
-
 ### Pre-rendering
 
 Preact CLI in order to follow [PRPL] pattern renders initial route (`/`) into generated static `index.html` - this ensures that users get to see your page before any JavaScript is run, and thus providing users with slow devices or poor connection your website's content much faster.
@@ -308,7 +297,7 @@ module.exports = [
 
 #### Template
 
-A template is used to render your page by [EJS](https://ejs.co/).  
+A template is used to render your page by [EJS](https://ejs.co/).
 You can uses the data of `prerenderUrls` which does not have `title`, using `htmlWebpackPlugin.options.CLI_DATA.preRenderData` in EJS.
 
 The default one is visible [here](packages/cli/lib/resources/template.html) and it's going to be enough for the majority of cases.
@@ -352,36 +341,6 @@ export default {
 
 If you'd like to use these variables in your application, you can use the [DefinePlugin] config from our recipes wiki.
 
-[promise]: https://npm.im/promise-polyfill
-[fetch]: https://github.com/developit/unfetch
-[preact]: https://github.com/preactjs/preact
-[webpackconfighelpers]: docs/webpack-helpers.md
-[`.babelrc`]: https://babeljs.io/docs/usage/babelrc
-[simple]: https://github.com/preactjs-templates/simple
-[`"browserslist"`]: https://github.com/ai/browserslist
-[```.babelrc```]: https://babeljs.io/docs/usage/babelrc
-[default]: https://github.com/preactjs-templates/default
-[workbox]: https://developers.google.com/web/tools/workbox
-[preact-router]: https://github.com/preactjs/preact-router
-[material]: https://github.com/preactjs-templates/material
-[netlify]: https://github.com/preactjs-templates/netlify
-[typescript]: https://github.com/preactjs-templates/typescript
-[widget]: https://github.com/preactjs-templates/widget
-[plugins wiki]: https://github.com/preactjs/preact-cli/wiki/Plugins
-[preactjs-templates organization]: https://github.com/preactjs-templates
-[preactjs-templates/default]: https://github.com/preactjs-templates/default
-[recipes wiki]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes
-[prpl]: https://developers.google.com/web/fundamentals/performance/prpl-pattern
-[`babel-preset-env`]: https://github.com/babel/babel-preset-env#targetsbrowsers
-[proof]: https://googlechrome.github.io/lighthouse/viewer/?gist=142af6838482417af741d966e7804346
-[preact cli preset]: https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/babel-config.js
-[service workers]: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
-[customize babel]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#customising-babel-options-using-loader-helpers
-[`async!`]: https://github.com/preactjs/preact-cli/blob/1.4.1/examples/full/src/components/app.js#L7
-[sass]: https://sass-lang.com
-[less]: http://lesscss.org
-[defineplugin]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#use-environment-variables-in-your-application
-
 ### Route-Based Code Splitting
 
 "Route" components are automatically code-splitted at build time to create smaller bundles and avoid loading more code than is needed by each page. This works by intercepting imports for route components with an [async loader](https://github.com/preactjs/preact-cli/tree/master/packages/async-loader), which returns a lightweight wrapper component that handles code splitting seamlessly.
@@ -411,7 +370,7 @@ Automatic code splitting is applied to all JavaScript and TypeScript files in th
 </td></tr>
 </tbody></table>
 
-> **Note**:  
+> **Note**:
 > Automatic code splitting **only** supports default exports, not named exports:
 >
 > ```diff
@@ -420,3 +379,32 @@ Automatic code splitting is applied to all JavaScript and TypeScript files in th
 > ```
 >
 > This is an intentional limitation that ensures effective code splitting. For components that need named exports, place them in a directory that doesn't trigger automatic code splitting. You can then manually code-split the default export by re-exporting it from `routes/` or importing it with the `"async!"` prefix.
+
+[promise]: https://npm.im/promise-polyfill
+[fetch]: https://github.com/developit/unfetch
+[preact]: https://github.com/preactjs/preact
+[webpackconfighelpers]: docs/webpack-helpers.md
+[`.babelrc`]: https://babeljs.io/docs/usage/babelrc
+[simple]: https://github.com/preactjs-templates/simple
+[`"browserslist"`]: https://github.com/ai/browserslist
+[```.babelrc```]: https://babeljs.io/docs/usage/babelrc
+[default]: https://github.com/preactjs-templates/default
+[workbox]: https://developers.google.com/web/tools/workbox
+[preact-router]: https://github.com/preactjs/preact-router
+[netlify]: https://github.com/preactjs-templates/netlify
+[typescript]: https://github.com/preactjs-templates/typescript
+[widget]: https://github.com/preactjs-templates/widget
+[plugins wiki]: https://github.com/preactjs/preact-cli/wiki/Plugins
+[preactjs-templates organization]: https://github.com/preactjs-templates
+[preactjs-templates/default]: https://github.com/preactjs-templates/default
+[recipes wiki]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes
+[prpl]: https://developers.google.com/web/fundamentals/performance/prpl-pattern
+[`babel-preset-env`]: https://github.com/babel/babel-preset-env#targetsbrowsers
+[proof]: https://googlechrome.github.io/lighthouse/viewer/?gist=142af6838482417af741d966e7804346
+[preact cli preset]: https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/babel-config.js
+[service workers]: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
+[customize babel]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#customising-babel-options-using-loader-helpers
+[`async!`]: https://github.com/preactjs/preact-cli/blob/1.4.1/examples/full/src/components/app.js#L7
+[sass]: https://sass-lang.com
+[less]: http://lesscss.org
+[defineplugin]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#use-environment-variables-in-your-application

docs/webpack-helpers.md

@@ -118,15 +118,6 @@ helpers.getPluginsByType(config, webpack.optimize.CommonsChunkPlugin);
 
 Returns **[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[PluginWrapper](#pluginwrapper)>**
 
-### setHtmlTemplate
-
-Sets template used by HtmlWebpackPlugin.
-
-**Parameters**
-
-- `config` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** [webpack config](https://webpack.js.org/configuration/#options).
-- `template` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** template path. See [HtmlWebpackPlugin docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md).
-
 ## PluginWrapper
 
 Wrapper around webpack's [plugin](https://webpack.js.org/configuration/plugins/#plugins).

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

@@ -1,6 +1,5 @@
 const { resolve } = require('path');
 const webpack = require('webpack');
-const { statSync } = require('fs');
 const { stat } = require('fs').promises;
 const { error } = require('../../util');
 
@@ -274,34 +273,6 @@ class WebpackConfigHelpers {
 	getPluginsByType(config, type) {
 		return this.getPlugins(config).filter(w => w.plugin instanceof type);
 	}
-
-	/**
-	 * Sets template used by HtmlWebpackPlugin.
-	 *
-	 * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
-	 * @param {string} template - template path. See [HtmlWebpackPlugin docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md).
-	 *
-	 * @memberof WebpackConfigHelpers
-	 */
-	setHtmlTemplate(config, template) {
-		let isPath;
-		try {
-			statSync(template);
-			isPath = true;
-		} catch (e) {}
-
-		let templatePath = isPath
-			? `!!${require.resolve('ejs-loader')}?esModule=false!${resolve(
-					this._cwd,
-					template
-			  )}`
-			: template;
-		let { plugin: htmlWebpackPlugin } = this.getPluginsByName(
-			config,
-			'HtmlWebpackPlugin'
-		)[0];
-		htmlWebpackPlugin.options.template = templatePath;
-	}
 }
 
 /**

packages/cli/tests/build.snapshot.js

@@ -9,10 +9,6 @@ const images = require('./images/build');
 const { promisify } = require('util');
 const glob = promisify(require('glob').glob);
 
-// TODO
-// const ours = ['empty', 'full', 'simple', 'root'];
-const ours = ['default'];
-
 const prerenderUrlFiles = [
 	'prerender-urls.json',
 	'prerender-urls.js',
@@ -50,26 +46,24 @@ function testMatch(src, tar) {
 }
 
 describe('preact build', () => {
-	ours.forEach(key => {
-		it(`builds the '${key}' output`, async () => {
-			let dir = await create(key);
+	it(`builds the 'default' template`, async () => {
+		let dir = await create('default');
 
-			await build(dir);
-			dir = join(dir, 'build');
+		await build(dir);
+		dir = join(dir, 'build');
 
-			let output = await snapshot(dir);
-			testMatch(output, images[key]);
-		});
+		let output = await snapshot(dir);
+		testMatch(output, images.default);
+	});
 
-		it(`builds the '${key}' output with esm`, async () => {
-			let dir = await create(key);
+	it(`builds the 'default' template with esm`, async () => {
+		let dir = await create('default');
 
-			await build(dir, { esm: true });
-			dir = join(dir, 'build');
+		await build(dir, { esm: true });
+		dir = join(dir, 'build');
 
-			let output = await snapshot(dir);
-			testMatch(output, images[key + '-esm']);
-		});
+		let output = await snapshot(dir);
+		testMatch(output, images['default-esm']);
 	});
 
 	it('should use SASS styles', async () => {

packages/cli/tests/build.test.js

@@ -4,20 +4,15 @@ const { create } = require('./lib/cli');
 const { expand } = require('./lib/utils');
 const snapshots = require('./images/create');
 
-// TODO: Move all `examples/` to `preactjs-templates`
-const ours = ['default'];
-
 describe('preact create', () => {
-	ours.forEach(key => {
-		it(`scaffolds the '${key}' official template`, async () => {
-			let dir = await create(key);
-
-			let output = await expand(dir).then(arr => {
-				return arr.map(x => relative(dir, x));
-			});
+	it(`scaffolds the 'default' official template`, async () => {
+		let dir = await create('default');
 
-			expect(output.sort()).toEqual(snapshots[key]);
+		let output = await expand(dir).then(arr => {
+			return arr.map(x => relative(dir, x));
 		});
+
+		expect(output.sort()).toEqual(snapshots.default);
 	});
 
 	it(`should use template.html from the github repo`, async () => {
@@ -38,9 +33,10 @@ describe('preact create', () => {
 		expect(template.includes('apple-touch-icon')).toEqual(true);
 	});
 
-	// it('should fail given an invalid name', async () => {
-	// 	const exit = jest.spyOn(process, 'exit');
-	// 	await create('default', '*()@!#!$-invalid-name');
-	// 	expect(exit).toHaveBeenCalledWith(1);
-	// });
+	it('should fail given an invalid name', async () => {
+		const exit = jest.spyOn(process, 'exit').mockImplementation(() => {});
+		await create('simple', '*()@!#!$-Invalid-Name');
+
+		expect(exit).toHaveBeenCalledWith(1);
+	});
 });

packages/cli/tests/create.test.js

@@ -1,7 +1,6 @@
 const path = require('path');
 
 exports.default = [
-	// '.babelrc',
 	'.gitignore',
 	'package.json',
 	'README.md',