bun-types 1.1.42-canary.20241223T140532 → 1.1.42-canary.20241225T140516
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bun.d.ts +21 -2
- package/docs/bundler/html.md +110 -0
- package/docs/bundler/loaders.md +76 -1
- package/package.json +1 -1
package/bun.d.ts
CHANGED
|
@@ -1682,10 +1682,28 @@ declare module "bun" {
|
|
|
1682
1682
|
/**
|
|
1683
1683
|
* **Experimental**
|
|
1684
1684
|
*
|
|
1685
|
-
*
|
|
1685
|
+
* Bundle CSS files.
|
|
1686
|
+
*
|
|
1687
|
+
* This will be enabled by default in Bun v1.2.
|
|
1688
|
+
*
|
|
1689
|
+
* @default false (until Bunv 1.2)
|
|
1686
1690
|
*/
|
|
1687
1691
|
experimentalCss?: boolean;
|
|
1688
1692
|
|
|
1693
|
+
/**
|
|
1694
|
+
* **Experimental**
|
|
1695
|
+
*
|
|
1696
|
+
* Bundle JavaScript & CSS files from HTML files. JavaScript & CSS files
|
|
1697
|
+
* from non-external <script> or <link> tags will be bundled.
|
|
1698
|
+
*
|
|
1699
|
+
* Underneath, this works similarly to HTMLRewriter.
|
|
1700
|
+
*
|
|
1701
|
+
* This will be enabled by default in Bun v1.2.
|
|
1702
|
+
*
|
|
1703
|
+
* @default false (until Bun v1.2)
|
|
1704
|
+
*/
|
|
1705
|
+
html?: boolean;
|
|
1706
|
+
|
|
1689
1707
|
/**
|
|
1690
1708
|
* Drop function calls to matching property accesses.
|
|
1691
1709
|
*/
|
|
@@ -3979,7 +3997,8 @@ declare module "bun" {
|
|
|
3979
3997
|
| "napi"
|
|
3980
3998
|
| "wasm"
|
|
3981
3999
|
| "text"
|
|
3982
|
-
| "css"
|
|
4000
|
+
| "css"
|
|
4001
|
+
| "html";
|
|
3983
4002
|
|
|
3984
4003
|
interface PluginConstraints {
|
|
3985
4004
|
/**
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
As of Bun v1.1.43, Bun's bundler now has first-class support for HTML. Build static sites, landing pages, and web applications with zero configuration. Just point Bun at your HTML file and it handles everything else.
|
|
2
|
+
|
|
3
|
+
```html#index.html
|
|
4
|
+
<!doctype html>
|
|
5
|
+
<html>
|
|
6
|
+
<head>
|
|
7
|
+
<link rel="stylesheet" href="./styles.css" />
|
|
8
|
+
<script src="./app.ts" type="module"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<img src="./logo.png" />
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
One command is all you need (won't be experimental after Bun v1.2):
|
|
17
|
+
|
|
18
|
+
{% codetabs %}
|
|
19
|
+
|
|
20
|
+
```bash#CLI
|
|
21
|
+
$ bun build --experimental-html --experimental-css ./index.html --outdir=dist
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```ts#API
|
|
25
|
+
Bun.build({
|
|
26
|
+
entrypoints: ["./index.html"],
|
|
27
|
+
outdir: "./dist",
|
|
28
|
+
|
|
29
|
+
// On by default in Bun v1.2+
|
|
30
|
+
html: true,
|
|
31
|
+
experimentalCss: true,
|
|
32
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
{% /codetabs %}
|
|
36
|
+
|
|
37
|
+
Bun automatically:
|
|
38
|
+
|
|
39
|
+
- Bundles, tree-shakes, and optimizes your JavaScript, JSX and TypeScript
|
|
40
|
+
- Bundles and optimizes your CSS
|
|
41
|
+
- Copies & hashes images and other assets
|
|
42
|
+
- Updates all references to local files or packages in your HTML
|
|
43
|
+
|
|
44
|
+
## Zero Config, Maximum Performance
|
|
45
|
+
|
|
46
|
+
The HTML bundler is enabled by default after Bun v1.2+. Drop in your existing HTML files and Bun will handle:
|
|
47
|
+
|
|
48
|
+
- **TypeScript & JSX** - Write modern JavaScript for browsers without the setup
|
|
49
|
+
- **CSS** - Bundle CSS stylesheets directly from `<link rel="stylesheet">` or `@import`
|
|
50
|
+
- **Images & Assets** - Automatic copying & hashing & rewriting of assets in JavaScript, CSS, and HTML
|
|
51
|
+
|
|
52
|
+
## Watch mode
|
|
53
|
+
|
|
54
|
+
You can run `bun build --watch` to watch for changes and rebuild automatically.
|
|
55
|
+
|
|
56
|
+
You've never seen a watch mode this fast.
|
|
57
|
+
|
|
58
|
+
## Plugin API
|
|
59
|
+
|
|
60
|
+
Need more control? Configure the bundler through the JavaScript API and use Bun's builtin `HTMLRewriter` to preprocess HTML.
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
await Bun.build({
|
|
64
|
+
entrypoints: ["./index.html"],
|
|
65
|
+
outdir: "./dist",
|
|
66
|
+
html: true,
|
|
67
|
+
experimentalCss: true,
|
|
68
|
+
minify: true,
|
|
69
|
+
|
|
70
|
+
plugins: [
|
|
71
|
+
{
|
|
72
|
+
// A plugin that makes every HTML tag lowercase
|
|
73
|
+
name: "lowercase-html-plugin",
|
|
74
|
+
setup({ onLoad }) {
|
|
75
|
+
const rewriter = new HTMLRewriter().on("*", {
|
|
76
|
+
element(element) {
|
|
77
|
+
element.tagName = element.tagName.toLowerCase();
|
|
78
|
+
},
|
|
79
|
+
text(element) {
|
|
80
|
+
element.replace(element.text.toLowerCase());
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
onLoad({ filter: /\.html$/ }, async args => {
|
|
85
|
+
const html = await Bun.file(args.path).text();
|
|
86
|
+
|
|
87
|
+
return {
|
|
88
|
+
// Bun's bundler will scan the HTML for <script> tags, <link rel="stylesheet"> tags, and other assets
|
|
89
|
+
// and bundle them automatically
|
|
90
|
+
contents: rewriter.transform(html),
|
|
91
|
+
loader: "html",
|
|
92
|
+
};
|
|
93
|
+
});
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
],
|
|
97
|
+
});
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## What Gets Processed?
|
|
101
|
+
|
|
102
|
+
Bun automatically handles all common web assets:
|
|
103
|
+
|
|
104
|
+
- Scripts (`<script src>`) are run through Bun's JavaScript/TypeScript/JSX bundler
|
|
105
|
+
- Stylesheets (`<link rel="stylesheet">`) are run through Bun's CSS parser & bundler
|
|
106
|
+
- Images (`<img>`, `<picture>`) are copied and hashed
|
|
107
|
+
- Media (`<video>`, `<audio>`, `<source>`) are copied and hashed
|
|
108
|
+
- Any `<link>` tag with an `href` attribute pointing to a local file is rewritten to the new path, and hashed
|
|
109
|
+
|
|
110
|
+
All paths are resolved relative to your HTML file, making it easy to organize your project however you want.
|
package/docs/bundler/loaders.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
The Bun bundler implements a set of default loaders out of the box. As a rule of thumb, the bundler and the runtime both support the same set of file types out of the box.
|
|
2
2
|
|
|
3
|
-
`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.toml` `.json` `.txt` `.wasm` `.node`
|
|
3
|
+
`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.toml` `.json` `.txt` `.wasm` `.node` `.html`
|
|
4
4
|
|
|
5
5
|
Bun uses the file extension to determine which built-in _loader_ should be used to parse the file. Every loader has a name, such as `js`, `tsx`, or `json`. These names are used when building [plugins](https://bun.sh/docs/bundler/plugins) that extend Bun with custom loaders.
|
|
6
6
|
|
|
@@ -203,6 +203,81 @@ When using a [standalone executable](https://bun.sh/docs/bundler/executables), t
|
|
|
203
203
|
|
|
204
204
|
Otherwise, the database to embed is copied into the `outdir` with a hashed filename.
|
|
205
205
|
|
|
206
|
+
### `html`
|
|
207
|
+
|
|
208
|
+
**HTML loader**. Default for `.html` after Bun v1.2.0.
|
|
209
|
+
|
|
210
|
+
To enable the html loader:
|
|
211
|
+
|
|
212
|
+
- For `Bun.build`: set `html: true`
|
|
213
|
+
- For `bun build`: `--experimental-html` CLI flag
|
|
214
|
+
|
|
215
|
+
You most likely want to use the `html` loader in conjunction with `experimentalCss: true` or `--experimental-css`.
|
|
216
|
+
|
|
217
|
+
The html loader processes HTML files and bundles any referenced assets. It will:
|
|
218
|
+
|
|
219
|
+
- Bundle and hash referenced JavaScript files (`<script src="...">`)
|
|
220
|
+
- Bundle and hash referenced CSS files (`<link rel="stylesheet" href="...">`)
|
|
221
|
+
- Hash referenced images (`<img src="...">`)
|
|
222
|
+
- Preserve external URLs (by default, anything starting with `http://` or `https://`)
|
|
223
|
+
|
|
224
|
+
For example, given this HTML file:
|
|
225
|
+
|
|
226
|
+
{% codetabs %}
|
|
227
|
+
|
|
228
|
+
```html#src/index.html
|
|
229
|
+
<!DOCTYPE html>
|
|
230
|
+
<html>
|
|
231
|
+
<body>
|
|
232
|
+
<img src="./image.jpg" alt="Local image">
|
|
233
|
+
<img src="https://example.com/image.jpg" alt="External image">
|
|
234
|
+
<script type="module" src="./script.js"></script>
|
|
235
|
+
</body>
|
|
236
|
+
</html>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
{% /codetabs %}
|
|
240
|
+
|
|
241
|
+
It will output a new HTML file with the bundled assets:
|
|
242
|
+
|
|
243
|
+
{% codetabs %}
|
|
244
|
+
|
|
245
|
+
```html#dist/output.html
|
|
246
|
+
<!DOCTYPE html>
|
|
247
|
+
<html>
|
|
248
|
+
<body>
|
|
249
|
+
<img src="./image-HASHED.jpg" alt="Local image">
|
|
250
|
+
<img src="https://example.com/image.jpg" alt="External image">
|
|
251
|
+
<script type="module" src="./output-ALSO-HASHED.js"></script>
|
|
252
|
+
</body>
|
|
253
|
+
</html>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
{% /codetabs %}
|
|
257
|
+
|
|
258
|
+
Under the hood, it uses [`lol-html`](https://github.com/cloudflare/lol-html) to extract script and link tags as entrypoints, and other assets as external.
|
|
259
|
+
|
|
260
|
+
Currently, the list of selectors is:
|
|
261
|
+
|
|
262
|
+
- `audio[src]`
|
|
263
|
+
- `iframe[src]`
|
|
264
|
+
- `img[src]`
|
|
265
|
+
- `img[srcset]`
|
|
266
|
+
- `link:not([rel~='stylesheet']):not([rel~='modulepreload']):not([rel~='manifest']):not([rel~='icon']):not([rel~='apple-touch-icon'])[href]`
|
|
267
|
+
- `link[as='font'][href], link[type^='font/'][href]`
|
|
268
|
+
- `link[as='image'][href]`
|
|
269
|
+
- `link[as='style'][href]`
|
|
270
|
+
- `link[as='video'][href], link[as='audio'][href]`
|
|
271
|
+
- `link[as='worker'][href]`
|
|
272
|
+
- `link[rel='icon'][href], link[rel='apple-touch-icon'][href]`
|
|
273
|
+
- `link[rel='manifest'][href]`
|
|
274
|
+
- `link[rel='stylesheet'][href]`
|
|
275
|
+
- `script[src]`
|
|
276
|
+
- `source[src]`
|
|
277
|
+
- `source[srcset]`
|
|
278
|
+
- `video[poster]`
|
|
279
|
+
- `video[src]`
|
|
280
|
+
|
|
206
281
|
### `sh` loader
|
|
207
282
|
|
|
208
283
|
**Bun Shell loader**. Default for `.sh` files
|
package/package.json
CHANGED