vite plugin hot reload for static assets and watchChange function clarifications

[pavlexander]

Hello

I am building a vite plugin for vuejs 3 app. The expected flow is following:

1. vite plugin watches for directory app/public/watchir changes and generates a JSON manifest file app/public/docs.json
2. vuejs app reads the JSON manifest file and generates page content based on it

Folder structure (simplified):

app
├── index.html
├── public
│   ├── watchdir
│   │   ├── file1.md
│   │   └── file2.md
│   └── docs.json
├── src
│   ├── main.ts
│   ├── App.vue
│   └── views
│       └── Home.vue
├── vite_plugins
│   ├── generateFilesManifest.ts
│   └── types.ts
├── vite.config.ts
├── tsconfig.json
└── tsconfig.node.json

plugin generateFilesManifest.ts

import {PluginOption} from "vite";

import fs from "fs";
import path from 'path'

import type {GenerateFilesManifestConfigType, MatterOutputType} from './types'
import {ChangeEvent, NormalizedInputOptions} from "rollup";

export default function generateFilesManifest(userConfig: GenerateFilesManifestConfigType): PluginOption {
    let config: GenerateFilesManifestConfigType = userConfig
    let rootDir: string
    let publicDir: string

    function generateManifest() {
        // logic that generates manifest file here
    }

    return {
        name: 'generate-files-manifest',

        configResolved(resolvedConfig) {
            publicDir = resolvedConfig.publicDir
            rootDir = resolvedConfig.root
        },

        buildStart(options: NormalizedInputOptions) {
            generateManifest();
        },

        handleHotUpdate({file, server}) {
            if (file.includes(config.watchDirectory) && file.endsWith('.md')) {
                generateManifest();
            }
        },

        watchChange(id: string, change: { event: ChangeEvent }) {
            console.log('CHANGE')
        }
    }
}

plugin types types.ts

export type GenerateFilesManifestConfigType = {
    watchDirectory: string,
    output: string
}

vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

import fs from "fs";
import path from "path";

import generateFilesManifest from "./vite_plugins/generateFilesManifest";

export default defineConfig({
    plugins: [
        vue(),
        generateFilesManifest({
            watchDirectory: '/public/watchir',
            output: './public/docs.json'
        })
    ],
    resolve: {
        alias: {
            "/@": path.resolve(__dirname, "./src"),
            "/~": path.resolve(__dirname, "./"),
        },
    }
})

Main vuejs page Home.vue

<script lang="ts">
import {onMounted, ref, Ref} from 'vue';
import {MatterOutputType} from "/~/vite_plugins/types";

export default {
  setup() {
    const posts: Ref<MatterOutputType[]> = ref([])

    fetch('docs.json')
        .then(r => r.json())
        .then(json => {
          const docs = json as MatterOutputType[]
          posts.value = docs
        })

    return {
      posts
    }
  }
}
</script>

<template>
  <div>
    <h1>Home</h1>
    <ul><li v-for="post of posts">{{ post.body }}</li></ul>
  </div>
</template>

Issue 1 - hot-reload on static assets change not working

Whenever I update (does not trigger on file creation it seems) any files in watchdir - handleHotUpdate function in plugin is triggered, however, the hot-reload of Home.vue page is not occurring.

I have managed to fix the issue, by, instead of using the fetch API - use the import statement like so:

import docs from '../../public/docs.json';

export default {
  setup() {
    const posts: Ref<MatterOutputType[]> = ref([])

    onMounted(() => {
      const typedPosts = docs as MatterOutputType[]

      posts.value = typedPosts
    })

    return {
      posts
    }
  }
}

However, I cannot use the import always. In some cases I want the content to be loaded dynamically by fetch. So, is it possible to make the hot-reload work with fetch dependencies? Some way to tell vite that if docs.json is changed then reload the page?

Maybe it's possible to invoke some action from vite plugin context to force reload the current served page?

Issue 2 - watchChange is never triggered

In the code sample above you will find a watchChange function, however, whenever I change any of the assets in the project (home.vue or public/watchdir) - I never get to see the watchChange function triggering.

So the question is - how do I use it? I would like it to trigger when app/public/watchir directory content changes. Alternatively, how do I instantiate Chokidar watch from within plugin context? should I do it in configResolved method? And how do I dispose of the instance afterwards?

Any help greatly appreciated.. Thank you

[pavlexander]

Issue 2 was solved with chokidar:

        buildStart(options: NormalizedInputOptions) {
            generateManifest();

            if (command === 'serve') {
                const watchDirFullPath = path.join(rootDir, config.watchDirectory)
                watcher = chokidar.watch(watchDirFullPath,
                    {
                        ignoreInitial: true
                    }
                );

                watcher
                    .on('add', function (path) {
                        //console.log('File', path, 'has been added');
                        generateManifest();
                    })
                    .on('change', function (path) {
                        //console.log('File', path, 'has been changed');
                        generateManifest();
                    })
                    .on('unlink', function (path) {
                        //console.log('File', path, 'has been removed');
                        generateManifest();
                    })
                    .on('error', function (error) {
                        console.error('Error happened', error);
                    })
            }
        },

        buildEnd(err?: Error) {
            watcher?.close();
        },

Issue 1 is still open..

[pavlexander]

stale, no answer.. closing

[jedrichards]

I don't think watchChange is supported in Vite plugins. To make that work you'd have to use it in a Rollup plugin rollupOptions.plugins - and those will only be used during a build, so you'd have to run yarn vite build --watch. Surprisingly as you discovered, I don't think its easy to run code in response to a watch event in vite dev at the moment.

[danielstorey]

Came across this just now. I know the answer is closed, but for anyone else with this issue I solved it by accessing the watcher instance on the dev server e.g.

export default function myPlugin(config) {
  return {
    name: 'my-plugin',
    configureServer(server) {
      function onWatchChange(filepath) {
        // do stuff here...
      }

      server.watcher.on('add', onWatchChange);
      server.watcher.on('unlink', onWatchChange);
    }
  };
}

[dolie]

Thank you !
I am also using 'change' as described here https://github.com/paulmillr/chokidar#api

[btisdall]

Adding a concrete example here - my use case was just to auto reload a regular static css file on a non-React scratchpad project based off the react-ts template:

// vite.config.ts
import { ViteDevServer, defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

function customWatcher(options: { filePaths: string[] } = { filePaths: [] }) {
  return {
    name: 'custom-watcher',
    configureServer(server: ViteDevServer) {
      options.filePaths.forEach((f) => {
        server.watcher.add(f);
      });
      function onWatchChange(_: string) {
        server.hot.send({ type: 'full-reload' });
      }
      server.watcher.on('add', onWatchChange);
      server.watcher.on('unlink', onWatchChange);
      server.watcher.on('change', onWatchChange);
    },
  };
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), customWatcher({ filePaths: ['./public/styles.css'] })],
});

I might be doing something silly/inefficient here but it works perfectly well for the use case.

[amcc]

i'm trying to do exactly this to watch any html file in my public directory, its not working - but looks like it should! The console log shows that i'm getting an array of every file there:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { globSync } from "glob";

// https://github.com/vitejs/vite/discussions/8364

function customWatcher(options) {
  return {
    name: "custom-watcher",
    configureServer(server) {
      options.filePaths.forEach((f) => {
        server.watcher.add(f);
      });
      function onWatchChange() {
        server.hot.send({ type: "full-reload" });
      }
      server.watcher.on("add", onWatchChange);
      server.watcher.on("unlink", onWatchChange);
      server.watcher.on("change", onWatchChange);
    },
  };
}

console.log(globSync("public/**/*.*"));

export default defineConfig({
  plugins: [react(), customWatcher({ filePaths: globSync("public/**/*.*") })],
});

i'm not using typescript so i've made a few edits. Any way to debug this - or any ideas?

[bippan1407]

@amcc replace server.hot.send({ type: 'full-reload' }) with server.ws.send({ type: 'full-reload' })

[amcc]

took a while to test sorry - but tried this and no joy. Doesn't auto reload, a manual reload confirms there has been a change when i tested. I tried changing the path to /public/**/. as well. Perhaps something else is up, not sure how to debug - the console.log confirms i'm getting the necessary files.

I did find an easy workaround:
I have a root url that i'm using for all my demos in the public folder - so i'm switching this url depending on whether i'm in development:

export const urlPrefix = import.meta.env.DEV
  ? "/public/demos/"
  : "/demos/";

This makes hot reloading work as expected and the built server still functions fine. Only tiny issue is the vite warnings in the console like this:

Files in the public directory are served at the root path.
Instead of /public/demos/experiments/08_3d/tube3-shader2/style.css, use /demos/experiments/08_3d/tube3-shader2/style.css.

I feel there's a better way :)