HMR with Vite vanilla + template engine

[bwyx]

I am trying to implement hmr using template engine: liquid js

Because .liquid files are not ES module so I am trying to watch all .liquid in my directory using server.watch:

// vite.config.js
module.exports = {
  server: {
    watch: glob.sync('./src/**/*.liquid')
  },
  plugins: [
    liquidPlugin()
  ],
};

// liquidPlugin
const engine = new Liquid({
  root: path.resolve(__dirname, 'src'),
  extname: '.liquid'
});

export default function liquidPlugin() {
  return {
    name: "transform-html",

    transformIndexHtml(html) {
      return engine.parseAndRender(html)
    },
  };
}

but how should I access this chokidar watcher from main.js?
in webpack its done by using require.context

or how to implement hmr with a template engine?

thanks and sorry my english xD

[yyx990803]

If the templating engine itself doesn't support HMR, there's no way to magically make it work with HMR. The template/framework needs to have dedicated APIs to be used with Vite's HMR API.

server.watch is irrelevant here because all files are watched by default.

[lubomirblazekcz]

So there is currently no way to use Vite with template engines? eg. EJS, Liquid.js, Twig.js, Handlebars.js etc?

[yyx990803]

You can, there is just no HMR because these template engines themselves do not support HMR.

[haikyuu]

@evromalarkey
One of them does support hot module reloading: markojs

Check this link for more info. If you run into issues, just hop in the marko discord server and you can get help from the community and the core team.

And by the way, marko is very unique in the landscape as it's an isomorphic ui library: it can work like a templating engine and as a client side library like React and vue.

And that makes it the fastest library in many benchmarks including SSR and CSR.

[yyx990803]

FWIW that benchmark is still using Vue 2 and quite out of date.

[zanethomas]

If the templating engine itself doesn't support HMR, there's no way to magically make it work with HMR. The template/framework needs to have dedicated APIs to be used with Vite's HMR API.

server.watch is irrelevant here because all files are watched by default.

I have a situation like this

app.vue
views
  home
     index.vue

When I modify app.vue the view is reloaded. When I modify index.vue it is not.

Can someone tell me how to fix this?