HMR / Reload for vanilla js setup

[arnoson]

Thank you so much for sharing your setup, it works great! I was wondering if it would also be possible to use this in an vanilla js setup without vue? I get it running but the javascript files aren't updated. I guess I somehow have to build HMR for vanilla js files myself but I'm not sure how to do this.

[andrefelipe]

Good question, I tested here and HMR for vanilla JS just doesn't work. And I am not sure why.

I also tested on a plain Vite project from https://github.com/vitejs/create-vite-app and it does work for vanilla JS. When changing index.js the browser refreshes.

Maybe the latests commits on Vite will help us, they have to do with a PHP entry file: https://github.com/vitejs/vite/commits/master

Who knows our setup will get simplified too.

Will post here if I find a solution.

[arnoson]

I tested it a bit further, and everything seems to work except to top level index.js changes. But if my index.js imports a module and the module changes, my site refreshes as expected. So one workaround would be to move all code from the index.js into a module. Another thing I noticed is: if I have an index.html in my vite folder that mirrors the scripts that I use in my index.php than also the toplevel changes in my index.js trigger page refresh. So somehow vite needs the index.html although I don't use it. But yes, maybe in the future the whole setup will get even easier when php files will be allowed as entrypoints!

[arnoson]

I described this behavior in more detail here

[andrefelipe]

Great! Thanks for the feedback.

[arnoson]

As a workaround I created a vite live reload plugin. Now my config looks something like this

// vite.config.js
import liveReload from 'vite-plugin-live-reload'

export default {
  // ...
  plugins: [
    liveReload('index.js'),
  ]
}

The plugin also has the benefit, that I can also watch my php files and my site gets reloaded everytime I change something.

[andrefelipe]

Great!! I will use that already in a project.

[arnoson]

I just released a small update with typescript support and the watcher is now relative to vite's root folder which seemed to be more consinstent :)

[arnoson]

With vite 2 this issue has been resolved (:

[andrefelipe]

Great! Thanks for cleaning up the issue.