With the following complete basic riot example: a counter with an increment and a decrement buttons.
Please check the example for more explanation.
<app>
<div>
<button onclick="{ increment }">Increment</button>
<span>{ count }</span>
<button onclick="{ decrement }">Decrement</button>
</div>
<script>
this.on('before-mount', () => {
this.count = 0;
});
this.increment = () => {
this.count += 1;
console.debug('incr', this.count);
};
this.decrement = () => {
this.count -= 1;
console.debug('decr', this.count);
};
</script>
import riot from 'riot';
import 'riot-hot-reload';
import '../components/app.tag';
riot.mount('app');
console.warn('mounted');
if (module.hot) {
module.hot.accept('../components/app.tag', () => {
console.warn('hot reloaded');
riot.mount('app'); // current thing, works but kills the context
// riot.reload('app'); // as soon as I use this instead, the UI doesn't get updated anymore,
// the count stays visually at its last value even though in the console.log it show the real value,
// `reload` instead of doing what it should, it's just breaking the UI
});
}