@lunde/create-react-pkg

An @inst-pkg template for creating new TypeScript packages

Usage no npm install needed!

<script type="module">
  import lundeCreateReactPkg from 'https://cdn.skypack.dev/@lunde/create-react-pkg';
</script>

README

@lunde/create-react-pkg

This is an inst template for creating React packages with or without TypeScript.

📦 What's in the ****ing box?

Packages are created with a variety of build tools that make your life easier

Build tools

Library Description
Babel 7 For compiling jsx and ES6 code to ES5
Jest For testing components
Prettier For formatting code, READMEs, and configs
ESLint For linting the application
Yarn For deterministic builds and monorepos
Travis CI (Optional) For continuous integration
TypeScript (Optional) For adding type definitions to your package

🔧 Usage

# Use `npx`
npx @lunde/create-react-pkg my-pkg

# Or install it globally
yarn global add @lunde/create-react-pkg
create-react-pkg my-pkg --ts

Arguments

create-react-pkg <name> [--ts]

Argument Type Required Description
name string true The name of the package you're creating. This is also the name of the directory the package will be created in.
--ts boolean false Creates a TypeScript package

📜 Package scripts

build

Builds types (if --ts), commonjs, and ECMAScript distributions

build-main

Builds the commonjs distribution

build-module

Builds the ECMAScript distribution

format

Formats src and dist directories with prettier as defined by .prettierrc

lint

Runs eslint on the package source

prepublishOnly

Runs before the package is published. This calls lint, build, test, and format scripts

test

Tests the package with jest as defined by options in package.json -> jest

validate

Runs check-types (if --ts), lint, test, and format scripts

🚨 TypeScript-specific scripts

build-types

Builds the TypeScript type definitions

check-types

Runs a type check on the project using the local tsconfig.json

🐺 Husky hooks

pre-commit

Runs lint-staged and the build-types script

💨 Lint staged

Used for calling commands on git staged files that match a glob pattern

**/*.{ts,tsx,js,jsx}

Calls eslint and prettier --write to lint and format the staged files

**/*.{md,yml,json,eslintrc,prettierrc}

Calls prettier --write to format the staged files

LICENSE

MIT