Try this library in the Browser Console on Deno.land!
For VS Code use this extension to get syntax highlighting.
var { html } = await import("https://cdn.skypack.dev/@!!!!!/elemental@0.5.40")
// create a custom component
const myAsyncCustomComponent = async ({ style, children, ...props }) => {
// load a big'ole depenency like d3
const d3 = await import('https://cdn.skypack.dev/d3')
return html`<div style=${style}>
Do you even Async?
Keys of the d3 library: ${JSON.stringify(Object.keys(d3))}
</div>`
}
// add it to the local scope
html = html.extend({myAsyncCustomComponent})
// change some elements
document.body = html`<body style="padding:1rem;">
Hello World (I render Immediately)
<br>
<myAsyncCustomComponent style='background: darkgray; color: white; padding: 1rem; border-radius: 1rem; margin: 0.3rem;' />
<br>
this ^ takes a second to render cause it has a massive async depenency
</body>`You can also use it with JSX:
/** @jsx html */
var { html } = await import("https://deno.land/x/elementalist@0.5.34/main/deno.js?code")
// create a custom component
const myAsyncCustomComponent = async ({ style, children, ...props }) => {
// load a big'ole depenency like d3
const d3 = await import('https://cdn.skypack.dev/d3')
return <div style={style}>
Do you even Async?
Keys of the d3 library: {JSON.stringify(Object.keys(d3))}
</div>
}
// change some elements
document.body = <body style="padding:1rem;">
Hello World (I render Immediately)
<br>
<myAsyncCustomComponent style='background: darkgray; color: white; padding: 1rem; border-radius: 1rem; margin: 0.3rem;' />
<br>
this ^ takes a second to render cause it has a massive async depenency
</body>