v4 (#1647)

* Chore: Updating html-webpack-plugin to v4 (#1608)

* chore: Correcting changeset

* feat: webpack v5 (#1645)

* feat: webpack-v5

* test: Update tests

* docs: Updating docs to reflect changes

* chore: Removing optimize-plugin local patch

* refactor: Determine CSS module by filename, not directory (#1714)

* refactor: Determine CSS module by filename, not directory

* docs: Adding changeset

* refactor: Project creation pull from templates 'main' branch

* test: Updating tests

* revert: Accidentally removed log message

* refactor: Extracting project creation out to own package (#1708)

* refactor: Extracting out project creation to own package

* docs: Adding changeset

* refactor: Misc edits to common deps & workspace helper scripts

* test: Fixing 'create' test suite

* ci: Increase minimum Node version

* chore: Fix typos

* docs: Update ReadMe instructions

* chore: Better (and untaken) package name

* docs: Update changeset

* test: Update 'create' test suite & build output hashes

* docs: Expounding upon changeset

* refactor: Drop Preact 8 support (#1716)

* refactor: Drops support for Preact v8

* docs: Adding changeset

* refactor: Switch to automatic runtime JSX transform (#1725)

* refactor: Switch over to automatic runtime transform for JSX

* test: Removing `h` imports from test suite

* docs: Adding changeset

* docs: Adding readme for create-cli (#1728)

* docs: Adding readme for create-cli

* feat: Initial publish

* fix: Correcting broken readme links

* refactor: Disable hashing ssr-build's css (#1733)

* refactor: Disable hashing ssr-build's css

* docs: Adding changeset

* test: Fix unrelated change from altered template

* refactor: Remove `--preload` flag (#1737)

* refactor: Removes `--preload` flag & functionality

* docs: Adding changeset

* docs: Updating readme for removal of preload

* refactor: Separate internal concepts of config and env (#1734)

* refactor: Separate internal concepts of config and env

* docs: Adding changeset

* refactor: prune flags (#1752)

* refactor: Revise inconsistent, unused, and deprecated flags

* docs: Adding changeset

* feat: Improved errors and warnings (#1758)

* refactor: Better root error handling

* refactor: Switch prerender plugin to be async for error gen

* refactor: Simplify & improve compilation messages

* refactor: Bump Node version, remove `src` arg in build & watch, and misc housekeeping (#1753)

* refactor: Drop rimraf for built-in fs.rm

* refactor: Drop src argument in build & watch cmds

* refactor: Extract info cmd from CLI entrypoint

* refactor: Remove update-notifier

* refactor: Switch from fs.promises to fs/promises

* docs: Adding changeset

* refactor: Move EJS into user templates (`template.html`) (#1768)

* refactor: Merging EJS templates and switcing preferred template extension to .ejs

* test: Fixing test suite to reflect latest changes

* chore: Cleaning

* docs: Updating ReadMe

* docs: Adding changeset

* refactor: Add error message for <% preact.(head|body)End %>

* chore: Publishing cli & create-cli

* Refactor: Enable Prefresh by Default (#1772)

* refactor: Enables HMR via Prefresh by default

* docs: Adding changeset

* test: Updating tests to reflect changes to templates

* refactor: Remove Critters (perhaps temporarily) (#1778)

* refactor: Remove Critters (perhaps temporarily)

* docs: Adding changeset

* chore: Publish v4.0.0-next.2

* refactor: Vendor Critters so that 7c811ac can be reverted (#1780)

* docs: Remove CLI beta note from readme

* docs: Bump minimum Node version listed in readme

.changeset/cuddly-ducks-reply.md

@@ -0,0 +1,6 @@
+---
+'@preact/async-loader': major
+'preact-cli': major
+---
+
+Drops support for Preact v8

.changeset/cyan-tomatoes-count.md

@@ -0,0 +1,11 @@
+---
+'preact-cli': major
+---
+
+Alters CSS Module detection to instead rely upon file names, rather than directory names.
+
+Treating all CSS files found within `routes/` and `components/` as CSS Modules was not obvious, nor did it offer an easy way to opt out (or in) without editing the Webpack config itself.
+
+This change makes is so that users can opt into CSS Modules from anywhere in their app by instead naming their CSS files according to the pattern `*.module.css`.
+
+Anyone using CSS Modules within `routes/` or `components/` will need to alter their CSS files to be `x.module.css`. If you've disabled CSS Modules in your `preact.config.js`, you can remove that bit of configuration and use file names to instead determine behavior.

.changeset/great-dryers-cross.md

@@ -0,0 +1,9 @@
+---
+'preact-cli': major
+---
+
+Reduces the `env` parameter of `preact.config.js` to only contain 3 values: `isProd`, `isWatch`, and `isServer`.
+
+Previously, `env` contained many semi-duplicated values (`production` and `isProd`, etc) as well as values that were unlikely to be of much use to many users (what flags were set, for instance). Because of this, the signal-to-noise ratio was rather low which we didn't like. As such, we reduced `env` down to the most basic environment info: what type of build is `preact-cli` doing and for which environement?
+
+If you customize your Webpack config using a `preact.config.js`, please be aware that you may need to update which values you consume from `env`.

.changeset/hungry-peas-look.md

@@ -0,0 +1,9 @@
+---
+'preact-cli': major
+---
+
+To increase transparency and user control over the `template.html`, `<% preact.headEnd %>` and `<% preact.bodyEnd %>` will no longer be supported; instead, users should directly adopt the EJS and keep it in their templates.
+
+In the past, these were abstracted away as they were a bit unwieldy; EJS might be unfamiliar with users and the way data was retrieved from `html-webpack-plugin` was somewhat less than elegant. However, this has much improved over the years and the abstraction only makes simple edits less than obvious, so it is no longer fulfilling it's purpose.
+
+New projects will have a `template.ejs` created in place of the old `template.html`, containing the full EJS template. For existing projects, you can copy [the default `template.ejs`](https://github.com/preactjs/preact-cli/blob/master/packages/cli/src/resources/template.ejs) into your project or adapt it as you wish.

.changeset/lucky-lizards-drive.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': major
+---
+
+HMR / the `--refresh` flag is now enabled by default in dev mode.

.changeset/metal-roses-flash.md

@@ -0,0 +1,7 @@
+---
+'preact-cli': major
+---
+
+Changes the JSX transform from 'classic' to the newer 'automatic'
+
+Users will no longer need to add `import { h } from 'preact'` in their components; it will be done automatically for them.

.changeset/poor-sloths-mate.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': major
+---
+
+Removes `--preload` flag and functionality from build command.

.changeset/popular-zebras-yell.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Disables hash in CSS file names for the SSR build

.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`.

.changeset/rude-walls-dress.md

@@ -0,0 +1,6 @@
+---
+'preact-cli': major
+'@preact/prerender-data-provider': major
+---
+
+Updates to use html-webpack-plugin v4

.changeset/sweet-snakes-cheat.md

@@ -0,0 +1,12 @@
+---
+'preact-cli': major
+---
+
+- Upgrades to Webpack v5
+  - Any custom configuration you do in your `preact.config.js` may need to be altered to account for this. Plugins may need replacements or different option formats.
+
+- `--esm` flag has been removed
+  - Dual output is now enabled by default in production builds.
+
+- `.babelrc` no longer overwrites matching keys
+  - Instead, the config will be merged in to the default. The default still takes precedence when there are conflicts, so you will still need to use your `preact.config.js` if you want to edit or remove default plugins or presets.

.changeset/tender-lamps-boil.md

@@ -0,0 +1,9 @@
+---
+'preact-cli': major
+---
+
+Minimum supported Node version for `preact-cli` is now v14.14.0. Please upgrade if you are on an older version.
+
+`build` and `watch` commands will no longer take an optional `src` directory argument; if you want to change the source directory from the default (`./src`), please instead use the `--src` flag (i.e., `--src differentSrc`).
+
+Upon rebuild, the output directory will no longer be outright deleted; instead, it will be emptied. This has the benefit of better supporting containerized environments where specific directories are mounted. Emptying the directory, rather than deleting and recreating it, ensures a stable reference for those tools.

.changeset/tiny-garlics-argue.md

@@ -0,0 +1,14 @@
+---
+'preact-cli': major
+'create-preact-cli': major
+---
+
+Extracts project creation functionality from `preact-cli` into `create-preact-cli`
+
+Setting up new `preact-cli` projects with `npx` is slow, as all dependencies of `preact-cli` would need to be installed, even though only a handful are used for project initialization. On the other hand, suggesting global installs is less than attractive due to NPM's poor default install location (requires `sudo`) and this can get out of sync over time.
+
+By extracting project initialization into its own package, we can provide much, much faster project setup times.
+
+To setup a new project, users will use `npm init preact-cli ...` or `yarn create preact-cli ...`.
+
+Additionally, the `--yarn` flag has been removed in favour of using the yarn initializer (`yarn create`).

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules
 **/tests/output
+**/tests/subjects/*/preact.config.js
 **/*.d.ts

.eslintrc

@@ -1,19 +1,12 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "prettier"
-  ],
+  "extends": ["eslint:recommended", "prettier"],
   "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true,
     "es6": true
   },
-  "plugins": [
-    "babel",
-    "react",
-    "prettier"
-  ],
+  "plugins": ["babel", "react", "prettier"],
   "settings": {
     "react": {
       "pragma": "h",
@@ -29,6 +22,13 @@
   "rules": {
     "no-console": 1,
     "no-empty": 0,
+    "no-unused-vars": [
+      2,
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
     "semi": 2,
     "keyword-spacing": 2,
     "require-atomic-updates": 0,

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
     timeout-minutes: 10
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -45,35 +45,29 @@
 
 ### Requirements
 
-> **Important**: [Node.js](https://nodejs.org/en/) >= v12 is required.
+> **Important**: [Node.js](https://nodejs.org/en/) >= v14.14 is required.
 
 ### Usage
 
 ```sh
-$ npx preact-cli create <template-name> <project-name>
-```
+$ npm init preact-cli <template-name> <project-name>
 
-> **Note**
-> You can try out the v4 beta by using either of the following initializers instead (and they should be much faster!):
-> ```
-> $ npm init preact-cli <template-name> <project-name>
->
-> $ yarn create preact-cli <template-name> <project-name>
-> ```
+$ yarn create preact-cli <template-name> <project-name>
+```
 
 Example:
 
 ```sh
-$ npx preact-cli create default my-project
+$ npm init preact-cli default my-project
 ```
 
-The above command pulls the template from [preactjs-templates/default], prompts for some information, and generates the project at `./my-project/`.
+The above command pulls the template from [preactjs-templates/default] and generates the project at `./my-project/`.
 
 ### Official Templates
 
 The purpose of official preact project templates are to provide opinionated development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to preact.js.
 
-All official project templates are repos in the [preactjs-templates organization]. When a new template is added to the organization, you will be able to run `npx preact-cli create <template-name> <project-name>` to use that template.
+All official project templates are repos in the [preactjs-templates organization]. When a new template is added to the organization, you will be able to run `npm init preact-cli <template-name> <project-name>` to use that template.
 
 Current available templates include:
 
@@ -89,50 +83,50 @@ Current available templates include:
 
 - [widget-typescript] - Widget template implemented in TypeScript
 
-> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npx preact-cli create <username>/<repository> <project-name>`
+> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npm init preact-cli <username>/<repository> <project-name>`
 
 ### CLI Options
 
+#### preact list
+
+Lists all the official preactjs-cli repositories
+
+```sh
+$ [npm init / yarn create] preact-cli list
+```
+
 #### preact create
 
 Create a project to quick start development.
 
 ```
-$ npx preact-cli create <template-name> <project-name>
+$ [npm init / yarn create] preact-cli <template-name> <project-name>
 
   --name        The application name.
   --cwd         A directory to use instead of $PWD.
   --force       Force option to create the directory for the new app  [boolean] [default: false]
-  --yarn        Installs dependencies with yarn.                      [boolean] [default: false]
   --git         Initialize version control using git.                 [boolean] [default: false]
   --install     Installs dependencies.                                [boolean] [default: true]
 ```
 
-Note: If you don't specify enough data to the `npx preact-cli create` command, it will prompt the required questions.
-
 #### preact build
 
 Create a production build
 
-You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-esm`, and `--no-inline-css`.
+You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw` and `--no-prerender`.
 
 ```
-$ preact build
+$ [npm run / yarn] preact build
 
     --src              Specify source directory  (default src)
     --dest             Specify output directory  (default build)
     --cwd              A directory to use instead of $PWD  (default .)
-    --esm              Builds ES-2015 bundles for your code  (default true)
     --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')
-    --preload          Adds preload tags to the document its assets  (default false)
-    --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 EJS or HTML template  (default 'src/template.ejs')
+    --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
@@ -143,22 +137,20 @@ $ preact build
 Spin up a development server with multiple features like `hot-module-replacement`, `module-watcher`
 
 ```
-$ preact watch
+$ [npm run / yarn] preact watch
 
     --src              Specify source directory  (default src)
     --cwd              A directory to use instead of $PWD  (default .)
-    --esm              Builds ES-2015 bundles for your code  (default false)
     --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
     --cacert           Path to optional CA certificate override
     --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 (default 'src/template.html')
+    --template         Path to custom EJS or HTML template  (default 'src/template.ejs')
     --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)
@@ -171,18 +163,14 @@ Note:
 1. You can run dev server using `HTTPS` then you can use the following `HTTPS=true preact watch`
 2. You can run the dev server on a different port using `PORT=8091 preact watch`
 
-#### preact list
+#### preact info
 
-Lists all the official preactjs-cli repositories
+Prints debugging information concerning the local environment.
 
 ```sh
-$ preact list
+$ [npm run / yarn] preact info
 ```
 
-#### preact info
-
-Prints debugging information concerning the local environment.
-
 ### 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.
@@ -200,29 +188,29 @@ To make customizing your configuration easier, preact-cli supports plugins. Visi
 
 #### Browserslist
 
-You may customize your list of supported browser versions by declaring a [`"browserslist"`] key within your `package.json`. Changing these values will modify your JavaScript (via [`@babel/preset-env`]) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
+You may customize your list of supported browser versions by declaring a [`"browserslist"`] key within your `package.json`. Changing these values will modify your legacy JavaScript (via [`@babel/preset-env`]) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
 
 By default, `preact-cli` emulates the following config:
 
 > `package.json`
 
 ```json
 {
-	"browserslist": ["> 0.25%", "IE >= 9"]
+	"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead"]
 }
 ```
 
 #### Babel
 
 To customize Babel, you have two options:
 
-1. You may create a [`.babelrc`] file in your project's root directory. Any settings you define here will overwrite matching config-keys within [Preact CLI preset]. For example, if you pass a `"plugins"` object, it will replace & reset all Babel plugins that Preact CLI defaults to.
+1. You may create a [`.babelrc`] file in your project's root directory, or use the `--babelConfig` path to point at any valid [Babel config file]. Any settings you define here will be merged into the [Preact CLI preset]. For example, if you pass a `"plugins"` object containing different plugins from those already in use, they will simply be added on top of the existing config. If there are conflicts, you'll want to look into option 2, as the default will take precedence.
 
-2. If you'd like to modify or add to the existing Babel config, you must use a `preact.config.js` file. Visit the [Webpack](#webpack) section for more info, or check out the [Customize Babel] example!
+2. If you'd like to modify the existing Babel config you must use a `preact.config.js` file. Visit the [Webpack](#webpack) section for more info, or check out the [Customize Babel] example!
 
 #### Webpack
 
-To customize preact-cli create a `preact.config.js` or a `preact.config.json` file.
+To customize Preact-CLI's Webpack config, create a `preact.config.js` or a `preact.config.json` file:
 
 > `preact.config.js`
 
@@ -306,18 +294,15 @@ export default () => {
 
 #### Template
 
-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/src/resources/template.html) and it's going to be enough for the majority of cases.
+To customize the HTML document that your app uses, edit the `template.ejs` file in your app's source directory.
 
-If you want to customise your template you can pass a custom template with the `--template` flag.
+[EJS](https://ejs.dev) is a simple templating language that lets you generate HTML markup with plain JavaScript. Alongside `html-webpack-plugin`, you're able to conditionally add HTML, access your bundles and assets, and link to external content if you wish. The default we provide on project initialization should fit the majority of use cases very well, but feel free to customize!
 
-The `--template` flag is available on the `build` and `watch` commands.
+You can customize the location of your template with the `--template` flag on the `build` and `watch` commands:
 
 ```sh
-preact build --template src/template.html
-preact watch --template src/template.html
+preact build --template renamed-src/template.ejs
+preact watch --template template.ejs
 ```
 
 ### Using CSS preprocessors
@@ -410,9 +395,9 @@ Automatic code splitting is applied to all JavaScript and TypeScript files in th
 [preact]: https://github.com/preactjs/preact
 [webpackconfighelpers]: docs/webpack-helpers.md
 [`.babelrc`]: https://babeljs.io/docs/usage/babelrc
+[babel config file]: https://babeljs.io/docs/en/config-files
 [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