feat(wasm): support output esm imports

[antfu]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme, or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codecov]

Codecov Report

Merging #1565 (fb61060) into main (75ddbf4) will decrease coverage by 0.47%.
Report is 2 commits behind head on main.
The diff coverage is 42.42%.

@@            Coverage Diff             @@
##             main    #1565      +/-   ##
==========================================
- Coverage   76.49%   76.02%   -0.47%     
==========================================
  Files          73       74       +1     
  Lines        7582     7672      +90     
  Branches      752      753       +1     
==========================================
+ Hits         5800     5833      +33     
- Misses       1781     1837      +56     
- Partials        1        2       +1     

Files Changed	Coverage Δ
src/rollup/plugins/wasm.ts	18.84% <18.84%> (ø)
src/rollup/config.ts	90.37% <85.71%> (-0.23%)	⬇️
src/presets/cloudflare.ts	100.00% <100.00%> (ø)
src/types/nitro.ts	100.00% <100.00%> (ø)

[antfu]

The bundling works, tho the nitro dev doesn't. And it seems to be a rather complex thing to do right, maybe we better keep the experimental state?

[pi0]

Working example with wasm bundled mode (Node dev/prod):

export default defineLazyEventHandler(async () => {
  const { sum } = await import("./sum.wasm")
    .then((wasm) => wasm.default({}))
    .then((r) => r.instance.exports);

  return eventHandler((event) => {
    return sum(1, 2);
  });
});

Working example with new esmImport (only prod build with cloudflare pages):

export default defineLazyEventHandler(async () => {
  const { sum } = await import("./sum.wasm")
    .then((mod) => WebAssembly.instantiate(mod.default, {}))
    .then((instance) => instance.exports);

  return eventHandler((event) => {
    return sum(1, 2);
  });
});

I wish we could find a way to keep API consistant

[pi0]

Thanks, LGTM. Let's keep it under the experimental flag until we can unify usage across.