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 * 🔤 * 🔤 * 🔤 * 🔤 * 📺
37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
// ❌ WRONG: Static imports are hoisted and will register before JSDOM is created
|
|
import { register } from "deka-dom-el/jsdom";
|
|
import { el } from "deka-dom-el";
|
|
import { Header } from "./components/Header.js";
|
|
|
|
// ✅ CORRECT: Use dynamic imports to ensure proper initialization order
|
|
import { JSDOM } from "jsdom";
|
|
|
|
async function renderPage() {
|
|
// 1. Create JSDOM instance first
|
|
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
|
|
|
|
// 2. Dynamically import jsdom module
|
|
const { register, queue } = await import("deka-dom-el/jsdom");
|
|
|
|
// 3. Register and get el function
|
|
const { el } = await register(dom);
|
|
|
|
// 4. Dynamically import page components
|
|
// use `import { el } from "deka-dom-el"`
|
|
const { Header } = await import("./components/Header.js");
|
|
const { Content } = await import("./components/Content.js");
|
|
|
|
// 5. Render components
|
|
const body = dom.window.document.body;
|
|
el(body).append(
|
|
el(Header, { title: "My Page" }),
|
|
el(Content, { text: "This is server-rendered content" })
|
|
);
|
|
|
|
// 6. Wait for async operations
|
|
await queue();
|
|
|
|
// 7. Get HTML and clean up
|
|
return dom.serialize();
|
|
}
|