@monimesl/dot-compiler 0.1.0-alpha.10

package/dist/index.js

@@ -0,0 +1,1013 @@
+import { createRequire } from "node:module";
+import { existsSync, readFileSync, realpathSync } from "node:fs";
+import { dirname, extname, join, relative, resolve, sep } from "node:path";
+import { copyFile, mkdir, readFile, readdir, rm, stat, writeFile } from "node:fs/promises";
+import { ScriptParseError, parseDotModule, parseExpression, parseLogicModule, parseStateModule, unboundReferences } from "@monimesl/dot-script-parser";
+import { PERMISSIONS, REACT_HOST_MODULES, SourceError, builtinComponents, builtinRegistry, componentRegistry, eventName, isNetworkHost, isPermission, isSemanticVersion, reactHostUrl } from "@monimesl/dot-core";
+import { zipSync } from "fflate";
+import { rolldown } from "rolldown";
+import { esmExternalRequirePlugin } from "rolldown/plugins";
+import { parseDmlToIR } from "@monimesl/dot-dml-parser";
+import { parseEnv } from "node:util";
+//#region src/errors.ts
+var CompileError = class extends SourceError {
+	name = "CompileError";
+};
+/** A problem that does not stop compilation. */
+var CompileWarning = class extends SourceError {
+	name = "CompileWarning";
+};
+//#endregion
+//#region src/project/categories.ts
+const CATEGORIES = [
+	"agriculture",
+	"asset_finance",
+	"donations",
+	"education",
+	"electricity",
+	"entertainment",
+	"events",
+	"finance",
+	"food_and_drink",
+	"gambling",
+	"games",
+	"government",
+	"health",
+	"insurance",
+	"internet_service_provider",
+	"investments",
+	"jobs",
+	"lifestyle",
+	"loans",
+	"micro_credit",
+	"microfinance",
+	"news",
+	"other",
+	"productivity",
+	"real_estate",
+	"religion",
+	"remittances",
+	"savings",
+	"shopping",
+	"social",
+	"sports",
+	"telecom",
+	"television",
+	"transport",
+	"travel",
+	"utilities",
+	"water"
+];
+function isCategory(value) {
+	return CATEGORIES.includes(value);
+}
+//#endregion
+//#region src/project/dot-json.ts
+const DOT_JSON_FILE = "dot.json";
+const DOT_JSON_FIELDS = [
+	"$schema",
+	"id",
+	"name",
+	"version",
+	"description",
+	"categories",
+	"icon",
+	"permissions",
+	"network",
+	"dash"
+];
+const REQUIRED_DOT_JSON_FIELDS = [
+	"id",
+	"name",
+	"version"
+];
+const DASH_FIELDS = ["minVersion"];
+const NETWORK_FIELDS = ["hosts"];
+const ID_WORD = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+const DOT_ID_PATTERN = new RegExp(`^(?=[a-z])${ID_WORD}(?:\\.${ID_WORD})+$`);
+async function readDotJson(file) {
+	let dotJson;
+	try {
+		dotJson = JSON.parse(await readFile(file, "utf8"));
+	} catch (error) {
+		throw new CompileError(`This isn't valid JSON: ${error.message}`, file);
+	}
+	if (!isObject(dotJson)) throw new CompileError("dot.json must be an object, such as { \"id\": \"com.example.shop\", \"name\": \"Shop\", \"version\": \"1.0.0\" }", file);
+	if ("pages" in dotJson) throw new CompileError("List pages in dot.ts, not here: defineDot({ pages: [...] })", file);
+	rejectUnknownFields(dotJson, DOT_JSON_FIELDS, file);
+	for (const field of REQUIRED_DOT_JSON_FIELDS) if (dotJson[field] === void 0) throw new CompileError(`"${field}" is required`, file);
+	const { $schema, id, name, version, description, categories, icon, permissions, network, dash } = dotJson;
+	if ($schema !== void 0 && typeof $schema !== "string") throw new CompileError("\"$schema\" must be a string", file);
+	if (typeof id !== "string" || !DOT_ID_PATTERN.test(id)) throw new CompileError("\"id\" must be a reverse domain name, such as \"com.example.counter\". Use lowercase letters, digits and hyphens, with dots between words. A word can't start or end with a hyphen, or be longer than 63 characters.", file);
+	if (id.length > 128) throw new CompileError(`"id" must be at most 128 characters`, file);
+	if (!isNonEmptyString(name)) throw new CompileError("\"name\" must be text, and not empty", file);
+	if (!isSemanticVersion(version)) throw new CompileError("\"version\" must be a semantic version, such as \"1.0.0\"", file);
+	if (description !== void 0 && !isNonEmptyString(description)) throw new CompileError("\"description\" must be text, and not empty", file);
+	if (icon !== void 0 && !(isNonEmptyString(icon) && icon.endsWith(".png"))) throw new CompileError("\"icon\" must be the path to a PNG file, such as \"icon.png\"", file);
+	return {
+		id,
+		name,
+		version,
+		description,
+		categories: readCategories(categories, file),
+		icon,
+		permissions: readPermissions(permissions, file),
+		network: readNetworkAccess(network, file),
+		dash: readDashRequirements(dash, file)
+	};
+}
+function readCategories(categories, file) {
+	if (categories === void 0) return;
+	if (!Array.isArray(categories) || categories.length === 0) throw new CompileError("\"categories\" must list one or more categories, such as [\"finance\", \"savings\"]", file);
+	const listed = [];
+	for (const category of categories) {
+		if (!isCategory(category)) throw new CompileError(`"${String(category)}" is not a category. The categories are ${quotedList(CATEGORIES)}`, file);
+		if (listed.includes(category)) throw new CompileError(`"categories" lists "${category}" more than once`, file);
+		listed.push(category);
+	}
+	return listed;
+}
+function readPermissions(permissions, file) {
+	if (permissions === void 0) return;
+	if (!isObject(permissions)) throw new CompileError("\"permissions\" must be an object, such as { \"account\": \"Show your name on receipts\" }", file);
+	for (const [permission, reason] of Object.entries(permissions)) {
+		if (!isPermission(permission)) throw new CompileError(`Unknown permission "${permission}". The permissions are ${quotedList(PERMISSIONS)}`, file);
+		if (!isNonEmptyString(reason)) throw new CompileError(`"permissions.${permission}" must say why the dot needs it, such as "Show your name on receipts"`, file);
+	}
+	return permissions;
+}
+function readNetworkAccess(network, file) {
+	if (network === void 0) return;
+	if (!isObject(network)) throw new CompileError("\"network\" must be an object, such as { \"hosts\": [\"api.example.com\"] }", file);
+	rejectUnknownFields(network, NETWORK_FIELDS, file, "network");
+	const { hosts } = network;
+	if (!Array.isArray(hosts) || hosts.length === 0) throw new CompileError("\"network.hosts\" must list the hosts the dot sends requests to, such as [\"api.example.com\"]", file);
+	const listed = [];
+	for (const host of hosts) {
+		if (typeof host !== "string" || !isNetworkHost(host)) throw new CompileError(`"${String(host)}" is not a host. Use a lowercase host name, such as "api.example.com", or "*.example.com" for all its subdomains. Leave out https://, the port and the path.`, file);
+		if (listed.includes(host)) throw new CompileError(`"network.hosts" lists "${host}" more than once`, file);
+		listed.push(host);
+	}
+	return { hosts: listed };
+}
+function readDashRequirements(dash, file) {
+	if (dash === void 0) return;
+	if (!isObject(dash)) throw new CompileError("\"dash\" must be an object, such as { \"minVersion\": \"2.4.0\" }", file);
+	rejectUnknownFields(dash, DASH_FIELDS, file, "dash");
+	const { minVersion } = dash;
+	if (minVersion !== void 0 && !isSemanticVersion(minVersion)) throw new CompileError("\"dash.minVersion\" must be a semantic version, such as \"2.4.0\"", file);
+	return { minVersion };
+}
+function rejectUnknownFields(object, allowed, file, parent) {
+	for (const field of Object.keys(object)) {
+		if (allowed.includes(field)) continue;
+		if (parent === void 0) throw new CompileError(`Unknown field "${field}". The fields allowed are ${quotedList(allowed)}`, file);
+		throw new CompileError(`Unknown field "${parent}.${field}". The fields allowed in "${parent}" are ${quotedList(allowed)}`, file);
+	}
+}
+function quotedList(values) {
+	return values.map((value) => `"${value}"`).join(", ");
+}
+function isObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isNonEmptyString(value) {
+	return typeof value === "string" && value !== "";
+}
+//#endregion
+//#region src/project/statics.ts
+const STATICS_DIR = "statics";
+const MAX_STATIC_ASSET_BYTES = 1048576;
+const PNG_SIGNATURE = Buffer.from([
+	137,
+	80,
+	78,
+	71,
+	13,
+	10,
+	26,
+	10
+]);
+const IMAGE_FORMATS = {
+	".png": (header) => header.subarray(0, 8).equals(PNG_SIGNATURE),
+	".jpg": isJpeg,
+	".jpeg": isJpeg,
+	".gif": (header) => ["GIF87a", "GIF89a"].includes(header.toString("latin1", 0, 6)),
+	".webp": (header) => header.toString("latin1", 0, 4) === "RIFF" && header.toString("latin1", 8, 12) === "WEBP"
+};
+const STATIC_ASSET_EXTENSIONS = Object.keys(IMAGE_FORMATS);
+async function listStatics(root) {
+	const staticsDir = join(root, STATICS_DIR);
+	if (!existsSync(staticsDir)) return [];
+	const statics = [];
+	for (const entry of await readdir(staticsDir, {
+		recursive: true,
+		withFileTypes: true
+	})) {
+		if (!entry.isFile() || entry.name.startsWith(".")) continue;
+		const file = join(entry.parentPath, entry.name);
+		await checkImage(file, extname(entry.name).toLowerCase());
+		statics.push(`${STATICS_DIR}/${relative(staticsDir, file).split(sep).join("/")}`);
+	}
+	return statics.sort();
+}
+async function checkImage(file, extension) {
+	const isFormat = IMAGE_FORMATS[extension];
+	if (!isFormat) throw new CompileError(`${STATICS_DIR}/ can only hold images: ${STATIC_ASSET_EXTENSIONS.join(", ")}`, file);
+	const { size } = await stat(file);
+	if (size > 1048576) throw new CompileError(`The image is ${(size / MAX_STATIC_ASSET_BYTES).toFixed(1)} MB. Images must be 1 MB or smaller`, file);
+	if (!isFormat(await readFile(file))) throw new CompileError(`The file isn't really a ${extension.slice(1)} image`, file);
+}
+function isJpeg(header) {
+	return header[0] === 255 && header[1] === 216 && header[2] === 255;
+}
+//#endregion
+//#region src/project/project.ts
+const DOT_FILE = "dot.ts";
+const PAGES_DIR = "pages";
+const PAGE_FILES = {
+	view: "view.dml",
+	state: "state.ts",
+	controller: "controller.ts"
+};
+async function loadProject(root) {
+	root = resolve(root);
+	const dotJsonFile = join(root, DOT_JSON_FILE);
+	if (!existsSync(dotJsonFile)) throw new CompileError(`There is no ${DOT_JSON_FILE} in this folder`, root);
+	const dotJson = await readDotJson(dotJsonFile);
+	if (dotJson.icon !== void 0 && !existsSync(join(root, dotJson.icon))) throw new CompileError(`The icon "${dotJson.icon}" is missing`, dotJsonFile);
+	const dotFile = join(root, DOT_FILE);
+	if (!existsSync(dotFile)) throw new CompileError(`There is no ${DOT_FILE}. Add one: export default defineDot({ pages: [...] })`, root);
+	const { pages } = parseDotModule(await readFile(dotFile, "utf8"), dotFile);
+	const sources = await Promise.all(pages.map((path) => loadPage(root, path, dotFile)));
+	const seen = /* @__PURE__ */ new Map();
+	for (const page of sources) {
+		const other = seen.get(page.id.toLowerCase());
+		if (other) {
+			let file = dotFile;
+			if (page.id !== page.path) file = page.controller;
+			else if (other.id !== other.path) file = other.controller;
+			throw new CompileError(`Page id "${page.id}" (${page.path}) is already used by ${other.path}`, file);
+		}
+		seen.set(page.id.toLowerCase(), page);
+	}
+	return {
+		root,
+		dotJson,
+		dot: dotFile,
+		pages: sources,
+		statics: await listStatics(root)
+	};
+}
+async function loadPage(root, path, dotFile) {
+	const dir = join(root, PAGES_DIR, path);
+	const files = {
+		view: join(dir, PAGE_FILES.view),
+		state: join(dir, PAGE_FILES.state),
+		controller: join(dir, PAGE_FILES.controller)
+	};
+	const missing = Object.values(files).filter((file) => !existsSync(file));
+	if (missing.length > 0) throw new CompileError(`Page "${path}" is missing ${missing.join(", ")}`, dotFile);
+	const { id } = parseLogicModule(await readFile(files.controller, "utf8"), files.controller);
+	return {
+		path,
+		id: id ?? path,
+		...files
+	};
+}
+//#endregion
+//#region src/entries.ts
+const RUNTIME_PACKAGE = "@monimesl/dot-runtime";
+const RUNTIME = {
+	ui: `${RUNTIME_PACKAGE}/ui`,
+	logic: `${RUNTIME_PACKAGE}/logic`,
+	renderer: `${RUNTIME_PACKAGE}/react`
+};
+const ENTRY = {
+	ui: "dot:ui",
+	logic: "dot:logic"
+};
+const ENV_MODULE = "dot:env";
+const viewModuleId = (id) => `dot:view/${id}`;
+function literal(value) {
+	return JSON.stringify(value);
+}
+function pageTable(project, binding) {
+	return `{${project.pages.map((page, index) => `\n    ${literal(page.id)}: ${binding}${index},`).join("")}\n  }`;
+}
+function uiEntry(project, components) {
+	const renderer = components ? [`import { createReactRenderer, ${components.join(", ")} } from ${literal(RUNTIME.renderer)};`, `const createRenderer = () => createReactRenderer({ components: { ${components.join(", ")} } });`] : [`import createRenderer from ${literal(RUNTIME.renderer)};`];
+	return [
+		`import { runWebview } from ${literal(RUNTIME.ui)};`,
+		...renderer,
+		...project.pages.map((page, index) => `import view${index} from ${literal(viewModuleId(page.id))};`),
+		"",
+		"runWebview({",
+		"  renderer: createRenderer,",
+		`  views: ${pageTable(project, "view")},`,
+		"});",
+		""
+	].join("\n");
+}
+function logicEntry(project, { strict }) {
+	const options = ["  dot,", `  pages: ${pageTable(project, "page")},`];
+	if (strict) options.push("  strict: true,");
+	return [
+		`import { runService } from ${literal(RUNTIME.logic)};`,
+		`import dot from ${literal(project.dot)};`,
+		...project.pages.map((page, index) => `import page${index} from ${literal(page.controller)};`),
+		"",
+		"runService({",
+		...options,
+		"});",
+		""
+	].join("\n");
+}
+function envModule(env) {
+	return `export const env = Object.freeze(${JSON.stringify(env, null, 2)});\n`;
+}
+//#endregion
+//#region src/globals.ts
+const DOT_GLOBALS = {
+	"@monimesl/dot-runtime": [
+		"definePage",
+		"defineDot",
+		"createEvent",
+		"dash"
+	],
+	[ENV_MODULE]: ["env"]
+};
+const SCRIPT = /\.[cm]?[jt]sx?$/;
+function dotGlobals(root) {
+	const realRoot = realpathSync(root);
+	const isDotModule = (id) => id.startsWith(realRoot + sep) && !id.includes(`${sep}node_modules${sep}`) && SCRIPT.test(id);
+	const isPageModule = (id) => id.startsWith(join(realRoot, PAGES_DIR) + sep);
+	return {
+		name: "dot:globals",
+		transform(code, id) {
+			if (!isDotModule(id)) return null;
+			const used = new Set(unboundReferences(code, Object.values(DOT_GLOBALS).flat(), id));
+			if (isPageModule(id) && used.has("dash")) this.error(`${relative(realRoot, id)} uses the global \`dash\`. In a page, use \`this.dash\` in actions and hooks, so its calls stop when the page closes.`);
+			const imports = [];
+			for (const [source, names] of Object.entries(DOT_GLOBALS)) {
+				const imported = names.filter((name) => used.has(name));
+				if (imported.length > 0) imports.push(`import { ${imported.join(", ")} } from ${JSON.stringify(source)};`);
+			}
+			if (imports.length === 0) return null;
+			return {
+				code: `${code}\n${imports.join("\n")}\n`,
+				map: null
+			};
+		}
+	};
+}
+//#endregion
+//#region src/build/bundle.ts
+/** Bundles one entry with rolldown, replacing `outDir`. Returns the written files. */
+async function bundle(options) {
+	await rm(options.outDir, {
+		recursive: true,
+		force: true
+	});
+	const plugins = [];
+	if (options.external.length > 0) plugins.push(esmExternalRequirePlugin({ external: [...options.external] }));
+	plugins.push(generatedModules(options.root, options.modules), dotGlobals(options.root));
+	const bundler = await rolldown({
+		input: options.entry,
+		cwd: options.root,
+		platform: "browser",
+		plugins,
+		resolve: { conditionNames: [
+			...options.conditions,
+			"browser",
+			"import",
+			"require",
+			"default"
+		] },
+		transform: { define: { "process.env.NODE_ENV": JSON.stringify(options.mode) } },
+		onLog(level, log, defaultHandler) {
+			if (log.code !== "MODULE_LEVEL_DIRECTIVE") defaultHandler(level, log);
+		}
+	});
+	try {
+		const { output } = await bundler.write({
+			dir: options.outDir,
+			format: options.format,
+			entryFileNames: options.fileName,
+			sourcemap: options.mode === "development",
+			sourcemapExcludeSources: options.mode === "production",
+			minify: options.minify
+		});
+		return output.map((chunk) => join(options.outDir, chunk.fileName));
+	} finally {
+		await bundler.close();
+	}
+}
+/** Serves generated modules and resolves their imports as if they lived in the project root. */
+function generatedModules(root, modules) {
+	const importer = join(root, DOT_JSON_FILE);
+	return {
+		name: "dot:generated",
+		async resolveId(source, from) {
+			if (modules.has(source)) return `\0${source}`;
+			if (!from?.startsWith("\0dot:")) return null;
+			const resolved = await this.resolve(source, importer, { skipSelf: true });
+			if (!resolved) this.error(`Can't find "${source}" from ${root}. Is it installed?`);
+			return resolved;
+		},
+		load(id) {
+			if (!id.startsWith("\0")) return null;
+			return modules.get(id.slice(1)) ?? null;
+		}
+	};
+}
+//#endregion
+//#region src/build/packages.ts
+const RENDERER_PACKAGE = "@monimesl/dot-renderer-react";
+function installedRuntime(root) {
+	const runtime = requirePackage(root, RUNTIME_PACKAGE, "the project");
+	const renderer = requirePackage(runtime.dir, RENDERER_PACKAGE, RUNTIME_PACKAGE);
+	const react = requirePackage(renderer.dir, "react", RENDERER_PACKAGE);
+	return {
+		version: runtime.version,
+		react: {
+			version: react.version,
+			dir: join(renderer.dir, "dist", "react-host")
+		},
+		stylesheet: join(renderer.dir, "dist", "styles.css")
+	};
+}
+function requirePackage(fromDir, name, installedIn) {
+	const require = createRequire(join(fromDir, "package.json"));
+	let packageFile;
+	try {
+		packageFile = require.resolve(`${name}/package.json`);
+	} catch {
+		throw new CompileError(`${name} isn't installed in ${installedIn}. Install the project's dependencies, then try again`, fromDir);
+	}
+	const { version } = JSON.parse(readFileSync(packageFile, "utf8"));
+	return {
+		dir: dirname(packageFile),
+		version
+	};
+}
+//#endregion
+//#region src/view/expression.ts
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+const EMPTY_SCOPE = /* @__PURE__ */ new Map();
+function isIdentifier(name) {
+	return IDENTIFIER.test(name);
+}
+function printExpr(expr, scope) {
+	const print = (node) => printExpr(node, scope);
+	switch (expr.type) {
+		case "Literal": return JSON.stringify(expr.value);
+		case "Identifier": return scope.get(expr.name) ?? `d.${expr.name}`;
+		case "Member": return expr.property.type === "Literal" && typeof expr.property.value === "string" ? `${print(expr.object)}?.${expr.property.value}` : `${print(expr.object)}?.[${print(expr.property)}]`;
+		case "Unary": return `(${expr.operator}${expr.operator === "typeof" ? " " : ""}${print(expr.argument)})`;
+		case "Binary": return `(${print(expr.left)} ${expr.operator} ${print(expr.right)})`;
+		case "Conditional": return `(${print(expr.test)} ? ${print(expr.consequent)} : ${print(expr.alternate)})`;
+	}
+}
+function stateReads(expr, scope) {
+	const reads = (node) => stateReads(node, scope);
+	switch (expr.type) {
+		case "Literal": return [];
+		case "Identifier": return scope.has(expr.name) ? [] : [expr.name];
+		case "Member": return [...reads(expr.object), ...reads(expr.property)];
+		case "Unary": return reads(expr.argument);
+		case "Binary": return [...reads(expr.left), ...reads(expr.right)];
+		case "Conditional": return [
+			...reads(expr.test),
+			...reads(expr.consequent),
+			...reads(expr.alternate)
+		];
+	}
+}
+//#endregion
+//#region src/view/control-flow.ts
+const CONTROL_FLOW_TAGS = {
+	If: {
+		attributes: ["condition"],
+		required: ["condition"]
+	},
+	ElseIf: {
+		attributes: ["condition"],
+		required: ["condition"]
+	},
+	Else: {
+		attributes: [],
+		required: []
+	},
+	For: {
+		attributes: [
+			"each",
+			"item",
+			"index",
+			"key"
+		],
+		required: ["each"]
+	}
+};
+function compileConditional(compiler, branches, parent, scope) {
+	let code = "[]";
+	for (const branch of [...branches].reverse()) {
+		const body = `[${compiler.compile(branch.children, parent, scope).join(", ")}]`;
+		compiler.checkControlFlowElementAttributes(branch);
+		if (branch.tag === "Else") code = body;
+		else code = `${compiler.compileSingleBinding(branch, "condition", scope)} ? ${body} : ${code}`;
+	}
+	return `...(${code})`;
+}
+function compileLoop(compiler, node, parent, scope) {
+	compiler.checkControlFlowElementAttributes(node);
+	const list = compiler.compileSingleBinding(node, "each", scope);
+	const { item = "item", index = "index", key } = node.attributes;
+	const checkVariableName = (attribute, name) => {
+		if (!isIdentifier(name)) compiler.fail(`<For> \`${attribute}\` must be a variable name, got "${name}"`, node.loc);
+	};
+	checkVariableName("item", item);
+	checkVariableName("index", index);
+	if (item === index) compiler.fail("<For> `item` and `index` need different names", node.loc);
+	const itemVar = "$" + item;
+	const indexVar = "$" + index;
+	const inner = new Map(scope).set(item, itemVar).set(index, indexVar);
+	const args = [list, `(${itemVar}, ${indexVar}) => [${compiler.compile(node.children, parent, inner).join(", ")}]`];
+	if (key === void 0) compiler.warn("<For> has no `key`, so items are matched by position. If items can move, add key=\"<property>\" or key=\"*this\". To keep matching by position, add key=\"*index\".", node.loc);
+	else if (key === "*index") {} else if (key === "*this") args.push(`(${itemVar}) => ${itemVar}`);
+	else if (isIdentifier(key)) args.push(`(${itemVar}) => ${itemVar}?.${key}`);
+	else compiler.fail(`<For> \`key\` must be a property name, *this or *index, got "${key}"`, node.loc);
+	return `each(${args.join(", ")})`;
+}
+//#endregion
+//#region src/view/compiler.ts
+const ROOT_TAG = "View";
+const ROOT_DEFAULTS = {
+	padding: "large",
+	gap: "large",
+	grow: true
+};
+const SEGMENT_BINDING_REGEXP = /{{([\s\S]*?)}}/g;
+const DATA_PREFIX = "data-";
+const DATA_ATTRIBUTE = /^data-[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+var ViewCompiler = class {
+	#context;
+	#components;
+	constructor(context) {
+		this.#context = context;
+		this.#components = context.components ?? builtinRegistry;
+		for (const name of Object.keys(CONTROL_FLOW_TAGS)) if (name in this.#components) this.fail(`<${name}> is reserved for control flow`);
+	}
+	compile(nodes, parent, scope) {
+		const out = [];
+		for (let i = 0; i < nodes.length; i++) {
+			const node = nodes[i];
+			if (node.type === "Text") {
+				out.push(...this.#compileText(node.content, parent, scope, node.loc));
+				continue;
+			}
+			switch (node.tag) {
+				case "If": {
+					const branches = ifChain(node, nodes.slice(i + 1));
+					out.push(compileConditional(this, branches, parent, scope));
+					i += branches.length - 1;
+					break;
+				}
+				case "ElseIf":
+				case "Else": return this.fail(`<${node.tag}> must come right after <If> or <ElseIf>`, node.loc);
+				case "For":
+					out.push(compileLoop(this, node, parent, scope));
+					break;
+				default: out.push(`h(${this.#compileElementArgs(node, parent, scope).join(", ")})`);
+			}
+		}
+		return out;
+	}
+	#compileText(content, parent, scope, loc) {
+		if (parent?.children !== "text") {
+			const wrappers = Object.values(this.#components).filter((component) => component.inline && component.children === "text").sort((a, b) => Number(b.name === "Text") - Number(a.name === "Text")).map((component) => `<${component.name}>`).join(" or ");
+			this.fail(`'${content}' must be inside ${wrappers || "an inline component"}`, loc);
+		}
+		return this.#compileAsSegments(content, scope, loc).map(printSegment);
+	}
+	compileRoot(nodes) {
+		if (!this.#components["View"]) this.fail(`The components must include <${ROOT_TAG}>, which is the root of every page`);
+		const [root, outside] = nodes;
+		if (root?.type !== "Element" || root.tag !== "View") return this.fail(`A page must have one <${ROOT_TAG}> around everything else`, root?.loc);
+		if (outside) {
+			const name = outside.type === "Text" ? `'${outside.content}'` : `<${outside.tag}>`;
+			this.fail(`${name} must be inside the page's <${ROOT_TAG}>`, outside.loc);
+		}
+		return this.#compileElementArgs(root, null, EMPTY_SCOPE, ROOT_DEFAULTS);
+	}
+	#compileElementArgs(node, parent, scope, defaults = {}) {
+		const component = this.#components[node.tag];
+		if (!component) return this.fail(`Unknown component <${node.tag}>`, node.loc);
+		this.#context.onComponent?.(component.name);
+		if (parent && !canHaveChildren(parent, component)) this.fail(`<${node.tag}> can't go inside <${parent.name}>`, node.loc);
+		const attributes = Object.entries(node.attributes);
+		for (const { prop, ignores, because } of component.overrides ?? []) if (prop in node.attributes && ignores in node.attributes) this.warn(`<${component.name}> ignores \`${ignores}\` with \`${prop}\`: ${because}`, node.loc);
+		const data = this.#compileData(attributes.filter(([name]) => name.startsWith(DATA_PREFIX)), scope, node.loc);
+		const props = [
+			...attributes.filter(([name]) => !name.startsWith(DATA_PREFIX)).map(([name, value]) => this.#compileProp(component, name, value, scope, node.loc)),
+			...Object.entries(node.events).map(([name, handler]) => this.#compileEvent(component, name, handler, data, node.loc)),
+			...Object.entries(defaults).filter(([name]) => !(name in node.attributes)).map(([name, value]) => `${name}: ${JSON.stringify(value)}`)
+		];
+		return [
+			JSON.stringify(component.name),
+			props.length ? `{ ${props.join(", ")} }` : "null",
+			...this.compile(node.children, component, scope)
+		];
+	}
+	#compileProp(component, name, value, scope, loc) {
+		const type = component.props[name];
+		if (!type) return this.fail(`<${component.name}> has no \`${name}\` attribute`, loc);
+		const segments = this.#compileAsSegments(value, scope, loc);
+		const bindingCode = singleBindingCode(segments);
+		if (bindingCode !== null) return `${name}: ${bindingCode}`;
+		if (segments.every((segment) => segment.kind === "static")) {
+			this.#checkStaticsReference(value, loc);
+			return `${name}: ${this.#compileLiteral(type, value, loc)}`;
+		}
+		if (type !== "string" && type !== "any") {
+			const kind = typeof type === "string" ? `a ${type}` : "an enum";
+			this.fail(`\`${name}\` is ${kind}, so set it with one {{ }} binding`, loc);
+		}
+		return `${name}: ${segments.map(printSegment).join(" + ")}`;
+	}
+	#compileData(attributes, scope, loc) {
+		if (attributes.length === 0) return null;
+		return `{ ${attributes.map(([name, value]) => {
+			if (!DATA_ATTRIBUTE.test(name)) this.fail(`\`${name}\` must be lowercase words joined by -, such as data-account-id`, loc);
+			return `${dataKey(name)}: ${this.#compileDataValue(value, scope, loc)}`;
+		}).join(", ")} }`;
+	}
+	#compileDataValue(value, scope, loc) {
+		const segments = this.#compileAsSegments(value, scope, loc);
+		const bindingCode = singleBindingCode(segments);
+		if (bindingCode !== null) return bindingCode;
+		if (segments.length === 0) return "\"\"";
+		return segments.map(printSegment).join(" + ");
+	}
+	#checkStaticsReference(value, loc) {
+		const { statics } = this.#context;
+		if (statics && value.startsWith(`statics/`) && !statics.includes(value)) this.fail(`"${value}" isn't in ${STATICS_DIR}/`, loc);
+	}
+	#compileEvent(component, attribute, handler, data, loc) {
+		const event = eventName(attribute);
+		if (!component.events.includes(event)) this.fail(`<${component.name}> has no \`${attribute}\` event`, loc);
+		if (!isIdentifier(handler)) this.fail(`\`${attribute}\` must name a mutation or action in controller.ts, got "${handler}"`, loc);
+		const { handlers } = this.#context;
+		if (handlers && !handlers.includes(handler)) this.fail(`\`${handler}\` isn't a mutation or action in controller.ts`, loc);
+		return `${attribute}: on(${data ? `${JSON.stringify(handler)}, ${data}` : JSON.stringify(handler)})`;
+	}
+	checkControlFlowElementAttributes(node) {
+		const { attributes: allowed, required } = CONTROL_FLOW_TAGS[node.tag];
+		const [event] = Object.keys(node.events);
+		if (event) this.fail(`<${node.tag}> can't handle events such as \`${event}\`. Put the handler on a component inside it.`, node.loc);
+		for (const name of Object.keys(node.attributes)) if (!allowed.includes(name)) this.fail(`<${node.tag}> has no \`${name}\` attribute`, node.loc);
+		for (const name of required) if (!(name in node.attributes)) this.fail(`<${node.tag}> requires \`${name}\``, node.loc);
+	}
+	compileSingleBinding(node, attribute, scope) {
+		const bindingCode = singleBindingCode(this.#compileAsSegments(node.attributes[attribute] ?? "", scope, node.loc));
+		if (bindingCode === null) return this.fail(`<${node.tag}> \`${attribute}\` must be one {{ }} binding`, node.loc);
+		return bindingCode;
+	}
+	#compileLiteral(type, value, loc) {
+		if (typeof type !== "string") {
+			if (type.includes(value)) return JSON.stringify(value);
+			return this.fail(`Expected one of ${type.map((option) => `"${option}"`).join(", ")}, got "${value}"`, loc);
+		}
+		switch (type) {
+			case "boolean":
+				if (value === "" || value === "true") return "true";
+				if (value === "false") return "false";
+				return this.fail(`Expected true or false, got "${value}"`, loc);
+			case "number":
+				if (value.trim() !== "" && Number.isFinite(Number(value))) return String(Number(value));
+				return this.fail(`Expected a number, got "${value}"`, loc);
+			case "string":
+			case "any": return JSON.stringify(value);
+		}
+	}
+	#compileAsSegments(input, scope, loc) {
+		const segments = [];
+		let last = 0;
+		for (const match of input.matchAll(SEGMENT_BINDING_REGEXP)) {
+			if (match.index > last) segments.push({
+				kind: "static",
+				value: input.slice(last, match.index)
+			});
+			const expr = this.#parseBindingExpression(match[1], scope, loc);
+			segments.push({
+				kind: "binding",
+				code: printExpr(expr, scope)
+			});
+			last = match.index + match[0].length;
+		}
+		const rest = input.slice(last);
+		if (rest.includes("{{")) this.fail("A binding is missing its closing `}}`", loc);
+		if (rest) segments.push({
+			kind: "static",
+			value: rest
+		});
+		return segments;
+	}
+	#parseBindingExpression(source, scope, loc) {
+		let expr;
+		try {
+			expr = parseExpression(source);
+		} catch (error) {
+			if (!(error instanceof ScriptParseError)) throw error;
+			return this.fail(`Invalid binding \`{{${source}}}\`: ${error.reason}`, loc);
+		}
+		const { stateKeys } = this.#context;
+		if (stateKeys) {
+			const undeclared = stateReads(expr, scope).find((name) => !stateKeys.includes(name));
+			if (undeclared) {
+				const declared = stateKeys.join(", ") || "none";
+				this.fail(`\`${undeclared}\` isn't in state.ts. It has: ${declared}`, loc);
+			}
+		}
+		return expr;
+	}
+	warn(message, loc) {
+		this.#context.onWarning?.(new CompileWarning(message, this.#context.file, loc));
+	}
+	fail(message, loc) {
+		throw new CompileError(message, this.#context.file, loc);
+	}
+};
+function ifChain(ifNode, nextSiblings) {
+	const branches = [ifNode];
+	for (const sibling of nextSiblings) {
+		if (branches.at(-1).tag === "Else" || !continuesIf(sibling)) break;
+		branches.push(sibling);
+	}
+	return branches;
+}
+function continuesIf(node) {
+	return node.type === "Element" && (node.tag === "ElseIf" || node.tag === "Else");
+}
+function singleBindingCode(segments) {
+	const [first] = segments;
+	if (segments.length === 1 && first?.kind === "binding") return first.code;
+	return null;
+}
+function dataKey(attribute) {
+	const [first = "", ...rest] = attribute.slice(5).split("-");
+	return first + rest.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+function printSegment(segment) {
+	return segment.kind === "static" ? JSON.stringify(segment.value) : `text(${segment.code})`;
+}
+function canHaveChildren(parent, child) {
+	switch (parent.children) {
+		case "none": return false;
+		case "text": return child.inline === true;
+		case "elements": return true;
+	}
+}
+//#endregion
+//#region src/view/compile.ts
+function compileView(source, context) {
+	const nodes = parseDmlToIR(source, {
+		locations: true,
+		file: context.file,
+		whitespace: "collapse"
+	});
+	return [
+		"export default function render(d, { h, on, text, each }) {",
+		`  return h(${new ViewCompiler(context).compileRoot(nodes).map((arg) => `\n    ${arg},`).join("")}\n  );`,
+		"}",
+		""
+	].join("\n");
+}
+//#endregion
+//#region src/types.ts
+const PAGE_TYPES_FILE = ".dot/pages.d.ts";
+const ENV_TYPES_FILE = ".dot/env.d.ts";
+async function writePageTypes(project) {
+	const members = project.pages.map((page) => `${JSON.stringify(page.id)}: true;`);
+	return writeIfChanged(join(project.root, PAGE_TYPES_FILE), globalInterface("dot.ts", "DotPageIds", members));
+}
+async function writeEnvTypes(project, env) {
+	const members = Object.keys(env).map((name) => `readonly ${name}: string;`);
+	return writeIfChanged(join(project.root, ENV_TYPES_FILE), globalInterface("the variables in .env files", "DotPublicEnv", members));
+}
+function globalInterface(source, name, members) {
+	return [
+		`// Generated by dotctl from ${source}. Do not edit.`,
+		"declare global {",
+		`  interface ${name} {`,
+		...members.map((member) => `    ${member}`),
+		"  }",
+		"}",
+		"",
+		"export {};",
+		""
+	].join("\n");
+}
+async function writeIfChanged(file, content) {
+	if (await readFile(file, "utf8").catch(() => null) !== content) {
+		await mkdir(dirname(file), { recursive: true });
+		await writeFile(file, content);
+	}
+	return file;
+}
+//#endregion
+//#region src/project/env.ts
+const PUBLIC_ENV_NAME = /^[A-Z][A-Z0-9_]*$/;
+async function loadPublicEnv(root, mode, shellEnv = process.env) {
+	const env = {};
+	for (const fileName of [".env", `.env.${mode}`]) {
+		const file = join(root, fileName);
+		if (existsSync(file)) addVariables(env, parseEnv(await readFile(file, "utf8")), file);
+	}
+	const sorted = {};
+	for (const name of Object.keys(env).sort()) sorted[name] = shellEnv[name] ?? env[name];
+	return sorted;
+}
+function addVariables(env, variables, file) {
+	for (const [name, value] of Object.entries(variables)) {
+		if (value === void 0) continue;
+		if (!PUBLIC_ENV_NAME.test(name)) throw new CompileError(`"${name}" must be capital letters, digits and underscores, starting with a letter`, file);
+		env[name] = value;
+	}
+}
+//#endregion
+//#region src/build/build.ts
+const MANIFEST_FILE = "manifest.json";
+const ICON_FILE = "icon.png";
+const STYLES_FILE = "dot.css";
+const ARCHIVE_DATE = new Date(1980, 0, 1);
+/** Compiles and bundles the dot into `outDir` for hosts, and refreshes the types in `.dot/`. */
+async function build(options) {
+	const project = await loadProject(options.root);
+	const mode = options.mode ?? "production";
+	const env = await loadPublicEnv(project.root, mode);
+	const runtime = installedRuntime(project.root);
+	await writePageTypes(project);
+	await writeEnvTypes(project, env);
+	const warnings = [];
+	const modules = await compileModules(project, env, componentRegistry([...Object.values(builtinComponents), ...options.components ?? []]), mode, warnings);
+	const outDir = resolve(project.root, options.outDir ?? "dist");
+	const uiDir = join(outDir, "ui");
+	const bundleLayer = (entry, layerDir, format, external) => bundle({
+		root: project.root,
+		modules,
+		entry,
+		outDir: layerDir,
+		fileName: "dot.js",
+		format,
+		mode,
+		minify: mode === "production",
+		conditions: options.conditions ?? [],
+		external
+	});
+	const files = [
+		...await bundleLayer(ENTRY.ui, uiDir, "esm", Object.keys(REACT_HOST_MODULES)),
+		...await bundleLayer(ENTRY.logic, join(outDir, "logic"), "iife", []),
+		await copyRendererStyles(runtime, uiDir),
+		await writeIndexHtml(project, uiDir, runtime.react.version),
+		...await copyStatics(project, uiDir),
+		await writeManifest(project, outDir, runtime)
+	];
+	const icon = await copyIcon(project, outDir);
+	if (icon) files.push(icon);
+	if (mode === "production") files.push(await writeArchive(project, outDir, files));
+	return {
+		outDir,
+		files,
+		warnings
+	};
+}
+async function copyRendererStyles(runtime, uiDir) {
+	const file = join(uiDir, STYLES_FILE);
+	await mkdir(uiDir, { recursive: true });
+	await copyFile(runtime.stylesheet, file);
+	return file;
+}
+async function writeArchive(project, outDir, files) {
+	const entries = {};
+	for (const file of files) if (!file.endsWith(".map")) {
+		const name = relative(outDir, file).split(sep).join("/");
+		entries[name] = [await readFile(file), { mtime: ARCHIVE_DATE }];
+	}
+	const { id, version } = project.dotJson;
+	for (const name of await readdir(outDir)) if (name.startsWith(`${id}-`) && name.endsWith(".zip")) await rm(join(outDir, name));
+	const file = join(outDir, `${id}-${version}.zip`);
+	await writeFile(file, zipSync(entries, { level: 9 }));
+	return file;
+}
+async function compileModules(project, env, components, mode, warnings) {
+	const modules = /* @__PURE__ */ new Map();
+	const used = /* @__PURE__ */ new Set();
+	for (const page of project.pages) {
+		const view = await compilePage(page, components, project.statics, warnings, used);
+		modules.set(viewModuleId(page.id), view);
+	}
+	const builtins = [...used].filter((name) => name in builtinComponents).sort();
+	modules.set(ENTRY.ui, uiEntry(project, mode === "production" ? builtins : void 0));
+	modules.set(ENTRY.logic, logicEntry(project, { strict: mode === "development" }));
+	modules.set(ENV_MODULE, envModule(env));
+	return modules;
+}
+async function writeIndexHtml(project, uiDir, reactVersion) {
+	const file = join(uiDir, "index.html");
+	await mkdir(uiDir, { recursive: true });
+	await writeFile(file, indexHtml(project.dotJson.name, reactVersion));
+	return file;
+}
+async function copyStatics(project, uiDir) {
+	const copies = [];
+	for (const file of project.statics) {
+		const copy = join(uiDir, file);
+		await mkdir(dirname(copy), { recursive: true });
+		await copyFile(join(project.root, file), copy);
+		copies.push(copy);
+	}
+	return copies;
+}
+async function writeManifest(project, outDir, runtime) {
+	const file = join(outDir, MANIFEST_FILE);
+	const manifest = dotManifest(project, runtime);
+	await writeFile(file, `${JSON.stringify(manifest, null, 2)}\n`);
+	return file;
+}
+async function copyIcon(project, outDir) {
+	if (project.dotJson.icon === void 0) return null;
+	const file = join(outDir, ICON_FILE);
+	await copyFile(join(project.root, project.dotJson.icon), file);
+	return file;
+}
+function dotManifest(project, runtime) {
+	const { id, name, version, description, categories, permissions, network, dash } = project.dotJson;
+	const pages = project.pages.map((page) => page.id);
+	return {
+		id,
+		name,
+		version,
+		runtime: runtime.version,
+		react: runtime.react.version,
+		description,
+		categories,
+		icon: project.dotJson.icon === void 0 ? void 0 : ICON_FILE,
+		permissions,
+		network,
+		dash,
+		entry: pages[0],
+		pages
+	};
+}
+async function compilePage(page, components, statics, warnings, used) {
+	const [view, state, controller] = await Promise.all([
+		readFile(page.view, "utf8"),
+		readFile(page.state, "utf8"),
+		readFile(page.controller, "utf8")
+	]);
+	const context = {
+		file: page.view,
+		components,
+		statics,
+		onWarning: (warning) => warnings.push(warning),
+		onComponent: (name) => used.add(name)
+	};
+	const { keys } = parseStateModule(state, page.state);
+	if (keys) context.stateKeys = keys;
+	const { mutations, actions } = parseLogicModule(controller, page.controller);
+	if (mutations && actions) context.handlers = [...mutations, ...actions];
+	return compileView(view, context);
+}
+function indexHtml(title, reactVersion) {
+	const escaped = title.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+	const imports = {};
+	for (const [name, file] of Object.entries(REACT_HOST_MODULES)) imports[name] = reactHostUrl(reactVersion, file);
+	return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>${escaped}</title>
+    <link rel="stylesheet" href="./${STYLES_FILE}" />
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="importmap">${JSON.stringify({ imports })}<\/script>
+    <script type="module" src="./dot.js"><\/script>
+  </body>
+</html>
+`;
+}
+//#endregion
+export { CONTROL_FLOW_TAGS, CompileError, CompileWarning, DATA_PREFIX, PAGES_DIR, ROOT_TAG, STATICS_DIR, build, canHaveChildren, compileView, dataKey, installedRuntime, listStatics, loadProject };
+
+//# sourceMappingURL=index.js.map