Hot-reload template file

[troxler]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?

I would like to use Poi for a basic one-pager that is mostly HTML and a little JavaScript. So I added my own HTML template configuration in poi.config.js:

module.exports = {
  html: {
    template: 'index.html',
  }
}

When I change anything in index.js, the changes are hot-reloaded in the browser. However, when I change something in index.html it does not reload. The change is detected (see log from the browser below), but the changes are not reloaded.

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Nothing hot updated.
[HMR] App is up to date.

When I change something in poi.config.js, it appears that Poi reloads the whole application. Maybe this behaviour could be added for template files as well.

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

Changes in the template should cause a reload in the browser with the changes.

If this is a feature request, what is the motivation or use case for changing the behavior?

This would be interesting for pages where you want to add mostly HTML (e.g. because of SEO reasons) and just a little JavaScript.

Please mention other relevant information such as the browser version, Node.js version, Poi version and Operating System.

[egoist]

This should be fixed in v9.5.9

[edus44]

After upgrading to 9.5.9, Hot Module Replacement stopped working correctly.

In <9.5.9, after modifying App.vue for example, I had this in console:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/components/App.vue
[HMR] App is up to date.

And hot-reload worked ok

In >=9.5.9 now I have:

[WDS] App updated. Recompiling...
[WDS] Content base changed. Reloading...

And the page do a full refresh.

I can confirm that after commenting the changes of this commit, everything worked as usual. Maybe 'html-webpack-plugin-after-emit' is not working as expected?

I am on Ubuntu 16.04

[egoist]

@edus44 hmm seems in hot reloading mode index.html will always be changed whenever you updated your app code 😅jantimon/html-webpack-plugin#680 I reverted that commit for now

[AlexGustafsson]

Perhaps slightly unrelated, but it is said that single-file-components are fully supported. However, when developing and using HMR, Vue fails. The development server doesn't seem to compile the .vuefiles. It does seem to work fine when building, though.

Error thrown when running npx poi (visible in browser):

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

Edit:

The error was due to the following code (and not a single file component):

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
});

It was resolved by using;

new Vue({
  el: '#app',
  render: h => h(App)
});

[egoist]

@AlexGustafsson the template property is not part of SFC https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

That requires the runtime compiler so I don't encourage you to do so, but of course you can https://poi.js.org/#/options?id=templatecompiler

btw this is totally unrelated 🙂