more granular html/markdown hot reload

[declann]

Hi,

Framework can mix html and markdown, and since 1.1 also put markdown inside html.

Hot reload on the markdown seems to act on uppermost html element: replacing all children nodes.

This is ok if the html is self-contained and/or interactivity is via inline expressions.

However, I've a usecase where an interactive vega visual is inside a wrapper div and includes other textual content (markdown) around it.

If I edit that textual content, then hot reload replaces the wrapper (the top level element) and all children including the visual, so that I need to do a hard refresh in the browser to bring the visual back and reset.

Here is a minimal page (just showing a dynamic message; without using vega) to demo the issue:

https://raw.githubusercontent.com/declann/framework-reactive-html/main/docs/index.md

If you edit text under wrapper div, you lose the dynamic message.

If hot reload was more precise about html/markdown cells to replace, this wouldn't be the case.

This may not be so practical do - I'm not sure - but submitting in case it does make sense to consider!

Thanks
Declan

[Fil]

For this use case you have to find a way to give a name to the target cell, so that the reactive runtime can know about it. If you are using side effects (i.e. code that directly modifies the DOM without informing the runtime), there is no way to know if this code was supposed to run once or needs to be reactivated.

A solution would look like this:

```js
const placeholder = html`<div id="placeholder"></div>`
```

```js
placeholder.textContent = "hello";
```

[declann]

That's awesome!

& really nice to step through the magic in the socket handler in client.js

Thanks a lot for providing a solution @Fil! :)