{"id":28600750,"url":"https://github.com/rxjs-ninja/nx-library-starter","last_synced_at":"2025-06-11T14:38:53.244Z","repository":{"id":54844955,"uuid":"315428528","full_name":"rxjs-ninja/nx-library-starter","owner":"rxjs-ninja","description":"A starter project that is set up using NX Monorepo to create new Typescript libraries for the web","archived":false,"fork":false,"pushed_at":"2021-01-25T22:44:18.000Z","size":361,"stargazers_count":36,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-28T21:43:32.860Z","etag":null,"topics":["example-project","monorepo","node","nx","rxjs","starter-project","starter-template","template","typedoc","typescript"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rxjs-ninja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-23T20:08:49.000Z","updated_at":"2023-11-05T10:19:54.000Z","dependencies_parsed_at":"2022-08-14T04:31:26.695Z","dependency_job_id":null,"html_url":"https://github.com/rxjs-ninja/nx-library-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxjs-ninja%2Fnx-library-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxjs-ninja%2Fnx-library-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxjs-ninja%2Fnx-library-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxjs-ninja%2Fnx-library-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rxjs-ninja","download_url":"https://codeload.github.com/rxjs-ninja/nx-library-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxjs-ninja%2Fnx-library-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259280892,"owners_count":22833473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example-project","monorepo","node","nx","rxjs","starter-project","starter-template","template","typedoc","typescript"],"created_at":"2025-06-11T14:38:52.041Z","updated_at":"2025-06-11T14:38:53.215Z","avatar_url":"https://github.com/rxjs-ninja.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RxJS Ninja Template Library\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/rxjs-ninja/rxjs-ninja/main/assets/logo.png\" width=\"150\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"150\"\u003e\n\u003c/p\u003e\n\nThis repository is a Github Template for generating Typescript libraries for the web with UMD and ESM compilation.\n\nIt's build using the [Nx](https://nx.dev) monorepo approach and is set up to allow for libraries to be developed with\ntheir own public API and compiled for use in any ECMAScript environment including node, framework or VanillaJS\napproaches.\n\n## Library Setup\n\nIncluded in this repo is\nthe [Example Library](https://github.com/rxjs-ninja/nx-library-starter/tree/main/libs/rxjs/example-lib) - a small RxJS\nlibrary that exports a `fizzbuzz` operator and an Observable `fromFizzbuzz` sequence generator.\n\nTo set this up I used `@nrwl/node` to generate the library:\n\n```\n\u003e nx g @nrwl/node:lib example-lib --directory=rxjs --publishable --importPath=@rxjs-ninja/example-lib\n```\n\nBy default this sets up a node-compatible library using CommonJS, but this can cause issues with modern frameworks for\nthe web.\n\nHere the builder options in the project are replaced in `workspace.json` to use the `@nrwl/web` builder with Babel and\nRollup, and add support for the readme and changelog:\n\n```json\n{\n  \"build\": {\n    \"builder\": \"@nrwl/web:package\",\n    \"options\": {\n      \"globals\": [\n        {\n          \"moduleId\": \"rxjs\",\n          \"global\": \"rxjs\"\n        },\n        {\n          \"moduleId\": \"rxjs/operators\",\n          \"global\": \"rxjs.operators\"\n        },\n        {\n          \"moduleId\": \"@rxjs-ninja/rxjs-utility\",\n          \"global\": \"RxjsUtility\"\n        }\n      ],\n      \"outputPath\": \"dist/libs/rxjs/example-lib\",\n      \"tsConfig\": \"libs/rxjs/example-lib/tsconfig.lib.json\",\n      \"project\": \"libs/rxjs/example-lib/package.json\",\n      \"entryFile\": \"libs/rxjs/example-lib/src/index.ts\",\n      \"external\": [\"rxjs\", \"@rxjs-ninja/rxjs-utility\"],\n      \"babelConfig\": \"@nrwl/web/babel\",\n      \"assets\": [\n        {\n          \"glob\": \"README.md\",\n          \"input\": \"libs/rxjs/example-lib/.\",\n          \"output\": \".\"\n        },\n        {\n          \"glob\": \"CHANGELOG.md\",\n          \"input\": \"libs/rxjs/example-lib/.\",\n          \"output\": \".\"\n        }\n      ]\n    }\n  }\n}\n```\n\nThis also needs the `babel.config.json` and `.babelrc` files.\n\nIn the library `tsconfig.lib.json` the `module` property needs to be changed from `commonjs` to `es2015`.\n\nSee the example folder for full details of the setup.\n\nNow when running `nx build rxjs-example-lib` a version of the library is built that can be used in any environment\nincluding the web.\n\n## Running unit tests\n\nThe unit tests in the library use [marble diagrams](https://rxmarbles.com/) to provide the data to the operators. Jest\nis integrated using [rxjs-marbles](https://www.npmjs.com/package/rxjs-marbles) and provides full code coverage too.\n\nRun `nx test rxjs-example-lib --codeCoverage` to execute the unit tests via [Jest](https://jestjs.io).\n\nRun `nx affected:test` to execute the unit tests affected by a change.\n\n## Generating Docs\n\nRun `npm run docs` to generate docs using [Typedoc](https://typedoc.org) and output to the `doc` folder.\n\nThis also uses [typedoc-plugin-external-module-name](https://www.npmjs.com/package/typedoc-plugin-external-module-name)\nto provide better support for a module layout in documentation\n\n## Github Action Pipeline\n\nIn the `.github` folder there are some YAML and Bash scripts provided that I have developed for working with NX\nMonorepos and publishing libraries with changelogs and documentation.\n\n## Using the UMD Library\n\nWhen the library is published it can be used as a UMD library using [unpkg](https://unpkg.com) - here is an example\nof `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.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eTesting\u003c/title\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv\u003eRandom Number: \u003cspan class=\"output\"\u003e\u003c/span\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\n  \u003cscript src=\"https://unpkg.com/rxjs/bundles/rxjs.umd.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/@rxjs-ninja/rxjs-random/rxjs-random.umd.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/@rxjs-ninja/rxjs-number/rxjs-number.umd.js\"\u003e\u003c/script\u003e\n\n  \u003cscript module\u003e\n    const output = document.querySelector('.output');\n\n    const { tap } = rxjs.operators;\n    const { fromRandom } = RxjsRandom;\n    const { roundTo } = RxjsNumber;\n    fromRandom(0, 1, 1000)\n      .pipe(\n        roundTo(4),\n        tap(console.log),\n        tap((value) =\u003e (output.innerHTML = value)),\n      )\n      .subscribe();\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n## Further help\n\nVisit the [Nx Documentation](https://nx.dev) to learn more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frxjs-ninja%2Fnx-library-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frxjs-ninja%2Fnx-library-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frxjs-ninja%2Fnx-library-starter/lists"}