generator-typescript-react-lib

generator-typescript-react-lib

A Yeoman generator for React libs written with Typescript.

Table of Contents

• Background
• Features
• Installation
• Common Workflows
  • Setup
  • Development
  • Testing
  • Publishing
• License

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