ferrovue 0.3.0 → 0.4.0

package/dist/fallthrough.d.ts

@@ -0,0 +1,9 @@
+import { type Component, type N } from "./model.ts";
+export declare function isDollarAttrs(n: N, bindings: Set<string>): boolean;
+export declare function passedKey(child: Component, key: string): boolean;
+export declare function attrsFlow(read: {
+    comp: Component;
+    ssr: string;
+    children: Map<string, string>;
+    attrsBindings: Set<string>;
+}[]): void;

package/dist/fallthrough.js

@@ -0,0 +1,78 @@
+import { parse as parseJs } from "@babel/parser";
+import { declares } from "./model.js";
+export function isDollarAttrs(n, bindings) {
+    if (n?.type !== "MemberExpression" || n.object.type !== "Identifier")
+        return false;
+    const prop = n.computed ? n.property.value : n.property.name;
+    if (n.object.name === "_ctx")
+        return prop === "$attrs";
+    return n.object.name === "$setup" && prop !== undefined && bindings.has(prop);
+}
+export function passedKey(child, key) {
+    if (["", "key", "ref", "ref_for", "ref_key", "innerHTML", "textContent"].includes(key) || /^on[^a-z]/.test(key))
+        return false;
+    return !(key.endsWith("Modifiers") && declares(child, key === "modelModifiers" ? "modelValue" : key.slice(0, -"Modifiers".length)));
+}
+export function attrsFlow(read) {
+    const byName = new Map(read.map((r) => [r.comp.name, r.comp]));
+    const flows = read.map((r) => {
+        const calls = [];
+        const self = new Set();
+        const walk = (n) => {
+            if (!n || typeof n !== "object")
+                return;
+            if (Array.isArray(n)) {
+                n.forEach(walk);
+                return;
+            }
+            if (n.type === "VariableDeclarator" && n.init?.type === "CallExpression" && n.init.callee.name === "_resolveComponent") {
+                if (n.init.arguments[0]?.value === r.comp.name && n.init.arguments[1])
+                    self.add(n.id.name);
+            }
+            if (n.type === "CallExpression" && n.callee.type === "Identifier" && n.callee.name === "_ssrRenderComponent") {
+                const target = n.arguments[0];
+                const child = target?.type === "MemberExpression" && target.object.name === "$setup"
+                    ? r.children.get(target.computed ? target.property.value : target.property.name)
+                    : target?.type === "Identifier" && self.has(target.name)
+                        ? r.comp.name
+                        : undefined;
+                const props = n.arguments[1];
+                const parts = props?.type === "CallExpression" && props.callee.name === "_mergeProps" ? props.arguments : props ? [props] : [];
+                if (child) {
+                    calls.push({
+                        child,
+                        keys: parts.filter((p) => p.type === "ObjectExpression").flatMap((p) => p.properties.filter((q) => q.type === "ObjectProperty" && !q.computed).map((q) => q.key.name ?? String(q.key.value))),
+                        passesAttrs: parts.some((p) => p.type === "Identifier" && p.name === "_attrs"),
+                        passesDollar: parts.some((p) => isDollarAttrs(p, r.attrsBindings)),
+                    });
+                }
+            }
+            for (const [key, v] of Object.entries(n))
+                if (key !== "loc" && key !== "start" && key !== "end")
+                    walk(v);
+        };
+        walk(parseJs(r.ssr, { sourceType: "module" }).program);
+        return { comp: r.comp, calls };
+    });
+    for (let changed = true; changed;) {
+        changed = false;
+        for (const f of flows) {
+            for (const c of f.calls) {
+                const child = byName.get(c.child);
+                if (!child)
+                    continue;
+                const names = c.keys.filter((k) => passedKey(child, k));
+                if ((c.passesAttrs && f.comp.inheritAttrs) || c.passesDollar)
+                    names.push(...f.comp.attrNames);
+                for (const name of names) {
+                    if (declares(child, name) || child.attrNames.has(name))
+                        continue;
+                    child.attrNames.add(name);
+                    changed = true;
+                }
+                if (c.passesAttrs && f.comp.inherits && !child.idsInAttrs)
+                    child.idsInAttrs = changed = true;
+            }
+        }
+    }
+}

package/dist/fixture.d.ts

@@ -1,5 +1,6 @@
 import { type App, type Component } from "vue";
-import { type RouteRecordRaw } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
+/** A conformance fixture: the props, and `$slots`, `$route`, `$stores` and `$locale`. */
 export interface Fixture {
     props: Record<string, unknown>;
     slots: Record<string, string>;

package/dist/fixture.js

@@ -1,20 +1,4 @@
-/* An app rendering one conformance fixture with the real Vue: its props, its slots' content, the
- * location it is rendered at under the real vue-router, Pinia's state and vue-i18n's locale.
- *
- * A fixture is a JSON object of props, plus keys that are not props:
- * - `$slots`: each slot's content as HTML, rendered as a static node so both sides write it
- *   exactly as given; `routerView` is the page `<RouterView>` shows.
- * - `$route`: the reader's location, `/` when absent.
- * - `$stores`: Pinia's state, by store id — every store the component reads, in full, because a
- *   store absent here is built from its own `state()`, which the server never runs.
- * - `$locale`: the locale, when the project translates.
- *
- * Nothing here reads a file or compiles anything, so a browser bundle can import it too: the
- * browser hydration tests (`packages/ferrovue/browser/`) build the same app there. */
 import { createApp, createSSRApp, createStaticVNode, defineComponent, h } from "vue";
-import { createPinia } from "pinia";
-import { createMemoryHistory, createRouter } from "vue-router";
-import { createI18n } from "vue-i18n";
 /** A fixture's JSON, split into the props and the rest. */
 export function readFixture(json) {
     const { $slots, $route, $stores, $locale, ...props } = json;
@@ -26,13 +10,41 @@ export function readFixture(json) {
         locale: $locale ?? null,
     };
 }
-/** The top-level nodes in a piece of HTML, which a static node needs to hydrate. */
 function nodeCount(html) {
     const t = document.createElement("template");
     t.innerHTML = html;
     return t.content.childNodes.length;
 }
 const staticNode = (html) => createStaticVNode(html, nodeCount(html));
+function isMissing(error, name) {
+    const { code, message } = (error ?? {});
+    return ((code === "ERR_MODULE_NOT_FOUND" || code === "MODULE_NOT_FOUND") &&
+        typeof message === "string" &&
+        (message.includes(`'${name}'`) || message.includes(`"${name}"`)));
+}
+function missingPeer(name, needs, cause) {
+    return new Error(`ferrovue/testing: ${needs}, which needs \`${name}\`: install it in your project (\`npm install -D ${name}\`)`, { cause });
+}
+async function peer(name, needs, load) {
+    try {
+        return await load();
+    }
+    catch (error) {
+        throw isMissing(error, name) ? missingPeer(name, needs, error) : error;
+    }
+}
+async function optionalPinia(stores) {
+    try {
+        return await import("pinia");
+    }
+    catch (error) {
+        if (!isMissing(error, "pinia"))
+            throw error;
+        if (Object.keys(stores).length > 0)
+            throw missingPeer("pinia", "the fixture has `$stores`", error);
+        return null;
+    }
+}
 /** Route records for vue-router, every route — nested ones too — given the fixture's view. */
 export function routeRecords(routes, View) {
     return routes.map((r) => typeof r === "string"
@@ -45,12 +57,14 @@ export async function fixtureApp(component, fixture, routes, options = {}) {
         .filter(([name]) => name !== "routerView")
         .map(([name, html]) => [name, () => [staticNode(html)]]));
     const app = (options.client ? createApp : createSSRApp)({ render: () => h(component, fixture.props, slots) });
-    // As the client hydrates: the state the server rendered with, set before any store is first used.
-    const pinia = createPinia();
-    pinia.state.value = structuredClone(fixture.stores);
-    app.use(pinia);
+    const pinia = await optionalPinia(fixture.stores);
+    if (pinia) {
+        const store = pinia.createPinia();
+        store.state.value = structuredClone(fixture.stores);
+        app.use(store);
+    }
     if (options.i18n) {
-        // Messages read from the project's files at run time: their schema is not known to TypeScript.
+        const { createI18n } = await peer("vue-i18n", "the fixture is rendered with `i18n` options", () => import("vue-i18n"));
         const i18nOptions = {
             legacy: false,
             locale: fixture.locale ?? options.i18n.locale,
@@ -62,6 +76,7 @@ export async function fixtureApp(component, fixture, routes, options = {}) {
         app.use(createI18n(i18nOptions));
     }
     if (routes) {
+        const { createMemoryHistory, createRouter } = await peer("vue-router", "the fixture is rendered with routes", () => import("vue-router"));
         const view = fixture.slots.routerView ?? "";
         const View = defineComponent({ render: () => staticNode(view) });
         const router = createRouter({

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { hydrateState, mountIslands, type IslandComponent, type Islands, type MountOptions } from "./client.ts";
+export type { Float, TrustedHtml } from "./types.ts";

package/dist/index.js

@@ -0,0 +1 @@
+export { hydrateState, mountIslands } from "./client.js";

package/dist/islands.d.ts

@@ -1,4 +1,5 @@
 import type { Component } from "vue";
+/** Every component that has an `island()`, by its `data-island` name, each a loader for `mountIslands`. */
 declare const islands: Record<string, () => Promise<{
     default: Component;
 }>>;

package/dist/islands.js

@@ -1,3 +1,4 @@
+/** Every component that has an `island()`, by its `data-island` name, each a loader for `mountIslands`. */
 const islands = (() => {
     throw new Error("ferrovue/islands is written by the Vite plugin: add `ferrovue()` from `ferrovue/vite` to the plugins of the Vite config");
 })();

package/dist/lists.d.ts

@@ -1,19 +1,8 @@
 import { type N, type Scope, type Ty, type Val } from "./model.ts";
-/** A list as an iterator of its items, in the form a computed list holds them. */
 export declare function items(v: Val): string;
-/** A computed list: its iterator, and its items collected as `code` for anything that needs a
- * `Vec`. */
 export declare function computed(iter: string, of: Ty, lone?: boolean): Val;
-/** A list of any kind as the `Vec` of items a computed list collects: what a branch of `?:` or a
- * setup `let` holds, so that both branches have one type. Kept beyond the statement, its strings
- * own their text, which may live in a temporary (`name.toUpperCase().split(" ")`). */
 export declare function collected(v: Val): string;
-/** The computed list a setup `let` named `name` holds, read again by item. */
 export declare function heldList(name: string, of: Ty, lone?: boolean): Val;
-/** A list method other than `includes` and `join`: `null` when `method` is not one of them. */
 export declare function listMethod(s: Scope, target: Val, method: string, args: N[], n: N): Val | null;
-/** `Object.keys(r)`, `Object.values(r)`, and `Object.entries(r)`, which is only a `v-for`'s source. */
 export declare function objectCall(s: Scope, method: string, args: N[], n: N): Val;
-/** `list.includes(x)` and `list.join(sep)` of a computed list, or of a list of fractions or
- * booleans. */
 export declare function computedListMethod(s: Scope, target: Val, method: string, args: N[], n: N): Val | null;

package/dist/lists.js

@@ -1,16 +1,11 @@
-/* Lists a template computes: array methods taking arrow functions (`filter`, `map`, `some`,
- * `every`, `find`, `findIndex`), `slice`, and `Object.keys` / `values` of a record.
- *
- * A computed list is an iterator of its items, each in one form whatever list it came from: a
- * string as a `Cow<str>` (borrowed from the props, or owned when `map` made it), a number or a
- * boolean copied, an object borrowed. That is what lets one method's result feed the next, a
- * `v-for`, `.join` or `.length`, without knowing where it came from. */
 import { BOOL, fail, FLOAT, INT, opt, sameTy, STR } from "./model.js";
 import { ctx } from "./context.js";
-import { asCow, yieldsCow, asF64, cond, expr, fieldVal, isNumber, isTemporary, lonely, meet } from "./expr.js";
+import { expr, fieldVal } from "./expr.js";
+import { cond } from "./narrowing.js";
+import { asF64, isNumber } from "./numbers.js";
+import { asCow, isTemporary, lonely, meet, yieldsCow } from "./strings.js";
 import { atom, operand, strArg, UNARY } from "./parens.js";
 const COW = "std::borrow::Cow::<str>";
-/** The type of a list's items, which must be one these methods can pass along. */
 function itemsTy(s, v, n) {
     if (v.ty.k !== "list")
         return fail(s.comp, "not a list", n);
@@ -20,45 +15,32 @@ function itemsTy(s, v, n) {
     }
     return of;
 }
-/** A list as an iterator of its items, in the form a computed list holds them. */
 export function items(v) {
     if (v.iter !== undefined)
         return v.iter;
     const of = v.ty.k === "list" || v.ty.k === "record" ? v.ty.of : v.ty;
-    // A list of strings holds `Cow`s, an array literal `&str`s: either way `&**v` is the `&str`.
     if (of.k === "str")
         return `${atom(v.code)}.iter().map(|v| ${COW}::Borrowed(&**v))`;
     if (of.k === "struct" || of.k === "child")
         return `${atom(v.code)}.iter()`;
     return `${atom(v.code)}.iter().copied()`;
 }
-/** A computed list: its iterator, and its items collected as `code` for anything that needs a
- * `Vec`. */
 export function computed(iter, of, lone) {
     return { code: `${iter}.collect::<Vec<_>>()`, ty: { k: "list", of }, iter, ...(lone ? { lone } : {}) };
 }
-/** A list of any kind as the `Vec` of items a computed list collects: what a branch of `?:` or a
- * setup `let` holds, so that both branches have one type. Kept beyond the statement, its strings
- * own their text, which may live in a temporary (`name.toUpperCase().split(" ")`). */
 export function collected(v) {
     const of = v.ty.k === "list" ? v.ty.of : v.ty;
     return `${items(v)}${of.k === "str" ? `.map(|v| ${COW}::Owned(v.into_owned()))` : ""}.collect::<Vec<_>>()`;
 }
-/** The computed list a setup `let` named `name` holds, read again by item. */
 export function heldList(name, of, lone) {
     const iter = of.k === "str" ? `${name}.iter().map(|v| ${COW}::Borrowed(&**v))` : `${name}.iter().copied()`;
     return { code: name, ty: { k: "list", of }, iter, ...(lone ? { lone } : {}) };
 }
-/** An item as the closure that a method hands it to sees it: `byRef` for `filter` and `find`, which
- * pass `&item`. */
 function itemVal(of, param, byRef, lone) {
-    // An object's fields are read through the reference; a number or a boolean is copied out of it.
     const scalar = of.k === "int" || of.k === "float" || of.k === "bool";
     const code = of.k === "str" ? (byRef ? `&**${param}` : `&*${param}`) : byRef && scalar ? `*${param}` : param;
     return { code, ty: of, ...(lone ? { lone } : {}) };
 }
-/** An arrow function's body, translated with its parameters bound — the item, and the index when it
- * names one — as the closure a method takes. `enumerate` says the items must come numbered. */
 function arrow(s, fn, list, of, byRef, method, body) {
     const comp = s.comp;
     if (fn?.type !== "ArrowFunctionExpression" || fn.async || fn.params.length > 2) {
@@ -70,7 +52,6 @@ function arrow(s, fn, list, of, byRef, method, body) {
     if (index && index.type !== "Identifier")
         fail(comp, "an arrow function's index is a plain name", index);
     const n = ++ctx.narrowCount;
-    // A string item is named apart: `map` cannot hand back a borrow of it (see `mapped`).
     const p = of.k === "str" ? `fv_s${n}` : `fv_a${n}`;
     const i = `fv_i${n}`;
     const v = itemVal(of, p, byRef, list.lone);
@@ -81,7 +62,6 @@ function arrow(s, fn, list, of, byRef, method, body) {
         bound.push(item.name);
     }
     else if (item?.type === "ObjectPattern" && (of.k === "struct" || of.k === "child")) {
-        // `({ id, label }) => …`: each name is that field of the item.
         for (const prop of item.properties) {
             if (prop.type !== "ObjectProperty" || prop.computed || prop.value.type !== "Identifier") {
                 fail(comp, "a destructured arrow function parameter binds plain names, without defaults", prop);
@@ -96,7 +76,6 @@ function arrow(s, fn, list, of, byRef, method, body) {
         locals.set(index.name, { code: i, ty: INT });
         bound.push(index.name);
     }
-    // The parameters hide whatever an outer `v-if` narrowed under the same names.
     const narrowed = new Map([...s.narrowed].filter(([path]) => !bound.some((b) => path === b || path.startsWith(`${b}.`))));
     const code = body({ ...s, locals, narrowed });
     const reads = (name) => new RegExp(`\\b${name}\\b`).test(code);
@@ -112,15 +91,11 @@ function arrow(s, fn, list, of, byRef, method, body) {
     }
     return { closure: `|(${reads(i) ? i : "_"}, ${pName})| { ${lets}${code} }`, enumerate: true };
 }
-/** What `map` makes of each item: a string as a `Cow` — owned when it was built, or borrows the
- * item, which the closure owns — a number or a boolean as it is, an object borrowed. */
 function mapped(s, v, n) {
     switch (v.ty.k) {
         case "str":
-            // A routine's `Cow` may borrow the item, which the closure owns: owned.
             if (v.code.startsWith("&*fv::") && yieldsCow(v.code.slice(2)))
                 return `${COW}::Owned(${v.code.slice(2)}.into_owned())`;
-            // An item itself, of this list or one outside it, which the closure only borrows: copied.
             const item = /^&\**(fv_s\d+)$/.exec(v.code)?.[1];
             if (item !== undefined)
                 return `${COW}::Owned(${item}.to_string())`;
@@ -138,7 +113,6 @@ function mapped(s, v, n) {
             return fail(s.comp, `\`.map()\` makes a list of strings, numbers, booleans or objects, not ${v.ty.k === "opt" ? "optional values" : "these"}`, n);
     }
 }
-/** A list method other than `includes` and `join`: `null` when `method` is not one of them. */
 export function listMethod(s, target, method, args, n) {
     const comp = s.comp;
     if (!["filter", "map", "some", "every", "find", "findIndex", "slice"].includes(method))
@@ -172,8 +146,6 @@ export function listMethod(s, target, method, args, n) {
             let out;
             const { closure, enumerate } = arrow(s, fn, target, of, false, method, (inner) => {
                 out = expr(inner, fn.body);
-                // An integer negated, multiplied or taken modulo may be JavaScript's -0, which a list of
-                // `i64` loses: a list of fractions then. (Generated code spaces a binary `-`, never a unary one.)
                 if (out.ty.k === "int" && out.f64 !== undefined && /-[\w(]|\s[*%]\s/.test(out.f64))
                     out = { ...out, code: out.f64, ty: FLOAT };
                 return mapped(inner, out, fn.body);
@@ -189,8 +161,6 @@ export function listMethod(s, target, method, args, n) {
             const { closure, enumerate } = arrow(s, fn, target, of, true, method, (inner) => cond(inner, fn.body));
             const found = enumerate ? `${it}.enumerate().find(${closure}).map(|(_, v)| v)` : `${it}.find(${closure})`;
             const lone = target.lone ? { lone: true } : {};
-            // A string found is a `Cow` the statement holds, read as the `&str` an optional string is; one
-            // kept beyond the statement owns its text, which may live in a temporary.
             if (of.k === "str")
                 return { code: `${atom(found)}.as_deref()`, ty: opt(STR), held: `${found}.map(|v| ${COW}::Owned(v.into_owned()))`, ...lone };
             return { code: found, ty: opt(of), ...lone };
@@ -201,7 +171,6 @@ export function listMethod(s, target, method, args, n) {
         }
     }
 }
-/** `Object.keys(r)`, `Object.values(r)`, and `Object.entries(r)`, which is only a `v-for`'s source. */
 export function objectCall(s, method, args, n) {
     const comp = s.comp;
     const r = args.length === 1 ? expr(s, args[0]) : null;
@@ -220,8 +189,6 @@ export function objectCall(s, method, args, n) {
         return fail(comp, "`Object.entries()` is supported as the source of a `v-for`: `([key, value], i) in Object.entries(r)`", n);
     return fail(comp, `\`Object.${method}()\` is not supported: \`keys\`, \`values\` and \`entries\` of a record are`, n);
 }
-/** `list.includes(x)` and `list.join(sep)` of a computed list, or of a list of fractions or
- * booleans. */
 export function computedListMethod(s, target, method, args, n) {
     if (target.ty.k !== "list")
         return null;
@@ -232,7 +199,6 @@ export function computedListMethod(s, target, method, args, n) {
             fail(s.comp, "`.includes()` looks for a value of the list's own type", args[0]);
         if (of.k === "str")
             meet(s.comp, target, x, "`.includes()`", n, "equal");
-        // `includes` finds `NaN`, which `==` never equals.
         const test = of.k === "str" ? `*v == ${x.code.startsWith("&*") ? `*${x.code.slice(2)}` : `*${operand(x.code, UNARY)}`}` : of.k === "float" ? `v == ${x.code} || (v.is_nan() && ${atom(x.code)}.is_nan())` : `v == ${x.code}`;
         return { code: `${items(target)}.any(|v| ${test})`, ty: BOOL };
     }
@@ -242,7 +208,6 @@ export function computedListMethod(s, target, method, args, n) {
         const sep = args.length ? expr(s, args[0]) : { code: '","', ty: STR };
         if (sep.ty.k !== "str")
             fail(s.comp, "`.join()` takes a string", args[0]);
-        // Two halves of a pair would meet where items are joined without a separator between them.
         const parted = /^"[^"]/.test(sep.code);
         if (of.k === "str" && target.lone && (!parted || sep.lone))
             fail(s.comp, lonely("`.join()` with no literal separator"), n);

package/dist/loops.d.ts

@@ -0,0 +1,3 @@
+import { type N, type Scope } from "./model.ts";
+import { Emitter } from "./emitter.ts";
+export declare function list(s: Scope, e: Emitter, c: N): void;

package/dist/loops.js

@@ -0,0 +1,164 @@
+import { fail, INT, snake, STR } from "./model.js";
+import { ctx } from "./context.js";
+import { expr, fieldVal } from "./expr.js";
+import { isObjectCall } from "./calls.js";
+import { atom, operand, OR } from "./parens.js";
+import { Emitter } from "./emitter.js";
+import { statements } from "./template.js";
+export function list(s, e, c) {
+    const fn = c.arguments[1];
+    if (fn.type !== "ArrowFunctionExpression" || fn.body.type !== "BlockStatement") {
+        fail(s.comp, "unexpected `ssrRenderList` callback", c);
+    }
+    if (isObjectCall(c.arguments[0], "entries")) {
+        const [pair, index] = fn.params;
+        const r = c.arguments[0].arguments.length === 1 ? expr(s, c.arguments[0].arguments[0]) : null;
+        if (r?.ty.k !== "record")
+            return fail(s.comp, "`Object.entries()` takes a `Record<string, T>`", c.arguments[0]);
+        if (pair?.type !== "ArrayPattern" || pair.elements.length > 2 || pair.elements.some((x) => x?.type !== "Identifier")) {
+            return fail(s.comp, "a `v-for` over `Object.entries()` names its items `[key, value]`", pair ?? c);
+        }
+        recordLoop(s, e, r, fn, pair.elements[1], pair.elements[0], index);
+        return;
+    }
+    const src = expr(s, c.arguments[0]);
+    if (src.ty.k === "record") {
+        const [value, key, index] = fn.params;
+        recordLoop(s, e, src, fn, value, key, index);
+        return;
+    }
+    const [item, index] = fn.params;
+    const idx = index ? snake(index.name) : null;
+    const itemName = item.type === "Identifier" ? snake(item.name) : `fv_item${++ctx.narrowCount}`;
+    const inner = new Map(s.locals);
+    let of;
+    let walk;
+    let bound;
+    let itemLet = -1;
+    const loop = (it, i) => (i ? `for (${i}, ${it}) in ${atom(walk)}.enumerate()` : `for ${it} in ${walk}`);
+    if (src.ty.k === "list" && src.iter !== undefined) {
+        of = src.ty.of;
+        walk = src.iter;
+        bound = of.k === "str" ? `${itemName}_cow` : itemName;
+        e.open(loop(bound, idx));
+        if (of.k === "str") {
+            e.stmt(`let ${itemName}: &str = &${bound};`);
+            itemLet = e.lines.length - 1;
+        }
+    }
+    else if (src.ty.k === "int") {
+        of = INT;
+        walk = `1..=${operand(src.code, OR)}`;
+        bound = itemName;
+        e.open(loop(bound, idx));
+    }
+    else if (src.ty.k === "list") {
+        of = src.ty.of;
+        if (of.k === "undef")
+            fail(s.comp, "`v-for` over an empty array literal", c);
+        const itemCode = `${itemName}_ref`;
+        walk = `${atom(src.code)}.iter()`;
+        bound = itemCode;
+        e.open(loop(bound, idx));
+        if (of.k === "str")
+            e.stmt(`let ${itemName}: &str = ${itemCode};`);
+        else if (of.k === "struct" || of.k === "child")
+            e.stmt(`let ${itemName} = ${itemCode};`);
+        else
+            e.stmt(`let ${itemName} = *${itemName}_ref;`);
+        itemLet = e.lines.length - 1;
+    }
+    else {
+        return fail(s.comp, "`v-for` walks an array, or counts to a number", c);
+    }
+    let idxLet = -1;
+    if (idx) {
+        e.stmt(`let ${idx} = ${idx} as i64;`);
+        idxLet = e.lines.length - 1;
+    }
+    const bodyFrom = e.lines.length;
+    if (item.type === "Identifier")
+        inner.set(item.name, { code: itemName, ty: of, ...(src.lone ? { lone: true } : {}) });
+    else if (item.type === "ObjectPattern") {
+        for (const p of item.properties) {
+            if (p.type !== "ObjectProperty" || p.computed || p.value.type !== "Identifier") {
+                fail(s.comp, "a destructured `v-for` item binds plain names, without defaults", p);
+            }
+            inner.set(p.value.name, fieldVal(s.comp, itemName, of, p.key.name ?? p.key.value, p));
+        }
+    }
+    else
+        fail(s.comp, "a `v-for` item is a name or an object pattern", item);
+    if (index)
+        inner.set(index.name, { code: idx, ty: INT });
+    const before = e.literalBytes;
+    const fromProps = src.ty.k === "list" && src.iter === undefined && /^\(?props\./.test(src.code);
+    statements({ ...s, locals: inner, loop: fromProps ? { item: itemName, over: src.code } : undefined }, e, fn.body.body);
+    const unusedItem = !e.reads(itemName, bodyFrom);
+    const unusedIdx = idx !== null && !e.reads(idx, bodyFrom);
+    const head = bodyFrom - 1 - (idx ? 1 : 0) - (itemLet >= 0 ? 1 : 0);
+    e.replace(head, loop(bound, idx), loop(unusedItem ? "_" : bound, unusedIdx ? null : idx));
+    if (unusedIdx)
+        e.lines.splice(idxLet, 1);
+    if (unusedItem && itemLet >= 0)
+        e.lines.splice(itemLet, 1);
+    e.close();
+    const body = e.literalBytes - before;
+    e.literalBytes = before;
+    if (body > 0 && fromProps)
+        e.perItem.push(`${body} * ${atom(src.code)}.len()`);
+    else if (body > 0 && src.ty.k === "list" && s.loop && src.code.startsWith(`${s.loop.item}.`)) {
+        const outer = s.loop;
+        e.perItem.push(`${body} * ${atom(outer.over)}.iter().map(|${outer.item}| ${src.code}.len()).sum::<usize>()`);
+    }
+}
+function recordLoop(s, e, r, fn, value, key, index) {
+    if (r.ty.k !== "record")
+        return;
+    const of = r.ty.of;
+    for (const p of [key, index])
+        if (p && p.type !== "Identifier")
+            fail(s.comp, "a record's key and index in `v-for` are plain names", p);
+    const n = ++ctx.narrowCount;
+    const v = value?.type === "Identifier" ? snake(value.name) : `fv_value${n}`;
+    const k = key ? snake(key.name) : `fv_key${n}`;
+    const i = index ? snake(index.name) : `fv_index${n}`;
+    e.open(`for (${i}, (${k}, ${v}_ref)) in ${atom(r.code)}.iter().enumerate()`);
+    const head = e.lines.length - 1;
+    const indent = /^ */.exec(e.lines[head])[0];
+    const inner = new Map(s.locals);
+    e.stmt(of.k === "str" ? `let ${v}: &str = ${v}_ref;` : of.k === "int" || of.k === "float" || of.k === "bool" ? `let ${v} = *${v}_ref;` : `let ${v} = ${v}_ref;`);
+    e.stmt(`let ${i} = ${i} as i64;`);
+    const bodyFrom = e.lines.length;
+    if (value?.type === "Identifier")
+        inner.set(value.name, { code: v, ty: of });
+    else if (value?.type === "ObjectPattern" && (of.k === "struct" || of.k === "child")) {
+        for (const p of value.properties) {
+            if (p.type !== "ObjectProperty" || p.computed || p.value.type !== "Identifier") {
+                fail(s.comp, "a destructured `v-for` item binds plain names, without defaults", p);
+            }
+            inner.set(p.value.name, fieldVal(s.comp, v, of, p.key.name ?? p.key.value, p));
+        }
+    }
+    else if (value)
+        fail(s.comp, "a `v-for` item is a name, or an object pattern of an object", value);
+    if (key)
+        inner.set(key.name, { code: k, ty: STR });
+    if (index)
+        inner.set(index.name, { code: i, ty: INT });
+    const before = e.literalBytes;
+    statements({ ...s, locals: inner }, e, fn.body.body);
+    const reads = (name) => e.reads(name, bodyFrom);
+    const [readsV, readsK, readsI] = [reads(v), reads(k), reads(i)];
+    if (!readsI)
+        e.lines.splice(head + 2, 1);
+    if (!readsV)
+        e.lines.splice(head + 1, 1);
+    const pair = `(${readsK ? k : "_"}, ${readsV ? `${v}_ref` : "_"})`;
+    e.lines[head] = `${indent}for ${readsI ? `(${i}, ${pair}) in ${atom(r.code)}.iter().enumerate()` : `${pair} in ${atom(r.code)}.iter()`} {`;
+    e.close();
+    const body = e.literalBytes - before;
+    e.literalBytes = before;
+    if (body > 0 && /^\(?props\./.test(r.code))
+        e.perItem.push(`${body} * ${atom(r.code)}.len()`);
+}