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

Build System

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

Production build system with asset optimization, code splitting, server-side rendering support, and deployment target configuration.

Capabilities

Compiler Build

Main build function for creating production bundles using the Remix compiler.

/**
 * Build production bundles using Remix compiler
 * @param config - Resolved Remix configuration
 * @param options - Compilation options
 * @returns Promise that resolves when build completes
 */
namespace compiler {
  function build(config: RemixConfig, options?: CompileOptions): Promise<void>;
}

interface CompileOptions {
  /** Server mode for build (development/production) */
  mode?: ServerMode;
  
  /** Node.js target version */
  target?: "node14" | "node16" | "node18";
  
  /** Callback called when build starts */
  onBuildStart?: () => void;
  
  /** Callback called when build finishes */
  onBuildFinish?: (durationMs: number, okay?: boolean) => void;
  
  /** Callback called when file is created */
  onFileCreated?: (file: string) => void;
  
  /** Callback called when file is deleted */
  onFileDeleted?: (file: string) => void;
}

type ServerMode = "development" | "production" | "test";

Watch Mode

Continuous compilation during development with file watching and incremental builds.

/**
 * Start watch mode for continuous compilation
 * @param config - Resolved Remix configuration
 * @param options - Watch options
 * @returns Promise that resolves when watch stops
 */
namespace compiler {
  function watch(config: RemixConfig, options?: WatchOptions): Promise<void>;
}

interface WatchOptions {
  /** Server mode for watch builds */
  mode?: ServerMode;
  
  /** Callback called when build starts */
  onBuildStart?: () => void;
  
  /** Callback called when build finishes */
  onBuildFinish?: (durationMs: number, okay?: boolean) => void;
  
  /** Callback called when file is created */
  onFileCreated?: (file: string) => void;
  
  /** Callback called when file is deleted */
  onFileDeleted?: (file: string) => void;
  
  /** Callback called on initial build complete */
  onInitialBuild?: () => void;
  
  /** Callback called when rebuild starts */
  onRebuildStart?: () => void;
  
  /** Enable/disable file watching */
  watch?: boolean;
}

CSS Compilation

CSS processing and bundling capabilities for Remix applications.

/**
 * Create CSS compiler instance
 * @param options - CSS compiler options
 * @returns CSS compiler instance
 */
namespace css {
  function createCompiler(options: CSSCompilerOptions): CSSCompiler;
  
  /**
   * Write CSS bundle to filesystem
   * @param compiler - CSS compiler instance
   * @param manifest - Asset manifest
   * @param outputPath - Output path for CSS bundle
   * @returns Promise that resolves when bundle is written
   */
  function writeBundle(
    compiler: CSSCompiler, 
    manifest: AssetsManifest, 
    outputPath: string
  ): Promise<void>;
}

interface CSSCompilerOptions {
  /** Remix configuration */
  config: RemixConfig;
  
  /** CSS processing mode */
  mode: ServerMode;
  
  /** Enable source maps */
  sourcemap?: boolean;
}

interface CSSCompiler {
  /** Compile CSS from source */
  compile(source: string, filename: string): Promise<CSSCompileResult>;
  
  /** Process CSS bundle */
  bundle(files: string[]): Promise<string>;
}

interface CSSCompileResult {
  /** Compiled CSS code */
  code: string;
  
  /** Source map if enabled */
  map?: string;
  
  /** Dependencies discovered during compilation */
  dependencies: string[];
}

Manifest Generation

Asset manifest creation and management for tracking build outputs.

/**
 * Create asset manifest from build results
 * @param options - Manifest creation options
 * @returns Promise resolving to asset manifest
 */
namespace manifest {
  function create(options: ManifestCreateOptions): Promise<AssetsManifest>;
  
  /**
   * Write manifest to filesystem
   * @param config - Remix configuration
   * @param manifest - Asset manifest to write
   * @returns Promise that resolves when manifest is written
   */
  function write(config: RemixConfig, manifest: AssetsManifest): Promise<void>;
}

interface ManifestCreateOptions {
  /** Remix configuration */
  config: RemixConfig;
  
  /** Metafile from esbuild */
  metafile: Metafile;
  
  /** HMR information */
  hmr?: {
    timestamp: number;
    runtime: string;
  };
}

Build Utilities

Utility functions for build processes and error handling.

/**
 * Log thrown errors with proper formatting
 * @param thrown - Error or unknown value that was thrown
 */
function logThrown(thrown: unknown): void;

/**
 * Create lazy value for deferred computation
 * @param args - Lazy value creation arguments
 * @returns Lazy value instance
 */
function createLazyValue<T>(args: {
  /** Function to compute the value */
  get: () => T | Promise<T>;
  
  /** Optional function to dispose the value */
  dispose?: (value: T) => void | Promise<void>;
}): LazyValue<T>;

interface LazyValue<T> {
  /** Get the computed value */
  get(): Promise<T>;
  
  /** Dispose the value */
  dispose(): Promise<void>;
}

Dependency Management

Functions for determining which dependencies should be bundled with the application.

/**
 * Get application dependencies from package.json
 * @param config - Remix configuration
 * @returns Array of dependency names
 */
function getAppDependencies(config: RemixConfig): string[];

/**
 * Get dependencies that should be bundled with the server
 * @param pkg - Package names to check
 * @returns Array of dependencies to bundle
 */
function getDependenciesToBundle(...pkg: string[]): string[];

Usage Examples

Basic Production Build

import { compiler, readConfig } from "@remix-run/dev";

async function buildApp() {
  const config = await readConfig();
  
  await compiler.build(config, {
    mode: "production",
    target: "node18",
    onBuildStart: () => console.log("Build started..."),
    onBuildFinish: (duration, success) => {
      if (success) {
        console.log(`Build completed in ${duration}ms`);
      } else {
        console.error("Build failed");
      }
    },
  });
}

buildApp().catch(console.error);

Development Watch Mode

import { compiler, readConfig } from "@remix-run/dev";

async function watchApp() {
  const config = await readConfig();
  
  await compiler.watch(config, {
    mode: "development", 
    onInitialBuild: () => console.log("Initial build complete"),
    onRebuildStart: () => console.log("Rebuilding..."),
    onBuildFinish: (duration, success) => {
      console.log(`Rebuild ${success ? 'completed' : 'failed'} in ${duration}ms`);
    },
    onFileCreated: (file) => console.log(`Created: ${file}`),
    onFileDeleted: (file) => console.log(`Deleted: ${file}`),
  });
}

watchApp().catch(console.error);

Custom CSS Processing

import { css, readConfig } from "@remix-run/dev";

async function processCss() {
  const config = await readConfig();
  
  const cssCompiler = css.createCompiler({
    config,
    mode: "production",
    sourcemap: true,
  });
  
  const result = await cssCompiler.compile(
    `
    .button {
      background: blue;
      color: white;
      padding: 10px;
    }
    `,
    "styles.css"
  );
  
  console.log("Compiled CSS:", result.code);
  console.log("Dependencies:", result.dependencies);
}

processCss().catch(console.error);

Manifest Generation

import { manifest, readConfig } from "@remix-run/dev";

async function createManifest() {
  const config = await readConfig();
  
  // This would typically be provided by esbuild after compilation
  const mockMetafile = {
    inputs: {},
    outputs: {
      "build/assets/entry.client-HASH.js": {
        bytes: 1000,
        imports: [],
        exports: [],
      },
    },
  };
  
  const assetManifest = await manifest.create({
    config,
    metafile: mockMetafile,
    hmr: {
      timestamp: Date.now(),
      runtime: "build/assets/hmr-runtime-HASH.js",
    },
  });
  
  await manifest.write(config, assetManifest);
  console.log("Manifest created:", assetManifest);
}

createManifest().catch(console.error);

Build with Dependencies

import { compiler, readConfig, getDependenciesToBundle } from "@remix-run/dev";

async function buildWithDeps() {
  const config = await readConfig();
  
  // Get dependencies to bundle
  const depsToBundle = getDependenciesToBundle(
    "lodash",
    "date-fns",
    /^@my-org\/.*/
  );
  
  console.log("Bundling dependencies:", depsToBundle);
  
  // Update config with dependencies to bundle
  const buildConfig = {
    ...config,
    serverDependenciesToBundle: depsToBundle,
  };
  
  await compiler.build(buildConfig, {
    mode: "production",
    target: "node18",
  });
}

buildWithDeps().catch(console.error);

Error Handling and Logging

import { compiler, logThrown, readConfig } from "@remix-run/dev";

async function buildWithErrorHandling() {
  try {
    const config = await readConfig();
    
    await compiler.build(config, {
      mode: "production",
      onBuildFinish: (duration, success) => {
        if (!success) {
          console.error("Build failed");
        }
      },
    });
  } catch (error) {
    logThrown(error);
    process.exit(1);
  }
}

buildWithErrorHandling();

Install with Tessl CLI