ferrovue 0.13.0 → 0.14.0

package/README.md

@@ -57,7 +57,7 @@ the configuration at your project root yourself:
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/ferrovue@0.13.0/schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/ferrovue@0.14.0/schema.json",
   "components": "client/components",
   "out": "src/generated"
 }
@@ -86,6 +86,7 @@ read `$schema`. Offline, the copy in the installed package works as well:
 | `scopeId` | no | How a `<style scoped>` id is hashed, as `@vitejs/plugin-vue` hashes it: `"filepath-source"` (the default, the plugin's in a production build) or `"filepath"`. See [`scoped_styles`](https://docs.rs/ferrovue/latest/ferrovue/guide/scoped_styles/index.html) |
 | `viteRoot` | no | Vite's root, relative to this file's directory, from which a component's path is hashed (default `.`) |
 | `isProduction` | no | Whether `@vitejs/plugin-vue` compiles for production, as Vite's `isProduction`: `true` (the default) for `vite build`, `false` for the dev server. It names the variables `v-bind()` in `<style>` sets. See [`scoped_styles`](https://docs.rs/ferrovue/latest/ferrovue/guide/scoped_styles/index.html) |
+| `comments` | no | Whether templates' HTML comments render, as plugin-vue's `template.compilerOptions.comments`: by default kept when `isProduction` is `false` and left out otherwise. See [`generated_code`](https://docs.rs/ferrovue/latest/ferrovue/guide/generated_code/index.html#html-comments) |
 | `cssModules` | no | `{ generateScopedName, hashPrefix?, context? }`, as Vite's `css.modules` names CSS module classes: needed for `<style module>`. `context` is the directory Vite runs in (default `viteRoot`). See [`scoped_styles`](https://docs.rs/ferrovue/latest/ferrovue/guide/scoped_styles/index.html) |
 | `builders` | no | `false` leaves out each props struct's and shared type's `new()` and setters, for an app that builds its props as struct literals (default `true`) |
 
@@ -173,7 +174,7 @@ The crate's features:
 
 - `router` and `i18n`, both on by default: vue-router and vue-i18n. An application with neither
   routes nor translations can leave them out, and build neither `ferrovue-router` nor
-  `ferrovue-i18n`: `ferrovue = { version = "0.13", default-features = false }`.
+  `ferrovue-i18n`: `ferrovue = { version = "0.14", default-features = false }`.
 - `axum` and `actix-web`: `Html` is an `IntoResponse` or a `Responder`, so a handler responds with
   the component as `text/html; charset=utf-8`. `into_html(props)` and `into_island(props)` take the
   props by value, so a handler that builds them returns the page:
@@ -239,18 +240,19 @@ ferrovue compiles `<script setup lang="ts">` components, and components with no
 | Conditions | `v-if` / `v-else-if` / `v-else`, `?:`, `&&` and `||`, with optional and nullable values narrowed as TypeScript narrows them: `v-if="user"`, `user !== undefined`, `user !== null`, `user != null`, `typeof user !== "undefined"`, and `!user`, `user === undefined` or `user === null` for the `v-else`; a test narrows every operand after it in a chain (`n != null && n > 1 && n < 9`, `n == null \|\| n < 0 \|\| n > 9`, `n != null && n > 1 ? n * 2 : 0`), and `a && b` gives `undefined` where `a`, whose present values are all truthy, is absent (`kind && ICONS[kind]`); a string of a union of string literals narrowed the same way, by `===` and `!==` with a literal, by its truth and by `||`, so that a `ref<Tone | "">` reaches a child's `Tone` prop as `tone \|\| undefined`, `tone === '' ? undefined : tone`, under `v-if="tone !== ''"` or through a `computed` annotated `Tone \| undefined` |
 | Lists | `v-for` over arrays (of strings, numbers, objects or child props), array literals and number ranges (`n in 5`); with an index; with destructured items (`{ id, name } in rows`); nested; on `<template>`. `.includes()` (a number looked for in a list of numbers whether either is a `number` or a `Float`, as JavaScript compares them), `.join()`, and `.filter()`, `.map()`, `.some()`, `.every()`, `.find()`, `.findIndex()`, `.findLast()`, `.findLastIndex()` with an arrow function of the item (a name, or destructured) and its index, whose body is an expression or a body of statements (see Statements), narrowing inside as outside, or with `Boolean`; `.filter(Boolean)` of a list or an array literal whose items may be `null` or `undefined`, which keeps the ones present and truthy as a list of the values (`[name, title, city].filter(Boolean).join(" · ")`); `Boolean(x)`; `.slice()`; an item by its index, `list[i]` with an integer `i` and `list.at(i)` (from the end when negative), `undefined` outside the list and narrowed as other optional values are (`v-if="rows[0]"`); `.indexOf()` and `.lastIndexOf()` of a string, number or boolean, compared with `===` (`NaN` found nowhere, `-0` found as `0`); `.concat()` of lists of one item type (numbers whether `number` or `Float`); `.reduce()` and `.reduceRight()` with an initial value, into a string, a number or a boolean; `.toReversed()`, and `.toSorted()` by `String(x)` as JavaScript sorts without a comparator (`[10, 9, 1]` to `[1, 10, 9]`) or by a comparator `(a, b) => a - b`, `a.k - b.k` of integers or `?:` over `<` and `>` of integers or strings, stable as JavaScript's; `[...list].sort(…)` and `[...list].reverse()`; spread in array literals (`[...a, x, ...b]`) of one item type; `.flat()` of lists of lists, to a literal depth or `Infinity`, and `.flatMap()` with an arrow function that gives a list (flattened one level) or a value (kept as `.map()` keeps it); chained and nested; a computed list read by `v-for`, `.join()`, `.length`, `.includes()`, kept by `computed`, or handed to a child |
 | Dictionaries | `v-for="(value, key, index) in r"` over a `Record<string, T>`, and `([key, value], index) in Object.entries(r)`, in JavaScript's order: keys that are array indices first, in numeric order, then the others as the props give them; `Object.keys(r)`, `Object.values(r)` (of a record of lists too, which `.flat()` joins), `Object.hasOwn(r, key)`, and `Object.entries(r)` read by the list methods, whose arrow functions destructure each pair (`([key, value]) => …`, `([, value]) => …`, `([key, { id }]) => …`) or read its parts (`pair[0]`, `pair[1]`), and walked by `v-for="[key, value] in Object.entries(r).filter(…)"`, kept by `computed` and sorted by a comparator of either part; handed to a child |
+| HTML comments | left out, as Vue's production build leaves them out, or kept with `comments` or `"isProduction": false`, as on the dev server: written as Vue writes them, at the root, between roots, inside elements and in slot content |
 | Attributes | static and bound attributes, boolean attributes, `:hidden`, `data-*` and `aria-*`, `v-bind` objects |
 | `class` | strings, arrays, objects (`{ active: on }`, computed keys), `cond && "x"`, `cond ? "x" : null`, merged with a static `class` |
 | `style` | objects (camelCase or kebab-case keys, `--custom` properties), arrays of objects, strings, merged with a static `style`, and `v-show`; later values override earlier ones as in Vue. A global `<style>` block is allowed |
 | Scoped styles | `<style scoped>`: the id on every element, on child components' roots (a root that is itself a component, fragments, recursion and `inheritAttrs: false` as Vue renders them) and, from a component with `:slotted()` rules, on the slot content it is given, forwarded slots included; inside `<Transition>`, `<KeepAlive>`, `<Teleport>` and `v-if`; on `<RouterLink>` and what it holds, as vue-router renders them |
 | `v-bind()` in `<style>` | variables bound to props, setup values, `computed`s and constants, quoted expressions included (`v-bind('size + "px"')`), in a scoped or global `<style>`: written into the root's `style` after its own and what a parent passes, on each root of a fragment, and handed to a root that is a component, as Vue's server writes them; `undefined` and `null` as `initial`, an empty string as a space; named as plugin-vue names them for production or development (`isProduction`) |
 | CSS modules | `<style module>` and `<style module="name">`, read as `$style.x`, `name.x`, `$style['x-y']` and through `useCssModule()`, each class a constant in the generated code, when `cssModules` mirrors Vite's `css.modules.generateScopedName`: computed as postcss-modules computes it in Vite (`[local]`, `[name]`, `[hash:base64:5]`, `[path]` and the rest), composed classes, `@value`s and keyframes included |
-| Components | imported child components, `v-bind` of a child's own `Props`, listeners in any form (`@x`, `v-on="obj"`, `@[name]`), which the server skips, `v-model` on a child's `defineModel`, recursion; props named in `kebab-case` or `camelCase`; props named like listeners (`on1`, `onSale`), left out when falsy where Vue's `mergeProps` joins a child's props, as Vue leaves them out; `defineAsyncComponent(() => import("./X.vue"))` (or `{ loader: … }`), rendered as the component it loads, which Vue's server renderer waits for |
+| Components | imported child components, `v-bind` of a child's own `Props`, listeners in any form (`@x`, `v-on="obj"`, `@[name]`), which the server skips, `v-model` on a child's `defineModel`, recursion; props named in `kebab-case` or `camelCase`; a `boolean` prop written bare (`<Button disabled />`), as `""` or as its kebab-case name, which Vue casts to `true`; props named like listeners (`on1`, `onSale`), left out when falsy where Vue's `mergeProps` joins a child's props, as Vue leaves them out; `defineAsyncComponent(() => import("./X.vue"))` (or `{ loader: … }`), rendered as the component it loads, which Vue's server renderer waits for |
 | `<component :is>` | over a closed set of choices, compiled to a `match`: an imported component (`:is="Card"`), an HTML element's name (`is="h2"`), a `computed` or `?:` choosing among them, a prop or a `defineModel` typed as a union of string literals (`as: "h1" \| "h2"`, a `match` over its enum's variants), and an object of imported components (or element names) declared in setup or imported from a `.ts` file, read by such a prop (`ICONS[name]`); props, fallthrough attributes, slots and scope ids reach each choice as they reach a static child; also inside `<KeepAlive>` and `<Transition>`. See the crate's [`generated_code`](https://docs.rs/ferrovue/latest/ferrovue/guide/generated_code/index.html#component-is) guide |
 | Escape hatches | `<ClientOnly>` from `ferrovue`, whose default slot the server never renders, so anything may go in it; components listed in `twins`, rendered by Rust functions of yours. See the crate's [`errors_and_limits`](https://docs.rs/ferrovue/latest/ferrovue/guide/errors_and_limits/index.html#client-only-content) guide |
 | Fallthrough attributes | what a parent passes a child beyond its props (static and bound attributes, `class`, `style`, `data-*`, `aria-*`, booleans, `undefined`): onto its single root, merged with the root's own class and style and replacing its other attributes where they stand, as Vue's `mergeProps` merges them; none for two roots; on through a root that is a component, or a `<RouterLink>`; with `inheritAttrs: false`, onto the elements or components that bind `v-bind="$attrs"` or a `useAttrs()` binding, before or after their own; beside scope ids. Listeners are dropped, as Vue's server drops them. See the crate's [`generated_code`](https://docs.rs/ferrovue/latest/ferrovue/guide/generated_code/index.html#fallthrough-attributes) guide |
 | Slots | default and named slots, fallbacks, `$slots.name` tests and the same through `useSlots()`, scoped slots (`<slot :item="x">` and `#item="{ item }"` or `v-slot="props"`), whose props a parent can hand to its own children |
-| Forms | `v-model` on text inputs, checkboxes, radios, `<select>` and `<textarea>` (renders the initial state); a `<textarea>`, or an `<input>` with `v-model` of a literal `type`, at the component's root where no parent passes it `value` or `type` (FV0424 otherwise) |
+| Forms | `v-model` on text inputs, checkboxes, radios, `<select>` and `<textarea>` (renders the initial state), of a string or a string that may be absent, with an `<option>` with no `value` compared with `null` as Vue's server compares it; a `<textarea>`, or an `<input>` with `v-model` of a literal `type`, at the component's root where no parent passes it `value` or `type` (FV0424 otherwise) |
 | Built-ins | `<Transition>`, `<TransitionGroup>`, `<KeepAlive>`, `<Suspense>` (synchronous content), `<Teleport>` (to any target, nested, disabled: see below), `v-text`, `v-once`, `v-pre`, `v-memo`, custom directives listed in `clientDirectives`, on an element with no content when its attributes are bound by name and it is not the component's root (FV0425) |
 | Vue Router | `<RouterLink>` (resolved by name or imported) with a string `to` or `{ name, params, query, hash }` / `{ path, query, hash }`, `active-class`, `exact-active-class`, `aria-current-value`, `replace`; vue-router's own encoding and active-link matching, nested routes included (a parent link is active on its children's pages, exact only on its own); a history base; optional parameters (`:id?`); routes built from a folder of pages, which the Vite plugin also gives the client as `ferrovue/routes`. `useRoute()` and `$route`: `path`, `fullPath`, `hash`, `name`, `params`, and `query` (a value written once, without `=`, or repeated, exactly as vue-router parses it; `typeof route.query.q === "string"` narrows one to a single string). `<RouterView>`, at the top and in nested route components: each takes the page it shows as a slot |
 | Pinia | option stores with a typed `state`, and setup stores (`defineStore(id, () => { … })`) whose returned refs are typed by `ref<T>()` or their initial literal; read through `useX()` or `storeToRefs`, in the template or in `computed`; getters that are an expression of the state, and a setup store's computeds, which may read each other |
@@ -307,7 +309,9 @@ The crate's guide, `ferrovue::guide` on docs.rs, covers each topic in depth:
   from a Node server that renders with Vue, and the
   [support policy](https://docs.rs/ferrovue/latest/ferrovue/guide/support/index.html): supported
   versions, fixes, deprecations and where to report a problem
-- Upgrading a project [from 0.11 to 0.12](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_12/index.html),
+- Upgrading a project [from 0.13 to 0.14](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_14/index.html),
+  [from 0.12 to 0.13](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_13/index.html),
+  [from 0.11 to 0.12](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_12/index.html),
   [from 0.10 to 0.11](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_11/index.html),
   [from 0.9 to 0.10](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_10/index.html),
   [from 0.8 to 0.9](https://docs.rs/ferrovue/latest/ferrovue/guide/upgrading_to_0_9/index.html)

package/dist/attrs.js

@@ -1,5 +1,5 @@
 import { escapeHtml, hyphenate, isBooleanAttr, isSSRSafeAttrName, isSVGTag, propsToAttrMap } from "@vue/shared";
-import { fail, nothing, rustStr } from "./model.js";
+import { fail, neverEmpty, nothing, rustStr } from "./model.js";
 import { GenError } from "./errors.js";
 import { asWritten } from "./numbers.js";
 import { CONFIG_FILE } from "./config.js";
@@ -7,14 +7,43 @@ import { ctx } from "./context.js";
 import { describeTy, expr, shown } from "./expr.js";
 import { known, truthy } from "./narrowing.js";
 import { asCow, isTemporary, unquote } from "./strings.js";
-import { atom, bare, condition, receiver, scrutinee, strArg } from "./parens.js";
+import { atom, bare, condition, ifElse, not, receiver, scrutinee, strArg } from "./parens.js";
 import { Emitter } from "./emitter.js";
 import { isDollarAttrs } from "./fallthrough.js";
 import { claim } from "./plugin.js";
 import { classAttr, classPresent, literalClass, maybeEqual, renderClass } from "./classes.js";
 import { mergedStyle, renderStyle, styleAttr } from "./styles.js";
 const NUMBER_BYTES = 6;
+function piecesOf(v) {
+    const f = v.format;
+    if (v.ty.k !== "str" || f === undefined || v.code !== `&*format!(${rustStr(f.text)}, ${f.args.join(", ")})`)
+        return undefined;
+    return f.pieces;
+}
+function emptyTest(v) {
+    if (neverEmpty(v.ty))
+        return "false";
+    const pieces = piecesOf(v);
+    if (pieces === undefined)
+        return `${receiver(v.code)}.is_empty()`;
+    const strs = pieces.filter((p) => typeof p !== "string" && !("shown" in p) && p.ty.k === "str");
+    if (strs.length < pieces.length || strs.some((p) => neverEmpty(p.ty)))
+        return "false";
+    return strs.map((p) => `${receiver(p.code)}.is_empty()`).join(" && ");
+}
 export function display(e, v) {
+    const pieces = piecesOf(v);
+    if (pieces !== undefined) {
+        for (const p of pieces) {
+            if (typeof p === "string")
+                e.lit(escapeHtml(p));
+            else if ("shown" in p)
+                e.stmt(`{ use std::fmt::Write as _; let _ = write!(out, "{}", ${p.shown}); }`);
+            else
+                display(e, p);
+        }
+        return true;
+    }
     if (v.ty.k === "str" && known(v) !== undefined)
         e.lit(escapeHtml(unquote(v.code)));
     else if ((v.ty.k === "int" || v.ty.k === "float") && v.num !== undefined)
@@ -65,10 +94,31 @@ function renderable(s, key, v, n) {
     const fix = own?.fix ?? (ty.k === "list" ? 'join it into one string, as `.join(",")`' : "bind a string, a number or a boolean");
     fail(s.comp, "FV0403", `\`${key}\` is bound to ${what}: Vue's server renderer leaves the attribute out, and hydration then sets it, changing the page; ${fix}`, n);
 }
+/** For an optional string that is a literal where a test holds and absent where it fails, the
+ * test and the literal. */
+function someLiteral(v) {
+    const branches = v.ty.k === "opt" ? ifElse(v.code) : null;
+    if (branches === null || v.ty.k !== "opt")
+        return null;
+    const literal = (code) => /^Some\(("(?:[^"\\]|\\.)*")\)$/.exec(code)?.[1];
+    const [yes, no] = [literal(branches.yes), literal(branches.no)];
+    if (yes !== undefined && branches.no === "None")
+        return { test: branches.test, value: { code: yes, ty: v.ty.of } };
+    if (no !== undefined && branches.yes === "None" && !branches.test.startsWith("let "))
+        return { test: not(branches.test), value: { code: no, ty: v.ty.of } };
+    return null;
+}
 export function renderAttr(s, e, key, v, n) {
     renderable(s, key, v, n);
     if (nothing(v.ty))
         return;
+    const some = someLiteral(v);
+    if (some !== null) {
+        e.open(`if ${condition(some.test)}`);
+        renderAttr(s, e, key, some.value, n);
+        e.close();
+        return;
+    }
     if (v.ty.k === "opt") {
         e.open(`if let Some(v) = ${scrutinee(v.code)}`);
         renderAttr(s, e, key, { code: "v", ty: v.ty.of }, n);
@@ -104,6 +154,13 @@ export function renderDynamicAttr(s, e, key, v, n, tag = null) {
         e.close();
         return;
     }
+    const some = someLiteral(v);
+    if (some !== null) {
+        e.open(`if ${condition(some.test)}`);
+        renderDynamicAttr(s, e, key, some.value, n, tag);
+        e.close();
+        return;
+    }
     if (v.ty.k === "opt") {
         e.open(`if let Some(v) = ${scrutinee(v.code)}`);
         renderDynamicAttr(s, e, key, { code: "v", ty: v.ty.of }, n, tag);
@@ -125,8 +182,9 @@ export function renderDynamicAttr(s, e, key, v, n, tag = null) {
         e.lit(` ${name}`);
         return;
     }
-    if (v.ty.k === "str" && known(v) === undefined) {
-        e.open(`if ${receiver(v.code)}.is_empty()`);
+    const empty = v.ty.k === "str" && known(v) === undefined ? emptyTest(v) : "false";
+    if (empty !== "false") {
+        e.open(`if ${empty}`);
         e.lit(` ${name}`);
         e.close(" else {");
         e.lit(` ${name}="`);

package/dist/calls.js

@@ -1,16 +1,17 @@
-import { BOOL, fail } from "./model.js";
+import { absence, BOOL, fail, rustStr } from "./model.js";
 import { ctx } from "./context.js";
 import { claim } from "./plugin.js";
-import { atom, bare } from "./parens.js";
+import { atom, bare, binary } from "./parens.js";
 import { isBoolean, listCall, listMethod, presentLiteral } from "./lists.js";
 import { meet, noArgStringMethod, regexTest, stringMethod, stringsEqual } from "./strings.js";
 import { numberMethod } from "./numbers.js";
 import { boolOf, truthy } from "./narrowing.js";
-import { coerce, expr, refuseClientOnly, refuseUnavailable } from "./expr.js";
+import { coerce, describeTy, expr, refuseClientOnly, refuseUnavailable } from "./expr.js";
 import { callFunction } from "./functions.js";
 import { constOf, mapCall } from "./constants.js";
 import { refuseInPlace } from "./objects.js";
 import { globalCall, mathCall, staticCall } from "./globals.js";
+import { refValue } from "./members.js";
 export function call(s, n) {
     const callee = n.callee;
     if (callee.type === "Identifier")
@@ -57,24 +58,35 @@ function renderHelperCall(s, name, args, n) {
 }
 function looseEqual(s, args, n) {
     const a = expr(s, args[0]);
+    const absent = a.ty.k === "opt" && a.ty.of.k === "str" ? absence(a.ty) : null;
+    const written = args[1]?.type === "NullLiteral" ? "null" : args[1]?.type === "StringLiteral" ? args[1].value : null;
+    if (args[1]?.type === "NullLiteral" && a.ty.k === "str")
+        return boolOf(binary(a.code, "==", '"null"'));
+    if (absent !== null && written !== null) {
+        return boolOf(written === absent ? `${atom(a.code)}.is_none_or(|v| v == ${rustStr(written)})` : binary(a.code, "==", `Some(${rustStr(written)})`));
+    }
+    if (args[1]?.type === "NullLiteral") {
+        return fail(s.comp, "FV0413", `an \`<option>\` with no \`value\` under a \`<select>\` whose \`v-model\` is ${describeTy(a.ty)}, which Vue's server compares with \`null\`: give the option a \`value\`, and the model a string type`, n);
+    }
     const b = expr(s, args[1]);
     if (a.ty.k === "str" && b.ty.k === "str") {
         meet(s.comp, a, b, "`v-model`", n, "equal");
         return boolOf(stringsEqual(a, b));
     }
-    return fail(s.comp, "FV0413", "`v-model` comparison between these types", n);
+    return fail(s.comp, "FV0413", `\`v-model\` of ${describeTy(a.ty)} compared with a value that is ${describeTy(b.ty)}: give the model a string type and each option or control a string \`value\`, or bind \`:checked\` or \`:selected\``, n);
 }
 function includeBooleanAttr(s, args) {
     const a = expr(s, args[0]);
     if (a.konst !== undefined)
         return a;
-    if (a.ty.k === "str")
+    if (a.ty.k === "str" || a.ty.k === "html")
         return { code: "true", ty: BOOL, konst: true };
-    if (a.ty.k === "opt" && a.ty.of.k === "str")
+    if (a.ty.k === "opt" && (a.ty.of.k === "str" || a.ty.of.k === "html"))
         return { code: `${atom(a.code)}.is_some()`, ty: BOOL };
     return boolOf(truthy(a));
 }
 function memberCall(s, n) {
+    refValue(s, n.callee);
     const object = n.callee.object;
     const method = n.callee.property.name;
     const args = n.arguments;

package/dist/children.js

@@ -1,4 +1,4 @@
-import { isSSRSafeAttrName, propsToAttrMap } from "@vue/shared";
+import { hyphenate, isSSRSafeAttrName, propsToAttrMap } from "@vue/shared";
 import { absence, camelize, declares, enumItems, enumOf, fail, literalsOf, nothing, REFUSALS, refusalAt, rustStr, sameTy, snake, takesAttrs, variantPath } from "./model.js";
 import { ctx } from "./context.js";
 import { known } from "./narrowing.js";
@@ -101,7 +101,7 @@ export function renderChild(s, e, n, twin) {
                         fail(s.comp, "FV0517", `\`${key}\`, a prop of ${child.name}, a Rust twin, is named like a listener, which Vue's \`mergeProps\` leaves out when it is falsy: rename the prop`, p);
                     heard.add(field.js);
                 }
-                given.set(field.js, p.value);
+                given.set(field.js, castToTrue(field, p.value) ? { type: "BooleanLiteral", value: true, loc: p.value.loc, start: p.value.start, end: p.value.end, __fv: p.value.__fv } : p.value);
                 continue;
             }
             if (array(key))
@@ -133,6 +133,16 @@ export function renderChild(s, e, n, twin) {
     });
     callChild(s, e, child, `&super::${child.module}::Props { ${inits.join(", ")} }`, slots, childAttrsArg(s, child, parts, merges, fallthrough, ids, n), later);
 }
+/** Whether Vue's boolean casting turns `value`, given to the prop `f`, into `true`: the prop's
+ * runtime type is `Boolean`, and the value is `""` (the attribute written bare) or the prop's name in
+ * kebab-case. */
+function castToTrue(f, value) {
+    const ty = f.ty.k === "opt" ? f.ty.of : f.ty;
+    if (ty.k !== "bool")
+        return false;
+    const text = value.type === "StringLiteral" ? value.value : value.type === "TemplateLiteral" && value.expressions.length === 0 ? value.quasis[0].value.cooked : null;
+    return text === "" || text === hyphenate(camelize(f.js));
+}
 /** What `v`, a reference to a value of the prop `f` of type `ty`, passes when it is truthy: null when
  * every value of the type is. */
 function truthTest(s, child, f, ty, n) {
@@ -319,10 +329,18 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
                 statements({ ...inner, fill: false }, e, body);
                 e.stmt("true");
             }
-            else {
-                e.stmt("let mut filled = false;");
-                statements({ ...inner, fill: true }, e, body);
+            else
+                fillable(inner);
+        };
+        const fillable = (inner) => {
+            e.stmt("let mut filled = false;");
+            const declared = e.lines.length - 1;
+            statements({ ...inner, fill: true }, e, body);
+            if (e.reads("filled", declared + 1))
                 e.stmt("filled");
+            else {
+                e.lines.splice(declared, 1);
+                e.stmt("false");
             }
         };
         const unread = (opened, binding) => {
@@ -350,6 +368,7 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
             e.open(`${field}: Some(&|out: &mut String, ${sp}: &${m}::${shape.name}${life}${sidParam}${contextParams}| -> bool`);
             const opened = e.lines.length - 1;
             content({ ...s, locals, sid, vnode: asVnodes, opaque });
+            unread(opened, "out");
             unread(opened, sp);
             unread(opened, sid);
             for (const p of context)
@@ -364,6 +383,7 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
             e.open(`${field}: Some(&|out: &mut String${sidParam}${contextParams}| -> bool`);
             const opened = e.lines.length - 1;
             content(inner);
+            unread(opened, "out");
             unread(opened, sid);
             for (const p of context)
                 unread(opened, p.name);
@@ -373,6 +393,7 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
             e.open(`${field}: Some(fv::render::Slot::slotted(&|out: &mut String${sidParam}| -> bool`);
             const opened = e.lines.length - 1;
             content(inner);
+            unread(opened, "out");
             unread(opened, sid);
             e.close(")),");
         }
@@ -383,9 +404,9 @@ export function callWith(s, e, child, m, head, slotsTy, trailing, slots, vnode =
         }
         else {
             e.open(`${field}: Some(fv::render::Slot::markup(&|out: &mut String| -> bool`);
-            e.stmt("let mut filled = false;");
-            statements({ ...inner, fill: true }, e, body);
-            e.stmt("filled");
+            const opened = e.lines.length - 1;
+            fillable(inner);
+            unread(opened, "out");
             e.close(")),");
         }
     }

package/dist/classes.js

@@ -3,7 +3,7 @@ import { directiveOwner, fail, nothing, rustStr, STR } from "./model.js";
 import { expr } from "./expr.js";
 import { choice, cond, known, narrowing, narrowTo, presence, truthy } from "./narrowing.js";
 import { pickPresent } from "./constants.js";
-import { meet } from "./strings.js";
+import { meet, unquote } from "./strings.js";
 import { atom, bare, condition, logical, not, occurrences, strArg } from "./parens.js";
 import { Emitter } from "./emitter.js";
 import { stringAttr } from "./attrs.js";
@@ -73,6 +73,11 @@ export function classItems(s, n) {
             break;
     }
     const v = expr(s, n);
+    const literal = v.ty.k === "str" && known(v) !== undefined ? unquote(v.code) : null;
+    if (literal === "")
+        return [];
+    if (literal !== null && literal === literal.trim())
+        return [{ lit: literal }];
     if (v.ty.k === "str")
         return [{ code: v.code }];
     if (v.ty.k === "opt" && v.ty.of.k === "str")

package/dist/client.d.ts

@@ -177,8 +177,8 @@ export interface RenderPageOptions extends Pick<MountOptions, "pinia" | "router"
  * document: load the components it names (and no others), render the app `createPageApp` builds
  * with `hydrate: false` into a copy of the container with no children, wait for the router, put the
  * copy in the container's place, mount, and then unmount `previous`. The next app is mounted
- * before the previous one is unmounted, so a router both use stays started. `router` must be at the
- * next page's location: `linkRouter` with the `location` the navigation goes to. Rejects, leaving
- * the page shown as it is, when the container is missing or a component is not given or does not
- * load. */
+ * before the previous one is unmounted, so a router both use stays started. `router`, or a
+ * `linkRoutes` in `plugins`, must be at the next page's location: built with the `location` the
+ * navigation goes to. Rejects, leaving the page shown as it is, when the container is missing or
+ * a component is not given or does not load. */
 export declare function renderPage(layout: IslandComponent, components: Record<string, IslandComponent>, record: PageRecord, options?: RenderPageOptions): Promise<App>;

package/dist/client.js

@@ -571,10 +571,10 @@ export async function mountPage(layout, components, options = {}) {
  * document: load the components it names (and no others), render the app `createPageApp` builds
  * with `hydrate: false` into a copy of the container with no children, wait for the router, put the
  * copy in the container's place, mount, and then unmount `previous`. The next app is mounted
- * before the previous one is unmounted, so a router both use stays started. `router` must be at the
- * next page's location: `linkRouter` with the `location` the navigation goes to. Rejects, leaving
- * the page shown as it is, when the container is missing or a component is not given or does not
- * load. */
+ * before the previous one is unmounted, so a router both use stays started. `router`, or a
+ * `linkRoutes` in `plugins`, must be at the next page's location: built with the `location` the
+ * navigation goes to. Rejects, leaving the page shown as it is, when the container is missing or
+ * a component is not given or does not load. */
 export async function renderPage(layout, components, record, options = {}) {
     const container = containerOf(options);
     for (const text of options.loads ?? [])

package/dist/compiler.js

@@ -2,7 +2,7 @@ import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from "nod
 import { basename, join, resolve } from "node:path";
 import { relativePath } from "./paths.js";
 import { CONFIG_FILE, loadConfig } from "./config.js";
-import { ctx, JS_DATE, tyOfName } from "./context.js";
+import { ctx, JS_DATE, templateComments, tyOfName } from "./context.js";
 import { refuseUnusedUnions } from "./enums.js";
 import { failIn, snake } from "./model.js";
 import { GenError, GenErrors } from "./errors.js";
@@ -46,6 +46,7 @@ function generateAll(root, config, sources, options) {
     ctx.unions = new Map(Object.entries(config.unions ?? {}));
     ctx.mappedUnions = new Map();
     ctx.builders = config.builders ?? true;
+    ctx.comments = templateComments(config);
     ctx.clientDirectives = new Set(config.clientDirectives ?? []);
     ctx.rootDir = root;
     ctx.vnodeTag = null;

package/dist/component.js

@@ -309,7 +309,7 @@ export function refuseOptionsApi(comp, script, isChild) {
  * further than its `<script>`, `optionsApi`, for `refuseOptionsApi` once every component is read. */
 export function readComponent(file, root, name = basename(file, ".vue")) {
     const source = readSource(file);
-    const { descriptor, errors } = parseSfc(source, { filename: file });
+    const { descriptor, errors } = parseSfc(source, { filename: file, templateParseOptions: { comments: ctx.comments } });
     const rel = relativePath(root, file);
     const comp = blankComponent(name, snake(name), rel);
     comp.source = source;
@@ -451,7 +451,7 @@ export function readComponent(file, root, name = basename(file, ".vue")) {
         filename: file,
         ...(claim((p) => p.templateOptions?.(comp)) ?? { id: name, scoped: false, slotted: false, ssrCssVars: [], isProd: true }),
         ssr: true,
-        compilerOptions: { ...(script ? { bindingMetadata: script.bindings } : {}), sourceMap: true, nodeTransforms: [mergedControls(controls)] },
+        compilerOptions: { ...(script ? { bindingMetadata: script.bindings } : {}), comments: ctx.comments, sourceMap: true, nodeTransforms: [mergedControls(controls)] },
     });
     const kids = (n) => n.children.filter((c) => c.type !== 3 && !(c.type === 2 && !c.content.trim()));
     const roots = descriptor.template.ast ? kids(descriptor.template.ast) : [];

package/dist/conditional.js

@@ -1,4 +1,4 @@
-import { absence, enumOf, fail, FLOAT, joinAbsence, joinTy, literalsOf, literalTy, nothing, refusalAt, sameTy, STR, withAbsence } from "./model.js";
+import { absence, enumOf, fail, FLOAT, joinAbsence, joinTy, literalsOf, literalTy, neverEmpty, nothing, refusalAt, sameTy, STR, withAbsence } from "./model.js";
 import { GenError } from "./errors.js";
 import { annotatedStr, exactlyEnum, intoEnum, knownLiteral } from "./enums.js";
 import { ctx } from "./context.js";
@@ -56,7 +56,7 @@ function branches(s, n, t) {
     const literals = p ? null : literalNarrowing(s, n.test);
     let a = expr(p && !p.negated ? narrowTo(s, p, name) : (literals?.yes ?? s), n.consequent);
     let b = expr(p && p.negated ? narrowTo(s, p, name) : (literals?.no ?? s), n.alternate);
-    if (sameTy(a.ty, b.ty) && a.code === b.code && (!name || !occurrences(a.code, name)))
+    if (sameTy(a.ty, b.ty) && neverEmpty(a.ty) === neverEmpty(b.ty) && a.code === b.code && (!name || !occurrences(a.code, name)))
         return a;
     const placed = (v) => (["struct", "child", "record"].includes(v.ty.k) && /^\w+(?:\.[\w#]+)+$/.test(v.code) ? { ...v, code: `&${v.code}` } : v);
     [a, b] = [placed(a), placed(b)];
@@ -174,7 +174,7 @@ function pickedBy(v, pick) {
 function ownedChoice(comp, a, b, n) {
     const base = (ty) => (ty.k === "opt" ? ty.of : nothing(ty) ? null : ty);
     const [ba, bb] = [base(a.ty), base(b.ty)];
-    const of = ba ?? bb;
+    const of = ba !== null && bb !== null ? joinTy(ba, bb) : (ba ?? bb);
     if (of === null || (ba !== null && bb !== null && !sameTy(ba, bb)))
         return null;
     const ty = withAbsence(of, joinAbsence(absence(a.ty), absence(b.ty)));

package/dist/config.d.ts

@@ -99,6 +99,10 @@ export interface Config {
      * default) for `vite build`, `false` for the dev server. It decides the names of the CSS
      * variables `v-bind()` in `<style>` sets: a hash in production, the expression in development. */
     isProduction?: boolean;
+    /** Whether the HTML comments of templates render, as `@vitejs/plugin-vue`'s
+     * `template.compilerOptions.comments`: by default as Vue decides it, kept when `isProduction` is
+     * `false` and left out when it is `true`. */
+    comments?: boolean;
     /** CSS modules (`<style module>`): how Vite's `css.modules` names their classes, which ferrovue
      * computes as postcss-modules does. Without it, `<style module>` is refused. */
     cssModules?: {

package/dist/conformance.js

@@ -8,7 +8,7 @@ import { unifiedDiff } from "./diff.js";
 import { allPages, fileRoutes, pagesFolder, routeEntries } from "./file-routes.js";
 import { withDatePlans } from "./date-plans.js";
 import { fixtureApp, readFixture } from "./testing-browser.js";
-import { ctx } from "./context.js";
+import { ctx, templateComments } from "./context.js";
 import { consoleInto, warnInto } from "./problems.js";
 import { headRendered, settled } from "./settle.js";
 import { attachSsrRender } from "./ssr.js";
@@ -254,7 +254,7 @@ export function registerConformance(api, options) {
     for (const [name, component] of given) {
         const source = sources.get(name);
         if (source)
-            attachSsrRender(source, name, component);
+            attachSsrRender(source, name, component, { comments: templateComments(config) });
     }
     const cases = casesIn(fixtures);
     const { routes, options: configured } = fixtureOptions(root, config);

package/dist/context.d.ts

@@ -8,6 +8,9 @@ import { GenError } from "./errors.ts";
 import { type Schema } from "./schema.ts";
 /** The options of Vite's `css.modules` that decide a class's name, as postcss-modules reads them. */
 export type CssModulesConfig = NonNullable<Config["cssModules"]>;
+/** Whether the HTML comments of templates render under `config`: its `comments`, or, as Vue
+ * decides it, whether plugin-vue compiles for development. */
+export declare function templateComments(config: Pick<Config, "comments" | "isProduction">): boolean;
 /** Check what a configuration file holds against `schema`, naming the first key that is unknown or
  * of the wrong shape, and handing `warn` a warning for each deprecated key. */
 export declare function checkConfig(raw: unknown, file: string, warn: (warning: GenError) => void, schema?: Schema): Config;
@@ -29,6 +32,7 @@ export declare const ctx: {
     unions: Map<string, string>;
     mappedUnions: Map<string, EnumDef>;
     builders: boolean;
+    comments: boolean;
     clientDirectives: Set<string>;
     plugins: readonly Plugin[];
     runs: Map<Plugin<unknown, unknown>, unknown>;

package/dist/context.js

@@ -33,6 +33,11 @@ function closest(key, known) {
     }
     return best;
 }
+/** Whether the HTML comments of templates render under `config`: its `comments`, or, as Vue
+ * decides it, whether plugin-vue compiles for development. */
+export function templateComments(config) {
+    return config.comments ?? !(config.isProduction ?? true);
+}
 /** Check what a configuration file holds against `schema`, naming the first key that is unknown or
  * of the wrong shape, and handing `warn` a warning for each deprecated key. */
 export function checkConfig(raw, file, warn, schema = CONFIG_SCHEMA) {
@@ -95,6 +100,8 @@ export function checkConfig(raw, file, warn, schema = CONFIG_SCHEMA) {
     }
     if (raw.isProduction !== undefined && typeof raw.isProduction !== "boolean")
         wrong("isProduction", "`true` or `false`: whether `@vitejs/plugin-vue` compiles for production");
+    if (raw.comments !== undefined && typeof raw.comments !== "boolean")
+        wrong("comments", "`true` or `false`: whether the HTML comments of templates render");
     if (raw.cssModules !== undefined) {
         const m = raw.cssModules;
         if (!isObject(m))
@@ -217,6 +224,7 @@ export const ctx = {
     unions: new Map(),
     mappedUnions: new Map(),
     builders: true,
+    comments: false,
     clientDirectives: new Set(),
     plugins: [],
     runs: new Map(),

package/dist/errors.d.ts

@@ -64,7 +64,7 @@ export declare const ERRORS: {
     };
     readonly FV0105: {
         readonly title: "Statement in setup that could change what renders";
-        readonly detail: "ferrovue translates setup to Rust and does not run it, so a statement that may change state the template reads (`count.value++`, `store.load()`, `items.push(x)`, a call of a function of another library) would render otherwise than Vue does. Lifecycle hooks such as `onMounted`, the compiler macros (`defineEmits`, `defineExpose`) and a `watch` without `immediate` are allowed. Move the statement into `onMounted` or an event handler, write the value as a `computed`, or compute it in Rust and pass it as a prop.";
+        readonly detail: "ferrovue translates setup to Rust and does not run it, so a statement that may change state the template reads (`count.value++`, `store.load()`, `items.push(x)`, a call of a function of another library) would render otherwise than Vue does. The initial value of a `const` or `let` the compiler does not translate is refused the same way when running it could change that state: an assignment, `++` or `--`, a call of a function of setup, a method that changes a value of setup (`push`, `splice`), or a value of setup given to a function of another library. Lifecycle hooks such as `onMounted`, the compiler macros (`defineEmits`, `defineExpose`) and a `watch` without `immediate` are allowed. Move the statement into `onMounted` or an event handler, write the value as a `computed`, or compute it in Rust and pass it as a prop.";
     };
     readonly FV0106: {
         readonly title: "`defineAsyncComponent` of anything but a component of this project";
@@ -372,7 +372,7 @@ export declare const ERRORS: {
     };
     readonly FV0413: {
         readonly title: "`v-model` comparing values of types it cannot compare";
-        readonly detail: "`v-model` on a checkbox, a radio button or a `<select>` marks the option whose value is loosely equal to the model, which the server reproduces between two strings. Other pairs of types follow JavaScript's loose equality, which the server does not. Bind string values and a string model, or bind `:checked` or `:selected` yourself.";
+        readonly detail: "`v-model` on a checkbox, a radio button or a `<select>` marks the option whose value is loosely equal to the model, which the server reproduces for a model that is a string, or a string that may be absent, against a string value, and for an `<option>` with no `value`, which Vue's server compares with `null`. Other pairs of types follow JavaScript's loose equality, which the server does not. Bind string values and a string model, or bind `:checked` or `:selected` yourself.";
     };
     readonly FV0414: {
         readonly title: "`v-model` over an array";
@@ -422,6 +422,10 @@ export declare const ERRORS: {
         readonly title: "Element with no content given a custom directive and attributes that may hold its content";
         readonly detail: "Vue's server renderer writes an element with no content and a custom directive with the `textContent` or `innerHTML` among the attributes it merges into the element: those passed to the component, when the element is its root, those of a `v-bind` of an object or an attribute named at run time, and a bound `textContent` or `innerHTML`. The compiler does not translate that reading. Wrap a root element in another element, such as a `<div>`, which then takes the attributes passed to the component, bind each attribute by its name, and write the content inside the element.";
     };
+    readonly FV0426: {
+        readonly title: "`v-model` on an `<input>` whose `type` is bound";
+        readonly detail: "With a bound `type`, Vue's server renderer chooses as it renders what `v-model` writes: `checked` for a checkbox or a radio button, `value` for any other type, each by its own comparison with the model. The compiler translates `v-model` on an `<input>` of a literal `type`. Write the `type` as a literal, or write one `<input>` for each type under `v-if` and `v-else-if`.";
+    };
     readonly FV0501: {
         readonly title: "Child component that is not among the compiled components";
         readonly detail: "A child component is rendered by calling its generated Rust module, so it must be a `.vue` file in the components directory that ferrovue compiles. A component imported from a library, from `node_modules` or from outside that directory has no module to call. Move the file into the components directory, or render it with a function of your own named under `twins` in `ferrovue.config.json`. See [`errors_and_limits`](crate::guide::errors_and_limits#rust-twins).";
@@ -464,7 +468,7 @@ export declare const ERRORS: {
     };
     readonly FV0511: {
         readonly title: "Prop given a value of another type";
-        readonly detail: "The prop's Rust type cannot hold the value, and Vue would hand it to the child as it is, so the child would read another type than it declares. The message names both types. Pass a value of the prop's type, convert it where it is passed, or change the prop's declared type.";
+        readonly detail: "The prop's Rust type cannot hold the value, and Vue would hand it to the child as it is, so the child would read another type than it declares. The message names both types. Pass a value of the prop's type, convert it where it is passed, or change the prop's declared type. A `boolean` prop takes `true` from an attribute written bare, `\"\"` or the prop's name in kebab-case, which Vue casts; any other string reaches the child as a string.";
     };
     readonly FV0512: {
         readonly title: "Type imported from a component that is not compiled";
@@ -642,6 +646,10 @@ export declare const ERRORS: {
         readonly title: "Comparison of a union of string literals with a literal outside it";
         readonly detail: "A value typed as a union of string literals is a Rust enum, and `===` or `!==` with a literal compares it with one of its variants. A literal outside the union is no variant: the comparison would always be `false` (or `true` for `!==`), and TypeScript refuses it as a comparison of types with no overlap. Compare with one of the union's members, or fix the literal's spelling.";
     };
+    readonly FV0638: {
+        readonly title: "Member of a ref other than `.value` read in setup";
+        readonly detail: "In `<script setup>`, a `ref`, a `shallowRef` or a `computed` is the ref object itself, whose only member is `.value`: `r.label` is `undefined`, `r.length` is `undefined` and `r.join()` throws. The template unwraps a ref, so there `r.label` reads the field of its value. Read the member through `.value` in setup: `r.value.label`.";
+    };
     readonly FV0701: {
         readonly title: "`Number()` of an unsupported value";
         readonly detail: "`Number(x)` is translated for a string, read by JavaScript's grammar for numbers with `js_number`, a number and a boolean, each present. `Number()` gives `NaN` for `undefined` and `0` for `null`, and converts an object or a list through its `String()`, which the server's typed values do not reproduce. Narrow an optional value with `v-if` or give it a fallback with `??`, and read a date with `.getTime()`.";
@@ -735,8 +743,8 @@ export declare const ERRORS: {
         readonly detail: "`String(x)`, `encodeURI(x)`, `encodeURIComponent(x)` and `s.concat(x)` take one value each and write it as `String()` does: strings, numbers and booleans, present or optional, and lists of them joined by `,`. An object writes `[object Object]`, and other values (a record, a date, a list of lists) by JavaScript rules the server does not reproduce. Pass the field you mean, format a date with `.toISOString()`, or build the string in Rust and pass it as a prop.";
     };
     readonly FV0724: {
-        readonly title: "Integer beyond the range of `i64` where the template needs one, as it renders";
-        readonly detail: "Integer arithmetic is done on doubles, as JavaScript does it, and a result written into the page is written from the double. Where the template needs the result as an integer, as a child's `number` prop, an index or the count of a `v-for` over a range, it is held as an `i64`, which stops at ±2⁶³: a result beyond that is refused as the component renders, where a cast to `i64` would change the number. A generated `try_render` returns it as a `ferrovue::render::Refused`, with the component and the line and column of the expression, so a server can answer `400 Bad Request`; `render` panics with its message. See [`errors_and_limits`](crate::guide::errors_and_limits#refused-at-render-time). Keep integer props within ±2⁵³, where JavaScript's integers are exact, or type the child's prop `Float`. See [`numbers`](crate::guide::numbers).";
+        readonly title: "Integer beyond the range of `i64` where the generated code holds one, as it renders";
+        readonly detail: "Integer arithmetic is done on doubles, as JavaScript does it, and a result written into the page is written from the double. Where the generated code holds the result as an integer, as a child's `number` prop, an index, the count of a `v-for` over a range, or an integer a `computed`, a variable, a list or a callback such as `.reduce()`'s keeps, it is held as an `i64`, which stops at ±2⁶³: a result beyond that is refused as the component renders, where a cast to `i64` would change the number. A generated `try_render` returns it as a `ferrovue::render::Refused`, with the component and the line and column of the expression, so a server can answer `400 Bad Request`; `render` panics with its message. See [`errors_and_limits`](crate::guide::errors_and_limits#refused-at-render-time). Keep integer props within ±2⁵³, where JavaScript's integers are exact, or type the numbers it is computed from `Float`. See [`numbers`](crate::guide::numbers).";
     };
     readonly FV0725: {
         readonly title: "String longer than JavaScript allows, as it renders";
@@ -1588,7 +1596,7 @@ export declare const ERRORS: {
     };
     readonly FV1708: {
         readonly title: "`useHeadSafe`";
-        readonly detail: "`useHeadSafe` passes its input through unhead's safe input plugin, which keeps only the tags and attributes it deems safe. ferrovue does not reproduce that filter. Use `useHead` with values the page trusts, and keep text you do not control out of `script` and `style`.";
+        readonly detail: "`useHeadSafe` passes its input through unhead's safe input plugin, which keeps only the tags and attributes it deems safe. ferrovue does not reproduce that filter. Use `useHead` with values the page trusts, and keep text you do not control out of `script`, `style` and `noscript`.";
     };
     readonly FV1709: {
         readonly title: "`useSeoMeta` key or value ferrovue does not translate";