tessl/npm-livereload-js

LiveReload JavaScript client that enables automatic browser refreshing and live CSS reloading during development

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Configuration

Name: tessl/npm-livereload-js
Author: tessl

Configuration system for customizing LiveReload behavior, connection settings, and reloading strategies. Options can be specified either as a global object or as URL query parameters in the script tag.

Capabilities

Global Configuration Object

Set configuration using a global LiveReloadOptions object before the LiveReload script loads.

/**
 * Global configuration object for LiveReload
 * Must be defined before livereload.js script loads
 */
window.LiveReloadOptions = {
  host?: string,
  port?: number | string,
  https?: boolean,
  path?: string,
  mindelay?: number,
  maxdelay?: number,
  handshake_timeout?: number,
  isChromeExtension?: boolean,
  reloadMissingCSS?: boolean,
  pluginOrder?: string[],
  ext?: string,
  extver?: string,
  snipver?: string
};

Usage Examples:

<script>
    // Configure LiveReload before script loads
    window.LiveReloadOptions = {
        host: 'dev.example.com',
        port: 8080,
        mindelay: 500,
        maxdelay: 30000,
        reloadMissingCSS: false
    };
</script>
<script src="http://dev.example.com:8080/livereload.js"></script>

URL Query Parameters

Configure LiveReload using query parameters in the script tag URL.

<!-- Configure via script tag URL parameters -->
<script src="http://localhost:35729/livereload.js?host=custom&port=8080&mindelay=500"></script>

Usage Examples:

<!-- Basic configuration -->
<script src="http://localhost:35729/livereload.js?snipver=1"></script>

<!-- Custom host and timing -->
<script src="https://example.com/livereload.js?host=localhost&port=3000&mindelay=2000&maxdelay=120000"></script>

<!-- Plugin order configuration -->
<script src="http://localhost:35729/livereload.js?pluginOrder=css,img,external"></script>

Connection Options

Configure the connection to the LiveReload server.

interface ConnectionOptions {
  /** LiveReload server hostname (required if using LiveReloadOptions) */
  host: string;
  
  /** Server port number or empty string to inherit from page */
  port: number | string;
  
  /** Use HTTPS/WSS connection instead of HTTP/WS */
  https: boolean;
  
  /** Server path for WebSocket connection (default: 'livereload') */
  path: string;
  
  /** Extension name for protocol handshake (optional) */
  ext: string;
  
  /** Extension version for protocol handshake (optional) */
  extver: string;
  
  /** Snippet version for compatibility checking (optional) */
  snipver: string;
}

Usage Examples:

// Standard local development
window.LiveReloadOptions = {
    host: 'localhost',
    port: 35729
};

// Custom server setup
window.LiveReloadOptions = {
    host: 'dev.mycompany.com',
    port: 8080,
    https: true,
    path: 'custom-livereload'
};

// Inherit port from current page (useful with proxies)
window.LiveReloadOptions = {
    host: location.hostname,
    port: ''  // Empty string inherits port
};

Timing Options

Configure reconnection timing and timeout behavior.

interface TimingOptions {
  /** Minimum delay between reconnection attempts in milliseconds (default: 1000) */
  mindelay: number;
  
  /** Maximum delay between reconnection attempts in milliseconds (default: 60000) */
  maxdelay: number;
  
  /** Timeout for protocol handshake completion in milliseconds (default: 5000) */
  handshake_timeout: number;
}

Usage Examples:

// Fast reconnection for stable networks
window.LiveReloadOptions = {
    mindelay: 500,
    maxdelay: 10000,
    handshake_timeout: 2000
};

// Conservative timing for unstable networks
window.LiveReloadOptions = {
    mindelay: 5000,
    maxdelay: 300000,  // 5 minutes
    handshake_timeout: 15000
};

Behavior Options

Configure how LiveReload handles different types of reloading operations.

interface BehaviorOptions {
  /** Reload Chrome extension runtime instead of page (default: false) */
  isChromeExtension: boolean;
  
  /** Prevent CSS reload when changed stylesheet isn't found (default: true) */
  reloadMissingCSS: boolean;
  
  /** Override default plugin execution order */
  pluginOrder: string[];
}

Usage Examples:

// Chrome extension development
window.LiveReloadOptions = {
    isChromeExtension: true
};

// Strict CSS reloading - only reload if stylesheet is found
window.LiveReloadOptions = {
    reloadMissingCSS: false
};

// Custom plugin execution order
window.LiveReloadOptions = {
    pluginOrder: ['css', 'img']  // Only CSS and image reloading
};

Plugin Order Configuration

Control the order and selection of reload strategies.

/**
 * Plugin order values:
 * - 'external': Run all external plugins in default order
 * - 'css': Live CSS reloading without page refresh
 * - 'img': Live image reloading
 * - 'extension': Chrome extension runtime reloading  
 * - 'others': Full page reload fallback
 * - Custom plugin identifiers: Run specific plugins by ID
 */
type PluginOrderValue = 'external' | 'css' | 'img' | 'extension' | 'others' | string;

Usage Examples:

// Only CSS and image reloading, no page refresh
window.LiveReloadOptions = {
    pluginOrder: ['css', 'img']
};

// CSS first, then external plugins, then fallback
window.LiveReloadOptions = {
    pluginOrder: ['css', 'external', 'others']
};

// Specific plugin order with custom plugins
window.LiveReloadOptions = {
    pluginOrder: ['less', 'css', 'my-custom', 'img']
};

Debug Configuration

Enable verbose logging for debugging LiveReload behavior.

<!-- Enable verbose logging via URL parameter -->
<script src="http://localhost:35729/livereload.js?LR-verbose"></script>

Usage Examples:

<!-- Debug mode with configuration -->
<script src="http://localhost:35729/livereload.js?host=localhost&port=3000&LR-verbose"></script>

<!-- Debug mode with snippet version -->
<script src="http://localhost:35729/livereload.js?snipver=1&LR-verbose"></script>

Browserify Configuration

Special configuration when using LiveReload with Browserify.

/**
 * Required configuration for Browserify usage
 * Must specify host since script tag cannot be auto-detected
 */
window.LiveReloadOptions = { host: 'localhost' };
require('livereload-js');

Usage Examples:

// Basic Browserify setup
window.LiveReloadOptions = { host: 'localhost' };
require('livereload-js');

// Advanced Browserify configuration
window.LiveReloadOptions = {
    host: 'localhost',
    port: 3000,
    mindelay: 1000,
    pluginOrder: ['css', 'external', 'others']
};
require('livereload-js');