@transclude/core 0.1.0

package/src/compiler/shim.js

@@ -0,0 +1,756 @@
+// Turns a .html file into JavaScript that means the same thing, so tsc can
+// check it.
+//
+// JavaScript rather than TypeScript, on purpose. A JSDoc `@type` in the
+// author's own `<script props>` is honoured in a .js file and silently ignored
+// in a .ts one. The job is to check what the author wrote, so the shim speaks the
+// same language they do. The scaffolding uses JSDoc too.
+//
+// The shim is never written to disk and never run. It exists only to be type
+// checked. Its one hard requirement is that every position tsc reports can
+// be traced back to the .html file, so it is assembled from chunks: text we
+// generated (unmapped) and text copied verbatim from the source (mapped). A
+// diagnostic offset lands inside one chunk, and a verbatim chunk knows where it
+// came from.
+
+import { parse, parseExpressionAt } from 'acorn';
+import { childrenOf } from './codegen.js';
+import { splitInterpolations } from './interp.js';
+import { splitBlocks } from './index.js';
+import { planLift } from './script.js';
+import { ACTION_METHODS } from '../document.js';
+import { ENDPOINT_METHODS } from '../server.js';
+
+const DIRECTIVES = new Set(['if', 'else-if', 'else', 'each']);
+
+/**
+ * Attributes that are not props, whatever they land on. `data-*` and `aria-*`
+ * are the platform's own, and `hx-*` belongs to whichever library the author
+ * brought. None of them are declared in `<script properties>`, so
+ * checking them as props turns a correct page into a type error. That is what
+ * `hx-get="/notes?id=${id}"` on a component used to be.
+ *
+ * They are still checked, just as expressions rather than as props: a typo in
+ * the `${…}` is an error the same as anywhere else. Only the claim that the name
+ * is a declared prop goes away.
+ */
+const PASS_THROUGH = /^(?:data|aria|hx)-/;
+
+/**
+ * `ctx.cookies`, named rather than written into the route context. That context is
+ * a string built in typecheck.js, and it would otherwise carry this whole shape
+ * into every shim that mentions it.
+ *
+ * Emitted by every shim whose context names it. A type name JSDoc cannot resolve
+ * is not an error, it is `any`, so a shim that named `__Cookies` without defining
+ * it type-checked happily and caught nothing. The endpoint shim
+ * did exactly that.
+ */
+const COOKIES_TYPEDEF =
+  '/**\n' +
+  ' * @typedef {{ path?: string; domain?: string; maxAge?: number; expires?: Date;\n' +
+  ' *   httpOnly?: boolean; secure?: boolean; sameSite?: "Strict" | "Lax" | "None" }} __CookieOptions\n' +
+  ' */\n' +
+  '/**\n' +
+  ' * @typedef {{\n' +
+  ' *   get(name: string): string | undefined;\n' +
+  ' *   all(): Record<string, string>;\n' +
+  ' *   set(name: string, value: string, options?: __CookieOptions): void;\n' +
+  ' *   delete(name: string, options?: __CookieOptions): void;\n' +
+  ' *   signed: {\n' +
+  ' *     get(name: string): Promise<string | undefined>;\n' +
+  ' *     all(): Promise<Record<string, string>>;\n' +
+  ' *     set(name: string, value: string, options?: __CookieOptions): Promise<void>;\n' +
+  ' *   };\n' +
+  ' * }} __Cookies\n */\n\n';
+
+class Builder {
+  constructor() {
+    this.chunks = [];
+    this.length = 0;
+    // A block that will not parse cannot be turned into anything tsc can read.
+    // Rather than emit a degraded shim and let tsc invent consequences in other
+    // files, the failure is carried out and reported where it happened.
+    this.syntaxErrors = [];
+  }
+
+  /** An acorn failure, relocated from inside the block to the .html file. */
+  failed(error, block) {
+    this.syntaxErrors.push({
+      offset: block.offset + (error.pos ?? 0),
+      message: error.message.replace(/\s*\(\d+:\d+\)$/, ''),
+    });
+  }
+
+  /** Text we invented. Diagnostics landing here have nowhere useful to point. */
+  add(text) {
+    if (!text) return;
+    this.chunks.push({ start: this.length, text, source: null });
+    this.length += text.length;
+  }
+
+  /** Text lifted from the .html file, carrying the offset it came from. */
+  copy(text, sourceOffset) {
+    if (!text) return;
+    this.chunks.push({ start: this.length, text, source: sourceOffset });
+    this.length += text.length;
+  }
+
+  /**
+   * Generated text that still has somewhere true to point: every offset inside it
+   * maps to one source position.
+   *
+   * For the annotations. A `@satisfies` is ours, not the author's, but the errors
+   * it produces are about their code. `TS1360: type '() => void' does not satisfy`
+   * is reported at the comment, so with `add` it mapped to nothing and was
+   * dropped. A handler that returned no Response type-checked silently.
+   */
+  pin(text, sourceOffset) {
+    if (!text) return;
+    this.chunks.push({ start: this.length, text, source: sourceOffset, pinned: true });
+    this.length += text.length;
+  }
+
+  build() {
+    return {
+      code: this.chunks.map((chunk) => chunk.text).join(''),
+      chunks: this.chunks,
+      syntaxErrors: this.syntaxErrors,
+    };
+  }
+}
+
+/**
+ * Maps an offset in the shim back to an offset in the .html file, or null when
+ * it landed in generated scaffolding.
+ *
+ * @param {object[]} chunks what the Builder recorded
+ * @param {number} offset into the shim
+ * @returns {number|null} the offset in the .html file, or null when it does not map
+ */
+export function originalOffset(chunks, offset) {
+  let low = 0;
+  let high = chunks.length - 1;
+
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    const chunk = chunks[mid];
+    if (offset < chunk.start) high = mid - 1;
+    else if (offset >= chunk.start + chunk.text.length) low = mid + 1;
+    else if (chunk.source === null) return null;
+    else return chunk.pinned ? chunk.source : chunk.source + (offset - chunk.start);
+  }
+  return null;
+}
+
+/**
+ * An endpoint is already a module. There is nothing to compile, only something to
+ * annotate. So the shim is the file, verbatim, with a `@satisfies` spliced in
+ * front of each verb export.
+ *
+ * That buys two things a page's shim also buys: the handler's own `ctx` is typed
+ * from the route context rather than being an implicit `any`, and the return type
+ * is held to `Response`, which is the one rule an endpoint has.
+ *
+ * Copied with offsets like every other shim, so a diagnostic points at the real
+ * line in the real file.
+ *
+ * @param {string} source
+ * @param {{ contextType: string }} options
+ * @returns {{ code: string, chunks: object[], syntaxErrors: object[] }}
+ */
+export function buildEndpointShim(source, { contextType }) {
+  const out = new Builder();
+  out.add('export {};\n');
+  out.add(COOKIES_TYPEDEF);
+
+  let ast;
+  try {
+    ast = parse(source, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      allowAwaitOutsideFunction: true,
+    });
+  } catch (error) {
+    out.failed(error, { offset: 0 });
+    return out.build();
+  }
+
+  const signature = `(ctx: ${contextType}) => Response | Promise<Response>`;
+  const edits = [];
+  const declarations = [];
+
+  for (const node of ast.body) {
+    if (node.type !== 'ExportNamedDeclaration') continue;
+    const declared = node.declaration;
+
+    // Anything not spelled like a method is a helper and gets no signature.
+    if (declared?.type === 'VariableDeclaration') {
+      const name = declared.declarations[0]?.id?.name;
+      // `@satisfies` on the initialiser: it contextually types the handler's own
+      // `ctx` *and* holds the return type, which an annotation would flatten.
+      if (isVerb(name)) edits.push({ at: node.start, insert: `/** @satisfies {${signature}} */\n` });
+      continue;
+    }
+
+    if (declared?.type === 'FunctionDeclaration' && isVerb(declared.id?.name)) {
+      // TypeScript ignores `@satisfies` on a function declaration. Measured: it
+      // reports nothing at all. An assignment after the fact is checked, so the
+      // return type still cannot be wrong. What is lost is contextual typing of
+      // the parameter, which is why `export const` is the better spelling.
+      declarations.push({ name: declared.id.name, at: node.start });
+    }
+  }
+
+  let cursor = 0;
+  for (const edit of edits) {
+    out.copy(source.slice(cursor, edit.at), cursor);
+    out.pin(edit.insert, edit.at);
+    cursor = edit.at;
+  }
+  out.copy(source.slice(cursor), cursor);
+
+  for (const { name, at } of declarations) {
+    out.pin(`\n/** @type {${signature}} */\nconst __verb_${name} = ${name};\n`, at);
+  }
+  return out.build();
+}
+
+/**
+ * A handler is named for its method, the way HTTP spells it.
+ *
+ * Held to the methods the router dispatches rather than to any all-caps name,
+ * or `export const LIMIT = 10` beside a handler would be given a `Response`
+ * signature and reported as an error about code that is fine.
+ */
+function isVerb(name) {
+  return Boolean(name) && ENDPOINT_METHODS.includes(name);
+}
+
+/**
+ * A page's verb exports, in source order.
+ *
+ * Held to the methods a page actually dispatches on rather than to `isVerb`,
+ * because a page may export an all-caps constant and giving that a handler
+ * signature would be an error about code that is fine.
+ */
+function actionExports(ast) {
+  const found = [];
+
+  for (const node of ast.body) {
+    if (node.type !== 'ExportNamedDeclaration') continue;
+    const declaration = node.declaration;
+
+    const name =
+      declaration?.type === 'VariableDeclaration'
+        ? declaration.declarations[0]?.id?.name
+        : declaration?.type === 'FunctionDeclaration'
+          ? declaration.id?.name
+          : null;
+
+    if (name && ACTION_METHODS.includes(name)) {
+      found.push({
+        name,
+        at: node.start,
+        declared: declaration.type === 'FunctionDeclaration',
+      });
+    }
+  }
+
+  return found;
+}
+
+/**
+ * `page`, `layout` and `component` differ only in where their data comes from:
+ * a loader checked against a route context, or a props object.
+ *
+ * @param {string} source
+ * @param {{ kind: string, shadow?: boolean, contextType?: string|null,
+ *   componentProps?: Map<string, string> }} options
+ * @returns {{ code: string, chunks: object[], syntaxErrors: object[] }}
+ */
+export function buildShim(source, { kind, shadow = false, contextType = null, componentProps = new Map() }) {
+  const blocks = splitBlocks(source);
+  const out = new Builder();
+
+  // Without at least one import or export a file is a *global script*, and every
+  // shim's __Data would collide in one shared scope. This keeps each file's
+  // types its own.
+  out.add('export {};\n');
+
+  // Two jobs, both about letting the author write plain JS.
+  //
+  // The mapping is what keeps `${user.nmae}` an error. TypeScript treats a type
+  // that came straight from an object literal in a .js file as open for expando
+  // properties, so reading an undeclared one is allowed. Remapping the keys gives
+  // an ordinary object type, where it is not.
+  //
+  // The conditional widens a bare `[]`, which otherwise infers `never[]` and
+  // turns "no annotation" from "less checking" into a page of errors about a
+  // type nobody wrote.
+  out.add(
+    '/**\n * @template T\n' +
+      ' * @typedef {{ [K in keyof T]: T[K] extends never[] ? any[] : T[K] }} __Shape\n */\n',
+  );
+
+  out.add(COOKIES_TYPEDEF);
+
+  const used = [...collectUsedTags(blocks.nodes, componentProps)];
+
+  if (kind === 'component') {
+    // Props and state share one namespace in the template, so they are one type
+    // by the time anything reads them.
+    emitModule(blocks.properties, out, null, '__Props', '__props');
+    emitModule(blocks.state, out, null, '__State', '__stateDefaults');
+    out.add('/** @typedef {__Props & __State} __Data */\n\n');
+    // Each converter is tied to the prop it converts: `from` has to produce
+    // that prop's type, and `to` is handed it. Written out so the author does
+    // not have to annotate a parameter whose type is already known.
+    out.add(
+      '/**\n * @typedef {{ [K in keyof __Props]?: {\n' +
+        ' *   from?: (text: string) => __Props[K];\n' +
+        ' *   to?: (value: __Props[K]) => string | number | boolean | null | undefined;\n' +
+        ' * } }} __Attrs\n */\n\n',
+    );
+  } else {
+    emitModule(blocks.server, out, contextType, '__Data', '__default');
+  }
+  emitMembers(kind === 'component' ? blocks.client : [], out, shadow);
+
+  // Helpers arrive as parameters rather than module-scope declarations: a
+  // parameter shadows, so it cannot collide with something the author imported.
+  out.add('/**\n');
+  out.add(' * @param {__Data} __d\n');
+  out.add(' * @param {(value: unknown) => string} html\n');
+  out.add(' * @param {(value: unknown) => string} json\n');
+  out.add(' * @param {(value: unknown) => void} __expr\n');
+  for (const tag of used) {
+    out.add(` * @param {(value: Partial<${componentProps.get(tag)}>) => void} ${propsFn(tag)}\n`);
+  }
+  out.add(' */\n');
+  out.add(`function __template(__d, html, json, __expr${used.map((tag) => `, ${propsFn(tag)}`).join('')}) {\n`);
+  emitNodes(blocks.nodes, out, new Set(), componentProps, 1);
+  out.add('}\n');
+
+  // Client blocks are not otherwise part of the shim. They run in the browser with
+  // `host`, `shadow` and `signal` in scope, which tsc has no way to know.
+  // They are still parsed, because a syntax error there should be reported by
+  // the same command that reports every other one.
+  for (const block of blocks.client) {
+    try {
+      parse(block.code, {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        allowAwaitOutsideFunction: true,
+        allowReturnOutsideFunction: true,
+      });
+    } catch (error) {
+      out.failed(error, block);
+    }
+  }
+
+  // The one export the type extractor reads: whatever __Data resolved to is the
+  // file's data shape, and asking tsc for it is how transclude-env.d.ts gets written.
+  out.add('\n/** @type {__Data} */\n');
+  out.add('export let __data;\n');
+  out.add('/** @type {__Members} */\n');
+  out.add('export let __members;\n');
+  if (kind === 'component') {
+    // Read separately from __data: a parent passes props and cannot reach
+    // state, so the type a parent is checked against must not include it.
+    out.add('/** @type {__Props} */\n');
+    out.add('export let __propTypes;\n');
+    out.add('/** @type {__State} */\n');
+    out.add('export let __state;\n');
+  }
+
+  return out.build();
+}
+
+/**
+ * `<script server>` and `<script props>` are module bodies, not expressions: they
+ * have imports and may have named exports of their own. Those stay where they
+ * are, because the shim is a module too, and only the default export is rebound. For a
+ * loader that rebinding is what types its parameter from the route context while
+ * leaving the return type inferred.
+ */
+function emitModule(block, out, contextType, name = '__Data', binding = '__default') {
+  if (!block) {
+    out.add(`/** @typedef {{}} ${name} */\n\n`);
+    return;
+  }
+  let ast;
+  try {
+    ast = parse(block.code, { ecmaVersion: 'latest', sourceType: 'module', allowAwaitOutsideFunction: true });
+  } catch (error) {
+    // Half a file gives tsc nothing useful to say, so the parse failure itself
+    // is the diagnostic.
+    out.failed(error, block);
+    out.add(`/** @typedef {{}} ${name} */\n\n`);
+    return;
+  }
+
+  // The block is copied whole with pieces spliced in at exact offsets, so every
+  // position still maps back to the .html file. Copying statement by statement
+  // would drop everything that is not a statement, such as a loose `@typedef` or a
+  // JSDoc comment attached to an export, and those are how an author says what an
+  // empty array holds.
+  const edits = [];
+
+  // A props block annotates `attributes`; a server block annotates `actions`,
+  // which types every handler's own `ctx` from the same route context the
+  // loader gets. Neither depends on there being a default export.
+  const attrs = binding === '__props' ? namedExport(ast, 'attributes') : null;
+  if (attrs) edits.push({ at: attrs.start, insert: '/** @type {__Attrs} */\n' });
+
+  // A page's handlers are named for their methods, the same way an endpoint's
+  // are. The route context here has `request` non-nullable: it is null only
+  // while prerendering, and prerendering never runs an action.
+  const verbs = contextType ? actionExports(ast) : [];
+  for (const verb of verbs) {
+    // Only on `export const`. TypeScript ignores `@satisfies` on a function
+    // declaration, so emitting one there would be a check that reads as if it
+    // ran. The return type is still picked up below either way.
+    if (verb.declared) continue;
+    edits.push({
+      at: verb.at,
+      insert: `/** @satisfies {(ctx: ${contextType} & { request: Request }) => unknown} */\n`,
+    });
+  }
+
+  const statement = ast.body.find((node) => node.type === 'ExportDefaultDeclaration');
+  const declaration = statement?.declaration;
+  if (statement) edits.push({ at: statement.start, statement });
+  edits.sort((a, b) => a.at - b.at);
+
+  let cursor = 0;
+  for (const edit of edits) {
+    out.copy(block.code.slice(cursor, edit.at), block.offset + cursor);
+    cursor = edit.at;
+
+    if (edit.insert) {
+      out.pin(edit.insert, block.offset + edit.at);
+      continue;
+    }
+    // `satisfies` is doing real work: it contextually types the loader's own
+    // parameter *and* leaves the return type intact for the template below. An
+    // annotation would flatten one or the other.
+    //
+    // The loader's `ctx.action` is whatever this page's own actions return. It is
+    // `unknown` in the route context, narrowed here by intersection to the union
+    // of their return types. A `Response` is excluded because returning
+    // one short-circuits: the loader never runs, so it can never see it.
+    if (contextType) {
+      const returns = verbs.map((verb) => `Awaited<ReturnType<typeof ${verb.name}>>`).join(' | ');
+      const action = verbs.length ? `Exclude<${returns}, Response>` : 'null';
+      out.add(
+        `\n/** @satisfies {(ctx: ${contextType} & { action: ${action} | null }) => unknown} */\n`,
+      );
+    }
+    out.add(`const ${binding} = (`);
+    out.copy(
+      block.code.slice(declaration.start, declaration.end),
+      block.offset + declaration.start,
+    );
+    out.add(');\n');
+    cursor = statement.end;
+  }
+  out.copy(block.code.slice(cursor), block.offset + cursor);
+  out.add('\n');
+
+  // No default export means a block that only does other things, such as `paths`,
+  // `prerender` or `actions`. It renders from nothing, so its data shape is empty.
+  if (!statement) {
+    out.add(`/** @typedef {{}} ${name} */\n\n`);
+    return;
+  }
+
+  out.add(
+    contextType
+      ? `/** @typedef {__Shape<Awaited<ReturnType<typeof ${binding}>>>} ${name} */\n\n`
+      : `/** @typedef {__Shape<typeof ${binding}>} ${name} */\n\n`,
+  );
+}
+
+/**
+ * `export const prototype` is checked the same way as everything else, with one
+ * addition: `this` inside its members has to mean the element.
+ *
+ * `T & ThisType<Host & __Data & T>` is the whole trick. `T` infers from the
+ * object literal, so the members keep their real types and transclude-env.d.ts can be
+ * written from them; `ThisType` contextually types `this` without changing what
+ * the value is. Including `T` in the intersection is what lets one member call
+ * another.
+ *
+ * `shadowRoot` is narrowed rather than left as `ShadowRoot | null`: a shadow
+ * element always has one by the time any of this runs, and a light one never
+ * does. The DOM's type cannot know that; the file's `shadow` flag does.
+ *
+ * Only the members and what they read come across. The rest of the block runs
+ * with `host`, `shadow` and `signal` in scope, which tsc has no way to know. Its
+ * imports may be browser-only, so they are copied only where a member uses
+ * them. A block that will not parse is skipped in silence here, because the
+ * syntax pass below is what reports it, once.
+ */
+function emitMembers(blocks, out, shadow) {
+  for (const block of blocks) {
+    let ast;
+    try {
+      ast = parse(block.code, {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        allowAwaitOutsideFunction: true,
+        allowReturnOutsideFunction: true,
+      });
+    } catch {
+      continue;
+    }
+
+    const plan = planLift(ast, 'prototype');
+    if (!plan) continue;
+
+    for (const statement of ast.body) {
+      if (statement.type !== 'ImportDeclaration') continue;
+      if (!statement.specifiers.some((spec) => plan.reads.has(spec.local.name))) continue;
+      out.copy(block.code.slice(statement.start, statement.end), block.offset + statement.start);
+      out.add('\n');
+    }
+    for (const dependency of plan.deps) {
+      out.copy(block.code.slice(dependency.start, dependency.end), block.offset + dependency.start);
+      out.add('\n');
+    }
+
+    const host = `HTMLElement & { shadowRoot: ${shadow ? 'ShadowRoot' : 'null'} }`;
+    out.add(
+      '\n/**\n * @template T\n' +
+        ` * @param {T & ThisType<${host} & __Data & T>} m\n` +
+        ' * @returns {T}\n */\n' +
+        'function __self(m) { return m; }\n' +
+        'const __memberDefs = __self(',
+    );
+    out.copy(block.code.slice(plan.init.start, plan.init.end), block.offset + plan.init.start);
+    out.add(');\n/** @typedef {typeof __memberDefs} __Members */\n\n');
+    return;
+  }
+  out.add('/** @typedef {{}} __Members */\n\n');
+}
+
+/** `export const <name> = …`, as a statement, or null. */
+function namedExport(ast, name) {
+  return (
+    ast.body.find(
+      (node) =>
+        node.type === 'ExportNamedDeclaration' &&
+        node.declaration?.type === 'VariableDeclaration' &&
+        node.declaration.declarations.some(
+          (declarator) => declarator.id.type === 'Identifier' && declarator.id.name === name,
+        ),
+    ) ?? null
+  );
+}
+
+/** A distinct checker per component tag, since JS cannot pass a type argument. */
+function propsFn(tag) {
+  return `__props_${tag.replace(/[^A-Za-z0-9]/g, '_')}`;
+}
+
+function emitNodes(nodes, out, scope, components, depth) {
+  for (const node of nodes) {
+    if (node.nodeName === '#text') {
+      emitInterpolations(node.value ?? '', node.sourceCodeLocation?.startOffset ?? 0, out, scope, depth);
+      continue;
+    }
+    if (!node.tagName) continue;
+
+    const each = node.attrs?.find((attr) => attr.name === 'each');
+    const inner = new Set(scope);
+    let closes = 0;
+
+    if (each) {
+      const spec = /^\s*([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*)\s*)?\s+of\s+([\s\S]+?)\s*$/.exec(
+        each.value,
+      );
+      if (spec) {
+        const listOffset = attrValueOffset(node, 'each') + each.value.indexOf(spec[3]);
+        indent(out, depth);
+        out.add(`for (const ${spec[1]} of `);
+        emitExpression(spec[3], listOffset, out, scope);
+        out.add(') {\n');
+        inner.add(spec[1]);
+        if (spec[2]) {
+          indent(out, depth + 1);
+          out.add(`const ${spec[2]}: number = 0;\n`);
+          inner.add(spec[2]);
+        }
+        closes++;
+      }
+    }
+
+    const body = depth + closes;
+
+    // A component's interpolated attributes are checked as props below; emitting
+    // them here as well would report every mistake twice.
+    const isComponent = components.has(node.tagName);
+
+    for (const attr of node.attrs ?? []) {
+      if (attr.name === 'each') continue;
+      const offset = attrValueOffset(node, attr.name);
+
+      if (DIRECTIVES.has(attr.name)) {
+        if (attr.name === 'else') continue;
+        indent(out, body);
+        out.add('__expr(');
+        emitExpression(attr.value, offset, out, inner);
+        out.add(');\n');
+        continue;
+      }
+      // A pass-through attribute is not a prop, so it is checked here like any
+      // other interpolation rather than below with the props.
+      if (isComponent && !PASS_THROUGH.test(attr.name) && /\$\{/.test(attr.value)) continue;
+      emitInterpolations(attr.value, offset, out, inner, body);
+    }
+
+    if (isComponent) emitComponentProps(node, out, inner, components, body);
+
+    emitNodes(childrenOf(node), out, inner, components, body);
+
+    for (let i = 0; i < closes; i++) {
+      indent(out, depth + closes - 1 - i);
+      out.add('}\n');
+    }
+  }
+}
+
+/** Only interpolated props are checked; a literal attribute is coerced at runtime. */
+function emitComponentProps(node, out, scope, components, depth) {
+  const dynamic = (node.attrs ?? []).filter(
+    (attr) =>
+      !DIRECTIVES.has(attr.name) && !PASS_THROUGH.test(attr.name) && /\$\{/.test(attr.value),
+  );
+  if (!dynamic.length) return;
+
+  indent(out, depth);
+  out.add(`${propsFn(node.tagName)}({ `);
+  for (const attr of dynamic) {
+    const parts = splitInterpolations(attr.value);
+
+    // Props are declared camelCase and written dash-case, so the key is checked
+    // under the name `<script props>` gave it. Still mapped to the attribute in
+    // the source: an unmapped key would have its diagnostic dropped.
+    const prop = camelCase(attr.name);
+    if (/^[A-Za-z_$][\w$]*$/.test(prop)) {
+      out.copy(prop, attrNameOffset(node, attr.name));
+      out.add(': ');
+    } else {
+      out.add(`${JSON.stringify(attr.name)}: `);
+    }
+    if (parts.length === 1 && parts[0].type === 'expr') {
+      emitExpression(parts[0].value, attrValueOffset(node, attr.name) + 2, out, scope);
+    } else {
+      out.add('""');
+    }
+    out.add(', ');
+  }
+  out.add('});\n');
+}
+
+function emitInterpolations(text, offset, out, scope, depth) {
+  let cursor = 0;
+  for (const part of splitInterpolations(text)) {
+    if (part.type === 'expr') {
+      // `${` is two characters before the expression itself.
+      const start = offset + text.indexOf(part.value, cursor);
+      indent(out, depth);
+      out.add('__expr(');
+      emitExpression(part.value, start, out, scope);
+      out.add(');\n');
+    }
+    cursor += part.value.length;
+  }
+}
+
+/**
+ * Copies an expression verbatim, prefixing the identifiers that come from
+ * template data with `__d.`. Prefixing only inserts, so everything the author
+ * wrote keeps its own offset and a diagnostic points at the real token.
+ */
+function emitExpression(text, offset, out, scope) {
+  let ast;
+  try {
+    ast = parseExpressionAt(text, 0, { ecmaVersion: 'latest' });
+  } catch {
+    out.add('undefined');
+    return;
+  }
+
+  const roots = [];
+  collectRoots(ast, scope, roots);
+  roots.sort((a, b) => a.start - b.start);
+
+  let cursor = 0;
+  for (const root of roots) {
+    out.copy(text.slice(cursor, root.start), offset + cursor);
+    out.add('__d.');
+    cursor = root.start;
+  }
+  out.copy(text.slice(cursor), offset + cursor);
+}
+
+/** Identifiers that are neither loop variables nor globals resolve to data. */
+function collectRoots(node, scope, out) {
+  if (!node || typeof node !== 'object' || !node.type) return;
+
+  switch (node.type) {
+    case 'Identifier':
+      if (!scope.has(node.name) && !GLOBALS.has(node.name)) out.push(node);
+      return;
+    case 'MemberExpression':
+      collectRoots(node.object, scope, out);
+      if (node.computed) collectRoots(node.property, scope, out);
+      return;
+    case 'CallExpression':
+      collectRoots(node.callee, scope, out);
+      for (const arg of node.arguments) collectRoots(arg, scope, out);
+      return;
+    default:
+      for (const key of ['argument', 'left', 'right', 'test', 'consequent', 'alternate', 'expression']) {
+        if (node[key]) collectRoots(node[key], scope, out);
+      }
+      for (const element of node.elements ?? []) collectRoots(element, scope, out);
+      return;
+  }
+}
+
+const GLOBALS = new Set([
+  'html', 'Math', 'JSON', 'String', 'Number', 'Boolean', 'Array', 'Object', 'Date',
+  'isNaN', 'parseInt', 'parseFloat', 'undefined', 'NaN', 'Infinity', 'true', 'false', 'null',
+]);
+
+function collectUsedTags(nodes, components, found = new Set()) {
+  for (const node of nodes) {
+    if (!node.tagName) continue;
+    if (components.has(node.tagName)) found.add(node.tagName);
+    collectUsedTags(childrenOf(node), components, found);
+  }
+  return found;
+}
+
+/** `page-size` -> `pageSize`, matching the runtime's attrName in reverse. */
+function camelCase(attr) {
+  return attr.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+function attrNameOffset(node, name) {
+  return node.sourceCodeLocation?.attrs?.[name]?.startOffset ?? node.sourceCodeLocation?.startOffset ?? 0;
+}
+
+function attrValueOffset(node, name) {
+  const location = node.sourceCodeLocation?.attrs?.[name];
+  if (!location) return node.sourceCodeLocation?.startOffset ?? 0;
+  // startOffset points at the attribute name; step past `name="`.
+  return location.startOffset + name.length + 2;
+}
+
+function indent(out, depth) {
+  out.add('  '.repeat(Math.max(1, depth)));
+}