Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 35 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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)
Expand All @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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
9 changes: 0 additions & 9 deletions docs/webpack-helpers.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)&lt;[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).
Expand Down
29 changes: 0 additions & 29 deletions packages/cli/lib/lib/webpack/transform-config.js
Original file line number Diff line number Diff line change
@@ -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');

Expand Down Expand Up @@ -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;
}
}

/**
Expand Down
90 changes: 0 additions & 90 deletions packages/cli/tests/build.snapshot.js

This file was deleted.

32 changes: 13 additions & 19 deletions packages/cli/tests/build.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 () => {
Expand Down
28 changes: 12 additions & 16 deletions packages/cli/tests/create.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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);
});
});
1 change: 0 additions & 1 deletion packages/cli/tests/images/create.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const path = require('path');

exports.default = [
// '.babelrc',
'.gitignore',
'package.json',
'README.md',
Expand Down
Loading