CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tanstack--react-start

Modern full-stack React framework with SSR, streaming, server functions, and API routes powered by TanStack Router and Vite.

Pending
Overview
Eval results
Files

server-utilities.mddocs/

Server Utilities

Server-side utilities for handling requests, creating handlers, and managing server operations within TanStack Start applications.

Capabilities

Request Handler Creation

Create and configure request handlers for server-side operations.

/**
 * Creates a start handler for server-side request processing
 * @param options - Configuration options for the handler
 * @returns Request handler function
 */
function createStartHandler(
  options?: { streamHandler?: StreamHandler }
): RequestHandler<Register>;

/**
 * Handle server actions and provide proper error handling
 * @param action - The server action to handle
 * @returns Promise resolving to action result
 */
function handleServerAction<T>(action: T): Promise<T>;

/**
 * Create a request handler with custom logic
 * @param handler - Function to handle the request
 * @returns Request handler with proper typing
 */
function requestHandler<TRegister>(
  handler: (request: Request) => Response | Promise<Response>
): RequestHandler<TRegister>;

Usage Examples:

import { createStartHandler, requestHandler } from "@tanstack/react-start/server";

// Basic start handler
const handler = createStartHandler();

// Custom request handler
const apiHandler = requestHandler(async (request) => {
  if (request.url.includes("/api/")) {
    return new Response(JSON.stringify({ message: "API endpoint" }), {
      headers: { "Content-Type": "application/json" }
    });
  }
  return new Response("Not found", { status: 404 });
});

// Handler with custom stream handler
const streamHandler = createStartHandler({
  streamHandler: (readable) => {
    // Custom streaming logic
    return readable;
  }
});

Request Context Access

Access request information and context within server functions.

/**
 * Get the current request object
 * @returns Current HTTP request
 */
function getRequest(): Request;

/**
 * Get all request headers as an object
 * @returns Object containing all request headers
 */
function getRequestHeaders(): Record<string, string>;

/**
 * Get a specific request header by name
 * @param name - Header name to retrieve
 * @returns Header value or undefined
 */
function getRequestHeader(name: string): string | undefined;

/**
 * Get the client IP address from the request
 * @param options - Options for IP detection
 * @returns Client IP address or undefined
 */
function getRequestIP(options?: { ipHeader?: string }): string | undefined;

Usage Examples:

import {
  getRequest,
  getRequestHeaders,
  getRequestHeader,
  getRequestIP
} from "@tanstack/react-start";

// Access request information in a server function
const getUserInfo = createServerFn()
  .handler(async () => {
    const request = getRequest();
    const headers = getRequestHeaders();
    const userAgent = getRequestHeader("user-agent");
    const clientIP = getRequestIP();

    return {
      method: request.method,
      url: request.url,
      userAgent,
      clientIP,
      headers
    };
  });

Response Utilities

Utilities for creating and manipulating HTTP responses.

/**
 * Create a JSON response with proper headers
 * @param data - Data to serialize as JSON
 * @param options - Response options
 * @returns JSON response object
 */
function json<T>(
  data: T,
  options?: { status?: number; headers?: HeadersInit }
): JsonResponse;

/**
 * Merge multiple header objects into one
 * @param headers - Header objects to merge
 * @returns Merged headers object
 */
function mergeHeaders(...headers: HeadersInit[]): Headers;

Usage Examples:

import { json, mergeHeaders } from "@tanstack/react-start";

// Create JSON responses
const getUsers = createServerFn()
  .handler(async () => {
    const users = await db.user.findMany();

    return json(users, {
      status: 200,
      headers: { "Cache-Control": "max-age=300" }
    });
  });

// Merge headers from multiple sources
const createUser = createServerFn()
  .handler(async (userData) => {
    const user = await db.user.create({ data: userData });

    const responseHeaders = mergeHeaders(
      { "Content-Type": "application/json" },
      { "X-User-ID": user.id },
      { "Cache-Control": "no-cache" }
    );

    return json(user, { headers: responseHeaders });
  });

Router Server-Side Utilities

Server-side utilities specific to TanStack Router integration.

/**
 * Attach router server-side SSR utilities
 * @param router - Router instance to enhance
 * @returns Enhanced router with SSR utilities
 */
function attachRouterServerSsrUtils<T>(router: T): T;

/**
 * Transform readable stream with router context
 * @param stream - Readable stream to transform
 * @param router - Router instance
 * @returns Transformed stream
 */
function transformReadableStreamWithRouter<T>(
  stream: ReadableStream<T>,
  router: any
): ReadableStream<T>;

/**
 * Transform pipeable stream with router context
 * @param stream - Pipeable stream to transform
 * @param router - Router instance
 * @returns Transformed stream
 */
function transformPipeableStreamWithRouter<T>(
  stream: T,
  router: any
): T;

Server Context Management

Functions for managing server execution context.

/**
 * Get the global Start context
 * @returns Global Start context object
 */
function getGlobalStartContext(): StartContext;

/**
 * Get the current router instance
 * @returns Router instance
 */
function getRouterInstance(): AnyRouter;

Types

// Request handler types
interface RequestHandler<TRegister> {
  (request: Request): Promise<Response> | Response;
}

interface RequestOptions {
  onError?: (error: Error) => Response | Promise<Response>;
  onRequest?: (request: Request) => Request | Promise<Request>;
  onResponse?: (response: Response) => Response | Promise<Response>;
}

// Stream handler types
interface StreamHandler {
  (readable: ReadableStream): ReadableStream;
}

// JSON response type
interface JsonResponse {
  json(): any;
  status: number;
  headers: Headers;
  ok: boolean;
  statusText: string;
}

// Start context type
interface StartContext {
  request: Request;
  response?: Response;
  [key: string]: any;
}

// Router types
interface AnyRouter {
  // Router implementation from TanStack Router
}

// Registration interface
interface Register {
  // Extend this for custom type registration
}

Constants

// HTTP headers constants
const HEADERS: {
  readonly CONTENT_TYPE: string;
  readonly CACHE_CONTROL: string;
  readonly X_TSS_SERIALIZED: string;
};

Install with Tessl CLI

npx tessl i tessl/npm-tanstack--react-start

docs

index.md

isomorphic-functions.md

middleware.md

request-response.md

rpc-system.md

server-functions.md

server-utilities.md

ssr-components.md

vite-plugin.md

tile.json