Skip to content

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

License

Notifications You must be signed in to change notification settings

tanc/vite-plugin-sfc-reload

Repository files navigation

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

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 <template> 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:

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

Usage 🚀

Add it to your plugins in vite.config.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()

    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

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

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

    Default: true

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

Acknowledgements

License

This library is available as open source under the terms of the MIT License.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published