tessl/npm-remix-run--dev

Dev tools and CLI for Remix applications providing build tools, development server, Vite integration, and command-line utilities.

—

Pending

Overview

Eval results

Files

Vite Integration

Name: tessl/npm-remix-run--dev
Author: tessl

Modern build system integration providing fast development experience, optimized production builds, and comprehensive plugin ecosystem support for Remix applications.

Capabilities

Remix Vite Plugin

Main Vite plugin that integrates Remix with Vite's build system, providing development server, HMR, and production builds.

/**
 * Main Remix Vite plugin for integrating Remix with Vite
 * @param config - Vite plugin configuration options
 * @returns Vite plugin instance
 */
function vitePlugin(config?: Partial<VitePluginConfig>): RemixVitePlugin;

interface VitePluginConfig {
  /** Path to app directory relative to project root */
  appDirectory?: string;
  /** Path to assets build directory */
  assetsBuildDirectory?: string;
  /** Build directory for output (defaults to "build") */
  buildDirectory?: string;
  /** Entry client file path */
  entryClientFile?: string;
  /** Entry server file path */
  entryServerFile?: string;
  /** Public path for assets */
  publicPath?: string;
  /** Route definition function */
  routes?: AppConfig["routes"];
  /** Enable/disable server-side rendering */
  ssr?: boolean;
  /** Server build output file (defaults to "index.js") */
  serverBuildFile?: string;
  /** Patterns for ignored route files */
  ignoredRouteFiles?: string[];
  /** Future feature flags */
  future?: Partial<FutureConfig>;
  /** Base name for routing (defaults to "/") */
  basename?: string;
  /** Callback called when build ends */
  buildEnd?: (args: { viteConfig: ResolvedViteConfig }) => void | Promise<void>;
  /** Whether to write manifest.json file to build directory */
  manifest?: boolean;
  /** Vite presets for platform integration */
  presets?: Preset[];
  /** Server bundles configuration function */
  serverBundles?: ServerBundlesFunction;
}

type RemixVitePlugin = (config?: Partial<VitePluginConfig>) => Plugin;

Usage Example:

// vite.config.ts
import { defineConfig } from "vite";
import { vitePlugin } from "@remix-run/dev";

export default defineConfig({
  plugins: [
    vitePlugin({
      appDirectory: "app",
      buildDirectory: "build",
      future: {
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
  ],
});

Cloudflare Development Proxy Plugin

Vite plugin for proxying Cloudflare-specific functionality during development.

/**
 * Cloudflare development proxy plugin for local development
 * @param options - Cloudflare proxy configuration
 * @returns Vite plugin for Cloudflare development
 */
function cloudflareDevProxyVitePlugin<Env = {}, Cf extends CfProperties = {}>(
  options: CloudflareDevProxyOptions<Env, Cf>
): Plugin;

interface CloudflareDevProxyOptions<Env, Cf> {
  /** Cloudflare environment variables */
  getLoadContext?: (args: {
    request: Request;
    context: { env: Env; cf: Cf; ctx: ExecutionContext };
  }) => Promise<any> | any;
  /** Directory containing wrangler.toml */
  configPath?: string;
  /** Environment name */
  environment?: string;
  /** Persist state across requests */
  persist?: boolean | string;
}

Vite Configuration Utilities

Utilities for working with Vite configuration in Remix projects.

/**
 * Load and resolve Vite configuration for Remix
 * @param options - Configuration loading options
 * @returns Resolved Vite configuration
 */
function resolveViteConfig(options: {
  configFile?: string;
  mode?: string;
  root: string;
}): Promise<ResolvedViteConfig>;

/**
 * Extract Remix plugin context from Vite configuration
 * @param viteConfig - Resolved Vite configuration
 * @returns Remix plugin context or undefined
 */
function extractRemixPluginContext(
  viteConfig: ResolvedViteConfig
): Promise<RemixPluginContext | undefined>;

/**
 * Load Vite plugin context for Remix
 * @param options - Context loading options
 * @returns Remix plugin context
 */
function loadVitePluginContext(options: {
  configFile?: string;
  root?: string;
}): Promise<RemixPluginContext | undefined>;

Build Manifest Types

Types for Vite build manifests and configuration.

interface BuildManifest {
  /** Build version identifier */
  version: string;
  /** Build mode (development/production) */
  mode: string;
  /** Entry point information */
  entry: {
    /** Module path */
    module: string;
    /** Import dependencies */
    imports: string[];
  };
  /** Route-specific build information */
  routes: Record<string, {
    /** Route identifier */
    id: string;
    /** Parent route ID */
    parentId?: string;
    /** Route path pattern */
    path?: string;
    /** Module path */
    module: string;
    /** Import dependencies */
    imports?: string[];
  }>;
}

interface Preset {
  /** Preset name */
  name: string;
  /** Preset configuration function */
  configure: (args: PresetConfigureArgs) => void | Promise<void>;
}

type ServerBundlesFunction = (args: {
  branch: RouteBranch;
}) => string | Promise<string>;

Usage Examples:

// Advanced Vite configuration with presets
import { defineConfig } from "vite";
import { vitePlugin } from "@remix-run/dev";

const myPreset: Preset = {
  name: "my-preset",
  configure: async ({ remixConfig, viteConfig }) => {
    // Custom preset logic
  },
};

export default defineConfig({
  plugins: [
    vitePlugin({
      presets: [myPreset],
      serverBundles: ({ branch }) => {
        return branch.some(route => route.id.includes("admin")) 
          ? "admin-bundle" 
          : "main-bundle";
      },
    }),
  ],
});

// Using Cloudflare proxy in development
import { defineConfig } from "vite";
import { vitePlugin, cloudflareDevProxyVitePlugin } from "@remix-run/dev";

export default defineConfig({
  plugins: [
    cloudflareDevProxyVitePlugin({
      configPath: "./wrangler.toml",
      environment: "development",
      persist: true,
    }),
    vitePlugin(),
  ],
});

Install with Tessl CLI