Skip to content

Commit 03b8f9d

Browse files
rschristianrschristian
authored
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
1 parent 544f543 commit 03b8f9d

File tree

129 files changed

+2970
-5081
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+2970
-5081
lines changed

‎.changeset/cuddly-ducks-reply.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@preact/async-loader': major
3+
'preact-cli': major
4+
---
5+
6+
Drops support for Preact v8

‎.changeset/cyan-tomatoes-count.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
Alters CSS Module detection to instead rely upon file names, rather than directory names.
6+
7+
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.
8+
9+
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`.
10+
11+
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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
Reduces the `env` parameter of `preact.config.js` to only contain 3 values: `isProd`, `isWatch`, and `isServer`.
6+
7+
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?
8+
9+
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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
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.
6+
7+
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.
8+
9+
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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
HMR / the `--refresh` flag is now enabled by default in dev mode.

‎.changeset/metal-roses-flash.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
Changes the JSX transform from 'classic' to the newer 'automatic'
6+
7+
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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
Removes `--preload` flag and functionality from build command.

‎.changeset/popular-zebras-yell.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-cli': patch
3+
---
4+
5+
Disables hash in CSS file names for the SSR build

‎.changeset/quiet-eels-fix.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
Removes `--json` & `--brotli` flags from `preact build`. Also removes `--rhl` alias for `--refresh` from `preact watch`.

‎.changeset/rude-walls-dress.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'preact-cli': major
3+
'@preact/prerender-data-provider': major
4+
---
5+
6+
Updates to use html-webpack-plugin v4

‎.changeset/sweet-snakes-cheat.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
- Upgrades to Webpack v5
6+
- 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.
7+
8+
- `--esm` flag has been removed
9+
- Dual output is now enabled by default in production builds.
10+
11+
- `.babelrc` no longer overwrites matching keys
12+
- 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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'preact-cli': major
3+
---
4+
5+
Minimum supported Node version for `preact-cli` is now v14.14.0. Please upgrade if you are on an older version.
6+
7+
`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`).
8+
9+
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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
'preact-cli': major
3+
'create-preact-cli': major
4+
---
5+
6+
Extracts project creation functionality from `preact-cli` into `create-preact-cli`
7+
8+
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.
9+
10+
By extracting project initialization into its own package, we can provide much, much faster project setup times.
11+
12+
To setup a new project, users will use `npm init preact-cli ...` or `yarn create preact-cli ...`.
13+
14+
Additionally, the `--yarn` flag has been removed in favour of using the yarn initializer (`yarn create`).

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
**/node_modules
22
**/tests/output
3+
**/tests/subjects/*/preact.config.js
34
**/*.d.ts

‎.eslintrc

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
{
2-
"extends": [
3-
"eslint:recommended",
4-
"prettier"
5-
],
2+
"extends": ["eslint:recommended", "prettier"],
63
"parser": "babel-eslint",
74
"env": {
85
"browser": true,
96
"node": true,
107
"es6": true
118
},
12-
"plugins": [
13-
"babel",
14-
"react",
15-
"prettier"
16-
],
9+
"plugins": ["babel", "react", "prettier"],
1710
"settings": {
1811
"react": {
1912
"pragma": "h",
@@ -29,6 +22,13 @@
2922
"rules": {
3023
"no-console": 1,
3124
"no-empty": 0,
25+
"no-unused-vars": [
26+
2,
27+
{
28+
"argsIgnorePattern": "^_",
29+
"varsIgnorePattern": "^_"
30+
}
31+
],
3232
"semi": 2,
3333
"keyword-spacing": 2,
3434
"require-atomic-updates": 0,

‎.github/workflows/ci.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
timeout-minutes: 10
1818
strategy:
1919
matrix:
20-
node-version: [12.x, 14.x]
20+
node-version: [14.x, 16.x]
2121

2222
steps:
2323
- uses: actions/checkout@v2

‎README.md

+37-52
Original file line numberDiff line numberDiff line change
@@ -45,35 +45,29 @@
4545

4646
### Requirements
4747

48-
> **Important**: [Node.js](https://nodejs.org/en/) >= v12 is required.
48+
> **Important**: [Node.js](https://nodejs.org/en/) >= v14.14 is required.
4949
5050
### Usage
5151

5252
```sh
53-
$ npx preact-cli create <template-name> <project-name>
54-
```
53+
$ npm init preact-cli <template-name> <project-name>
5554

56-
> **Note**
57-
> You can try out the v4 beta by using either of the following initializers instead (and they should be much faster!):
58-
> ```
59-
> $ npm init preact-cli <template-name> <project-name>
60-
>
61-
> $ yarn create preact-cli <template-name> <project-name>
62-
> ```
55+
$ yarn create preact-cli <template-name> <project-name>
56+
```
6357

6458
Example:
6559

6660
```sh
67-
$ npx preact-cli create default my-project
61+
$ npm init preact-cli default my-project
6862
```
6963

70-
The above command pulls the template from [preactjs-templates/default], prompts for some information, and generates the project at `./my-project/`.
64+
The above command pulls the template from [preactjs-templates/default] and generates the project at `./my-project/`.
7165

7266
### Official Templates
7367

7468
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.
7569

76-
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.
70+
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.
7771

7872
Current available templates include:
7973

@@ -89,50 +83,50 @@ Current available templates include:
8983

9084
- [widget-typescript] - Widget template implemented in TypeScript
9185

92-
> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npx preact-cli create <username>/<repository> <project-name>`
86+
> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npm init preact-cli <username>/<repository> <project-name>`
9387
9488
### CLI Options
9589

90+
#### preact list
91+
92+
Lists all the official preactjs-cli repositories
93+
94+
```sh
95+
$ [npm init / yarn create] preact-cli list
96+
```
97+
9698
#### preact create
9799

98100
Create a project to quick start development.
99101

100102
```
101-
$ npx preact-cli create <template-name> <project-name>
103+
$ [npm init / yarn create] preact-cli <template-name> <project-name>
102104
103105
--name The application name.
104106
--cwd A directory to use instead of $PWD.
105107
--force Force option to create the directory for the new app [boolean] [default: false]
106-
--yarn Installs dependencies with yarn. [boolean] [default: false]
107108
--git Initialize version control using git. [boolean] [default: false]
108109
--install Installs dependencies. [boolean] [default: true]
109110
```
110111

111-
Note: If you don't specify enough data to the `npx preact-cli create` command, it will prompt the required questions.
112-
113112
#### preact build
114113

115114
Create a production build
116115

117-
You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-esm`, and `--no-inline-css`.
116+
You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw` and `--no-prerender`.
118117

119118
```
120-
$ preact build
119+
$ [npm run / yarn] preact build
121120
122121
--src Specify source directory (default src)
123122
--dest Specify output directory (default build)
124123
--cwd A directory to use instead of $PWD (default .)
125-
--esm Builds ES-2015 bundles for your code (default true)
126124
--sw Generate and attach a Service Worker (default true)
127125
--babelConfig Path to custom Babel config (default .babelrc)
128-
--json Generate build stats for bundle analysis
129-
--template Path to custom HTML template (default 'src/template.html')
130-
--preload Adds preload tags to the document its assets (default false)
131-
--analyze Launch interactive Analyzer to inspect production bundle(s)
132126
--prerender Renders route(s) into generated static HTML (default true)
133127
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
134-
--brotli Adds brotli redirects to the service worker (default false)
135-
--inline-css Adds critical css to the prerendered markup (default true)
128+
--template Path to custom EJS or HTML template (default 'src/template.ejs')
129+
--analyze Launch interactive Analyzer to inspect production bundle(s) (default false)
136130
-c, --config Path to custom CLI config (default preact.config.js)
137131
-v, --verbose Verbose output
138132
-h, --help Displays this message
@@ -143,22 +137,20 @@ $ preact build
143137
Spin up a development server with multiple features like `hot-module-replacement`, `module-watcher`
144138

145139
```
146-
$ preact watch
140+
$ [npm run / yarn] preact watch
147141
148142
--src Specify source directory (default src)
149143
--cwd A directory to use instead of $PWD (default .)
150-
--esm Builds ES-2015 bundles for your code (default false)
151144
--clear Clear the console (default true)
152145
--sw Generate and attach a Service Worker (default false)
153146
--babelConfig Path to custom Babel config (default .babelrc)
154-
--json Generate build stats for bundle analysis
155147
--https Run server with HTTPS protocol
156148
--key Path to PEM key for custom SSL certificate
157149
--cert Path to custom SSL certificate
158150
--cacert Path to optional CA certificate override
159151
--prerender Pre-render static content on first run
160152
--prerenderUrls Path to pre-rendered routes config (default prerender-urls.json)
161-
--template Path to custom HTML template (default 'src/template.html')
153+
--template Path to custom EJS or HTML template (default 'src/template.ejs')
162154
--refresh Enables experimental preact-refresh functionality
163155
-c, --config Path to custom CLI config (default preact.config.js)
164156
-H, --host Set server hostname (default 0.0.0.0)
@@ -171,18 +163,14 @@ Note:
171163
1. You can run dev server using `HTTPS` then you can use the following `HTTPS=true preact watch`
172164
2. You can run the dev server on a different port using `PORT=8091 preact watch`
173165

174-
#### preact list
166+
#### preact info
175167

176-
Lists all the official preactjs-cli repositories
168+
Prints debugging information concerning the local environment.
177169

178170
```sh
179-
$ preact list
171+
$ [npm run / yarn] preact info
180172
```
181173

182-
#### preact info
183-
184-
Prints debugging information concerning the local environment.
185-
186174
### Pre-rendering
187175

188176
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
200188

201189
#### Browserslist
202190

203-
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.
191+
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.
204192

205193
By default, `preact-cli` emulates the following config:
206194

207195
> `package.json`
208196
209197
```json
210198
{
211-
"browserslist": ["> 0.25%", "IE >= 9"]
199+
"browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not dead"]
212200
}
213201
```
214202

215203
#### Babel
216204

217205
To customize Babel, you have two options:
218206

219-
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.
207+
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.
220208

221-
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!
209+
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!
222210

223211
#### Webpack
224212

225-
To customize preact-cli create a `preact.config.js` or a `preact.config.json` file.
213+
To customize Preact-CLI's Webpack config, create a `preact.config.js` or a `preact.config.json` file:
226214

227215
> `preact.config.js`
228216
@@ -306,18 +294,15 @@ export default () => {
306294

307295
#### Template
308296

309-
A template is used to render your page by [EJS](https://ejs.co/).
310-
You can uses the data of `prerenderUrls` which does not have `title`, using `htmlWebpackPlugin.options.CLI_DATA.preRenderData` in EJS.
311-
312-
The default one is visible [here](packages/cli/src/resources/template.html) and it's going to be enough for the majority of cases.
297+
To customize the HTML document that your app uses, edit the `template.ejs` file in your app's source directory.
313298

314-
If you want to customise your template you can pass a custom template with the `--template` flag.
299+
[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!
315300

316-
The `--template` flag is available on the `build` and `watch` commands.
301+
You can customize the location of your template with the `--template` flag on the `build` and `watch` commands:
317302

318303
```sh
319-
preact build --template src/template.html
320-
preact watch --template src/template.html
304+
preact build --template renamed-src/template.ejs
305+
preact watch --template template.ejs
321306
```
322307

323308
### Using CSS preprocessors
@@ -410,9 +395,9 @@ Automatic code splitting is applied to all JavaScript and TypeScript files in th
410395
[preact]: https://github.com/preactjs/preact
411396
[webpackconfighelpers]: docs/webpack-helpers.md
412397
[`.babelrc`]: https://babeljs.io/docs/usage/babelrc
398+
[babel config file]: https://babeljs.io/docs/en/config-files
413399
[simple]: https://github.com/preactjs-templates/simple
414400
[`"browserslist"`]: https://github.com/ai/browserslist
415-
[```.babelrc```]: https://babeljs.io/docs/usage/babelrc
416401
[default]: https://github.com/preactjs-templates/default
417402
[workbox]: https://developers.google.com/web/tools/workbox
418403
[preact-router]: https://github.com/preactjs/preact-router

0 commit comments

Comments
 (0)