@simonrelet/react-libraries

Configuration and scripts for React libraries.

⚠️ Warning: The current master can represent unreleased features. See lastest release.

Installation

npm

npm install --save-dev @simonrelet/react-libraries

yarn

yarn add @simonrelet/react-libraries -D

Scripts

build

Build the library JavaScript and styles.

Usage:

react-libraries build [options]

Options:

• -i, --ignore=pattern: Glob pattern to ignore from JavaScript build. The files ignored by default are:
  • **/*.spec.js
  • **/*.test.js
  • **/*.stories.js
  • **/__tests__/**
  • **/__mocks__/**
  • src/setupTests.js
• -c, --copy=pattern: Glob pattern to copy to the output folder.
• -s, --sass=entryFile: The SASS entry point, src/index.scss by default.
• -w, --watch: Watch the files and rebuild in case of changes.

In order to build in CommonJS the entry package.json#main must point to the output folder. Ex: "main": "build/cjs".

In order to build in ES modules the entry package.json#module must point to the output folder. Ex: "module": "build/es".

In order to build SASS styles the entry package.json#style must point to the output file. Ex: "style": "build/my-lib.css".

Examples:

react-libraries build
react-libraries build --watch
react-libraries build --copy "src/**/*.ts" --copy="src/_mixins.scss"
react-libraries build -s "src/main.scss"
react-libraries build -i "src/**/*.doc.js" --ignore "src/renderTests.js"

bump-version

Update the new version number in the project.

Usage:

react-libraries bump-version [options] <new-verison>

Options:

• -r, --readme=templatePath: Path of the template file to use, README-template.md by default.
• --skip-check: Allow version numbers lower than the current one.

The files that will be updated are:

• package.json: The version field is updated.
• package-lock.json (if it exists): The version field is updated.
• CHANGELOG.md (if it exists): The "Unreleased" section is renamed to "<new-version> (date)".
• README.md (if the template file exists): See the readme script.

Examples:

react-libraries bump-version 2.3.0
react-libraries bump-version -t "template-README.md" 5.0.0-alpha.2

clean

Clean the project.

Usage:

react-libraries clean [folders]

The folders removed by default are:

• build/
• build-storybook/
• coverage/

Examples:

react-libraries clean
react-libraries clean .docz .tmp

readme

Generate a README.md file from a template.

Usage:

react-libraries readme [options]

Options:

• -t, --template=templatePath: Path of the template file to use, README-template.md by default.

Examples:

react-libraries readme
react-libraries readme --template="template-README.md"

README template

The README.md file can be generated from a template file allowing you to inject values from your package.json. You can use the syntax {{path}} where path is any valid object path in package.json. An injection will be skipped if path isn't found in package.json or if the path is prefixed with a ! ({{!path}}). In which case the ! will be removed from the output.

Example:

package.json

{
  "name": "my-lib",
  "description": "Library of things.",
  "version": "1.0.0",
  "unpkg": "build/umd/my-lib.production.min.js",
  "unpkg-dev": "build/umd/my-lib.development.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/me/my-lib"
  }
}

README-template.md

# {{name}}

{{description}}

## Installation

### npm

```sh
npm install --save {{name}}
```

### yarn

```sh
yarn add {{name}}
```

### UMD

- Production: https://unpkg.com/{{name}}@{{version}} or https://unpkg.com/{{name}}@{{version}}/{{unpkg}}
- Development: https://unpkg.com/{{name}}@{{version}}/{{unpkg-dev}}

## Documentation

The documentation can be found [here]({{repository.url}}/tree/{{version}}/docs).

README.md

# my-lib

Library of things.

## Installation

### npm

```sh
npm install --save my-lib
```

### yarn

```sh
yarn add my-lib
```

### UMD

- Production: https://unpkg.com/[email protected] or https://unpkg.com/[email protected]/build/umd/my-lib.production.min.js
- Development: https://unpkg.com/[email protected]/build/umd/my-lib.development.js

## Documentation

The documentation can be found [here](https://github.com/me/my-lib/tree/1.0.0/docs).

test

Launches the test with Jest.

Usage:

react-libraries test [options]

Options:

• --coverage: Compute the coverage.

The default Jest coverage configuration can be overridden by adding any of the following supported keys to a Jest config in your package.json.

Supported overrides:

• collectCoverageFrom
• coverageReporters
• coverageThreshold
• snapshotSerializers

Example of package.json:

{
  "name": "my-lib",
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/**/*.stories.js",
      "!src/**/*.doc.js",
      "!src/**/index.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 90,
        "lines": 90,
        "statements": 90
      }
    },
    "coverageReporters": ["text"],
    "snapshotSerializers": ["my-serializer-module"]
  }
}

Examples:

react-libraries test
react-libraries test --coverage
env CI=true react-libraries test