void 0.1.6 → 0.7.0

package/skills/void/docs/integrations/frameworks/react-router.md

@@ -0,0 +1,137 @@
+---
+outline: deep
+---
+
+# React Router v7
+
+[React Router v7](https://reactrouter.com/) is a Vite-based full-stack React framework. `voidPlugin()` composes directly with the React Router plugin in the Vite pipeline, so there is no separate adapter to install.
+
+## Setup
+
+### 1. Create a new project
+
+```bash
+npm create react-router@latest my-app
+cd my-app
+```
+
+### 2. Install dependencies
+
+```bash
+npm install -D void
+```
+
+### 3. Configure `vite.config.ts`
+
+```ts
+import { defineConfig } from 'vite';
+import { reactRouter } from '@react-router/dev/vite';
+import { voidPlugin } from 'void';
+
+export default defineConfig({
+  plugins: [
+    voidPlugin(), // must come before the framework plugin
+    reactRouter(),
+  ],
+});
+```
+
+### 4. Deploy
+
+```bash
+void auth login
+void deploy
+```
+
+## Using Void Platform Features
+
+Most [Void platform features](../../guide/app-types.md#void-apps) work with React Router. Use them in loaders and actions:
+
+Void-managed auth is not supported in framework mode yet. Use Better Auth's official React Router integration directly for now.
+
+### Database
+
+```tsx
+import type { Route } from './+types/users';
+import { db } from 'void/db';
+import { users } from '@schema';
+
+export async function loader({}: Route.LoaderArgs) {
+  return { users: await db.select().from(users) };
+}
+```
+
+### KV Storage
+
+```tsx
+import { kv } from 'void/kv';
+
+export async function loader() {
+  return { settings: await kv.get('app:settings') };
+}
+```
+
+### Blob Storage
+
+```tsx
+import { storage } from 'void/storage';
+
+export async function loader() {
+  return { avatar: await storage.get('avatars/user-1.png') };
+}
+```
+
+### AI
+
+```tsx
+import { ai } from 'void/ai';
+
+export async function action() {
+  return ai.run('@cf/meta/llama-3.1-8b-instruct', {
+    prompt: 'Summarize the latest news',
+  });
+}
+```
+
+### Cron Jobs
+
+```ts
+// crons/daily-cleanup.ts
+import { defineScheduled } from 'void';
+
+export const cron = '0 0 * * *';
+
+export default defineScheduled(async () => {
+  // runs daily at midnight
+});
+```
+
+### Queue Consumers
+
+```ts
+// queues/emails.ts
+import { defineQueue } from 'void';
+
+export default defineQueue<{ to: string; subject: string }>(async (batch) => {
+  for (const msg of batch.messages) {
+    // process each message
+    msg.ack();
+  }
+});
+```
+
+### Environment Variables
+
+Void gives you a typed env layer: declare keys in `env.ts`, read them via `import { env } from "void/env"`, and get schema validation at build + deploy time plus a client-leak guard that fails the build if a server-only key reaches the browser. See the [env vars guide](../../guide/env-vars.md) for the full feature set.
+
+React Router-specific caveat: because `loader()` and the component live in the same route file, the leak guard treats the module as client-reachable. Reading `env.SERVER_ONLY_KEY` inside `loader()` is safe at runtime (RR strips loaders from the client bundle), but the guard flags it as a potential leak. Move server-only secrets into a `.server.ts` companion file to silence the guard cleanly.
+
+## Accessing Bindings Directly
+
+You can also access Cloudflare bindings via the `cloudflare:workers` module:
+
+```tsx
+import { env } from 'cloudflare:workers';
+
+const { results } = await env.DB.prepare('SELECT * FROM users').all();
+```

package/skills/void/docs/integrations/frameworks/sveltekit.md

@@ -0,0 +1,191 @@
+---
+outline: deep
+---
+
+# SvelteKit
+
+[SvelteKit](https://svelte.dev/docs/kit) uses Vite internally with its own Cloudflare adapter (`@sveltejs/adapter-cloudflare`). Add `voidPlugin()` to the Vite config for binding inference, typed DB, and migrations during development.
+
+## Setup
+
+### 1. Create a new project
+
+```bash
+npx sv create my-app
+cd my-app
+```
+
+### 2. Install dependencies
+
+```bash
+npm install -D @sveltejs/adapter-cloudflare void
+```
+
+### 3. Configure `svelte.config.js`
+
+```js
+import adapter from '@sveltejs/adapter-cloudflare';
+import { withVoidTSConfig } from 'void/sveltekit';
+
+export default {
+  kit: {
+    adapter: adapter(),
+    typescript: {
+      config: withVoidTSConfig(),
+    },
+  },
+};
+```
+
+### 4. Add `voidPlugin()` to `vite.config.ts`
+
+```ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { voidPlugin } from 'void';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [voidPlugin(), sveltekit()],
+});
+```
+
+### 5. Create `wrangler.jsonc`
+
+SvelteKit's adapter reads bindings from `wrangler.jsonc` for local dev. `voidPlugin()` auto-syncs inferred bindings into this file on dev startup, so you only need the base config:
+
+```jsonc
+{
+  "name": "my-app",
+  "compatibility_date": "2026-02-24",
+  "compatibility_flags": ["nodejs_compat"],
+}
+```
+
+By default, SvelteKit's Cloudflare adapter, `voidPlugin()` migrations, and `void db` commands share Wrangler's local state at `.wrangler/state/v3`, so no extra `platformProxy.persist` configuration is required.
+
+### 6. Configure `tsconfig.json`
+
+SvelteKit generates `.svelte-kit/tsconfig.json` and expects your root config to extend it. Void generates `.void/tsconfig.json` for project-specific aliases such as `void/db` and `@schema`.
+
+Do not add Void's `compilerOptions.paths` to the root `tsconfig.json`; SvelteKit warns because root-level paths override its generated aliases. The `withVoidTSConfig()` hook above merges Void's generated files and aliases into SvelteKit's generated config instead.
+
+```json
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "types": ["void/env"]
+  }
+}
+```
+
+Run `void prepare` after a fresh clone or before typechecking in CI so `.void/tsconfig.json` exists before SvelteKit syncs its config.
+
+### 7. Deploy
+
+```bash
+void auth login
+void deploy
+```
+
+## Using Void Platform Features
+
+Most [Void platform features](../../guide/app-types.md#void-apps) work with SvelteKit. Use them in server load functions, actions, and API routes:
+
+Void-managed auth is not supported in framework mode yet. Use Better Auth's official SvelteKit integration directly for now.
+
+### Database
+
+```ts
+// src/routes/users/+page.server.ts
+import { db } from 'void/db';
+import { users } from '@schema';
+
+export async function load() {
+  return { users: await db.select().from(users) };
+}
+```
+
+### KV Storage
+
+```ts
+import { kv } from 'void/kv';
+
+export async function load() {
+  return { settings: await kv.get('app:settings') };
+}
+```
+
+### Blob Storage
+
+```ts
+import { storage } from 'void/storage';
+
+export async function load() {
+  return { avatar: await storage.get('avatars/user-1.png') };
+}
+```
+
+### AI
+
+```ts
+import { ai } from 'void/ai';
+
+export const actions = {
+  summarize: async () => {
+    return ai.run('@cf/meta/llama-3.1-8b-instruct', {
+      prompt: 'Summarize the latest news',
+    });
+  },
+};
+```
+
+### Cron Jobs
+
+```ts
+// crons/daily-cleanup.ts
+import { defineScheduled } from 'void';
+
+export const cron = '0 0 * * *';
+
+export default defineScheduled(async () => {
+  // runs daily at midnight
+});
+```
+
+### Queue Consumers
+
+```ts
+// queues/emails.ts
+import { defineQueue } from 'void';
+
+export default defineQueue<{ to: string; subject: string }>(async (batch) => {
+  for (const msg of batch.messages) {
+    // process each message
+    msg.ack();
+  }
+});
+```
+
+### Environment Variables
+
+Void gives you a typed env layer: declare keys in `env.ts`, read them via `import { env } from "void/env"`, and get schema validation at build + deploy time plus a client-leak guard that fails the build if a server-only key reaches the browser. `void/env` is a drop-in replacement for SvelteKit's `$env/static/*` and `$env/dynamic/*` for env-var access. See the [env vars guide](../../guide/env-vars.md) for the full feature set.
+
+## Accessing Bindings Directly
+
+You can also use SvelteKit's `platform.env` in server hooks and load functions:
+
+```ts
+// src/routes/users/+page.server.ts
+export async function load({ platform }) {
+  const { results } = await platform.env.DB.prepare('SELECT * FROM users').all();
+  return { users: results };
+}
+```
+
+Or the `cloudflare:workers` module:
+
+```ts
+import { env } from 'cloudflare:workers';
+
+const { results } = await env.DB.prepare('SELECT * FROM users').all();
+```

package/skills/void/docs/integrations/frameworks/tanstack-start.md

@@ -0,0 +1,140 @@
+---
+outline: deep
+---
+
+# TanStack Start
+
+[TanStack Start](https://tanstack.com/start/latest) is a Vite-based full-stack React framework. `voidPlugin()` composes directly with the TanStack Start plugin in the Vite pipeline, so there is no separate adapter to install.
+
+## Setup
+
+### 1. Create a new project
+
+```bash
+npm create @tanstack/start@latest my-app
+cd my-app
+```
+
+### 2. Install dependencies
+
+```bash
+npm install -D void
+```
+
+### 3. Configure `vite.config.ts`
+
+```ts
+import { defineConfig } from 'vite';
+import { tanstackStart } from '@tanstack/react-start/plugin';
+import react from '@vitejs/plugin-react';
+import { voidPlugin } from 'void';
+
+export default defineConfig({
+  plugins: [
+    voidPlugin(), // must come before the framework plugin
+    tanstackStart(),
+    react(),
+  ],
+});
+```
+
+### 4. Deploy
+
+```bash
+void auth login
+void deploy
+```
+
+## Using Void Platform Features
+
+Most [Void platform features](../../guide/app-types.md#void-apps) work with TanStack Start. Use them in server functions:
+
+Void-managed auth is not supported in framework mode yet. Use Better Auth's official TanStack Start integration directly for now.
+
+### Database
+
+```tsx
+import { createServerFn } from '@tanstack/react-start';
+import { db } from 'void/db';
+import { users } from '@schema';
+
+const getUsers = createServerFn().handler(async () => {
+  return db.select().from(users);
+});
+```
+
+### KV Storage
+
+```tsx
+import { createServerFn } from '@tanstack/react-start';
+import { kv } from 'void/kv';
+
+const getSettings = createServerFn().handler(async () => {
+  return kv.get('app:settings');
+});
+```
+
+### Blob Storage
+
+```tsx
+import { createServerFn } from '@tanstack/react-start';
+import { storage } from 'void/storage';
+
+const getAvatar = createServerFn().handler(async () => {
+  return storage.get('avatars/user-1.png');
+});
+```
+
+### AI
+
+```tsx
+import { createServerFn } from '@tanstack/react-start';
+import { ai } from 'void/ai';
+
+const summarize = createServerFn().handler(async () => {
+  return ai.run('@cf/meta/llama-3.1-8b-instruct', {
+    prompt: 'Summarize the latest news',
+  });
+});
+```
+
+### Cron Jobs
+
+```ts
+// crons/daily-cleanup.ts
+import { defineScheduled } from 'void';
+
+export const cron = '0 0 * * *';
+
+export default defineScheduled(async () => {
+  // runs daily at midnight
+});
+```
+
+### Queue Consumers
+
+```ts
+// queues/emails.ts
+import { defineQueue } from 'void';
+
+export default defineQueue<{ to: string; subject: string }>(async (batch) => {
+  for (const msg of batch.messages) {
+    // process each message
+    msg.ack();
+  }
+});
+```
+
+### Environment Variables
+
+Void gives you a typed env layer: declare keys in `env.ts`, read them via `import { env } from "void/env"`, and get schema validation at build + deploy time plus a client-leak guard that fails the build if a server-only key reaches the browser. See the [env vars guide](../../guide/env-vars.md) for the full feature set.
+
+## Accessing Bindings Directly
+
+You can also access Cloudflare bindings via the `cloudflare:workers` module:
+
+```tsx
+import { env } from 'cloudflare:workers';
+
+const { results } = await env.DB.prepare('SELECT * FROM users').all();
+```

package/skills/void/docs/integrations/hono.md

@@ -0,0 +1,97 @@
+---
+outline: deep
+---
+
+# Hono
+
+Void handlers run on [Hono](https://hono.dev). Void depends on Hono internally, but if your app imports from `hono/*` directly, add `hono` to your app's dependencies first.
+
+```bash
+npm install hono
+```
+
+Once `hono` is installed in your app, you can use built-in middleware, helpers, and third-party Hono packages directly.
+
+## Built-in Middleware
+
+Use Hono's built-in middleware in your global middleware files or per-route:
+
+```ts
+// middleware/01.cors.ts
+import { defineMiddleware } from 'void';
+import { cors } from 'hono/cors';
+
+export default defineMiddleware(cors({ origin: 'https://example.com' }));
+```
+
+```ts
+// middleware/02.cache.ts
+import { defineMiddleware } from 'void';
+import { cache } from 'hono/cache';
+
+export default defineMiddleware(cache({ cacheName: 'my-app', cacheControl: 'max-age=3600' }));
+```
+
+```ts
+// routes/api/webhooks/stripe.ts (per-route usage)
+import { defineHandler } from 'void';
+import { bearerAuth } from 'hono/bearer-auth';
+
+export const POST = defineHandler(bearerAuth({ token: 'webhook-secret' }), async (c) => {
+  const body = await c.req.json();
+  return { received: true };
+});
+```
+
+## Response Helpers
+
+Hono's context helpers are available on `c` in every handler:
+
+```ts
+// routes/api/download.ts
+import { defineHandler } from 'void';
+import { stream } from 'hono/streaming';
+
+export const GET = defineHandler((c) => {
+  return stream(c, async (stream) => {
+    await stream.write('chunk 1');
+    await stream.write('chunk 2');
+  });
+});
+```
+
+```ts
+// routes/api/data.ts
+import { defineHandler } from 'void';
+
+export const GET = defineHandler((c) => {
+  c.header('X-Custom', 'value');
+  c.status(201);
+  return c.json({ created: true });
+});
+```
+
+## Third-party Middleware
+
+Any `hono/*` or `@hono/*` package works. Install the package in your app, then use it directly:
+
+```ts
+// middleware/01.rate-limit.ts
+import { defineMiddleware } from 'void';
+import { rateLimiter } from 'hono-rate-limiter';
+
+export default defineMiddleware(rateLimiter({ windowMs: 60_000, limit: 100 }));
+```
+
+## Utilities
+
+Hono's standalone helpers work anywhere:
+
+```ts
+import { HTTPException } from 'hono/http-exception';
+
+// Throw typed HTTP errors
+throw new HTTPException(404, { message: 'User not found' });
+```
+
+For the full list of built-in middleware, see the [Hono documentation](https://hono.dev/docs/middleware/builtin).