[vite-plugin-watch-and-run] Monorepo support?

[kerryj89]

Hello!

I am trying to use vite-plugin-watch-and-run to watch for some files outside of the packages/components directory where Vite is ran. I am trying to get it to watch the scss files in packages/tokens.

// Simplified monorepo structure

.
└── packages
   ├── components
   │   └── vite.config.ts
   │  
   └── tokens
       └── dist/**/*.scss

I thought I could just do this but it seems it is unable to reach it. I made sure the path it output was correct and was able to cd into it. Is there some trick to this?

// vite.config.ts
...
  plugins: [
      ...
      watchAndRun([
        {
          name: 'scss-watcher',
          watch: path.resolve('../tokens/dist/**/*.scss'),
          watchKind: ['add', 'change', 'unlink'],
          run: server => {
            console.log('SCSS file changed, triggering reload');
            server.ws.send({ type: 'full-reload' });
          },
          delay: 300,
        },
      ]),
    ],
...

Thanks!

[jycouet]

Hello,
Thank you for asking.

Actually, vite can't watch files outsite of the current place, so you can't "../" (last time I checked)

Maybe you can run your vite at the root level?
Or change the structure or your mono repo? (maybe it doesnt need to be flat?)

[kerryj89]

@jycouet

Thank you for your fast response!

I see about the Vite limitation, that's why I thought maybe this plugin would work around that. There is also vite-plugin-watch-workspace but it tries to run esbuild on scss files and seems there's no option to stop that.

Your plugin seems more robust in the sense that you make no assumptions on how to handle watched files which seems perfect for my needs (and also a nice delay option).

I was able to get it to work for my needs by inserting the following lines. I am not sure if doing this will spawn some dragons, but for my purpose it seems to work - do you have some sense of issues that can happen by doing this?

Insert into line 255:

for (const conf of watchAndRunConf) {
    if (conf.watch) {
        server.watcher.add(conf.watch);
    }
}

kitql/packages/vite-plugin-watch-and-run/src/lib/index.ts

Lines 252 to 266 in 3017da7

	async configureServer(server) {
	// check params, throw Errors if not valid and return a new object representing the state of the plugin
	const watchAndRunConf = checkConf(params)
	for (const kind of kindWithPath) {
	const _watcher = async (absolutePath: string) =>
	watcher(server, absolutePath, kind, watchAndRunConf)
	server.watcher.on(kind, _watcher)
	}
	for (const kind of kindWithoutPath) {
	const _watcher = () => watcher(server, null, kind, watchAndRunConf)
	server.watcher.on(kind, _watcher)
	}
	},

[kerryj89]

Thanks! I created a PR, but I must make it clear I don't know of Vite's internals and the side effects this might cause... thanks for reviewing

#801

[jycouet]

Would you try [email protected] ? 😇

[kerryj89]

Would you try [email protected] ? 😇

That works for me, many thanks for the well thought out plugin!

[jycouet]

Are you on bsky ?

I'll post about the update there and would like to mention you if you agree

[kerryj89]

No I don't have that or any social I want to link to, thanks anyway!