DocsToolsVite - Watch and Run

šŸ‘€ How to - vite-plugin-watch-and-run

šŸ’”

KitQL itself is not a library, itā€™s ā€œnothingā€ but a collection of standalone libraries.

Adding watch mode to any command / Tool!

Installation

npm i -D vite-plugin-watch-and-run

Configuration

Add watchAndRun plugin with the following configuration:

  • watch: a glob pattern to watch for changes. This will be matched against the absolute path for altered files.
  • run: a command to trigger when a file change is detected (You can be very creative šŸ„³!)
vite.config.js
import path from 'path'
import { watchAndRun } from 'vite-plugin-watch-and-run'
 
/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    watchAndRun([
      {
        name: 'gen',
        watchKind: ['add', 'change', 'unlink'],
        watch: path.resolve('src/**/*.(gql|svelte)'),
        run: 'npm run gen',
        delay: 300
      }
    ])
  ]
}
 
export default config

Side Notes

  • Full list of watchKind can be found here: https://github.com/paulmillr/chokidar#api

  • delay is good in case you have 200 files added realy fast! Like this the cmd is executed only once.

  • For the run command we recommend to use npm run xxx as it will work for npm, yarn and pnpm šŸ™ƒ