Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: publish both ESM and CommonJS #63

Merged
merged 9 commits into from
Sep 25, 2024
Merged

feat: publish both ESM and CommonJS #63

merged 9 commits into from
Sep 25, 2024

Conversation

pvditto
Copy link
Contributor

@pvditto pvditto commented Sep 16, 2024

Currently, the library is distributed as a commonjs module, which at this point is starting to cause issues with frameworks that only support ES modules. To solve this, both a commonjs and esm version is exported.

Build output and package.json changes

This PR updates the published package.json to use an exports field to define conditional exports dependent on the method of importing. The main field, and a new module field, in package.json are kept as a fallback. The commonjs and esm sources are published in separate directories, using separate Typescript configs, and using new scripts configured in package.json. Running the npm run build script still runs all required steps to create a distributable package.

As ESM packages need to explicitly set a type field in their package.json marking them as such, a helper script injects a minimal additonal package.json into the two cjs and esm subdirectories. Otherwise, importing the esm version would fail as it would be considered a commonjs module by default in many tools.

Typescript Configuration Changes

The Typescript-exported sourcemaps are updated to inline the original module source so that source map and original source don't have to be included both in order to facilitate source mapping.

Supported ES syntax is updated to support the latest syntax for writing react-ditto by using the EXNext configuration.

debatable: The target ES version of the build output is updated from ES5 to ES6. Unless we have it at ES5 for a particular reason, I feel that ES6 support is wide spread enough at this point and some ES6 features (WeakMap) are required for Ditto to work anyway.

Caveats

In ES modules, import statements need to include an unambiguous reference to a source. As the published package uses .js files, the file ending of the TS sources needs to match that, even though the .js files don't even exist yet. Unfortunately, tsc can't transform this during build (background).

@pvditto pvditto added the enhancement New feature or request label Sep 16, 2024
@pvditto pvditto requested a review from jreyes33 September 16, 2024 14:24
@pvditto pvditto self-assigned this Sep 16, 2024
Copy link
Member

@jreyes33 jreyes33 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks! I totally agree with building for ES6.

@pvditto
Copy link
Contributor Author

pvditto commented Sep 24, 2024

@jreyes33 thanks for the review. I am going to merge this. Let's be extra careful with the next release as this is changing a couple of essential pieces of project configuration and build output. Let me know when it's time and I can test the published library a bit.

@pvditto pvditto merged commit ea02759 into master Sep 25, 2024
1 check passed
@pvditto pvditto deleted the pv/esm-export branch September 25, 2024 08:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants