I’m trying to use the Vite HMR API to create a Pixi.js app that hot reloads without resetting its state. The high-level idea:
main.js
initializes Pixi.js so an imported functionupdate()
is run every tick.- The imported
update()
is passed an object with the state so changes can be made inmain.js
context.
I got update.js
to hot update, but the app doesn’t reflect the modified function:
// update.js
if (import.meta.hot) {
import.meta.hot.accept()
}
export default function update(delta, state) {
state.bunny.rotation += 0.1 * delta;
}
I think it’s because Pixi is still using the old update()
:
// main.js
app.ticker.add((delta) => { update(delta, state) });
So I tried to accept updates in main.js
when update.js
was updated:
// main.js
import update from './update.js';
if (import.meta.hot) {
import.meta.hot.accept('./update.js', (newUpdate) => {
console.log('Update ticker here.');
})
}
However this callback is not called when update.js
is hot updated. Why is the callback not getting called?
I have tried some other things, like porting this Snowpack HMR example to Vite. I had problems/errors setting the module state (module.setState(import.meta.hot.data)
), but I don’t think I need to do this.