# reloader-injector

> Insert a to reload the current page or its styles into an HTML

Latest version **0.2.0** (published 2019-02-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install reloader-injector
pnpm add reloader-injector
yarn add reloader-injector
bun add reloader-injector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-02-10 |
| First published | 2018-12-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Shinnosuke Watanabe |
| Maintainers | shinnn |
| Keywords | inject, injector, injection, insert, insertion, html, reload, refresh, livereload, live-reload, client, reloader, server-sent-events, sse, event, style, development, server |

## Links

- npm: https://www.npmjs.com/package/reloader-injector
- Repository: https://github.com/shinnn/reloader-injector
- Homepage: https://github.com/shinnn/reloader-injector#readme
- Issues: https://github.com/shinnn/reloader-injector/issues
- npm.io page: https://npm.io/package/reloader-injector

## Dependencies (4)

- [is-plain-obj](https://npm.io/package/is-plain-obj.md) ^1.1.0
- [reloader-client](https://npm.io/package/reloader-client.md) ^0.1.0
- [inspect-with-kind](https://npm.io/package/inspect-with-kind.md) ^1.0.5
- [insert-html-content](https://npm.io/package/insert-html-content.md) ^1.0.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2019-02-10
- 0.1.0 — 2019-02-10
- 0.0.0 — 2018-12-01

## README

# reloader-injector

[![npm version](https://img.shields.io/npm/v/reloader-injector.svg)](https://www.npmjs.com/package/reloader-injector)
[![Build Status](https://travis-ci.com/shinnn/reloader-injector.svg?branch=master)](https://travis-ci.com/shinnn/reloader-injector)
[![Build status](https://ci.appveyor.com/api/projects/status/g5wgg0nx4pyifim3/branch/master?svg=true)](https://ci.appveyor.com/project/ShinnosukeWatanabe/reloader-injector/branch/master)
[![codecov](https://codecov.io/gh/shinnn/reloader-injector/branch/master/graph/badge.svg)](https://codecov.io/gh/shinnn/reloader-injector)

A [Node.js](https://nodejs.org/) 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`](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

---
_Source: https://npm.io/package/reloader-injector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._