es-react-bridge

A tsdx-driven React component library that can be published to NPM. Created to transition ExpandShare from Angular to React.

React Tranistion Diagram

NPM

Usage

Installation

npm install es-react-bridge @bubblydoo/angular-react

import { AngularReactModule } from '@bubblydoo/angular-react'

@NgModule({
  ...,
  imports: [
    ...,
    AngularReactModule
  ]
})

Example

import { ExampleComponent } from 'es-react-bridge'

@Component({
  template: `<react-wrapper [component]="ExampleComponent" [props]="{ children: 'Hello world!' }">`
})
class AppComponent {
  ExampleComponent = ExampleComponent
}

Development

src - stores components, services, state mgmt, etc. The contents of this folder are built and packaged to NPM.

example - contains a Parcel React app that can be used to render and test the package locally.

dist - contains build output

Installation

Run tsdx:

git clone https://github.com/repo...
cd es-react-bridge
npm start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

One-off build:

npm run build

Using Parcel Example

The playground is a simple Parcel app. It can be used in development to simulate the eventual React app. I want to replace Parcel with Create React App since that'll be the final library (Parcel came with tsdx).

Run example in another terminal:

cd example
npm install
npm start

Imports and live reloads /dist.

Bundle analysis

Calculate and visualize real cost of library using size-limit:

npm run size
npm run analyze

Publishing to NPM

Upgrade the version field in package.json, then run publish.

npm publish