bun-types 1.3.2-canary.20251105T140650 → 1.3.2

package/docs/guides/ecosystem/prisma.mdx

@@ -0,0 +1,164 @@
+---
+title: Use Prisma with Bun
+sidebarTitle: Prisma ORM with Bun
+mode: center
+---
+
+<Note>
+  **Note** — Prisma's dynamic subcommand loading system currently requires npm to be installed alongside Bun. This
+  affects certain CLI commands like `prisma init`, `prisma migrate`, etc. Generated code works perfectly with Bun using
+  the new `prisma-client` generator.
+</Note>
+
+<Steps>
+	<Step title="Create a new project">
+		Prisma works out of the box with Bun. First, create a directory and initialize it with `bun init`.
+
+    	```bash terminal icon="terminal"
+    	mkdir prisma-app
+    	cd prisma-app
+    	bun init
+    	```
+    </Step>
+
+    <Step title="Install Prisma dependencies">
+    	Then install the Prisma CLI (`prisma`), Prisma Client (`@prisma/client`), and the LibSQL adapter as dependencies.
+
+    	```bash terminal icon="terminal"
+    	bun add -d prisma
+    	bun add @prisma/client @prisma/adapter-libsql
+    	```
+    </Step>
+
+    <Step title="Initialize Prisma with SQLite">
+    	We'll use the Prisma CLI with `bunx` to initialize our schema and migration directory. For simplicity we'll be using an in-memory SQLite database.
+
+    	```bash terminal icon="terminal"
+    	bunx --bun prisma init --datasource-provider sqlite
+    	```
+
+    	This creates a basic schema. We need to update it to use the new Rust-free client with Bun optimization. Open `prisma/schema.prisma` and modify the generator block, then add a simple `User` model.
+
+    	```prisma prisma/schema.prisma icon="/icons/ecosystem/prisma.svg"
+    	  generator client {
+    	    provider = "prisma-client" // [!code ++]
+    	    output = "./generated" // [!code ++]
+    	    engineType = "client" // [!code ++]
+    	    runtime = "bun" // [!code ++]
+    	  }
+
+    	  datasource db {
+    	    provider = "sqlite"
+    	    url      = env("DATABASE_URL")
+    	  }
+
+    	  model User { // [!code ++]
+    	    id    Int     @id @default(autoincrement()) // [!code ++]
+    	    email String  @unique // [!code ++]
+    	    name  String? // [!code ++]
+    	  } // [!code ++]
+    	```
+    </Step>
+
+    <Step title="Create and run database migration">
+    	Then generate and run initial migration.
+
+    	This will generate a `.sql` migration file in `prisma/migrations`, create a new SQLite instance, and execute the migration against the new instance.
+
+    	```bash terminal icon="terminal"
+    	 bunx --bun prisma migrate dev --name init
+    	 ```
+    	 ```txt
+    	Environment variables loaded from .env
+    	Prisma schema loaded from prisma/schema.prisma
+    	Datasource "db": SQLite database "dev.db" at "file:./dev.db"
+
+    	SQLite database dev.db created at file:./dev.db
+
+    	Applying migration `20251014141233_init`
+
+    	The following migration(s) have been created and applied from new schema changes:
+
+    	prisma/migrations/
+    	  └─ 20251014141233_init/
+    	    └─ migration.sql
+
+    	Your database is now in sync with your schema.
+
+    	✔ Generated Prisma Client (6.17.1) to ./generated in 18ms
+    	```
+    </Step>
+
+    <Step title="Generate Prisma Client">
+    	As indicated in the output, Prisma re-generates our _Prisma client_ whenever we execute a new migration. The client provides a fully typed API for reading and writing from our database. You can manually re-generate the client with the Prisma CLI.
+
+    	```sh terminal icon="terminal"
+    	bunx --bun prisma generate
+    	```
+    </Step>
+
+    <Step title="Initialize Prisma Client with LibSQL">
+    	Now we need to create a Prisma client instance. Create a new file `prisma/db.ts` to initialize the PrismaClient with the LibSQL adapter.
+
+    	```ts prisma/db.ts icon="/icons/typescript.svg"
+    	import { PrismaClient } from "./generated/client";
+    	import { PrismaLibSQL } from "@prisma/adapter-libsql";
+
+    	const adapter = new PrismaLibSQL({ url: process.env.DATABASE_URL || "" });
+    	export const prisma = new PrismaClient({ adapter });
+    	```
+    </Step>
+
+    <Step title="Create a test script">
+    	Let's write a simple script to create a new user, then count the number of users in the database.
+
+    	```ts index.ts icon="/icons/typescript.svg"
+    	import { prisma } from "./prisma/db";
+
+    	// create a new user
+    	await prisma.user.create({
+    	  data: {
+    	    name: "John Dough",
+    	    email: `john-${Math.random()}@example.com`,
+    	  },
+    	});
+
+    	// count the number of users
+    	const count = await prisma.user.count();
+    	console.log(`There are ${count} users in the database.`);
+    	```
+    </Step>
+
+    <Step title="Run and test the application">
+    	Let's run this script with `bun run`. Each time we run it, a new user is created.
+
+    	```bash terminal icon="terminal"
+    	bun run index.ts
+    	```
+    	```txg
+    	Created john-0.12802932895402364@example.com
+    	There are 1 users in the database.
+    	```
+
+    	```bash terminal icon="terminal"
+    	bun run index.ts
+    	```
+    	```txt
+    	Created john-0.8671308799782803@example.com
+    	There are 2 users in the database.
+    	```
+
+    	```bash terminal icon="terminal"
+    	bun run index.ts
+    	```
+    	```txt
+    	Created john-0.4465968383115295@example.com
+    	There are 3 users in the database.
+    	```
+    </Step>
+
+</Steps>
+
+---
+
+That's it! Now that you've set up Prisma using Bun, we recommend referring to the [official Prisma docs](https://www.prisma.io/docs/concepts/components/prisma-client) as you continue to develop your application.

package/docs/guides/ecosystem/{qwik.md → qwik.mdx}

@@ -1,14 +1,18 @@
 ---
-name: Build an app with Qwik and Bun
+title: Build an app with Qwik and Bun
+sidebarTitle: Qwik with Bun
+mode: center
 ---
 
 Initialize a new Qwik app with `bunx create-qwik`.
 
 The `create-qwik` package detects when you are using `bunx` and will automatically install dependencies using `bun`.
 
-```sh
-$ bun create qwik
+```sh terminal icon="terminal"
+bun create qwik
+```
 
+```txts
       ............
     .::: :--------:.
    .::::  .:-------:.
@@ -85,22 +89,25 @@ $ bun create qwik
 
 Run `bun run dev` to start the development server.
 
-```sh
-$ bun run dev
-  $ vite--mode ssr
+```sh terminal icon="terminal"
+bun run dev
+```
+
+```txt
+$ vite--mode ssr
 
-  VITE v4.4.7  ready in 1190 ms
+VITE v4.4.7  ready in 1190 ms
 
-  ➜  Local:   http://localhost:5173/
-  ➜  Network: use --host to expose
-  ➜  press h to show help
+➜  Local:   http://localhost:5173/
+➜  Network: use --host to expose
+➜  press h to show help
 ```
 
 ---
 
 Open [http://localhost:5173](http://localhost:5173) with your browser to see the result. Qwik will hot-reload your app as you edit your source files.
 
-{% image src="https://github.com/oven-sh/bun/assets/3084745/ec35f2f7-03dd-4c90-851e-fb4ad150bb28" alt="Qwik screenshot" /%}
+<Frame>![Qwik screenshot](https://github.com/oven-sh/bun/assets/3084745/ec35f2f7-03dd-4c90-851e-fb4ad150bb28)</Frame>
 
 ---
 

package/docs/guides/ecosystem/{react.md → react.mdx}

@@ -1,23 +1,25 @@
 ---
-name: Build a React app with Bun
+title: Build a React app with Bun
+sidebarTitle: React with Bun
+mode: center
 ---
 
 Bun supports `.jsx` and `.tsx` files out of the box. React just works with Bun.
 
 Create a new React app with `bun init --react`. This gives you a template with a simple React app and a simple API server together in one full-stack app.
 
-```bash
+```bash terminal icon="terminal"
 # Create a new React app
-$ bun init --react
+bun init --react
 
 # Run the app in development mode
-$ bun dev
+bun dev
 
 # Build as a static site for production
-$ bun run build
+bun run build
 
 # Run the server in production
-$ bun start
+bun start
 ```
 
 ---
@@ -34,7 +36,7 @@ Run `bun start` to start the API server and frontend together in one process.
 
 Run `bun run build` to build the app as a static site. This will create a `dist` directory with the built app and all the assets.
 
-```
+```txt File Tree icon="folder-tree"
 ├── src/
 │   ├── index.tsx       # Server entry point with API routes
 │   ├── frontend.tsx    # React app entry point with HMR

package/docs/guides/ecosystem/{remix.md → remix.mdx}

@@ -1,18 +1,23 @@
 ---
-name: Build an app with Remix and Bun
+title: Build an app with Remix and Bun
+sidebarTitle: Remix with Bun
+mode: center
 ---
 
-{% callout %}
-Currently the Remix development server (`remix dev`) relies on Node.js APIs that Bun does not yet implement. The guide below uses Bun to initialize a project and install dependencies, but it uses Node.js to run the dev server.
-{% /callout %}
+<Note>
+  Currently the Remix development server (`remix dev`) relies on Node.js APIs that Bun does not yet implement. The guide
+  below uses Bun to initialize a project and install dependencies, but it uses Node.js to run the dev server.
+</Note>
 
 ---
 
 Initialize a Remix app with `create-remix`.
 
-```sh
-$ bun create remix
+```sh terminal icon="terminal"
+bun create remix
+```
 
+```txt
  remix   v1.19.3 💿 Let's build a better website...
 
    dir   Where should we create your new project?
@@ -28,11 +33,9 @@ $ bun create remix
          Yes
 
       ✔  Dependencies installed
-
       ✔  Git initialized
 
   done   That's it!
-
          Enter your project directory using cd ./my-app
          Check out README.md for development and deploy instructions.
 ```
@@ -41,36 +44,52 @@ $ bun create remix
 
 To start the dev server, run `bun run dev` from the project root. This will start the dev server using the `remix dev` command. Note that Node.js will be used to run the dev server.
 
-```sh
-$ cd my-app
-$ bun run dev
-  $ remix dev
+```sh terminal icon="terminal"
+cd my-app
+bun run dev
+```
+
+```txt
+$ remix dev
 
-  💿  remix dev
+💿  remix dev
 
-  info  building...
-  info  built (263ms)
-  Remix App Server started at http://localhost:3000 (http://172.20.0.143:3000)
+info  building...
+info  built (263ms)
+Remix App Server started at http://localhost:3000 (http://172.20.0.143:3000)
 ```
 
 ---
 
 Open [http://localhost:3000](http://localhost:3000) to see the app. Any changes you make to `app/routes/_index.tsx` will be hot-reloaded in the browser.
 
-{% image src="https://github.com/oven-sh/bun/assets/3084745/c26f1059-a5d4-4c0b-9a88-d9902472fd77" caption="Remix app running on localhost" /%}
+<Frame>
+  ![Remix app running on localhost](https://github.com/oven-sh/bun/assets/3084745/c26f1059-a5d4-4c0b-9a88-d9902472fd77)
+</Frame>
 
 ---
 
-To build and start your app, run `bun run build` then `bun run start` from the project root.
+To build and start your app, run `bun run build`
+
+```sh terminal icon="terminal"
+bun run build
+```
+
+```txt
+$ remix build
+info  building... (NODE_ENV=production)
+info  built (158ms)
+```
+
+Then `bun run start` from the project root.
+
+```sh terminal icon="terminal"
+bun start
+```
 
-```sh
-$ bun run build
- $ remix build
- info  building... (NODE_ENV=production)
- info  built (158ms)
-$ bun start
- $ remix-serve ./build/index.js
- [remix-serve] http://localhost:3000 (http://192.168.86.237:3000)
+```txt
+$ remix-serve ./build/index.js
+[remix-serve] http://localhost:3000 (http://192.168.86.237:3000)
 ```
 
 ---

package/docs/guides/ecosystem/{sentry.md → sentry.mdx}

@@ -1,5 +1,7 @@
 ---
-name: Add Sentry to a Bun app
+title: Add Sentry to a Bun app
+sidebarTitle: Sentry with Bun
+mode: center
 ---
 
 [Sentry](https://sentry.io) is a developer-first error tracking and performance monitoring platform. Sentry has a first-class SDK for Bun, `@sentry/bun`, that instruments your Bun application to automatically collect error and performance data.
@@ -10,15 +12,15 @@ Don't already have an account and Sentry project established? Head over to [sent
 
 To start using Sentry with Bun, first install the Sentry Bun SDK.
 
-```sh
-$ bun add @sentry/bun
+```sh terminal icon="terminal"
+bun add @sentry/bun
 ```
 
 ---
 
 Then, initialize the Sentry SDK with your Sentry DSN in your app's entry file. You can find your DSN in your Sentry project settings.
 
-```js
+```js sentry.ts icon="/icons/typescript.svg"
 import * as Sentry from "@sentry/bun";
 
 // Ensure to call this before importing any other modules!
@@ -35,7 +37,7 @@ Sentry.init({
 
 You can verify that Sentry is working by capturing a test error:
 
-```js
+```js sentry.ts icon="/icons/typescript.svg"
 setTimeout(() => {
   try {
     foo();

package/docs/guides/ecosystem/{solidstart.md → solidstart.mdx}

@@ -1,17 +1,23 @@
 ---
-name: Build an app with SolidStart and Bun
+title: Build an app with SolidStart and Bun
+sidebarTitle: "SolidStart with Bun"
+mode: center
 ---
 
-{% callout %}
-SolidStart currently relies on Node.js APIs that Bun does not yet implement. The guide below uses Bun to initialize a project and install dependencies, but it uses Node.js to run the dev server.
-{% /callout %}
+<Warning>
+  SolidStart currently relies on Node.js APIs that Bun does not yet implement. The guide below uses Bun to initialize a
+  project and install dependencies, but it uses Node.js to run the dev server.
+</Warning>
 
 ---
 
 Initialize a SolidStart app with `create-solid`.
 
-```sh
-$ bun create solid my-app
+```sh terminal icon="terminal"
+bun create solid my-app
+```
+
+```txt
 create-solid version 0.2.31
 
 Welcome to the SolidStart setup wizard!
@@ -32,26 +38,28 @@ cloned solidjs/solid-start#main to /path/to/my-app/.solid-start
 
 As instructed by the `create-solid` CLI, let's install our dependencies.
 
-```sh
-$ cd my-app
-$ bun install
+```sh terminal icon="terminal"
+cd my-app
+bun install
 ```
 
 ---
 
 Then run the development server.
 
-```sh
-$ bun run dev
+```sh terminal icon="terminal"
+bun run dev
 # or, equivalently
-$ bunx solid-start dev
+bunx solid-start dev
 ```
 
 ---
 
 Open [localhost:3000](http://localhost:3000). Any changes you make to `src/routes/index.tsx` will be hot-reloaded automatically.
 
-{% image src="https://github.com/oven-sh/bun/assets/3084745/1e8043c4-49d1-498c-9add-c1eaab6c7167" alt="SolidStart demo app" /%}
+<Frame>
+  ![SolidStart demo app](https://github.com/oven-sh/bun/assets/3084745/1e8043c4-49d1-498c-9add-c1eaab6c7167)
+</Frame>
 
 ---
 

package/docs/guides/ecosystem/{ssr-react.md → ssr-react.mdx}

@@ -1,19 +1,21 @@
 ---
-name: Server-side render (SSR) a React component
+title: Server-side render (SSR) a React component
+sidebarTitle: "SSR React with Bun"
+mode: center
 ---
 
 To get started, install `react` & `react-dom`:
 
-```sh
+```sh terminal icon="terminal"
 # Any package manager can be used
-$ bun add react react-dom
+bun add react react-dom
 ```
 
 ---
 
 To render a React component to an HTML stream server-side (SSR):
 
-```tsx
+```tsx ssr-react.tsx icon="file-code"
 import { renderToReadableStream } from "react-dom/server";
 
 function Component(props: { message: string }) {
@@ -24,21 +26,17 @@ function Component(props: { message: string }) {
   );
 }
 
-const stream = await renderToReadableStream(
-  <Component message="Hello from server!" />,
-);
+const stream = await renderToReadableStream(<Component message="Hello from server!" />);
 ```
 
 ---
 
 Combining this with `Bun.serve()`, we get a simple SSR HTTP server:
 
-```tsx
+```tsx server.ts icon="/icons/typescript.svg"
 Bun.serve({
   async fetch() {
-    const stream = await renderToReadableStream(
-      <Component message="Hello from server!" />,
-    );
+    const stream = await renderToReadableStream(<Component message="Hello from server!" />);
     return new Response(stream, {
       headers: { "Content-Type": "text/html" },
     });

package/docs/guides/ecosystem/{stric.md → stric.mdx}

@@ -1,5 +1,7 @@
 ---
-name: Build an HTTP server using StricJS and Bun
+title: Build an HTTP server using StricJS and Bun
+sidebarTitle: "StricJS with Bun"
+mode: center
 ---
 
 [StricJS](https://github.com/bunsvr) is a Bun framework for building high-performance web applications and APIs.
@@ -12,42 +14,39 @@ name: Build an HTTP server using StricJS and Bun
 
 Use `bun init` to create an empty project.
 
-```bash
-$ mkdir myapp
-$ cd myapp
-$ bun init
-$ bun add @stricjs/router @stricjs/utils
+```bash terminal icon="terminal"
+mkdir myapp
+cd myapp
+bun init
+bun add @stricjs/router @stricjs/utils
 ```
 
 ---
 
 To implement a simple HTTP server with StricJS:
 
-```ts#index.ts
-import { Router } from '@stricjs/router';
+```ts index.ts icon="file-code"
+import { Router } from "@stricjs/router";
 
-export default new Router()
-  .get('/', () => new Response('Hi'));
+export default new Router().get("/", () => new Response("Hi"));
 ```
 
 ---
 
 To serve static files from `/public`:
 
-```ts#index.ts
-import { dir } from '@stricjs/utils';
+```ts index.ts icon="file-code"
+import { dir } from "@stricjs/utils";
 
-export default new Router()
-  .get('/', () => new Response('Hi'))
-  .get('/*', dir('./public'));
+export default new Router().get("/", () => new Response("Hi")).get("/*", dir("./public"));
 ```
 
 ---
 
 Run the file in watch mode to start the development server.
 
-```bash
-$ bun --watch run index.ts
+```bash terminal icon="terminal"
+bun --watch run index.ts
 ```
 
 ---