Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shinnn/reloader-injector
Insert a <script> to reload the current page or its styles into an HTML
https://github.com/shinnn/reloader-injector
autoreload javascript livereload nodejs reload
Last synced: 27 days ago
JSON representation
Insert a <script> to reload the current page or its styles into an HTML
- Host: GitHub
- URL: https://github.com/shinnn/reloader-injector
- Owner: shinnn
- License: isc
- Created: 2019-02-10T09:18:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-10T12:39:30.000Z (almost 6 years ago)
- Last Synced: 2024-09-18T06:51:21.732Z (about 2 months ago)
- Topics: autoreload, javascript, livereload, nodejs, reload
- Language: JavaScript
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reloader-injector
[](https://www.npmjs.com/package/reloader-injector)
[](https://travis-ci.com/shinnn/reloader-injector)
[](https://ci.appveyor.com/project/ShinnosukeWatanabe/reloader-injector/branch/master)
[](https://codecov.io/gh/shinnn/reloader-injector)
A [Node.js](https://nodejs.org/) module to insert a `` 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`](https://github.com/shinnn/content-reloader).*
## Installation
[Use](https://docs.npmjs.com/cli/install) [npm](https://docs.npmjs.com/about-npm/).
```
npm install --save-dev reloader-injector
```
## API
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource) 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`](https://nodejs.org/api/http.html#http_class_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`](#reloaderinjectorclients).
### 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 [`Buffer`](https://nodejs.org/api/buffer.html#buffer_class_buffer)s: the first value is a JavaScript code generated by [the main function](https://github.com/shinnn/reloader-client#reloaderclienturl) of [`reloader-client`](https://github.com/shinnn/reloader-client), and the second one is a JavaScript code generated by the [`.legacy()`](https://github.com/shinnn/reloader-client#reloaderclientlegacyurl) method of `reloader-client`.
### reloaderInjector.path
Type: `string`
A [pathname](https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname) of the URL corresponding to the `url` option.
```javascript
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](https://github.com/shinnn/reloader-client#reloaderclientdocument_reload_signal).
## Usage
__1.__ Inject a `<script>` tag to an HTML `Response` using `.injectScriptTag()` (or `.injectLegacyScriptTag()` for Microsoft browsers).
```javascript
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.
```diff
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](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) to the client in the following form:
```
id: <any>
data: <ReloaderInjector.DOCUMENT_RELOAD_SIGNAL|ReloaderInjector.CSS_RELOAD_SIGNAL>
```
* `data` must equal to either [`ReloaderInjector.DOCUMENT_RELOAD_SIGNAL` or `ReloaderInjector.CSS_RELOAD_SIGNAL`](#reloaderinjectordocument_reload_signal-reloaderinjectorcss_reload_signal).
* `id` must be different from the previous event's.
## License
[ISC LICENSE](./LICENSE) © 2019 Shinnosuke Watanabe