bun-types 1.3.3-canary.20251109T140619 → 1.3.3-canary.20251111T140653
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/docs/guides/deployment/vercel.mdx +2 -2
- package/docs/guides/ecosystem/tanstack-start.mdx +154 -0
- package/docs/guides/install/add-git.mdx +2 -0
- package/docs/pm/cli/install.mdx +20 -4
- package/docs/pm/cli/pm.mdx +4 -0
- package/docs/pm/isolated-installs.mdx +18 -3
- package/docs/project/benchmarking.mdx +23 -0
- package/docs/runtime/bunfig.mdx +1 -1
- package/docs/runtime/http/websockets.mdx +4 -0
- package/docs/test/lifecycle.mdx +24 -6
- package/index.d.ts +0 -1
- package/package.json +1 -7
- package/experimental.d.ts +0 -278
|
@@ -32,7 +32,7 @@ import { ProductCard } from "/snippets/product-card.mdx";
|
|
|
32
32
|
|
|
33
33
|
Vercel automatically detects this configuration and runs your application on Bun. The value has to be `"1.x"`, Vercel handles the minor version internally.
|
|
34
34
|
|
|
35
|
-
For best results, match your local Bun version with the version used by Vercel.
|
|
35
|
+
For best results, match your local Bun version with the version used by Vercel.
|
|
36
36
|
</Step>
|
|
37
37
|
|
|
38
38
|
<Step title="Next.js configuration">
|
|
@@ -81,7 +81,7 @@ import { ProductCard } from "/snippets/product-card.mdx";
|
|
|
81
81
|
console.log("runtime", process.versions.bun);
|
|
82
82
|
```
|
|
83
83
|
```txt
|
|
84
|
-
runtime 1.2
|
|
84
|
+
runtime 1.3.2
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
[See the Vercel Bun Runtime documentation for feature support →](https://vercel.com/docs/functions/runtimes/bun#feature-support)
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Use TanStack Start with Bun
|
|
3
|
+
sidebarTitle: TanStack Start with Bun
|
|
4
|
+
mode: center
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
[TanStack Start](https://tanstack.com/start/latest) is a full-stack framework powered by TanStack Router. It supports full-document SSR, streaming, server functions, bundling and more, powered by TanStack Router and [Vite](https://vite.dev/).
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<Steps>
|
|
12
|
+
<Step title="Create a new TanStack Start app">
|
|
13
|
+
Use the interactive CLI to create a new TanStack Start app.
|
|
14
|
+
|
|
15
|
+
```sh terminal icon="terminal"
|
|
16
|
+
bun create @tanstack/start@latest my-tanstack-app
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
</Step>
|
|
20
|
+
<Step title="Start the dev server">
|
|
21
|
+
Change to the project directory and run the dev server with Bun.
|
|
22
|
+
|
|
23
|
+
```sh terminal icon="terminal"
|
|
24
|
+
cd my-tanstack-app
|
|
25
|
+
bun --bun run dev
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
This starts the Vite dev server with Bun.
|
|
29
|
+
|
|
30
|
+
</Step>
|
|
31
|
+
<Step title="Update scripts in package.json">
|
|
32
|
+
Modify the scripts field in your `package.json` by prefixing the Vite CLI commands with `bun --bun`. This ensures that Bun executes the Vite CLI for common tasks like `dev`, `build`, and `preview`.
|
|
33
|
+
|
|
34
|
+
```json package.json icon="file-json"
|
|
35
|
+
{
|
|
36
|
+
"scripts": {
|
|
37
|
+
"dev": "bun --bun vite dev", // [!code ++]
|
|
38
|
+
"build": "bun --bun vite build", // [!code ++]
|
|
39
|
+
"serve": "bun --bun vite preview" // [!code ++]
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
</Step>
|
|
45
|
+
</Steps>
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Hosting
|
|
50
|
+
|
|
51
|
+
<Steps>
|
|
52
|
+
<Step title="Add Nitro to your project">
|
|
53
|
+
Add [Nitro](https://nitro.build/) to your project. This tool allows you to deploy your TanStack Start app to different platforms.
|
|
54
|
+
|
|
55
|
+
```sh terminal icon="terminal"
|
|
56
|
+
bun add nitro
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
</Step>
|
|
60
|
+
<Step title={<span>Update your <code>vite.config.ts</code> file</span>}>
|
|
61
|
+
Update your `vite.config.ts` file to include the necessary plugins for TanStack Start with Bun.
|
|
62
|
+
|
|
63
|
+
```ts vite.config.ts icon="/icons/typescript.svg"
|
|
64
|
+
// other imports...
|
|
65
|
+
import { nitro } from "nitro/vite"; // [!code ++]
|
|
66
|
+
|
|
67
|
+
const config = defineConfig({
|
|
68
|
+
plugins: [
|
|
69
|
+
tanstackStart(),
|
|
70
|
+
nitro({ preset: "bun" }), // [!code ++]
|
|
71
|
+
// other plugins...
|
|
72
|
+
],
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
export default config;
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
<Note>
|
|
79
|
+
The `bun` preset is optional, but it configures the build output specifically for Bun's runtime.
|
|
80
|
+
</Note>
|
|
81
|
+
|
|
82
|
+
</Step>
|
|
83
|
+
<Step title="Update the start command">
|
|
84
|
+
Make sure `build` and `start` scripts are present in your `package.json` file:
|
|
85
|
+
|
|
86
|
+
```json package.json icon="file-json"
|
|
87
|
+
{
|
|
88
|
+
"scripts": {
|
|
89
|
+
"build": "bun --bun vite build", // [!code ++]
|
|
90
|
+
// The .output files are created by Nitro when you run `bun run build`.
|
|
91
|
+
// Not necessary when deploying to Vercel.
|
|
92
|
+
"start": "bun run .output/server/index.mjs" // [!code ++]
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<Note>
|
|
99
|
+
You do **not** need the custom `start` script when deploying to Vercel.
|
|
100
|
+
</Note>
|
|
101
|
+
|
|
102
|
+
</Step>
|
|
103
|
+
<Step title="Deploy your app">
|
|
104
|
+
Check out one of our guides to deploy your app to a hosting provider.
|
|
105
|
+
|
|
106
|
+
<Note>
|
|
107
|
+
When deploying to Vercel, you can either add the `"bunVersion": "1.x"` to your `vercel.json` file, or add it to the `nitro` config in your `vite.config.ts` file:
|
|
108
|
+
|
|
109
|
+
<Warning>
|
|
110
|
+
Do **not** use the `bun` Nitro preset when deploying to Vercel.
|
|
111
|
+
</Warning>
|
|
112
|
+
|
|
113
|
+
```ts vite.config.ts icon="/icons/typescript.svg"
|
|
114
|
+
export default defineConfig({
|
|
115
|
+
plugins: [
|
|
116
|
+
tanstackStart(),
|
|
117
|
+
nitro({
|
|
118
|
+
preset: "bun", // [!code --]
|
|
119
|
+
vercel: { // [!code ++]
|
|
120
|
+
functions: { // [!code ++]
|
|
121
|
+
runtime: "bun1.x", // [!code ++]
|
|
122
|
+
}, // [!code ++]
|
|
123
|
+
}, // [!code ++]
|
|
124
|
+
}),
|
|
125
|
+
],
|
|
126
|
+
});
|
|
127
|
+
```
|
|
128
|
+
</Note>
|
|
129
|
+
|
|
130
|
+
<Columns cols={3}>
|
|
131
|
+
<Card title="Vercel" href="/guides/deployment/vercel" icon="/icons/ecosystem/vercel.svg">
|
|
132
|
+
Deploy on Vercel
|
|
133
|
+
</Card>
|
|
134
|
+
<Card title="Render" href="/guides/deployment/render" icon="/icons/ecosystem/render.svg">
|
|
135
|
+
Deploy on Render
|
|
136
|
+
</Card>
|
|
137
|
+
<Card title="Railway" href="/guides/deployment/railway" icon="/icons/ecosystem/railway.svg">
|
|
138
|
+
Deploy on Railway
|
|
139
|
+
</Card>
|
|
140
|
+
<Card title="DigitalOcean" href="/guides/deployment/digital-ocean" icon="/icons/ecosystem/digitalocean.svg">
|
|
141
|
+
Deploy on DigitalOcean
|
|
142
|
+
</Card>
|
|
143
|
+
<Card title="AWS Lambda" href="/guides/deployment/aws-lambda" icon="/icons/ecosystem/aws.svg">
|
|
144
|
+
Deploy on AWS Lambda
|
|
145
|
+
</Card>
|
|
146
|
+
<Card title="Google Cloud Run" href="/guides/deployment/google-cloud-run" icon="/icons/ecosystem/gcp.svg">
|
|
147
|
+
Deploy on Google Cloud Run
|
|
148
|
+
</Card>
|
|
149
|
+
</Columns>
|
|
150
|
+
|
|
151
|
+
</Step>
|
|
152
|
+
</Steps>
|
|
153
|
+
|
|
154
|
+
[→ See TanStack Start's official documentation](https://tanstack.com/start/latest/docs/framework/react/guide/hosting) for more information on hosting.
|
|
@@ -33,6 +33,8 @@ bun add git@github.com:lodash/lodash.git
|
|
|
33
33
|
bun add github:colinhacks/zod
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
+
**Note:** GitHub dependencies download via HTTP tarball when possible for faster installation.
|
|
37
|
+
|
|
36
38
|
---
|
|
37
39
|
|
|
38
40
|
See [Docs > Package manager](https://bun.com/docs/cli/install) for complete documentation of Bun's package manager.
|
package/docs/pm/cli/install.mdx
CHANGED
|
@@ -88,6 +88,13 @@ Lifecycle scripts will run in parallel during installation. To adjust the maximu
|
|
|
88
88
|
bun install --concurrent-scripts 5
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
+
Bun automatically optimizes postinstall scripts for popular packages (like `esbuild`, `sharp`, etc.) by determining which scripts need to run. To disable these optimizations:
|
|
92
|
+
|
|
93
|
+
```bash terminal icon="terminal"
|
|
94
|
+
BUN_FEATURE_FLAG_DISABLE_NATIVE_DEPENDENCY_LINKER=1 bun install
|
|
95
|
+
BUN_FEATURE_FLAG_DISABLE_IGNORE_SCRIPTS=1 bun install
|
|
96
|
+
```
|
|
97
|
+
|
|
91
98
|
---
|
|
92
99
|
|
|
93
100
|
## Workspaces
|
|
@@ -231,7 +238,7 @@ Bun supports installing dependencies from Git, GitHub, and local or remotely-hos
|
|
|
231
238
|
|
|
232
239
|
Bun supports two package installation strategies that determine how dependencies are organized in `node_modules`:
|
|
233
240
|
|
|
234
|
-
### Hoisted installs
|
|
241
|
+
### Hoisted installs
|
|
235
242
|
|
|
236
243
|
The traditional npm/Yarn approach that flattens dependencies into a shared `node_modules` directory:
|
|
237
244
|
|
|
@@ -249,7 +256,15 @@ bun install --linker isolated
|
|
|
249
256
|
|
|
250
257
|
Isolated installs create a central package store in `node_modules/.bun/` with symlinks in the top-level `node_modules`. This ensures packages can only access their declared dependencies.
|
|
251
258
|
|
|
252
|
-
|
|
259
|
+
### Default strategy
|
|
260
|
+
|
|
261
|
+
The default linker strategy depends on whether you're starting fresh or have an existing project:
|
|
262
|
+
|
|
263
|
+
- **New workspaces/monorepos**: `isolated` (prevents phantom dependencies)
|
|
264
|
+
- **New single-package projects**: `hoisted` (traditional npm behavior)
|
|
265
|
+
- **Existing projects (made pre-v1.3.2)**: `hoisted` (preserves backward compatibility)
|
|
266
|
+
|
|
267
|
+
The default is controlled by a `configVersion` field in your lockfile. For a detailed explanation, see [Package manager > Isolated installs](/pm/isolated-installs).
|
|
253
268
|
|
|
254
269
|
---
|
|
255
270
|
|
|
@@ -319,8 +334,9 @@ dryRun = false
|
|
|
319
334
|
concurrentScripts = 16 # (cpu count or GOMAXPROCS) x2
|
|
320
335
|
|
|
321
336
|
# installation strategy: "hoisted" or "isolated"
|
|
322
|
-
# default
|
|
323
|
-
#
|
|
337
|
+
# default depends on lockfile configVersion and workspaces:
|
|
338
|
+
# - configVersion = 1: "isolated" if using workspaces, otherwise "hoisted"
|
|
339
|
+
# - configVersion = 0: "hoisted"
|
|
324
340
|
linker = "hoisted"
|
|
325
341
|
|
|
326
342
|
|
package/docs/pm/cli/pm.mdx
CHANGED
|
@@ -115,6 +115,8 @@ To print a list of installed dependencies in the current project and their resol
|
|
|
115
115
|
|
|
116
116
|
```bash terminal icon="terminal"
|
|
117
117
|
bun pm ls
|
|
118
|
+
# or
|
|
119
|
+
bun list
|
|
118
120
|
```
|
|
119
121
|
|
|
120
122
|
```txt
|
|
@@ -130,6 +132,8 @@ To print all installed dependencies, including nth-order dependencies.
|
|
|
130
132
|
|
|
131
133
|
```bash terminal icon="terminal"
|
|
132
134
|
bun pm ls --all
|
|
135
|
+
# or
|
|
136
|
+
bun list --all
|
|
133
137
|
```
|
|
134
138
|
|
|
135
139
|
```txt
|
|
@@ -5,7 +5,7 @@ description: "Strict dependency isolation similar to pnpm's approach"
|
|
|
5
5
|
|
|
6
6
|
Bun provides an alternative package installation strategy called **isolated installs** that creates strict dependency isolation similar to pnpm's approach. This mode prevents phantom dependencies and ensures reproducible, deterministic builds.
|
|
7
7
|
|
|
8
|
-
This is the default installation strategy for monorepo projects.
|
|
8
|
+
This is the default installation strategy for **new** workspace/monorepo projects (with `configVersion = 1` in the lockfile). Existing projects continue using hoisted installs unless explicitly configured.
|
|
9
9
|
|
|
10
10
|
## What are isolated installs?
|
|
11
11
|
|
|
@@ -43,8 +43,23 @@ linker = "isolated"
|
|
|
43
43
|
|
|
44
44
|
### Default behavior
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
The default linker strategy depends on your project's lockfile `configVersion`:
|
|
47
|
+
|
|
48
|
+
| `configVersion` | Using workspaces? | Default Linker |
|
|
49
|
+
| --------------- | ----------------- | -------------- |
|
|
50
|
+
| `1` | ✅ | `isolated` |
|
|
51
|
+
| `1` | ❌ | `hoisted` |
|
|
52
|
+
| `0` | ✅ | `hoisted` |
|
|
53
|
+
| `0` | ❌ | `hoisted` |
|
|
54
|
+
|
|
55
|
+
**New projects**: Default to `configVersion = 1`. In workspaces, v1 uses the isolated linker by default; otherwise it uses hoisted linking.
|
|
56
|
+
|
|
57
|
+
**Existing Bun projects (made pre-v1.3.2)**: If your existing lockfile doesn't have a version yet, Bun sets `configVersion = 0` when you run `bun install`, preserving the previous hoisted linker default.
|
|
58
|
+
|
|
59
|
+
**Migrations from other package managers**:
|
|
60
|
+
|
|
61
|
+
- From pnpm: `configVersion = 1` (using isolated installs in workspaces)
|
|
62
|
+
- From npm or yarn: `configVersion = 0` (using hoisted installs)
|
|
48
63
|
|
|
49
64
|
You can override the default behavior by explicitly specifying the `--linker` flag or setting it in your configuration file.
|
|
50
65
|
|
|
@@ -216,3 +216,26 @@ numa nodes: 1
|
|
|
216
216
|
elapsed: 0.068 s
|
|
217
217
|
process: user: 0.061 s, system: 0.014 s, faults: 0, rss: 57.4 MiB, commit: 64.0 MiB
|
|
218
218
|
```
|
|
219
|
+
|
|
220
|
+
## CPU profiling
|
|
221
|
+
|
|
222
|
+
Profile JavaScript execution to identify performance bottlenecks with the `--cpu-prof` flag.
|
|
223
|
+
|
|
224
|
+
```sh terminal icon="terminal"
|
|
225
|
+
bun --cpu-prof script.js
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
This generates a `.cpuprofile` file you can open in Chrome DevTools (Performance tab → Load profile) or VS Code's CPU profiler.
|
|
229
|
+
|
|
230
|
+
### Options
|
|
231
|
+
|
|
232
|
+
```sh terminal icon="terminal"
|
|
233
|
+
bun --cpu-prof --cpu-prof-name my-profile.cpuprofile script.js
|
|
234
|
+
bun --cpu-prof --cpu-prof-dir ./profiles script.js
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
| Flag | Description |
|
|
238
|
+
| ---------------------------- | -------------------- |
|
|
239
|
+
| `--cpu-prof` | Enable profiling |
|
|
240
|
+
| `--cpu-prof-name <filename>` | Set output filename |
|
|
241
|
+
| `--cpu-prof-dir <dir>` | Set output directory |
|
package/docs/runtime/bunfig.mdx
CHANGED
|
@@ -497,7 +497,7 @@ print = "yarn"
|
|
|
497
497
|
|
|
498
498
|
### `install.linker`
|
|
499
499
|
|
|
500
|
-
Configure the
|
|
500
|
+
Configure the linker strategy for installing dependencies. Defaults to `"isolated"` for new workspaces, `"hoisted"` for new single-package projects and existing projects (made pre-v1.3.2).
|
|
501
501
|
|
|
502
502
|
For complete documentation refer to [Package manager > Isolated installs](/pm/isolated-installs).
|
|
503
503
|
|
|
@@ -212,6 +212,9 @@ const server = Bun.serve({
|
|
|
212
212
|
// this is a group chat
|
|
213
213
|
// so the server re-broadcasts incoming message to everyone
|
|
214
214
|
server.publish("the-group-chat", `${ws.data.username}: ${message}`);
|
|
215
|
+
|
|
216
|
+
// inspect current subscriptions
|
|
217
|
+
console.log(ws.subscriptions); // ["the-group-chat"]
|
|
215
218
|
},
|
|
216
219
|
close(ws) {
|
|
217
220
|
const msg = `${ws.data.username} has left the chat`;
|
|
@@ -393,6 +396,7 @@ interface ServerWebSocket {
|
|
|
393
396
|
readonly data: any;
|
|
394
397
|
readonly readyState: number;
|
|
395
398
|
readonly remoteAddress: string;
|
|
399
|
+
readonly subscriptions: string[];
|
|
396
400
|
send(message: string | ArrayBuffer | Uint8Array, compress?: boolean): number;
|
|
397
401
|
close(code?: number, reason?: string): void;
|
|
398
402
|
subscribe(topic: string): void;
|
package/docs/test/lifecycle.mdx
CHANGED
|
@@ -5,12 +5,13 @@ description: "Learn how to use beforeAll, beforeEach, afterEach, and afterAll li
|
|
|
5
5
|
|
|
6
6
|
The test runner supports the following lifecycle hooks. This is useful for loading test fixtures, mocking data, and configuring the test environment.
|
|
7
7
|
|
|
8
|
-
| Hook
|
|
9
|
-
|
|
|
10
|
-
| `beforeAll`
|
|
11
|
-
| `beforeEach`
|
|
12
|
-
| `afterEach`
|
|
13
|
-
| `afterAll`
|
|
8
|
+
| Hook | Description |
|
|
9
|
+
| ---------------- | ---------------------------------------------------------- |
|
|
10
|
+
| `beforeAll` | Runs once before all tests. |
|
|
11
|
+
| `beforeEach` | Runs before each test. |
|
|
12
|
+
| `afterEach` | Runs after each test. |
|
|
13
|
+
| `afterAll` | Runs once after all tests. |
|
|
14
|
+
| `onTestFinished` | Runs after a single test finishes (after all `afterEach`). |
|
|
14
15
|
|
|
15
16
|
## Per-Test Setup and Teardown
|
|
16
17
|
|
|
@@ -90,6 +91,23 @@ describe("test group", () => {
|
|
|
90
91
|
});
|
|
91
92
|
```
|
|
92
93
|
|
|
94
|
+
### `onTestFinished`
|
|
95
|
+
|
|
96
|
+
Use `onTestFinished` to run a callback after a single test completes. It runs after all `afterEach` hooks.
|
|
97
|
+
|
|
98
|
+
```ts title="test.ts" icon="/icons/typescript.svg"
|
|
99
|
+
import { test, onTestFinished } from "bun:test";
|
|
100
|
+
|
|
101
|
+
test("cleanup after test", () => {
|
|
102
|
+
onTestFinished(() => {
|
|
103
|
+
// runs after all afterEach hooks
|
|
104
|
+
console.log("test finished");
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Not supported in concurrent tests; use `test.serial` instead.
|
|
110
|
+
|
|
93
111
|
## Global Setup and Teardown
|
|
94
112
|
|
|
95
113
|
To scope the hooks to an entire multi-file test run, define the hooks in a separate file.
|
package/index.d.ts
CHANGED
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
/// <reference path="./deprecated.d.ts" />
|
|
21
21
|
/// <reference path="./redis.d.ts" />
|
|
22
22
|
/// <reference path="./shell.d.ts" />
|
|
23
|
-
/// <reference path="./experimental.d.ts" />
|
|
24
23
|
/// <reference path="./serve.d.ts" />
|
|
25
24
|
/// <reference path="./sql.d.ts" />
|
|
26
25
|
/// <reference path="./security.d.ts" />
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.3.3-canary.
|
|
2
|
+
"version": "1.3.3-canary.20251111T140653",
|
|
3
3
|
"name": "bun-types",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"types": "./index.d.ts",
|
|
@@ -23,12 +23,6 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@types/node": "*"
|
|
25
25
|
},
|
|
26
|
-
"peerDependencies": {
|
|
27
|
-
"@types/react": "^19"
|
|
28
|
-
},
|
|
29
|
-
"devDependencies": {
|
|
30
|
-
"@types/react": "^19"
|
|
31
|
-
},
|
|
32
26
|
"scripts": {
|
|
33
27
|
"prebuild": "echo $(pwd)",
|
|
34
28
|
"copy-docs": "rm -rf docs && cp -rL ../../docs/ ./docs && find ./docs -type f -name '*.{md,mdx}' -exec sed -i 's/\\$BUN_LATEST_VERSION/'\"${BUN_VERSION#bun-v}\"'/g' {} +",
|
package/experimental.d.ts
DELETED
|
@@ -1,278 +0,0 @@
|
|
|
1
|
-
declare module "bun" {
|
|
2
|
-
export namespace __experimental {
|
|
3
|
-
/**
|
|
4
|
-
* Base interface for static site generation route parameters.
|
|
5
|
-
*
|
|
6
|
-
* Supports both single string values and arrays of strings for dynamic route segments.
|
|
7
|
-
* This is typically used for route parameters like `[slug]`, `[...rest]`, or `[id]`.
|
|
8
|
-
*
|
|
9
|
-
* @warning These APIs are experimental and might be moved/changed in future releases.
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* ```tsx
|
|
13
|
-
* // Simple slug parameter
|
|
14
|
-
* type BlogParams = { slug: string };
|
|
15
|
-
*
|
|
16
|
-
* // Multiple parameters
|
|
17
|
-
* type ProductParams = {
|
|
18
|
-
* category: string;
|
|
19
|
-
* id: string;
|
|
20
|
-
* };
|
|
21
|
-
*
|
|
22
|
-
* // Catch-all routes with string arrays
|
|
23
|
-
* type DocsParams = {
|
|
24
|
-
* path: string[];
|
|
25
|
-
* };
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export interface SSGParamsLike {
|
|
29
|
-
[key: string]: string | string[];
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Configuration object for a single static route to be generated.
|
|
34
|
-
*
|
|
35
|
-
* Each path object contains the parameters needed to render a specific
|
|
36
|
-
* instance of a dynamic route at build time.
|
|
37
|
-
*
|
|
38
|
-
* @warning These APIs are experimental and might be moved/changed in future releases.
|
|
39
|
-
*
|
|
40
|
-
* @template Params - The shape of route parameters for this path
|
|
41
|
-
*
|
|
42
|
-
* @example
|
|
43
|
-
* ```tsx
|
|
44
|
-
* // Single blog post path
|
|
45
|
-
* const blogPath: SSGPath<{ slug: string }> = {
|
|
46
|
-
* params: { slug: "my-first-post" }
|
|
47
|
-
* };
|
|
48
|
-
*
|
|
49
|
-
* // Product page with multiple params
|
|
50
|
-
* const productPath: SSGPath<{ category: string; id: string }> = {
|
|
51
|
-
* params: {
|
|
52
|
-
* category: "electronics",
|
|
53
|
-
* id: "laptop-123"
|
|
54
|
-
* }
|
|
55
|
-
* };
|
|
56
|
-
*
|
|
57
|
-
* // Documentation with catch-all route
|
|
58
|
-
* const docsPath: SSGPath<{ path: string[] }> = {
|
|
59
|
-
* params: { path: ["getting-started", "installation"] }
|
|
60
|
-
* };
|
|
61
|
-
* ```
|
|
62
|
-
*/
|
|
63
|
-
export interface SSGPath<Params extends SSGParamsLike = SSGParamsLike> {
|
|
64
|
-
params: Params;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Array of static paths to be generated at build time.
|
|
69
|
-
*
|
|
70
|
-
* This type represents the collection of all route configurations
|
|
71
|
-
* that should be pre-rendered for a dynamic route.
|
|
72
|
-
*
|
|
73
|
-
* @warning These APIs are experimental and might be moved/changed in future releases.
|
|
74
|
-
*
|
|
75
|
-
* @template Params - The shape of route parameters for these paths
|
|
76
|
-
*
|
|
77
|
-
* @example
|
|
78
|
-
* ```tsx
|
|
79
|
-
* // Array of blog post paths
|
|
80
|
-
* const blogPaths: SSGPaths<{ slug: string }> = [
|
|
81
|
-
* { params: { slug: "introduction-to-bun" } },
|
|
82
|
-
* { params: { slug: "performance-benchmarks" } },
|
|
83
|
-
* { params: { slug: "getting-started-guide" } }
|
|
84
|
-
* ];
|
|
85
|
-
*
|
|
86
|
-
* // Mixed parameter types
|
|
87
|
-
* const productPaths: SSGPaths<{ category: string; id: string }> = [
|
|
88
|
-
* { params: { category: "books", id: "javascript-guide" } },
|
|
89
|
-
* { params: { category: "electronics", id: "smartphone-x" } }
|
|
90
|
-
* ];
|
|
91
|
-
* ```
|
|
92
|
-
*/
|
|
93
|
-
export type SSGPaths<Params extends SSGParamsLike = SSGParamsLike> = SSGPath<Params>[];
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* Props interface for SSG page components.
|
|
97
|
-
*
|
|
98
|
-
* This interface defines the shape of props that will be passed to your
|
|
99
|
-
* static page components during the build process. The `params` object
|
|
100
|
-
* contains the route parameters extracted from the URL pattern.
|
|
101
|
-
*
|
|
102
|
-
* @warning These APIs are experimental and might be moved/changed in future releases.
|
|
103
|
-
*
|
|
104
|
-
* @template Params - The shape of route parameters for this page
|
|
105
|
-
*
|
|
106
|
-
* @example
|
|
107
|
-
* ```tsx
|
|
108
|
-
* // Blog post component props
|
|
109
|
-
* interface BlogPageProps extends SSGPageProps<{ slug: string }> {
|
|
110
|
-
* // params: { slug: string } is automatically included
|
|
111
|
-
* }
|
|
112
|
-
*
|
|
113
|
-
* // Product page component props
|
|
114
|
-
* interface ProductPageProps extends SSGPageProps<{
|
|
115
|
-
* category: string;
|
|
116
|
-
* id: string;
|
|
117
|
-
* }> {
|
|
118
|
-
* // params: { category: string; id: string } is automatically included
|
|
119
|
-
* }
|
|
120
|
-
*
|
|
121
|
-
* // Usage in component
|
|
122
|
-
* function BlogPost({ params }: BlogPageProps) {
|
|
123
|
-
* const { slug } = params; // TypeScript knows slug is a string
|
|
124
|
-
* return <h1>Blog post: {slug}</h1>;
|
|
125
|
-
* }
|
|
126
|
-
* ```
|
|
127
|
-
*/
|
|
128
|
-
export interface SSGPageProps<Params extends SSGParamsLike = SSGParamsLike> {
|
|
129
|
-
params: Params;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* React component type for SSG pages that can be statically generated.
|
|
134
|
-
*
|
|
135
|
-
* This type represents a React component that receives SSG page props
|
|
136
|
-
* and can be rendered at build time. The component can be either a regular
|
|
137
|
-
* React component or an async React Server Component for advanced use cases
|
|
138
|
-
* like data fetching during static generation.
|
|
139
|
-
*
|
|
140
|
-
* @warning These APIs are experimental and might be moved/changed in future releases.
|
|
141
|
-
*
|
|
142
|
-
* @template Params - The shape of route parameters for this page component
|
|
143
|
-
*
|
|
144
|
-
* @example
|
|
145
|
-
* ```tsx
|
|
146
|
-
* // Regular synchronous SSG page component
|
|
147
|
-
* const BlogPost: SSGPage<{ slug: string }> = ({ params }) => {
|
|
148
|
-
* return (
|
|
149
|
-
* <article>
|
|
150
|
-
* <h1>Blog Post: {params.slug}</h1>
|
|
151
|
-
* <p>This content was generated at build time!</p>
|
|
152
|
-
* </article>
|
|
153
|
-
* );
|
|
154
|
-
* };
|
|
155
|
-
*
|
|
156
|
-
* // Async React Server Component for data fetching
|
|
157
|
-
* const AsyncBlogPost: SSGPage<{ slug: string }> = async ({ params }) => {
|
|
158
|
-
* // Fetch data during static generation
|
|
159
|
-
* const post = await fetchBlogPost(params.slug);
|
|
160
|
-
* const author = await fetchAuthor(post.authorId);
|
|
161
|
-
*
|
|
162
|
-
* return (
|
|
163
|
-
* <article>
|
|
164
|
-
* <h1>{post.title}</h1>
|
|
165
|
-
* <p>By {author.name}</p>
|
|
166
|
-
* <div dangerouslySetInnerHTML={{ __html: post.content }} />
|
|
167
|
-
* </article>
|
|
168
|
-
* );
|
|
169
|
-
* };
|
|
170
|
-
*
|
|
171
|
-
* // Product page with multiple params and async data fetching
|
|
172
|
-
* const ProductPage: SSGPage<{ category: string; id: string }> = async ({ params }) => {
|
|
173
|
-
* const [product, reviews] = await Promise.all([
|
|
174
|
-
* fetchProduct(params.category, params.id),
|
|
175
|
-
* fetchProductReviews(params.id)
|
|
176
|
-
* ]);
|
|
177
|
-
*
|
|
178
|
-
* return (
|
|
179
|
-
* <div>
|
|
180
|
-
* <h1>{product.name}</h1>
|
|
181
|
-
* <p>Category: {params.category}</p>
|
|
182
|
-
* <p>Price: ${product.price}</p>
|
|
183
|
-
* <div>
|
|
184
|
-
* <h2>Reviews ({reviews.length})</h2>
|
|
185
|
-
* {reviews.map(review => (
|
|
186
|
-
* <div key={review.id}>{review.comment}</div>
|
|
187
|
-
* ))}
|
|
188
|
-
* </div>
|
|
189
|
-
* </div>
|
|
190
|
-
* );
|
|
191
|
-
* };
|
|
192
|
-
* ```
|
|
193
|
-
*/
|
|
194
|
-
export type SSGPage<Params extends SSGParamsLike = SSGParamsLike> = import("react").ComponentType<
|
|
195
|
-
SSGPageProps<Params>
|
|
196
|
-
>;
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* getStaticPaths is Bun's implementation of SSG (Static Site Generation) path determination.
|
|
200
|
-
*
|
|
201
|
-
* This function is called at your app's build time to determine which
|
|
202
|
-
* dynamic routes should be pre-rendered as static pages. It returns an
|
|
203
|
-
* array of path parameters that will be used to generate static pages for
|
|
204
|
-
* dynamic routes (e.g., [slug].tsx, [category]/[id].tsx).
|
|
205
|
-
*
|
|
206
|
-
* The function can be either synchronous or asynchronous, allowing you to
|
|
207
|
-
* fetch data from APIs, databases, or file systems to determine which paths
|
|
208
|
-
* should be statically generated.
|
|
209
|
-
*
|
|
210
|
-
* @warning These APIs are experimental and might be moved/changed in future releases.
|
|
211
|
-
*
|
|
212
|
-
* @template Params - The shape of route parameters for the dynamic route
|
|
213
|
-
*
|
|
214
|
-
* @returns An object containing an array of paths to be statically generated
|
|
215
|
-
*
|
|
216
|
-
* @example
|
|
217
|
-
* ```tsx
|
|
218
|
-
* // In pages/blog/[slug].tsx ———————————————————╮
|
|
219
|
-
* export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
|
|
220
|
-
* // Fetch all blog posts from your CMS or API at build time
|
|
221
|
-
* const posts = await fetchBlogPosts();
|
|
222
|
-
*
|
|
223
|
-
* return {
|
|
224
|
-
* paths: posts.map((post) => ({
|
|
225
|
-
* params: { slug: post.slug }
|
|
226
|
-
* }))
|
|
227
|
-
* };
|
|
228
|
-
* };
|
|
229
|
-
*
|
|
230
|
-
* // In pages/products/[category]/[id].tsx
|
|
231
|
-
* export const getStaticPaths: GetStaticPaths<{
|
|
232
|
-
* category: string;
|
|
233
|
-
* id: string;
|
|
234
|
-
* }> = async () => {
|
|
235
|
-
* // Fetch products from database
|
|
236
|
-
* const products = await db.products.findMany({
|
|
237
|
-
* select: { id: true, category: { slug: true } }
|
|
238
|
-
* });
|
|
239
|
-
*
|
|
240
|
-
* return {
|
|
241
|
-
* paths: products.map(product => ({
|
|
242
|
-
* params: {
|
|
243
|
-
* category: product.category.slug,
|
|
244
|
-
* id: product.id
|
|
245
|
-
* }
|
|
246
|
-
* }))
|
|
247
|
-
* };
|
|
248
|
-
* };
|
|
249
|
-
*
|
|
250
|
-
* // In pages/docs/[...path].tsx (catch-all route)
|
|
251
|
-
* export const getStaticPaths: GetStaticPaths<{ path: string[] }> = async () => {
|
|
252
|
-
* // Read documentation structure from file system
|
|
253
|
-
* const docPaths = await getDocumentationPaths('./content/docs');
|
|
254
|
-
*
|
|
255
|
-
* return {
|
|
256
|
-
* paths: docPaths.map(docPath => ({
|
|
257
|
-
* params: { path: docPath.split('/') }
|
|
258
|
-
* }))
|
|
259
|
-
* };
|
|
260
|
-
* };
|
|
261
|
-
*
|
|
262
|
-
* // Synchronous example with static data
|
|
263
|
-
* export const getStaticPaths: GetStaticPaths<{ id: string }> = () => {
|
|
264
|
-
* const staticIds = ['1', '2', '3', '4', '5'];
|
|
265
|
-
*
|
|
266
|
-
* return {
|
|
267
|
-
* paths: staticIds.map(id => ({
|
|
268
|
-
* params: { id }
|
|
269
|
-
* }))
|
|
270
|
-
* };
|
|
271
|
-
* };
|
|
272
|
-
* ```
|
|
273
|
-
*/
|
|
274
|
-
export type GetStaticPaths<Params extends SSGParamsLike = SSGParamsLike> = () => MaybePromise<{
|
|
275
|
-
paths: SSGPaths<Params>;
|
|
276
|
-
}>;
|
|
277
|
-
}
|
|
278
|
-
}
|