https://github.com/tanc/vite-plugin-sfc-reload

A very specific plugin for Vite which watches Drupal SFC files for changes and reloads on template updates
https://github.com/tanc/vite-plugin-sfc-reload

Last synced: 13 days ago
JSON representation

A very specific plugin for Vite which watches Drupal SFC files for changes and reloads on template updates

• Host: GitHub
• URL: https://github.com/tanc/vite-plugin-sfc-reload
• Owner: tanc
• License: mit
• Created: 2021-03-28T17:19:49.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-29T09:04:05.000Z (almost 4 years ago)
• Last Synced: 2024-11-15T03:12:28.637Z (3 months ago)
• Language: JavaScript
• Size: 73.2 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
vite-plugin-sfc-reload


Automatically reload the page when template sections of Drupal SFC files are modified




  

    

  

  

    

  






Based on the vite-plugin-full-reload plugin and adapted for use with SFC Drupal files:

[vite-plugin-full-reload](https://github.com/ElMassimo/vite-plugin-full-reload)

## Why?

When developing a Drupal theme based on Single File Components it can be very useful to have both Hot Module Reloads of the CSS files as well as full page reloads if the `` section changes. This plugin will watch the SFC files for changes and POST the changed component name to the `sfc/compile` callback which in turn will report back which section of the file was updated. Then the plugin decides whether the HMR is sufficient (it does nothing as HMR is already take care of) or if it should trigger a full page refresh which is needed to display template changes.

## Installation 💿

Install the package as a development dependency:

```bash

npm i -D vite-plugin-sfc-reload # yarn add -D vite-plugin-sfc-reload

```

## Usage 🚀

Add it to your plugins in `vite.config.ts`

```ts

import { defineConfig } from 'vite'

import SfcReload from 'vite-plugin-sfc-reload'

export default defineConfig({

  plugins: [

    SfcReload(['components/**/*.sfc'], {

      domain: 'http://yourlocaldomain.dev',

    }),

  ],

})

```

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:

- domain

  The local development domain where the sfc_dev module is installed and responding on `/sfc/compile`

  **Default:** `http://localhost`

- root

  Files will be resolved against this directory.

  **Default:** `process.cwd()`

  ```js

  SfcReload('components/**/*.sfc', { 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

  SfcReload('components/**/*.sfc', { delay: 100 })

  ```

- always

  Whether to refresh the page even if the modified HTML file is not currently being displayed.

  **Default:** `true`

  ```js

  SfcReload('components/**/*.sfc', { always: false })

  ```

## Acknowledgements

- [vite-plugin-full-reload](https://github.com/ElMassimo/vite-plugin-full-reload)

  The original plugin this is **heavily** based on (forked off of), thank you!

## License

This library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).