packages/forkhorse-gatekeeper/app/configurator.ts

1import { followSystemTheme } from "../../forkhorse-dashboard/src/theme.ts";
2import { newMessagePortRpcSession, RpcTarget } from "capnweb";
3import { CONNECTION_HELD, type ConnectionDraft, type DraftStatus } from "../src/configuration.ts";
4import { mountConfiguration } from "../src/configuration-form.ts";
5import brand from "../../../brand.json";
6import "./configurator.css";
7
8interface DraftApi extends RpcTarget {
9  checkDraft(draft: ConnectionDraft): Promise<DraftStatus>;
10}
11interface Host extends RpcTarget {
12  readonly gatekeeper: DraftApi;
13  setSelectionReady(ready: boolean): Promise<void>;
14  resize(height: number, layoutHeight: number): Promise<void>;
15}
16class ConfiguratorIframe extends RpcTarget {
17  async collectResourceUrl(): Promise<string> {
18    throw new Error(CONNECTION_HELD);
19  }
20  updateViewport(_iframeTop: number, _viewportHeight: number): void {}
21  windowResized(): void {}
22}
23document.title = brand.name;
24const { port1, port2 } = new MessageChannel();
25window.parent.postMessage({ type: "handshake" }, "*", [port2]);
26const host = newMessagePortRpcSession<Host>(port1, new ConfiguratorIframe());
27const form = mountConfiguration(document.getElementById("sidebar")!, async (draft) => {
28  return await host.gatekeeper.checkDraft(draft);
29});
30void host.setSelectionReady(false).catch(() => {});
31void host.resize(540, 540).catch(() => {});
32window.addEventListener(
33  "pagehide",
34  () => {
35    form.dispose();
36    host[Symbol.dispose]();
37    port1.close();
38  },
39  { once: true },
40);
41
42const stopTheme = followSystemTheme();
43window.addEventListener("pagehide", stopTheme, { once: true });
44