tessl/npm-livereload-js
LiveReload JavaScript client that enables automatic browser refreshing and live CSS reloading during development
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-livereload-js@4.0.00
# LiveReload.js
1
2
LiveReload.js is a JavaScript client library that implements the LiveReload protocol for browser-based development tools. It enables automatic browser refreshing and live CSS reloading without page refresh when files are modified during development. The library connects to LiveReload servers via WebSocket connections and provides intelligent reloading strategies for different file types.
3
4
## Package Information
5
6
- **Package Name**: livereload-js
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install livereload-js`
10
11
## Core Imports
12
13
For browser usage (typical):
14
15
```html
16
<script src="http://localhost:35729/livereload.js"></script>
17
```
18
19
For Browserify usage:
20
21
```javascript
22
window.LiveReloadOptions = { host: 'localhost' };
23
require('livereload-js');
24
```
25
26
## Basic Usage
27
28
```html
29
<!DOCTYPE html>
30
<html>
31
<head>
32
<title>Development Page</title>
33
<link rel="stylesheet" href="styles.css">
34
</head>
35
<body>
36
<h1>Hello LiveReload</h1>
37
38
<!-- LiveReload script - automatically connects to server -->
39
<script src="http://localhost:35729/livereload.js"></script>
40
41
<!-- Alternative: dynamic host detection -->
42
<script>
43
document.write('<script src="http://'
44
+ (location.host || 'localhost').split(':')[0]
45
+ ':35729/livereload.js?snipver=1"></'
46
+ 'script>');
47
</script>
48
</body>
49
</html>
50
```
51
52
## Architecture
53
54
LiveReload.js is built around several key components:
55
56
- **LiveReload Client**: Main client class that coordinates all operations and exposes the public API
57
- **WebSocket Connector**: Manages connection, reconnection, and protocol communication with LiveReload servers
58
- **File Reloaders**: Specialized handlers for different file types (CSS, images, JavaScript)
59
- **Plugin System**: Extensible architecture for handling custom file types and processing
60
- **Event System**: DOM events and callbacks for integration with other tools
61
- **Options Management**: Configuration system supporting both global options and URL parameters
62
63
## Capabilities
64
65
### Client API
66
67
Core LiveReload client functionality including connection management, event handling, and plugin registration.
68
69
```javascript { .api }
70
// Global LiveReload instance
71
const LiveReload = window.LiveReload;
72
73
// Event handling
74
LiveReload.on(eventName, handler);
75
LiveReload.shutDown();
76
77
// Plugin management
78
LiveReload.addPlugin(PluginClass);
79
LiveReload.hasPlugin(identifier);
80
81
// Analysis and logging
82
LiveReload.analyze();
83
LiveReload.log(message);
84
```
85
86
[Client API](./client-api.md)
87
88
### Configuration Options
89
90
Configuration system for customizing LiveReload behavior, connection settings, and reloading strategies.
91
92
```javascript { .api }
93
// Global configuration object
94
window.LiveReloadOptions = {
95
host: string,
96
port: number | string,
97
https: boolean,
98
mindelay: number,
99
maxdelay: number,
100
pluginOrder: string[]
101
};
102
```
103
104
[Configuration](./configuration.md)
105
106
### DOM Events
107
108
DOM event system for communicating with LiveReload and integrating with other development tools.
109
110
```javascript { .api }
111
// Listen for connection events
112
document.addEventListener('LiveReloadConnect', handler);
113
document.addEventListener('LiveReloadDisconnect', handler);
114
115
// Trigger shutdown
116
const event = document.createEvent('HTMLEvents');
117
event.initEvent('LiveReloadShutDown', true, true);
118
document.dispatchEvent(event);
119
```
120
121
[DOM Events](./dom-events.md)
122
123
### Plugin Development
124
125
Plugin system for extending LiveReload to handle custom file types and processing workflows.
126
127
```javascript { .api }
128
class CustomPlugin {
129
static identifier = 'custom';
130
static version = '1.0';
131
132
constructor(window, host) {}
133
reload(path, options) {}
134
analyze() {}
135
}
136
```
137
138
[Plugin Development](./plugin-development.md)
139
140
## Types
141
142
```javascript { .api }
143
interface LiveReloadOptions {
144
host?: string;
145
port?: number | string;
146
https?: boolean;
147
path?: string;
148
mindelay?: number;
149
maxdelay?: number;
150
handshake_timeout?: number;
151
isChromeExtension?: boolean;
152
reloadMissingCSS?: boolean;
153
pluginOrder?: string[];
154
ext?: string;
155
extver?: string;
156
snipver?: string;
157
}
158
159
interface ReloadOptions {
160
liveCSS?: boolean;
161
liveImg?: boolean;
162
reloadMissingCSS?: boolean;
163
originalPath?: string;
164
overrideURL?: string;
165
serverURL?: string;
166
pluginOrder?: string[];
167
isChromeExtension?: boolean;
168
}
169
170
interface PluginHost {
171
console: {
172
log(message: string): void;
173
error(message: string): void;
174
};
175
Timer: typeof Timer;
176
generateCacheBustUrl(url: string): string;
177
_livereload: LiveReload;
178
_reloader: any;
179
_connector: any;
180
}
181
```