reloader-injector
v0.2.0
Published
Insert a <script> to reload the current page or its styles into an HTML
Downloads
12
Maintainers
shinnnReadme
reloader-injector
A Node.js module to insert a <script> into an HTML, which helps reloading the document or its styles automatically
In most cases there is no need to use this module directly. Developers would rather use a higher-level wrapper content-reloader.
Installation
npm install --save-dev reloader-injectorAPI
const ReloaderInjector = require('reloader-injector');class ReloaderInjector([option])
option: Object
It creates an reloaderInjector instance.
option.url
Type: string URL
Default: '/sse'
A URL at which the client script will open a connection to the server.
This module expects the server to serve no contents other than reloader-injector-related ones under this URL. If the server will respond to requests whose URLs begin with /sse, change the value of this option.
reloaderInjector.injectScriptTag(response)
response: http.ServerResponse
If the media type of the response is text/html, it inserts a <script> tag into the response body as the first child of <body>. The src attribute of the <script> points to the first key of reloaderInjector.clients.
reloaderInjector.injectLegacyScriptTag(response)
response: http.ServerResponse
If the media type of the response is text/html, it inserts a <script> tag into the response body as the first child of <body>. The src attribute of the <script> points to the second key of reloaderInjector.clients.
reloaderInjector.clients
Type: Map<string: Buffer>
This Map contains two Buffers: the first value is a JavaScript code generated by the main function of reloader-client, and the second one is a JavaScript code generated by the .legacy() method of reloader-client.
reloaderInjector.path
Type: string
A pathname of the URL corresponding to the url option.
const reloaderInjector = new ReloaderInjector();
reloaderInjector.clients; /*=> Map {
'/sse-95f0ec37f24542c2547b712a060e43af.js' => <Buffer 63 6f 6e 73 ...>,
'/sse-eb33250679b5d5c862ed2286a2c95e75.js' => <Buffer 2f 2a 2a 20 ...>
} */ReloaderInjector.DOCUMENT_RELOAD_SIGNAL, ReloaderInjector.CSS_RELOAD_SIGNAL
Type: string
The same values as reloader-client's.
Usage
1. Inject a <script> tag to an HTML Response using .injectScriptTag() (or .injectLegacyScriptTag() for Microsoft browsers).
const reloaderInjector = new ReloaderInjector();
const server = createServer(({url}, res) => {
res.setHeader('content-type', 'text/html');
reloaderInjector.injectScriptTag(res);
res.end('<!doctype html><html lang="en"> ... some contents ... </html>');
});2. Serve JavaScript of reloaderInjector.clients using its keys as a pathname of endpoints.
const server = createServer(({url}, res) => {
+ for (const [clientUrl, body] of reloaderInjector.clients) {
+ if (url === clientUrl) {
+ res.writeHead(200, {
+ 'content-type': 'application/javascript',
+ 'content-length': body.length
+ });
+
+ res.end(body);
+ return;
+ }
+ }3. Whenever a reload should be performed, send a server-sent event to the client in the following form:
id: <any>
data: <ReloaderInjector.DOCUMENT_RELOAD_SIGNAL|ReloaderInjector.CSS_RELOAD_SIGNAL>datamust equal to eitherReloaderInjector.DOCUMENT_RELOAD_SIGNALorReloaderInjector.CSS_RELOAD_SIGNAL.idmust be different from the previous event's.
License
ISC LICENSE © 2019 Shinnosuke Watanabe