One (typescript) size fits all

One (typescript) size fits all

How to write a typescript library, which can be used by i.e. shared with different javascript clients, regardless of their module technology (CommonJS, ECMAScript or Typescript)?

Objective

Write a single Typescript library and publish it to serve multiple javascript clients. In other words:

  • develop a library using exclusively Typescript (a superset of Javascript including type checking a.o.t)
  • publish the library as a bundle of different artifact versions:
    • a CommonJS module artifact
    • a ECMAScript module artifact
    • a Typescript module artifact

Context

Don't repeat yourself!

That's a reasonable and advisable software development best practice:

write once & use everywhere!
or
one-for-all!

The Use case

A project is implementing some "nice functionality" that  should be made available  to (i.e. shared with) other "client" projects, hence avoiding to re-implement the same functionality everytime.

The problem

The client projects may use a technology stack which is different than the one used to implement the library. Only common denominator: it's somehow "Javascript".

In particular, Javascript projects may be based on a CommonJS (CJS), an ECMAScript (ESM) or Typescript (TS) module technology.

Thus, the "re-usable" library should provide its functionality in the appropriate format - which is in fact not as easy as expected.

Solution

The opensource project "one-ts-for-all" is intended as a Proof-of-Concept, demonstrating how to easily achieve the objective described above using Typescript as a source technology and publishing ESM, CJS and TS artifacts all at once, without any supplemental human intervention/implementation.

input one - output many - use any
  • The technical implementation details can be found in the project documentation on the Github Repository: how-to-implement-one-for-all.
  • 3 "Sample client projects" are provided (see the examples folder):
    • a NodeJS application using the CommonJS artifact version of the library
    • a pure Browser application using the ECMAScript artifact version of the library (only supported by modern browsers)
    • an Angular web application using Typescript artifact version of the library

Conclusion

Yes you can! The PoC is succesful:

  • The Typescript source code is maintained in a single Github repository:
    ONE SOURCE OF TRUTH!
  • The library package containing the shareable Javascript artifacts (ESM, CJS and TS) is managed within an NPM repository.
    ONE PROVIDER FOR MULTIPLE CLIENT TECHNOLOGIES!
  • The client projects using the library are able to target the appropriate Javascript artifacts (CJS, ESM or TS version) from the package.
    (RE-)USE FUNCTIONALITY EVERYWHERE!

Addendum

The PoC is also demonstrating:

  • how to implement a CLI application written in Typescript and publish it as a nodeJS executable.
  • how to separate concerns i.e. source code and package artifacts: manage the source code with a code repository like Github and manage the package artifacts with a package repository like NPM.
  • how to use ECMAScript modules (ESM) in a web browser application (see the "Sample Browser Application" in the source code repo).
  • how to use/integrate a Library containing Typescript artifacts in a Typescript client project (see the "Sample Angular Application" in the source code repo)

Show Comments