abusing the platform
(not published, just work in progress)
an experiment with templates. for react.
function App(props){
// some suspense calls, hooks, whatever
let count = visitors.read();
return tpl`
<style>
h1 { color:red; }
</style>
<h1>welcome to my homepage!</h1>
<div>
you are vistor number ${count}
${<ConstructionGif />}
</div>
`
}
"but why?!" I hear you screaming at your monitor.
I'm not sure, to be honest. I got bothered by the disclaimer on aframe-react, and wondered if there was a better way to construct long (not necessarily deep), mostly static component trees, without all that ceremony. I've been eyeing <template>
nodes and shadow dom for a while, and figured it would be a good fit. Like lit-html
, but I wanted to use react's, well, everything else.
By using tagged template literals, we can define trees that separate the static and dynamic parts naturally. We leverage custom-elements and <template>
nodes to make 'shells' for the static bits, and uses react-dom to feed the dynamic bits as and when they change. That's... mostly it.
(as of now, a runtime version is mostly functional)
style='color:${props.color}'
)<style>
tagsfor work? probably not. for fun? definitely!