### Install TanStack Bling with NPM

Source: https://github.com/tanstack/bling/blob/main/docs/installation.md

Use this command to install the TanStack Bling package using NPM.

```bash
npm install @tanstack/bling
```

--------------------------------

### Astro Project Commands

Source: https://github.com/tanstack/bling/blob/main/examples/astro-react-todomvc/README.md

Lists essential npm commands for managing an Astro project, including installation, development server, building for production, and previewing the build.

```bash
npm install
```

```bash
npm run dev
```

```bash
npm run build
```

```bash
npm run preview
```

```bash
npm run astro ...
```

```bash
npm run astro --help
```

--------------------------------

### Create Isomorphic Server RPC with server$

Source: https://github.com/tanstack/bling/blob/main/README.md

Use `server$` to create a function that runs on the server and is callable from the client. The server-side function must be async. Client calls default to POST with a JSON body, but can be configured to use GET with query parameters.

```tsx
import { server$ } from '@tanstack/bling'

const fetchFn = server$(async (payload) => {
  // do something
  return 'result'
})
```

--------------------------------

### Astro Project Structure

Source: https://github.com/tanstack/bling/blob/main/examples/astro-solid/README.md

Illustrates the standard directory and file layout for an Astro project.

```bash
`/`
├── `public/`
│   └── `favicon.svg`
├── `src/`
│   ├── `components/`
│   │   └── `Card.astro`
│   ├── `layouts/`
│   │   └── `Layout.astro`
│   └── `pages/`
│       └── `index.astro`
└── `package.json`
```

--------------------------------

### Astro Project Structure

Source: https://github.com/tanstack/bling/blob/main/examples/astro-react-router/README.md

Understand the standard directory layout for an Astro project, including where to place pages, components, and static assets.

```bash
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```

--------------------------------

### Astro Project Commands

Source: https://github.com/tanstack/bling/blob/main/examples/astro-solid/README.md

Lists common npm commands for managing an Astro project's lifecycle.

```bash
`npm install`
`npm run dev`
`npm run build`
`npm run preview`
`npm run astro ...`
`npm run astro --help`
```

--------------------------------

### Server Request Handler with `handleFetch$`

Source: https://context7.com/tanstack/bling/llms.txt

Use `handleFetch$` as the server-side entry point to intercept incoming HTTP requests and dispatch them to registered `server$` handlers. This function must be called for every incoming request on the server.

```ts
// src/pages/[...app].ts (Astro example)
import type { APIRoute } from 'astro'
import { handleFetch$ } from '@tanstack/bling/server'
import { routes } from '../app/root'

export const all: APIRoute = async ({ request }) => {
  // Let Bling handle any /_m/* RPC requests first
  const blingResponse = await handleFetch$({ request })
  if (blingResponse) return blingResponse

  // Fall through to your app's router for page requests
  return renderApp(request, routes)
}
```

--------------------------------

### Vite Plugin Configuration with `bling()`

Source: https://context7.com/tanstack/bling/llms.txt

Configure the `bling()` Vite plugin in `vite.config.ts` with `enforce: 'pre'` to enable all macro transformations before other transforms. Additional Babel plugins can be provided.

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { bling } from '@tanstack/bling/vite'

export default defineConfig({
  plugins: [
    bling({
      babel: {
        plugins: [
          // add extra Babel plugins here if needed
        ],
      },
    }),
    react(),
  ],
})
```

--------------------------------

### Create Server-Only Files

Source: https://github.com/tanstack/bling/blob/main/README.md

Use the `.secret.server$.` pattern to create files that are only included in the server bundle. Client imports will have stubbed undefined values.

```typescript
// secret.server$.ts
export const secret = 'This is top secret!'
export const anotherSecret = '🤫 Shhh!'
```

```typescript
export const secret = undefined
export const anotherSecret = undefined
```

--------------------------------

### Vite Plugin — `bling()`

Source: https://context7.com/tanstack/bling/llms.txt

The `bling()` Vite plugin enables all macro transformations. It must be added to `vite.config.ts` with `enforce: 'pre'` to run before other transforms.

```APIDOC
## Vite Plugin — `bling()`

The `bling()` Vite plugin enables all macro transformations. It must be added to `vite.config.ts` (or via the Astro integration) with `enforce: 'pre'` to run before other transforms.

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { bling } from '@tanstack/bling/vite'

export default defineConfig({
  plugins: [
    bling({
      babel: {
        plugins: [
          // add extra Babel plugins here if needed
        ],
      },
    }),
    react(),
  ],
})
```
```

--------------------------------

### Astro Integration — `astroBling()`

Source: https://context7.com/tanstack/bling/llms.txt

`astroBling()` wraps the Vite plugin as a first-class Astro integration, wiring up the client entry point in the SSR manifest automatically.

```APIDOC
## Astro Integration — `astroBling()`

`astroBling()` wraps the Vite plugin as a first-class Astro integration, wiring up the client entry point in the SSR manifest automatically.

```ts
// astro.config.mjs
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import node from '@astrojs/node'
import { astroBling } from '@tanstack/bling/astro'

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  integrations: [
    astroBling(),   // must come before framework integrations
    react(),
  ],
})
```
```

--------------------------------

### Astro Integration with `astroBling()`

Source: https://context7.com/tanstack/bling/llms.txt

Integrate `astroBling()` into your Astro project by adding it to `astro.config.mjs`. This wraps the Vite plugin and automatically wires up the client entry point in the SSR manifest. It should come before framework integrations.

```ts
// astro.config.mjs
import { defineConfig } from 'astro/config'
import react from '@astrojs/react'
import node from '@astrojs/node'
import { astroBling } from '@tanstack/bling/astro'

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  integrations: [
    astroBling(),   // must come before framework integrations
    react(),
  ],
})
```

--------------------------------

### Astro Project Structure

Source: https://github.com/tanstack/bling/blob/main/examples/astro-react-todomvc/README.md

Illustrates the standard directory layout for an Astro project, including public assets, source files for components, layouts, and pages, and the package.json file.

```tree
/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```

--------------------------------

### Server-Side Redirect with `redirect`

Source: https://context7.com/tanstack/bling/llms.txt

Use `redirect` to create an HTTP redirect response. Bling intercepts this on the client to trigger navigation. It supports optional status codes and headers.

```tsx
import { server$, redirect } from '@tanstack/bling'

const login = server$(async (credentials: { email: string; password: string }) => {
  const user = await authenticate(credentials)
  if (!user) {
    return redirect('/login?error=invalid_credentials')
  }
  // Set session cookie and redirect to dashboard
  return redirect('/dashboard', {
    status: 302,
    headers: { 'Set-Cookie': `session=${user.sessionToken}; HttpOnly` },
  })
})

// Redirect response is followed automatically by the client runtime
await login({ email: 'alice@example.com', password: 'secret' })
```

--------------------------------

### import$(fn: T) => Promise<T>

Source: https://github.com/tanstack/bling/blob/main/README.md

The `import$` function allows for code-splitting any expression into its own module on both server and client at build-time. It compiles down to a dynamic import and is useful for managing code loading without creating new files.

```APIDOC
## import$

The `import$` function can be used to code-split any expression into it's own module on both server and client at build-time. This is helpful for you to coordinate what code loads when without having to create new files for every part you want want to code-split. It's an async function just like the native dynamic import. It actually compiles down to a dynamic import, but with a unique hash for each import$ instance used in the file.

### Signature

```tsx
import$<T extends any>(fn: T) => Promise<T>
```

### Arguments

- `value` (The value/expression/function to be code-split): The value/expression/function to be code-split.

### Returns

- A code-split version of the original expression.
```

--------------------------------

### `handleFetch$` — Server Request Handler

Source: https://context7.com/tanstack/bling/llms.txt

The server-side entry point that intercepts incoming HTTP requests and dispatches them to registered `server$` handlers. It must be called in the server's request handler for every incoming request.

```APIDOC
## `handleFetch$` — Server Request Handler

`handleFetch$` is the server-side entry point that intercepts incoming HTTP requests and dispatches them to registered `server$` handlers. It must be called in the server's request handler for every incoming request.

```ts
// src/pages/[...app].ts (Astro example)
import type { APIRoute } from 'astro'
import { handleFetch$ } from '@tanstack/bling/server'
import { routes } from '../app/root'

export const all: APIRoute = async ({ request }) => {
  // Let Bling handle any /_m/* RPC requests first
  const blingResponse = await handleFetch$({ request })
  if (blingResponse) return blingResponse

  // Fall through to your app's router for page requests
  return renderApp(request, routes)
}
```
```

--------------------------------

### `redirect` — Server-Side Redirect

Source: https://context7.com/tanstack/bling/llms.txt

Creates an HTTP redirect response that is intercepted by Bling on the client to trigger navigation.

```APIDOC
## `redirect` — Server-Side Redirect

`redirect` creates an HTTP redirect response. When returned or thrown inside `server$`, Bling intercepts it on the client and triggers a navigation.

```tsx
import { server$, redirect } from '@tanstack/bling'

const login = server$(async (credentials: { email: string; password: string }) => {
  const user = await authenticate(credentials)
  if (!user) {
    return redirect('/login?error=invalid_credentials')
  }
  // Set session cookie and redirect to dashboard
  return redirect('/dashboard', {
    status: 302,
    headers: { 'Set-Cookie': `session=${user.sessionToken}; HttpOnly` },
  })
})

// Redirect response is followed automatically by the client runtime
await login({ email: 'alice@example.com', password: 'secret' })
```
```

--------------------------------

### Client-side function call with server$

Source: https://github.com/tanstack/bling/blob/main/README.md

Illustrates how the isomorphic function created by `server$` is called on the client. It accepts a payload and options, and returns a promise resolving to the server function's result.

```typescript
fn(
  payload: JSON,
  options: {
    method?: 'POST' | 'GET' // Defaults to `POST`
    request?: RequestInit
  }
) => Promise<
  Awaited<ReturnType<T>> extends JsonResponse<infer R>
    ? R
    : ReturnType<T>
>
```

--------------------------------

### Server output of secret$

Source: https://github.com/tanstack/bling/blob/main/README.md

Demonstrates how code wrapped in `secret$` is transpiled for the server bundle.

```tsx
const secretMessage = server$('It is a secret!')')
```

--------------------------------

### worker$(async (name: string) => { ... })

Source: https://github.com/tanstack/bling/blob/main/README.md

The `worker$` function creates an isomorphic Web Worker. On the server, it runs in the same process. On the client, it compiles to a Web Worker, returning an interface similar to `server$` for easy client-side calling. Data sent to and from workers will be serialized.

```APIDOC
## worker$

The `worker$` function is used to create an isomorphic Web Worker and interact with it. On the server, the function will run in the same process as the server. On the client, the function will be compiled to a Web Worker and will return an interface similar to `server$` to make it easy to call from the client

> 🧠 Similar to `server$`, data sent to and from workers will be serialized. This means that you can pass any JSON-serializable data to the worker, but you cannot pass functions or classes. If you need to use non-serializable assets in your worker, you can import them and use them directly in the worker function, however the instances of those assets will be unique to the worker thread.

### Signature

```tsx
worker$(async (name: string) => {
  // do something
  return `Hello ${name}`
})
```

### Arguments

- `workerFunction` (async function): The function to be executed in the Web Worker.

### Returns

- A function that can be called to interact with the Web Worker.
```

--------------------------------

### Define Isomorphic Server-Side RPC with server$

Source: https://context7.com/tanstack/bling/llms.txt

Wrap an async function with `server$` to make it run only on the server. On the client, it's replaced with an auto-generated `fetch` call. Arguments and return values are JSON-serialized and type-safe.

```tsx
import { server$, json } from '@tanstack/bling'

// Define a server function that queries a database
const getTodos = server$(async (filter: 'all' | 'active' | 'completed') => {
  // This code NEVER runs in the browser — only on the server
  const { prisma } = await import('./db.secret$')
  const where = filter === 'all' ? {}
    filter === 'active' ? { complete: false } : { complete: true }
  const todos = await prisma.todo.findMany({ where })
  return json(todos)          // type-safe JSON response
})

// Call it isomorphically — works from both server and client code
async function loadTodos() {
  try {
    const todos = await getTodos('active')
    console.log(todos) // [{ id: '1', title: 'Buy milk', complete: false }, ...]
  } catch (err) {
    console.error('RPC failed:', err)
  }
}

// Optionally call with GET (payload encoded as query params)
const getTodoById = server$(async (id: string) => {
  const { prisma } = await import('./db.secret$')
  return prisma.todo.findFirst({ where: { id } })
}, { method: 'GET' })

// Use the raw .fetch() escape hatch for custom RequestInit control
await getTodoById.fetch({
  headers: { Authorization: `Bearer ${token}` },
})
```

--------------------------------

### server$

Source: https://github.com/tanstack/bling/blob/main/README.md

The `server$` function creates isomorphic server-side RPCs. Functions wrapped with `server$` execute only on the server, while clients invoke them via `fetch` calls. It ensures consistent results across server and client environments.

```APIDOC
## server$

### Description
Creates an isomorphic server-side RPC. The wrapped function executes only on the server. On the client, a `fetch` call is made to the server function. Results are consistent on both server and client.

### Signature
```typescript
server$<T extends (...args: any[]) => Promise<any>>(fn: T, options?: {
  method?: 'POST' | 'GET' // Defaults to `POST`
  request?: RequestInit
}): T
```

### Arguments
- `fn` (Function): The function to be called from the client-side. Must be an `async` function.
  - Arguments: `payload`, `ctx` (containing `request`)
  - Returns: `Promise<JSON | Response>`
- `options` (Object, optional): Configuration for the RPC.
  - `method` ('POST' | 'GET'): The HTTP method for client-side fetch. Defaults to `POST`. If `GET`, payload is sent as query parameters.
  - `request` (RequestInit, optional): Default request options for the `fetch` call.

### Returns
A function that can be called isomorphically from server or client code.

- **Isomorphic Function**
  - Arguments:
    - `payload` (JSON): The payload to pass to the server-side function.
    - `options` (Object, optional): Options for the fetch call.
      - `method` ('POST' | 'GET'): HTTP method. Defaults to `POST`.
      - `request` (RequestInit, optional): Request object for the `fetch` call.
  - Returns: `Promise<Awaited<ReturnType<T>> extends JsonResponse<infer R> ? R : ReturnType<T]>`

- **`fn.fetch` Method**
  - A convenience method for custom fetch calls.
  - Arguments:
    - `request` (RequestInit): The request object, which should contain any data payload.
  - Returns: `Promise<Awaited<ReturnType<T>> extends JsonResponse<infer R> ? R : ReturnType<T]>`

### Example
```tsx
import { server$ } from '@tanstack/bling'

const fetchFn = server$(async (payload) => {
  // do something
  return 'result'
})
```
```

--------------------------------

### Custom fetch call with server$.fetch

Source: https://github.com/tanstack/bling/blob/main/README.md

Provides a `fn.fetch` method for making custom fetch calls to the server function. Only the request object is passed, and any data must be encoded within it.

```typescript
fn.fetch(
  request: RequestInit,
) => Promise<
  Awaited<ReturnType<T>> extends JsonResponse<infer R>
    ? R
    : ReturnType<T>
>
```

--------------------------------

### Inline Code Splitting with import$

Source: https://context7.com/tanstack/bling/llms.txt

Use import$ to split inline expressions or components into their own hashed virtual modules at build time. This compiles to a standard dynamic import() and can be combined with React.lazy or Solid's lazy for deferred component loading.

```tsx
import { import$ } from '@tanstack/bling'
import { lazy, Suspense } from 'react'

// Split a plain async function into its own chunk
const heavyCompute = await import$(async (data: number[]) => {
  return data.reduce((sum, n) => sum + n, 0)
})
console.log(await heavyCompute([1, 2, 3])) // 6

// Split a React component into a lazy-loadable chunk
const HeavyChart = lazy(() =>
  import$({
    default: () => (
      <div className="chart">
        {/* expensive rendering logic */}
      </div>
    ),
  })
)

// Compiled output resembles:
// const HeavyChart = lazy(() => import('/src/root.tsx?split=0&ref=HeavyChart').then(m => m.default))

export default function Dashboard() {
  return (
    <Suspense fallback={<p>Loading chart…</p>}>
      <HeavyChart />
    </Suspense>
  )
}
```

--------------------------------

### Create Isomorphic Web Workers with worker$

Source: https://github.com/tanstack/bling/blob/main/README.md

The worker$ function creates an isomorphic Web Worker. On the server, it runs in the same process. On the client, it compiles to a Web Worker and returns an interface similar to server$. Data sent to and from workers will be serialized.

```typescript
import { worker$ } from '@tanstack/bling'

const sayHello = worker$(async (name: string) => {
  // do something
  return `Hello ${name}`
})

const result = sayHello('World!')
console.log(result) // 'Hello World!'
```

--------------------------------

### Server$ Signature

Source: https://context7.com/tanstack/bling/llms.txt

The signature for the `server$` macro, detailing its parameters and return type.

```typescript
server$<T extends (...args: any[]) => Promise<any>>(
  fn: T,
  options?: {
    method?: 'POST' | 'GET'  // defaults to 'POST'
    request?: RequestInit    // merged into every fetch call
  }
): T & { url: string; fetch(init: RequestInit, opts?: FetchFnCtxOptions): Promise<...> }
```

--------------------------------

### Server-Sent Events with `eventStream`

Source: https://context7.com/tanstack/bling/llms.txt

Create streaming `Response` objects using `eventStream` for real-time server-to-client push over a `text/event-stream` connection. A cleanup function is returned for when the client disconnects.

```tsx
import { server$, eventStream } from '@tanstack/bling'

const streamUpdates = server$(async (_payload, ctx) => {
  return eventStream(ctx.request, (send) => {
    let count = 0
    const interval = setInterval(() => {
      send('update', JSON.stringify({ count: count++ }))
      if (count >= 10) clearInterval(interval)
    }, 1000)

    // Return cleanup function called when the client disconnects
    return () => clearInterval(interval)
  })
})

// Client: consume the SSE stream
const source = new EventSource(streamUpdates.url)
source.addEventListener('update', (e) => {
  const data = JSON.parse(e.data)
  console.log('Received update:', data.count)
})
```

--------------------------------

### Type-Safe JSON Response Helper with json

Source: https://context7.com/tanstack/bling/llms.txt

The json helper wraps a value in a Response with Content-Type: application/json. When returned from a server$ function, the Bling runtime unwraps it transparently on the client, providing end-to-end type inference.

```tsx
import { server$, json } from '@tanstack/bling'
import { ServerError } from '@tanstack/bling'

const getUser = server$(async (id: string) => {
  const user = await db.users.findById(id)
  if (!user) {
    throw json({ error: 'User not found' }, { status: 404 })
  }
  return json({ id: user.id, name: user.name, email: user.email })
})

// Client usage — return type is inferred as { id: string; name: string; email: string }
const user = await getUser('user_123')
console.log(user.name) // "Alice"
```

--------------------------------

### Code-Split Expressions with import$

Source: https://github.com/tanstack/bling/blob/main/README.md

The import$ function code-splits any expression into its own module on both server and client at build-time. It compiles down to a dynamic import with a unique hash for each instance.

```typescript
import { import$ } from '@tanstack/bling'

const fn = await import$(async (name: string) => {
  return `Hello ${name}`
})
```

```typescript
import { import$ } from '@tanstack/bling'
import { lazy } from 'react'

const fn = lazy(() => import$({
  default: () => <div>Hello World!</div>,
}))
```

```typescript
const fn = await import('/this/file?split=0&ref=fn').then((m) => m.default)
```

--------------------------------

### Custom Serialization with `addSerializer` and `addDeserializer`

Source: https://context7.com/tanstack/bling/llms.txt

Register custom serializers and deserializers to handle non-JSON types like `Date`, `Map`, `Set`, or class instances across the RPC boundary. Ensure serializers are added on the client and deserializers on the server.

```ts
// serialization.ts — register once at app startup
import { addSerializer } from '@tanstack/bling'           // client bundle
import { addDeserializer } from '@tanstack/bling/server'  // server bundle

// Client: teach Bling how to serialize Date objects
addSerializer({
  apply: (value) => value instanceof Date,
  serialize: (value: Date) => ({ __type: 'Date', iso: value.toISOString() }),
})

// Server: teach Bling how to reconstruct them
addDeserializer({
  apply: (value) => value?.__type === 'Date',
  deserialize: (value) => new Date(value.iso),
})

// Now Date objects round-trip correctly through server$ calls
import { server$ } from '@tanstack/bling'
const echoDate = server$(async (date: Date) => {
  console.log(date instanceof Date) // true, on the server
  return date
})
const result = await echoDate(new Date('2024-01-15'))
console.log(result instanceof Date) // true, reconstructed on the client
```

--------------------------------

### Server-side function signature for server$

Source: https://github.com/tanstack/bling/blob/main/README.md

Defines the signature for the server-side function passed to `server$`. It accepts a payload and context, and can return JSON, a Response, or trigger a redirect.

```typescript
server$<T extends (...args: any[]) => Promise<any>>(fn: T, options: {
  method?: 'POST' | 'GET' // Defaults to `POST`
  request?: RequestInit
}): T
```

--------------------------------

### Client output of secret$

Source: https://github.com/tanstack/bling/blob/main/README.md

Illustrates that code wrapped in `secret$` is replaced with `undefined` in the client bundle.

```typescript
const secretMessage = undefined
```

--------------------------------

### Server-Only Module Convention (.secret$.)

Source: https://context7.com/tanstack/bling/llms.txt

Files containing '.secret$.' in their path are treated as server-only. Named exports from these files are replaced with undefined stubs on the client to prevent accidental bundling of secrets or server-side dependencies.

```typescript
// db.secret$.ts — this file is stripped from the client bundle
import { PrismaClient } from '@prisma/client'
export const prisma = new PrismaClient()
export const dbUrl = process.env.DATABASE_URL
```

```tsx
// root.tsx — import as usual; client receives `{ prisma: undefined, dbUrl: undefined }`
import { prisma } from './db.secret$'
import { server$ } from '@tanstack/bling'

const createUser = server$(async (name: string) => {
  // `prisma` is only available here (server context)
  return prisma.user.create({ data: { name } })
})
```

--------------------------------

### `eventStream` — Server-Sent Events

Source: https://context7.com/tanstack/bling/llms.txt

Creates a streaming `Response` using the Web Streams API for real-time server-to-client push over a `text/event-stream` connection.

```APIDOC
## `eventStream` — Server-Sent Events

`eventStream` creates a streaming `Response` using the Web Streams API, enabling real-time server-to-client push over a `text/event-stream` connection.

```tsx
import { server$, eventStream } from '@tanstack/bling'

const streamUpdates = server$(async (_payload, ctx) => {
  return eventStream(ctx.request, (send) => {
    let count = 0
    const interval = setInterval(() => {
      send('update', JSON.stringify({ count: count++ }))
      if (count >= 10) clearInterval(interval)
    }, 1000)

    // Return cleanup function called when the client disconnects
    return () => clearInterval(interval)
  })
})

// Client: consume the SSE stream
const source = new EventSource(streamUpdates.url)
source.addEventListener('update', (e) => {
  const data = JSON.parse(e.data)
  console.log('Received update:', data.count)
})
```
```

--------------------------------

### Named Function Code Splitting with split$

Source: https://context7.com/tanstack/bling/llms.txt

split$ code-splits a function into a separate virtual module and returns a wrapper that lazily imports and invokes it. It's designed for plain async functions, unlike import$ which is for module objects.

```tsx
import { split$ } from '@tanstack/bling'

// The function body is emitted to a virtual module; callers get a promise-returning wrapper
const processImage = split$(async (url: string) => {
  const sharp = await import('sharp')   // heavy dependency only loaded when needed
  const buffer = await fetch(url).then(r => r.arrayBuffer())
  return sharp(Buffer.from(buffer)).resize(800).toBuffer()
})

// Compiled to: (...args) => import('virtual:bling-split$-/_m/<hash>/processImage').then(m => m.default(...args))
const result = await processImage('https://example.com/photo.jpg')
```

--------------------------------

### `addSerializer` / `addDeserializer` — Custom Payload Serialization

Source: https://context7.com/tanstack/bling/llms.txt

Register custom serializers and deserializers to handle non-JSON types like `Date`, `Map`, `Set`, or class instances across the RPC boundary.

```APIDOC
## `addSerializer` / `addDeserializer` — Custom Payload Serialization

Register custom serializers (client-side) and deserializers (server-side) to handle non-JSON types such as `Date`, `Map`, `Set`, or class instances across the RPC boundary.

```tsx
// serialization.ts — register once at app startup
import { addSerializer } from '@tanstack/bling'           // client bundle
import { addDeserializer } from '@tanstack/bling/server'  // server bundle

// Client: teach Bling how to serialize Date objects
addSerializer({
  apply: (value) => value instanceof Date,
  serialize: (value: Date) => ({ __type: 'Date', iso: value.toISOString() }),
})

// Server: teach Bling how to reconstruct them
addDeserializer({
  apply: (value) => value?.__type === 'Date',
  deserialize: (value) => new Date(value.iso),
})

// Now Date objects round-trip correctly through server$ calls
import { server$ } from '@tanstack/bling'
const echoDate = server$(async (date: Date) => {
  console.log(date instanceof Date) // true, on the server
  return date
})
const result = await echoDate(new Date('2024-01-15'))
console.log(result instanceof Date) // true, reconstructed on the client
```
```

--------------------------------

### secret$

Source: https://github.com/tanstack/bling/blob/main/README.md

The `secret$` function scopes expressions exclusively to the server (secret)-bundle, ensuring they are excluded from the client bundle. This is ideal for server-only imports, code, or sensitive environment variables.

```APIDOC
## secret$

### Description
Scopes any expression to the server (secret)-bundle only, removing it from the client bundle. Useful for server-side only imports, code, or sensitive environment variables.

### Example
```tsx
import { secret$ } from '@tanstack/bling'

const secretMessage = secret$('It is a secret!')
```

**Server Output:**
```tsx
const secretMessage = 'It is a secret!'
```

**Client Output:**
```tsx
const secretMessage = undefined
```
```

--------------------------------

### Scope expression to server-only with secret$

Source: https://github.com/tanstack/bling/blob/main/README.md

Use `secret$` to ensure an expression is only included in the server-side bundle, effectively removing it from the client bundle. This is useful for sensitive information or server-only dependencies.

```tsx
import { secret$ } from '@tanstack/bling'

const secretMessage = secret$('It is a secret!')')
```

--------------------------------

### Lazy Component Shorthand with lazy$

Source: https://context7.com/tanstack/bling/llms.txt

lazy$ is a convenience wrapper that compiles to React.lazy(() => import$({ default: component })). It simplifies component splitting by removing boilerplate.

```tsx
import { lazy$, server$ } from '@tanstack/bling'
import { Suspense } from 'react'

const serverGreet = server$(async (name: string) => `Hello, ${name}!`)

// Equivalent to: lazy(() => import$({ default: (props) => <button {...props}>…</button> }))
const SplitButton = lazy$((props: { onClick: () => void }) => (
  <button {...props}>Click me</button>
))

const SplitPanel = lazy$(function NamedPanel() {
  return (
    <div>
      <SplitButton onClick={() => serverGreet('World').then(console.log)} />
    </div>
  )
})

export default function App() {
  return (
    <Suspense fallback="Loading…">
      <SplitPanel />
    </Suspense>
  )
}
```

--------------------------------

### Scope Server-Only Expressions with secret$

Source: https://context7.com/tanstack/bling/llms.txt

Use `secret$` to mark inline expressions as server-only. The compiler removes these from client bundles, replacing them with `undefined`.

```tsx
import { secret$ } from '@tanstack/bling'

// Inline secret — removed from the client bundle entirely
const dbPassword = secret$(process.env.DATABASE_PASSWORD)

// Works with any expression, not just strings
const adminConfig = secret$({
  host: process.env.DB_HOST,
  port: Number(process.env.DB_PORT),
  ssl: true,
})

// Server output:
// const dbPassword = process.env.DATABASE_PASSWORD
// const adminConfig = { host: ..., port: ..., ssl: true }

// Client output:
// const dbPassword = undefined
// const adminConfig = undefined

function MyComponent() {
  // Safe to use — on the client this is just undefined
  if (adminConfig) {
    connectToDatabase(adminConfig)   // only runs on server
  }
  return <div>Hello</div>
}
```

--------------------------------

### secret$<T>(input: T): T

Source: https://github.com/tanstack/bling/blob/main/README.md

The `secret$` function is a utility that retains the input type, ensuring a non-nullable type on the client even if the value could technically be undefined.

```APIDOC
## secret$<T>(input: T): T

### Description

The `secret$` function is a utility that retains the input type, ensuring a non-nullable type on the client even if the value could technically be undefined. It returns the input value on the server and `undefined` on the client.

### Arguments

- `input` (Any function, expression, or variable): The value to be processed.

### Returns

- The variable on the server.
- `undefined` on the client.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.