Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ElMassimo/vite-plugin-full-reload
♻️ Automatically reload the page when files are modified
https://github.com/ElMassimo/vite-plugin-full-reload
file-watcher full-reload livereload vite-plugin vitejs
Last synced: about 2 months ago
JSON representation
♻️ Automatically reload the page when files are modified
- Host: GitHub
- URL: https://github.com/ElMassimo/vite-plugin-full-reload
- Owner: ElMassimo
- License: mit
- Created: 2021-03-16T23:44:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-08T23:16:03.000Z (2 months ago)
- Last Synced: 2024-07-09T03:42:11.506Z (2 months ago)
- Topics: file-watcher, full-reload, livereload, vite-plugin, vitejs
- Language: JavaScript
- Homepage:
- Size: 259 KB
- Stars: 127
- Watchers: 3
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-full-reload - Reload the browser on file changes. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-full-reload - Reload the browser on file changes. (Plugins / Framework-agnostic Plugins)
README
vite-plugin-full-reload
Automatically reload the page when files are modified
[vite-plugin-full-reload]: https://github.com/ElMassimo/vite-plugin-full-reload
[vite-plugin-live-reload]: https://github.com/arnoson/vite-plugin-live-reload
[Vite Ruby]: https://github.com/ElMassimo/vite_ruby
[JS From Routes]: https://github.com/ElMassimo/js_from_routes
[picomatch]: https://github.com/micromatch/picomatch#globbing-features
## Why? 🤔
When using _[Vite Ruby]_, I wanted to see changes to server-rendered layouts and templates without having to manually reload the page.
Also, in _[JS From Routes]_ path helpers are generated when Rails reload is triggered.
Triggering a page reload when `config/routes.rb` is modified makes the DX very smooth.
## Installation 💿
Install the package as a development dependency:
```bash
npm i -D vite-plugin-full-reload # yarn add -D vite-plugin-full-reload
```
## Usage 🚀
Add it to your plugins in `vite.config.ts`
```ts
import { defineConfig } from 'vite'
import FullReload from 'vite-plugin-full-reload'
export default defineConfig({
plugins: [
FullReload(['config/routes.rb', 'app/views/**/*'])
],
})
```
This is useful to trigger a page refresh for files that are not being imported, such as server-rendered templates.
To see which file globbing options are available, check [picomatch].
## Configuration ⚙️
The following options can be provided:
- root
Files will be resolved against this directory.
__Default:__ `process.cwd()`
``` js
FullReload('config/routes.rb', { root: __dirname }),
```
- delay
How many milliseconds to wait before reloading the page after a file change.
It can be used to offset slow template compilation in Rails.
__Default:__ `0`
```js
FullReload('app/views/**/*', { delay: 100 })
```
- always
Whether to refresh the page even if the modified HTML file is not currently being displayed.
__Default:__ `true`
```js
FullReload('app/views/**/*', { always: false })
```
## Acknowledgements
- [vite-plugin-live-reload]
This is a nice plugin, I found it right before publishing this one.
I've made [two](https://github.com/arnoson/vite-plugin-live-reload/pull/3) [PRs](https://github.com/arnoson/vite-plugin-live-reload/pull/5) that were needed to support these use cases.
At this point in time they are very similar, except this library doesn't create another `chokidar` watcher.
## License
This library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).