chore: build project to emit cjs and esm using rollup

amoshydra commented 6 months ago

Edit 1: Updated base on commit 759f5b7

Summary

⚠ BREAKING CHANGE: distribution layout has been significantly changed

Support both cjs and mjs output using rollup.

The package.json now includes the modern exports field and the legacy main, modules and typings fields to ensure compatibiilty with older Node runtime / bundler

Related to

Related to #61

Motivation

To resolve #61

How is this tested

Fixtures for the different environments

✔ retested for 759f5b7910d6d46982e1f8a329a2fd7ef9b91a1a (code identical with latest @ d4c890941a372f6bea8c2c36d899a4c8f6ebd0c8)

I have created a repository hosting the 4 test environments below here: https://github.com/amoshydra/repro-jessealama-decimal128/tree/ref-759f5b791

browser importing mjs
nodejs [type="module"] importing mjs
nodejs [type="commonjs"] importing cjs
bundler (vite --> rollup / esbuild) importing mjs

browser mjs	nodejs cjs	nodejs mjs	vite mjs

Layout change in npm package

This layout change does not really affect the consumer using a bundler, TypeScript or NodeJS as they will continue to import the package via one of the following ways:

// esm
import { Decimal128 } from "decimal128";
// cjs
const { Decimal128 } = require("decimal128");

Before

Files are exported from src

src
├── common.d.mts
├── common.mjs
├── common.mts
├── decimal128.d.mts
├── decimal128.mjs
├── decimal128.mts
├── rational.d.mts
├── rational.mjs
└── rational.mts

After

Files are exported from dist

dist
├── cjs
│   ├── common.cjs
│   ├── common.cjs.map
│   ├── common.d.mts
│   ├── decimal128.cjs
│   ├── decimal128.cjs.map
│   ├── decimal128.d.mts
│   ├── rational.cjs
│   ├── rational.cjs.map
│   └── rational.d.mts
└── esm
    ├── common.d.mts
    ├── common.mjs
    ├── common.mjs.map
    ├── decimal128.d.mts
    ├── decimal128.mjs
    ├── decimal128.mjs.map
    ├── rational.d.mts
    ├── rational.mjs
    └── rational.mjs.map

amoshydra commented 6 months ago

With the new understanding that tests and examples are suppose to run on transpiled code. I have updated the approach to do thing differently.

`output.preserveModules: true`

Because the tests still imports round.mjs and rational.mjs, in the new commit, I have used the output.preserveModules flag to keep the module structure.

Usage of preserveModules require us to output the build files into their own folder. In this PR, I have choose to output esm and cjs to their respective folder accordingly.

Before this option

dist
├── common.d.mts      
├── decimal128.cjs    
├── decimal128.cjs.map
├── decimal128.d.mts  
├── decimal128.mjs
├── decimal128.mjs.map
└── rational.d.mts

After this option

dist
├── cjs
│   ├── common.cjs
│   ├── common.cjs.map
│   ├── common.d.mts
│   ├── decimal128.cjs
│   ├── decimal128.cjs.map
│   ├── decimal128.d.mts
│   ├── rational.cjs
│   ├── rational.cjs.map
│   └── rational.d.mts
└── esm
    ├── common.d.mts
    ├── common.mjs
    ├── common.mjs.map
    ├── decimal128.d.mts
    ├── decimal128.mjs
    ├── decimal128.mjs.map
    ├── rational.d.mts
    ├── rational.mjs
    └── rational.mjs.map

Notice rational and common are kept as its own module

Tests

Tests and coverage can now run like how it previously was

Workflow

Workflow file has been update to include npm run build command: https://github.com/jessealama/decimal128/commit/759f5b7910d6d46982e1f8a329a2fd7ef9b91a1a#diff-1790f2f8b7123d50d46235053b54f1cc5996bc7388b803aad4233fd5582e0bad

-              run: npx tsc
+              run: npm run build && npx tsc

jessealama commented 6 months ago

Thanks so much for your interest in this!

Could you please rebase on the newly changed main branch?

amoshydra commented 6 months ago

sure! rebased onto cf135fdfe77ef7d61cbdbf846191f9ab826ddbc6 @ https://github.com/jessealama/decimal128/pull/93#event-12426158633

jessealama / decimal128