60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
|
import { AlertTriangle, LoaderCircle } from "lucide-solid";
|
||
|
|
import { lazy, Show, Suspense, type Component } from "solid-js";
|
||
|
|
import { render } from "solid-js/web";
|
||
|
|
import { isView, type View } from "../lib/model";
|
||
|
|
import { createFrameBridge } from "../primitives/create-frame-bridge";
|
||
|
|
import "../styles/app.css";
|
||
|
|
import type { PageProps } from "./types";
|
||
|
|
|
||
|
|
// Each view is a dynamic import so a freshly-created iframe evaluates only the
|
||
|
|
// page it owns. Destroying that iframe releases the chunk's runtime objects.
|
||
|
|
const pages: Record<View, Component<PageProps>> = {
|
||
|
|
overview: lazy(() => import("./overview")),
|
||
|
|
services: lazy(() => import("./services")),
|
||
|
|
instances: lazy(() => import("./instances")),
|
||
|
|
"wit-packages": lazy(() => import("./wit-packages")),
|
||
|
|
activity: lazy(() => import("./activity")),
|
||
|
|
settings: lazy(() => import("./settings")),
|
||
|
|
};
|
||
|
|
|
||
|
|
function FramePage() {
|
||
|
|
const requested = new URLSearchParams(window.location.search).get("view");
|
||
|
|
const view = isView(requested) ? requested : null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Show
|
||
|
|
when={view}
|
||
|
|
fallback={
|
||
|
|
<main class="flex min-h-dvh items-center justify-center p-6 text-center text-coral-strong">
|
||
|
|
<div>
|
||
|
|
<AlertTriangle class="mx-auto mb-3" size={28} />
|
||
|
|
<strong class="block">未知页面</strong>
|
||
|
|
<span class="mt-1 block text-sm text-muted">{requested ?? "(empty)"}</span>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{(activeView) => {
|
||
|
|
const bridge = createFrameBridge(activeView());
|
||
|
|
const Page = pages[activeView()];
|
||
|
|
document.title = `${activeView()} · Wasmeld`;
|
||
|
|
return (
|
||
|
|
<Suspense
|
||
|
|
fallback={
|
||
|
|
<main class="flex min-h-dvh items-center justify-center text-muted">
|
||
|
|
<LoaderCircle class="spin" size={24} />
|
||
|
|
</main>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Page state={bridge.state} command={bridge.command} />
|
||
|
|
</Suspense>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
</Show>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const root = document.getElementById("app");
|
||
|
|
if (!root) throw new Error("missing #app root");
|
||
|
|
render(() => <FramePage />, root);
|