tessl/npm-rwsdk

A React framework for building full-stack, server-driven web applications on Cloudflare's edge platform with SSR, RSC, and realtime features

Overview

Eval results

Files

Vite Plugin

Name: tessl/npm-rwsdk
Author: tessl

The RedwoodSDK Vite plugin integrates the framework into the Vite build process, handling React Server Components transformation, code splitting between client and server bundles, and Cloudflare-specific optimizations.

Capabilities

Redwood Plugin Function

Creates and configures the RedwoodSDK Vite plugin with optional customization.

/**
 * Creates the RedwoodSDK Vite plugin
 * @param options - Optional configuration for the plugin
 * @returns Promise resolving to an array of Vite plugins
 */
function redwood(options?: RedwoodPluginOptions): Promise<InlineConfig["plugins"]>;

interface RedwoodPluginOptions {
  /** Suppress plugin output and logging */
  silent?: boolean;
  /** Project root directory (defaults to process.cwd()) */
  rootDir?: string;
  /** Include Cloudflare Vite plugin (defaults to true) */
  includeCloudflarePlugin?: boolean;
  /** Include React Vite plugin (defaults to true) */
  includeReactPlugin?: boolean;
  /** Path to wrangler configuration file */
  configPath?: string;
  /** Force specific paths to be treated as client-side code */
  forceClientPaths?: string[];
  /** Force specific paths to be treated as server-side code */
  forceServerPaths?: string[];
  /** Custom entry points */
  entry?: {
    /** Custom worker entry point path */
    worker?: string;
  };
}

Usage Example:

// vite.config.ts
import { defineConfig } from 'vite';
import { redwood } from 'rwsdk/vite';

export default defineConfig({
  plugins: [
    await redwood({
      silent: false,
      includeCloudflarePlugin: true,
      includeReactPlugin: true,
    }),
  ],
});

Advanced Configuration:

// vite.config.ts with custom configuration
import { defineConfig } from 'vite';
import { redwood } from 'rwsdk/vite';

export default defineConfig({
  plugins: [
    await redwood({
      rootDir: __dirname,
      configPath: './wrangler.toml',
      forceClientPaths: ['**/components/**'],
      forceServerPaths: ['**/api/**', '**/db/**'],
      entry: {
        worker: './src/worker.tsx',
      },
    }),
  ],
});

Plugin Behavior

The plugin performs the following operations:

RSC Transformation: Automatically identifies and transforms React Server Components and server functions marked with 'use server'
Code Splitting: Separates client and server code into appropriate bundles for Cloudflare Workers
Module Resolution: Handles special module imports like rwsdk/worker, rwsdk/client, and conditional exports
Build Optimization: Optimizes bundle sizes for edge deployment with tree-shaking and dead code elimination
Development Mode: Provides hot module replacement (HMR) support for both client and server code