Aurelia Vite Plugin HMR fails every second edit

[davidsk]

🐛 Bug Report

When using the vite plugin, Hot Module Replacement fails every second edit.

🤔 Expected Behavior

Editing a file should not cause the page to refresh, but the existing state should be preserved, and the changes should be in effect

😯 Current Behavior

Editing a file causes a page refresh every second edit. No error message is provided.

No error is logged.

It seems like there's some state in the plugins getHmrCode function that's being toggled each time it's called

I'd like to edit files and have the changes take effect without losing state

💻 Code Sample

Repo

stackblitz

🌍 Your Environment

Software	Version(s)
Aurelia	2.0.0-beta.72.0.0-beta.7
Language	Typescript
Browser	MS Edge
Bundler	Vite
Operating System	Windows
NPM/Node/Yarn	NPM 9.6.5

[davidsk]

Digging into this a bit more and the core issue seems to be that the created hook is not being called after an HMR update:

A controllers array is defined for each version of the module...

aurelia/packages-tooling/vite-plugin/src/index.ts

Line 127 in 052d475

const controllers = [];

...which is populated when the created function on the class prototype is called...

aurelia/packages-tooling/vite-plugin/src/index.ts

Lines 150 to 155 in 052d475

	// @ts-ignore
	proto.created = function(controller) {
	// @ts-ignore
	ogCreated && ogCreated.call(this, controller);
	controllers.push(controller);
	}

...and this is persisted across updates by stashing it on the data object when a module is being disposed

aurelia/packages-tooling/vite-plugin/src/index.ts

Lines 158 to 163 in 052d475

	// @ts-ignore
	${moduleText}.hot.dispose(function (data) {
	// @ts-ignore
	data.controllers = controllers;
	data.aurelia = aurelia;
	});

As the created hook is not being called following an module update, the controller array remains empty, which is then passed to the second update which finds no controllers and invalidates the module.

aurelia/packages-tooling/vite-plugin/src/index.ts

Lines 171 to 175 in 052d475

	const previousControllers = ${moduleText}.hot.data.controllers;
	if (previousControllers == null || previousControllers.length === 0) {
	// @ts-ignore
	${moduleText}.hot.invalidate();
	}

Hopefully that helps. I don't know enough about the Aurelia lifecycle to understand what/how/when the created method should be called following an HMR update to take this much further.

[bigopon]

@davidsk the analysis is a great help , thanks! Should help accelerate the fix 👍

[davidsk]

I did find some time to dig into this a little further. I added some console logging to see what events were being called and on initial load the console looks like this:

and after an HMR update:

It doesn't appear to be calling the hydrating, hydrated or created methods. Out of curiosity, I changed the method that the HMR module is overrding from created to binding and it works (as I expect, at least); after each edit, the current state is captured and re-applied.

Sample repo here: https://github.com/davidsk/aurelia-vite-plugin-fails-every-second-edit/tree/tweak-au-hmr