@monimesl/dot-simulator 0.1.0-alpha.10

package/README.md

@@ -0,0 +1,20 @@
+# @monimesl/dot-simulator
+
+The browser host for dots, used during development. `dotctl dev` starts it. It runs the service
+bundle in a Worker and shows the webview in a phone-sized frame. It relays messages between them,
+owns the navigation stack, and logs every message. See [docs/hosts.md](../../../docs/hosts.md).
+
+```ts
+import { startSimulator } from '@monimesl/dot-simulator';
+
+const simulator = await startSimulator({ dotDir: 'my-dot/dist', name: 'My dot', port: 3680 });
+simulator.reload(); // restart the dot after a rebuild
+simulator.error('view.dml:3:7: ...'); // show a build error over the phone
+```
+
+- `src/server.ts` serves the simulator page, the dot's bundles and the reload event stream. It
+  injects the bridge into the webview's `index.html`, and runs Dash's network and storage calls.
+- `src/host.ts` has `startHost()`, which does what every host does. It relays messages, owns the
+  navigation stack (`NavigationStack` from core) and announces it with `syncStack`.
+- `src/client/` holds the browser scripts. `simulator.js` is the page, and `webview-bridge.js` and
+  `service-bridge.js` install `__hostTransport` in each layer.

package/dist/client/service-bridge.js

@@ -0,0 +1,647 @@
+(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 AmountInput = defineComponent({
+		name: "AmountInput",
+		props: {
+			value: "number",
+			currency: "string",
+			minorUnits: "number",
+			unit: ["minor", "major"],
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Button = defineComponent({
+		name: "Button",
+		props: {
+			variant: ["primary", "secondary"],
+			disabled: "boolean",
+			loading: "boolean"
+		},
+		events: ["click"],
+		children: "text"
+	});
+	const SIZES = [
+		"small",
+		"medium",
+		"large"
+	];
+	const SPACES = [
+		"none",
+		"small",
+		"medium",
+		"large"
+	];
+	const PADDING_PROPS = {
+		padding: SPACES,
+		paddingTop: SPACES,
+		paddingStart: SPACES,
+		paddingEnd: SPACES,
+		paddingBottom: SPACES
+	};
+	const ASPECTS = [
+		"1:1",
+		"4:3",
+		"3:2",
+		"16:9",
+		"3:4",
+		"2:3",
+		"9:16"
+	];
+	const TONES = [
+		"default",
+		"muted",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const STATUS_TONES = [
+		"default",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const ICON_NAMES = [
+		"arrow-down",
+		"arrow-left",
+		"arrow-right",
+		"arrow-up",
+		"bank",
+		"bell",
+		"bolt",
+		"calendar",
+		"card",
+		"cart",
+		"cash",
+		"check",
+		"chevron-down",
+		"chevron-left",
+		"chevron-right",
+		"chevron-up",
+		"clock",
+		"close",
+		"copy",
+		"download",
+		"edit",
+		"error",
+		"external-link",
+		"eye",
+		"eye-off",
+		"file",
+		"gift",
+		"globe",
+		"grid",
+		"headphones",
+		"heart",
+		"help",
+		"history",
+		"home",
+		"image",
+		"info",
+		"link",
+		"list",
+		"location",
+		"lock",
+		"logout",
+		"mail",
+		"microphone",
+		"minus",
+		"mobile",
+		"more",
+		"music",
+		"phone",
+		"playlist",
+		"plus",
+		"qr-code",
+		"receipt",
+		"refresh",
+		"search",
+		"send",
+		"settings",
+		"share",
+		"star",
+		"success",
+		"ticket",
+		"trash",
+		"upload",
+		"user",
+		"users",
+		"video",
+		"wallet",
+		"warning",
+		"water",
+		"wifi"
+	];
+	const Carousel = defineComponent({
+		name: "Carousel",
+		props: {
+			autoplay: "boolean",
+			interval: "number",
+			loop: "boolean",
+			indicator: ["dots", "none"],
+			gap: SPACES,
+			effect: ["slide", "scale"],
+			index: "number",
+			...PADDING_PROPS
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Chip = defineComponent({
+		name: "Chip",
+		props: {
+			label: "string",
+			icon: ICON_NAMES,
+			selected: "boolean",
+			disabled: "boolean"
+		},
+		events: ["tap"],
+		children: "none"
+	});
+	const CodeInput = defineComponent({
+		name: "CodeInput",
+		props: {
+			value: "string",
+			length: "number",
+			label: "string",
+			hint: "string",
+			error: "string",
+			secure: "boolean",
+			disabled: "boolean"
+		},
+		events: ["change", "complete"],
+		children: "none"
+	});
+	const DetailRow = defineComponent({
+		name: "DetailRow",
+		props: {
+			label: "string",
+			value: "string",
+			tone: TONES,
+			weight: [
+				"regular",
+				"medium",
+				"bold"
+			],
+			...PADDING_PROPS
+		},
+		children: "none"
+	});
+	const Divider = defineComponent({
+		name: "Divider",
+		children: "none"
+	});
+	const EmptyState = defineComponent({
+		name: "EmptyState",
+		props: {
+			icon: ICON_NAMES,
+			title: "string",
+			text: "string",
+			...PADDING_PROPS
+		},
+		children: "elements"
+	});
+	const Spinner = defineComponent({
+		name: "Spinner",
+		props: { size: SIZES },
+		children: "none"
+	});
+	const ProgressBar = defineComponent({
+		name: "ProgressBar",
+		props: { value: "number" },
+		children: "none"
+	});
+	const Notice = defineComponent({
+		name: "Notice",
+		props: {
+			tone: STATUS_TONES,
+			title: "string",
+			...PADDING_PROPS
+		},
+		children: "text"
+	});
+	const Badge = defineComponent({
+		name: "Badge",
+		props: { tone: STATUS_TONES },
+		children: "text"
+	});
+	const Footer = defineComponent({
+		name: "Footer",
+		props: PADDING_PROPS,
+		children: "elements"
+	});
+	const Grid = defineComponent({
+		name: "Grid",
+		props: {
+			columns: "number",
+			gap: SPACES,
+			...PADDING_PROPS
+		},
+		children: "elements"
+	});
+	const GridItem = defineComponent({
+		name: "GridItem",
+		props: {
+			label: "string",
+			icon: ICON_NAMES,
+			image: "string",
+			badge: "string"
+		},
+		events: ["tap"],
+		children: "none"
+	});
+	const Icon = defineComponent({
+		name: "Icon",
+		props: {
+			name: ICON_NAMES,
+			size: SIZES,
+			tone: TONES
+		},
+		children: "none",
+		inline: true
+	});
+	const Image = defineComponent({
+		name: "Image",
+		props: {
+			src: "string",
+			alt: "string",
+			width: "number",
+			height: "number",
+			fit: ["cover", "contain"],
+			shape: [
+				"rounded",
+				"square",
+				"circle"
+			],
+			aspect: ASPECTS
+		},
+		events: ["load", "error"],
+		children: "none",
+		overrides: [{
+			prop: "aspect",
+			ignores: "height",
+			because: "the aspect sets the height"
+		}]
+	});
+	const Input = defineComponent({
+		name: "Input",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			prefix: "string",
+			suffix: "string",
+			type: [
+				"text",
+				"number",
+				"email",
+				"phone",
+				"password"
+			],
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change", "submit"],
+		children: "none"
+	});
+	const Link = defineComponent({
+		name: "Link",
+		props: {
+			href: "string",
+			tone: TONES
+		},
+		events: ["tap"],
+		children: "text",
+		inline: true
+	});
+	const List = defineComponent({
+		name: "List",
+		props: {
+			size: ["sm", "md"],
+			...PADDING_PROPS
+		},
+		events: ["endReached"],
+		children: "elements"
+	});
+	const ListItem = defineComponent({
+		name: "ListItem",
+		props: {
+			title: "string",
+			subtitle: "string",
+			value: "string",
+			icon: ICON_NAMES,
+			image: "string",
+			...PADDING_PROPS
+		},
+		events: ["tap"],
+		children: "elements"
+	});
+	const Sheet = defineComponent({
+		name: "Sheet",
+		props: {
+			open: "boolean",
+			title: "string",
+			showCloseIcon: "boolean",
+			...PADDING_PROPS
+		},
+		events: ["close"],
+		children: "elements"
+	});
+	const Toast = defineComponent({
+		name: "Toast",
+		props: {
+			message: "string",
+			tone: STATUS_TONES,
+			duration: "number"
+		},
+		events: ["hide"],
+		children: "none"
+	});
+	const QRCode = defineComponent({
+		name: "QRCode",
+		props: {
+			value: "string",
+			size: "number",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Select = defineComponent({
+		name: "Select",
+		props: {
+			value: "string",
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Option = defineComponent({
+		name: "Option",
+		props: {
+			value: "string",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Scroll = defineComponent({
+		name: "Scroll",
+		props: {
+			gap: SPACES,
+			snap: [
+				"none",
+				"start",
+				"center"
+			],
+			index: "number",
+			...PADDING_PROPS
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Skeleton = defineComponent({
+		name: "Skeleton",
+		props: {
+			shape: [
+				"text",
+				"circle",
+				"box"
+			],
+			lines: "number",
+			height: "number"
+		},
+		children: "none"
+	});
+	const Tabs = defineComponent({
+		name: "Tabs",
+		props: {
+			value: "string",
+			variant: ["underline", "segmented"],
+			...PADDING_PROPS
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Tab = defineComponent({
+		name: "Tab",
+		props: {
+			value: "string",
+			label: "string",
+			badge: "number"
+		},
+		children: "none"
+	});
+	const Text = defineComponent({
+		name: "Text",
+		props: {
+			variant: [
+				"title",
+				"body",
+				"caption"
+			],
+			tone: TONES,
+			weight: [
+				"regular",
+				"medium",
+				"bold"
+			],
+			align: [
+				"start",
+				"center",
+				"end"
+			],
+			maxLines: "number",
+			...PADDING_PROPS
+		},
+		children: "text",
+		inline: true
+	});
+	const TextArea = defineComponent({
+		name: "TextArea",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			rows: "number",
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Switch = defineComponent({
+		name: "Switch",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Checkbox = defineComponent({
+		name: "Checkbox",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const RadioGroup = defineComponent({
+		name: "RadioGroup",
+		props: {
+			value: "string",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const builtinComponents = {
+		AmountInput,
+		Badge,
+		Button,
+		Carousel,
+		Checkbox,
+		Chip,
+		CodeInput,
+		DetailRow,
+		Divider,
+		EmptyState,
+		Footer,
+		Grid,
+		GridItem,
+		Icon,
+		Image,
+		Input,
+		Link,
+		List,
+		ListItem,
+		Notice,
+		Option,
+		ProgressBar,
+		QRCode,
+		Radio: defineComponent({
+			name: "Radio",
+			props: {
+				value: "string",
+				label: "string",
+				disabled: "boolean"
+			},
+			children: "none"
+		}),
+		RadioGroup,
+		Scroll,
+		Select,
+		Sheet,
+		Skeleton,
+		Spinner,
+		Switch,
+		Tab,
+		Tabs,
+		Text,
+		TextArea,
+		Toast,
+		View: defineComponent({
+			name: "View",
+			props: {
+				gap: SPACES,
+				direction: ["column", "row"],
+				align: [
+					"stretch",
+					"start",
+					"center",
+					"end"
+				],
+				justify: [
+					"start",
+					"center",
+					"end",
+					"between"
+				],
+				wrap: "boolean",
+				grow: "boolean",
+				...PADDING_PROPS,
+				variant: ["plain", "card"]
+			},
+			events: ["tap"],
+			children: "elements"
+		})
+	};
+	componentRegistry(Object.values(builtinComponents));
+	const LABEL = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+	new RegExp(`^(?:\\*\\.${LABEL}(?:\\.${LABEL})+|${LABEL}(?:\\.${LABEL})*)$`);
+	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);
+			}
+		};
+	}
+	const SERVICE_URL = `/dot/logic/dot.js`;
+	//#endregion
+	//#region src/client/hot-reload.ts
+	function hotReloadIn(data) {
+		const reload = data?.dotHotReload;
+		return typeof reload === "number" ? reload : void 0;
+	}
+	//#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));
+			})
+		};
+	}
+	//#endregion
+	//#region src/client/service-bridge.ts
+	const scope = globalThis;
+	globalThis.__hostTransport = wireTransport(createAdaptorTransport(scope));
+	scope.importScripts(SERVICE_URL);
+	scope.addEventListener("message", ({ data }) => {
+		const reload = hotReloadIn(data);
+		if (reload !== void 0) scope.importScripts(`${SERVICE_URL}?hot=${reload}`);
+	});
+	//#endregion
+})();
+
+//# sourceMappingURL=service-bridge.js.map