Skip to content

Commit eecbeb3

Browse files
Jarred-SumnerJarred-Sumner
committed
Move bundler plugin docs
1 parent 903d8bf commit eecbeb3

File tree

2 files changed

+345
-148
lines changed

2 files changed

+345
-148
lines changed

‎docs/bundler/plugins.md

+345-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,43 @@ Bun provides a universal plugin API that can be used to extend both the _runtime
22

33
Plugins intercept imports and perform custom loading logic: reading files, transpiling code, etc. They can be used to add support for additional file types, like `.scss` or `.yaml`. In the context of Bun's bundler, plugins can be used to implement framework-level features like CSS extraction, macros, and client-server code co-location.
44

5-
For more complete documentation of the Plugin API, see [Runtime > Plugins](https://bun.sh/docs/runtime/plugins).
5+
## Lifecycle hooks
6+
7+
Plugins can register callbacks to be run at various points in the lifecycle of a bundle:
8+
9+
- [`onStart()`](#onstart): Run once the bundler has started a bundle
10+
- [`onResolve()`](#onresolve): Run before a module is resolved
11+
- [`onLoad()`](#onload): Run before a module is loaded.
12+
- [`onBeforeParse()`](#onbeforeparse): Run zero-copy native addons in the parser thread before a file is parsed.
13+
14+
### Reference
15+
16+
A rough overview of the types (please refer to Bun's `bun.d.ts` for the full type definitions):
17+
18+
```ts
19+
type PluginBuilder = {
20+
onStart(callback: () => void): void;
21+
onResolve: (
22+
args: { filter: RegExp; namespace?: string },
23+
callback: (args: { path: string; importer: string }) => {
24+
path: string;
25+
namespace?: string;
26+
} | void,
27+
) => void;
28+
onLoad: (
29+
args: { filter: RegExp; namespace?: string },
30+
defer: () => Promise<void>,
31+
callback: (args: { path: string }) => {
32+
loader?: Loader;
33+
contents?: string;
34+
exports?: Record<string, any>;
35+
},
36+
) => void;
37+
config: BuildConfig;
38+
};
39+
40+
type Loader = "js" | "jsx" | "ts" | "tsx" | "css" | "json" | "toml" | "object";
41+
```
642

743
## Usage
844

@@ -28,3 +64,311 @@ Bun.build({
2864
plugins: [myPlugin],
2965
});
3066
```
67+
68+
## Plugin lifecycle
69+
70+
### Namespaces
71+
72+
`onLoad` and `onResolve` accept an optional `namespace` string. What is a namespaace?
73+
74+
Every module has a namespace. Namespaces are used to prefix the import in transpiled code; for instance, a loader with a `filter: /\.yaml$/` and `namespace: "yaml:"` will transform an import from `./myfile.yaml` into `yaml:./myfile.yaml`.
75+
76+
The default namespace is `"file"` and it is not necessary to specify it, for instance: `import myModule from "./my-module.ts"` is the same as `import myModule from "file:./my-module.ts"`.
77+
78+
Other common namespaces are:
79+
80+
- `"bun"`: for Bun-specific modules (e.g. `"bun:test"`, `"bun:sqlite"`)
81+
- `"node"`: for Node.js modules (e.g. `"node:fs"`, `"node:path"`)
82+
83+
### `onStart`
84+
85+
```ts
86+
onStart(callback: () => void): Promise<void> | void;
87+
```
88+
89+
Registers a callback to be run when the bundler starts a new bundle.
90+
91+
```ts
92+
import { plugin } from "bun";
93+
94+
plugin({
95+
name: "onStart example",
96+
97+
setup(build) {
98+
build.onStart(() => {
99+
console.log("Bundle started!");
100+
});
101+
},
102+
});
103+
```
104+
105+
The callback can return a `Promise`. After the bundle process has initialized, the bundler waits until all `onStart()` callbacks have completed before continuing.
106+
107+
For example:
108+
109+
```ts
110+
const result = await Bun.build({
111+
entrypoints: ["./app.ts"],
112+
outdir: "./dist",
113+
sourcemap: "external",
114+
plugins: [
115+
{
116+
name: "Sleep for 10 seconds",
117+
setup(build) {
118+
build.onStart(async () => {
119+
await Bunlog.sleep(10_000);
120+
});
121+
},
122+
},
123+
{
124+
name: "Log bundle time to a file",
125+
setup(build) {
126+
build.onStart(async () => {
127+
const now = Date.now();
128+
await Bun.$`echo ${now} > bundle-time.txt`;
129+
});
130+
},
131+
},
132+
],
133+
});
134+
```
135+
136+
In the above example, Bun will wait until the first `onStart()` (sleeping for 10 seconds) has completed, _as well as_ the second `onStart()` (writing the bundle time to a file).
137+
138+
Note that `onStart()` callbacks (like every other lifecycle callback) do not have the ability to modify the `build.config` object. If you want to mutate `build.config`, you must do so directly in the `setup()` function.
139+
140+
### `onResolve`
141+
142+
```ts
143+
onResolve(
144+
args: { filter: RegExp; namespace?: string },
145+
callback: (args: { path: string; importer: string }) => {
146+
path: string;
147+
namespace?: string;
148+
} | void,
149+
): void;
150+
```
151+
152+
To bundle your project, Bun walks down the dependency tree of all modules in your project. For each imported module, Bun actually has to find and read that module. The "finding" part is known as "resolving" a module.
153+
154+
The `onResolve()` plugin lifecycle callback allows you to configure how a module is resolved.
155+
156+
The first argument to `onResolve()` is an object with a `filter` and [`namespace`](#what-is-a-namespace) property. The filter is a regular expression which is run on the import string. Effectively, these allow you to filter which modules your custom resolution logic will apply to.
157+
158+
The second argument to `onResolve()` is a callback which is run for each module import Bun finds that matches the `filter` and `namespace` defined in the first argument.
159+
160+
The callback receives as input the _path_ to the matching module. The callback can return a _new path_ for the module. Bun will read the contents of the _new path_ and parse it as a module.
161+
162+
For example, redirecting all imports to `images/` to `./public/images/`:
163+
164+
```ts
165+
import { plugin } from "bun";
166+
167+
plugin({
168+
name: "onResolve example",
169+
setup(build) {
170+
build.onResolve({ filter: /.*/, namespace: "file" }, args => {
171+
if (args.path.startsWith("images/")) {
172+
return {
173+
path: args.path.replace("images/", "./public/images/"),
174+
};
175+
}
176+
});
177+
},
178+
});
179+
```
180+
181+
### `onLoad`
182+
183+
```ts
184+
onLoad(
185+
args: { filter: RegExp; namespace?: string },
186+
defer: () => Promise<void>,
187+
callback: (args: { path: string, importer: string, namespace: string, kind: ImportKind }) => {
188+
loader?: Loader;
189+
contents?: string;
190+
exports?: Record<string, any>;
191+
},
192+
): void;
193+
```
194+
195+
After Bun's bundler has resolved a module, it needs to read the contents of the module and parse it.
196+
197+
The `onLoad()` plugin lifecycle callback allows you to modify the _contents_ of a module before it is read and parsed by Bun.
198+
199+
Like `onResolve()`, the first argument to `onLoad()` allows you to filter which modules this invocation of `onLoad()` will apply to.
200+
201+
The second argument to `onLoad()` is a callback which is run for each matching module _before_ Bun loads the contents of the module into memory.
202+
203+
This callback receives as input the _path_ to the matching module, the _importer_ of the module (the module that imported the module), the _namespace_ of the module, and the _kind_ of the module.
204+
205+
The callback can return a new `contents` string for the module as well as a new `loader`.
206+
207+
For example:
208+
209+
```ts
210+
import { plugin } from "bun";
211+
212+
const envPlugin: BunPlugin = {
213+
name: "env plugin",
214+
setup(build) {
215+
build.onLoad({ filter: /env/, namespace: "file" }, args => {
216+
return {
217+
contents: `export default ${JSON.stringify(process.env)}`,
218+
loader: "js",
219+
};
220+
});
221+
},
222+
});
223+
224+
Bun.build({
225+
entrypoints: ["./app.ts"],
226+
outdir: "./dist",
227+
plugins: [envPlugin],
228+
});
229+
230+
// import env from "env"
231+
// env.FOO === "bar"
232+
```
233+
234+
This plugin will transform all imports of the form `import env from "env"` into a JavaScript module that exports the current environment variables.
235+
236+
#### `.defer()`
237+
238+
One of the arguments passed to the `onLoad` callback is a `defer` function. This function returns a `Promise` that is resolved when all _other_ modules have been loaded.
239+
240+
This allows you to delay execution of the `onLoad` callback until all other modules have been loaded.
241+
242+
This is useful for returning contens of a module that depends on other modules.
243+
244+
##### Example: tracking and reporting unused exports
245+
246+
```ts
247+
import { plugin } from "bun";
248+
249+
plugin({
250+
name: "track imports",
251+
setup(build) {
252+
const transpiler = new Bun.Transpiler();
253+
254+
let trackedImports: Record<string, number> = {};
255+
256+
// Each module that goes through this onLoad callback
257+
// will record its imports in `trackedImports`
258+
build.onLoad({ filter: /\.ts/ }, async ({ path }) => {
259+
const contents = await Bun.file(path).arrayBuffer();
260+
261+
const imports = transpiler.scanImports(contents);
262+
263+
for (const i of imports) {
264+
trackedImports[i.path] = (trackedImports[i.path] || 0) + 1;
265+
}
266+
267+
return undefined;
268+
});
269+
270+
build.onLoad({ filter: /stats\.json/ }, async ({ defer }) => {
271+
// Wait for all files to be loaded, ensuring
272+
// that every file goes through the above `onLoad()` function
273+
// and their imports tracked
274+
await defer();
275+
276+
// Emit JSON containing the stats of each import
277+
return {
278+
contents: `export default ${JSON.stringify(trackedImports)}`,
279+
loader: "json",
280+
};
281+
});
282+
},
283+
});
284+
```
285+
286+
Note that the `.defer()` function currently has the limitation that it can only be called once per `onLoad` callback.
287+
288+
## Native plugins
289+
290+
One of the reasons why Bun's bundler is so fast is that it is written in native code and leverages multi-threading to load and parse modules in parallel.
291+
292+
However, one limitation of plugins written in JavaScript is that JavaScript itself is single-threaded.
293+
294+
Native plugins are written as [NAPI](/docs/node-api) modules and can be run on multiple threads. This allows native plugins to run much faster than JavaScript plugins.
295+
296+
In addition, native plugins can skip unnecessary work such as the UTF-8 -> UTF-16 conversion needed to pass strings to JavaScript.
297+
298+
These are the following lifecycle hooks which are available to native plugins:
299+
300+
- [`onBeforeParse()`](#onbeforeparse): Called on any thread before a file is parsed by Bun's bundler.
301+
302+
Native plugins are NAPI modules which expose lifecycle hooks as C ABI functions.
303+
304+
To create a native plugin, you must export a C ABI function which matches the signature of the native lifecycle hook you want to implement.
305+
306+
### Creating a native plugin in Rust
307+
308+
Native plugins are NAPI modules which expose lifecycle hooks as C ABI functions.
309+
310+
To create a native plugin, you must export a C ABI function which matches the signature of the native lifecycle hook you want to implement.
311+
312+
ve bundler plugins are NAPI modules, the easiest way to get started is to create a new [napi-rs](https://github.com/napi-rs/napi-rs) project:
313+
314+
```bash
315+
bun add -g @napi-rs/cli
316+
napi new
317+
```
318+
319+
Then install this crate:
320+
321+
```bash
322+
cargo add bun-native-plugin
323+
```
324+
325+
Now, inside the `lib.rs` file, we'll use the `bun_native_plugin::bun` proc macro to define a function which
326+
will implement our native plugin.
327+
328+
Here's an example implementing the `onBeforeParse` hook:
329+
330+
```rs
331+
use bun_native_plugin::{define_bun_plugin, OnBeforeParse, bun, Result, anyhow, BunLoader};
332+
use napi_derive::napi;
333+
334+
/// Define the plugin and its name
335+
define_bun_plugin!("replace-foo-with-bar");
336+
337+
/// Here we'll implement `onBeforeParse` with code that replaces all occurrences of
338+
/// `foo` with `bar`.
339+
///
340+
/// We use the #[bun] macro to generate some of the boilerplate code.
341+
///
342+
/// The argument of the function (`handle: &mut OnBeforeParse`) tells
343+
/// the macro that this function implements the `onBeforeParse` hook.
344+
#[bun]
345+
pub fn replace_foo_with_bar(handle: &mut OnBeforeParse) -> Result<()> {
346+
// Fetch the input source code.
347+
let input_source_code = handle.input_source_code()?;
348+
349+
// Get the Loader for the file
350+
let loader = handle.output_loader();
351+
352+
353+
let output_source_code = input_source_code.replace("foo", "bar");
354+
355+
handle.set_output_source_code(output_source_code, BunLoader::BUN_LOADER_JSX);
356+
357+
Ok(())
358+
}
359+
```
360+
361+
### `onBeforeParse`
362+
363+
```ts
364+
onBeforeParse(
365+
args: { filter: RegExp; namespace?: string },
366+
callback: { napiModule: NapiModule; symbol: string; external?: unknown },
367+
): void;
368+
```
369+
370+
This lifecycle callback is run immediately before a file is parsed by Bun's bundler.
371+
372+
As input, it receives the file's contents and can optionally return new source code.
373+
374+
This callback can be called from any thread and so the napi module implementation must be thread-safe.

0 commit comments

Comments
 (0)