Claude
f9863700e6
Drops the registry lookup, manifest field, /modules route, ui.js loading in panels.js, MODULE_RULES lint, services.js, their tests and docs. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EymCrVCefq4m9Uv6MAkzz5
87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
// Renders the fixture modules through the real shell.
|
|
|
|
import { mountAll } from "../shell/panels.js";
|
|
import { offer, _reset as resetMounts } from "../shell/mounts.js";
|
|
import { _reset as resetValues, all as allValues } from "../shell/values.js";
|
|
import { GOOD, BROKEN } from "./fixtures.js";
|
|
|
|
const el = (tag, cls, text) => {
|
|
const n = document.createElement(tag);
|
|
if (cls) n.className = cls;
|
|
if (text != null) n.textContent = text;
|
|
return n;
|
|
};
|
|
|
|
async function render(theme) {
|
|
resetMounts();
|
|
resetValues();
|
|
|
|
const page = document.querySelector("#catalogue");
|
|
page.textContent = "";
|
|
|
|
const section = el("section", "cat-section");
|
|
section.append(el("h2", null, "What a user sees"));
|
|
section.append(el("p", null,
|
|
"Five modules go in: one valid, four broken in different ways. Everything below " +
|
|
"is the whole of what reaches the screen."));
|
|
|
|
const pane = el("section", "cat-pane");
|
|
pane.setAttribute("data-theme", theme);
|
|
pane.append(el("h3", null, theme));
|
|
const host = el("div", "cat-mount");
|
|
pane.append(host);
|
|
section.append(pane);
|
|
page.append(section);
|
|
|
|
offer("demo.panel", host);
|
|
|
|
// The broken ones are handed to the shell exactly as the good one is. In the
|
|
// real app most never get this far -- core refuses them at import or at
|
|
// validation -- so this is the worst case: everything reaching the browser.
|
|
const manifest = { modules: [GOOD, ...BROKEN.map((b) => b.spec)] };
|
|
const { mounted, hidden } = await mountAll(manifest);
|
|
|
|
if (!host.childElementCount) host.append(el("p", "cat-broke", "nothing mounted at all"));
|
|
|
|
// Everything from here down is developer commentary, NOT part of what a user
|
|
// would see -- the panel above is.
|
|
const ledger = el("section", "cat-section");
|
|
ledger.append(el("h2", null, "Why each one is absent"));
|
|
ledger.append(el("p", null, "This table exists for you, not for the user. None of it appears in the app."));
|
|
|
|
const table = el("div", "cat-ledger");
|
|
for (const { id } of mounted) {
|
|
table.append(el("div", "cat-ledger-row cat-ok"), el("code", "cat-name", id));
|
|
table.append(el("span", null, "mounted"));
|
|
}
|
|
for (const { id, why } of hidden) {
|
|
const source = BROKEN.find((b) => b.spec.id === id);
|
|
table.append(el("code", "cat-name", id));
|
|
table.append(el("span", "cat-why", source ? source.why : "—"));
|
|
table.append(el("span", "cat-caught", why));
|
|
}
|
|
ledger.append(table);
|
|
page.append(ledger);
|
|
|
|
const values = el("section", "cat-section");
|
|
values.append(el("h2", null, "Values a headless run would get"));
|
|
values.append(el("p", null,
|
|
"Seeded from the same declaration the panel renders, so a generation with no " +
|
|
"browser open starts from the same numbers."));
|
|
const pre = el("pre", "cx-code-block");
|
|
pre.textContent = JSON.stringify(allValues(), null, 2);
|
|
values.append(pre);
|
|
page.append(values);
|
|
}
|
|
|
|
let theme = "dark";
|
|
for (const btn of document.querySelectorAll("[data-theme-set]")) {
|
|
btn.addEventListener("click", () => {
|
|
theme = btn.getAttribute("data-theme-set");
|
|
window.ComposerTheme.apply(theme === "auto" ? "auto" : theme);
|
|
render(theme === "auto" ? window.ComposerTheme.resolved() : theme);
|
|
});
|
|
}
|
|
|
|
render(theme);
|