CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-11ty--eleventy

A simpler static site generator with extensive templating support and plugin ecosystem.

Pending
Overview
Eval results
Files

development-tools.mddocs/

Development Tools

Development server, file watching, and live reload capabilities for efficient development workflows, including hot reloading, custom server configuration, and comprehensive watch system.

Capabilities

Development Server

Built-in development server with live reload and hot reloading capabilities.

/**
 * Start development server on specified port
 * @param port - HTTP port number (optional)
 * @returns Server instance promise
 */
serve(port?: number): Promise<void>;

/**
 * Configure development server options
 * @param options - Server configuration options
 * @param override - Whether to override existing options completely
 */
setServerOptions(options?: ServerOptions, override?: boolean): void;

/**
 * Set server passthrough copy behavior during development
 * @param behavior - Copy behavior mode
 */
setServerPassthroughCopyBehavior(behavior: 'copy' | 'passthrough'): void;

interface ServerOptions {
  /** Server port number */
  port?: number;
  
  /** Show server on all network interfaces */
  showAllHosts?: boolean;
  
  /** Show Eleventy version in output */
  showVersion?: boolean;
  
  /** Response encoding */
  encoding?: string;
  
  /** Enable/disable live reload */
  liveReload?: boolean;
  
  /** Delay before reload (milliseconds) */
  reloadDelay?: number;
  
  /** Custom middleware functions */
  middleware?: Function[];
  
  /** Server root directory */
  root?: string;
  
  /** Enable directory browsing */
  browse?: boolean;
  
  /** Custom error pages */
  errorPages?: {
    404?: string;
    500?: string;
  };
}

Usage Examples:

// Basic server usage
const elev = new Eleventy("./src", "./_site", { runMode: "serve" });
await elev.init();
await elev.serve(8080);

// Configure server options
eleventyConfig.setServerOptions({
  port: 3000,
  showAllHosts: true,
  liveReload: true,
  middleware: [
    (req, res, next) => {
      // Custom middleware
      res.setHeader("X-Custom-Header", "Eleventy");
      next();
    }
  ]
});

// Faster development with passthrough
eleventyConfig.setServerPassthroughCopyBehavior("passthrough");

File Watching

Comprehensive file watching system with dependency tracking and hot reloading.

/**
 * Start file watching for automatic rebuilds
 * @returns Watch function for testing
 */
watch(): Promise<Function>;

/**
 * Stop file watching and close servers
 */
stopWatch(): Promise<void>;

/**
 * Initialize watch system without starting
 */
initWatch(): Promise<void>;

/**
 * Get all files currently being watched
 * @returns Array of watched file paths
 */
getWatchedFiles(): Promise<string[]>;

/**
 * Add additional files or patterns to watch
 * @param additionalWatchTargets - Files/patterns to watch
 * @param options - Watch target options
 */
addWatchTarget(additionalWatchTargets: string, options?: WatchTargetOptions): void;

interface WatchTargetOptions {
  /** Reset configuration when target changes */
  resetConfig?: boolean;
}

Usage Examples:

// Basic watch usage
const elev = new Eleventy("./src", "./_site", { runMode: "watch" });
await elev.init();
await elev.watch();

// Watch additional files
eleventyConfig.addWatchTarget("./src/assets/**/*.scss");
eleventyConfig.addWatchTarget("./src/data/**/*.yml");

// Watch with config reset
eleventyConfig.addWatchTarget("./custom-config/*.js", {
  resetConfig: true
});

// Get watched files for debugging
const watchedFiles = await elev.getWatchedFiles();
console.log("Watching:", watchedFiles.length, "files");

JavaScript Dependency Watching

Automatic dependency tracking for JavaScript files and modules.

/**
 * Enable/disable JavaScript dependency watching
 * @param watchEnabled - Whether to watch JS dependencies
 */
setWatchJavaScriptDependencies(watchEnabled: boolean): void;

interface JavaScriptWatchOptions {
  /** Watch JavaScript dependencies automatically */
  watchJavaScriptDependencies?: boolean;
  
  /** Additional files to watch */
  additionalWatchTargets?: string[];
  
  /** Files to ignore during watching */
  watchIgnores?: string[];
}

Usage Examples:

// Enable JS dependency watching (default: true)
eleventyConfig.setWatchJavaScriptDependencies(true);

// Disable for faster startup (not recommended)
eleventyConfig.setWatchJavaScriptDependencies(false);

// Watch dependencies are automatically tracked for:
// - .eleventy.js config files
// - .11ty.js template files  
// - _data/*.js global data files
// - Template directory data files

Watch Configuration

Fine-tune the file watching behavior and performance.

/**
 * Configure Chokidar file watcher options
 * @param options - Chokidar configuration options
 */
setChokidarConfig(options?: ChokidarOptions): void;

/**
 * Set watch throttle wait time to batch file changes
 * @param time - Wait time in milliseconds
 */
setWatchThrottleWaitTime(time?: number): void;

/**
 * Set files to ignore during watching
 * @param enabled - Whether to use .gitignore
 */
setUseGitIgnore(enabled: boolean): void;

interface ChokidarOptions {
  /** Ignore initial add events */
  ignoreInitial?: boolean;
  
  /** Ignored paths/patterns */ 
  ignored?: string | string[] | Function;
  
  /** Follow symbolic links */
  followSymlinks?: boolean;
  
  /** Working directory for relative paths */
  cwd?: string;
  
  /** Disable globbing */
  disableGlobbing?: boolean;
  
  /** Use fs.watchFile as fallback */
  usePolling?: boolean;
  
  /** Polling interval (if usePolling: true) */
  interval?: number;
  
  /** Binary file polling interval */
  binaryInterval?: number;
  
  /** Additional options for fs.watch */
  awaitWriteFinish?: {
    stabilityThreshold?: number;
    pollInterval?: number;
  };
}

Usage Examples:

// Configure file watcher
eleventyConfig.setChokidarConfig({
  usePolling: false,
  ignoreInitial: true,
  awaitWriteFinish: {
    stabilityThreshold: 150,
    pollInterval: 25
  }
});

// Throttle rebuilds (wait 500ms after last change)
eleventyConfig.setWatchThrottleWaitTime(500);

// Use .gitignore for watch ignores
eleventyConfig.setUseGitIgnore(true);

Build Control

Control build behavior during development.

/**
 * Set incremental build mode for faster rebuilds
 * @param isIncremental - Enable incremental builds
 */
setIncrementalBuild(isIncremental: boolean): void;

/**
 * Set whether to run initial build before watching
 * @param ignoreInitialBuild - Skip initial build
 */
setIgnoreInitial(ignoreInitialBuild: boolean): void;

/**
 * Set specific file for incremental processing
 * @param incrementalFile - File path to process incrementally
 */
setIncrementalFile(incrementalFile: string): void;

/**
 * Set dry run mode (don't write files)
 * @param isDryRun - Enable dry run mode
 */
setDryRun(isDryRun: boolean): void;

Usage Examples:

// Enable incremental builds for faster development
elev.setIncrementalBuild(true);

// Skip initial build, only build on changes
elev.setIgnoreInitial(true);

// Process specific file incrementally
elev.setIncrementalFile("./src/posts/new-post.md");

// Dry run mode for testing
elev.setDryRun(true);

Live Reload

Hot reloading and live reload functionality for development.

interface LiveReloadOptions {
  /** Files that triggered the reload */
  files: string[];
  
  /** Reload subtype for CSS hot-swapping */
  subtype?: 'css';
  
  /** Build results for smart reloading */
  build?: {
    /** Updated stylesheets for CSS injection */
    stylesheets: string[];
    
    /** Updated templates for partial reloads */
    templates: any[];
  };
}

interface ReloadCapabilities {
  /** CSS hot-swapping without full page reload */
  cssHotReload: boolean;
  
  /** Template partial updates */
  templateUpdates: boolean;
  
  /** Asset injection */
  assetInjection: boolean;
}

Live Reload Features:

  • CSS Hot Reload: CSS changes are injected without page refresh
  • Template Updates: Templates trigger smart page reloads
  • Asset Updates: Images and assets update automatically
  • Error Overlay: Build errors shown in browser overlay

Development Workflow

Combine development tools for optimal workflow.

/**
 * Complete development setup
 */
interface DevelopmentWorkflow {
  /** Initialize Eleventy */
  init(): Promise<void>;
  
  /** Start file watching */
  watch(): Promise<Function>;
  
  /** Start development server */
  serve(port?: number): Promise<void>;
  
  /** Stop all development processes */
  stopWatch(): Promise<void>;
}

Complete Development Setup:

// Complete development setup
const elev = new Eleventy("./src", "./_site", {
  runMode: "serve",
  quietMode: false
});

// Configure development tools
eleventyConfig.setServerOptions({
  port: 8080,
  showAllHosts: true
});

eleventyConfig.setWatchThrottleWaitTime(100);
eleventyConfig.setIncrementalBuild(true);
eleventyConfig.addWatchTarget("./src/assets/**/*.scss");

// Start development
await elev.init();
const watchFn = await elev.watch();
await elev.serve();

// Graceful shutdown
process.on("SIGINT", async () => {
  await elev.stopWatch();
  process.exit(0);
});

// CLI equivalent: npx @11ty/eleventy --serve --watch --port=8080

Error Handling

Development-friendly error handling and debugging.

interface DevelopmentErrors {
  /** Error overlay in browser */
  errorOverlay: boolean;
  
  /** Detailed error messages */
  verboseErrors: boolean;
  
  /** Source maps for debugging */
  sourceMaps: boolean;
}

/**
 * Set verbose mode for detailed error messages
 * @param isVerbose - Enable verbose output
 */
setIsVerbose(isVerbose: boolean): void;

/**
 * Disable logger output
 */
disableLogger(): void;

Error Handling Examples:

// Enable verbose error messages
elev.setIsVerbose(true);

// Development error handling
eleventyConfig.on("eleventy.config", () => {
  if (process.env.NODE_ENV === "development") {
    elev.setIsVerbose(true);
  }
});

// Custom error handling
try {
  await elev.write();
} catch (error) {
  if (error.name === "EleventyConfigError") {
    console.error("Configuration error:", error.message);
  } else {
    console.error("Build error:", error);
  }
}

Types

interface ServerOptions {
  port?: number;
  showAllHosts?: boolean;
  showVersion?: boolean;
  encoding?: string;
  liveReload?: boolean;
  reloadDelay?: number;
  middleware?: Function[];
  root?: string;
  browse?: boolean;
  errorPages?: {
    404?: string;
    500?: string;
  };
}

interface WatchTargetOptions {
  resetConfig?: boolean;
}

interface ChokidarOptions {
  ignoreInitial?: boolean;
  ignored?: string | string[] | Function;
  followSymlinks?: boolean;
  cwd?: string;
  disableGlobbing?: boolean;
  usePolling?: boolean;
  interval?: number;
  binaryInterval?: number;
  awaitWriteFinish?: {
    stabilityThreshold?: number;
    pollInterval?: number;
  };
}

interface JavaScriptWatchOptions {
  watchJavaScriptDependencies?: boolean;
  additionalWatchTargets?: string[];
  watchIgnores?: string[];
}

interface LiveReloadOptions {
  files: string[];
  subtype?: 'css';
  build?: {
    stylesheets: string[];
    templates: any[];
  };
}

interface DevelopmentWorkflow {
  init(): Promise<void>;
  watch(): Promise<Function>;
  serve(port?: number): Promise<void>;
  stopWatch(): Promise<void>;
}

Install with Tessl CLI

npx tessl i tessl/npm-11ty--eleventy

docs

build-pipeline.md

configuration-api.md

data-system.md

development-tools.md

index.md

plugin-system.md

programmatic-api.md

template-processing.md

tile.json