diff --git a/.changeset/cuddly-ducks-reply.md b/.changeset/cuddly-ducks-reply.md new file mode 100644 index 000000000..ff68b3d00 --- /dev/null +++ b/.changeset/cuddly-ducks-reply.md @@ -0,0 +1,6 @@ +--- +'@preact/async-loader': major +'preact-cli': major +--- + +Drops support for Preact v8 diff --git a/.changeset/cyan-tomatoes-count.md b/.changeset/cyan-tomatoes-count.md new file mode 100644 index 000000000..5a82bcac3 --- /dev/null +++ b/.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. diff --git a/.changeset/great-dryers-cross.md b/.changeset/great-dryers-cross.md new file mode 100644 index 000000000..aeda7e193 --- /dev/null +++ b/.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`. diff --git a/.changeset/hungry-peas-look.md b/.changeset/hungry-peas-look.md new file mode 100644 index 000000000..6580e5585 --- /dev/null +++ b/.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. diff --git a/.changeset/lucky-lizards-drive.md b/.changeset/lucky-lizards-drive.md new file mode 100644 index 000000000..331225065 --- /dev/null +++ b/.changeset/lucky-lizards-drive.md @@ -0,0 +1,5 @@ +--- +'preact-cli': major +--- + +HMR / the `--refresh` flag is now enabled by default in dev mode. diff --git a/.changeset/metal-roses-flash.md b/.changeset/metal-roses-flash.md new file mode 100644 index 000000000..109c218b0 --- /dev/null +++ b/.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. diff --git a/.changeset/poor-sloths-mate.md b/.changeset/poor-sloths-mate.md new file mode 100644 index 000000000..e638a42be --- /dev/null +++ b/.changeset/poor-sloths-mate.md @@ -0,0 +1,5 @@ +--- +'preact-cli': major +--- + +Removes `--preload` flag and functionality from build command. diff --git a/.changeset/popular-zebras-yell.md b/.changeset/popular-zebras-yell.md new file mode 100644 index 000000000..a6d2df930 --- /dev/null +++ b/.changeset/popular-zebras-yell.md @@ -0,0 +1,5 @@ +--- +'preact-cli': patch +--- + +Disables hash in CSS file names for the SSR build 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/.changeset/rude-walls-dress.md b/.changeset/rude-walls-dress.md new file mode 100644 index 000000000..d6d0f64fe --- /dev/null +++ b/.changeset/rude-walls-dress.md @@ -0,0 +1,6 @@ +--- +'preact-cli': major +'@preact/prerender-data-provider': major +--- + +Updates to use html-webpack-plugin v4 diff --git a/.changeset/sweet-snakes-cheat.md b/.changeset/sweet-snakes-cheat.md new file mode 100644 index 000000000..4f87f1b9e --- /dev/null +++ b/.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. diff --git a/.changeset/tender-lamps-boil.md b/.changeset/tender-lamps-boil.md new file mode 100644 index 000000000..4e33286c2 --- /dev/null +++ b/.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. diff --git a/.changeset/tiny-garlics-argue.md b/.changeset/tiny-garlics-argue.md new file mode 100644 index 000000000..4a11690db --- /dev/null +++ b/.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`). diff --git a/.eslintignore b/.eslintignore index 66e817fc8..4ec2f1666 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ **/node_modules **/tests/output +**/tests/subjects/*/preact.config.js **/*.d.ts diff --git a/.eslintrc b/.eslintrc index 78212fde0..fbb76696d 100644 --- a/.eslintrc +++ b/.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, diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 9b2da1e13..a7f3887a9 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/README.md b/README.md index 91b5651c2..9d55da5e4 100644 --- a/README.md +++ b/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 -``` +$ npm init preact-cli -> **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 -> -> $ yarn create preact-cli -> ``` +$ yarn create preact-cli +``` 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 ` 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 ` 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:
`npx preact-cli create / ` +> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template:
`npm init preact-cli / ` ### 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 +$ [npm init / yarn create] preact-cli --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-