Bundling for browser usage

Hi, not really an issue, just wondering if it’s actually possible to use Shiki in browser instead of node? I have tried to bundle it with webpack and https://github.com/Jam3/babel-plugin-static-fs plugin, but still getting errors related to fs module calls for Onigasm and etc.

[zikaari]

Author of onigasm here. There is absolutely no problem running it in browsers, in fact, it was designed to be run in browsers for one of my own projects (now defunct).

It works perfectly fine with webpack with minimal config changes, just define a rule in webpack config to use file-loader for any import asking for *.wasm file.

Input

// src/index.ts
await loadWASM(await import('onigasm/lib/onigasm.wasm'))`

Output

// out/bundle.eu21df1.js
loadWASM('build/onigasm.8ug81e3.wasm').then(...)`

Note: Webpack might try to use it’s on WASM loader, despite the explicit rule. If that happens, fix this like this - https://github.com/webpack/webpack/issues/7264#issuecomment-388377363 The entire thread is a great read

[octref]

@canibanoglu Even if that’s doable, is it desirable at all? Loading several MB of WASM and then the grammars to do syntax highlighting on client side? I initially thought of shiki as an library, on either a static site generator system or locally, to faithfully reproduce VS Code’s highlighting. I still think that’s useful enough. If you need to dynamically do syntax highlighting in browser, maybe Monaco or Highlight.js would be better choices?