The platform has had a complete story for one module using another's
*backend* since ADR 0006 — capabilities, versioned ranges, provider
registration. It has had none at all for one module using another's *browser*
code, and every workaround is wrong in a way that matters: a consumer cannot
import a peer module, it cannot re-implement a renderer for a domain it does
not own, and a second `entrypoints` role would put the platform in charge of
deciding when a slot inside someone else's screen should be filled.
Add a generic browser contribution. `manifestVersion: 7` declares one:
namespaced id, its own version, a target capability, a compatible range, and
one artifact. That is the complete list, and the omissions are the decision —
no payload schema, slot, ordering, or rendering hint exists anywhere, so Core
cannot learn what a slide is because the declaration cannot express it.
Discovery resolves a contribution artifact through the *identical* loop every
other compiled entrypoint uses, inheriting the path, containment, symlink,
extension, and file-kind checks rather than getting a weaker copy of them. The
registry publishes one only when another eligible module provides the target
capability within the declared range; otherwise it is absent rather than
mounted and broken. `apps/api` serves it as a sibling of the artifact and
display routes, with the same policy: three lookup keys, one exact match, one
already-validated path, and one indistinguishable 404 for unknown, undeclared,
stale, and incompatible alike.
A consumer discovers through the host, never through a URL. Its descriptor
carries identity, version, and capability; the URL stays server-side and is
resolved exactly as `api.request("records")` is. A module can only ever see
contributions aimed at a capability it itself provides, and cannot name its
way to anything else — a mount for a withheld id fails without fetching.
The consumer owns the domain contract entirely. Input is opaque JSON, checked
structurally so a Date, a function, a cycle, or `undefined` fails at the
boundary rather than vanishing somewhere far from the mistake, and checked for
nothing else. A contributed renderer receives its own id and that input: no
API client, realtime, principal, configuration, database, storage, or
credential. Loading one grants its module nothing.
The contribution ABI is versioned separately from the module UI ABI, because
the two have different shapes and lifecycles and coupling them would force
every module to rebuild whenever either moved. It supports asynchronous
readiness, update-without-remount (a screen that remounted per tick would
restart animations and reload media), deterministic cleanup in a `finally`,
and sanitized failure that never carries the consumer's domain data. Each
renderer mounts in its own isolated root with its own stylesheet.
The template now declares a contribution, so `pnpm build` exercises the whole
authoring path, and the shell suite drives the full relationship — one module
discovering, mounting, updating, and unmounting another's React renderer with
neither importing the other.
Co-Authored-By: Claude Opus 5 <[email protected]>
315 lines
11 KiB
TypeScript
315 lines
11 KiB
TypeScript
import type { ModuleUiRealtimeError, ModuleUiRealtimeStatus } from "@ekklesia/module-ui-sdk";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import type {
|
|
HostEventSourceFactory,
|
|
HostEventSourceOptions,
|
|
HostModuleUiDescriptor,
|
|
} from "../src/host-protocol.js";
|
|
import { createModuleUiContext } from "../src/module-context.js";
|
|
|
|
const apiBaseUrl = "https://ekklesia.example.test";
|
|
|
|
const exampleDescriptor: HostModuleUiDescriptor = {
|
|
contributions: [],
|
|
apiBaseUrl: "/api/v1/modules/example",
|
|
id: "example",
|
|
permissions: ["example.state.read"],
|
|
realtimeBaseUrl: "/api/v1/module-realtime/example",
|
|
uiUrl: "/api/v1/module-ui/example/0.1.0",
|
|
version: "0.1.0",
|
|
};
|
|
|
|
class FakeEventSource {
|
|
readonly CLOSED = 2 as const;
|
|
readonly CONNECTING = 0 as const;
|
|
readonly OPEN = 1 as const;
|
|
readonly listeners = new Map<string, Set<EventListener>>();
|
|
closed = false;
|
|
closeCalls = 0;
|
|
readyState: number = this.CONNECTING;
|
|
|
|
addEventListener(type: string, listener: EventListener): void {
|
|
const listeners = this.listeners.get(type) ?? new Set<EventListener>();
|
|
listeners.add(listener);
|
|
this.listeners.set(type, listeners);
|
|
}
|
|
|
|
removeEventListener(type: string, listener: EventListener): void {
|
|
this.listeners.get(type)?.delete(listener);
|
|
}
|
|
|
|
close(): void {
|
|
this.closed = true;
|
|
this.closeCalls += 1;
|
|
this.readyState = this.CLOSED;
|
|
}
|
|
|
|
emit(type: string, data?: string): void {
|
|
if (type === "open") {
|
|
this.readyState = this.OPEN;
|
|
}
|
|
const event = Object.freeze({ data, type }) as unknown as Event;
|
|
for (const listener of this.listeners.get(type) ?? []) {
|
|
listener(event);
|
|
}
|
|
}
|
|
}
|
|
|
|
interface EventSourceHarness {
|
|
readonly calls: Array<{
|
|
readonly options: HostEventSourceOptions;
|
|
readonly source: FakeEventSource;
|
|
readonly url: string;
|
|
}>;
|
|
readonly factory: HostEventSourceFactory;
|
|
}
|
|
|
|
function eventSourceHarness(): EventSourceHarness {
|
|
const calls: EventSourceHarness["calls"] = [];
|
|
const factory = ((url: string, options: HostEventSourceOptions): EventSource => {
|
|
const source = new FakeEventSource();
|
|
calls.push({ options, source, url });
|
|
return source as unknown as EventSource;
|
|
}) as HostEventSourceFactory;
|
|
return { calls, factory };
|
|
}
|
|
|
|
function context(factory: HostEventSourceFactory, descriptor = exampleDescriptor) {
|
|
return createModuleUiContext({
|
|
config: { apiBaseUrl, eventSourceFactory: factory },
|
|
descriptor,
|
|
principal: { kind: "authenticated", userId: "user-1" },
|
|
});
|
|
}
|
|
|
|
function envelope(sequence: number, payload: unknown): string {
|
|
return JSON.stringify({ payload, sequence });
|
|
}
|
|
|
|
describe("module UI realtime host adapter", () => {
|
|
it("opens the server-provided module channel URL with host-owned credentials", () => {
|
|
const harness = eventSourceHarness();
|
|
|
|
context(harness.factory).realtime.subscribe("slideshow-state", {});
|
|
|
|
expect(harness.calls).toHaveLength(1);
|
|
expect(harness.calls[0]).toMatchObject({
|
|
options: { withCredentials: true },
|
|
url: `${apiBaseUrl}/api/v1/module-realtime/example/slideshow-state`,
|
|
});
|
|
});
|
|
|
|
it("scopes the same local channel to each descriptor without accepting a module id", () => {
|
|
const harness = eventSourceHarness();
|
|
const calendar: HostModuleUiDescriptor = {
|
|
...exampleDescriptor,
|
|
contributions: [],
|
|
apiBaseUrl: "/api/v1/modules/calendar",
|
|
id: "calendar",
|
|
realtimeBaseUrl: "/api/v1/module-realtime/calendar",
|
|
uiUrl: "/api/v1/module-ui/calendar/1.0.0",
|
|
version: "1.0.0",
|
|
};
|
|
|
|
context(harness.factory).realtime.subscribe("state", {});
|
|
context(harness.factory, calendar).realtime.subscribe("state", {});
|
|
|
|
expect(harness.calls.map((call) => call.url)).toEqual([
|
|
`${apiBaseUrl}/api/v1/module-realtime/example/state`,
|
|
`${apiBaseUrl}/api/v1/module-realtime/calendar/state`,
|
|
]);
|
|
});
|
|
|
|
it("delivers snapshot first, ordered updates, and fresh state after automatic reconnect", () => {
|
|
const harness = eventSourceHarness();
|
|
const statuses: ModuleUiRealtimeStatus[] = [];
|
|
const snapshots: unknown[] = [];
|
|
const updates: unknown[] = [];
|
|
const errors: ModuleUiRealtimeError[] = [];
|
|
|
|
context(harness.factory).realtime.subscribe<{ readonly mode: string }>("state", {
|
|
onError: (error) => errors.push(error),
|
|
onSnapshot: (state, sequence) => snapshots.push({ sequence, state }),
|
|
onStatus: (status) => statuses.push(status),
|
|
onUpdate: (state, sequence) => updates.push({ sequence, state }),
|
|
});
|
|
const source = harness.calls[0]?.source;
|
|
expect(source).toBeDefined();
|
|
|
|
source?.emit("open");
|
|
source?.emit("snapshot", envelope(1, { mode: "on" }));
|
|
source?.emit("update", envelope(2, { mode: "off" }));
|
|
// Native EventSource owns reconnect. The host reports it, then treats the next snapshot as a
|
|
// fresh authoritative base even when its sequence is the same as the last state already seen.
|
|
if (source) {
|
|
source.readyState = source.CONNECTING;
|
|
source.emit("error");
|
|
}
|
|
source?.emit("open");
|
|
source?.emit("snapshot", envelope(2, { mode: "off" }));
|
|
source?.emit("update", envelope(3, { mode: "on" }));
|
|
|
|
expect(statuses).toEqual(["connecting", "connected", "reconnecting", "connected"]);
|
|
expect(snapshots).toEqual([
|
|
{ sequence: 1, state: { mode: "on" } },
|
|
{ sequence: 2, state: { mode: "off" } },
|
|
]);
|
|
expect(updates).toEqual([
|
|
{ sequence: 2, state: { mode: "off" } },
|
|
{ sequence: 3, state: { mode: "on" } },
|
|
]);
|
|
expect(errors).toEqual([
|
|
{
|
|
code: "REALTIME_CONNECTION_FAILED",
|
|
message: "The live connection could not be maintained.",
|
|
},
|
|
]);
|
|
});
|
|
|
|
it("rejects malformed envelopes and out-of-order deliveries with one fixed safe error", () => {
|
|
const harness = eventSourceHarness();
|
|
const updates: unknown[] = [];
|
|
const errors: ModuleUiRealtimeError[] = [];
|
|
context(harness.factory).realtime.subscribe("state", {
|
|
onError: (error) => errors.push(error),
|
|
onUpdate: (state, sequence) => updates.push({ sequence, state }),
|
|
});
|
|
const source = harness.calls[0]?.source;
|
|
source?.emit("open");
|
|
|
|
source?.emit("update", envelope(1, { secret: "not delivered" }));
|
|
source?.emit("snapshot", "not json: /private/server/path");
|
|
source?.emit("snapshot", JSON.stringify({ extra: true, payload: {}, sequence: 1 }));
|
|
source?.emit("snapshot", envelope(0, {}));
|
|
source?.emit("snapshot", envelope(2, { mode: "on" }));
|
|
source?.emit("update", envelope(2, { mode: "stale" }));
|
|
|
|
expect(updates).toEqual([]);
|
|
expect(errors).toHaveLength(5);
|
|
expect(new Set(errors.map((error) => JSON.stringify(error)))).toEqual(
|
|
new Set([
|
|
JSON.stringify({
|
|
code: "REALTIME_MESSAGE_INVALID",
|
|
message: "The host received an invalid live update.",
|
|
}),
|
|
]),
|
|
);
|
|
expect(JSON.stringify(errors)).not.toContain("private");
|
|
expect(JSON.stringify(errors)).not.toContain("secret");
|
|
});
|
|
|
|
it("refuses invalid channel names before opening a connection", () => {
|
|
const harness = eventSourceHarness();
|
|
const realtime = context(harness.factory).realtime;
|
|
|
|
for (const channel of [
|
|
"",
|
|
"State",
|
|
"slide_state",
|
|
"slide/state",
|
|
"state.*",
|
|
"-state",
|
|
"state-",
|
|
"a".repeat(49),
|
|
]) {
|
|
expect(() => realtime.subscribe(channel, {}), channel).toThrowError(
|
|
expect.objectContaining({ code: "MODULE_REALTIME_CHANNEL_INVALID" }),
|
|
);
|
|
}
|
|
expect(harness.calls).toEqual([]);
|
|
});
|
|
|
|
it("closes idempotently, removes every listener, and delivers nothing afterward", () => {
|
|
const harness = eventSourceHarness();
|
|
const statuses: ModuleUiRealtimeStatus[] = [];
|
|
const snapshots = vi.fn();
|
|
const subscription = context(harness.factory).realtime.subscribe("state", {
|
|
onSnapshot: snapshots,
|
|
onStatus: (status) => statuses.push(status),
|
|
});
|
|
const source = harness.calls[0]?.source;
|
|
source?.emit("open");
|
|
|
|
subscription.close();
|
|
subscription.close();
|
|
source?.emit("snapshot", envelope(1, { mode: "on" }));
|
|
source?.emit("open");
|
|
|
|
expect(source?.closed).toBe(true);
|
|
expect(source?.closeCalls).toBe(1);
|
|
expect(
|
|
[...((source?.listeners.values() ?? []) as Iterable<Set<EventListener>>)].every(
|
|
(listeners) => listeners.size === 0,
|
|
),
|
|
).toBe(true);
|
|
expect(snapshots).not.toHaveBeenCalled();
|
|
expect(statuses).toEqual(["connecting", "connected", "closed"]);
|
|
});
|
|
|
|
it("treats a terminal native CLOSED error as closed and eagerly removes all listeners", () => {
|
|
const harness = eventSourceHarness();
|
|
const statuses: ModuleUiRealtimeStatus[] = [];
|
|
const errors: ModuleUiRealtimeError[] = [];
|
|
const snapshots = vi.fn();
|
|
const subscription = context(harness.factory).realtime.subscribe("state", {
|
|
onError: (error) => errors.push(error),
|
|
onSnapshot: snapshots,
|
|
onStatus: (status) => statuses.push(status),
|
|
});
|
|
const source = harness.calls[0]?.source;
|
|
source?.emit("open");
|
|
source?.emit("snapshot", envelope(1, { mode: "on" }));
|
|
|
|
if (source) {
|
|
// Fatal HTTP/protocol failures leave native EventSource CLOSED; unlike CONNECTING, the browser
|
|
// will not retry them, so the host must not promise `reconnecting`.
|
|
source.readyState = source.CLOSED;
|
|
source.emit("error");
|
|
source.emit("error");
|
|
source.emit("open");
|
|
source.emit("snapshot", envelope(2, { mode: "off" }));
|
|
}
|
|
subscription.close();
|
|
|
|
expect(source?.closed).toBe(true);
|
|
expect(source?.closeCalls).toBe(1);
|
|
expect(
|
|
[...((source?.listeners.values() ?? []) as Iterable<Set<EventListener>>)].every(
|
|
(listeners) => listeners.size === 0,
|
|
),
|
|
).toBe(true);
|
|
expect(statuses).toEqual(["connecting", "connected", "closed"]);
|
|
expect(errors).toEqual([
|
|
{
|
|
code: "REALTIME_CONNECTION_FAILED",
|
|
message: "The live connection could not be maintained.",
|
|
},
|
|
]);
|
|
expect(snapshots).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it("sanitizes constructor failures and closes without exposing the caught value", () => {
|
|
const errors: ModuleUiRealtimeError[] = [];
|
|
const statuses: ModuleUiRealtimeStatus[] = [];
|
|
const factory = vi.fn(() => {
|
|
throw new Error("token=secret at /home/server/realtime");
|
|
}) as unknown as HostEventSourceFactory;
|
|
|
|
const subscription = context(factory).realtime.subscribe("state", {
|
|
onError: (error) => errors.push(error),
|
|
onStatus: (status) => statuses.push(status),
|
|
});
|
|
subscription.close();
|
|
|
|
expect(statuses).toEqual(["connecting", "closed"]);
|
|
expect(errors).toEqual([
|
|
{
|
|
code: "REALTIME_CONNECTION_FAILED",
|
|
message: "The live connection could not be maintained.",
|
|
},
|
|
]);
|
|
expect(JSON.stringify(errors)).not.toContain("secret");
|
|
expect(JSON.stringify(errors)).not.toContain("home");
|
|
});
|
|
});
|