Skip to content

Commit

Permalink
Add and implement a 'npm-library-typescript-rollup-api-extractor/' su…
Browse files Browse the repository at this point in the history
…bproject
  • Loading branch information
dgroomes committed Jun 18, 2022
1 parent a0c78c1 commit 3e7b1a0
Show file tree
Hide file tree
Showing 20 changed files with 1,684 additions and 1 deletion.
13 changes: 12 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ An example NPM-based library bundled with Rollup and an example NPM-based progra

See the README in [npm-library-rollup/](npm-library-rollup/).

## `npm-library-typescript-rollup-api-extractor/`

An example TypeScript library bundled with Rollup. The types are also bundled with API Extractor into a standalone `index.d.ts`.

See the README in [npm-library-typescript-rollup-api-extractor/](npm-library-typescript-rollup-api-extractor/).

## Reference

* [MDN web docs: JavaScript classes reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
Expand Down Expand Up @@ -95,7 +101,7 @@ Finished items:
* [x] DONE Incorporate the `draw-*.js` JS scripts into the `src/playground.js` runner script or detail the exact instructions to runs
these JS scripts.
* [x] DONE A JavaScript library bundled with Rollup
* [ ] A TypeScript library bundled with Rollup and API Extractor.
* [x] DONE A TypeScript library bundled with Rollup and API Extractor.
* This was implemented in `../npm-library-rollup/`
* [ ] Create an example project of: a JavaScript library bundled with Rollup and with multiple entry points (e.g. web
extensions use multiple entrypoints)
Expand All @@ -108,3 +114,8 @@ Finished items:
projects. For example, push `animals-library-*.tgz` into `npm-library/animals-library`. Also, in the READMEs of the `forest-story`
projects, use the `If needed, re-install `animals-library` style (a step) instead of explaining that step outside of
the instruction steps.
* [ ] Replace the 'I won't repeat the contents of the other README' mentions. This brings too much drag to the cognitive
load to the subprojects. Instead, repeat the contents. And better yet, cater the contents to the characteristics of the
project. Also, to prevent a Twilight Zone effect of "Wait didn't I just see a 'animals-library', where am I now?" be sure
to reference the other projects by name and as "Similar projects with different toolchains".
* [ ] Include source maps in the `npm-library*` projects.
3 changes: 3 additions & 0 deletions npm-library-typescript-rollup-api-extractor/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
animals-library-*.tgz
dist/
transpiled/
10 changes: 10 additions & 0 deletions npm-library-typescript-rollup-api-extractor/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# npm-library-typescript-rollup-api-extractor

An example TypeScript library bundled with Rollup. The types are bundled with API Extractor into a standalone `index.d.ts`.

## Description

This example project is a combination of the projects `../npm-libary-typescript/` and `../npm-libary-rollup/`. Please
study the README in those projects to better understand this one.

The [API Extractor](https://api-extractor.com/) tool is also in the mix.
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# animals-library

A TypeScript library that lists animal names. The library is bundled with Rollup. The types are bundled with API Extractor into a standalone `index.d.ts`.

## Instructions

Follow these instructions to build the `animals-library` distribution:

1. Use NPM version 8.5.5 or later
2. Install the dependencies:
* ```shell
npm install
```
3. Transpile the TypeScript:
* ```shell
npm run transpile
```
* Notice the directory `transpiled/` was created. It contains the JavaScript files that were transpiled from the
TypeScript source code and it also contains TypeScript declaration files (`.d.ts`). The `transpiled/` directory
represents an intermediate state of the build process. We still need to bundle the JavaScript code and bundle the
TypeScript declaration files.
4. Bundle the JavaScript code:
* ```shell
npm run bundle-js
```
* Notice that the file `dist/index.mjs` was created. This is the final bundled JavaScript that will be consumed
by programs depending on `animals-library`. But, for consuming programs written in TypeScript, we need to also offer
type definitions that describe the bundled JavaScript. See the next step.
* Bundle the TypeScript declaration file
* ```shell
npm run bundle-types
```
* Notice that the file `dist/index.d.ts` was created.
6. Package the library distribution:
* ```shell
npm pack
```
* Notice that the file `animals-library-0.1.0.tgz` was created.

## Reference

* [API Extractor](https://api-extractor.com/)
* The "API Extractor" tool seems to be a good answer to the question "How do you publish a TypeScript-based library?".
This is a project by Microsoft. It is part of a Microsoft monorepo called [`microsoft/rushstack`](https://github.com/microsoft/rushstack).
Of all organizations, Microsoft is a strong candidate to implement this kind of tool because of course, Microsoft is
the maintainer of TypeScript itself.
Loading

0 comments on commit 3e7b1a0

Please sign in to comment.