@nextwebwg/html-next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/targets/vue.js

@@ -5,129 +5,47 @@
  * Vue refs, effects, and lifecycle; styles become `<style scoped>`.
  */
 import { fail } from "../diagnostics.js";
-import { isEnumeratedBoolean } from "../expression.js";
 import { componentName } from "../names.js";
 import { getDomInterface } from "../platform.js";
 import { compileComponentStylesForVue } from "../component-styles-build.js";
 import { stateAttribute } from "../component-styles.js";
-import { parseTypeExpression } from "../type-system.js";
+import { normalizeType, parseTypeExpression } from "../type-system.js";
 import { targetComponent } from "./backend.js";
-import { escapeHtml, isVoidElement, propKey, propTypeSource, quote } from "./shared.js";
-/** Expression helpers with HTML Next semantics, emitted into each component (not imported) as used. */
-const HELPERS = [
-    ["t", `  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),`],
-    ["n", `  n: (v: unknown): number | undefined => typeof v === "number" && v === v ? v : undefined,`],
-    ["op", `  op: (op: string, a: unknown, b: unknown): unknown => {
-    const x = hn.n(a), y = hn.n(b);
-    if (x === undefined || y === undefined) return undefined;
-    switch (op) {
-      case "<": return x < y; case "<=": return x <= y; case ">": return x > y; case ">=": return x >= y;
-      case "+": return x + y; case "-": return x - y; case "*": return x * y; case "/": return x / y; case "%": return x % y;
+import { escapeHtml, isVoidElement, propKey, propTypeSource, quote, typeSource } from "./shared.js";
+import { formatVue } from "./vue-format.js";
+import { category, Lowering, present, typeOf, typeScript, UNKNOWN } from "./vue-lowering.js";
+const VUE_APIS = ["computed", "onBeforeUnmount", "onMounted", "ref", "shallowRef", "useTemplateRef", "watchEffect"];
+/** Names the generated script defines itself, which declared names must not take. */
+const RESERVED = new Set([
+    "props", "emit", "root", "refs", "dispatch", "host", "hostState", "read", "write", "stops", "cleanup", "ready",
+    "model", "controllerModule", "event", "element", "truthy", "text", "attribute", "list", "number", "sortBy",
+    "String", "Boolean", "Number", "Math", "Object", "Array", "CustomEvent", "Promise", "Proxy", "TypeError",
+    "encodeURIComponent", "undefined", "NaN", "Infinity", ...VUE_APIS,
+    "break", "case", "catch", "class", "const", "continue", "debugger", "default", "delete", "do", "else", "enum",
+    "export", "extends", "false", "finally", "for", "function", "if", "import", "in", "instanceof", "new", "null",
+    "return", "super", "switch", "this", "throw", "true", "try", "typeof", "var", "void", "while", "with", "yield",
+    "let", "static", "implements", "interface", "package", "private", "protected", "public", "await", "arguments", "eval",
+]);
+/** Allocates readable script identifiers: the declared name when it is free. */
+class Identifiers {
+    #taken = new Set(RESERVED);
+    constructor(taken) {
+        for (const name of taken)
+            this.#taken.add(name);
     }
-    return undefined;
-  },`],
-    ["match", `  match: (op: string, a: unknown, b: unknown): boolean | undefined => typeof a === "string" && typeof b === "string"
-    ? op === "^=" ? a.startsWith(b) : op === "$=" ? a.endsWith(b) : a.includes(b)
-    : undefined,`],
-    ["text", `  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),`],
-    // Vue types intrinsic attributes more narrowly than the strings the platform accepts.
-    ["attr", `  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),`],
-    ["enumerated", `  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),`],
-    ["call", `  call: (fn: string, ...args: unknown[]): any => {
-    if (fn === "format") {
-      let index = 1;
-      return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : undefined;
+    take(name, suffix) {
+        const base = name.replace(/[^A-Za-z0-9_$]/g, "_").replace(/^(?=\d)/, "_");
+        let candidate = this.#taken.has(base) ? `${base}${suffix}` : base;
+        for (let index = 2; this.#taken.has(candidate); index++)
+            candidate = `${base}${suffix}${index}`;
+        this.#taken.add(candidate);
+        return candidate;
     }
-    const n = args.map(hn.n);
-    if (n.some((value) => value === undefined)) return undefined;
-    const v = n as number[];
-    switch (fn) {
-      case "abs": return v.length === 1 ? Math.abs(v[0]!) : undefined;
-      case "round": return v.length === 1 ? Math.round(v[0]!) : undefined;
-      case "min": return v.length > 0 ? Math.min(...v) : undefined;
-      case "max": return v.length > 0 ? Math.max(...v) : undefined;
-      case "clamp": return v.length === 3 ? Math.min(Math.max(v[0]!, v[1]!), v[2]!) : undefined;
-    }
-    return undefined;
-  },`],
-    ["shape", `  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
-    let list = Array.isArray(items) ? items.slice() : [];
-    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
-    if (sort.length > 0) {
-      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
-        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
-        : item;
-      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-      list.sort((a, b) => {
-        for (const key of sort) {
-          const descending = key.startsWith("-");
-          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-          if (order !== 0) return descending ? -order : order;
-        }
-        return 0;
-      });
-    }
-    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
-  },`],
-];
-/** The `hn` object holding the helpers `code` uses, and the helpers they use. */
-function helperSource(code) {
-    const used = new Set();
-    const visit = (source) => {
-        for (const [, name] of source.matchAll(/\bhn\.(\w+)/g)) {
-            if (used.has(name))
-                continue;
-            used.add(name);
-            visit(HELPERS.find(([helper]) => helper === name)?.[1] ?? "");
-        }
-    };
-    visit(code);
-    const entries = HELPERS.filter(([name]) => used.has(name));
-    return entries.length === 0 ? "" : `const hn = {\n${entries.map(([, source]) => source).join("\n")}\n};\n`;
 }
-const VUE_APIS = ["computed", "onBeforeUnmount", "onMounted", "ref", "shallowRef", "watchEffect"];
-/** Translates an HTML Next expression to JavaScript with the same absence and typing rules. */
-function expression(node, names) {
-    switch (node.kind) {
-        case "literal":
-            return node.value === undefined ? "undefined" : JSON.stringify(node.value);
-        case "id":
-            return names.get(node.name) ?? "undefined";
-        case "member":
-            return /^[A-Za-z_$][\w$]*$/.test(node.key)
-                ? `(${expression(node.object, names)})?.${node.key}`
-                : `(${expression(node.object, names)})?.[${quote(node.key)}]`;
-        case "index":
-            return `(${expression(node.object, names)})?.[${expression(node.index, names)}]`;
-        case "unary":
-            return node.op === "not" ? `!hn.t(${expression(node.operand, names)})` : `hn.op("-", 0, ${expression(node.operand, names)})`;
-        case "binary": {
-            const left = expression(node.left, names);
-            const right = expression(node.right, names);
-            if (node.op === "and")
-                return `(hn.t(${left}) && hn.t(${right}))`;
-            if (node.op === "or")
-                return `(hn.t(${left}) || hn.t(${right}))`;
-            if (node.op === "=")
-                return `(${left} === ${right})`;
-            if (node.op === "!=")
-                return `(${left} !== ${right})`;
-            if (node.op === "^=" || node.op === "$=" || node.op === "*=")
-                return `hn.match(${quote(node.op)}, ${left}, ${right})`;
-            return `hn.op(${quote(node.op)}, ${left}, ${right})`;
-        }
-        case "call":
-            return `hn.call(${[quote(node.fn), ...node.args.map((argument) => expression(argument, names))].join(", ")})`;
-        case "object":
-            return `({ ${node.pairs.map((pair) => `${quote(pair.key)}: ${expression(pair.value, names)}`).join(", ")} })`;
-        case "array":
-            return `[${node.items.map((item) => expression(item, names)).join(", ")}]`;
-    }
-}
-function compiled(plan, names, source) {
+function ast(plan, source) {
     if (plan === undefined)
         fail("HT030", `Expression \`${source}\` could not be converted.`);
-    return expression(plan.ast, names);
+    return plan.ast;
 }
 /**
  * A double-quoted HTML attribute value. Only `"` and an `&` that could begin a character reference
@@ -144,84 +62,113 @@ function attributeValue(value) {
 function bound(code) {
     return attributeValue(code.replace(/"(?:\\.|[^"\\])*"/g, (literal) => `'${literal.slice(1, -1).replace(/\\"/g, "\"").replace(/'/g, "\\'")}'`));
 }
-function writableTarget(path, names) {
+function writableTarget(path, scope, lowering) {
     const [root, ...rest] = path;
-    const base = names.get(String(root));
+    const base = scope.code.get(String(root));
     if (base === undefined)
         fail("HT031", `\`${String(root)}\` is not a writable state path.`);
-    return `${base}${rest.map((segment) => `[${JSON.stringify(segment)}]`).join("")}`;
+    return base + rest.map((segment) => typeof segment === "object" ? `[${lowering.value(segment.expression, scope)}]`
+        : typeof segment === "string" && /^[A-Za-z_$][\w$]*$/.test(segment) ? `.${segment}`
+            : `[${JSON.stringify(segment)}]`).join("");
 }
 function isComponentTag(name) {
     return name.includes("-") && getDomInterface(name) === undefined;
 }
+/**
+ * Adjacent elements go on separate lines, for the formatter to lay out; Vue drops whitespace that
+ * holds a newline between elements, so the rendering is unchanged. Text keeps its own whitespace.
+ */
 function renderChildren(nodes, names, context) {
-    return nodes.map((child) => renderNode(child, names, context)).join("");
+    return nodes.map((child, index) => {
+        const markup = renderNode(child, names, context);
+        return index > 0 && child.kind !== "text" && nodes[index - 1].kind !== "text" ? `\n${markup}` : markup;
+    }).join("");
 }
+/** Names bound by `$each`, `$with`, and `$match`, read the same way in template and script. */
 function withLocal(names, entries) {
-    const template = new Map(names.template);
-    const script = new Map(names.script);
-    for (const [name, code] of entries) {
-        template.set(name, code);
-        script.set(name, code);
-    }
-    return { template, script };
+    const scope = (base) => {
+        const code = new Map(base.code);
+        const types = new Map(base.types);
+        for (const [name, type] of entries) {
+            code.set(name, name);
+            types.set(name, type);
+        }
+        return { code, types };
+    };
+    return { template: scope(names.template), script: scope(names.script) };
 }
 function renderNode(node, names, context) {
+    const { lowering } = context;
     if (node.kind === "text")
         return escapeHtml(node.value).replace(/\{\{/g, "{{ '{{' }}");
     if (node.kind === "slot") {
         const name = node.nameExpression !== undefined
-            ? ` :name=${bound(compiled(node.nameExpression, names.template, "slot name"))}`
+            ? ` :name=${bound(lowering.value(ast(node.nameExpression, "slot name"), names.template))}`
             : node.name === undefined ? "" : ` name=${quote(node.name)}`;
-        return `<slot${name}>${renderChildren(node.fallback ?? [], names, context)}</slot>`;
+        const fallback = renderChildren(node.fallback ?? [], names, context);
+        return fallback === "" ? `<slot${name} />` : `<slot${name}>${fallback}</slot>`;
     }
     const flow = node.flow;
     if (flow?.kind === "each") {
-        const list = compiled(flow.listPlan, names.template, flow.list);
+        const listNode = ast(flow.listPlan, flow.list);
+        const listType = typeOf(listNode, names.template);
+        const itemType = listType.type.kind === "list" ? { type: present(listType.type.item).type, nullable: false } : { ...UNKNOWN, nullable: false };
         const item = flow.item;
         const index = flow.index ?? "index";
-        const local = withLocal(names, [[item, item], [index, index]]);
-        const where = flow.wherePlan === undefined ? "undefined" : `(${item}) => ${expression(flow.wherePlan.ast, local.template)}`;
-        const sort = JSON.stringify((flow.sort ?? "").split(",").map((key) => key.trim()).filter(Boolean));
-        const limit = flow.limitPlan === undefined ? "undefined" : expression(flow.limitPlan.ast, names.template);
-        const key = flow.keyPlan === undefined ? index : expression(flow.keyPlan.ast, local.template);
+        const local = withLocal(names, [[item, itemType], [index, { type: { kind: "terminal", name: "number" }, nullable: false }]]);
+        const list = lowering.list(listNode, names.template, item, {
+            ...(flow.wherePlan === undefined ? {} : { where: flow.wherePlan.ast }),
+            itemScope: local.template,
+            sort: (flow.sort ?? "").split(",").map((key) => key.trim()).filter(Boolean),
+            ...(flow.limitPlan === undefined ? {} : { limit: flow.limitPlan.ast }),
+        });
+        const key = flow.keyPlan === undefined ? index : lowering.value(flow.keyPlan.ast, local.template);
         const { flow: _flow, ...body } = node;
-        return `<template v-for=${bound(`(${item}, ${index}) in hn.shape(${list}, ${where}, ${sort}, ${limit})`)} :key=${bound(key)}>${renderNode(body, local, context)}</template>`;
+        const loop = flow.index === undefined && flow.keyPlan !== undefined ? item : `(${item}, ${index})`;
+        return wrap(body, [`v-for=${bound(`${loop} in ${list}`)}`, `:key=${bound(key)}`], local, context);
     }
     if (flow?.kind === "with") {
-        const value = compiled(flow.expressionPlan, names.template, flow.expr);
+        const value = ast(flow.expressionPlan, flow.expr);
         const { flow: _flow, ...body } = node;
-        return `<template v-for=${bound(`${flow.alias} in [${value}]`)}>${renderNode(body, withLocal(names, [[flow.alias, flow.alias]]), context)}</template>`;
+        return `<template v-for=${bound(`${flow.alias} in [${lowering.value(value, names.template)}]`)}>${renderNode(body, withLocal(names, [[flow.alias, typeOf(value, names.template)]]), context)}</template>`;
     }
     if (flow?.kind === "match") {
-        const local = flow.alias === undefined ? names : withLocal(names, [[flow.alias, flow.alias]]);
+        const value = flow.expr === undefined ? undefined : ast(flow.expressionPlan, flow.expr);
+        const local = flow.alias === undefined ? names : withLocal(names, [[flow.alias, value === undefined ? UNKNOWN : typeOf(value, names.template)]]);
         const arms = node.children
             .filter((child) => child.kind === "element" && (child.flow?.kind === "when" || child.flow?.kind === "else"))
             .map((arm, index) => {
             const { flow: armFlow, ...armBody } = arm;
-            const test = armFlow?.kind === "when" ? compiled(armFlow.testPlan, local.template, armFlow.test) : undefined;
-            const directive = test === undefined ? "v-else" : `${index === 0 ? "v-if" : "v-else-if"}=${bound(`hn.t(${test})`)}`;
-            return `<template ${directive}>${renderNode(armBody, local, context)}</template>`;
-        }).join("");
+            const test = armFlow?.kind === "when" ? lowering.condition(ast(armFlow.testPlan, armFlow.test), local.template) : undefined;
+            const directive = test === undefined ? "v-else" : `${index === 0 ? "v-if" : "v-else-if"}=${bound(test)}`;
+            return wrap(armBody, [directive], local, context);
+        }).join("\n");
         const inner = node.name === "template" ? arms : `<${node.name}${literalAttributes(node)}>${arms}</${node.name}>`;
-        if (flow.expr === undefined)
+        if (value === undefined)
             return inner;
-        const value = compiled(flow.expressionPlan, names.template, flow.expr);
-        return `<template v-for=${bound(`${flow.alias} in [${value}]`)}>${inner}</template>`;
+        return `<template v-for=${bound(`${flow.alias} in [${lowering.value(value, names.template)}]`)}>${inner}</template>`;
     }
     if (flow?.kind === "if") {
         const { flow: _flow, ...body } = node;
-        return `<template v-if=${bound(`hn.t(${compiled(flow.testPlan, names.template, flow.test)})`)}>${renderNode(body, names, context)}</template>`;
+        return wrap(body, [`v-if=${bound(lowering.condition(ast(flow.testPlan, flow.test), names.template))}`], names, context);
     }
     return renderElement(node, names, context, false);
 }
+/** A structural directive on its element, or on a `<template>` when the element is one itself. */
+function wrap(node, directives, names, context) {
+    if (node.name === "template" || node.flow !== undefined) {
+        return `<template ${directives.join(" ")}>${renderNode(node, names, context)}</template>`;
+    }
+    return renderElement(node, names, context, false, directives);
+}
 function literalAttributes(node) {
     return node.attributes
         .filter((attribute) => attribute.kind === "literal")
         .map((attribute) => ` ${attribute.name}=${attributeValue(attribute.value)}`)
         .join("");
 }
-function renderElement(node, names, context, isRoot) {
+function renderElement(node, names, context, isRoot, directives = []) {
+    const { lowering } = context;
     const component = isComponentTag(node.name);
     const name = component ? componentName(node.name) : node.name;
     if (component)
@@ -238,25 +185,30 @@ function renderElement(node, names, context, isRoot) {
         else if (attribute.kind === "directive") {
             if (attribute.name === "html")
                 fail("HT032", "`$html` is not supported in Vue conversion yet.");
-            content = `{{ hn.text(${compiled(attribute.expressionPlan, names.template, attribute.expression)}) }}`;
+            content = `{{ ${lowering.text(ast(attribute.expressionPlan, attribute.expression), names.template)} }}`;
         }
         else if (attribute.kind === "property") {
-            // DOM property types are narrower than HTML Next values (a prop may be null).
-            attributes.push(`:${attribute.name}.prop=${bound(`(${compiled(attribute.expressionPlan, names.template, attribute.expression)}) as any`)}`);
+            const value = ast(attribute.expressionPlan, attribute.expression);
+            const type = typeOf(value, names.template);
+            // DOM property types are narrower than an absent or untyped HTML Next value.
+            const code = lowering.value(value, names.template);
+            attributes.push(`:${attribute.name}.prop=${bound(type.nullable || category(type.type) === "unknown" ? `${code} as any` : code)}`);
         }
         else if (attribute.target === "class") {
-            classes.push(`${quote(attribute.name)}: hn.t(${compiled(attribute.expressionPlan, names.template, attribute.expression)})`);
+            classes.push(`${quote(attribute.name)}: ${lowering.condition(ast(attribute.expressionPlan, attribute.expression), names.template)}`);
         }
         else if (attribute.target === "style") {
-            styles.push(`${quote(attribute.name)}: hn.text(${compiled(attribute.expressionPlan, names.template, attribute.expression)})`);
+            styles.push(`${quote(attribute.name)}: ${lowering.text(ast(attribute.expressionPlan, attribute.expression), names.template)}`);
         }
         else if (attribute.twoWay === true && attribute.writablePath !== undefined) {
-            attributes.push(`v-model=${bound(writableTarget(attribute.writablePath, names.template))}`);
+            attributes.push(`v-model=${bound(writableTarget(attribute.writablePath, names.template, lowering))}`);
+        }
+        else if (isRoot && context.model && attribute.name === "value") {
+            // The model supplies the root's value (below).
         }
         else {
-            const value = compiled(attribute.expressionPlan, names.template, attribute.expression);
-            const helper = isEnumeratedBoolean(attribute.name) ? "hn.enumerated" : "hn.attr";
-            attributes.push(component ? `:${attribute.name}=${bound(value)}` : `:${attribute.name}=${bound(`${helper}(${value})`)}`);
+            const value = ast(attribute.expressionPlan, attribute.expression);
+            attributes.push(`:${attribute.name}=${bound(component ? lowering.value(value, names.template) : lowering.attribute(value, names.template, attribute.name))}`);
         }
     }
     if (classes.length > 0)
@@ -264,14 +216,15 @@ function renderElement(node, names, context, isRoot) {
     if (styles.length > 0)
         attributes.push(`:style=${bound(`{ ${styles.join(", ")} }`)}`);
     for (const event of node.events ?? []) {
-        const handler = (context.definition.declarations ?? []).find((declaration) => declaration.kind === "handler" && declaration.name === event.handler);
+        const handler = context.handlers.get(event.handler);
         if (handler === undefined)
             fail("HT033", `Handler \`${event.handler}\` is not declared.`);
-        attributes.push(`@${event.name}${event.modifiers.map((modifier) => `.${modifier}`).join("")}=${attributeValue(`handler_${safe(event.handler)}`)}`);
+        attributes.push(`@${event.name}${event.modifiers.map((modifier) => `.${modifier}`).join("")}=${attributeValue(handler)}`);
     }
     if (node.ref !== undefined) {
-        context.usesRefs.value = true;
-        attributes.push(`:ref=${bound(`(element) => { refs[${quote(node.ref)}] = element as Element }`)}`);
+        if (!context.refs.has(node.ref))
+            context.refs.set(node.ref, context.identifiers.take(`${node.ref}Element`, ""));
+        attributes.push(`ref=${quote(node.ref)}`);
     }
     if (isRoot) {
         // The consumer's attributes win over the template's literals and lose to its bindings, as in
@@ -279,21 +232,25 @@ function renderElement(node, names, context, isRoot) {
         const tag = context.definition.contract.tag;
         literals.unshift(`data-component=${attributeValue(tag)}`);
         literals.push("v-bind=\"$attrs\"");
+        // Vue's own v-model keeps a native control's value, a select's included, in step with the model.
+        if (context.model)
+            attributes.push('v-model="model"');
         if (context.hostState)
             attributes.push(`:${stateAttribute(tag)}="hostState || undefined"`);
-        if (context.model)
-            attributes.push(`@${context.model}="updateModel"`);
         if (context.root)
             attributes.push("ref=\"root\"");
     }
     // A <template> without structural flow produces its content with no wrapper element.
     if (node.name === "template" && !isRoot)
         return content ?? renderChildren(node.children, names, context);
-    attributes.unshift(...literals);
+    attributes.unshift(...directives, ...literals);
     const open = `<${name}${attributes.length === 0 ? "" : ` ${attributes.join(" ")}`}>`;
     if (!component && isVoidElement(node.name))
         return open;
     const children = content ?? renderChildren(node.children, names, context);
+    // An empty component closes itself, as Vue's style guide has it.
+    if (component && children === "")
+        return `${open.slice(0, -1)} />`;
     return `${open}${children}</${name}>`;
 }
 /** A JavaScript predicate for a declared type, so event details are checked as the runtime checks them. */
@@ -329,33 +286,61 @@ function typeCheck(type, value) {
         }
     }
 }
-function safe(name) {
-    return name.replace(/[^A-Za-z0-9_$]/g, "_");
-}
-function handlerSource(handler, names, events) {
-    const lines = [`const handler_${safe(handler.name)} = (event?: Event): void => {`];
-    const local = withLocal(names, [["event", "event"]]);
+function handlerSource(handler, name, names, events, context) {
+    const { lowering } = context;
+    const lines = [];
+    const local = withLocal(names, [["event", UNKNOWN]]);
+    const element = (ref) => {
+        if (!context.refs.has(ref))
+            context.refs.set(ref, context.identifiers.take(`${ref}Element`, ""));
+        return context.refs.get(ref);
+    };
     for (const step of handler.steps) {
-        const guard = step.guard === undefined ? "" : `if (hn.t(${expression(step.guard.ast, local.script)})) `;
+        const guard = step.guard === undefined ? "" : `if (${lowering.condition(step.guard.ast, local.script)}) `;
         if (step.kind === "set") {
-            lines.push(`  ${guard}${writableTarget(step.writablePath, local.script)} = ${expression(step.value.ast, local.script)};`);
+            lines.push(`  ${guard}${writableTarget(step.writablePath, local.script, lowering)} = ${lowering.value(step.value.ast, local.script)};`);
         }
         else if (step.kind === "dispatch") {
-            const detail = step.value === undefined ? "undefined" : expression(step.value.ast, local.script);
+            const detail = step.value === undefined ? "" : `, ${lowering.value(step.value.ast, local.script)}`;
             const declaration = events.find((event) => event.name === step.event);
             if (declaration === undefined)
                 fail("HT034", `Handler \`${handler.name}\` dispatches undeclared event \`${step.event}\`.`);
-            lines.push(`  ${guard}dispatch(${quote(step.event)}, ${detail});`);
+            lines.push(`  ${guard}dispatch(${quote(step.event)}${detail});`);
         }
         else if (step.kind === "focus") {
-            lines.push(`  ${guard}(refs[${quote(step.target)}] as HTMLElement | undefined)?.focus();`);
+            lines.push(`  ${guard}${element(step.target)}.value?.focus();`);
         }
         else {
-            lines.push(`  ${guard}(refs[${quote(step.target)}] as HTMLInputElement | undefined)?.reportValidity?.();`);
+            lines.push(`  ${guard}(${element(step.target)}.value as HTMLInputElement | null)?.reportValidity?.();`);
         }
     }
-    lines.push("};");
-    return lines.join("\n");
+    const parameter = lines.some((line) => /\bevent\b/.test(line)) ? "event?: Event" : "";
+    return [`function ${name}(${parameter}): void {`, ...lines, "}"].join("\n");
+}
+/** One `data-<tag>-state` token source per styled name: the bare name when truthy, and name=value. */
+function stateTokens(name, scope, lowering) {
+    const node = { kind: "id", name };
+    const type = typeOf(node, scope);
+    const code = lowering.value(node, scope);
+    const kind = category(type.type);
+    const keywords = type.type.kind === "keyword" ? [type.type.value]
+        : type.type.kind === "union" && type.type.members.every((member) => member.kind === "keyword")
+            ? type.type.members.map((member) => member.value)
+            : undefined;
+    if (kind === "boolean")
+        return [`${code} && ${quote(name)}`];
+    if (keywords !== undefined && keywords.every((keyword) => keyword !== "" && encodeURIComponent(keyword) === keyword)) {
+        return [`${code} && \`${name} ${name}=\${${code}}\``];
+    }
+    if (kind === "string" || kind === "number") {
+        const value = kind === "string" ? `encodeURIComponent(${code})` : code;
+        return [`${code} && ${quote(name)}`, type.nullable ? `${code} != null && \`${name}=\${${value}}\`` : `\`${name}=\${${value}}\``];
+    }
+    const value = lowering.value(node, scope);
+    return [
+        `${lowering.condition(node, scope)} && ${quote(name)}`,
+        `(typeof ${value} === "string" || typeof ${value} === "number") && \`${name}=\${encodeURIComponent(String(${value}))}\``,
+    ];
 }
 export function generateVue(definition, version) {
     const { contract, template } = definition;
@@ -368,120 +353,157 @@ export function generateVue(definition, version) {
     const computedValues = declarations.filter((declaration) => declaration.kind === "computed");
     const handlers = declarations.filter((declaration) => declaration.kind === "handler");
     const events = declarations.filter((declaration) => declaration.kind === "event");
+    if (template.flow !== undefined) {
+        fail("HT036", `<${contract.tag}> has a structural directive on its root, which Vue conversion does not support yet.`);
+    }
     // A native form-control root with a `value` prop takes Vue's v-model: `modelValue` sets the value
     // and the control's input (change, for a select) reports it.
     const modelProp = ["input", "textarea", "select"].includes(template.name)
         ? target.props.find((prop) => prop.name === "value")
         : undefined;
-    const names = { template: new Map(), script: new Map() };
+    const identifiers = new Identifiers(target.props.map((prop) => prop.name));
+    const lowering = new Lowering();
+    const templateScope = { code: new Map(), types: new Map() };
+    const script = { code: new Map(), types: new Map() };
+    const names = { template: templateScope, script };
+    const define = (name, templateCode, scriptCode, type) => {
+        templateScope.code.set(name, templateCode);
+        script.code.set(name, scriptCode);
+        templateScope.types.set(name, type);
+        script.types.set(name, type);
+    };
+    // A prop with a default or marked required is present; others may be absent.
+    const optional = (prop) => !prop.contract.required && !("default" in prop.contract);
     for (const prop of target.props) {
+        const identifier = /^[A-Za-z_$][\w$]*$/.test(prop.name);
         const read = prop === modelProp
             ? "(props.modelValue ?? props.value)"
-            : /^[A-Za-z_$][\w$]*$/.test(prop.name) ? `props.${prop.name}` : `props[${quote(prop.name)}]`;
-        names.template.set(prop.name, read);
-        names.script.set(prop.name, read);
+            : identifier ? `props.${prop.name}` : `props[${quote(prop.name)}]`;
+        // A template reads a prop by its name, as Vue exposes it.
+        const templateRead = prop === modelProp ? "(modelValue ?? value)" : identifier && !RESERVED.has(prop.name) ? prop.name : read;
+        const type = present(normalizeType(prop.contract.type));
+        define(prop.name, templateRead, read, { type: type.type, nullable: type.nullable || optional(prop) || prop === modelProp });
     }
+    const stateNames = new Map();
     for (const state of states) {
-        names.template.set(state.name, `state_${safe(state.name)}`);
-        names.script.set(state.name, `state_${safe(state.name)}.value`);
+        const name = identifiers.take(state.name, "State");
+        stateNames.set(state, name);
+        const inferred = state.expression === undefined ? UNKNOWN : typeOf(state.expression.ast, script);
+        const declared = state.type === undefined ? undefined : present(parseTypeExpression(state.type));
+        // A declared type wins; an absent initial value keeps the state nullable.
+        const initial = declared === undefined ? inferred : { type: declared.type, nullable: declared.nullable || inferred === UNKNOWN, null: (declared.null ?? false) || inferred === UNKNOWN };
+        define(state.name, name, `${name}.value`, initial);
     }
     for (const value of computedValues) {
-        names.template.set(value.name, `computed_${safe(value.name)}`);
-        names.script.set(value.name, `computed_${safe(value.name)}.value`);
-    }
-    if (template.flow !== undefined) {
-        fail("HT036", `<${contract.tag}> has a structural directive on its root, which Vue conversion does not support yet.`);
+        const name = identifiers.take(value.name, "Computed");
+        stateNames.set(value, name);
+        define(value.name, name, `${name}.value`, value.expression === undefined ? UNKNOWN : typeOf(value.expression.ast, script));
     }
+    const handlerNames = new Map(handlers.map((handler) => [handler.name, identifiers.take(handler.name, "Handler")]));
     const styles = compileComponentStylesForVue(definition.css, definition);
     const controlled = definition.controller !== undefined;
     const dispatches = events.length > 0 || controlled;
-    const reads = styles.stateNames.length > 0 || controlled;
     const context = {
         definition,
+        lowering,
         imports: new Set(),
-        usesRefs: { value: false },
+        refs: new Map(),
+        identifiers,
+        handlers: handlerNames,
         root: dispatches,
         hostState: styles.stateNames.length > 0,
-        ...(modelProp === undefined ? {} : { model: template.name === "select" ? "change" : "input" }),
+        model: modelProp !== undefined,
     };
     const rootMarkup = renderElement(template, names, context, true);
     const defaults = target.props.filter((prop) => "default" in prop.contract);
+    // An optional prop is declared as Vue authors declare one, `name?: T`; absent is undefined.
+    const propType = (prop) => typeSource(prop.contract.type);
     const propsType = [
         "{",
-        ...target.props.map((prop) => `  ${propKey(prop.name)}?: ${propTypeSource(prop.contract)};`),
+        ...target.props.map((prop) => `  ${propKey(prop.name)}?: ${propType(prop)};`),
         ...(modelProp === undefined ? [] : [`  modelValue?: ${propTypeSource(modelProp.contract)};`]),
         "}",
     ].join("\n");
+    // An event whose detail reports a prop's new value (query-change's { query }, open and close's
+    // { open }) also updates that prop, so Vue consumers can write v-model:query and v-model:open.
+    const modeled = target.props.filter((prop) => prop !== modelProp && events.some((event) => {
+        const detail = parseTypeExpression(event.type);
+        return detail.kind === "object" && detail.fields.some((field) => field.name === prop.name);
+    }));
     const emits = [
+        ...modeled.map((prop) => `  ${quote(`update:${prop.name}`)}: [value: ${typeSource(prop.contract.type)}];`),
         ...events.map((event) => {
             const typed = target.events.find((candidate) => candidate.name === event.name);
             return `  ${quote(event.name)}: [detail: ${typed?.detailType ?? "unknown"}];`;
         }),
         ...(modelProp === undefined ? [] : ['  "update:modelValue": [value: string];']),
     ];
-    const body = [
-        ...(target.props.length === 0 ? [] : defaults.length === 0 ? [`const props = defineProps<${propsType}>();`] : [
-            `const props = withDefaults(defineProps<${propsType}>(), {`,
-            ...defaults.map((prop) => `  ${propKey(prop.name)}: ${defaultSource(prop.contract.default)},`),
-            "});",
-        ]),
-        ...(emits.length === 0 ? [] : ["const emit = defineEmits<{", ...emits, "}>();"]),
-        ...(modelProp === undefined ? [] : [
-            'const updateModel = (event: Event): void => emit("update:modelValue", (event.target as HTMLInputElement).value);',
-        ]),
-        ...(dispatches ? ["const root = ref<HTMLElement | null>(null);"] : []),
-        ...(context.usesRefs.value || controlled ? ["const refs: Record<string, Element | undefined> = {};"] : []),
-        ...states.map((state) => `const state_${safe(state.name)} = ref<any>(${state.expression === undefined ? "undefined" : expression(state.expression.ast, names.script)});`),
-        ...computedValues.map((value) => `const computed_${safe(value.name)} = computed(() => ${value.expression === undefined ? "undefined" : expression(value.expression.ast, names.script)});`),
-        ...(!dispatches ? [] : [
-            "",
-            "/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */",
-            "const dispatch = (name: string, detail?: unknown): boolean => {",
-            ...(events.length === 0 ? [] : [
-                `  const declared = ${JSON.stringify(Object.fromEntries(events.map((event) => [event.name, { bubbles: event.bubbles, composed: event.composed, cancelable: event.cancelable }])))} as Record<string, EventInit | undefined>;`,
-                "  const checks: Record<string, (detail: unknown) => boolean> = {",
-                ...events.map((event) => `    ${quote(event.name)}: (detail: unknown) => ${typeCheck(parseTypeExpression(event.type), "detail")},`),
-                "  };",
-                "  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {",
-                "    throw new TypeError(`HR002: Event \\`${name}\\` detail does not satisfy its declared type.`);",
-                "  }",
-                "  (emit as (name: string, detail: unknown) => void)(name, detail);",
-            ]),
-            `  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ${events.length === 0 ? "" : "...declared[name], "}detail })) ?? true;`,
-            "};",
-        ]),
-        ...handlers.map((handler) => handlerSource(handler, names, events)),
-        ...(styles.stateNames.length === 0 ? [] : [
-            "",
-            "/** The resolved values the styles' :host-state() rules test. */",
-            `const hostState = computed(() => (${JSON.stringify(styles.stateNames)} as const).flatMap((name) => {`,
-            "  const value = read(name);",
-            "  const tokens: string[] = hn.t(value) ? [name] : [];",
-            "  if (typeof value === \"string\" || typeof value === \"number\") tokens.push(`${name}=${encodeURIComponent(String(value))}`);",
-            "  return tokens;",
-            "}).join(\" \"));",
-        ]),
-        ...(!reads ? [] : [
-            "",
-            "function read(name: string): unknown {",
-            ...states.map((state) => `  if (name === ${quote(state.name)}) return state_${safe(state.name)}.value;`),
-            ...computedValues.map((value) => `  if (name === ${quote(value.name)}) return computed_${safe(value.name)}.value;`),
-            target.props.length === 0 ? "  return undefined;" : "  return (props as Record<string, unknown>)[name];",
-            "}",
-        ]),
-        ...(!controlled ? [] : [
-            "",
-            "function write(name: string, value: unknown): boolean {",
-            ...states.map((state) => `  if (name === ${quote(state.name)}) { state_${safe(state.name)}.value = value; return true; }`),
-            "  throw new TypeError(`Only declared state is writable; \\`${name}\\` is not.`);",
-            "}",
+    const handlerSources = handlers.map((handler) => handlerSource(handler, handlerNames.get(handler.name), names, events, context));
+    const stateSource = (declaration) => {
+        const name = stateNames.get(declaration);
+        const initial = declaration.expression === undefined ? "undefined" : lowering.value(declaration.expression.ast, script);
+        if (declaration.kind === "computed")
+            return `const ${name} = computed(() => ${initial});`;
+        const type = script.types.get(declaration.name);
+        // Scalars infer their own type; structured and unknown initial values declare what they hold.
+        const plain = ["boolean", "string", "number"].includes(category(type.type)) && !type.nullable;
+        return `const ${name} = ref${plain ? "" : `<${typeScript(type)}>`}(${initial});`;
+    };
+    const body = [];
+    body.push(...(target.props.length === 0 ? [] : defaults.length === 0 ? [`const props = defineProps<${propsType}>();`] : [
+        `const props = withDefaults(defineProps<${propsType}>(), {`,
+        ...defaults.map((prop) => `  ${propKey(prop.name)}: ${defaultSource(prop.contract.default)},`),
+        "});",
+    ]), ...(emits.length === 0 ? [] : ["const emit = defineEmits<{", ...emits, "}>();"]), ...(modelProp === undefined ? [] : [
+        "const model = computed({",
+        "  get: () => props.modelValue ?? props.value ?? undefined,",
+        '  set: (value) => emit("update:modelValue", value as string),',
+        "});",
+    ]), "", ...(dispatches ? ["const root = ref<HTMLElement | null>(null);"] : []), ...[...context.refs].map(([ref, name]) => `const ${name} = useTemplateRef<HTMLElement>(${quote(ref)});`), ...states.map(stateSource), ...computedValues.map(stateSource), ...(styles.stateNames.length === 0 ? [] : [
+        "",
+        "/** The values the styles' :host-state() rules test. */",
+        "const hostState = computed(() => [",
+        ...styles.stateNames.flatMap((name) => stateTokens(name, script, lowering)).map((token) => `  ${token},`),
+        "].filter(Boolean).join(\" \"));",
+    ]), ...(!dispatches ? [] : [
+        "",
+        "/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */",
+        "function dispatch(name: string, detail?: unknown): boolean {",
+        ...(events.length === 0 ? [] : [
+            `  const declared: Record<string, EventInit | undefined> = ${JSON.stringify(Object.fromEntries(events.map((event) => [event.name, { bubbles: event.bubbles, composed: event.composed, cancelable: event.cancelable }])))};`,
+            "  const checks: Record<string, (detail: unknown) => boolean> = {",
+            ...events.map((event) => `    ${quote(event.name)}: (detail) => ${typeCheck(parseTypeExpression(event.type), "detail").replace(/^\((.*)\)$/s, "$1")},`),
+            "  };",
+            "  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {",
+            "    throw new TypeError(`HR002: Event \\`${name}\\` detail does not satisfy its declared type.`);",
+            "  }",
+            "  const emitEvent = emit as (name: string, detail: unknown) => void;",
+            "  emitEvent(name, detail);",
+            ...modeled.map((prop) => `  if (detail !== null && typeof detail === "object" && ${quote(prop.name)} in detail) emitEvent(${quote(`update:${prop.name}`)}, (detail as Record<string, unknown>)[${quote(prop.name)}]);`),
         ]),
+        `  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ${events.length === 0 ? "" : "...declared[name], "}detail })) ?? true;`,
+        "}",
+    ]), ...handlerSources.flatMap((source) => ["", source]), ...(!controlled ? [] : [
         "",
-        ...hostSource(definition, target.methods),
-    ];
+        "function read(name: string): unknown {",
+        ...[...states, ...computedValues].map((declaration) => `  if (name === ${quote(declaration.name)}) return ${stateNames.get(declaration)}.value;`),
+        target.props.length === 0 ? "  return undefined;" : "  return (props as Record<string, unknown>)[name];",
+        "}",
+        "",
+        "function write(name: string, value: unknown): boolean {",
+        ...states.map((state) => `  if (name === ${quote(state.name)}) { ${stateNames.get(state)}.value = value as never; return true; }`),
+        "  throw new TypeError(`Only declared state is writable; \\`${name}\\` is not.`);",
+        "}",
+    ]), "", ...hostSource(definition, target.methods, context.refs), ...lowering.fallbacks().flatMap((source) => ["", source]));
+    // `props` is named only when the script reads it; the template reads props by name.
+    if (!body.some((line) => /\bprops\b/.test(line) && !line.startsWith("const props = "))) {
+        const index = body.findIndex((line) => line.startsWith("const props = "));
+        if (index !== -1)
+            body[index] = body[index].replace("const props = ", "");
+    }
     const code = `${body.join("\n")}\n${rootMarkup}`;
     const apis = VUE_APIS.filter((api) => new RegExp(`\\b${api}[<(]`).test(code));
-    const script = [
+    const lines = [
         `<!-- Generated by HTML Next ${version} for Vue 3.5. Do not edit. -->`,
         '<script setup lang="ts">',
         ...(apis.length === 0 ? [] : [`import { ${apis.join(", ")} } from "vue";`]),
@@ -490,24 +512,24 @@ export function generateVue(definition, version) {
         "",
         "defineOptions({ inheritAttrs: false });",
         "",
-        helperSource(code),
         ...body,
         "</script>",
         "",
         "<template>",
-        `  ${rootMarkup}`,
+        rootMarkup,
         "</template>",
     ];
     if (styles.css !== "")
-        script.push("", "<style scoped>", styles.css, "</style>");
-    return `${script.join("\n").replace(/\n{3,}/g, "\n\n")}\n`;
+        lines.push("", "<style scoped>", styles.css, "</style>");
+    const source = `${lines.join("\n").replace(/\n{3,}/g, "\n\n").replace(/(?<=<script setup lang="ts">\n)\n/, "").replace(/\n\n(?=<\/script>)/, "\n")}\n`;
+    return formatVue(source, `${componentName(contract.tag)}.vue`);
 }
 function defaultSource(value) {
     // Vue requires factories for object and array defaults.
     return value !== null && typeof value === "object" ? `() => (${JSON.stringify(value)})` : JSON.stringify(value);
 }
 /** The controller host, built from Vue refs, effects, and lifecycle. */
-function hostSource(definition, methods) {
+function hostSource(definition, methods, refs) {
     if (definition.controller === undefined)
         return methods.length === 0 ? [] : [
             `defineExpose({ ${methods.map((method) => `${propKey(method.name)}: () => Promise.reject(new TypeError(${quote(`<${definition.contract.tag}> has no controller.`)}))`).join(", ")} });`,
@@ -520,7 +542,9 @@ function hostSource(definition, methods) {
         "    get: (_target, name) => typeof name === \"string\" ? read(name) : undefined,",
         "    set: (_target, name, value) => typeof name === \"string\" && write(name, value),",
         "  }),",
-        "  refs: refs as Readonly<Record<string, Element>>,",
+        "  refs: {",
+        ...[...refs].map(([ref, name]) => `    get ${propKey(ref)}(): Element { return ${name}.value as Element; },`),
+        "  } as Readonly<Record<string, Element>>,",
         "  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {",
         "    get: (_target, name) => {",
         "      if (typeof name !== \"string\" || root.value === null) return undefined;",