README.md

ESBuild JS/TS bundler for Hooks

Live loading

The latest version of the esbuild.wasm build is available (CORS enabled) at:

• https://wasm.xahau.tech/esbuild.wasm

ESBuild JS/TS bundler for On chain Rule Engine (Smart Contracts)

This project depends on:

• evanw/esbuild
  • Go to WASI compilation, PR: evanw/esbuild#3779

Build

You can conveniently build using Docker.

To build the container image for the build process:

docker build --tag esbuild-wasi .

Build esbuild to WASI-compatible .wasm

To build the esbuild.wasm JS bundler to the local build folder:

docker run --rm -v $(pwd)/build:/build esbuild-wasi

Run (use) - CLI

To run the .wasm, we're using wasmtime: we need a virtual filesystem, stdin, stdout, etc. and wasmtime happily provides this context:

docker run --rm -v $(pwd)/build:/build \
    esbuild-wasi wasmtime /build/esbuild.wasm --help

To use esbuild to bundle sample TypeScript to Javascript

Say you have a local folder ./sample and you want to bundle the index.ts TypeScript to index.js in the same folder:

docker run --rm -v $(pwd)/build:/esbuild \
    -v $(pwd)/sample:/sample \
    esbuild-wasi sh -c 'wasmtime run --dir=/sample::/ esbuild.wasm index.ts --platform=browser > /sample/index.js'

The example above shows we map the local ./build folder with the compiled esbuild.wasm to the workdir, so we don't have to specifcy the direcotry of the executable for wasmtime (as we're already in the right folder).

The --dir=/sample::/ tells wasmtime to map /sample (seen from within the container) to the root / virtual filesysstem in the WebAssembly runtime environment, so we don't have to provide the folder index.ts is in to esbuild.wasm (as to esbuild) it is in root, its default workdir.

For the result, check:

diff sample/index.ts sample/index.js

Run - Browser

To use the above .wasm file in your browser, create Javascript code like below, and save it as esbuild.mjs. You can build this .mjs file for the browser with esbuild (inception):

cd ./browser && npm install # Needs npm install to fetch buffer browser polyfill & wasi runtime to be bundled along
docker run --rm -it \
    -v $(pwd)/../build/esbuild.wasm:/esbuild.wasm \
    -v $(pwd):/esbuild \
    esbuild-wasi sh -c 'wasmtime run --dir=.::/ /esbuild.wasm esbuild.mjs --bundle --format=esm --platform=browser --minify > esbuild-bundle.js'

Now you have a esbuild-browser.js file to use in the browser, which you can include as modules:

<script type="module" src="./esbuild-browser.js"></script>

There's a ready to use sample index.html in the browser folder, which points to the build/esbuild.wasm to be served. To easily serve the entire thing (just to test), run:

npm run demo

... and point your browser to:

• http://localhost:3000/browser/

Test @ https://runno.dev/wasi

Upload esbuild.wasm and upload index.ts from the sample folder in this repo to the virtual filestystem, and then use argument:

index.ts --minify --format=esm --platform=browser --outfile=out.js

Then download out.js from the virtual filesystem and... Tada 🎉!