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

DOM Events

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

DOM event system for communicating with LiveReload and integrating with other development tools. LiveReload fires custom DOM events for connection state changes and listens for shutdown commands via DOM events.

Capabilities

Connection Events

LiveReload fires DOM events on the document when connection state changes occur.

/**
 * Fired when LiveReload establishes connection to server
 * Event target: document
 * Event type: 'LiveReloadConnect' 
 */
document.addEventListener('LiveReloadConnect', handler);

/**
 * Fired when LiveReload loses connection to server  
 * Event target: document
 * Event type: 'LiveReloadDisconnect'
 */
document.addEventListener('LiveReloadDisconnect', handler);

Usage Examples:

// Show connection status indicator
document.addEventListener('LiveReloadConnect', () => {
    const indicator = document.getElementById('livereload-status');
    if (indicator) {
        indicator.textContent = 'Connected';
        indicator.className = 'status-connected';
    }
    console.log('LiveReload connected to server');
});

document.addEventListener('LiveReloadDisconnect', () => {
    const indicator = document.getElementById('livereload-status');
    if (indicator) {
        indicator.textContent = 'Disconnected';
        indicator.className = 'status-disconnected';
    }
    console.log('LiveReload disconnected from server');
});

Shutdown Command

Send a shutdown command to LiveReload by firing a custom DOM event.

/**
 * Command LiveReload to shut down by firing a DOM event
 * Event target: document
 * Event type: 'LiveReloadShutDown'
 */
const shutdownEvent = document.createEvent('HTMLEvents');
shutdownEvent.initEvent('LiveReloadShutDown', true, true);
document.dispatchEvent(shutdownEvent);

Usage Examples:

// Shut down LiveReload with a button click
document.getElementById('disable-livereload').addEventListener('click', () => {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('LiveReloadShutDown', true, true);
    document.dispatchEvent(event);
    
    console.log('LiveReload shutdown requested');
});

// Conditional shutdown based on page state
function disableInProduction() {
    if (window.location.hostname.includes('production')) {
        const event = document.createEvent('HTMLEvents');
        event.initEvent('LiveReloadShutDown', true, true);
        document.dispatchEvent(event);
    }
}

Event Utilities

Cross-browser utilities for working with custom DOM events, used internally by LiveReload.

/**
 * Cross-browser event binding utility
 * @param element - DOM element to bind event to
 * @param eventName - Name of the event
 * @param handler - Event handler function
 */
function bind(element, eventName, handler);

/**
 * Cross-browser event firing utility  
 * @param element - DOM element to fire event on
 * @param eventName - Name of the event to fire
 */
function fire(element, eventName);

Usage Examples:

// These utilities are used internally by LiveReload
// They handle cross-browser compatibility for custom events

// Example of internal usage (not typically needed in user code):
// LiveReload uses these internally for:
// bind(document, 'LiveReloadShutDown', shutdownHandler);
// fire(document, 'LiveReloadConnect');

Integration Patterns

Common patterns for integrating LiveReload events with development tools and frameworks.

Usage Examples:

// React component that shows LiveReload status
class LiveReloadStatus extends React.Component {
    constructor(props) {
        super(props);
        this.state = { connected: false };
    }
    
    componentDidMount() {
        document.addEventListener('LiveReloadConnect', () => {
            this.setState({ connected: true });
        });
        
        document.addEventListener('LiveReloadDisconnect', () => {
            this.setState({ connected: false });
        });
    }
    
    render() {
        return (
            <div className={`status ${this.state.connected ? 'connected' : 'disconnected'}`}>
                LiveReload: {this.state.connected ? 'Connected' : 'Disconnected'}
            </div>
        );
    }
}

// Vue.js integration
new Vue({
    el: '#livereload-status',
    data: {
        connected: false
    },
    mounted() {
        document.addEventListener('LiveReloadConnect', () => {
            this.connected = true;
        });
        
        document.addEventListener('LiveReloadDisconnect', () => {
            this.connected = false;
        });
    },
    template: `
        <div :class="['status', connected ? 'connected' : 'disconnected']">
            LiveReload: {{ connected ? 'Connected' : 'Disconnected' }}
        </div>
    `
});

// jQuery integration
$(document).on('LiveReloadConnect', function() {
    $('#livereload-indicator').addClass('connected').removeClass('disconnected');
    console.log('LiveReload connected');
});

$(document).on('LiveReloadDisconnect', function() {
    $('#livereload-indicator').addClass('disconnected').removeClass('connected');
    console.log('LiveReload disconnected');
});

// Development toolbar integration
class DevToolbar {
    constructor() {
        this.setupLiveReloadIntegration();
    }
    
    setupLiveReloadIntegration() {
        document.addEventListener('LiveReloadConnect', () => {
            this.updateStatus('livereload', 'connected');
        });
        
        document.addEventListener('LiveReloadDisconnect', () => {
            this.updateStatus('livereload', 'disconnected');
        });
        
        // Add toggle button
        this.addButton('Toggle LiveReload', () => {
            if (window.LiveReload) {
                const event = document.createEvent('HTMLEvents');
                event.initEvent('LiveReloadShutDown', true, true);
                document.dispatchEvent(event);
            }
        });
    }
}

Event Timing

Understanding when LiveReload events are fired in relation to other page events.

Event Sequence:

LiveReload script loads and initializes
Connection attempt begins
LiveReloadConnect event fires when connection succeeds
During development, file changes trigger reloads
LiveReloadDisconnect event fires if connection is lost
Automatic reconnection attempts occur
LiveReloadConnect fires again when reconnected

Usage Examples:

// Track connection uptime
let connectionStartTime = null;

document.addEventListener('LiveReloadConnect', () => {
    connectionStartTime = Date.now();
    console.log('LiveReload connection established');
});

document.addEventListener('LiveReloadDisconnect', () => {
    if (connectionStartTime) {
        const uptime = Date.now() - connectionStartTime;
        console.log(`LiveReload was connected for ${uptime}ms`);
        connectionStartTime = null;
    }
});

// Delay other operations until LiveReload is ready
function waitForLiveReload() {
    return new Promise((resolve) => {
        if (window.LiveReload) {
            // Already loaded, check if connected
            document.addEventListener('LiveReloadConnect', resolve, { once: true });
        } else {
            // Wait for script to load
            const checkInterval = setInterval(() => {
                if (window.LiveReload) {
                    clearInterval(checkInterval);
                    document.addEventListener('LiveReloadConnect', resolve, { once: true });
                }
            }, 100);
        }
    });
}

// Usage
waitForLiveReload().then(() => {
    console.log('LiveReload is ready and connected');
    // Initialize development-specific features
});