From d9aae9b9da2565a140f33f4f8174d3623a67a355 Mon Sep 17 00:00:00 2001 From: rajanpanth Date: Sun, 16 Aug 2026 18:04:04 +0545 Subject: [PATCH 1/2] docs: add browser bundling guide --- README.md | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/README.md b/README.md index 2e5a47d3da9a..6774669d9485 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,50 @@ High-quality APIs for [Deno](https://deno.com/) and the web. Use fearlessly. - [Contributing guidelines](.github/CONTRIBUTING.md) - [Frequently asked questions (FAQ)](./.github/FAQ.md) +## Using the Standard Library in a browser + +Standard Library packages are published as TypeScript on JSR. Bundle them into +JavaScript before loading them in a browser. For example, create an entry point: + +```ts +// main.ts +import { encodeBase64 } from "jsr:@std/encoding@^1.0.11/base64"; + +document.body.textContent = encodeBase64("Hello from @std!"); +``` + +Then bundle it with +[`esbuild-deno-loader`](https://jsr.io/@luca/esbuild-deno-loader), which teaches +esbuild how to resolve Deno, JSR, and import-map specifiers: + +```ts +// build.ts +import * as esbuild from "npm:esbuild@^0.28.2"; +import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.1"; + +await esbuild.build({ + plugins: [...denoPlugins()], + entryPoints: ["main.ts"], + outfile: "dist/main.js", + bundle: true, + format: "esm", +}); + +esbuild.stop(); +``` + +Run `deno run -A build.ts`, then load `dist/main.js` from an HTML module script: + +```html + +``` + +Only use modules whose source contains the +`// This module is browser compatible.` declaration. Other modules may depend on +Deno or Node.js APIs that are unavailable in browsers. When using a `deno.json` +import map, keep it beside the entry point so the loader discovers it, or pass +its path through the loader's `configPath` option. + ## Releases Package versions >=1.0.0 follow [Semantic Versioning](https://semver.org/), and From cfa73c8e2a00a6a84d3458526e1116fdeab56806 Mon Sep 17 00:00:00 2001 From: rajanpanth Date: Sun, 16 Aug 2026 23:03:31 +0545 Subject: [PATCH 2/2] docs: update browser bundling guidance --- README.md | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 6774669d9485..eab11c18d7fa 100644 --- a/README.md +++ b/README.md @@ -24,18 +24,24 @@ High-quality APIs for [Deno](https://deno.com/) and the web. Use fearlessly. Standard Library packages are published as TypeScript on JSR. Bundle them into JavaScript before loading them in a browser. For example, create an entry point: -```ts +```ts ignore // main.ts -import { encodeBase64 } from "jsr:@std/encoding@^1.0.11/base64"; +import { escape } from "jsr:@std/html@^1.0.4/entities"; -document.body.textContent = encodeBase64("Hello from @std!"); +document.body.innerHTML = escape(""); ``` -Then bundle it with -[`esbuild-deno-loader`](https://jsr.io/@luca/esbuild-deno-loader), which teaches -esbuild how to resolve Deno, JSR, and import-map specifiers: +Then bundle it for browsers: -```ts +```sh +deno bundle --platform browser -o dist/main.js main.ts +``` + +For custom esbuild pipelines, use +[`esbuild-deno-loader`](https://jsr.io/@luca/esbuild-deno-loader) so esbuild can +resolve Deno, JSR, and import-map specifiers: + +```ts ignore // build.ts import * as esbuild from "npm:esbuild@^0.28.2"; import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.1"; @@ -48,10 +54,10 @@ await esbuild.build({ format: "esm", }); -esbuild.stop(); +await esbuild.stop(); ``` -Run `deno run -A build.ts`, then load `dist/main.js` from an HTML module script: +Then load `dist/main.js` from an HTML module script: ```html @@ -59,9 +65,7 @@ Run `deno run -A build.ts`, then load `dist/main.js` from an HTML module script: Only use modules whose source contains the `// This module is browser compatible.` declaration. Other modules may depend on -Deno or Node.js APIs that are unavailable in browsers. When using a `deno.json` -import map, keep it beside the entry point so the loader discovers it, or pass -its path through the loader's `configPath` option. +Deno or Node.js APIs that are unavailable in browsers. ## Releases