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

Client API

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

Core LiveReload client functionality including connection management, event handling, and plugin registration. The LiveReload client is automatically instantiated when the script loads and provides the main interface for interacting with the LiveReload system.

Capabilities

Global LiveReload Instance

The main LiveReload client instance is automatically created and exposed globally when the script loads.

/**
 * Global LiveReload client instance
 * Available as window.LiveReload after script loads
 */
const LiveReload = window.LiveReload;

Usage Examples:

// Check if LiveReload is available
if (window.LiveReload) {
    console.log('LiveReload is active');
    
    // Register event handlers
    LiveReload.on('connect', () => {
        console.log('Connected to LiveReload server');
    });
}

Event Registration

/**
 * Register an event handler for LiveReload events
 * @param eventName - Event name: 'connect', 'disconnect', or 'shutdown'
 * @param handler - Function to call when event occurs
 */
LiveReload.on(eventName, handler);

Supported Events:

'connect': Fired when connection to LiveReload server is established
'disconnect': Fired when connection to LiveReload server is lost
'shutdown': Fired when LiveReload is shutting down

Usage Examples:

// Connection established
LiveReload.on('connect', () => {
    console.log('LiveReload connected');
    showStatusIndicator('connected');
});

// Connection lost
LiveReload.on('disconnect', () => {
    console.log('LiveReload disconnected');
    showStatusIndicator('disconnected');
});

// LiveReload shutting down
LiveReload.on('shutdown', () => {
    console.log('LiveReload shut down');
    cleanupResources();
});

Manual Shutdown

Manually disconnect from the LiveReload server and shut down the client.

/**
 * Disconnect from LiveReload server and shut down the client
 * Triggers the 'shutdown' event and cleans up resources
 */
LiveReload.shutDown();

Usage Examples:

// Shut down LiveReload when user clicks button
document.getElementById('disable-livereload').addEventListener('click', () => {
    LiveReload.shutDown();
    console.log('LiveReload disabled by user');
});

// Conditional shutdown based on environment
if (window.location.hostname === 'production.example.com') {
    LiveReload.shutDown();
}

Plugin Management

/**
 * Register a plugin class with the LiveReload client
 * @param PluginClass - Plugin constructor function with static identifier and version
 */
LiveReload.addPlugin(PluginClass);

/**
 * Check if a plugin with the given identifier is registered
 * @param identifier - Plugin identifier string
 * @returns True if plugin is registered, false otherwise
 */
LiveReload.hasPlugin(identifier);

Usage Examples:

// Check if LESS plugin is available
if (LiveReload.hasPlugin('less')) {
    console.log('LESS plugin is active');
}

// Register a custom plugin
class MyCustomPlugin {
    static identifier = 'my-custom';
    static version = '1.0.0';
    
    constructor(window, host) {
        this.window = window;
        this.host = host;
    }
    
    reload(path, options) {
        if (path.endsWith('.custom')) {
            // Handle custom file reloading
            this.host.console.log('Reloading custom file:', path);
            return true;
        }
        return false;
    }
}

LiveReload.addPlugin(MyCustomPlugin);

Console Logging

LiveReload provides console logging that respects debug settings.

/**
 * Log a message through LiveReload's console system
 * Respects LR-verbose URL parameter for debug output
 * @param message - Message to log
 */
LiveReload.log(message);

Usage Examples:

// Log custom messages
LiveReload.log('Custom reload operation completed');

// Debug information (only shown with ?LR-verbose)
if (window.location.href.includes('LR-verbose')) {
    LiveReload.log('Debug: Processing file changes');
}

Plugin Analysis

Trigger analysis of all registered plugins and send information to the LiveReload server.

/**
 * Analyze all registered plugins and send data to server
 * Automatically called when connection is established
 * Only works with protocol version 7 or higher
 */
LiveReload.analyze();

Usage Examples:

// Manually trigger analysis (usually not needed)
if (LiveReload && typeof LiveReload.analyze === 'function') {
    LiveReload.analyze();
    console.log('Plugin analysis sent to server');
}

// Check if analysis is supported (protocol version 7+)
LiveReload.on('connect', () => {
    if (LiveReload._connector && LiveReload._connector.protocol >= 7) {
        console.log('Plugin analysis supported');
    }
});