ESM build for squiggle-lang; ESM-only components

[berekuk]

Supersedes #1488; many more changes in this one, because:

• this PR migrates squiggle-lang, not just components
• it adds "type": "module" by default, but keeps the CommonJS build too

I had to change a lot of configuration for this to work.

Important notes:

• ESM can import CJS, but CJS can't import ESM (easily), and we have to provide both versions, so that consumers of our packages could still use it if they don't use ESM
  • providing both versions is considered risky, but many packages choose this approach, and squiggle is stateless, so it should be ok
  • still, it's hard to guarantee full backward compatibility with a change like this
• ESM imports ESM dependencies by default, and this sometimes has consequences; e.g. some NPM modules are broken
  • I had to remove the dependency on uuid for random ids because of this bug; fortunately, generation of random ids was easy to reimplement
  • I also had to add some hacks around react-use because of this bug; react-use is currently imported as CJS (see hooks/react-use.ts wrapper)
• Imports in Typescript now should include .js extension at the end, because Typescript developers are stubborn and don't want to rewrite JS code in TS compiler (see this, this, etc.); this is the main reason why the diff on this PR is huge
• due to how exports feature in package.json works, it's now forbidden to import specific modules from squiggle-lang, e.g. it's impossible to do import * as SymbolicDist from "@quri/squiggle-lang/dist/esm/src/dist/SymbolicDist.js"; this is both a breaking change and inconvenience, and a feature (we can control the public API of squiggle-lang more precisely)
  • this will deserve a note in the changelog when we do the next release; also this entire migration might be enough of a breaking change to deserve 0.7 release

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
squiggle-website	✅ Ready (Inspect)	Visit Preview		Apr 5, 2023 10:39pm

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
relative-values	⬜️ Ignored (Inspect)	Visit Preview		Apr 5, 2023 10:39pm
squiggle-components	⬜️ Ignored (Inspect)	Visit Preview		Apr 5, 2023 10:39pm

[berekuk]

Some benefits of this change:

• significant bundle size decrease; 1.5MB -> under 1MB, due to much better tree-shaking
• it now should be possible to include @quri/squiggle-components on Observable directly through skypack.dev or unpkg (I haven't tried it yet)
• future-proof: compatibility with modules that migrate to esm-only, e.g. ⬆️ Bump open from 8.4.2 to 9.1.0 #1654
• I had weird issues with enabling SSR on relative-values with Next.js 13, I'm not sure why; ESM will probably fix this

[berekuk]

There are still issues.

I managed to hack all (?) other cases, but d3 v7 is ESM-only, and it's a problem for CJS build. Here's the article about how authors of Victory wrapped/repackaged d3 as a workaround: link.

My guess is that we should just make components ESM-only to avoid further headache. (It would also allow me to remove a few hacks in this PR around react-use).

The downside of this decision is that if anyone depends on squiggle-components, they'd have to either upgrade to ESM too, or load any squiggle components in a lazy fashion, with next/dynamic or async imports. But it doesn't sound too terrible to me, especially since until recently squiggle-components wasn't SSR-compatible and users had to go through next/dynamic anyway. (also, we don't have many users, and probably none with a regularly maintained production setup)

[codecov-commenter]

Codecov Report

Merging #1662 (92ad855) into develop (e99fa75) will decrease coverage by 2.79%.
The diff coverage is n/a.

❗ Current head 92ad855 differs from pull request most recent head 54c93ed. Consider uploading reports for the commit 54c93ed to get more accurate results

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@             Coverage Diff             @@
##           develop    #1662      +/-   ##
===========================================
- Coverage    74.01%   71.22%   -2.79%     
===========================================
  Files           93       92       -1     
  Lines         5099     4636     -463     
  Branches       856      855       -1     
===========================================
- Hits          3774     3302     -472     
- Misses        1300     1309       +9     
  Partials        25       25              

see 86 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[OAGr]

Looks good, happy to see this be implemented!

[berekuk]

Storybook styles were broken, and storybook v7 got released just yesterday, which made me want to upgrade in hope that it would help, so I did that.

Turned out CSS fix was caused by something else (postcss config format), but now we're on v7. Also Storybook now is configured with Vite, which fixes #1620.

On ESM side, I removed CommonJS build from components, since it was broken, components are now ESM-only.