# reloader-client

> Generate a script to reload the current page or its styles in response to server-sent events

Latest version **0.1.0** (published 2019-01-11) · ISC license · 0 weekly downloads

## Install

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

## 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.1.0 |
| Published | 2019-01-11 |
| First published | 2018-11-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shinnosuke Watanabe |
| Maintainers | shinnn |
| Keywords | reload, reloader, refresh, client, source, server-sent-events, sse, event, style, development, server |

## Links

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

## Dependencies (2)

- [inspect-with-kind](https://npm.io/package/inspect-with-kind.md) ^1.0.5
- [event-source-polyfill](https://npm.io/package/event-source-polyfill.md) ^1.0.5

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-01-11
- 0.0.5 — 2018-12-01
- 0.0.4 — 2018-11-24
- 0.0.3 — 2018-11-20
- 0.0.2 — 2018-11-19
- 0.0.1 — 2018-11-19
- 0.0.0 — 2018-11-19

## README

# reloader-client

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

A [Node.js](https://nodejs.org/) module to generate a script to reload the current page or its styles in response to [server-sent events](https://developer.mozilla.org/docs/Web/API/Server-sent_events)

## Installation

[Use](https://docs.npmjs.com/cli/install) [npm](https://docs.npmjs.com/about-npm/).

```
npm install --save-dev reloader-client
```

## API

```javascript
const reloaderClient = require('reloader-client');
```

### reloaderClient(*url*)

*url*: `string` `URL` (an absolute or relative URL)  
Return: `string`

It returns a client-side JavaScript code that does the followings:

1. [Open a connection](https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource) to the server at a given `url` to receive [events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Event_stream_format) from it.
2. When the script receives an event from the server,
  * Reload the current page if the event `data` equals to [`DOCUMENT_RELOAD_SIGNAL`][drs].
  * Reload stylesheets without reloading the current page if the event `data` equals to [`CSS_RELOAD_SIGNAL`][crs].

### reloaderClient.legacy(*url*)

*url*: `string` `URL`  
Return: `string`

It essentially does the same thing as `reloaderClient()` does, but returns a script that is compatible with [Edge](https://microsoft.com/microsoft-edge) and [Internet Explorer](https://support.microsoft.com/hub/4230784/internet-explorer-help), neither of whom supports [`EventSource` API](https://developer.mozilla.org/en-US/docs/Web/API/EventSource).

### reloaderClient.DOCUMENT_RELOAD_SIGNAL

Type: `string`

### reloaderClient.CSS_RELOAD_SIGNAL

Type: `string`

## Usage

__1.__ Generate a script with `reloaderClient()` (or with `reloaderClient.legacy()` for Microsoft browsers).

```
$ node -p "require('reloader-client')('/sse-url')"
> const KEY = 'reloader-client-last-reload-event-id' ...
```

__2.__ Include a generated script to an HTML and serve it in a server.

```html
<head>
  <script>/* ... paste the generated code here ... */</script>
</head>
```

__3.__ Whenever a reload should be performed, [send an event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Sending_events_from_the_server) to the client in the following form:

```
id: <any>
data: <reloaderClient.DOCUMENT_RELOAD_SIGNAL|reloaderClient.CSS_RELOAD_SIGNAL>
```

* `data` must equal to either [`reloaderClient.DOCUMENT_RELOAD_SIGNAL`][drs] or [`reloaderClient.CSS_RELOAD_SIGNAL`][crs].
* `id` must be different from the previous event's.

## License

[ISC License](./LICENSE) © 2019 Shinnosuke Watanabe

[drs]: #reloaderclientdocument_reload_signal
[crs]: #reloaderclientcss_reload_signal

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