bun-types 1.3.2-canary.20251106T140813 → 1.3.2

package/docs/bundler/loaders.mdx

@@ -0,0 +1,356 @@
+---
+title: Loaders
+description: Built-in loaders for the Bun bundler and runtime
+---
+
+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.**
+
+`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.toml` `.json` `.txt` `.wasm` `.node` `.html`
+
+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 that extend Bun with custom loaders.
+
+You can explicitly specify which loader to use using the `'loader'` import attribute.
+
+```ts title="index.ts" icon="/icons/typescript.svg"
+import my_toml from "./my_file" with { loader: "toml" };
+```
+
+## Built-in loaders
+
+### `js`
+
+**JavaScript loader.** Default for `.cjs` and `.mjs`.
+
+Parses the code and applies a set of default transforms like dead-code elimination and tree shaking. Note that Bun does not attempt to down-convert syntax at the moment.
+
+---
+
+### `jsx`
+
+**JavaScript + JSX loader.** Default for `.js` and `.jsx`.
+
+Same as the `js` loader, but JSX syntax is supported. By default, JSX is down-converted to plain JavaScript; the details of how this is done depends on the `jsx*` compiler options in your `tsconfig.json`. Refer to the [TypeScript documentation on JSX](https://www.typescriptlang.org/tsconfig#jsx) for more information.
+
+---
+
+### `ts`
+
+**TypeScript loader.** Default for `.ts`, `.mts`, and `.cts`.
+
+Strips out all TypeScript syntax, then behaves identically to the `js` loader. Bun does not perform typechecking.
+
+---
+
+### `tsx`
+
+**TypeScript + JSX loader.** Default for `.tsx`.
+
+Transpiles both TypeScript and JSX to vanilla JavaScript.
+
+---
+
+### `json`
+
+**JSON loader.** Default for `.json`.
+
+JSON files can be directly imported.
+
+```js
+import pkg from "./package.json";
+pkg.name; // => "my-package"
+```
+
+During bundling, the parsed JSON is inlined into the bundle as a JavaScript object.
+
+```js
+const pkg = {
+  name: "my-package",
+  // ... other fields
+};
+
+pkg.name;
+```
+
+If a `.json` file is passed as an entrypoint to the bundler, it will be converted to a `.js` module that `export default`s the parsed object.
+
+<CodeGroup>
+
+```json Input
+{
+  "name": "John Doe",
+  "age": 35,
+  "email": "johndoe@example.com"
+}
+```
+
+```ts Output
+export default {
+  name: "John Doe",
+  age: 35,
+  email: "johndoe@example.com",
+};
+```
+
+</CodeGroup>
+
+---
+
+### toml
+
+**TOML loader.** Default for `.toml`.
+
+TOML files can be directly imported. Bun will parse them with its fast native TOML parser.
+
+```js
+import config from "./bunfig.toml";
+config.logLevel; // => "debug"
+
+// via import attribute:
+// import myCustomTOML from './my.config' with {type: "toml"};
+```
+
+During bundling, the parsed TOML is inlined into the bundle as a JavaScript object.
+
+```js
+var config = {
+  logLevel: "debug",
+  // ...other fields
+};
+config.logLevel;
+```
+
+If a `.toml` file is passed as an entrypoint, it will be converted to a `.js` module that `export default`s the parsed object.
+
+<CodeGroup>
+
+```toml Input
+name = "John Doe"
+age = 35
+email = "johndoe@example.com"
+```
+
+```ts Output
+export default {
+  name: "John Doe",
+  age: 35,
+  email: "johndoe@example.com",
+};
+```
+
+</CodeGroup>
+
+---
+
+### text
+
+**Text loader.** Default for `.txt`.
+
+The contents of the text file are read and inlined into the bundle as a string. Text files can be directly imported. The file is read and returned as a string.
+
+```js
+import contents from "./file.txt";
+console.log(contents); // => "Hello, world!"
+
+// To import an html file as text
+// The "type" attribute can be used to override the default loader.
+import html from "./index.html" with { type: "text" };
+```
+
+When referenced during a build, the contents are inlined into the bundle as a string.
+
+```js
+var contents = `Hello, world!`;
+console.log(contents);
+```
+
+If a `.txt` file is passed as an entrypoint, it will be converted to a `.js` module that `export default`s the file contents.
+
+<CodeGroup>
+
+```txt Input
+Hello, world!
+```
+
+```ts Output
+export default "Hello, world!";
+```
+
+</CodeGroup>
+
+---
+
+### napi
+
+**Native addon loader.** Default for `.node`.
+
+In the runtime, native addons can be directly imported.
+
+```js
+import addon from "./addon.node";
+console.log(addon);
+```
+
+<Note>In the bundler, `.node` files are handled using the file loader.</Note>
+
+---
+
+### sqlite
+
+**SQLite loader.** Requires `with { "type": "sqlite" }` import attribute.
+
+In the runtime and bundler, SQLite databases can be directly imported. This will load the database using `bun:sqlite`.
+
+```js
+import db from "./my.db" with { type: "sqlite" };
+```
+
+<Warning>This is only supported when the target is `bun`.</Warning>
+
+By default, the database is external to the bundle (so that you can potentially use a database loaded elsewhere), so the database file on-disk won't be bundled into the final output.
+
+You can change this behavior with the `"embed"` attribute:
+
+```js
+// embed the database into the bundle
+import db from "./my.db" with { type: "sqlite", embed: "true" };
+```
+
+<Info>
+When using a standalone executable, the database is embedded into the single-file executable.
+
+Otherwise, the database to embed is copied into the `outdir` with a hashed filename.
+
+</Info>
+
+---
+
+### html
+
+The `html` loader processes HTML files and bundles any referenced assets. It will:
+
+- Bundle and hash referenced JavaScript files (`<script src="...">`)
+- Bundle and hash referenced CSS files (`<link rel="stylesheet" href="...">`)
+- Hash referenced images (`<img src="...">`)
+- Preserve external URLs (by default, anything starting with `http://` or `https://`)
+
+For example, given this HTML file:
+
+```html title="src/index.html"
+<!DOCTYPE html>
+<html>
+  <body>
+    <img src="./image.jpg" alt="Local image" />
+    <img src="https://example.com/image.jpg" alt="External image" />
+    <script type="module" src="./script.js"></script>
+  </body>
+</html>
+```
+
+It will output a new HTML file with the bundled assets:
+
+```html title="dist/index.html"
+<!DOCTYPE html>
+<html>
+  <body>
+    <img src="./image-HASHED.jpg" alt="Local image" />
+    <img src="https://example.com/image.jpg" alt="External image" />
+    <script type="module" src="./output-ALSO-HASHED.js"></script>
+  </body>
+</html>
+```
+
+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.
+
+<Accordion title="List of supported HTML selectors">
+Currently, the list of selectors is:
+
+- `audio[src]`
+- `iframe[src]`
+- `img[src]`
+- `img[srcset]`
+- `link:not([rel~='stylesheet']):not([rel~='modulepreload']):not([rel~='manifest']):not([rel~='icon']):not([rel~='apple-touch-icon'])[href]`
+- `link[as='font'][href], link[type^='font/'][href]`
+- `link[as='image'][href]`
+- `link[as='style'][href]`
+- `link[as='video'][href], link[as='audio'][href]`
+- `link[as='worker'][href]`
+- `link[rel='icon'][href], link[rel='apple-touch-icon'][href]`
+- `link[rel='manifest'][href]`
+- `link[rel='stylesheet'][href]`
+- `script[src]`
+- `source[src]`
+- `source[srcset]`
+- `video[poster]`
+- `video[src]`
+
+</Accordion>
+
+<Note>
+
+**HTML Loader Behavior in Different Contexts**
+
+The `html` loader behaves differently depending on how it's used:
+
+- Static Build: When you run `bun build ./index.html`, Bun produces a static site with all assets bundled and hashed.
+- Runtime: When you run `bun run server.ts` (where `server.ts` imports an HTML file), Bun bundles assets on-the-fly during development, enabling features like hot module replacement.
+- Full-stack Build: When you run `bun build --target=bun server.ts` (where `server.ts` imports an HTML file), the import resolves to a manifest object that `Bun.serve` uses to efficiently serve pre-bundled assets in production.
+
+</Note>
+
+---
+
+### sh
+
+**Bun Shell loader.** Default for `.sh` files.
+
+This loader is used to parse Bun Shell scripts. It's only supported when starting Bun itself, so it's not available in the bundler or in the runtime.
+
+```bash
+bun run ./script.sh
+```
+
+---
+
+### file
+
+**File loader.** Default for all unrecognized file types.
+
+The file loader resolves the import as a path/URL to the imported file. It's commonly used for referencing media or font assets.
+
+```js
+// logo.ts
+import logo from "./logo.svg";
+console.log(logo);
+```
+
+In the runtime, Bun checks that the `logo.svg` file exists and converts it to an absolute path to the location of `logo.svg` on disk.
+
+```bash
+bun run logo.ts
+# Output: /path/to/project/logo.svg
+```
+
+In the bundler, things are slightly different. The file is copied into `outdir` as-is, and the import is resolved as a relative path pointing to the copied file.
+
+```js
+// Output
+var logo = "./logo.svg";
+console.log(logo);
+```
+
+If a value is specified for `publicPath`, the import will use value as a prefix to construct an absolute path/URL.
+
+| Public path                  | Resolved import                    |
+| ---------------------------- | ---------------------------------- |
+| `""` (default)               | `/logo.svg`                        |
+| `"/assets"`                  | `/assets/logo.svg`                 |
+| `"https://cdn.example.com/"` | `https://cdn.example.com/logo.svg` |
+
+<Note>
+The location and file name of the copied file is determined by the value of `naming.asset`.
+
+This loader is copied into the `outdir` as-is. The name of the copied file is determined using the value of `naming.asset`.
+
+</Note>

package/docs/bundler/macros.mdx

@@ -0,0 +1,328 @@
+---
+title: Macros
+description: Run JavaScript functions at bundle-time with Bun macros
+---
+
+Macros are a mechanism for running JavaScript functions at bundle-time. The value returned from these functions are directly inlined into your bundle.
+
+As a toy example, consider this simple function that returns a random number.
+
+```ts title="random.ts" icon="/icons/typescript.svg"
+export function random() {
+  return Math.random();
+}
+```
+
+This is just a regular function in a regular file, but we can use it as a macro like so:
+
+```tsx title="cli.tsx" icon="/icons/typescript.svg"
+import { random } from "./random.ts" with { type: "macro" };
+
+console.log(`Your random number is ${random()}`);
+```
+
+<Note>
+  Macros are indicated using import attribute syntax. If you haven't seen this syntax before, it's a Stage 3 TC39
+  proposal that lets you attach additional metadata to import statements.
+</Note>
+
+Now we'll bundle this file with `bun build`. The bundled file will be printed to stdout.
+
+```bash terminal icon="terminal"
+bun build ./cli.tsx
+```
+
+```js
+console.log(`Your random number is ${0.6805550949689833}`);
+```
+
+As you can see, the source code of the `random` function occurs nowhere in the bundle. Instead, it is executed during bundling and function call (`random()`) is replaced with the result of the function. Since the source code will never be included in the bundle, macros can safely perform privileged operations like reading from a database.
+
+## When to use macros
+
+If you have several build scripts for small things where you would otherwise have a one-off build script, bundle-time code execution can be easier to maintain. It lives with the rest of your code, it runs with the rest of the build, it is automatically parallelized, and if it fails, the build fails too.
+
+If you find yourself running a lot of code at bundle-time though, consider running a server instead.
+
+## Import attributes
+
+Bun Macros are import statements annotated using either:
+
+- `with { type: 'macro' }` — an import attribute, a Stage 3 ECMA Script proposal
+- `assert { type: 'macro' }` — an import assertion, an earlier incarnation of import attributes that has now been abandoned (but is already supported by a number of browsers and runtimes)
+
+## Security considerations
+
+Macros must explicitly be imported with `{ type: "macro" }` in order to be executed at bundle-time. These imports have no effect if they are not called, unlike regular JavaScript imports which may have side effects.
+
+You can disable macros entirely by passing the `--no-macros` flag to Bun. It produces a build error like this:
+
+```
+error: Macros are disabled
+
+foo();
+^
+./hello.js:3:1 53
+```
+
+To reduce the potential attack surface for malicious packages, macros cannot be invoked from inside `node_modules/**/*`. If a package attempts to invoke a macro, you'll see an error like this:
+
+```
+error: For security reasons, macros cannot be run from node_modules.
+
+beEvil();
+^
+node_modules/evil/index.js:3:1 50
+```
+
+Your application code can still import macros from `node_modules` and invoke them.
+
+```ts title="cli.tsx" icon="/icons/typescript.svg"
+import { macro } from "some-package" with { type: "macro" };
+
+macro();
+```
+
+## Export condition "macro"
+
+When shipping a library containing a macro to npm or another package registry, use the `"macro"` export condition to provide a special version of your package exclusively for the macro environment.
+
+```json title="package.json" icon="file-code"
+{
+  "name": "my-package",
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.js",
+    "default": "./index.js",
+    "macro": "./index.macro.js"
+  }
+}
+```
+
+With this configuration, users can consume your package at runtime or at bundle-time using the same import specifier:
+
+```ts title="index.ts" icon="/icons/typescript.svg"
+import pkg from "my-package"; // runtime import
+import { macro } from "my-package" with { type: "macro" }; // macro import
+```
+
+The first import will resolve to `./node_modules/my-package/index.js`, while the second will be resolved by Bun's bundler to `./node_modules/my-package/index.macro.js`.
+
+## Execution
+
+When Bun's transpiler sees a macro import, it calls the function inside the transpiler using Bun's JavaScript runtime and converts the return value from JavaScript into an AST node. These JavaScript functions are called at bundle-time, not runtime.
+
+Macros are executed synchronously in the transpiler during the visiting phase—before plugins and before the transpiler generates the AST. They are executed in the order they are imported. The transpiler will wait for the macro to finish executing before continuing. The transpiler will also await any Promise returned by a macro.
+
+Bun's bundler is multi-threaded. As such, macros execute in parallel inside of multiple spawned JavaScript "workers".
+
+## Dead code elimination
+
+The bundler performs dead code elimination after running and inlining macros. So given the following macro:
+
+```ts title="returnFalse.ts" icon="/icons/typescript.svg"
+export function returnFalse() {
+  return false;
+}
+```
+
+...then bundling the following file will produce an empty bundle, provided that the minify syntax option is enabled.
+
+```ts title="index.ts" icon="/icons/typescript.svg"
+import { returnFalse } from "./returnFalse.ts" with { type: "macro" };
+
+if (returnFalse()) {
+  console.log("This code is eliminated");
+}
+```
+
+## Serializability
+
+Bun's transpiler needs to be able to serialize the result of the macro so it can be inlined into the AST. All JSON-compatible data structures are supported:
+
+```ts title="macro.ts" icon="/icons/typescript.svg"
+export function getObject() {
+  return {
+    foo: "bar",
+    baz: 123,
+    array: [1, 2, { nested: "value" }],
+  };
+}
+```
+
+Macros can be async, or return Promise instances. Bun's transpiler will automatically await the Promise and inline the result.
+
+```ts title="macro.ts" icon="/icons/typescript.svg"
+export async function getText() {
+  return "async value";
+}
+```
+
+The transpiler implements special logic for serializing common data formats like `Response`, `Blob`, `TypedArray`.
+
+- **TypedArray**: Resolves to a base64-encoded string.
+- **Response**: Bun will read the `Content-Type` and serialize accordingly; for instance, a Response with type `application/json` will be automatically parsed into an object and `text/plain` will be inlined as a string. Responses with an unrecognized or undefined type will be base-64 encoded.
+- **Blob**: As with Response, the serialization depends on the `type` property.
+
+The result of `fetch` is `Promise<Response>`, so it can be directly returned.
+
+```ts title="macro.ts" icon="/icons/typescript.svg"
+export function getObject() {
+  return fetch("https://bun.com");
+}
+```
+
+Functions and instances of most classes (except those mentioned above) are not serializable.
+
+```ts title="macro.ts" icon="/icons/typescript.svg"
+export function getText(url: string) {
+  // this doesn't work!
+  return () => {};
+}
+```
+
+## Arguments
+
+Macros can accept inputs, but only in limited cases. The value must be statically known. For example, the following is not allowed:
+
+```ts title="index.ts" icon="/icons/typescript.svg"
+import { getText } from "./getText.ts" with { type: "macro" };
+
+export function howLong() {
+  // the value of `foo` cannot be statically known
+  const foo = Math.random() ? "foo" : "bar";
+
+  const text = getText(`https://example.com/${foo}`);
+  console.log("The page is ", text.length, " characters long");
+}
+```
+
+However, if the value of `foo` is known at bundle-time (say, if it's a constant or the result of another macro) then it's allowed:
+
+```ts title="index.ts" icon="/icons/typescript.svg"
+import { getText } from "./getText.ts" with { type: "macro" };
+import { getFoo } from "./getFoo.ts" with { type: "macro" };
+
+export function howLong() {
+  // this works because getFoo() is statically known
+  const foo = getFoo();
+  const text = getText(`https://example.com/${foo}`);
+  console.log("The page is", text.length, "characters long");
+}
+```
+
+This outputs:
+
+```js
+function howLong() {
+  console.log("The page is", 1322, "characters long");
+}
+export { howLong };
+```
+
+## Examples
+
+### Embed latest git commit hash
+
+```ts title="getGitCommitHash.ts" icon="/icons/typescript.svg"
+export function getGitCommitHash() {
+  const { stdout } = Bun.spawnSync({
+    cmd: ["git", "rev-parse", "HEAD"],
+    stdout: "pipe",
+  });
+
+  return stdout.toString();
+}
+```
+
+When we build it, the `getGitCommitHash` is replaced with the result of calling the function:
+
+<CodeGroup>
+
+```ts input
+import { getGitCommitHash } from "./getGitCommitHash.ts" with { type: "macro" };
+
+console.log(`The current Git commit hash is ${getGitCommitHash()}`);
+```
+
+```ts output
+console.log(`The current Git commit hash is 3ee3259104e4507cf62c160f0ff5357ec4c7a7f8`);
+```
+
+</CodeGroup>
+
+<Info>
+  You're probably thinking "Why not just use `process.env.GIT_COMMIT_HASH`?" Well, you can do that too. But can you do
+  this with an environment variable?
+</Info>
+
+### Make fetch() requests at bundle-time
+
+In this example, we make an outgoing HTTP request using `fetch()`, parse the HTML response using `HTMLRewriter`, and return an object containing the title and meta tags–all at bundle-time.
+
+```ts title="meta.ts" icon="/icons/typescript.svg"
+export async function extractMetaTags(url: string) {
+  const response = await fetch(url);
+  const meta = {
+    title: "",
+  };
+  new HTMLRewriter()
+    .on("title", {
+      text(element) {
+        meta.title += element.text;
+      },
+    })
+    .on("meta", {
+      element(element) {
+        const name =
+          element.getAttribute("name") || element.getAttribute("property") || element.getAttribute("itemprop");
+
+        if (name) meta[name] = element.getAttribute("content");
+      },
+    })
+    .transform(response);
+
+  return meta;
+}
+```
+
+The `extractMetaTags` function is erased at bundle-time and replaced with the result of the function call. This means that the fetch request happens at bundle-time, and the result is embedded in the bundle. Also, the branch throwing the error is eliminated since it's unreachable.
+
+<CodeGroup>
+
+```jsx input
+import { extractMetaTags } from "./meta.ts" with { type: "macro" };
+
+export const Head = () => {
+  const headTags = extractMetaTags("https://example.com");
+
+  if (headTags.title !== "Example Domain") {
+    throw new Error("Expected title to be 'Example Domain'");
+  }
+
+  return (
+    <head>
+      <title>{headTags.title}</title>
+      <meta name="viewport" content={headTags.viewport} />
+    </head>
+  );
+};
+```
+
+```jsx output
+export const Head = () => {
+  const headTags = {
+    title: "Example Domain",
+    viewport: "width=device-width, initial-scale=1",
+  };
+
+  return (
+    <head>
+      <title>{headTags.title}</title>
+      <meta name="viewport" content={headTags.viewport} />
+    </head>
+  );
+};
+```
+
+</CodeGroup>