# rollup-plugin-reloadsite

> A rollup plugin that adds HMR support via ReloadSite

Latest version **1.0.4** (published 2024-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-reloadsite
pnpm add rollup-plugin-reloadsite
yarn add rollup-plugin-reloadsite
bun add rollup-plugin-reloadsite
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-03-10 |
| First published | 2023-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anthony Mugendi |
| Maintainers | nguru |
| Keywords | rollup, hmr, realtime, live, reloading, css, images |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-reloadsite
- npm.io page: https://npm.io/package/rollup-plugin-reloadsite

## Dependencies (3)

- [picomatch](https://npm.io/package/picomatch.md) ^4.0.1
- [reloadsite](https://npm.io/package/reloadsite.md) ^1.0.9
- [tcp-port-used](https://npm.io/package/tcp-port-used.md) ^1.0.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2024-03-10
- 1.0.3 — 2024-03-10
- 1.0.2 — 2024-01-31
- 1.0.1 — 2023-12-14
- 1.0.0 — 2023-12-13

## README

<!--
 Copyright (c) 2023 Anthony Mugendi

 This software is released under the MIT License.
 https://opensource.org/licenses/MIT
-->

# rollup-plugin-reloadsite

> Rollup HMR plugin that leverages the power ans simplicity of [ReloadSite](https://www.npmjs.com/package/reloadsite) to provide true HMR capability for your development.

## Using rollup-plugin-reloadsite

```javascript
// import
import hmr from 'rollup-plugin-reloadsite';

module.exports = {
  // add to your plugins array
  plugins: [
    hmr({
      // directories to watch
      dirs: ['./public'],

      //Filtering helps determine the main bundle-file within which the hmr code is added. Otherwise it will be added to all files 
      // This is optional but highly recommended
      // Default is null
      filter: '**/main.js',

      //  the port that ReloadSite uses
      // defaults tp 35729
      port: 35729,

      // How long the server should wait before triggering hot reload
      // This is important when you want to be sure that changes are fully written
      // defaults to 1000
      delay: 1000

    }),
  ],
};
```

## How it works

1. The plugin uses the `process.env.ROLLUP_WATCH` to ensure it only runs and adds HMR only on developer mode. Once you get to production, this plugin should silently remove itself from your code.

2. The plugin uses [tcp-port-used](https://www.npmjs.com/package/tcp-port-used) to create only one `ReloadSite` server instance using the `port` provided in the options.

3. Then the plugin appends special javascript ([Check The Code](./src/plugin-append-script.js) ) to the files that rollup outputs. This code then appends a script tag that connects to the ReloadSite server created.
    - If you output multiple files, then this code may be repeated in each file but the `if condition` guards it to run only once.
    - This is precisely why the `filter` option exists and why you should use it to limit the HMR code to only one file or a few files as you see fit. For example, if your [rollup](https://www.npmjs.com/package/rollup) is configured to build different js files for each page, you might want to let the HMR code to be on every page. It is all up to you! Please note that `filtering` uses [picomatch](https://github.com/micromatch/picomatch) [`isMatch`](https://github.com/micromatch/picomatch#ismatch) function and thus you can pass a string or array of patterns.

4. Once the code in the directories you entered changes, then your application will `hot reload`. ReloadSite supports HMR as follows:
    - Images and styles are reloaded without refreshing the page by appending a timestamp to the url. Example `?ts=254653476`.
    - Javascript files and other code-based files will cause the page to reload. Please see [RealoadSite Extensions](https://github.com/mugendi/reloadsite#file-extensions)



**Enjoy!**

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