Hot reloading on views, helpers, translation files

[chmich]

Hi Guys,

whats the best way for including views, view helpers or translation files in HMR?

i tried to set "watchAdditionalPaths": ["app/views/articles/*"] in config/vite.json (for test on articles/index) but didnt work, "watchAdditionalPaths": ["app/views"] did also not work.

So, i added the slim and robust gem 'rails_live_reload'. I didnt had to config anything, nor excluding the app/frontend folder from watching. Vite is reloading the Stylesheets and JS, and rails_live_reload is concerning about the other files and both HMR tools are working fine and no conflict. I am satisfied.

So, my question is:
Had i misunderstood something, so that Vite could do the whole work alone?

Thanks,
Christian

[ElMassimo]

Hi Christian! @chmich

watchAdditionalPaths is meant for build caching when using autoBuild, not for HMR.

I'd recommend reading the documentation, in particular the Recommended Plugins section.

You can use vite-plugin-full-reload and configure it to have Vite automatically reload the page when modifying views or other files in your Rails project:

import { defineConfig } from 'vite'
import reloadOnChange from 'vite-plugin-full-reload'

export default defineConfig({
  plugins: [
    reloadOnChange(['config/locales/**/*', 'app/views/**/*', 'app/helpers/**/*']),
  ],
})

With that in place, you shouldn't need rails_live_reload.

[chmich]

This is not a originally vite-plugin? how to add this (yarn add?) and where to find the docs (on vite-ruby there is a plugin page not not found how to add)?

[ElMassimo]

Follow the links 😃

https://github.com/ElMassimo/vite-plugin-full-reload

[chmich]

Oh, there it stands fat and clear, sorry! :)
And it works

[mtomov]

Hey,

Just to carry on the discussion. Currently, reloading does a full page refresh. Do you think it would be possible to do an "HMR" version without the full page refresh to skip loading all JS and CSS from scratch? Possibly using Turbo with something like Turbo.visit(window.location)?

[mtomov]

Got it!

Add to your main entrypoint, such as application.js

if (import.meta.hot) {
  import.meta.hot.on("vite:beforeFullReload", (payload) => {
    // Hack to skip the reload of the page
    // See https://github.com/vitejs/vite/blob/f402cd278c861e6351b27966d4f98bbb8bc34673/packages/vite/src/client/client.ts#L229
    payload.path = "wont_match_current_path.html"

    Turbo.cache.clear()

    // Maintain scroll position
    const scrollTop = document.documentElement.scrollTop
    addEventListener(
      "turbo:visit",
      () => {
        document.documentElement.scrollTop = scrollTop
      },
      { once: true }
    )

    window.setTimeout(() => {
      Turbo.visit(location.pathname, { action: "replace" })
    }, 700)
  })
}

Works well : )

[ElMassimo]

Nice, thanks for sharing!

Feel free to open a Discussion sharing this solution, so it's easier to find 😃