BREAKING: Build packages as both CJS and ESM

[Mrtenz]

Explanation

Currently the packages in this monorepo are built as CommonJS modules. With this pull request, packages are now built both as CommonJS modules, as well as ES modules. This makes it easier for modern bundlers to tree-shake the code, and reduce bundle size, which is very useful for Snaps. Environments which do not support ES modules (e.g., Browserify) will still use the CommonJS modules.

Rather than using TypeScript's compiler to build the files, files are now built with SWC (which is an extremely fast compiler). TSC is still used to generate the declaration files, since SWC does not do type-checking (yet). Packages are built in a couple of steps:

• For each package individually (yarn workspaces foreach ...):
  • The CJS module is built to the dist/cjs folder.
  • The ESM module is built to the dist/esm folder.
• For all packages:
  • The TypeScript declaration (.d.ts) files are built to the dist/types folder.

The implementation is based on MetaMask/snaps repo.

Changelog

Every package

• BREAKING: The package is now built both as CommonJS module and ES module.
  • Distribution files have been moved from dist to dist/cjs (and dist/esm). If you are explicitly importing from dist, you have to update the import.

Checklist

• I've updated the test suite for new or updated code as appropriate
• I've updated documentation (JSDoc, Markdown, etc.) for new or updated code as appropriate
• I've highlighted breaking changes using the "BREAKING" category above as appropriate

[Mrtenz]

I've enabled the script for @swc/core here, since it uses native packages to build the files.

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
@swc/cli	0.1.62	filesystem, shell, environment	+79	386 MB	kdy1
@swc/core	1.3.68	filesystem, shell, environment	+10	384 MB	kdy1

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: clone-response@1.0.3, responselike@2.0.1, @mole-inc/bin-wrapper@8.0.1, @swc/cli@0.1.62, @swc/core@1.3.68, arch@2.2.0, commander@7.2.0, got@11.8.6, readable-web-to-node-stream@3.0.2, strip-outer@2.0.0, strip-eof@1.0.0, pump@3.0.0, @tokenizer/token@0.3.0, executable@4.1.1, bin-check@4.1.0, semver-truncate@3.0.0, sort-keys@1.1.2, lowercase-keys@2.0.0, find-versions@5.1.0, filename-reserved-regex@3.0.0, defer-to-connect@2.0.1, content-disposition@0.5.4, json-buffer@3.0.1, bin-version@6.0.0, @szmarczak/http-timer@4.0.6, @types/http-cache-semantics@4.0.1, pseudomap@1.0.2, end-of-stream@1.4.4, semver-regex@4.0.5, ext-list@2.2.2, quick-lru@5.1.1, os-filter-obj@2.0.0, sort-keys-length@1.0.1, p-finally@1.0.0, trim-repeated@2.0.0, ext-name@5.0.0, mimic-response@1.0.1, mimic-response@3.1.0, resolve-alpn@1.2.1, http2-wrapper@1.0.3, cacheable-request@7.0.4, cacheable-lookup@5.0.4

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

[Mrtenz]

@SocketSecurity ignore-all

[legobeat]

Apart from speed, any reason swc was picked specifically over alternatives and which were considered? (Specifically interested in why not esbuild. I'm not strongly in any camp and def appreciate getting ESM builds but introducing a non-JS builder/bundler is a pretty major architectural decision)

[Mrtenz]

Apart from speed, any reason swc was picked specifically over alternatives and which were considered? (Specifically interested in why not esbuild. I'm not strongly in any camp and def appreciate getting ESM builds but introducing a non-JS builder/bundler is a pretty major architectural decision)

I haven't looked into esbuild much, but it's mostly written in Go it seems. Other bundlers like Babel and TSC are much slower. I stumbled in to SWC because ts-node has an option for it (--swc), and it meets all of our needs.

[MajorLift]

Just in case we ever pick this up again, it should be noted that the following compiler options will need to be enabled:

https://swc.rs/docs/migrating-from-tsc

diff --git a/tsconfig.packages.json b/tsconfig.packages.json
index 2ab65285..ef1401e9 100644
--- a/tsconfig.packages.json
+++ b/tsconfig.packages.json
@@ -2,6 +2,9 @@
   "compilerOptions": {
     "composite": true,
     "esModuleInterop": true,
+    "isolatedModules": true,
+    "importsNotUsedAsValues": "error",
+    "useDefineForClassFields": false,
     "lib": ["ES2020", "DOM"],
     "module": "CommonJS",
     "moduleResolution": "node",

[mcmire]

Worth noting that since this PR, @metamask/utils and the module template have been updated to use tsup instead:

• @metamask/utils PR: Use tsup for bundling utils#144 (original context)
• Module template PR: Use tsup for building metamask-module-template#229

So in the interest of aligning with these repos, we should see if we can use tsup instead of swc. (For what it's worth, tsup uses esbuild under the hood. And I don't think it matters what language it's written in. From the outside, it has a CLI and uses JSON for configuration.)

[Mrtenz]

I'm just going to close this. Will revisit once we update the Snaps repo with tsup.