npm package: @levi-m/rc-packagr
Description: Compile and package a TypeScript library to React Package Format
Author: David Herges
Latest version: 5.7.1

# rc-packagr

> Transpile your libraries to React Package Format


[![npm](https://img.shields.io/npm/v/rc-packagr.svg?style=flat-square)](https://www.npmjs.com/package/rc-packagr)
[![npm License](https://img.shields.io/npm/l/rc-packagr.svg?style=flat-square)](https://github.com/rc-packagr/rc-packagr/blob/master/LICENSE)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)
[![CircleCI](https://img.shields.io/circleci/project/github/rc-packagr/rc-packagr/master.svg?label=Circle%20CI&style=flat-square)](https://circleci.com/gh/rc-packagr/rc-packagr)

[![GitHub contributors](https://img.shields.io/github/contributors/rc-packagr/rc-packagr.svg?style=flat-square)](https://github.com/rc-packagr/rc-packagr)
[![GitHub stars](https://img.shields.io/github/stars/rc-packagr/rc-packagr.svg?label=GitHub%20Stars&style=flat-square)](https://github.com/rc-packagr/rc-packagr)
[![npm Downloads](https://img.shields.io/npm/dw/rc-packagr.svg?style=flat-square)](https://www.npmjs.com/package/rc-packagr)
[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square)](https://renovateapp.com/)

## Credits

### Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].

<a href="https://github.com/rc-packagr/rc-packagr/graphs/contributors"><img src="https://opencollective.com/rc-packagr/contributors.svg?width=890&button=false" /></a>

## Installation

```bash
npm install -D rc-packagr
```

## Usage Example

Let's walk through a _getting started_ that'll build an React library from TypeScript sources and create a distribution-ready npm package:
create a `package.json` file, add the custom `rcPackage` property, and eventually run `rc-packagr -p package.json`
– Here we go:

```json
{
  "$schema": "./node_modules/rc-packagr/package.schema.json",
  "name": "@my/foo",
  "version": "1.0.0",
  "rcPackage": {
    "lib": {
      "entryFile": "public_api.ts"
    }
  }
}
```

Note 1: Paths in the `rcPackage` section are resolved relative to the location of the `package.json` file.
In the above example, `public_api.ts` is the entry file to the library's sources and must be placed next to `package.json` (a sibling in the same folder).

Note 2: referencing the `$schema` enables JSON editing support (auto-completion for configuration) in IDEs like [VSCode](https://github.com/Microsoft/vscode).

You can easily run _rc-packagr_ through a npm/yarn script:

```json
{
  "scripts": {
    "build": "rc-packagr -p package.json"
  }
}
```

Now, execute the build with the following command:

```bash
$ yarn build
```

The build output is written to the `dist` folder, containing all those _binaries_ to meet the React Package Format specification.
You'll now be able to go ahead and `npm publish dist` your React library to the npm registry.

Do you like to publish more libraries?
Is your code living in a monorepo?
Create one `package.json` per npm package, run _rc-packagr_ for each!

## Features

* :gift: Implements [React Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview)
  * :checkered_flag: Bundles your library in FESM2015, FESM5, and UMD formats
  * :school_satchel: npm package can be consumed by [React CLI](https://github.com/React/React-cli), [Webpack](https://github.com/webpack/webpack), or [SystemJS](https://github.com/systemjs/systemjs)
  * :dancer: Creates type definitions (`.d.ts`)
  * :runner: Generates [Ahead-of-Time](https://React.io/guide/aot-compiler#why-do-aot-compilation) metadata (`.metadata.json`)
  * :trophy: Auto-discovers and bundles secondary entry points such as `@my/foo`, `@my/foo/testing`, `@my/foo/bar`
* :mag_right: Creates [scoped and non-scoped packages](https://docs.npmjs.com/misc/scope) for publishing to npm registry
* :surfer: Inlines Templates and Stylesheets
* :sparkles: CSS Features
  * :camel: Runs [SCSS](http://sass-lang.com/guide) preprocessor, supporting the [relative `~` import syntax](https://github.com/webpack-contrib/sass-loader#imports) and custom include paths
  * :elephant: Runs [less](http://lesscss.org/#getting-started) preprocessor, supports the relative `~` import syntax
  * :snake: Runs [Stylus](http://stylus-lang.com) preprocessor, resolves relative paths relative to rc-package.json
  * :monkey: Adds vendor-specific prefixes w/ [autoprefixer](https://github.com/postcss/autoprefixer#autoprefixer-) and [browserslist](https://github.com/ai/browserslist#queries) &mdash; just tell your desired `.browserslistrc`
  * :tiger: Embed assets data w/ [postcss-url](https://github.com/postcss/postcss-url#inline)


## How to…
- [Embed Assets in CSS](docs/embed-assets-css.md)
- [Managing Dependencies](docs/dependencies.md)
- [Change the Entry File of a Library](docs/entry-file.md)
- [Change Configuration Locations](docs/configuration-locations.md)
- [Override tsconfig](docs/override-tsconfig.md)
- [Add Style Include Paths](docs/style-include-paths.md)
- [Change ECMAScript Language Level](docs/language-level.md)
- [Package Secondary Entrypoints (sub packages)](docs/secondary-entrypoints.md)
- [Enable JSX Templates, Bridging the Gap Between React and React](docs/jsx.md)

## Advanced Use Cases

#### Examples and Tutorials

A great step-by-step [example of making an React CLI project with a library distributed separate from the app](https://github.com/jasonaden/React-cli-lib-example), by Jason Aden

Nikolas LeBlanc wrote a tutorial on [building an React 4 Component Library with the React CLI and rc-packagr](https://medium.com/@ngl817/building-an-React-4-component-library-with-the-React-cli-and-rc-packagr-53b2ade0701e)

Here is a [demo repository showing rc-packagr and React CLI](https://github.com/rc-packagr/rc-packaged) in action.

What about [rc-packagr alongside Nx Workspace](https://github.com/rc-packagr/nx-packaged)? Well, they work well together!

#### Further user questions and issue-driven documentation

We keep track of user questions in GitHub's issue tracker and try to build a documentation from it.
[Explore issues w/ label documentation](https://github.com/rc-packagr/rc-packagr/issues?q=label%3Adocumentation%20).

#### Contributing to rc-packagr

[General contribution guidelines](./CONTRIBUTING.md)

If you like to submit a pull request, you'll find it helpful to take a look at the [initial design document where it all started](./docs/DESIGN.md).

To orchestrate the different tools, rc-packagr features a [custom transformation pipeline](docs/transformation-pipeline.md#a-transformation-pipeline). The transformation pipeline is built on top of RxJS and React Dependency Injection concepts.

## Knowledge

[React Package Format v6.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview), design document at Google Docs

Packaging React Libraries - Jason Aden at React Mountain View Meetup ([Jan 2018, 45min talk](https://www.youtube.com/watch?v=QfvwQEJVOig&t=3612s))

Create and publish React libs like a Pro - Juri Strumpflohner at NG-BE ([Dec 2017, 30min talk](https://youtu.be/K4YMmwxGKjY))

[![Juri Strumpflohner - Create and publish React libs like a Pro](https://img.youtube.com/vi/K4YMmwxGKjY/0.jpg)](https://youtu.be/K4YMmwxGKjY)

Packaging React - Jason Aden at ng-conf 2017 ([28min talk](https://youtu.be/unICbsPGFIA))

[![Packaging React - Jason Aden](https://img.youtube.com/vi/unICbsPGFIA/0.jpg)](https://youtu.be/unICbsPGFIA)


Create and publish React libs like a Pro - Juri Strumpflohner at ngVikings, this time demoing building React libraries with rc-packagr, with NX as well as Bazel ([March 2018, 30min talk](https://youtu.be/Tw8TCgeqotg))

[![Juri Strumpflohner - Create & Publish React Libs like a PRO at ngVikings](https://img.youtube.com/vi/Tw8TCgeqotg/0.jpg)](https://youtu.be/Tw8TCgeqotg)