navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
const state = event.destination.getState();
document.body.setHTML(`
<div>
<p>Paragraph to inject into shadow DOM.
<button clicked the button with value ${state.key}!')">Click me</button>
</p>
<script src="path/to/a/module.js" type="module"><\/script>
<p data-id="${state.key}">Para with <code>data-id</code> attribute with value <code>${state.key}</code></p>
</div>
`)
}
})
});
(where `setHTML` is the pending API here, the navigation API available in chrome, and polyfill available for firefox/safari) await navigation.navigate("/somewhere", { state: { key: "value } }).finished;
Flipping things around a bit gives the power back to the browser like it seems you're after, rather than reaching for every tool available... but, a standard JSX feels a while away... maybe expressing JSX just for pure DOM elements would be enough though, without any functional components, but I guess that is what makes JSX, JSX.
Has 90% test coverage, makes use of web platform tests to verify compatibility, and is in use by some larger companies already with the Navigation API soon to become a baseline in evergreen browsers.
The Navigation API effectively is async state navigations. The likes of React has recently added Navigation API support to make use of the browser reload indicator.
https://github.com/virtualstate/navigation
Along with working on a startup day to day :)