@virtualstate/examples
Version:
49 lines • 2.18 kB
JavaScript
import { h, Instance } from "@virtualstate/fringe";
import { Render, render } from "./render.js";
import { globalDocument } from "./global-document.js";
import { assertElement } from "@virtualstate/dom";
async function* Controller() {
const space = new WeakMap();
const referenced = h("o", null, "Hello");
const Body = (h("body", null,
referenced,
h("p", null, "Test"),
h("b", null, "Ok")));
const renderSite = (h(Render, { document: globalDocument, space: space },
h(Site, null, Body)));
const [{ [Instance]: site }] = await renderSite;
assertElement(site);
// render to parent
yield renderSite;
const [earlier] = await render(globalDocument, referenced, space);
// console.log({ instance: earlier[Instance], siblings: earlier[Instance].parentNode.childNodes })
// Or like a function
await render(globalDocument, h(Site, null, Body), space);
await render(globalDocument, Body, space);
// Or render something new over the top
yield (h(Render, { document: globalDocument, space: space },
h(Site, null,
h(Body, null,
referenced,
h("footer", null, "Content")))));
// If you trigger another render with the same space, it will retain the same parent
// Nothing would be overriding it
const [{ [Instance]: instance }] = await (h(Render, { document: globalDocument, space: space }, referenced));
// console.log({ instance, same: earlier[Instance] === instance });
const [node] = await render(globalDocument, referenced, space);
// console.log({ instance: node[Instance], siblings: node[Instance].parentNode.childNodes, same: earlier[Instance] === node[Instance] })
// yield <Website />;
// yield <ok />
function Site({ title, head }, body) {
return (h("html", null,
h("head", null,
h("title", null, title ?? "My Website"),
head),
body));
}
}
// I'm just leaving this here, but I will come back to it
//
export const _EDOMA0001_Render = h(Controller, null);
export const _EDOMA0001_URL = import.meta.url;
//# sourceMappingURL=index.js.map