start-core-middleware

createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src/start.ts, middleware factories, method order enforcement, fetch override precedence.

Aller à l'installation

Dépôt: mehdibha/dotUI
Dernière activité de la source: 3 août 2026 à 13:37
Langue détectée de SKILL.md: anglais
Étoiles: 1 354
Forks: 34

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/mehdibha/dotUI --skill start-core-middleware

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

devtools-app-setup

Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.

2026-08-03

devtools-vite-plugin

Configure @tanstack/devtools-vite for source inspection (data-tsd-source, inspectHotkey, ignore patterns), console piping (client-to-server, server-to-client, levels), enhanced logging, server event bus (port, host, HTTPS), production stripping (removeDevtoolsOnBuild), editor integration (launch-editor, custom editor.open). Must be FIRST plugin in Vite config. Vite ^6 || ^7 only.

2026-08-03

react-start

React bindings for TanStack Start: createStart, StartClient, StartServer, React-specific imports, re-exports from @tanstack/react-router, full project setup with React, useServerFn hook.

2026-08-03

Tout voir dans ce dépôt

middleware()

inputValidator()

client()

server()

sendContext

Feature	Request Middleware	Server Function Middleware
Scope	All server requests (SSR, routes, functions)	Server functions only
Methods	`.server()`	`.client()`, `.server()`
Input validation	No	Yes (`.inputValidator()`)
Client-side logic	No	Yes
Created with	`createMiddleware()`	`createMiddleware({ type: 'function' })`

// Use @tanstack/<framework>-start for your framework (react, solid, vue)
import { createMiddleware } from "@tanstack/react-start"

const loggingMiddleware = createMiddleware().server(
  async ({ next, context, request }) => {
    console.log("Request:", request.url)
    const result = await next()
    return result
  },
)

// Use @tanstack/<framework>-start for your framework (react, solid, vue)
import { createMiddleware } from "@tanstack/react-start"

const authMiddleware = createMiddleware({ type: "function" })
  .client(async ({ next }) => {
    // Runs on client BEFORE the RPC call
    const result = await next()
    // Runs on client AFTER the RPC response
    return result
  })
  .server(async ({ next, context }) => {
    // Runs on server BEFORE the handler
    const result = await next()
    // Runs on server AFTER the handler
    return result
  })

// Use @tanstack/<framework>-start for your framework (react, solid, vue)
import { createServerFn } from "@tanstack/react-start"

const fn = createServerFn()
  .middleware([authMiddleware])
  .handler(async ({ context }) => {
    // context contains data from middleware
    return { user: context.user }
  })

const authMiddleware = createMiddleware().server(async ({ next, request }) => {
  const session = await getSession(request.headers)
  if (!session) throw new Error("Unauthorized")

  return next({
    context: { session },
  })
})

const roleMiddleware = createMiddleware()
  .middleware([authMiddleware])
  .server(async ({ next, context }) => {
    console.log("Session:", context.session) // typed!
    return next()
  })

const workspaceMiddleware = createMiddleware({ type: "function" })
  .client(async ({ next, context }) => {
    return next({
      sendContext: {
        workspaceId: context.workspaceId,
      },
    })
  })
  .server(async ({ next, context }) => {
    // workspaceId available here, but VALIDATE IT
    console.log("Workspace:", context.workspaceId)
    return next()
  })

const serverTimer = createMiddleware({ type: "function" }).server(
  async ({ next }) => {
    return next({
      sendContext: {
        timeFromServer: new Date(),
      },
    })
  },
)

const clientLogger = createMiddleware({ type: "function" })
  .middleware([serverTimer])
  .client(async ({ next }) => {
    const result = await next()
    console.log("Server time:", result.context.timeFromServer)
    return result
  })

import { z } from "zod"
import { zodValidator } from "@tanstack/zod-adapter"

const workspaceMiddleware = createMiddleware({ type: "function" })
  .inputValidator(zodValidator(z.object({ workspaceId: z.string() })))
  .server(async ({ next, data }) => {
    console.log("Workspace:", data.workspaceId)
    return next()
  })

// src/start.ts
// Use @tanstack/<framework>-start for your framework (react, solid, vue)
import { createStart, createMiddleware } from "@tanstack/react-start"

const requestLogger = createMiddleware().server(async ({ next, request }) => {
  console.log(`${request.method} ${request.url}`)
  return next()
})

const functionAuth = createMiddleware({ type: "function" }).server(
  async ({ next }) => {
    // runs for every server function
    return next()
  },
)

export const startInstance = createStart(() => ({
  requestMiddleware: [requestLogger],
  functionMiddleware: [functionAuth],
}))

export const Route = createFileRoute("/api/users")({
  server: {
    middleware: [authMiddleware],
    handlers: {
      GET: async ({ context }) => Response.json(context.user),
      POST: async ({ request }) => {
        /* ... */
      },
    },
  },
})

export const Route = createFileRoute("/api/users")({
  server: {
    handlers: ({ createHandlers }) =>
      createHandlers({
        GET: async () => Response.json({ public: true }),
        POST: {
          middleware: [authMiddleware],
          handler: async ({ context }) => {
            return Response.json({ user: context.session.user })
          },
        },
      }),
  },
})

const authMiddleware = createMiddleware().server(async ({ next, request }) => {
  const session = await auth.getSession({ headers: request.headers })
  if (!session) throw new Error("Unauthorized")
  return next({ context: { session } })
})

type Permissions = Record<string, string[]>

function authorizationMiddleware(permissions: Permissions) {
  return createMiddleware({ type: "function" })
    .middleware([authMiddleware])
    .server(async ({ next, context }) => {
      const granted = await auth.hasPermission(context.session, permissions)
      if (!granted) throw new Error("Forbidden")
      return next()
    })
}

// Usage
const getClients = createServerFn()
  .middleware([authorizationMiddleware({ client: ["read"] })])
  .handler(async () => {
    return { message: "The user can read clients." }
  })

const authMiddleware = createMiddleware({ type: "function" }).client(
  async ({ next }) => {
    return next({
      headers: { Authorization: `Bearer ${getToken()}` },
    })
  },
)

// Use @tanstack/<framework>-start for your framework (react, solid, vue)
import type { CustomFetch } from "@tanstack/react-start"

const loggingMiddleware = createMiddleware({ type: "function" }).client(
  async ({ next }) => {
    const customFetch: CustomFetch = async (url, init) => {
      console.log("Request:", url)
      return fetch(url, init)
    }
    return next({ fetch: customFetch })
  },
)

// WRONG — client can send arbitrary data
.server(async ({ next, context }) => {
  await db.query(`SELECT * FROM workspace_${context.workspaceId}`)
  return next()
})

// CORRECT — validate before use
.server(async ({ next, context }) => {
  const workspaceId = z.string().uuid().parse(context.workspaceId)
  await db.query('SELECT * FROM workspaces WHERE id = $1', [workspaceId])
  return next()
})

// WRONG — localStorage doesn't exist on the server during SSR
const middleware = createMiddleware({ type: "function" }).client(
  async ({ next }) => {
    const token = localStorage.getItem("token")
    return next({ sendContext: { token } })
  },
)

// CORRECT — use cookies/headers or guard with typeof window check
const middleware = createMiddleware({ type: "function" }).client(
  async ({ next }) => {
    const token =
      typeof window !== "undefined" ? localStorage.getItem("token") : null
    return next({ sendContext: { token } })
  },
)

// WRONG — type error
createMiddleware({ type: 'function' })
  .server(() => { ... })
  .client(() => { ... })

// CORRECT — middleware → inputValidator → client → server
createMiddleware({ type: 'function' })
  .middleware([dep])
  .inputValidator(schema)
  .client(({ next }) => next())
  .server(({ next }) => next())

name	start-core/middleware
description	createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src/start.ts, middleware factories, method order enforcement, fetch override precedence.
type	sub-skill
library	tanstack-start
library_version	1.166.2
requires	["start-core","start-core/server-functions"]
sources	["TanStack/router:docs/start/framework/react/guide/middleware.md"]

name	start-core/middleware
description	createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src/start.ts, middleware factories, method order enforcement, fetch override precedence.
type	sub-skill
library	tanstack-start
library_version	1.166.2
requires	["start-core","start-core/server-functions"]
sources	["TanStack/router:docs/start/framework/react/guide/middleware.md"]

start-core-middleware

Options d'installation

Vérifiez les fichiers source

Middleware

Middleware

Two Types of Middleware

Request Middleware

Server Function Middleware

Attaching Middleware to Server Functions

Context Passing via next()

Sending Context Between Client and Server

Client → Server (sendContext)

Server → Client (sendContext in server)

Input Validation in Middleware

Global Middleware

Using Middleware with Server Routes

All handlers in a route

Specific handlers only

Middleware Factories

Custom Headers and Fetch

Setting headers from client middleware

Custom fetch

Common Mistakes

1. HIGH: Trusting client sendContext without validation

2. MEDIUM: Confusing request vs server function middleware

3. HIGH: Browser APIs in .client() crash during SSR

4. MEDIUM: Wrong method order

Cross-References

start-core-middleware

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Middleware

Plus depuis ce dépôt

Middleware

Two Types of Middleware

Request Middleware

Server Function Middleware

Attaching Middleware to Server Functions

Context Passing via next()

Sending Context Between Client and Server

Client → Server (sendContext)

Server → Client (sendContext in server)

Input Validation in Middleware

Global Middleware

Using Middleware with Server Routes

All handlers in a route

Specific handlers only

Middleware Factories

Custom Headers and Fetch

Setting headers from client middleware

Custom fetch

Common Mistakes

1. HIGH: Trusting client sendContext without validation

2. MEDIUM: Confusing request vs server function middleware

3. HIGH: Browser APIs in .client() crash during SSR

4. MEDIUM: Wrong method order

Cross-References