In browser loading

[karesztrk]

I'm a big fan of this lib and thanks for sharing it.

I wanted to ask about the preferred way to load md4w in the browser (client side).

I tried it using Vite (without a CDN). However the dynamic nature of loading prevents Vite from building the final bundle.

<script>
  import { init, mdToHtml } from "md4w";
  await init();
</script>

Error:

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

node_modules/.pnpm/md4w@0.2.2/node_modules/md4w/js/index.js:12:23:
  12 │   const { readFile } = await import(m);
     ╵                        ~~~~~

Shouldn't be there a dedicated Build for Browsers on npm.js?

[ije]

i just removed the top await in 0.2.3, please try again!

[karesztrk]

Now the initial request is fine. The JS part is loaded: http://localhost:4321/node_modules/.vite/deps/md4w.js?v=9f5331d4 200 OK

However, the subsequent loading of the WASM module fails. I guess the "small" or "fast" is not recognized when calling the init() method. What should I use instead? http://localhost:4321/node_modules/.vite/deps/undefined HTTP 504

[ije]

just publish 0.2.4 that allows you to use custom wasm url:

<script>
  import { init, mdToHtml } from "md4w";
  await init('https://esm.sh/mde4w/js/md4w-fast.wasm');
  // or 
  await init('/node_modules/md4w/js/md4w-fast.wasm');
</scrip>

[karesztrk]

Flawless. Can you please also update the Typescript definitions to handle custom strings as arguments? And a final question: Why are the final Wasm binaries smaller than the ones on NPM.js? I mean, on esm.sh its 28.4KiB, but from npm.js its 60.83KiB. I'm curious. Thanks again.

[ije]

Can you please also update the Typescript definitions to handle custom strings as arguments?

The types have been update, reload your editor?

Why are the final Wasm binaries smaller than the ones on NPM.js

28.4KiB is compressed from CDN, 60.83KiB is the raw wasm file.

[karesztrk]

Oh, its Brotli compressed. Sorry, I haven't seen it. All good. We can close this.