Hot reload feature for Via (React HMR style)

[joaomdsg]

This discussion continues from a conversation in PR#2 with @winkler1 that started as a code review but evolved into a design refinement for Via core and plugin system, as well as an idea for a Via-native hot reload feature similar to React HMR.

The idea for realizing the hot reload without a full page refresh envolves adding a developer mode flag to the configuration that sets up persisting the page context to disk so it survives air reloads. Then, all I need to do is call sync right after the browser reconnects to /_sse. Preserves state and signals if possible. I think it will be an amazing experience.

[winkler1]

Wow! It's hard to think about the things that would be needed to restore state. Maybe replaying actions to the server as well to poke it into the same shape?

I had come to a similar conclusion about the need for a dev flag-

1. Initially I hacked rand ID's to start from 1. The randomness was confusing. BTW, check out the dataspa-inspector to see page state. This bookmarklet will inject it -

`javascript:(function(){var el=document.createElement("script");el.src="https://cdn.jsdelivr.net/gh/dataSPA/dataSPA-inspector@latest/dataspa-inspector.bundled.js";el.type="module";el.onerror=function(){alert("DataSPA Inspector blocked by CSP (Content Security Policy). This site prevents loading external scripts.");};document.head.appendChild(el);document.body.appendChild(document.createElement("dataspa-inspector"));})();`

2. LiveReload plugin should only work in Dev mode. I'd love to see it hoisted and changed as you need. Right now I've got a copy in another example I'm working on.... :)

3. I've mentioned Via in the Datastar discord, should get a few eyeballs from there

[joaomdsg]

Im thinking a simple serialization of the page context to JSON and a simple diff algorithm will do the trick to restore state and signals. Need more time to test my assumptions.

1. The randomness is essential to abtract datastar signals. Component instances that contain signals with a static name will conflict when 2 or more instances of the same component are added to a page (or component - components can nest in other components). I dont see any way of avoiding it. Thanks for sharing the inspector tool. I'll give it a try.
2. I like what you did. For some reason the reload is hit or miss on my local setup. The issue might be unrelated to your code. I have little time to investigate unfortunately.
3. Thats awesome, thanks! I'm planning to announce this project properly at some point, just dont know exactly how. Still need to work on a proper starter template with all batteries included.

[joaomdsg]

@winkler1, just pushed live reload support w/ devmode flag.
You will see that your script was removed from the example as it is no longer needed.
Did extensive testing trying to fully serialize a context instance to disk, but couldn't. Runtime state in VIa is impossible to preserve because there are a lot of "loose" vars inside the scope of a context and I have no way of reaching them. I could tinker with desing so stateful vars are registred to the context, but that makes dev ergonomics worse. I could still be able to serialize and restore signals, but see no point in that unless I can also restore all stateful vars.

[winkler1]

Tried it - works well. Yes - makes sense about restoring state. Would be a very heavy lift.