create-typescript-react-library

create-typescript-react-library

This starter enables simple creation of libraries using TypeScript.

Features

• rollup for smallest bundles
• tests with jest (+coverage)
• generates type declarations
• esm, cjs and umd (script tag) exports
• admin (code of conduct, contributing instructions)
• interactive setup script
• automated semantic releases
• automated api docs generation
• add react with a single command
• context-dependent start script (tdd jest, plus storybook for react)

Requirements

• curl
• git
• node
• yarn

Setup

Step 1. Local setup

yarn create typescript-react-library <yourdir>
cd <yourdir>

# install dependencies
yarn
# start setup
yarn ctrl setup
# re-init history
rm -rf .git
git init
# if adding react
yarn ctrl add-react
# create repo and push changes
git add -A
git commit -m 'Initial commit' --no-verify
git remote add origin https://github.com/<user>/<repo>.git
git push -u origin main

Step 2. Github setup

• Create an NPM token: https://docs.npmjs.com/creating-and-viewing-authentication-tokens
• Create a Github repo of the same name that you selected in the setup script
• Add the NPM token to your repository's secrets: your-repo > Settings > Secrets > New Secret NPM_TOKEN=<your token from Step 1>

Step 3. Go!

yarn start

I'm not creating a React library

yarn remove react react-dom

Also, my library is for node, not the browser

Remove the browser key in package.json.

Pointers

• If you want to bundle a package you're importing, stick it in dependencies. If you'd like the user of your library to install it as a peer dependency, install it as a peer dependency
  • Peer dependencies in web (umd) builds are imported by getting it from the window object. Web versions of different dependencies often use different global names (window.$ might be used in import ... from "jquery"). For web builds to work, you'll have to add the correct global name to the knownDependencyNames map in rollup.config.js