generator-typescript-react-lib

A Yeoman generator for React libs written with Typescript.


Keywords
library, react, typescript, yeoman-generator
License
MIT
Install
npm install generator-typescript-react-lib@1.0.177

Documentation

generator-typescript-react-lib

npm version build status coverage status npm downloads

A Yeoman generator for React libs written with Typescript.

Table of Contents

Background

To provide a basic starting point when authoring React libraries with Typescript. By design not all use-cases will be handled, so some post-generation modifications may be required.

Features

  • Generates CommonJS, ES module, and Universal Module Definition bundles via Rollup.
  • Tests bundles via Jest.
  • Generates Typescript type declarations for publishing.
  • Outputs, strips, or wraps PropTypes declarations according to bundle type.
  • Configures continuous integration via GitHub Actions.
  • Configures code coverage analysis via Codecov.
  • Configures Renovate for dependency management.
  • Adds scripts for releasing to npm.
  • Makes Universal Module Definition bundles available via unpkg.
  • Initialises Git.

Installation

First, install Yeoman and generator-typescript-react-lib:

$ npm install -g yo generator-typescript-react-lib

Then generate your new library:

$ mkdir your-new-react-library && cd $_
$ yo typescript-react-lib

Common Workflows

Setup

  1. Create a new GitHub repository.
  2. Install/enable the Renovate GitHub app.
  3. Use this generator to create your lib.

Development

Everything revolves around GitHub PRs:

  1. Create a new local branch.
  2. Add a remote tracking branch.
  3. Make some changes.
  4. Push the changes.
  5. Open a PR.

It's also recommended to set branch protection rules against the master branch by selecting the following:

  • Require status checks to pass before merging.
  • Require branches to be up to date before merging.
  • ci.

Testing

Running npm test will:

  • Check code style with Prettier.
  • Type check with TypeScript.
  • Build the package assets.
  • Test the package assets.

Publishing

Once the PR checks have passed:

  1. Merge the PR.
  2. Checkout the master branch.
  3. Ensure master is up-to-date.
  4. Run npm release <newversion>. Refer to the npm-version docs for information on the newversion argument.

The release script will:

  1. Bump the package.json version.
  2. Run the test flow.
  3. Generate a CHANGELOG.md that includes these latest changes.
  4. Generate or update the AUTHORS file.
  5. Make a version commit and tag.
  6. Push the commit and tag to GitHub.
  7. Publish the package to npm.

License

MIT