https://github.com/rxjs-ninja/nx-library-starter
A starter project that is set up using NX Monorepo to create new Typescript libraries for the web
https://github.com/rxjs-ninja/nx-library-starter
example-project monorepo node nx rxjs starter-project starter-template template typedoc typescript
Last synced: 19 days ago
JSON representation
A starter project that is set up using NX Monorepo to create new Typescript libraries for the web
- Host: GitHub
- URL: https://github.com/rxjs-ninja/nx-library-starter
- Owner: rxjs-ninja
- License: mit
- Created: 2020-11-23T20:08:49.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-25T22:44:18.000Z (over 4 years ago)
- Last Synced: 2024-05-28T21:43:32.860Z (about 1 year ago)
- Topics: example-project, monorepo, node, nx, rxjs, starter-project, starter-template, template, typedoc, typescript
- Language: Shell
- Homepage:
- Size: 353 KB
- Stars: 36
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RxJS Ninja Template Library
This repository is a Github Template for generating Typescript libraries for the web with UMD and ESM compilation.
It's build using the [Nx](https://nx.dev) monorepo approach and is set up to allow for libraries to be developed with
their own public API and compiled for use in any ECMAScript environment including node, framework or VanillaJS
approaches.
## Library Setup
Included in this repo is
the [Example Library](https://github.com/rxjs-ninja/nx-library-starter/tree/main/libs/rxjs/example-lib) - a small RxJS
library that exports a `fizzbuzz` operator and an Observable `fromFizzbuzz` sequence generator.
To set this up I used `@nrwl/node` to generate the library:
```
> nx g @nrwl/node:lib example-lib --directory=rxjs --publishable --importPath=@rxjs-ninja/example-lib
```
By default this sets up a node-compatible library using CommonJS, but this can cause issues with modern frameworks for
the web.
Here the builder options in the project are replaced in `workspace.json` to use the `@nrwl/web` builder with Babel and
Rollup, and add support for the readme and changelog:
```json
{
"build": {
"builder": "@nrwl/web:package",
"options": {
"globals": [
{
"moduleId": "rxjs",
"global": "rxjs"
},
{
"moduleId": "rxjs/operators",
"global": "rxjs.operators"
},
{
"moduleId": "@rxjs-ninja/rxjs-utility",
"global": "RxjsUtility"
}
],
"outputPath": "dist/libs/rxjs/example-lib",
"tsConfig": "libs/rxjs/example-lib/tsconfig.lib.json",
"project": "libs/rxjs/example-lib/package.json",
"entryFile": "libs/rxjs/example-lib/src/index.ts",
"external": ["rxjs", "@rxjs-ninja/rxjs-utility"],
"babelConfig": "@nrwl/web/babel",
"assets": [
{
"glob": "README.md",
"input": "libs/rxjs/example-lib/.",
"output": "."
},
{
"glob": "CHANGELOG.md",
"input": "libs/rxjs/example-lib/.",
"output": "."
}
]
}
}
}
```
This also needs the `babel.config.json` and `.babelrc` files.
In the library `tsconfig.lib.json` the `module` property needs to be changed from `commonjs` to `es2015`.
See the example folder for full details of the setup.
Now when running `nx build rxjs-example-lib` a version of the library is built that can be used in any environment
including the web.
## Running unit tests
The unit tests in the library use [marble diagrams](https://rxmarbles.com/) to provide the data to the operators. Jest
is integrated using [rxjs-marbles](https://www.npmjs.com/package/rxjs-marbles) and provides full code coverage too.
Run `nx test rxjs-example-lib --codeCoverage` to execute the unit tests via [Jest](https://jestjs.io).
Run `nx affected:test` to execute the unit tests affected by a change.
## Generating Docs
Run `npm run docs` to generate docs using [Typedoc](https://typedoc.org) and output to the `doc` folder.
This also uses [typedoc-plugin-external-module-name](https://www.npmjs.com/package/typedoc-plugin-external-module-name)
to provide better support for a module layout in documentation
## Github Action Pipeline
In the `.github` folder there are some YAML and Bash scripts provided that I have developed for working with NX
Monorepos and publishing libraries with changelogs and documentation.
## Using the UMD Library
When the library is published it can be used as a UMD library using [unpkg](https://unpkg.com) - here is an example
of `RxJS` with two libraries from [RxJS Ninja](https://rxjs.ninja) on a basic HTML page. A [StackBlitz Example](https://stackblitz.com/edit/rxjs-ninja-umd-example?file=index.html) is available.
```html
Testing
Random Number:
const output = document.querySelector('.output');
const { tap } = rxjs.operators;
const { fromRandom } = RxjsRandom;
const { roundTo } = RxjsNumber;
fromRandom(0, 1, 1000)
.pipe(
roundTo(4),
tap(console.log),
tap((value) => (output.innerHTML = value)),
)
.subscribe();
```
## Further help
Visit the [Nx Documentation](https://nx.dev) to learn more.