mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-02 20:15:53 +02:00
Jan Andrle
25d475ec04
* :tap: removed on.attributeChanged and static observedAttributes * ⚡ import optimalization * ⚡ scope.signal * 🔤 🐛 * ⚡ 🐛 registerReactivity and types * 🔤 * ⚡ * 🔤 * 🐛 Node in enviroment * ⚡ todos * ⚡ * ⚡ 🔤 * ⚡ lint * ⚡ memo * 🔤 🐛 memo * ⚡ 🔤 todomvc * 🐛 types * 🔤 p08 signal factory * 🔤 ⚡ types * ⚡ 🔤 lint * 🔤 * 🔤 * 🔤 * 🔤 * 📺
48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
// Handling async data in SSR
|
|
import { JSDOM } from "jsdom";
|
|
import { register, queue } from "deka-dom-el/jsdom";
|
|
|
|
async function renderWithAsyncData() {
|
|
const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
|
|
const { el } = await register(dom);
|
|
|
|
// Create a component that fetches data
|
|
const { AsyncComponent } = await import("./components/AsyncComponent.js");
|
|
|
|
// Render the page
|
|
dom.window.document.body.append(
|
|
el("h1", "Page with Async Data"),
|
|
el(AsyncComponent)
|
|
);
|
|
|
|
// IMPORTANT: Wait for all queued operations to complete
|
|
await queue();
|
|
|
|
// Now the HTML includes all async content
|
|
const html = dom.serialize();
|
|
console.log(html);
|
|
}
|
|
|
|
renderWithAsyncData();
|
|
|
|
// file: components/AsyncComponent.js
|
|
import { el } from "deka-dom-el";
|
|
import { S } from "deka-dom-el/signals";
|
|
function AsyncComponent() {
|
|
const title= S("-");
|
|
const description= S("-");
|
|
|
|
// Use the queue to track the async operation
|
|
queue(fetch("https://api.example.com/data")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
title.set(data.title);
|
|
description.set(data.description);
|
|
}));
|
|
|
|
return el("div", { className: "async-content" }).append(
|
|
el("h2", title),
|
|
el("p", description)
|
|
);
|
|
}
|