How do I make my plugin work with Parcel 2?

[hirasso]

Hi there,

I'm the author of the parcel 1 plugin Watch Reload. I have been asked to make the plugin work with Parcel 2 – But I don't know where to start. I don't even really know which type of plugin (Resolver, Transformer, Bundler,...) it fits in best?

The plugin watches the file system for changes of selected files not included in the parcel bundle (e.g. **/*.php), and sends a reload request to parcel's hmr if they change, like this:

this.bundler.hmr.broadcast({ 
  type: 'reload'
});

Any suggestions are welcome.

[mischnic]

I think this isn't really possible with a plugin.

The dev & HMR server itself is a reporter plugin and other plugins cannot access its objects.

[mischnic]

watches the file system for changes of selected files not included in the parcel bundle

Where are these files? How do you access them from the dev server?

I could see this being exposed in the proxy config file (which would also enable you to serve files that are not bundled by Parcel in the first place): https://v2.parceljs.org/features/api-proxy/#.proxyrc.js

[hirasso]

I think I'm not making use of parcel's dev server – maybe a bit more context will help:

I use parcel for building the frontend assets of my custom WordPress themes. For the lcoal dev server I use good old MAMP. As entry point I use the main.js file, where I also import the main.scss. It works great – parcel bundles and transpiles my js and scss, with hot reloading just like it should.

Another big part of my code base is *.php files for the theme's logic and templates, and I want parcel to also reload the browser, if one of those files changes. Always worked great with parcel 1.

[morbidick]

I have a very similar setup. I'm building a theme for a php shop, to integrate it with parcel I have one simple html file with just a script and css tag. The compiled version is included by php into the Template.
That way Parcel HMR is working flawlessly but changes outside of the included files (for example in the php templates) don't get picked up. It would be cool to have the option to watch a directory in the same folder thats not directly refernced as dependency.

[m4m-simon]

I also want to use Parcel 2 for WordPress Development. I use Docker Container as Dev Servers.
It would be awesome to watch other filetypes even if they are not becoming bundled...

[hirasso]

I have since moved over to webpack. The huge user base they have solved this use case in a great way. Have a look at Webpack Livereload Plugin.

[onetrev]

Solving this problem of reloading files not in the Parcel bundle was also discussed over in this issue. There's a suggestion there, but I'm not confident it works for many of the use cases mentioned here.

The documentation for the File Watcher says "Parcel watches every file in your project root", but from my experience that doesn't seem to work for my WP theme PHP files. :(

[hirasso]

I recommend to use BrowserSync together with Parcel as described here: hirasso/parcel-plugin-watch-reload#14 (comment)

[onetrev]

Amazing. Thanks for the tip. This works perfectly. I didn't consider this because I didn't think the hot reload changes would come through to BrowserSync server. But there's no issues at all. The only downside being BrowserSync's reload is a bit slow, but I'll take it. Thanks again!