using esbuild to package a deno package for the browser

Mar 06, 2024

Simon asks for the simplest way to package a deno package from jsr for the browser. Here's what I did:

# create a package
mkdir deno-esbuild && cd deno-esbuild && npm init -y

# install yassify
npx jsr add @kwhinnery/yassify

# install esbuild
npm add --save-dev esbuild

# create a test.js file
cat <<EOF > test.js
import * as mod from "@kwhinnery/yassify";

addEventListener("DOMContentLoaded", (_) => {
  const h1 = document.querySelector("h1");
  h1.innerText = mod.yassify(h1.innerText);

# compile it with esbuild
npx esbuild test.js --bundle > bundle.js

# create an html file
printf '<script src="bundle.js"></script><h1>hi simon</h1>' > index.html

Now, open the HTML file and you should see something like:

part 2: using datasette/table

The simplest way I found to bundle a file using the JSR version of datasette/table is to use deno, and use a URL import instead of a prefixed jsr: import.

mkdir deno-datasette && cd deno-datasette && deno init

Create a test.js file that looks like:

import * as mod from "";

Create a bundle.js file that looks like this:

import * as esbuild from "[email protected]/mod.js";
import { denoPlugins } from "[email protected]/mod.ts";

const result = await{
  plugins: [
      configPath: await Deno.realPath("deno.json"),
  entryPoints: ["./test.js"],
  outfile: "./bundle.js",
  bundle: true,
  format: "esm",



This file uses the esbuild deno loader plugin from github. Now you can build a bundle:

deno run --allow-read --allow-env --allow-run build.js

Then you can create an HTML file that looks like this:

<script src="bundle.js"></script>

And if you run it, you will see a web page showing a datasette table:

a better way

Simon updated his note, the jsr team fixed their bug and now this more simple procedure works:

mkdir /tmp/datasette-demo3
cd /tmp/datasette-demo3
echo '@jsr:registry=' > .npmrc
npm install @jsr/datasette__table
echo 'import * as mod from "@jsr/datasette__table";' > index.js
npx esbuild index.js --bundle --outfile=bundle.js
echo '<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Datasette News</title>
<script src="bundle.js"></script>
</html>' > index.html

I tried to figure out how to do this same deal with only deno, but I wasn't successful; I don't know how to get esbuild to recognize the jsr: import of the deno-style file:

import * as mod from "jsr:@datasette/table";
↑ up