bun-types 1.3.2-canary.20251105T140650 → 1.3.2

package/docs/runtime/{modules.md → module-resolution.mdx}

@@ -1,3 +1,8 @@
+---
+title: "Module Resolution"
+description: "How Bun resolves modules and handles imports in JavaScript and TypeScript"
+---
+
 Module resolution in JavaScript is a complex topic.
 
 The ecosystem is currently in the midst of a years-long transition from CommonJS modules to native ES modules. TypeScript enforces its own set of rules around import extensions that aren't compatible with ESM. Different build tools support path re-mapping via disparate non-compatible mechanisms.
@@ -8,26 +13,26 @@ Bun aims to provide a consistent and predictable module resolution system that j
 
 Consider the following files.
 
-{% codetabs %}
+<CodeGroup>
 
-```ts#index.ts
+```ts index.ts icon="/icons/typescript.svg"
 import { hello } from "./hello";
 
 hello();
 ```
 
-```ts#hello.ts
+```ts hello.ts icon="/icons/typescript.svg"
 export function hello() {
   console.log("Hello world!");
 }
 ```
 
-{% /codetabs %}
+</CodeGroup>
 
 When we run `index.ts`, it prints "Hello world!".
 
-```bash
-$ bun index.ts
+```bash icon="terminal" terminal
+bun index.ts
 Hello world!
 ```
 
@@ -50,14 +55,14 @@ In this case, we are importing from `./hello`, a relative path with no extension
 
 Import paths can optionally include extensions. If an extension is present, Bun will only check for a file with that exact extension.
 
-```ts#index.ts
+```ts index.ts icon="/icons/typescript.svg"
 import { hello } from "./hello";
 import { hello } from "./hello.ts"; // this works
 ```
 
 If you import `from "*.js{x}"`, Bun will additionally check for a matching `*.ts{x}` file, to be compatible with TypeScript's [ES module support](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html#new-file-extensions).
 
-```ts#index.ts
+```ts index.ts icon="/icons/typescript.svg"
 import { hello } from "./hello";
 import { hello } from "./hello.ts"; // this works
 import { hello } from "./hello.js"; // this also works
@@ -65,15 +70,15 @@ import { hello } from "./hello.js"; // this also works
 
 Bun supports both ES modules (`import`/`export` syntax) and CommonJS modules (`require()`/`module.exports`). The following CommonJS version would also work in Bun.
 
-{% codetabs %}
+<CodeGroup>
 
-```ts#index.js
+```ts index.js icon="/icons/typescript.svg"
 const { hello } = require("./hello");
 
 hello();
 ```
 
-```ts#hello.js
+```ts hello.js icon="/icons/typescript.svg"
 function hello() {
   console.log("Hello world!");
 }
@@ -81,10 +86,12 @@ function hello() {
 exports.hello = hello;
 ```
 
-{% /codetabs %}
+</CodeGroup>
 
 That said, using CommonJS is discouraged in new projects.
 
+---
+
 ## Module systems
 
 Bun has native support for CommonJS and ES modules. ES Modules are the recommended module format for new projects, but CommonJS modules are still widely used in the Node.js ecosystem.
@@ -100,20 +107,19 @@ In Bun's JavaScript runtime, `require` can be used by both ES Modules and Common
 
 You can `require()` any file or package, even `.ts` or `.mjs` files.
 
-```ts
+```ts title="index.ts" icon="/icons/typescript.svg"
 const { foo } = require("./foo"); // extensions are optional
 const { bar } = require("./bar.mjs");
 const { baz } = require("./baz.tsx");
 ```
 
-{% details summary="What is a CommonJS module?" %}
+<Accordion title="What is a CommonJS module?">
 
 In 2016, ECMAScript added support for [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). ES Modules are the standard for JavaScript modules. However, millions of npm packages still use CommonJS modules.
 
 CommonJS modules are modules that use `module.exports` to export values. Typically, `require` is used to import CommonJS modules.
 
-```ts
-// my-commonjs.cjs
+```ts my-commonjs.cjs icon="/icons/javascript.svg"
 const stuff = require("./stuff");
 module.exports = { stuff };
 ```
@@ -136,13 +142,13 @@ The biggest difference between CommonJS and ES Modules is that CommonJS modules
 - CommonJS modules and static ES Modules (`import` statements) work in a similar synchronous way, like reading a book from start to finish.
 - ES Modules also offer the option to import modules asynchronously using the `import()` function. This is like looking up additional information in the middle of reading the book without stopping.
 
-{% /details %}
+</Accordion>
 
 ### Using `import`
 
 You can `import` any file or package, even `.cjs` files.
 
-```ts
+```ts title="index.ts" icon="/icons/typescript.svg"
 import { foo } from "./foo"; // extensions are optional
 import bar from "./bar.ts";
 import { stuff } from "./my-commonjs.cjs";
@@ -152,9 +158,10 @@ import { stuff } from "./my-commonjs.cjs";
 
 In Bun, you can use `import` or `require` in the same file—they both work, all the time.
 
-```ts
+```ts title="index.ts" icon="/icons/typescript.svg"
 import { stuff } from "./my-commonjs.cjs";
 import Stuff from "./my-commonjs.cjs";
+
 const myStuff = require("./my-commonjs.cjs");
 ```
 
@@ -164,42 +171,21 @@ The only exception to this rule is top-level await. You can't `require()` a file
 
 Fortunately, very few libraries use top-level await, so this is rarely a problem. But if you're using top-level await in your application code, make sure that file isn't being `require()` from elsewhere in your application. Instead, you should use `import` or [dynamic `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import).
 
+---
+
 ## Importing packages
 
 Bun implements the Node.js module resolution algorithm, so you can import packages from `node_modules` with a bare specifier.
 
-```ts
+```ts title="index.ts" icon="/icons/typescript.svg"
 import { stuff } from "foo";
 ```
 
 The full specification of this algorithm are officially documented in the [Node.js documentation](https://nodejs.org/api/modules.html); we won't rehash it here. Briefly: if you import `from "foo"`, Bun scans up the file system for a `node_modules` directory containing the package `foo`.
 
-### NODE_PATH
-
-Bun supports `NODE_PATH` for additional module resolution directories:
-
-```bash
-NODE_PATH=./packages bun run src/index.js
-```
-
-```ts
-// packages/foo/index.js
-export const hello = "world";
-
-// src/index.js
-import { hello } from "foo";
-```
-
-Multiple paths use the platform's delimiter (`:` on Unix, `;` on Windows):
-
-```bash
-NODE_PATH=./packages:./lib bun run src/index.js  # Unix/macOS
-NODE_PATH=./packages;./lib bun run src/index.js  # Windows
-```
-
 Once it finds the `foo` package, Bun reads the `package.json` to determine how the package should be imported. To determine the package's entrypoint, Bun first reads the `exports` field and checks for the following conditions.
 
-```jsonc#package.json
+```json package.json icon="file-json"
 {
   "name": "foo",
   "exports": {
@@ -207,7 +193,7 @@ Once it finds the `foo` package, Bun reads the `package.json` to determine how t
     "node": "./index.js",
     "require": "./index.js", // if importer is CommonJS
     "import": "./index.mjs", // if importer is ES module
-    "default": "./index.js",
+    "default": "./index.js"
   }
 }
 ```
@@ -216,7 +202,7 @@ Whichever one of these conditions occurs _first_ in the `package.json` is used t
 
 Bun respects subpath [`"exports"`](https://nodejs.org/api/packages.html#subpath-exports) and [`"imports"`](https://nodejs.org/api/packages.html#imports).
 
-```jsonc#package.json
+```json package.json icon="file-json"
 {
   "name": "foo",
   "exports": {
@@ -227,7 +213,7 @@ Bun respects subpath [`"exports"`](https://nodejs.org/api/packages.html#subpath-
 
 Subpath imports and conditional imports work in conjunction with each other.
 
-```json
+```json package.json icon="file-json"
 {
   "name": "foo",
   "exports": {
@@ -241,18 +227,20 @@ Subpath imports and conditional imports work in conjunction with each other.
 
 As in Node.js, Specifying any subpath in the `"exports"` map will prevent other subpaths from being importable; you can only import files that are explicitly exported. Given the `package.json` above:
 
-```ts
+```ts index.ts icon="/icons/typescript.svg"
 import stuff from "foo"; // this works
 import stuff from "foo/index.mjs"; // this doesn't
 ```
 
-{% callout %}
-**Shipping TypeScript** — Note that Bun supports the special `"bun"` export condition. If your library is written in TypeScript, you can publish your (un-transpiled!) TypeScript files to `npm` directly. If you specify your package's `*.ts` entrypoint in the `"bun"` condition, Bun will directly import and execute your TypeScript source files.
-{% /callout %}
+<Note>
+  **Shipping TypeScript** — Note that Bun supports the special `"bun"` export condition. If your library is written in
+  TypeScript, you can publish your (un-transpiled!) TypeScript files to `npm` directly. If you specify your package's
+  `*.ts` entrypoint in the `"bun"` condition, Bun will directly import and execute your TypeScript source files.
+</Note>
 
 If `exports` is not defined, Bun falls back to `"module"` (ESM imports only) then [`"main"`](https://nodejs.org/api/packages.html#main).
 
-```json#package.json
+```json package.json icon="file-json"
 {
   "name": "foo",
   "module": "./index.js",
@@ -266,17 +254,17 @@ The `--conditions` flag allows you to specify a list of conditions to use when r
 
 This flag is supported in both `bun build` and Bun's runtime.
 
-```sh
+```sh terminal icon="terminal"
 # Use it with bun build:
-$ bun build --conditions="react-server" --target=bun ./app/foo/route.js
+bun build --conditions="react-server" --target=bun ./app/foo/route.js
 
 # Use it with bun's runtime:
-$ bun --conditions="react-server" ./app/foo/route.js
+bun --conditions="react-server" ./app/foo/route.js
 ```
 
 You can also use `conditions` programmatically with `Bun.build`:
 
-```js
+```ts build.ts icon="/icons/typescript.svg"
 await Bun.build({
   conditions: ["react-server"],
   target: "bun",
@@ -284,16 +272,18 @@ await Bun.build({
 });
 ```
 
+---
+
 ## Path re-mapping
 
 In the spirit of treating TypeScript as a first-class citizen, the Bun runtime will re-map import paths according to the [`compilerOptions.paths`](https://www.typescriptlang.org/tsconfig#paths) field in `tsconfig.json`. This is a major divergence from Node.js, which doesn't support any form of import path re-mapping.
 
-```jsonc#tsconfig.json
+```json tsconfig.json icon="file-json"
 {
   "compilerOptions": {
     "paths": {
-      "config": ["./config.ts"],         // map specifier to file
-      "components/*": ["components/*"],  // wildcard matching
+      "config": ["./config.ts"], // map specifier to file
+      "components/*": ["components/*"] // wildcard matching
     }
   }
 }
@@ -301,7 +291,7 @@ In the spirit of treating TypeScript as a first-class citizen, the Bun runtime w
 
 If you aren't a TypeScript user, you can create a [`jsconfig.json`](https://code.visualstudio.com/docs/languages/jsconfig) in your project root to achieve the same behavior.
 
-{% details summary="Low-level details of CommonJS interop in Bun" %}
+<Accordion title="Low-level details of CommonJS interop in Bun">
 
 Bun's JavaScript runtime has native support for CommonJS. When Bun's JavaScript transpiler detects usages of `module.exports`, it treats the file as CommonJS. The module loader will then wrap the transpiled module in a function shaped like this:
 
@@ -317,4 +307,36 @@ Once the CommonJS module is successfully evaluated, a Synthetic Module Record is
 
 When using Bun's bundler, this works differently. The bundler will wrap the CommonJS module in a `require_${moduleName}` function which returns the `module.exports` object.
 
-{% /details %}
+</Accordion>
+
+---
+
+## `import.meta`
+
+The `import.meta` object is a way for a module to access information about itself. It's part of the JavaScript language, but its contents are not standardized. Each "host" (browser, runtime, etc) is free to implement any properties it wishes on the `import.meta` object.
+
+Bun implements the following properties.
+
+```ts /path/to/project/file.ts
+import.meta.dir; // => "/path/to/project"
+import.meta.file; // => "file.ts"
+import.meta.path; // => "/path/to/project/file.ts"
+import.meta.url; // => "file:///path/to/project/file.ts"
+
+import.meta.main; // `true` if this file is directly executed by `bun run`
+// `false` otherwise
+
+import.meta.resolve("zod"); // => "file:///path/to/project/node_modules/zod/index.js"
+```
+
+| Property               | Description                                                                                                                                                                                                                                                                                                                   |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `import.meta.dir`      | Absolute path to the directory containing the current file, e.g. `/path/to/project`. Equivalent to `__dirname` in CommonJS modules (and Node.js)                                                                                                                                                                              |
+| `import.meta.dirname`  | An alias to `import.meta.dir`, for Node.js compatibility                                                                                                                                                                                                                                                                      |
+| `import.meta.env`      | An alias to `process.env`.                                                                                                                                                                                                                                                                                                    |
+| `import.meta.file`     | The name of the current file, e.g. `index.tsx`                                                                                                                                                                                                                                                                                |
+| `import.meta.path`     | Absolute path to the current file, e.g. `/path/to/project/index.ts`. Equivalent to `__filename` in CommonJS modules (and Node.js)                                                                                                                                                                                             |
+| `import.meta.filename` | An alias to `import.meta.path`, for Node.js compatibility                                                                                                                                                                                                                                                                     |
+| `import.meta.main`     | Indicates whether the current file is the entrypoint to the current `bun` process. Is the file being directly executed by `bun run` or is it being imported?                                                                                                                                                                  |
+| `import.meta.resolve`  | Resolve a module specifier (e.g. `"zod"` or `"./file.tsx"`) to a url. Equivalent to [`import.meta.resolve` in browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta#resolve). Example: `import.meta.resolve("zod")` returns `"file:///path/to/project/node_modules/zod/index.ts"` |
+| `import.meta.url`      | A `string` url to the current file, e.g. `file:///path/to/project/index.ts`. Equivalent to [`import.meta.url` in browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta#url)                                                                                                       |

package/docs/{api/dns.md → runtime/networking/dns.mdx}

@@ -1,4 +1,9 @@
-Bun implements the `node:dns` module.
+---
+title: DNS
+description: Use Bun's DNS module to resolve DNS records
+---
+
+Bun implements it's own `dns` module, and the `node:dns` module.
 
 ```ts
 import * as dns from "node:dns";
@@ -8,6 +13,14 @@ console.log(addrs);
 // => [{ address: "172.67.161.226", family: 4, ttl: 0 }, ...]
 ```
 
+```ts
+import { dns } from "bun";
+
+dns.prefetch("bun.com", 443);
+```
+
+---
+
 ## DNS caching in Bun
 
 In Bun v1.1.9, we added support for DNS caching. This cache makes repeated connections to the same hosts faster.
@@ -39,9 +52,7 @@ An example where you might want to use this is a database driver. When your appl
 
 ### `dns.prefetch`
 
-{% callout %}
-**🚧** — This API is experimental and may change in the future.
-{% /callout %}
+<Warning>This API is experimental and may change in the future.</Warning>
 
 To prefetch a DNS entry, you can use the `dns.prefetch` API. This API is useful when you know you'll need to connect to a host soon and want to avoid the initial DNS lookup.
 
@@ -62,28 +73,18 @@ await fetch("https://bun.com");
 
 ### `dns.getCacheStats()`
 
-{% callout %}
-**🚧** — This API is experimental and may change in the future.
-{% /callout %}
-
-To get the current cache stats, you can use the `dns.getCacheStats` API.
+<Warning>This API is experimental and may change in the future.</Warning>
 
-This API returns an object with the following properties:
+To get the current cache stats, you can use the `dns.getCacheStats` API. This API returns an object with the following properties:
 
 ```ts
 {
-  // Cache hits
-  cacheHitsCompleted: number;
-  cacheHitsInflight: number;
-  cacheMisses: number;
-  // Number of items in the DNS cache
-  size: number;
-
-  // Number of times a connection failed
-  errors: number;
-
-  // Number of times a connection was requested at all (including cache hits and misses)
-  totalCount: number;
+  cacheHitsCompleted: number; // Cache hits completed
+  cacheHitsInflight: number; // Cache hits in flight
+  cacheMisses: number; // Cache misses
+  size: number; // Number of items in the DNS cache
+  errors: number; // Number of times a connection failed
+  totalCount: number; // Number of times a connection was requested at all (including cache hits and misses)
 }
 ```
 

package/docs/{api/fetch.md → runtime/networking/fetch.mdx}

@@ -1,3 +1,8 @@
+---
+title: Fetch
+description: Send HTTP requests with Bun's fetch API
+---
+
 Bun implements the WHATWG `fetch` standard, with some extensions to meet the needs of server-side JavaScript.
 
 Bun also implements `node:http`, but `fetch` is generally recommended instead.
@@ -268,7 +273,7 @@ const response = await fetch("s3://my-bucket/path/to/object", {
 
 Note: Only PUT and POST methods support request bodies when using S3. For uploads, Bun automatically uses multipart upload for streaming bodies.
 
-You can read more about Bun's S3 support in the [S3](https://bun.com/docs/api/s3) documentation.
+You can read more about Bun's S3 support in the [S3](/runtime/s3) documentation.
 
 #### File URLs - `file://`
 
@@ -337,7 +342,7 @@ This will print the request and response headers to your terminal:
 ```sh
 [fetch] > HTTP/1.1 GET http://example.com/
 [fetch] > Connection: keep-alive
-[fetch] > User-Agent: Bun/1.3.2-canary.20251105T140650
+[fetch] > User-Agent: Bun/1.3.1
 [fetch] > Accept: */*
 [fetch] > Host: example.com
 [fetch] > Accept-Encoding: gzip, deflate, br, zstd
@@ -383,7 +388,7 @@ dns.prefetch("bun.com");
 
 By default, Bun caches and deduplicates DNS queries in-memory for up to 30 seconds. You can see the cache stats by calling `dns.getCacheStats()`:
 
-To learn more about DNS caching in Bun, see the [DNS caching](https://bun.com/docs/api/dns) documentation.
+To learn more about DNS caching in Bun, see the [DNS caching](/runtime/networking/dns) documentation.
 
 ### Preconnect to a host
 
@@ -402,7 +407,7 @@ Note: calling `fetch` immediately after `fetch.preconnect` will not make your re
 To preconnect to a host at startup, you can pass `--fetch-preconnect`:
 
 ```sh
-$ bun --fetch-preconnect https://bun.com ./my-script.ts
+bun --fetch-preconnect https://bun.com ./my-script.ts
 ```
 
 This is sort of like `<link rel="preconnect">` in HTML.
@@ -425,7 +430,7 @@ When the limit is exceeded, the requests are queued and sent as soon as the next
 You can increase the maximum number of simultaneous connections via the `BUN_CONFIG_MAX_HTTP_REQUESTS` environment variable:
 
 ```sh
-$ BUN_CONFIG_MAX_HTTP_REQUESTS=512 bun ./my-script.ts
+bun_CONFIG_MAX_HTTP_REQUESTS=512 bun ./my-script.ts
 ```
 
 The max value for this limit is currently set to 65,336. The maximum port number is 65,535, so it's quite difficult for any one computer to exceed this limit.

package/docs/{api/tcp.md → runtime/networking/tcp.mdx}

@@ -1,10 +1,15 @@
-Use Bun's native TCP API to implement performance sensitive systems like database clients, game servers, or anything that needs to communicate over TCP (instead of HTTP). This is a low-level API intended for library authors and for advanced use cases.
+---
+title: TCP
+description: Use Bun's native TCP API to implement performance sensitive systems like database clients, game servers, or anything that needs to communicate over TCP (instead of HTTP)
+---
+
+This is a low-level API intended for library authors and for advanced use cases.
 
 ## Start a server (`Bun.listen()`)
 
 To start a TCP server with `Bun.listen`:
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 Bun.listen({
   hostname: "localhost",
   port: 8080,
@@ -18,11 +23,11 @@ Bun.listen({
 });
 ```
 
-{% details summary="An API designed for speed" %}
+<Accordion title="An API designed for speed">
 
 In Bun, a set of handlers are declared once per server instead of assigning callbacks to each socket, as with Node.js `EventEmitters` or the web-standard `WebSocket` API.
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 Bun.listen({
   hostname: "localhost",
   port: 8080,
@@ -38,11 +43,11 @@ Bun.listen({
 
 For performance-sensitive servers, assigning listeners to each socket can cause significant garbage collector pressure and increase memory usage. By contrast, Bun only allocates one handler function for each event and shares it among all sockets. This is a small optimization, but it adds up.
 
-{% /details %}
+</Accordion>
 
 Contextual data can be attached to a socket in the `open` handler.
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 type SocketData = { sessionId: string };
 
 Bun.listen<SocketData>({
@@ -50,10 +55,10 @@ Bun.listen<SocketData>({
   port: 8080,
   socket: {
     data(socket, data) {
-      socket.write(`${socket.data.sessionId}: ack`);
+      socket.write(`${socket.data.sessionId}: ack`); // [!code ++]
     },
     open(socket) {
-      socket.data = { sessionId: "abcd" };
+      socket.data = { sessionId: "abcd" }; // [!code ++]
     },
   },
 });
@@ -61,7 +66,7 @@ Bun.listen<SocketData>({
 
 To enable TLS, pass a `tls` object containing `key` and `cert` fields.
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 Bun.listen({
   hostname: "localhost",
   port: 8080,
@@ -70,33 +75,29 @@ Bun.listen({
   },
   tls: {
     // can be string, BunFile, TypedArray, Buffer, or array thereof
-    key: Bun.file("./key.pem"),
-    cert: Bun.file("./cert.pem"),
+    key: Bun.file("./key.pem"), // [!code ++]
+    cert: Bun.file("./cert.pem"), // [!code ++]
   },
 });
 ```
 
 The `key` and `cert` fields expect the _contents_ of your TLS key and certificate. This can be a string, `BunFile`, `TypedArray`, or `Buffer`.
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 Bun.listen({
   // ...
   tls: {
-    // BunFile
-    key: Bun.file("./key.pem"),
-    // Buffer
-    key: fs.readFileSync("./key.pem"),
-    // string
-    key: fs.readFileSync("./key.pem", "utf8"),
-    // array of above
-    key: [Bun.file("./key1.pem"), Bun.file("./key2.pem")],
+    key: Bun.file("./key.pem"), // BunFile
+    key: fs.readFileSync("./key.pem"), // Buffer
+    key: fs.readFileSync("./key.pem", "utf8"), // string
+    key: [Bun.file("./key1.pem"), Bun.file("./key2.pem")], // array of above
   },
 });
 ```
 
 The result of `Bun.listen` is a server that conforms to the `TCPSocket` interface.
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 const server = Bun.listen({
   /* config*/
 });
@@ -109,11 +110,13 @@ server.stop(true);
 server.unref();
 ```
 
+---
+
 ## Create a connection (`Bun.connect()`)
 
 Use `Bun.connect` to connect to a TCP server. Specify the server to connect to with `hostname` and `port`. TCP clients can define the same set of handlers as `Bun.listen`, plus a couple client-specific handlers.
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 // The client
 const socket = await Bun.connect({
   hostname: "localhost",
@@ -140,39 +143,48 @@ To require TLS, specify `tls: true`.
 // The client
 const socket = await Bun.connect({
   // ... config
-  tls: true,
+  tls: true, // [!code ++]
 });
 ```
 
+---
+
 ## Hot reloading
 
 Both TCP servers and sockets can be hot reloaded with new handlers.
 
-{% codetabs %}
+<CodeGroup>
 
-```ts#Server
-const server = Bun.listen({ /* config */ })
+```ts server.ts icon="/icons/typescript.svg"
+const server = Bun.listen({
+  /* config */
+});
 
 // reloads handlers for all active server-side sockets
 server.reload({
   socket: {
-    data(){
+    data() {
       // new 'data' handler
-    }
-  }
-})
+    },
+  },
+});
 ```
 
-```ts#Client
-const socket = await Bun.connect({ /* config */ })
+```ts client.ts icon="/icons/typescript.svg"
+const socket = await Bun.connect({
+  /* config */
+});
+
 socket.reload({
-  data(){
+  data() {
     // new 'data' handler
-  }
-})
+  },
+});
 ```
 
-{% /codetabs %}
+</CodeGroup>
+
+---
 
 ## Buffering
 
@@ -194,11 +206,14 @@ socket.write("hello");
 
 To simplify this for now, consider using Bun's `ArrayBufferSink` with the `{stream: true}` option:
 
-```ts
+```ts server.ts icon="/icons/typescript.svg"
 import { ArrayBufferSink } from "bun";
 
 const sink = new ArrayBufferSink();
-sink.start({ stream: true, highWaterMark: 1024 });
+sink.start({
+  stream: true, // [!code ++]
+  highWaterMark: 1024,
+});
 
 sink.write("h");
 sink.write("e");
@@ -216,6 +231,9 @@ queueMicrotask(() => {
 });
 ```
 
-{% callout %}
-**Corking** — Support for corking is planned, but in the meantime backpressure must be managed manually with the `drain` handler.
-{% /callout %}
+<Note>
+**Corking**
+
+Support for corking is planned, but in the meantime backpressure must be managed manually with the `drain` handler.
+
+</Note>