Browse Source

README updates for v5

v5.0.0-beta
Eli Perelman 8 years ago
parent
commit
1553c70161
  1. 2
      docs/middleware/neutrino-middleware-env/README.md
  2. 0
      docs/middleware/neutrino-middleware-html-template/README.md
  3. 2
      docs/middleware/neutrino-middleware-minify/README.md
  4. 2
      docs/presets/neutrino-preset-karma/README.md
  5. 71
      packages/neutrino-middleware-banner/README.md
  6. 71
      packages/neutrino-middleware-chunk/README.md
  7. 67
      packages/neutrino-middleware-clean/README.md
  8. 69
      packages/neutrino-middleware-compile-loader/README.md
  9. 73
      packages/neutrino-middleware-copy/README.md
  10. 67
      packages/neutrino-middleware-env/README.md
  11. 138
      packages/neutrino-middleware-eslint/README.md
  12. 70
      packages/neutrino-middleware-font-loader/README.md
  13. 61
      packages/neutrino-middleware-hot/README.md
  14. 60
      packages/neutrino-middleware-html-loader/README.md
  15. 75
      packages/neutrino-middleware-html-template/README.md
  16. 70
      packages/neutrino-middleware-image-loader/README.md
  17. 75
      packages/neutrino-middleware-loader-merge/README.md
  18. 62
      packages/neutrino-middleware-minify/README.md
  19. 60
      packages/neutrino-middleware-named-modules/README.md
  20. 60
      packages/neutrino-middleware-progress/README.md
  21. 69
      packages/neutrino-middleware-start-server/README.md
  22. 61
      packages/neutrino-middleware-style-loader/README.md
  23. 252
      packages/neutrino-preset-airbnb-base/README.md
  24. 240
      packages/neutrino-preset-jest/README.md
  25. 211
      packages/neutrino-preset-karma/README.md
  26. 206
      packages/neutrino-preset-mocha/README.md
  27. 264
      packages/neutrino-preset-node/README.md
  28. 270
      packages/neutrino-preset-react/README.md
  29. 275
      packages/neutrino-preset-web/README.md

2
docs/middleware/neutrino-middleware-env/README.md

@ -1,7 +1,7 @@
# Neutrino Environment Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-copy` is Neutrino middleware for injecting environment variable definitions into
`neutrino-middleware-env` is Neutrino middleware for injecting environment variable definitions into
source code at `process.env`. Always injects `process.env.NODE_ENV`, unless overridden.
## Requirements

0
docs/middleware/neutrino-middleware-hml-template/README.md → docs/middleware/neutrino-middleware-html-template/README.md

2
docs/middleware/neutrino-middleware-minify/README.md

@ -1,7 +1,7 @@
# Neutrino Minify Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-hot` is Neutrino middleware for minifying source code using
`neutrino-middleware-minify` is Neutrino middleware for minifying source code using
[`BabiliWebpackPlugin`](https://www.npmjs.com/package/babili-webpack-plugin). This middleware is usually only
added during production builds.

2
docs/presets/neutrino-preset-karma/README.md

@ -139,7 +139,7 @@ For more details on specific Karma usage, please refer to their
## Executing single tests
By default this preset will execute every test file located in your test directory ending in the appropriate file
extension. Use the command line [`files` parameters](/cli/README.md#neutrino-test) to execute individual tests.
extension. Use the command line [`files` parameters](../../cli/README.md#neutrino-test) to execute individual tests.
## Watching for changes

71
packages/neutrino-middleware-banner/README.md

@ -0,0 +1,71 @@
# Neutrino Banner Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-banner` is Neutrino middleware for injecting string content into source code files.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-banner` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-banner
```
#### npm
```bash
❯ npm install --save neutrino-middleware-banner
```
## Usage
`neutrino-middleware-banner` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const banner = require('neutrino-middleware-banner');
// Use with default options
neutrino.use(banner);
// Also accepts options for Webpack's BannerPlugin
// https://webpack.js.org/plugins/banner-plugin/
// Usage shows the default values of this middleware:
neutrino.use(banner, {
banner: `require('source-map-support').install();`,
raw: true,
entryOnly: true
});
```
## Customization
`neutrino-middleware-banner` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `banner`: Injects string content into application source code.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-banner.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-banner.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-banner
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

71
packages/neutrino-middleware-chunk/README.md

@ -0,0 +1,71 @@
# Neutrino Chunk Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-chunk` is Neutrino middleware for optimizing Webpack bundles via `CommonsChunkPlugin`.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-chunk` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-chunk
```
#### npm
```bash
❯ npm install --save neutrino-middleware-chunk
```
## Usage
`neutrino-middleware-chunk` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const chunk = require('neutrino-middleware-chunk');
// Use with default options
neutrino.use(chunk);
// Also accepts options for Webpack's CommonsChunkPlugin
// https://webpack.js.org/plugins/commons-chunk-plugin/
// Usage shows the default values of this middleware:
neutrino.use(chunk, {
minChunks: Infinity,
names: ['vendor', 'manifest']
});
```
## Customization
`neutrino-middleware-chunk` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `chunk`: Creates a separate file (known as a chunk), consisting of common modules shared between multiple entry
points.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-chunk.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-chunk.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-chunk
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

67
packages/neutrino-middleware-clean/README.md

@ -0,0 +1,67 @@
# Neutrino Clean Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-clean` is Neutrino middleware for removing directories before building.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-clean` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-clean
```
#### npm
```bash
❯ npm install --save neutrino-middleware-clean
```
## Usage
`neutrino-middleware-clean` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const clean = require('neutrino-middleware-clean');
// Use with default options
neutrino.use(clean);
// Usage shows the default values of this middleware:
neutrino.use(clean, {
paths: [],
root: neutrino.options.root
});
```
## Customization
`neutrino-middleware-clean` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `clean`: Removes directories before building.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-clean.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-clean.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-clean
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

69
packages/neutrino-middleware-compile-loader/README.md

@ -0,0 +1,69 @@
# Neutrino Compile Loader Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-compile-loader` is Neutrino middleware for compiling source code with Babel.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-compile-loader` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-compile-loader
```
#### npm
```bash
❯ npm install --save neutrino-middleware-compile-loader
```
## Usage
`neutrino-middleware-compile-loader` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const compile = require('neutrino-middleware-compile-loader');
neutrino.use(compile, {
include: [],
exclude: [],
babel: {}
});
```
- `include` should be an array of paths to include in the compilation. Maps to Webpack's
[`Rule.include`](https://webpack.js.org/configuration/module/#rule-include)
- `babel` is a [Babel configuration object](https://babeljs.io/docs/usage/api/#options), consumed by babel-loader. Use
this to set properties such as `presets`, `plugins`, and `env`.
## Customization
`neutrino-middleware-compile-loader` creates some conventions to make overriding the configuration easier once you are
ready to make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `compile`: Compiles JS and JSX files from the `src` directory using Babel. Contains a single loader named `babel`.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-compile-loader.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-compile-loader.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-compile-loader
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

73
packages/neutrino-middleware-copy/README.md

@ -0,0 +1,73 @@
# Neutrino Copy Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-copy` is Neutrino middleware for copying files during building.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-copy` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-copy
```
#### npm
```bash
❯ npm install --save neutrino-middleware-copy
```
## Usage
`neutrino-middleware-copy` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const copy = require('neutrino-middleware-copy');
// Use with default options
neutrino.use(copy);
// Usage shows the default values of this middleware:
neutrino.use(copy, {
patterns: [],
options: {}
});
```
The `patterns` and `options` are defined from the [CopyWebpackPlugin](https://github.com/kevlened/copy-webpack-plugin).
See their docs for details on valid values to specify.
- `patterns`: An array of patterns specifying copy operations.
- `options`: An object specifying copy options.
## Customization
`neutrino-middleware-copy` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `copy`: Copy files during building.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-copy.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-copy.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-copy
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

67
packages/neutrino-middleware-env/README.md

@ -0,0 +1,67 @@
# Neutrino Environment Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-env` is Neutrino middleware for injecting environment variable definitions into
source code at `process.env`. Always injects `process.env.NODE_ENV`, unless overridden.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-env` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-env
```
#### npm
```bash
❯ npm install --save neutrino-middleware-env
```
## Usage
`neutrino-middleware-env` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const env = require('neutrino-middleware-env');
// Use with default options
neutrino.use(env);
// Usage with additional environment variables
neutrino.use(env, ['SECRET_KEY']);
```
This middleware optionally accepts an array of environment variables to additionally inject into source code.
## Customization
`neutrino-middleware-env` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `env`: Inject environment variables into source code at `process.env`.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-env.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-env.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-env
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

138
packages/neutrino-middleware-eslint/README.md

@ -0,0 +1,138 @@
# Neutrino ESLint Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-eslint` is Neutrino middleware for linting source code using ESLint and eslint-loader.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-eslint` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-eslint
```
#### npm
```bash
❯ npm install --save neutrino-middleware-eslint
```
## Usage
`neutrino-middleware-eslint` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const eslint = require('neutrino-middleware-eslint');
// Usage shows default values
neutrino.use(eslint, {
test: /\.(js|jsx)$/,
include: [], /* Should specify either include or exclude */
exclude: [], /* Should specify either include or exclude */
eslint: {
failOnError: process.env.NODE_ENV !== 'development',
emitWarning: process.env.NODE_ENV !== 'development',
emitError: process.env.NODE_ENV !== 'development',
cwd: neutrino.options.root,
useEslintrc: false,
root: true,
plugins: ['babel'],
baseConfig: {},
envs: ['es6'],
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
objectLiteralDuplicateProperties: false,
generators: true,
impliedStrict: true
}
},
settings: {},
globals: ['process'],
rules: {}
}
});
```
- `test`: Test which files should be linted.
- `include`: An array of paths to include in linting. Maps to Webpack's
[`Rule.include`](https://webpack.js.org/configuration/module/#rule-include)
- `exclude`: An array of paths to exclude from linting. Maps to Webpack's
[`Rule.exclude`](https://webpack.js.org/configuration/module/#rule-exclude)
- `eslint`: An ESLint CLIEngine configuration object for configuring ESLint. Use this to configure rules,
plugins, and other [ESLint options](http://eslint.org/docs/user-guide/configuring).
## Customization
`neutrino-middleware-eslint` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `lint`: By default, lints JS and JSX files from included directories using ESLint. Contains a single loader named
`eslint`.
## Information
This middleware will show errors and warnings in the console during development, and will cause a failure when
creating a build bundle.
---
If you want your preset or middleware to also extend from another **ESLint configuration or preset** that you have made
a dependency, you must use `baseConfig.extends` rather than just `extends`. This is a limitation of ESLint, not this
middleware.
---
This middleware only configures a target environment for `es6`, leaving other build middleware free to add their own
target environments. If your middleware puts restrictions on which environments it is capable of running, please
document that clearly in your middleware.
## eslintrc Config
`neutrino-middleware-eslint` also provides a method for getting the ESLint configuration suitable for use in an eslintrc
file. Typically this is used for providing hints or fix solutions to the development environment, e.g. IDEs and text
editors. Doing this requires [creating an instance of the Neutrino API](../../api/README.md) and providing the presets uses.
If you keep this information in `neutrino.presets` in package.json, this should be relatively straightforward. By
providing all the presets used to Neutrino, you can ensure all the linting options used across all presets will be
merged together for your development environment, without the need for copying, duplication, or loss of organization and
separation.
_Example: Create a .eslintrc.js file in the root of the project._
```js
// .eslintrc.js
const Neutrino = require('neutrino');
const pkg = require('./package.json');
const api = new Neutrino();
pkg.neutrino.presets.map(preset => neutrino.use(preset));
module.exports = api.eslintrc();
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-eslint.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-eslint.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-eslint
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

70
packages/neutrino-middleware-font-loader/README.md

@ -0,0 +1,70 @@
# Neutrino Font Loader Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-font-loader` is Neutrino middleware for loading and importing font files from modules.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-font-loader` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-font-loader
```
#### npm
```bash
❯ npm install --save neutrino-middleware-font-loader
```
## Usage
`neutrino-middleware-font-loader` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const fonts = require('neutrino-middleware-font-loader');
// Use with default options
neutrino.use(fonts);
// Usage showing default options
neutrino.use(fonts, {
limit: '10000'
});
```
- `limit`: Return a Data URL if the file is smaller than a byte limit.
## Customization
`neutrino-middleware-font-loader` creates some conventions to make overriding the configuration easier once you are
ready to make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `woff`: Allows importing WOFF font files from modules. Contains a single loader named `url`.
- `ttf`: Allows importing TTF font files from modules. Contains a single loader named `url`.
- `eot`: Allows importing EOT font files from modules. Contains a single loader named `file`.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-font-loader.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-font-loader.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-font-loader
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

61
packages/neutrino-middleware-hot/README.md

@ -0,0 +1,61 @@
# Neutrino Hot Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-hot` is Neutrino middleware for enabled Hot Module Replacement with Webpack's
`HotModuleReplacementPlugin`. This middleware is usually only added during development.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-hot` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-hot
```
#### npm
```bash
❯ npm install --save neutrino-middleware-hot
```
## Usage
`neutrino-middleware-hot` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const hot = require('neutrino-middleware-hot');
neutrino.use(hot);
```
## Customization
`neutrino-middleware-hot` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `hot`: Enables hot module replacement.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-hot.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-hot.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-hot
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

60
packages/neutrino-middleware-html-loader/README.md

@ -0,0 +1,60 @@
# Neutrino HTML Loader Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-html-loader` is Neutrino middleware for loading and importing HTML files from modules.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-html-loader` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-html-loader
```
#### npm
```bash
❯ npm install --save neutrino-middleware-html-loader
```
## Usage
`neutrino-middleware-html-loader` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const html = require('neutrino-middleware-html-loader');
neutrino.use(html);
```
## Customization
`neutrino-middleware-html-loader` creates some conventions to make overriding the configuration easier once you are
ready to make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `html`: Allows importing HTML files from modules. Contains a single loader named `file`.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-html-loader.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-html-loader.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-html-loader
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

75
packages/neutrino-middleware-html-template/README.md

@ -0,0 +1,75 @@
# Neutrino HTML Template Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-html-template` is Neutrino middleware for automatically creating HTML files for configured
entry-points.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-html-template` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-html-template
```
#### npm
```bash
❯ npm install --save neutrino-middleware-html-template
```
## Usage
`neutrino-middleware-html-template` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const template = require('neutrino-middleware-html-template');
// Usage shows default values
// Accepts options specified by HtmlWebpackTemplate
// https://github.com/jaketrent/html-webpack-template
neutrino.use(template, {
inject: false,
appMountId: 'root',
xhtml: true,
mobile: true,
minify: {
useShortDoctype: true,
keepClosingSlash: true,
collapseWhitespace: true,
preserveLineBreaks: true
}
});
```
## Customization
`neutrino-middleware-html-template` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `html`: Automatically generates HTML files for configured entry-points.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-html-template.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-html-template.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-html-template
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

70
packages/neutrino-middleware-image-loader/README.md

@ -0,0 +1,70 @@
# Neutrino Image Loader Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-image-loader` is Neutrino middleware for loading and importing image files from modules.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-image-loader` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-image-loader
```
#### npm
```bash
❯ npm install --save neutrino-middleware-image-loader
```
## Usage
`neutrino-middleware-image-loader` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const images = require('neutrino-middleware-image-loader');
// Use with default options
neutrino.use(images);
// Usage showing default options
neutrino.use(images, {
limit: 8192
});
```
- `limit`: Return a Data URL if the file is smaller than a byte limit.
## Customization
`neutrino-middleware-image-loader` creates some conventions to make overriding the configuration easier once you are
ready to make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `img`: Allows importing JPEG, PNG, and GIF files from modules. Contains a single loader named `url`.
- `svg`: Allows importing SVG files from modules. Contains a single loader named `url`.
- `ico`: Allows importing ICO files from modules. Contains a single loader named `url`.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-image-loader.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-image-loader.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-image-loader
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

75
packages/neutrino-middleware-loader-merge/README.md

@ -0,0 +1,75 @@
# Neutrino Loader Merge Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-loader-merge` is Neutrino middleware for easily performing a deep merge of options into
a named rule and named loader in a Neutrino configuration.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-loader-merge` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-loader-merge
```
#### npm
```bash
❯ npm install --save neutrino-middleware-loader-merge
```
## Usage
`neutrino-middleware-loader-merge` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const loaderMerge = require('neutrino-middleware-loader-merge');
neutrino.use(loaderMerge('compile', 'babel'), {
plugins: ['object-rest-spread']
});
// Equivalent to:
neutrino.config.module
.rule('compile')
.use('babel')
.tap(options => require('deepmerge')(options, {
plugins: ['object-rest-spread']
}));
```
This middleware is a factory intended to be invoked with a rule name and a loader name for which to extend the options.
Upon invoking, it will return a middleware function to be provided to Neutrino's `use()` method.
```js
const middleware = loaderMerge(ruleName, loaderName);
neutrino.use(middleware, options);
```
## Customization
`neutrino-middleware-loader-merge` does not create any of its own conventions; it is only middleware
for extending the options for a rule loader which has create its own conventions.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-loader-merge.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-loader-merge.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-loader-merge
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

62
packages/neutrino-middleware-minify/README.md

@ -0,0 +1,62 @@
# Neutrino Minify Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-minify` is Neutrino middleware for minifying source code using
[`BabiliWebpackPlugin`](https://www.npmjs.com/package/babili-webpack-plugin). This middleware is usually only
added during production builds.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-minify` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-minify
```
#### npm
```bash
❯ npm install --save neutrino-middleware-minify
```
## Usage
`neutrino-middleware-minify` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const minify = require('neutrino-middleware-minify');
neutrino.use(minify);
```
## Customization
`neutrino-middleware-minify` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `minify`: Minifies source code using `BabiliWebpackPlugin`.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-minify.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-minify.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-minify
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

60
packages/neutrino-middleware-named-modules/README.md

@ -0,0 +1,60 @@
# Neutrino Named Modules Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-named-modules` is Neutrino middleware for enabling named modules output via `NamedModulesPlugin`.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-named-modules` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-named-modules
```
#### npm
```bash
❯ npm install --save neutrino-middleware-named-modules
```
## Usage
`neutrino-middleware-named-modules` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const namedModules = require('neutrino-middleware-named-modules');
neutrino.use(namedModules);
```
## Customization
`neutrino-middleware-named-modules` creates some conventions to make overriding the configuration easier once you are
ready to make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `named-modules`: Enables named modules for improved debugging and console output.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-named-modules.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-named-modules.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-named-modules
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

60
packages/neutrino-middleware-progress/README.md

@ -0,0 +1,60 @@
# Neutrino Progress Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-progress` is Neutrino middleware for displaying a progress bar showing the progress of a build.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-progress` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-progress
```
#### npm
```bash
❯ npm install --save neutrino-middleware-progress
```
## Usage
`neutrino-middleware-progress` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const progress = require('neutrino-middleware-progress');
neutrino.use(progress);
```
## Customization
`neutrino-middleware-progress` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `progress`: Displays a bar showing progression of build.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-progress.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-progress.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-progress
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

69
packages/neutrino-middleware-start-server/README.md

@ -0,0 +1,69 @@
# Neutrino Start Server Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-start-server` is Neutrino middleware for starting a Node.js server for a file upon
completion of a build.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-start-server` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-start-server
```
#### npm
```bash
❯ npm install --save neutrino-middleware-start-server
```
## Usage
`neutrino-middleware-start-server` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const server = require('neutrino-middleware-start-server');
// Use with default options, starting the server
// for the main entry point, neutrino.options.entry
neutrino.use(server);
// Usage with custom server file to start
neutrino.use(server, { name: 'custom.js' });
```
By default this middleware will start a server with the single entry point configured in Neutrino.
This middleware optionally accepts an object with a `name` property for a path to a module which to start the server.
## Customization
`neutrino-middleware-start-server` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `start-server`: Start a Node.js for a configured entry point or specified file.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-start-server.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-start-server.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-start-server
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

61
packages/neutrino-middleware-style-loader/README.md

@ -0,0 +1,61 @@
# Neutrino Style Loader Middleware
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-middleware-style-loader` is Neutrino middleware for loading and importing stylesheets from modules.
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-middleware-style-loader` can be installed via the Yarn or npm clients.
#### Yarn
```bash
❯ yarn add neutrino-middleware-style-loader
```
#### npm
```bash
❯ npm install --save neutrino-middleware-style-loader
```
## Usage
`neutrino-middleware-style-loader` can be consumed from the Neutrino API, middleware, or presets. Require this package
and plug it into Neutrino:
```js
const styles = require('neutrino-middleware-style-loader');
neutrino.use(styles);
```
## Customization
`neutrino-middleware-style-loader` creates some conventions to make overriding the configuration easier once you are
ready to make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `css`: Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css` which use
`style-loader` and `css-loader`, respectively.
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-middleware-style-loader.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-middleware-style-loader.svg
[npm-url]: https://npmjs.org/package/neutrino-middleware-style-loader
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/

252
packages/neutrino-preset-airbnb-base/README.md

@ -1,13 +1,257 @@
# Neutrino Airbnb Preset
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
[![NPM version][npm-image]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Join Slack][slack-image]][slack-url]
`neutrino-preset-airbnb-base` is a Neutrino preset that supports linting JavaScript projects with Airbnb's base ESLint
config, following the [Airbnb styleguide](https://github.com/airbnb/javascript).
## Documentation
## Features
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-airbnb-base/)
for details on installation, getting started, usage, and customizing.
- Zero upfront configuration necessary to start linting your project
- Modern Babel knowledge supporting ES modules, JSX (when used with React preset), Web and Node.js apps
- Highly visible during development, fails compilation when building for production
- Easily extensible to customize your project as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5, Neutrino build preset
## Installation
`neutrino-preset-airbnb-base` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-airbnb-base` are development dependencies. You will also be using
another Neutrino preset for building your application source code.
#### Yarn
```bash
❯ yarn add --dev neutrino-preset-airbnb-base
```
#### npm
```bash
❯ npm install --save-dev neutrino-preset-airbnb-base
```
## Project Layout
`neutrino-preset-airbnb-base` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project source code should live in a directory named `src` in the root of the
project.
## Quickstart
After adding the Airbnb preset to your Neutrino-built project, edit your project's package.json to add the preset for
linting **before** your build preset. For example, if you are building your project using `neutrino-preset-web`:
```json
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-airbnb-base neutrino-preset-web",
"build": "neutrino build --presets neutrino-preset-airbnb-base neutrino-preset-web"
}
}
```
Or if you have set up Neutrino with `neutrino.presets` in your package.json:
```json
{
"neutrino": {
"presets": [
"neutrino-preset-airbnb-base",
"neutrino-preset-web"
]
}
}
```
Start the app, then check your console for any linting errors. If everything is successful, you should see no errors in
the console. ESLint errors visible during development are reported, but will still continue to build and serve your
project.
#### Yarn
```bash
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
ERROR in ./src/index.js
/web/src/index.js
7:1 warning Unexpected console statement no-console
7:14 error A space is required after '{' babel/object-curly-spacing
7:20 error Missing space before value for key 'hello' key-spacing
7:27 error A space is required before '}' babel/object-curly-spacing
✖ 4 problems (3 errors, 1 warning)
```
#### npm
```bash
❯ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed
ERROR in ./src/index.js
/web/src/index.js
7:1 warning Unexpected console statement no-console
7:14 error A space is required after '{' babel/object-curly-spacing
7:20 error Missing space before value for key 'hello' key-spacing
7:27 error A space is required before '}' babel/object-curly-spacing
✖ 4 problems (3 errors, 1 warning)
```
## Building
`neutrino-preset-airbnb-base` will cause errors to **fail your build** when creating a bundle via `neutrino build`. If
you want to ease introduction of this linting preset to your project, consider only adding it to your preset list for
`neutrino start` until all linting errors have been resolved.
```bash
❯ yarn build
clean-webpack-plugin: /web/build has been removed.
Build completed in 1.287s
./src/index.js
/Users/eli/code/neutrino-examples/web/src/index.js
6:1 warning Unexpected console statement no-console
6:14 error A space is required after '{' babel/object-curly-spacing
6:16 error Missing space before value for key 'a' key-spacing
6:17 error A space is required before '}' babel/object-curly-spacing
✖ 4 problems (3 errors, 1 warning)
error Command failed with exit code 1.
```
## Customizing
To override the build configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-airbnb-base` creates some conventions to make overriding the configuration easier once you are ready to
make changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `lint`: Lints JS and JSX files from the `src` directory using ESLint. Contains a single loader named `eslint`. This is
inherited from `neutrino-middleware-eslint`.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) and knowing the rule and loader IDs above,
you can override and augment the linting configuration directly from package.json. _Note: Using the simple customization
approach for linting changes can be quite verbose. Consider using advanced configuration below if this bothers you._
_Example: Turn off semicolons from being required as defined by the Airbnb rules._
```json
{
"neutrino": {
"config": {
"module": {
"rule": {
"lint": {
"use": {
"eslint": {
"options": {
"rules": {
"semi": "off"
}
}
}
}
}
}
}
}
}
}
```
Again, using simple customization for linting can be verbose. Consider using advanced customization if it suits your
project.
### Advanced configuration
By following the [customization guide](https://neutrino.js.org/customization/advanced) and knowing the rule and loader IDs above,
you can override and augment the build by creating a JS module which overrides the config. This preset is also
Neutrino middleware, making it easy to compose and extend the configuration.
_Example: Turn off semicolons from being required as defined by the Airbnb rules._
```js
// If using as middleware, remove from presets and .use it from your override:
const airbnb = require('neutrino-preset-airbnb-base');
module.exports = neutrino => {
neutrino.use(airbnb, {
rules: {
semi: 'off'
}
});
};
```
```js
// If using as a preset from the CLI or configured in package.json,
// override its configuration directly:
const merge = require('deepmerge');
module.exports = neutrino => {
neutrino.config.module
.rule('lint')
.use('eslint')
.tap(options => merge(options, {
rules: {
semi: 'off'
}
}));
};
```
## eslintrc Config
`neutrino-lint-airbnb-base` also provides a method for getting the ESLint configuration suitable for use in an eslintrc
file. Typically this is used for providing hints or fix solutions to the development environment, e.g. IDEs and text
editors. Doing this requires [creating an instance of the Neutrino API](https://neutrino.js.org/api) and providing the presets uses.
If you keep this information in `neutrino.presets` in package.json, this should be relatively straightforward. By
providing all the presets used to Neutrino, you can ensure all the linting options used across all those preset will be
merged together for your development environment, without the need for copying, duplication, or loss of organization and
separation. This is inherited from `neutrino-middleware-eslint`.
_Example: Create a .eslintrc.js file in the root of the project._
```js
// .eslintrc.js
const Neutrino = require('neutrino');
const pkg = require('./package.json');
const api = new Neutrino();
// If the Airbnb preset is not included in pkg.neutrino.presets,
// use it manually:
api.use(require('neutrino-preset-airbnb-base'));
// Add the rest of the presets:
pkg.neutrino.presets.map(preset => api.use(preset));
module.exports = api.eslintrc();
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-airbnb-base.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-airbnb-base.svg

240
packages/neutrino-preset-jest/README.md

@ -3,10 +3,244 @@
`neutrino-preset-jest` is a Neutrino preset that supports testing JavaScript projects with the Jest test runner.
## Documentation
## Features
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-jest/)
for details on installation, getting started, usage, and customizing.
- Zero upfront configuration necessary to start testing
- Babel compilation that compiles your tests using the same Babel options used by your source code
- Source watching for re-running of tests on change
- Collecting test coverage information and generating report
- Easily extensible to customize your testing as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5, Neutrino build preset
## Installation
`neutrino-preset-jest` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-jest` are development dependencies. You will also be using
another Neutrino preset for building your application source code.
#### Yarn
```bash
❯ yarn add --dev neutrino-preset-jest
```
#### npm
```bash
❯ npm install --save-dev neutrino-preset-jest
```
### Installation: React Testing
Jest is often used in the testing of React components. If you are using this preset in a React application, which most
likely means you are using `neutrino-preset-react`, you should also consider adding React's TestUtils and potentially a
higher-level abstraction such as Airbnb's Enzyme. These should be development dependencies of your project.
#### Yarn
```bash
❯ yarn add --dev react-addons-test-utils enzyme
```
#### npm
```bash
❯ npm install --save-dev react-addons-test-utils enzyme
```
See the [React's Test Utils documentation](https://facebook.github.io/react/docs/test-utils.html) for specifics on React
testing with this approach.
## Project Layout
`neutrino-preset-jest` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project test code should live in a directory named `test` in the root of the
project. Test files end in either `_test.js`, `.test.js`, `_test.jsx`, or `.test.jsx`.
## Quickstart
After adding the Jest preset to your Neutrino-built project, add a new directory named `test` in the root of the
project, with a single JS file named `simple_test.js` in it.
```bash
❯ mkdir test && touch test/simple_test.js
```
Edit your `test/simple_test.js` file with the following:
```js
describe('simple', () => {
it('should be sane', () => {
expect(!false).toBe(true);
});
});
```
Now edit your project's package.json to add commands for testing your application. In this example,
let's pretend this is a Node.js project:
```json
{
"scripts": {
"test": "neutrino test --presets neutrino-preset-node neutrino-preset-jest"
}
}
```
Or if you have set up Neutrino with `neutrino.presets` in your package.json:
```json
{
"neutrino": {
"presets": [
"neutrino-preset-node",
"neutrino-preset-jest"
]
}
}
```
Run the tests, and view the results in your console:
#### Yarn
```bash
❯ yarn test
PASS test/simple_test.js
simple
✓ should be sane (2ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.936s
Ran all test suites.
✨ Done in 2.12s.
```
#### npm
```bash
❯ npm test
PASS test/simple_test.js
simple
✓ should be sane (2ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.972s
Ran all test suites.
```
To run tests against files from your source code, simply import them:
```js
import thingToTest from '../src/thing';
```
For more details on specific Jest usage, please refer to their [documentation](https://facebook.github.io/jest/).
## Executing single tests
By default this preset will execute every test file located in your test directory ending in the appropriate file
extension. Use the command line [`files` parameters](https://neutrino.js.org/cli#neutrino-test) to execute individual tests.
## Watching for changes
`neutrino-preset-jest` can watch for changes on your source directory and subsequently re-run tests. Simply use the
`--watch` flag with your `neutrino test` command.
## Coverage reporting
Jest has an integrated coverage reporter, which requires no configuration. To collect test coverage information and
generate a report:
```bash
❯ neutrino test --coverage
```
You can also edit your package.json file and create a separate command for generating a coverage report, which can be
very helpful during continuous integration of your project:
```json
{
"scripts": {
"coverage": "neutrino test --coverage"
}
}
```
See the [Jests documentation](https://facebook.github.io/jest/docs/configuration.html#collectcoveragefrom-array) for
more configuration options for generating coverage reports.
## Customizing
To override the test configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-jest` creates some conventions to make overriding the configuration easier once you are ready to make
changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `compile`: Compiles JS files from the `test` directory using adopted Babel settings from other build presets.
Contains a single loader named `babel`.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) and knowing the rule, and loader IDs above,
you can override and augment the build directly from package.json.
Jest configuration settings can also be modified directly from package.json, but it is not required.
`neutrino-preset-jest` will import Jest configuration from your package.json's `jest` object or `neutrino.options.jest`;
the format is defined on the [Jest documentation site](https://facebook.github.io/jest/docs/configuration.html).
_Example: Turn off bailing on test failures._
```json
{
"neutrino": {
"options": {
"jest": {
"bail": false
}
}
}
}
```
### Advanced configuration
By following the [customization guide](https://neutrino.jg.org/customization/advanced) and knowing the rule, and loader IDs above,
you can override and augment testing by creating a JS module which overrides the config.
You can also modify Jest settings by overriding with any options Jest accepts. In a standalone Jest project this is
typically done in the package.json file, but `neutrino-preset-jest` allows advanced configuration through this
mechanism as well. This is stored in the `neutrino.options.jest` object, and takes the same configuration options as
outlined in the [Jest documentation](https://facebook.github.io/jest/docs/configuration.html).
_Example: Create a global `__DEV__` variable set to `true` in all test environments._
```js
module.exports = neutrino => {
neutrino.options.jest.globals = {
__DEV__: true
};
};
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-jest.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-jest.svg

211
packages/neutrino-preset-karma/README.md

@ -3,10 +3,215 @@
`neutrino-preset-karma` is a Neutrino preset that supports testing web applications using the Karma test runner.
## Documentation
## Features
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-karma/)
for details on installation, getting started, usage, and customizing.
- Zero upfront configuration necessary to start testing on real browsers with Karma, Mocha, and Chrome
- Babel compilation that compiles your tests using the same Babel options used by your source code
- Source watching for re-running of tests on change
- Out-of-the-box support for running in CI
- Easily extensible to customize your testing as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5, Neutrino build preset
## Installation
`neutrino-preset-karma` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-karma` are development dependencies. You will also be using
another Neutrino preset for building your application source code.
#### Yarn
```bash
❯ yarn add --dev neutrino-preset-karma
```
#### npm
```bash
❯ npm install --save-dev neutrino-preset-karma
```
## Project Layout
`neutrino-preset-karma` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project test code should live in a directory named `test` in the root of the
project. Test files end in `_test.js` by default.
## Quickstart
After adding the Karma preset to your Neutrino-built project, add a new directory named `test` in the root of the
project, with a single JS file named `simple_test.js` in it.
```bash
❯ mkdir test && touch test/simple_test.js
```
Edit your `test/simple_test.js` file with the following:
```js
import assert from 'assert';
describe('simple', () => {
it('should be sane', () => {
assert.equal(true, !false);
});
});
```
Now edit your project's package.json to add commands for testing your application. In this example,
let's pretend this is a React project:
```json
{
"scripts": {
"test": "neutrino test --presets neutrino-preset-node neutrino-preset-karma"
}
}
```
Or if you have set up Neutrino with `neutrino.presets` in your package.json:
```json
{
"neutrino": {
"presets": [
"neutrino-preset-react",
"neutrino-preset-karma"
]
}
}
```
Run the tests, and view the results in your console:
#### Yarn
```bash
❯ yarn test
START:
16 02 2017 10:36:34.713:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
16 02 2017 10:36:34.715:INFO [launcher]: Launching browser Chrome with unlimited concurrency
16 02 2017 10:36:34.731:INFO [launcher]: Starting browser Chrome
16 02 2017 10:36:35.655:INFO [Chrome 56.0.2924 (Mac OS X 10.12.3)]: Connected on socket MkTbqJLpAAa2HFaeAAAA with id 21326158
simple
✔ should be sane
Finished in 0.003 secs / 0 secs @ 10:36:35 GMT-0600 (CST)
SUMMARY:
✔ 1 test completed
✨ Done in 7.54s.
```
#### npm
```bash
❯ npm test
START:
16 02 2017 10:38:12.865:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
16 02 2017 10:38:12.867:INFO [launcher]: Launching browser Chrome with unlimited concurrency
16 02 2017 10:38:12.879:INFO [launcher]: Starting browser Chrome
16 02 2017 10:38:13.688:INFO [Chrome 56.0.2924 (Mac OS X 10.12.3)]: Connected on socket svRGoxU0etKTKQWhAAAA with id 68456725
simple
✔ should be sane
Finished in 0.006 secs / 0 secs @ 10:38:13 GMT-0600 (CST)
SUMMARY:
✔ 1 test completed
```
To run tests against files from your source code, simply import them:
```js
import thingToTest from '../src/thing';
```
For more details on specific Karma usage, please refer to their
[documentation](https://karma-runner.github.io/1.0/index.html).
## Executing single tests
By default this preset will execute every test file located in your test directory ending in the appropriate file
extension. Use the command line [`files` parameters](https://neutrino.js.org/cli#neutrino-test) to execute individual tests.
## Watching for changes
`neutrino-preset-karma` can watch for changes on your source directory and subsequently re-run tests. Simply use the
`--watch` flag with your `neutrino test` command.
## Using from CI
`neutrino-preset-karma` needs no additional configuration to run your tests in CI infrastructure, but you will still
need to ensure your CI can actually run the tests. This usually means having a display emulator and access to the
browsers you are testing against.
To do this in Travis-CI, you will need to add the following to your `.travis.yml` file for Chrome tests:
```yaml
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
```
## Customizing
To override the test configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-karma` creates some conventions to make overriding the configuration easier once you are ready to make
changes.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) you can override and augment the test configuration
directly from package.json. `neutrino-preset-karma` will import Karma configuration from your package.json's
`neutrino.options.karma` object if defined. The format is defined on the
[Karma documentation site](http://karma-runner.github.io/1.0/config/configuration-file.html).
_Example: Change the duration Karma waits for a browser to reconnect (in ms)._
```js
{
"neutrino": {
"options": {
"karma": {
"browserDisconnectTimeout": 5000
}
}
}
}
```
### Advanced configuration
By following the [customization guide](https://neutrino.js.org/customization/advanced) you can override and augment testing by creating a
JS module which overrides the config.
You can also modify Karma settings by overriding with any options Karma accepts. In a standalone Karma project this is
typically done in a `karma.conf.js` file, but `neutrino-preset-karma` unifies advanced configuration through a preset
override module. When needing to make changes to Karma-specific settings, this is stored in the `neutrino.options.karma`
object, and takes the same configuration options as outlined in the
[Karma documentation](https://karma-runner.github.io/1.0/config/configuration-file.html).
_Example: Change the duration Karma waits for a browser to reconnect (in ms)._
```js
module.exports = neutrino => {
neutrino.options.karma.browserDisconnectTimeout = 5000;
};
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-karma.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-karma.svg

206
packages/neutrino-preset-mocha/README.md

@ -3,10 +3,210 @@
`neutrino-preset-mocha` is a Neutrino preset that supports testing JavaScript projects with the Mocha test runner.
## Documentation
## Features
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-mocha/)
for details on installation, getting started, usage, and customizing.
- Zero upfront configuration necessary to start testing
- Babel compilation that compiles your tests using the same Babel options used by your source code
- Easily extensible to customize your testing as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5, Neutrino build preset
## Installation
`neutrino-preset-mocha` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-mocha` are development dependencies. You will also be using
another Neutrino preset for building your application source code.
#### Yarn
```bash
❯ yarn add --dev neutrino-preset-mocha
```
#### npm
```bash
❯ npm install --save-dev neutrino-preset-mocha
```
## Project Layout
`neutrino-preset-mocha` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project test code should live in a directory named `test` in the root of the
project. Test files end in `_test.js` by default.
## Quickstart
After adding the Mocha preset to your Neutrino-built project, add a new directory named `test` in the root of the
project, with a single JS file named `simple_test.js` in it.
```bash
❯ mkdir test && touch test/simple_test.js
```
Edit your `test/simple_test.js` file with the following:
```js
import assert from 'assert';
describe('simple', () => {
it('should be sane', () => {
assert.equal(true, !false);
});
});
```
Now edit your project's package.json to add commands for testing your application. In this example,
let's pretend this is a Node.js project:
```json
{
"scripts": {
"test": "neutrino test --presets neutrino-preset-node neutrino-preset-mocha"
}
}
```
Or if you have set up Neutrino with `neutrino.presets` in your package.json:
```json
{
"neutrino": {
"presets": [
"neutrino-preset-node",
"neutrino-preset-mocha"
]
}
}
```
Run the tests, and view the results in your console:
#### Yarn
```bash
❯ yarn test
simple
✓ should be sane
1 passing (426ms)
✨ Done in 4.17s.
```
#### npm
```bash
❯ npm test
simple
✓ should be sane
1 passing (409ms)
```
To run tests against files from your source code, simply import them:
```js
import thingToTest from '../src/thing';
```
For more details on specific Mocha usage, please refer to their [documentation](http://mochajs.org/).
## Executing single tests
By default this preset will execute every test file located in your test directory ending in `_test.js`.
Use the command line [`files` parameters](https://neutrino.js.org/cli#neutrino-test) to execute individual tests.
## Customizing
To override the test configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-mocha` creates some conventions to make overriding the configuration easier once you are ready to make
changes.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `compile`: Compiles JS files from the `test` directory using Babel. Contains a single loader named `babel`. Adopts
Babel configuration from other presets that have been loaded.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) you can override and augment the test configuration
directly from package.json. `neutrino-preset-mocha` will import Mocha configuration from your package.json's
`neutrino.options.mocha` object if defined. The format is defined on the
[Mocha documentation site](https://mochajs.org/#usage), with command-line flags mapping to camel-cased options
in `neutrino.options.mocha`.
_Example: Switch the test reporter from the default `spec` to `nyan`:_
```js
{
"neutrino": {
"options": {
"mocha": {
"reporter": "nyan"
}
}
}
}
```
```bash
❯ yarn test
1 -__,------,
0 -__| /\_/\
0 -_~|_( ^ .^)
-_ "" ""
1 passing (362ms)
✨ Done in 3.28s.
```
### Advanced configuration
By following the [customization guide](https://neutrino.js.org/customization/advanced) and knowing the rule, and loader IDs above,
you can override and augment testing by creating a JS module which overrides the config.
You can modify Mocha settings by overriding the preset with any options Mocha accepts. This is stored in the
`neutrino.custom.mocha` object.
_Example: Switch the test reporter from the default `spec` to `nyan`:_
```js
module.exports = neutrino => {
neutrino.options.mocha.reporter = 'nyan';
};
```
```bash
❯ yarn test
1 -__,------,
0 -__| /\_/\
0 -_~|_( ^ .^)
-_ "" ""
1 passing (362ms)
✨ Done in 3.28s.
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-mocha.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-mocha.svg

264
packages/neutrino-preset-node/README.md

@ -3,10 +3,268 @@
`neutrino-preset-node` is a Neutrino preset that supports building Node.js applications.
## Documentation
## Features
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-node/)
for details on installation, getting started, usage, and customizing.
- Zero upfront configuration necessary to start developing and building a Node.js project
- Modern Babel compilation supporting ES modules, Node.js 6.9+, async functions, and dynamic imports
- Supports automatically-wired sourcemaps
- Tree-shaking to create smaller bundles
- Hot Module Replacement with source-watching during development
- Chunking of external dependencies apart from application code
- Easily extensible to customize your project as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-preset-node` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-node` are development dependencies.
#### Yarn
```bash
❯ yarn add --dev neutrino neutrino-preset-node
```
#### npm
```bash
❯ npm install --save-dev neutrino neutrino-preset-node
```
If you want to have automatically wired sourcemaps added to your project, add `source-map-support`:
#### Yarn
```bash
❯ yarn add source-map-support
```
#### npm
```bash
❯ npm install --save source-map-support
```
## Project Layout
`neutrino-preset-node` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project source code should live in a directory named `src` in the root of the
project. This includes JavaScript files that would be available to your compiled project.
## Quickstart
After installing Neutrino and the Node.js preset, add a new directory named `src` in the root of the project, with
a single JS file named `index.js` in it.
```bash
❯ mkdir src && touch src/index.js
```
Edit your `src/index.js` file with the following:
```js
import { createServer } from 'http';
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const port = process.env.PORT || 3000;
createServer(async (req, res) => {
await delay(500);
console.log('Request!');
res.end('hi!');
})
.listen(port, () => console.log(`Server running on port ${port}`));
```
Now edit your project's package.json to add commands for starting and building the application.
```json
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-node",
"build": "neutrino build --presets neutrino-preset-node"
}
}
```
Start the app, then either open a browser to http://localhost:3000 or use curl from another terminal window:
#### Yarn
```bash
❯ yarn start
Server running on port 3000
```
```bash
❯ curl http://localhost:3000
hi!
```
#### npm
```bash
❯ npm start
Server running on port 3000
```
```bash
❯ curl http://localhost:3000
hi!
```
## Building
`neutrino-preset-node` builds assets to the `build` directory by default when running `neutrino build`. Using the
quick start example above as a reference:
```bash
❯ yarn build
clean-webpack-plugin: /node/build has been removed.
Build completed in 0.419s
Hash: 89e4fb250fc535920ba4
Version: webpack 2.2.1
Time: 424ms
Asset Size Chunks Chunk Names
index.js 4.29 kB 0 [emitted] index
index.js.map 3.73 kB 0 [emitted] index
✨ Done in 1.51s.
```
You can either serve or deploy the contents of this `build` directory as a Node.js module, server, or tool. For Node.js
this usually means adding a `main` property to package.json pointing to the built entry point. Also when publishing your
project to npm, consider excluding your `src` directory by using the `files` property to whitelist `build`,
or via `.npmignore` to blacklist `src`.
```json
{
"main": "build/index.js",
"files": [
"build"
]
}
```
_Note: While this preset works well for many types of Node.js applications, it's important to make the distinction
between applications and libraries. This preset will not work optimally out of the box for creating distributable
libraries, and will take a little extra customization to make them suitable for that purpose._
## Hot Module Replacement
While `neutrino-preset-node` supports Hot Module Replacement for your app, it does require some application-specific
changes in order to operate. Your application should define split points for which to accept modules to reload using
`module.hot`:
For example:
```js
import { createServer } from 'http';
import app from './app';
if (module.hot) {
module.hot.accept('./app');
}
createServer((req, res) => {
res.end(app('example'));
}).listen(/* */);
```
Or for all paths:
```js
import { createServer } from 'http';
import app from './app';
if (module.hot) {
module.hot.accept();
}
createServer((req, res) => {
res.end(app('example'));
}).listen(/* */);
```
Using dynamic imports with `import()` will automatically create split points and hot replace those modules upon
modification during development.
## Customizing
To override the build configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-node` creates some conventions to make overriding the configuration easier once you are ready to make
changes.
By default the Node.js preset creates a single **main** `index` entry point to your application, and this maps to the
`index.js` file in the `src` directory. This means that the Node.js preset is optimized toward a main entry to your app.
Code not imported in the hierarchy of the `index` entry will not be output to the bundle. To overcome this you
must either define more entry points, or import the code path somewhere along the `index` hierarchy.
### Vendoring
This preset automatically vendors all external dependencies into a separate chunk based on their inclusion in your
package.json. No extra work is required to make this work.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `compile`: Compiles JS files from the `src` directory using Babel. Contains a single loader named `babel`.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `banner`: Injects source-map-support into the entry point of your application if detected in `dependencies` or
`devDependencies` of your package.json.
- `copy`: Copies non-JS files from `src` to `build` when using `neutrino build`.
- `clean`: Clears the contents of `build` prior to creating a production bundle.
- `progress`: Displays a progress bar when using `neutrino build`.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) and knowing the rule, loader, and plugin IDs above,
you can override and augment the build directly from package.json.
_Example: Allow importing modules with an `.mjs` extension._
```json
{
"neutrino": {
"config": {
"resolve": {
"extensions": [
".mjs"
]
}
}
}
}
```
### Advanced configuration
By following the [customization guide](https://neutrino.js.org/customization/advanced) and knowing the rule, loader, and plugin IDs above,
you can override and augment the build by creating a JS module which overrides the config.
_Example: Allow importing modules with an `.mjs` extension._
```js
module.exports = neutrino => {
neutrino.config.resolve.extensions.add('.mjs');
};
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-node.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-node.svg

270
packages/neutrino-preset-react/README.md

@ -3,10 +3,274 @@
`neutrino-preset-react` is a Neutrino preset that supports building React web applications.
## Documentation
## Features
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-react/)
for details on installation, getting started, usage, and customizing.
- Zero upfront configuration necessary to start developing and building a React web app
- Modern Babel compilation adding JSX and object rest spread syntax.
- Support for React Hot Loader
- Write JSX in .js or .jsx files
- Extends from [neutrino-preset-web](https://npmjs.org/package/neutrino-preset-web)
- Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
- Webpack loaders for importing HTML, CSS, images, icons, and fonts
- Webpack Dev Server during development
- Automatic creation of HTML pages, no templating necessary
- Hot module replacement support
- Production-optimized bundles with Babili minification and easy chunking
- Easily extensible to customize your project as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v5
## Installation
`neutrino-preset-react` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-react` are development dependencies. You will also need React and React DOM for actual
React development.
#### Yarn
```bash
❯ yarn add --dev neutrino neutrino-preset-react
❯ yarn add react react-dom
```
#### npm
```bash
❯ npm install --save-dev neutrino neutrino-preset-react
❯ npm install --save react react-dom
```
## Project Layout
`neutrino-preset-react` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project source code should live in a directory named `src` in the root of the
project. This includes JavaScript files, CSS stylesheets, images, and any other assets that would be available
to your compiled project.
## Quickstart
After installing Neutrino and the React preset, add a new directory named `src` in the root of the project, with
a single JS file named `index.js` in it.
```bash
❯ mkdir src && touch src/index.js
```
This React preset exposes an element in the page with an ID of `root` to which you can mount your application. Edit
your `src/index.js` file with the following:
```jsx
import React from 'react';
import { render } from 'react-dom';
render(<h1>Hello world!</h1>, document.getElementById('root'));
```
Now edit your project's package.json to add commands for starting and building the application:
```json
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-react",
"build": "neutrino build --presets neutrino-preset-react"
}
}
```
Start the app, then open a browser to the address in the console:
#### Yarn
```bash
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
```
#### npm
```bash
❯ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed
```
## Building
`neutrino-preset-react` builds static assets to the `build` directory by default when running `neutrino build`. Using
the quick start example above as a reference:
```bash
❯ yarn build
clean-webpack-plugin: /react/build has been removed.
Build completed in 6.692s
Hash: 7a83f769b15f88b80727
Version: webpack 2.2.1
Time: 6695ms
Asset Size Chunks Chunk Names
index.b615ea9e95317f530317.bundle.js 143 kB 0, 1 [emitted] index
manifest.2211d9c1970bbd3c952b.bundle.js 1.41 kB 1 [emitted] manifest
index.html 779 bytes [emitted]
✨ Done in 8.32s.
```
You can either serve or deploy the contents of this `build` directory as a static site.
## Customizing
To override the build configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-react` does not use any additional named rules, loaders, or plugins that aren't already in use by the
Web preset. See the [Web documentation customization](../neutrino-preset-web#customizing)
for preset-specific configuration to override.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) and knowing the rule, loader, and plugin IDs above,
you can override and augment the build directly from package.json.
#### Vendoring
By defining an entry point in package.json named `vendor` you can split out external dependencies into a chunk separate
from your application code. When working with a React application, it is recommended to start out by splitting off
React and React DOM into the `vendor` chunk.
_Example: Put React and React DOM into a separate "vendor" chunk:_
```json
{
"neutrino": {
"config": {
"entry": {
"vendor": [
"react",
"react-dom"
]
}
}
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}
```
Running the build again, you can contrast the bundles generated here with the one generated in the quick start:
```bash
❯ yarn build
clean-webpack-plugin: /react/build has been removed.
Build completed in 6.726s
Hash: 0468e662989da55bdc5e
Version: webpack 2.2.1
Time: 6730ms
Asset Size Chunks Chunk Names
vendor.0b3c06ba6b2494d683ee.bundle.js 142 kB 0, 2 [emitted] vendor
index.d264625fd405d81cb995.bundle.js 276 bytes 1, 2 [emitted] index
manifest.29ee4d0db8f2534cc643.bundle.js 1.44 kB 2 [emitted] manifest
index.html 866 bytes [emitted]
✨ Done in 8.21s.
```
#### HTML files
If you wish to override how HTML files are created for your React app, refer to the [relevant section on
neutrino-preset-web](https://neutrino.js.org/neutrino-preset-web#html-files).
_Example: Change the application mount ID from "root" to "app":_
```json
{
"neutrino": {
"options": {
"html": {
"appMountId": "app"
}
}
}
}
```
### Advanced configuration
By following the [customization guide](https://neutrino.js.org/customization/advanced) and knowing the rule, loader, and plugin IDs from
neutrino-preset-web, you can override and augment the build by creating a JS module which overrides the config.
#### Vendoring
By defining an entry point named `vendor` you can split out external dependencies into a chunk separate
from your application code.
_Example: Put React and React DOM into a separate "vendor" chunk:_
```js
module.exports = neutrino => {
neutrino.config
.entry('vendor')
.add('react')
.add('react-dom');
};
```
## Hot Module Replacement
While `neutrino-preset-react` supports Hot Module Replacement your app using React Hot Loader, it does require some
application-specific changes in order to operate.
First, install `react-hot-loader` as a dependency, this **must** be React Hot Loader v3+ (currently in beta):
#### Yarn
```bash
❯ yarn add react-hot-loader@next
```
#### npm
```bash
❯ npm install --save react-hot-loader@next
```
---
- From your `index` entry point (defaults to `src/index.js` from `neutrino.options.entry`), import an `AppContainer`
from `react-hot-loader`.
- Wrap your top-level React component in the `AppContainer`.
- Perform the application render in a reusable function for initial load and subsequent reloads.
- Add the `hot` acceptance to call this function.
For example:
```jsx
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import MyApp from './MyApp';
const load = () => render((
<AppContainer>
<MyApp />
</AppContainer>
), document.getElementById('root'));
if (module.hot) {
module.hot.accept('./MyApp', load);
}
load();
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-react.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-react.svg

275
packages/neutrino-preset-web/README.md

@ -3,14 +3,279 @@
`neutrino-preset-web` is a Neutrino preset that supports building generic applications for the web.
## Documentation
## Features
- Zero upfront configuration necessary to start developing and building a web app
- Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
- Webpack loaders for importing HTML, CSS, images, icons, and fonts
- Webpack Dev Server during development
- Automatic creation of HTML pages, no templating necessary
- Hot Module Replacement support
- Tree-shaking to create smaller bundles
- Production-optimized bundles with Babili minification and easy chunking
- Easily extensible to customize your project as needed
## Requirements
- Node.js v6.9+
- Yarn or npm client
- Neutrino v4
## Installation
`neutrino-preset-web` can be installed via the Yarn or npm clients. Inside your project, make sure
`neutrino` and `neutrino-preset-web` are development dependencies.
#### Yarn
```bash
❯ yarn add --dev neutrino neutrino-preset-web
```
#### npm
```bash
❯ npm install --save-dev neutrino neutrino-preset-web
```
## Project Layout
`neutrino-preset-web` follows the standard [project layout](https://neutrino.js.org/project-layout) specified by Neutrino. This
means that by default all project source code should live in a directory named `src` in the root of the
project. This includes JavaScript files, CSS stylesheets, images, and any other assets that would be available
to your compiled project.
## Quickstart
After installing Neutrino and the Web preset, add a new directory named `src` in the root of the project, with
a single JS file named `index.js` in it.
```bash
❯ mkdir src && touch src/index.js
```
This Web preset exposes an element in the page with an ID of `root` to which you can mount your application. Edit
your `src/index.js` file with the following:
```js
const app = document.createElement('main');
const text = document.createTextNode('Hello world!');
app.appendChild(text);
document.getElementById('root').appendChild(app);
```
Now edit your project's package.json to add commands for starting and building the application:
```json
{
"scripts": {
"start": "neutrino start --presets neutrino-preset-web",
"build": "neutrino build --presets neutrino-preset-web"
}
}
```
Start the app, then open a browser to the address in the console:
#### Yarn
```bash
❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed
```
#### npm
```bash
❯ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed
```
## Building
`neutrino-preset-web` builds static assets to the `build` directory by default when running `neutrino build`. Using the
quick start example above as a reference:
```bash
❯ yarn build
clean-webpack-plugin: /web/build has been removed.
Build completed in 0.779s
Hash: 55c33df4cd1222a03505
Version: webpack 2.2.1
Time: 784ms
Asset Size Chunks Chunk Names
index.52f2d06086f51d21f9c9.bundle.js 213 bytes 0, 1 [emitted] index
manifest.c10c6464802bf71a2c3f.bundle.js 1.41 kB 1 [emitted] manifest
index.html 779 bytes [emitted]
✨ Done in 2.10s.
```
You can either serve or deploy the contents of this `build` directory as a static site.
## Hot Module Replacement
While `neutrino-preset-web` supports Hot Module Replacement your app, it does require some application-specific changes
in order to operate. Your application should define split points for which to accept modules to reload using
`module.hot`:
For example:
```js
import app from './app';
document
.getElementById('root')
.appendChild(app('Hello world!'));
if (module.hot) {
module.hot.accept('./app');
}
```
Or for all paths:
```js
import app from './app';
document
.getElementById('root')
.appendChild(app('Hello world!'));
if (module.hot) {
module.hot.accept();
}
```
Using dynamic imports with `import()` will automatically create split points and hot replace those modules upon
modification during development.
## Customizing
To override the build configuration, start with the documentation on [customization](https://neutrino.js.org/customization).
`neutrino-preset-web` creates some conventions to make overriding the configuration easier once you are ready to make
changes.
By default the Web preset creates a single **main** `index` entry point to your application, and this maps to the
`index.js` file in the `src` directory. This value is provided by `neutrino.options.entry`.
This means that the Web preset is optimized toward the use case of single-page applications over multi-page
applications.
### Rules
The following is a list of rules and their identifiers which can be overridden:
- `compile`: Compiles JS files from the `src` directory using Babel. Contains a single loader named `babel`.
- `html`: Allows importing HTML files from modules. Contains a single loader named `file`.
- `style`: Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css`.
- `img`, `svg`, `ico`: Allows import image files from modules. Each contains a single loader named `url`.
- `woff`, `ttf`: Allows importing WOFF and TTF font files from modules. Each contains a single loader named `url`.
- `eot`: Allows importing EOT font files from modules. Contains a single loader named `file`.
### Plugins
The following is a list of plugins and their identifiers which can be overridden:
- `env`: Injects the value of `NODE_ENV` into the application as `process.env.NODE_ENV`.
- `html`: Creates HTML files when building. Has various options that can be configured via package.json.
- `chunk`: Defines chunks for `manifest` and `vendor` entry points. Can be configured via package.json.
- `hot`: Enables hot module reloading.
- `copy`: Copies non-JS files from `src` to `build` when using `neutrino build`.
- `clean`: Clears the contents of `build` prior to creating a production bundle.
- `progress`: Displays a progress bar when using `neutrino build`.
### Simple customization
By following the [customization guide](https://neutrino.js.org/customization/simple) and knowing the rule, loader, and plugin IDs above,
you can override and augment the build directly from package.json.
#### Vendoring
By defining an entry point in package.json named `vendor` you can split out external dependencies into a chunk separate
from your application code.
_Example: Put lodash into a separate "vendor" chunk:_
```json
{
"neutrino": {
"config": {
"entry": {
"vendor": [
"lodash"
]
}
}
},
"dependencies": {
"lodash": "*"
}
}
```
#### HTML files
Under the hood `neutrino-preset-web` uses [html-webpack-template](https://www.npmjs.com/package/html-webpack-template)
for generating HTML files. If you wish to override how these files are created, define an object in your package.json
at `neutrino.options.html` with options matching the format expected by html-webpack-template.
_Example: Change the application mount ID from "root" to "app":_
```json
{
"neutrino": {
"options": {
"html": {
"appMountId": "app"
}
}
}
}
```
### Advanced configuration
By following the [customization guide](https://neutrino.js.org/customization/advanced) and knowing the rule, loader, and plugin IDs above,
you can override and augment the build by creating a JS module which overrides the config.
#### Vendoring
By defining an entry point named `vendor` you can split out external dependencies into a chunk separate
from your application code.
_Example: Put lodash into a separate "vendor" chunk:_
```js
module.exports = neutrino => {
neutrino.config
.entry('vendor')
.add('lodash');
};
```
#### HTML files
_Example: Change the application mount ID from "root" to "app":_
```js
const merge = require('deepmerge');
module.exports = neutrino => {
neutrino.options.html.appMountId = 'app';
};
```
## Contributing
This preset is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
containing all resources for developing Neutrino and its core presets. Follow the
[contributing guide](https://neutrino.js.org/contributing) for details.
See the [Neutrino docs](https://neutrino.js.org/presets/neutrino-preset-web/)
for details on installation, getting started, usage, and customizing.
[npm-image]: https://img.shields.io/npm/v/neutrino-preset-web.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-web.svg
[npm-url]: https://npmjs.org/package/neutrino-preset-web
[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg
[slack-url]: https://neutrino-slack.herokuapp.com/
Loading…
Cancel
Save