# preact-boilerplate

> Lightweight react/preact boilerplate with support for inline CSS, automatic code splitting and async scripts.

Latest version **2.0.5** (published 2020-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install preact-boilerplate
pnpm add preact-boilerplate
yarn add preact-boilerplate
bun add preact-boilerplate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2020-03-10 |
| First published | 2018-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 46 |
| Unpacked size | 34.3 KB |
| Known vulnerabilities | 0 (+7 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | feliperohde |

## Links

- npm: https://www.npmjs.com/package/preact-boilerplate
- npm.io page: https://npm.io/package/preact-boilerplate

## Dependencies (46)

- [eslint](https://npm.io/package/eslint.md) ^6.5.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [webpack](https://npm.io/package/webpack.md) ^4.41.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.12.0
- [css-loader](https://npm.io/package/css-loader.md) ^3.2.0
- [raw-loader](https://npm.io/package/raw-loader.md) ^3.1.0
- [url-loader](https://npm.io/package/url-loader.md) ^2.2.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.6.3
- [file-loader](https://npm.io/package/file-loader.md) ^4.2.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.9
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.6.4
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^10.0.3
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [style-loader](https://npm.io/package/style-loader.md) ^1.0.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) ^3.0.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.6.3
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^3.1.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.8.2
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^5.0.4
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.16.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.2.0
- [i18n-webpack-plugin](https://npm.io/package/i18n-webpack-plugin.md) ^1.0.0
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.18.2
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^2.1.2
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.2.3
- [webpack-plugin-replace](https://npm.io/package/webpack-plugin-replace.md) ^1.2.0
- [make-dir-webpack-plugin](https://npm.io/package/make-dir-webpack-plugin.md) ^0.1.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.8.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^3.5.2
- [webpack-fix-style-only-entries](https://npm.io/package/webpack-fix-style-only-entries.md) ^0.4.0
- [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.3.0
- [html-webpack-inline-source-plugin](https://npm.io/package/html-webpack-inline-source-plugin.md) ^0.0.10
- [html-webpack-exclude-assets-plugin](https://npm.io/package/html-webpack-exclude-assets-plugin.md) ^0.0.7
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^5.0.3
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.2.0
- [@babel/plugin-proposal-function-bind](https://npm.io/package/@babel/plugin-proposal-function-bind.md) ^7.2.0
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.5.5
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.6.0
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.6.2
- [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^7.5.2
- [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.5.2
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) ^0.4.24
- [@babel/plugin-transform-react-constant-elements](https://npm.io/package/@babel/plugin-transform-react-constant-elements.md) ^7.6.3

## Recent versions

- 2.0.5 (latest) — 2020-03-10
- 2.0.4 — 2019-11-06
- 2.0.3 — 2019-10-26
- 2.0.1 — 2019-10-15
- 2.0.0 — 2019-10-14
- 1.0.12 — 2018-04-18
- 1.0.11 — 2018-04-06
- 1.0.10 — 2018-04-06
- 1.0.9 — 2018-04-06
- 1.0.8 — 2018-04-06
- 1.0.7 — 2018-04-05
- 1.0.6 — 2018-04-05
- 1.0.5 — 2018-04-05
- 1.0.4 — 2018-04-05
- 1.0.3 — 2018-03-23
- … 3 more at https://npm.io/package/preact-boilerplate/versions

## README

Lightweight preact/react boilerplate with support for inline CSS, automatic code splitting and async scripts.

		yarn add preact --dev preact-boilerplate
		
		## to build
		./node_modules/preact-boilerplate/run build 
			--env.title="Your%20Title" (required)
			--env.analyze {boolean} (optional, default: false) // launch webpack bundle analyzer
			--env.react {boolean} (optional, default: false)
			--env.uglify {boolean} (optional, default: true)
			--env.template {string} (optional)
			--env.inlineCss {boolean} (optional, default: true)
		
		## to dev
		./node_modules/preact-boilerplate/run dev 
			--env.title="Your%20Title"
			--env.react {boolean} (optional, default: false)
			--env.template {string} (optional)

		## sample
		
		// import style from './index.scss'; // global scoped css
		import style from './index.local.scss'; // local scoped scss
		import {
			h,
			render
		} from 'preact';
		
		## src/Main.js
		import AsyncComponent from 'async!./AsyncComponent';

		const a = {
			b: {
				c: {
					d: value => value
				}
			}
		};

		const App = () => {
			return (
				<h1 class={style.a}>
					{a.b?.c?.d?.('hi') || 'not defined'}
				</h1>
			);
		}

		render(<AsyncComponent />, document.body);

		## src/AsyncComponent.js
		import {
			h,
			render
		} from 'preact';

		import image from './files/someImage.png';

		export default () => {
			return (
				<section>
					<h2>{process.env.NODE_ENV && 'production'} is production!</h2>
					<h2>{PRODUCTION && 'production'} is production!</h2>
					<img src={image} class={style.image}/>
				</section>
			);
		};

		## output minified html w/ (google style) inline css, bundles and scripts to preload ASAP

		<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="preload" as="script" href="0.b952a.js"><style>._1P_ln{background-color:#d7006c;color:#fff}._1P_ln ._3bxXE{color:red;-webkit-box-shadow:none;box-shadow:none;border-radius:0}</style></head><body><script defer="defer" src="main.b952a.js"></script></body></html>

---
_Source: https://npm.io/package/preact-boilerplate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._