@monimesl/dot-simulator 0.1.0-alpha.2

package/dist/client/simulator.js

@@ -0,0 +1,690 @@
+(function() {
+	//#region ../../core/dist/index.js
+	function defineComponent(manifest) {
+		return {
+			props: {},
+			events: [],
+			...manifest
+		};
+	}
+	function componentRegistry(manifests) {
+		const registry = {};
+		for (const manifest of manifests) {
+			if (manifest.name in registry) throw new Error(`Component <${manifest.name}> is defined twice`);
+			registry[manifest.name] = manifest;
+		}
+		return registry;
+	}
+	const builtinComponents = {
+		Button: defineComponent({
+			name: "Button",
+			props: {
+				variant: ["primary", "secondary"],
+				disabled: "boolean"
+			},
+			events: ["click"],
+			children: "text"
+		}),
+		Image: defineComponent({
+			name: "Image",
+			props: {
+				src: "string",
+				alt: "string",
+				width: "number",
+				height: "number"
+			},
+			events: ["load", "error"],
+			children: "none"
+		}),
+		Input: defineComponent({
+			name: "Input",
+			props: {
+				value: "string",
+				placeholder: "string",
+				label: "string",
+				type: [
+					"text",
+					"number",
+					"email",
+					"phone",
+					"password"
+				],
+				maxLength: "number",
+				disabled: "boolean"
+			},
+			events: ["change", "submit"],
+			children: "none"
+		}),
+		Text: defineComponent({
+			name: "Text",
+			props: { variant: [
+				"title",
+				"body",
+				"caption"
+			] },
+			children: "text",
+			inline: true
+		}),
+		View: defineComponent({
+			name: "View",
+			props: {
+				direction: ["column", "row"],
+				gap: [
+					"none",
+					"small",
+					"medium",
+					"large"
+				],
+				align: [
+					"stretch",
+					"start",
+					"center",
+					"end"
+				],
+				variant: ["plain", "card"]
+			},
+			events: ["tap"],
+			children: "elements"
+		})
+	};
+	componentRegistry(Object.values(builtinComponents));
+	var HostError = class extends Error {
+		name = "HostError";
+		code;
+		constructor(code, message) {
+			super(message);
+			this.code = code;
+		}
+	};
+	const SEMVER_PATTERN = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
+	function majorVersion(version) {
+		return parseVersion(version).major;
+	}
+	function isVersionAtLeast(version, minimum) {
+		return compareVersions(version, minimum) >= 0;
+	}
+	function compareVersions(left, right) {
+		const leftVersion = parseVersion(left);
+		const rightVersion = parseVersion(right);
+		const differences = [
+			leftVersion.major - rightVersion.major,
+			leftVersion.minor - rightVersion.minor,
+			leftVersion.patch - rightVersion.patch
+		];
+		for (const difference of differences) if (difference !== 0) return difference;
+		return comparePrereleases(leftVersion.prerelease, rightVersion.prerelease);
+	}
+	function parseVersion(version) {
+		const match = SEMVER_PATTERN.exec(version);
+		if (!match) throw new Error(`"${version}" is not a semantic version`);
+		const [, major, minor, patch, prerelease] = match;
+		return {
+			major: Number(major),
+			minor: Number(minor),
+			patch: Number(patch),
+			prerelease: prerelease === void 0 ? [] : prerelease.split(".")
+		};
+	}
+	function comparePrereleases(left, right) {
+		if (left.length === 0 || right.length === 0) return right.length - left.length;
+		const shared = Math.min(left.length, right.length);
+		for (let index = 0; index < shared; index++) {
+			const order = compareIdentifiers(left[index], right[index]);
+			if (order !== 0) return order;
+		}
+		return left.length - right.length;
+	}
+	function compareIdentifiers(left, right) {
+		const leftIsNumber = /^\d+$/.test(left);
+		const rightIsNumber = /^\d+$/.test(right);
+		if (leftIsNumber && rightIsNumber) return Number(left) - Number(right);
+		if (leftIsNumber) return -1;
+		if (rightIsNumber) return 1;
+		if (left < right) return -1;
+		if (left > right) return 1;
+		return 0;
+	}
+	function isReactCompatible(hostVersion, dotVersion) {
+		return majorVersion(hostVersion) === majorVersion(dotVersion) && isVersionAtLeast(hostVersion, dotVersion);
+	}
+	function createAdaptorTransport(adapter) {
+		return {
+			post: (message) => adapter.postMessage(message),
+			listen(listener) {
+				const onMessage = (event) => listener(event.data);
+				adapter.addEventListener("message", onMessage);
+				return () => adapter.removeEventListener("message", onMessage);
+			}
+		};
+	}
+	var NavigationStack = class {
+		limit;
+		#pages = [];
+		#nextInstanceId = 1;
+		constructor(limit = 8) {
+			this.limit = limit;
+		}
+		get pages() {
+			return this.#pages;
+		}
+		get top() {
+			return this.#pages.at(-1);
+		}
+		/**
+		* Applies a navigation, or refuses it and returns false: a push onto a full stack, or going back
+		* from the first page (which the host handles itself, e.g. by closing the dot).
+		*/
+		apply(navigation) {
+			switch (navigation.action) {
+				case "push":
+					if (this.#pages.length >= this.limit) return false;
+					break;
+				case "replace":
+					this.#pages.pop();
+					break;
+				case "reset":
+					this.#pages = [];
+					break;
+				case "back": {
+					const count = Math.min(navigation.delta, this.#pages.length - 1);
+					if (count < 1) return false;
+					this.#pages = this.#pages.slice(0, -count);
+					return true;
+				}
+			}
+			const { page, options } = navigation;
+			this.#pages = [...this.#pages, {
+				instanceId: this.#nextInstanceId++,
+				page,
+				options
+			}];
+			return true;
+		}
+	};
+	//#endregion
+	//#region src/compatibility.ts
+	var IncompatibleDotError = class extends Error {
+		name = "IncompatibleDotError";
+		reason;
+		constructor(reason, message) {
+			super(message);
+			this.reason = reason;
+		}
+	};
+	function checkCompatibility(manifest, { dashVersion, minRuntimeVersion, reactVersions }) {
+		if (!isVersionAtLeast(manifest.runtime, minRuntimeVersion)) throw new IncompatibleDotError("runtimeTooOld", `This dot was built with Dot runtime ${manifest.runtime}, but this host runs ${minRuntimeVersion} or newer. Rebuild it with a newer @monimesl/dot-runtime.`);
+		const minDashVersion = manifest.dash?.minVersion;
+		if (minDashVersion !== void 0 && !isVersionAtLeast(dashVersion, minDashVersion)) throw new IncompatibleDotError("dashTooOld", `This dot needs Dash ${minDashVersion} or newer, and this is Dash ${dashVersion}.`);
+		if (reactVersions !== void 0 && !reactVersions.some((version) => isReactCompatible(version, manifest.react))) throw new IncompatibleDotError("reactUnavailable", `This dot needs React ${manifest.react} or a newer ${majorVersion(manifest.react)}.x, which this host doesn't ship.`);
+	}
+	//#endregion
+	//#region src/host-calls.ts
+	const UI_METHOD_PREFIX = "dash.ui.";
+	var HostCallRunner = class {
+		#handlers;
+		#permissions;
+		#answer;
+		#running = /* @__PURE__ */ new Map();
+		constructor(handlers, permissions, answer) {
+			this.#handlers = handlers;
+			this.#permissions = permissions;
+			this.#answer = answer;
+		}
+		run({ id, method, params, timeout }) {
+			const entry = this.#handlers[method];
+			if (!entry) {
+				this.#answer({
+					id,
+					error: {
+						code: "unsupported",
+						message: `This host has no "${method}"`
+					}
+				});
+				return;
+			}
+			const call = {
+				method,
+				controller: new AbortController()
+			};
+			if (timeout !== void 0) call.timer = setTimeout(() => {
+				this.#fail(id, new HostError("timeout", `"${method}" took longer than ${timeout}ms`));
+			}, timeout);
+			this.#running.set(id, call);
+			this.#invoke(id, entry, {
+				method,
+				params,
+				signal: call.controller.signal
+			});
+		}
+		cancel(id) {
+			this.#end(id)?.controller.abort();
+		}
+		dismissUI() {
+			for (const [id, call] of this.#running) if (call.method.startsWith(UI_METHOD_PREFIX)) this.#fail(id, new HostError("cancelled", "The page it was shown on is no longer on top"));
+		}
+		async #invoke(id, entry, call) {
+			try {
+				if (typeof entry === "function") {
+					this.#succeed(id, await entry(call));
+					return;
+				}
+				await this.#permissions.check(call.method, entry.permission, call.signal);
+				this.#succeed(id, await entry.handle(call));
+			} catch (error) {
+				this.#fail(id, error);
+			}
+		}
+		#succeed(id, value) {
+			if (this.#end(id)) this.#answer({
+				id,
+				value
+			});
+		}
+		#fail(id, error) {
+			const call = this.#end(id);
+			if (!call) return;
+			call.controller.abort();
+			this.#answer({
+				id,
+				error: describeError(error)
+			});
+		}
+		#end(id) {
+			const call = this.#running.get(id);
+			if (call) {
+				this.#running.delete(id);
+				clearTimeout(call.timer);
+			}
+			return call;
+		}
+	};
+	function describeError(error) {
+		if (error instanceof HostError) return {
+			code: error.code,
+			message: error.message
+		};
+		return {
+			code: "failed",
+			message: error instanceof Error ? error.message : String(error)
+		};
+	}
+	//#endregion
+	//#region src/permissions.ts
+	var PermissionGate = class {
+		#dotName;
+		#declared;
+		#ask;
+		#answers = /* @__PURE__ */ new Map();
+		constructor(dotName, declared, ask) {
+			this.#dotName = dotName;
+			this.#declared = declared;
+			this.#ask = ask;
+		}
+		async check(method, permission, signal) {
+			const reason = this.#declared[permission];
+			if (reason === void 0) throw new HostError("denied", `"${method}" needs the "${permission}" permission. Add it to dot.json's permissions, with the reason Dash shows the person.`);
+			let allowed = this.#answers.get(permission);
+			if (allowed === void 0) {
+				allowed = await this.#ask({
+					dotName: this.#dotName,
+					permission,
+					reason
+				}, signal);
+				this.#answers.set(permission, allowed);
+			}
+			if (!allowed) throw new HostError("denied", `The person did not allow "${permission}"`);
+		}
+	};
+	//#endregion
+	//#region src/host.ts
+	function startHost({ logic, ui, manifest, dashVersion, minRuntimeVersion, systemContext, handlers = {}, askPermission, observe }) {
+		checkCompatibility(manifest, {
+			dashVersion,
+			minRuntimeVersion
+		});
+		const stack = new NavigationStack();
+		let context = systemContext;
+		const calls = new HostCallRunner(handlers, new PermissionGate(manifest.name, manifest.permissions ?? {}, askPermission), (result) => {
+			const message = {
+				type: "hostResult",
+				payload: result
+			};
+			observe?.("fromHost", message);
+			logic.post(message);
+		});
+		const broadcast = (message) => {
+			observe?.("fromHost", message);
+			ui.post(message);
+			logic.post(message);
+		};
+		const syncStack = () => {
+			const message = {
+				type: "syncStack",
+				payload: {
+					pages: stack.pages,
+					limit: stack.limit
+				}
+			};
+			broadcast(message);
+		};
+		const syncSystemContext = () => {
+			broadcast({
+				type: "syncSystemContext",
+				payload: context
+			});
+		};
+		const navigate = (navigation) => {
+			if (navigation.action !== "back" && !manifest.pages.includes(navigation.page)) return false;
+			const previousTop = stack.top;
+			if (!stack.apply(navigation)) return false;
+			syncStack();
+			if (stack.top !== previousTop) calls.dismissUI();
+			return true;
+		};
+		const navigateFromPage = ({ from, ...navigation }) => {
+			if (from === stack.top?.instanceId) navigate(navigation);
+		};
+		const hostMessageHandlers = /* @__PURE__ */ new Map([
+			["navigate", (payload) => navigateFromPage(payload)],
+			["hostCall", (payload) => calls.run(payload)],
+			["hostCancel", (payload) => calls.cancel(payload.id)]
+		]);
+		const stopService = logic.listen((raw) => {
+			const message = raw;
+			const handleHostMessage = hostMessageHandlers.get(message.type);
+			if (handleHostMessage) {
+				observe?.("toHost", message);
+				handleHostMessage(message.payload);
+				return;
+			}
+			observe?.("toWebview", message);
+			ui.post(message);
+		});
+		const stopWebview = ui.listen((raw) => {
+			const message = raw;
+			observe?.("toService", message);
+			logic.post(message);
+			if (message.type === "connect") {
+				syncSystemContext();
+				navigate({
+					action: "reset",
+					page: manifest.entry,
+					options: {}
+				});
+			}
+		});
+		return {
+			back: () => navigate({
+				action: "back",
+				delta: 1
+			}),
+			setSystemContext: (next) => {
+				context = next;
+				syncSystemContext();
+			},
+			stop: () => {
+				stopService();
+				stopWebview();
+			}
+		};
+	}
+	const SIMULATOR_VERSIONS = {
+		dashVersion: "1.0.0",
+		minRuntimeVersion: "0.1.0-alpha.1"
+	};
+	//#endregion
+	//#region src/paths.ts
+	const CLIENT_PATH = "/__dot/";
+	const EVENTS_PATH = `${CLIENT_PATH}events`;
+	const DOT_PATH = "/dot/";
+	const WEBVIEW_URL = `${DOT_PATH}ui/index.html`;
+	const MANIFEST_URL = `${DOT_PATH}manifest.json`;
+	//#endregion
+	//#region src/client/dash/system.ts
+	const SHAKE_DURATION_MS = 300;
+	const SHAKE = [
+		{ transform: "translateX(0)" },
+		{ transform: "translateX(-5px)" },
+		{ transform: "translateX(5px)" },
+		{ transform: "translateX(-3px)" },
+		{ transform: "translateX(3px)" },
+		{ transform: "translateX(0)" }
+	];
+	async function vibrate(phone, note, options) {
+		note(`vibrated: ${options.style}`);
+		await phone.animate(SHAKE, { duration: SHAKE_DURATION_MS }).finished;
+	}
+	function torch(phone, note, state) {
+		phone.dataset.torch = state;
+		note(`torch: ${state}`);
+	}
+	//#endregion
+	//#region src/client/dom.ts
+	function element(selector) {
+		const node = document.querySelector(selector);
+		if (!node) throw new Error(`Simulator page is missing ${selector}`);
+		return node;
+	}
+	function createElement(tag, className, text) {
+		const node = document.createElement(tag);
+		node.className = className;
+		if (text !== void 0) node.textContent = text;
+		return node;
+	}
+	//#endregion
+	//#region src/client/dash/ui.ts
+	const DEFAULT_ACTIONS = [{
+		id: "ok",
+		label: "OK"
+	}];
+	function alert(phone, options, signal) {
+		return new Promise((resolve, reject) => {
+			const layer = createElement("div", "dialog-layer");
+			const dialog = createElement("div", "dialog");
+			dialog.setAttribute("role", "alertdialog");
+			const body = createElement("div", "dialog-body");
+			body.append(createElement("div", "dialog-title", options.title));
+			if (options.message) body.append(createElement("div", "dialog-message", options.message));
+			const actions = options.actions ?? DEFAULT_ACTIONS;
+			const buttons = createElement("div", actions.length === 2 ? "dialog-actions" : "dialog-actions stacked");
+			for (const action of actions) {
+				const button = createElement("button", action.role ?? "default", action.label);
+				button.addEventListener("click", () => {
+					layer.remove();
+					resolve({ action: action.id });
+				});
+				buttons.append(button);
+			}
+			dialog.append(body, buttons);
+			layer.append(dialog);
+			signal.addEventListener("abort", () => {
+				layer.remove();
+				reject(new HostError("cancelled", "The alert was dismissed"));
+			});
+			phone.append(layer);
+		});
+	}
+	//#endregion
+	//#region src/client/dash/index.ts
+	function dashHandlers(phone, note) {
+		return {
+			"dash.ui.alert": ({ params, signal }) => alert(phone, params, signal),
+			"dash.system.vibrate": ({ params }) => vibrate(phone, note, params),
+			"dash.system.torch": ({ params }) => torch(phone, note, params.state)
+		};
+	}
+	//#endregion
+	//#region src/client/dash/permissions.ts
+	const PERMISSION_SUMMARIES = { account: "see your Dash account: your name, and your email or phone" };
+	async function askPermission(phone, note, request, signal) {
+		const { action } = await alert(phone, {
+			title: `Allow “${request.dotName}” to ${PERMISSION_SUMMARIES[request.permission]}?`,
+			message: request.reason,
+			actions: [{
+				id: "deny",
+				label: "Don't Allow",
+				role: "cancel"
+			}, {
+				id: "allow",
+				label: "Allow"
+			}]
+		}, signal);
+		const allowed = action === "allow";
+		if (allowed) note(`permission ${request.permission}: allowed`);
+		else note(`permission ${request.permission}: not allowed`);
+		return allowed;
+	}
+	//#endregion
+	//#region src/client/wire.ts
+	function isWire(data) {
+		return typeof data?.dot === "string";
+	}
+	function wireTransport(channel) {
+		return {
+			post: (message) => channel.post({ dot: JSON.stringify(message) }),
+			listen: (listener) => channel.listen((data) => {
+				if (isWire(data)) listener(JSON.parse(data.dot));
+			})
+		};
+	}
+	function windowChannel(other) {
+		return {
+			post: (message) => other()?.postMessage(message, location.origin),
+			listen(listener) {
+				const onMessage = (event) => {
+					if (event.source === other()) listener(event.data);
+				};
+				window.addEventListener("message", onMessage);
+				return () => window.removeEventListener("message", onMessage);
+			}
+		};
+	}
+	//#endregion
+	//#region src/client/simulator.ts
+	const MAX_LOG_ENTRIES = 500;
+	const screen = element("#screen");
+	const log = element("#log");
+	const errorBanner = element("#error");
+	const phone = element(".phone");
+	const schemeSelect = element("#scheme");
+	const browserDark = matchMedia("(prefers-color-scheme: dark)");
+	let runningApp = null;
+	let launchCount = 0;
+	async function launch() {
+		stopRunningApp();
+		launchCount += 1;
+		const thisLaunch = launchCount;
+		if (log.childElementCount > 0) note("dot restarted");
+		let manifest;
+		try {
+			manifest = await (await fetch(MANIFEST_URL)).json();
+		} catch {
+			showError(`Nothing to run: ${MANIFEST_URL} is missing. Did the build fail?`);
+			return;
+		}
+		if (thisLaunch !== launchCount) return;
+		try {
+			checkCompatibility(manifest, SIMULATOR_VERSIONS);
+		} catch (error) {
+			screen.src = "about:blank";
+			showError(error.message);
+			return;
+		}
+		const worker = new Worker(`${CLIENT_PATH}service-bridge.js`);
+		const host = startHost({
+			logic: wireTransport(createAdaptorTransport(worker)),
+			ui: wireTransport(windowChannel(() => screen.contentWindow)),
+			manifest,
+			...SIMULATOR_VERSIONS,
+			systemContext: systemContext(),
+			handlers: dashHandlers(phone, note),
+			askPermission: (request, signal) => askPermission(phone, note, request, signal),
+			observe: record
+		});
+		worker.addEventListener("error", (event) => showError(`Service crashed: ${event.message}`));
+		screen.src = WEBVIEW_URL;
+		runningApp = {
+			host,
+			worker
+		};
+	}
+	function stopRunningApp() {
+		if (!runningApp) return;
+		runningApp.host.stop();
+		runningApp.worker.terminate();
+		runningApp = null;
+	}
+	function goBack() {
+		if (runningApp && !runningApp.host.back()) note("back on the first page: a device would close the dot");
+	}
+	const ARROWS = {
+		toHost: "both --> host",
+		fromHost: "host --> both",
+		toService: "ui --> logic",
+		toWebview: "logic <-- ui"
+	};
+	function note(text) {
+		log.append(createElement("li", "note", text));
+	}
+	function record(direction, message) {
+		const entry = createElement("li", direction);
+		const details = document.createElement("details");
+		const summary = document.createElement("summary");
+		const time = (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour12: false });
+		summary.append(createElement("span", "time", time), createElement("span", "arrow", ARROWS[direction]), createElement("span", "type", message.type));
+		const payload = document.createElement("pre");
+		payload.textContent = JSON.stringify(message.payload, null, 2);
+		details.append(summary, payload);
+		entry.append(details);
+		if (message.type === "error") entry.classList.add("failed");
+		log.append(entry);
+		while (log.childElementCount > MAX_LOG_ENTRIES) log.firstElementChild?.remove();
+		log.scrollTop = log.scrollHeight;
+	}
+	function syncLaunch() {
+		launch().catch((error) => {
+			showError(`Could not start the dot: ${String(error)}`);
+		});
+	}
+	function showError(message) {
+		errorBanner.hidden = message === null;
+		errorBanner.textContent = message ?? "";
+	}
+	function systemContext() {
+		return {
+			scheme: schemeSelect.value,
+			appState: appState()
+		};
+	}
+	function appState() {
+		if (document.visibilityState === "hidden") return "background";
+		return "active";
+	}
+	function browserScheme() {
+		return browserDark.matches ? "dark" : "light";
+	}
+	function changeScheme(scheme) {
+		schemeSelect.value = scheme;
+		phone.dataset.scheme = scheme;
+		runningApp?.host.setSystemContext(systemContext());
+	}
+	const events = new EventSource(EVENTS_PATH);
+	events.addEventListener("reload", () => {
+		showError(null);
+		syncLaunch();
+	});
+	events.addEventListener("build-error", (event) => showError(String(event.data)));
+	element("#reload").addEventListener("click", syncLaunch);
+	element("#back").addEventListener("click", goBack);
+	element("#clear").addEventListener("click", () => log.replaceChildren());
+	schemeSelect.addEventListener("change", () => changeScheme(schemeSelect.value));
+	browserDark.addEventListener("change", () => changeScheme(browserScheme()));
+	document.addEventListener("visibilitychange", () => {
+		runningApp?.host.setSystemContext(systemContext());
+	});
+	changeScheme(browserScheme());
+	syncLaunch();
+	//#endregion
+})();
+
+//# sourceMappingURL=simulator.js.map