Rendering
23rd May 2021
Rendering with @virtualstate/x
This is a blog post that I will be extending over time and used as a staging grounds for @virtualstate/x's README file
Pssst... Checkout the hidden divs by using your browsers developer tools
Pssst... Checkout the hidden divs by using your browsers developer tools
Scalar nodes created with h can be read directly
import { h } from "@virtualstate/x"; const node = h(1); const { source: one } = node; console.log({ one }); // Logs { one: 1 }
{
"one": 1
}
Any nodes with h that have children can be read using for await
const first = h("first"); const second = h("second"); const third = h("third"); const node = h("result", {}, first, second, third); const { source: result, children } = node; console.log({ result }); // Logs { result: "result" } if (!children) throw new Error("Expected children"); for await (const results of children) { // Eventually Logs { results: ["first", "second", "third" ] } console.log({ results: results.map(node => node.source) }); }
Any function type can be used as a virtual node
import { h } from "@virtualstate/x"; function Fn() { return "Function ✨"; } async function AsyncFn() { await new Promise<void>(queueMicrotask); return "Async Function 💡"; } function *GeneratorFn() { yield "GeneratorFn Loading"; yield "GeneratorFn 💥"; } async function *AsyncGeneratorFn() { yield "AsyncGeneratorFn Loading"; yield "AsyncGeneratorFn 🔥"; } function Fns() { return [ h(Fn), h(AsyncFn), h(GeneratorFn), h(AsyncGeneratorFn) ] .map(node => f("fn", { name: node.source.name }, node.source.name, node)); } const { children } = f(Fns); if (!children) throw new Error("Expected children"); for await (const results of children) { // Eventually Logs { results: ["Fn", "AsyncFn", "GeneratorFn", "AsyncGeneratorFn" ] } console.log({ results: results.map(node => node.options.name) }); }