ferrovue 0.2.0 → 0.3.0

package/README.md

@@ -82,8 +82,11 @@ defineProps<{ name: string; unread: number; note?: string }>();
 ### 4. Generate and render
 
 ```sh
+npx ferrovue init       # a starter ferrovue.config.json and components/Hello.vue
 npx ferrovue            # writes src/generated/{greeting.rs, mod.rs}
 npx ferrovue --check    # in CI: exits 1 if the committed modules are stale
+npx ferrovue --check --diff   # …and shows what differs, as `diff -u` does
+npx ferrovue --watch    # regenerates when components or configs change
 ```
 
 ```rust
@@ -118,6 +121,21 @@ route.
 With the `maud` feature, `ferrovue::Html` implements `maud::Render`, so `(greeting::html(&props))` can go
 straight into a `maud::html!` page.
 
+With the `axum` feature, `Html` is an `IntoResponse`, and with `actix-web` a `Responder`: 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:
+
+```rust
+async fn hello(Path(name): Path<String>) -> impl IntoResponse {
+    greeting::into_html(greeting::Props::new(name, 0))
+}
+```
+
+With the `dioxus` feature, a component goes into a Dioxus 0.7 page (`dioxus-ssr` or fullstack):
+`{greeting::island(&props)}` in `rsx!` is the island element itself, with exactly the markup Vue
+hydrates inside it. See `examples/dioxus` and the crate guide's
+[Dioxus page](crates/ferrovue/docs/guide/dioxus.md).
+
 ## What a component may use
 
 ferrovue compiles `<script setup lang="ts">` components. Props are declared by type, with
@@ -138,11 +156,12 @@ ferrovue compiles `<script setup lang="ts">` components. Props are declared by t
 | `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 |
-| Components | imported child components, `v-bind` of a child's own `Props`, `v-model` on a child's `defineModel`, recursion |
+| Components | imported child components, `v-bind` of a child's own `Props`, `v-model` on a child's `defineModel`, recursion; props named in `kebab-case` or `camelCase` |
+| 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, 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) |
 | 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` |
-| 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. `useRoute()` and `$route`: `path`, `fullPath`, `hash`, `name`, `params`, and `query` (a value written once, without `=`, or repeated, exactly as vue-router parses it). `<RouterView>`, at the top and in nested route components: each takes the page it shows as a slot |
+| 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. `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 |
 | vue-i18n | `$t` and `useI18n()`'s `t` and `locale`: named and list values, plurals by vue-i18n's rule, literals, linked messages with `upper`/`lower`/`capitalize`, nested and flat keys, fallback locales, a missing key shown as itself. Messages are parsed at build time by vue-i18n's own compiler |
 | `v-html` | only on a `TrustedHtml` prop (`import type { TrustedHtml } from "ferrovue/types"`) |
@@ -171,7 +190,18 @@ Refused at compile time, each with an error that names the construct:
 - two strings that may each hold half of a surrogate pair compared, searched or joined (see
   [Strings](#strings))
 - `null`
+- an attribute (`class` and `style` aside) bound to a value that may be neither a string, a number
+  nor a boolean: a list, an object, or a `route.query` value, which is an array when its key is
+  repeated. Vue's server renderer leaves the attribute out and hydration then sets it, silently;
+  join a list (`.join(",")`), or narrow a query value with `typeof route.query.q === "string"`
 - any method call without a Rust twin
+- a value read from `$attrs` or `useAttrs()` (`$attrs.title`), which has no type; an attribute a
+  component is passed that would reach a prop of the component (or `<RouterLink>`) its root passes it
+  on to; `$attrs` in a component that is the root of one that may be handed scope ids, where it would
+  hold them; an attribute named by a number, or bound to a `$route.query` value; a class merged by
+  `v-bind` with a string that may equal the class before it, which Vue would write once; attributes
+  passed to a component whose root is a `<Transition>` or `<KeepAlive>` around a `v-if`, which Vue's
+  server drops but its client keeps
 
 An object prop handed to a child component is cloned. Its strings are `Cow`s, so borrowed ones
 cost nothing to copy.
@@ -203,7 +233,8 @@ same in development and production, and do not change, nor change the generated
 component's source does.
 
 A component a parent may hand ids to has a `render_scoped(…, attrs)` beside `render`, which
-generated parents call. A component whose outlets pass a slot scope id (`:slotted()`) takes slot
+generated parents call (for one a parent also passes attributes to, `attrs` is an `fv::Attrs`
+holding them and the ids). A component whose outlets pass a slot scope id (`:slotted()`) takes slot
 content that is given it: `Slot::slotted` for a slot, a third `&str` parameter for a scoped slot's
 closure. `render`, and content from Rust, need none of it: markup written from Rust carries no ids.
 
@@ -286,6 +317,37 @@ let row = |out: &mut String, p: &data_list::RowSlotProps<'_>| {
 data_list::render(&mut page, &props, data_list::Slots { row: Some(&row), ..Default::default() });
 ```
 
+### Hydrating islands
+
+`mountIslands` from `ferrovue/client` hydrates every `data-island` element on the page with the
+component of that name, from the props the server wrote. With the Vite plugin, `ferrovue/islands`
+gives it every island there is, so nothing has to be listed by hand:
+
+```ts
+import { hydrateState, mountIslands } from "ferrovue/client";
+import islands from "ferrovue/islands"; // written by `ferrovue()` from `ferrovue/vite`
+
+hydrateState(pinia);
+await mountIslands(islands, { pinia, router }); // one Pinia and one router for every island
+```
+
+The islands are exactly the components that have an `island()`: those that render from their props
+alone, as the compiler finds while it generates them. That is the only set the server can write
+`data-island` for, so it needs no folder convention or list to keep in step, and making a component
+an island is a matter of the server calling its `island()`. Each is keyed by its `NAME`, the file
+name without `.vue`, which is what `data-island` carries.
+
+Each entry is a lazy `import()`, so the bundler gives every island a chunk of its own and a page
+fetches the code of the islands it holds and no more. `mountIslands` takes such loaders and
+components alike, so a hand-written island can join them: `mountIslands({ ...islands, Chart })`.
+An island whose name is not among them is left as the server rendered it, with a warning naming it
+(`onError` to handle it otherwise), as is one whose component fails to load.
+
+An island's `<style>` goes into its chunk too, and Vite links it only once the island's script has
+loaded, after the server's markup is on screen. Link those stylesheets from the page up front: a
+server reading Vite's manifest takes the `css` of the entry's `dynamicImports` as well as its own
+(`examples/fullstack/src/assets.rs`).
+
 ### Hydrating Pinia state
 
 ```rust
@@ -301,7 +363,12 @@ hydrateState(pinia); // before app.mount(): every store starts from what the ser
 
 `ferrovue::hole()` is a slot whose content you write later. Render a layout with holes,
 `split_holes` the output, and stream the pieces with each hole's content between them, in whatever
-order the content is ready.
+order the content is ready. With the `axum` or `actix-web` feature, `ferrovue::HtmlStream` is that
+streamed response, from the render and a future for each hole's content:
+
+```rust
+let body = ferrovue::HtmlStream::new(page).hole(async move { reviews_of(&id).await });
+```
 
 ## Performance
 
@@ -376,6 +443,7 @@ packages/ferrovue/           the compiler (npm package)
   src/rust.ts, emitter.ts    the Rust source written out
   src/cli.ts, vite.ts        the `ferrovue` command and the Vite plugin
   src/client.ts              browser-side helpers: `mountIslands`, `hydrateState`
+  src/islands.ts             `ferrovue/islands`, which the Vite plugin writes: every island, loaded lazily
   src/testing.ts             utilities for a project's own conformance suite
   src/types.ts               `ferrovue/types`: `TrustedHtml`, `Float`
   test/                      compiler, CLI, router, vector, island, Vite and conformance tests
@@ -384,6 +452,7 @@ packages/ferrovue/           the compiler (npm package)
   fuzz/                      the randomised differential tester (`pnpm fuzz`)
 examples/greeting/           the smallest setup: one component rendered from Rust
 examples/fullstack/          axum + Vite: islands, Pinia state, routes and streaming
+examples/dioxus/             a Dioxus page, rendered with dioxus-ssr, with an island in it
 scripts/release.ts           the release version bump (see RELEASING.md)
 ```
 

package/dist/attrs.d.ts

@@ -5,7 +5,7 @@ export declare function interpolate(e: Emitter, v: Val): void;
 /** The value half of `key="value"`, escaped. */
 export declare function attrValue(e: Emitter, v: Val): void;
 /** `ssrRenderAttr(key, value)`: absent for null/undefined, `key="value"` for anything else. */
-export declare function renderAttr(e: Emitter, key: string, v: Val): void;
+export declare function renderAttr(s: Scope, e: Emitter, key: string, v: Val, n: N): void;
 /** `ssrRenderDynamicAttr(key, value)`: as `renderAttr`, but a boolean attribute is present or
  * absent, and an empty string renders the name alone. */
 export declare function renderDynamicAttr(s: Scope, e: Emitter, key: string, v: Val, n: N): void;
@@ -27,13 +27,29 @@ export declare const IGNORED_PROPS: Set<string>;
 /** `ssrGetDirectiveProps(_ctx, dir)`: a custom directive's server props, which are none for a
  * directive the configuration declares client-only. `false` when `n` is not such a call. */
 export declare function directiveProps(s: Scope, n: N): boolean;
+/** Whether `n` is the root's `_attrs`: what a parent passes, then the scope ids. */
+export declare function isAttrs(n: N): boolean;
+/** Whether `n` is `$attrs` — `_ctx.$attrs`, or a `useAttrs()` binding — which a component whose
+ * root is another's would find holding scope ids as well. */
+export declare function dollarAttrs(s: Scope, n: N): boolean;
+/** The parts `_mergeProps(…)` merges, or the one object that is not merged. */
+export declare function mergedParts(n: N): N[];
 /** `ssrRenderAttrs(obj)`, key by key in the object's order, and the inherited scope ids where the
- * root's `_attrs` is merged in. */
+ * root's `_attrs` is merged in. When a parent may pass attributes, which only the run time knows,
+ * `$attrs` and the root's `_attrs` are merged with the element's own by `fv::attrs_into` — but only
+ * when some were passed: with none, the element is written as it is without. */
 export declare function renderAttrs(s: Scope, e: Emitter, n: N): void;
-/** `mergeProps(a, _attrs, b, …)` as one object literal, without `_attrs`: it holds only scope ids,
- * which the caller writes after the rest. Of the rest, `class` and `style` values are merged as an
- * array, and any other key keeps the place it first had with the last value given. */
+/** `mergeProps(a, _attrs, b, …)` as one object literal, without `_attrs` and `$attrs`, which hold
+ * what only the run time knows. Of the rest, `class` and `style` values are merged as an array —
+ * unless a class equals the one so far, which Vue then keeps once — and any other key keeps the
+ * place it first had with the last value given. */
 export declare function mergeProps(s: Scope, n: N): N;
+/** The attributes of an object literal as `fv::Attr` entries, `("name", value)`, for a merge at run
+ * time: given to a child component (`vnode`), whose virtual node normalises a class array or object
+ * to a string, or an element's own (`own`), which `mergeProps` keeps as an object. */
+export declare function attrEntries(s: Scope, obj: N, side: "vnode" | "own"): string[];
+/** One attribute's value as an `fv::Attr`. */
+export declare function attrOf(s: Scope, key: string, n: N, side: "vnode" | "own"): string;
 /** One object of a style binding, and the run-time condition under which it is part of it. */
 export interface StyleItem {
     cond: string | null;

package/dist/attrs.js

@@ -2,9 +2,10 @@
 import { escapeHtml, hyphenate, isBooleanAttr, isSSRSafeAttrName, parseStringStyle, propsToAttrMap } from "@vue/shared";
 import { fail, GenError, rustStr, STR } from "./model.js";
 import { CONFIG_FILE, ctx } from "./context.js";
-import { cond, expr, known, meet, truthy, unquote } from "./expr.js";
+import { cond, describeTy, expr, known, meet, truthy, unquote } from "./expr.js";
 import { atom, bare, condition, logical, not, receiver, strArg } from "./parens.js";
 import { Emitter } from "./emitter.js";
+import { isDollarAttrs } from "./scoped.js";
 /** What a number written at run time is expected to take: most a page shows are shorter, and the
  * reservation is an estimate. */
 const NUMBER_BYTES = 6;
@@ -54,16 +55,27 @@ export function attrValue(e, v) {
     if (!display(e, v))
         throw new GenError("an attribute value must be a string, a number or a boolean");
 }
+/** Vue's server renderer leaves out an attribute whose value is not a string, a number or a boolean
+ * (`isRenderableAttrValue`), but hydration then sets it, to `String(value)`, without reporting a
+ * mismatch: the page changes as it hydrates. So a value that may be anything else is refused. */
+function renderable(s, key, v, n) {
+    const ty = v.ty.k === "opt" ? v.ty.of : v.ty;
+    if (ty.k === "str" || ty.k === "int" || ty.k === "float" || ty.k === "bool" || ty.k === "undef")
+        return;
+    const what = ty.k === "query" ? "a query value, which is an array when its key is repeated" : describeTy(ty);
+    const fix = ty.k === "query" ? 'narrow it to one string, as `typeof route.query.q === "string" ? route.query.q : ""`'
+        : ty.k === "list" ? 'join it into one string, as `.join(",")`'
+            : "bind a string, a number or a boolean";
+    fail(s.comp, `\`${key}\` is bound to ${what}: Vue's server renderer leaves the attribute out, and hydration then sets it, changing the page; ${fix}`, n);
+}
 /** `ssrRenderAttr(key, value)`: absent for null/undefined, `key="value"` for anything else. */
-export function renderAttr(e, key, v) {
+export function renderAttr(s, e, key, v, n) {
+    renderable(s, key, v, n);
     if (v.ty.k === "undef")
         return;
-    // Only a single query value is an attribute's value; `null` and an array leave it out.
-    if (v.ty.k === "query")
-        v = { code: `${atom(v.code)}.attr_value()`, ty: { k: "opt", of: STR } };
     if (v.ty.k === "opt") {
         e.open(`if let Some(v) = ${v.code}`);
-        renderAttr(e, key, { code: "v", ty: v.ty.of });
+        renderAttr(s, e, key, { code: "v", ty: v.ty.of }, n);
         e.close();
         return;
     }
@@ -77,10 +89,9 @@ export function renderDynamicAttr(s, e, key, v, n) {
     const name = propsToAttrMap[key] ?? key.toLowerCase();
     if (!isSSRSafeAttrName(name))
         fail(s.comp, `unsafe attribute name \`${name}\``, n);
+    renderable(s, key, v, n);
     if (v.ty.k === "undef")
         return;
-    if (v.ty.k === "query")
-        v = { code: `${atom(v.code)}.attr_value()`, ty: { k: "opt", of: STR } };
     const boolean = (t) => isBooleanAttr(name) || (name === "hidden" && (t.k === "bool" || t.k === "int" || t.k === "float"));
     if (v.ty.k === "opt" && boolean(v.ty.of)) {
         // Present, or truthy when it is not a string: one test, with nothing to bind.
@@ -237,9 +248,8 @@ export function renderClass(s, e, n, after = false) {
     }
 }
 export const IGNORED_PROPS = new Set(["", "key", "ref", "innerHTML", "textContent", "ref_key", "ref_for"]);
-/** `ssrRenderAttrs(_attrs)` on the root: the scope ids a parent handed it, already written as Vue
- * writes them. They are all `_attrs` holds, since a parent passes a child only the props it
- * declares and nothing else falls through. */
+/** `ssrRenderAttrs(_attrs)` on the root, when no attribute reaches it at run time: the scope ids a
+ * parent handed it, already written as Vue writes them. */
 function inheritedAttrs(s, e) {
     if (s.attrs !== null)
         e.stmt(`out.push_str(${s.attrs});`);
@@ -263,32 +273,100 @@ export function directiveProps(s, n) {
     }
     return true;
 }
+/** Whether `n` is the root's `_attrs`: what a parent passes, then the scope ids. */
+export function isAttrs(n) {
+    return n?.type === "Identifier" && n.name === "_attrs";
+}
+/** Whether `n` is `$attrs` — `_ctx.$attrs`, or a `useAttrs()` binding — which a component whose
+ * root is another's would find holding scope ids as well. */
+export function dollarAttrs(s, n) {
+    if (!isDollarAttrs(n, s.attrsBindings))
+        return false;
+    if (s.comp.idsInAttrs) {
+        fail(s.comp, `\`$attrs\` in ${s.comp.name}, the root of a component that may be handed scope ids: it would hold them as attributes too`, n);
+    }
+    return true;
+}
+/** The parts `_mergeProps(…)` merges, or the one object that is not merged. */
+export function mergedParts(n) {
+    return n?.type === "CallExpression" && n.callee.type === "Identifier" && n.callee.name === "_mergeProps" ? n.arguments : [n];
+}
 /** `ssrRenderAttrs(obj)`, key by key in the object's order, and the inherited scope ids where the
- * root's `_attrs` is merged in. */
+ * root's `_attrs` is merged in. When a parent may pass attributes, which only the run time knows,
+ * `$attrs` and the root's `_attrs` are merged with the element's own by `fv::attrs_into` — but only
+ * when some were passed: with none, the element is written as it is without. */
 export function renderAttrs(s, e, n) {
-    const isAttrs = (a) => a.type === "Identifier" && a.name === "_attrs";
+    const parts = mergedParts(n);
+    const passed = (p) => s.fallthrough !== null && ((isAttrs(p) && s.comp.inheritAttrs) || dollarAttrs(s, p));
+    if (!parts.some(passed)) {
+        staticAttrs(s, e, n);
+        return;
+    }
+    e.open(`if ${s.fallthrough}.is_empty()`);
+    const at = e.lines.length;
+    staticAttrs(s, e, n);
+    e.flush();
+    // Nothing to write when nothing is passed: only the other branch is left.
+    if (e.lines.length === at)
+        e.replace(at - 1, `if ${s.fallthrough}.is_empty()`, `if !${s.fallthrough}.is_empty()`);
+    else
+        e.close(" else {");
+    // `_attrs` or `$attrs` alone is written as it is, with no `mergeProps` to normalise it.
+    if (parts.length === 1 && parts[0] === n) {
+        e.stmt(`fv::passed_attrs_into(out, ${s.fallthrough}.list(), ${isAttrs(n) && s.attrs !== null ? s.attrs : '""'});`);
+        e.close();
+        return;
+    }
+    const sources = [];
+    let idsAt = -1;
+    for (const p of parts) {
+        if (directiveProps(s, p))
+            continue;
+        if (isAttrs(p))
+            idsAt = sources.length;
+        if (passed(p))
+            sources.push(`${s.fallthrough}.list()`);
+        else if (isAttrs(p))
+            sources.push("&[]");
+        else if (p.type === "ObjectExpression")
+            sources.push(`&[${attrEntries(s, p, "own").join(", ")}]`);
+        else
+            fail(s.comp, "attributes must be an object literal", p);
+    }
+    const ids = idsAt >= 0 && s.attrs !== null ? s.attrs : '""';
+    e.stmt(`fv::attrs_into(out, &[${sources.join(", ")}], ${idsAt >= 0 ? idsAt : sources.length}, ${ids});`);
+    e.close();
+}
+/** `ssrRenderAttrs(obj)` with nothing passed at run time: `$attrs` empty, `_attrs` the scope ids. */
+function staticAttrs(s, e, n) {
     if (isAttrs(n)) {
         inheritedAttrs(s, e);
         return;
     }
-    if (directiveProps(s, n))
+    if (dollarAttrs(s, n) || directiveProps(s, n))
         return;
     if (n.type === "CallExpression" && n.callee.type === "Identifier" && n.callee.name === "_mergeProps") {
         const merged = mergeProps(s, n);
         const at = n.arguments.findIndex(isAttrs);
         if (at < 0) {
-            renderAttrs(s, e, merged);
+            objectAttrs(s, e, merged, true);
             return;
         }
         // The inherited ids take their place among the keys: after those given before `_attrs`, before
         // those first given after it, such as `v-show`'s `style` when there is no other.
         const before = new Set(mergeProps(s, { ...n, arguments: n.arguments.slice(0, at) }).properties.map((p) => p.key.name ?? p.key.value));
         const part = (early) => ({ ...merged, properties: merged.properties.filter((p) => before.has(p.key.name ?? p.key.value) === early) });
-        renderAttrs(s, e, part(true));
+        objectAttrs(s, e, part(true), true);
         inheritedAttrs(s, e);
-        renderAttrs(s, e, part(false));
+        objectAttrs(s, e, part(false), true);
         return;
     }
+    objectAttrs(s, e, n, false);
+}
+/** The keys of one attribute object. `merged` says `mergeProps` made it, which normalises the class
+ * and the style first: a class that is `undefined` is left out, and a style given as text is parsed
+ * and written back. */
+function objectAttrs(s, e, n, merged) {
     if (n.type !== "ObjectExpression")
         fail(s.comp, "attributes must be an object literal", n);
     for (const p of n.properties) {
@@ -303,13 +381,23 @@ export function renderAttrs(s, e, n) {
             fail(s.comp, "`className` renders by its own rule in Vue; bind `class`", p);
         }
         else if (key === "class") {
+            const present = merged ? classPresent(s, p.value) : "true";
+            if (present === "false")
+                continue;
+            if (present !== "true")
+                e.open(`if ${condition(present)}`);
             e.lit(` class="`);
             renderClass(s, e, p.value);
             e.lit(`"`);
+            if (present !== "true")
+                e.close();
         }
         else if (key === "style") {
             e.lit(` style="`);
-            renderStyle(s, e, p.value);
+            if (merged)
+                mergedStyle(s, e, p.value);
+            else
+                renderStyle(s, e, p.value);
             e.lit(`"`);
         }
         else {
@@ -317,13 +405,83 @@ export function renderAttrs(s, e, n) {
         }
     }
 }
-/** `mergeProps(a, _attrs, b, …)` as one object literal, without `_attrs`: it holds only scope ids,
- * which the caller writes after the rest. Of the rest, `class` and `style` values are merged as an
- * array, and any other key keeps the place it first had with the last value given. */
+/** When `mergeProps` gives an element a `class` at all: unless every value it merges is
+ * `undefined`, which `ret.class !== undefined` leaves out. */
+function classPresent(s, n) {
+    if (n.fvMerged)
+        return n.elements.reduce((acc, el) => logical(acc, "||", classPresent(s, el)), "false");
+    switch (n.type) {
+        case "StringLiteral":
+        case "NullLiteral":
+        case "ArrayExpression":
+        case "ObjectExpression":
+            return "true";
+        case "LogicalExpression":
+            if (n.operator === "&&")
+                return logical(not(cond(s, n.left)), "||", classPresent(s, n.right));
+            break;
+        case "ConditionalExpression":
+            if (n.consequent.type === "NullLiteral")
+                return logical(cond(s, n.test), "||", classPresent(s, n.alternate));
+            if (n.alternate.type === "NullLiteral")
+                return logical(not(cond(s, n.test)), "||", classPresent(s, n.consequent));
+            break;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "undef")
+        return "false";
+    if (v.ty.k === "opt")
+        return `${atom(v.code)}.is_some()`;
+    return "true";
+}
+/** A style `mergeProps` merged: normalised, so that text is parsed into properties — by Vue's own
+ * parser now when it is literal, by `fv::style_text_into` at run time when it is not. */
+function mergedStyle(s, e, n) {
+    if (n.type === "StringLiteral") {
+        renderStyle(s, e, { type: "ArrayExpression", elements: [n] });
+        return;
+    }
+    if (n.fvMerged || ["ObjectExpression", "ArrayExpression", "ConditionalExpression", "LogicalExpression", "NullLiteral"].includes(n.type)) {
+        renderStyle(s, e, n);
+        return;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "str")
+        e.stmt(`fv::style_text_into(out, ${strArg(v.code)});`);
+    else if (v.ty.k === "opt" && v.ty.of.k === "str") {
+        e.open(`if let Some(v) = ${v.code}`);
+        e.stmt("fv::style_text_into(out, v);");
+        e.close();
+    }
+    else if (v.ty.k !== "undef")
+        fail(s.comp, "a style binding is a string, an object or an array", n);
+}
+/** Whether a class value could equal, as a string, the class merged before it: a string. */
+function maybeEqual(s, n) {
+    if (n.type === "StringLiteral")
+        return true;
+    if (n.fvMerged || ["ArrayExpression", "ObjectExpression", "NullLiteral", "LogicalExpression", "ConditionalExpression"].includes(n.type))
+        return false;
+    const v = expr(s, n);
+    return v.ty.k === "str" || (v.ty.k === "opt" && v.ty.of.k === "str");
+}
+/** A class value's names, known now: a literal, or literals merged. */
+function literalClass(n) {
+    if (n.type === "StringLiteral")
+        return n.value.trim();
+    if (!n.fvMerged)
+        return null;
+    const parts = n.elements.map(literalClass);
+    return parts.includes(null) ? null : parts.filter(Boolean).join(" ");
+}
+/** `mergeProps(a, _attrs, b, …)` as one object literal, without `_attrs` and `$attrs`, which hold
+ * what only the run time knows. Of the rest, `class` and `style` values are merged as an array —
+ * unless a class equals the one so far, which Vue then keeps once — and any other key keeps the
+ * place it first had with the last value given. */
 export function mergeProps(s, n) {
     const merged = new Map();
     for (const a of n.arguments) {
-        if (a.type === "Identifier" && a.name === "_attrs")
+        if (isAttrs(a) || dollarAttrs(s, a))
             continue;
         if (directiveProps(s, a))
             continue;
@@ -334,8 +492,17 @@ export function mergeProps(s, n) {
                 fail(s.comp, "attribute objects hold plain keys", p);
             const key = p.key.type === "Identifier" ? p.key.name : p.key.value;
             const had = merged.get(key);
-            if (had && (key === "class" || key === "style")) {
-                merged.set(key, { ...p, value: { type: "ArrayExpression", elements: [had.value, p.value] } });
+            if (had && key === "class" && maybeEqual(s, p.value)) {
+                // `ret.class !== toMerge.class`: a string equal to the class so far is not added again.
+                const before = literalClass(had.value);
+                if (before === null || p.value.type !== "StringLiteral") {
+                    fail(s.comp, "a class merged with a string that may equal the class before it, which Vue then writes once: bind an array", p);
+                }
+                if (before !== p.value.value)
+                    merged.set(key, { ...p, value: { type: "ArrayExpression", elements: [had.value, p.value], fvMerged: true } });
+            }
+            else if (had && (key === "class" || key === "style")) {
+                merged.set(key, { ...p, value: { type: "ArrayExpression", elements: [had.value, p.value], fvMerged: true } });
             }
             else if (had) {
                 // `Map` keeps a key where it was first set, as a JavaScript object does.
@@ -347,6 +514,120 @@ export function mergeProps(s, n) {
     }
     return { type: "ObjectExpression", properties: [...merged.values()] };
 }
+/** The attributes of an object literal as `fv::Attr` entries, `("name", value)`, for a merge at run
+ * time: given to a child component (`vnode`), whose virtual node normalises a class array or object
+ * to a string, or an element's own (`own`), which `mergeProps` keeps as an object. */
+export function attrEntries(s, obj, side) {
+    const out = [];
+    for (const p of obj.properties) {
+        if (p.type !== "ObjectProperty" || p.computed)
+            fail(s.comp, "attribute objects hold plain keys", p);
+        const key = p.key.type === "Identifier" ? p.key.name : String(p.key.value);
+        if (IGNORED_PROPS.has(key) || /^on[^a-z]/.test(key) || key.startsWith("."))
+            continue;
+        out.push(`(${rustStr(key)}, ${attrOf(s, key, p.value, side)})`);
+    }
+    return out;
+}
+/** One attribute's value as an `fv::Attr`. */
+export function attrOf(s, key, n, side) {
+    if (key === "className")
+        fail(s.comp, "`className` renders by its own rule in Vue; bind `class`", n);
+    if (key === "class")
+        return classAttr(s, n, side);
+    if (key === "style")
+        return styleAttr(s, n);
+    if (n.type === "NullLiteral")
+        return "fv::Attr::Undefined";
+    return valueAttr(s, expr(s, n), n);
+}
+/** A string, a number, a boolean or `undefined` as an `fv::Attr`. */
+function valueAttr(s, v, n) {
+    switch (v.ty.k) {
+        case "str":
+            return `fv::Attr::str(${strArg(v.code)})`;
+        case "int":
+            return `fv::Attr::Int(${bare(v.code)})`;
+        case "float":
+            return `fv::Attr::Float(${bare(v.code)})`;
+        case "bool":
+            return `fv::Attr::Bool(${bare(v.code)})`;
+        case "undef":
+            return "fv::Attr::Undefined";
+        case "opt": {
+            const of = v.ty.of.k;
+            const make = of === "str" ? "fv::Attr::str" : of === "int" ? "fv::Attr::Int" : of === "float" ? "fv::Attr::Float" : of === "bool" ? "fv::Attr::Bool" : null;
+            if (make !== null)
+                return `${atom(v.code)}.map_or(fv::Attr::Undefined, ${make})`;
+        }
+    }
+    return fail(s.comp, "an attribute that may fall through is a string, a number or a boolean", n);
+}
+/** A class as an `fv::Attr`: a string as it is, an array or an object by the names it normalises
+ * to, `cond && x` and `cond ? x : y` decided at run time. */
+function classAttr(s, n, side) {
+    switch (n.type) {
+        case "StringLiteral":
+            return `fv::Attr::str(${rustStr(n.value)})`;
+        // `null`, like `false`, joins as nothing and equals no class: an empty string does the same.
+        case "NullLiteral":
+            return 'fv::Attr::str("")';
+        case "ArrayExpression":
+        case "ObjectExpression": {
+            const items = classItems(s, n);
+            const names = items.every((it) => "lit" in it)
+                ? rustStr(items.map((it) => ("lit" in it ? it.lit : "")).join(" "))
+                : `fv::class_names(&[${items.map((it) => ("lit" in it ? rustStr(it.lit) : it.code)).join(", ")}])`;
+            const literal = names.startsWith('"');
+            if (side === "vnode")
+                return literal ? `fv::Attr::str(${names})` : `fv::Attr::from(${names})`;
+            return `fv::Attr::Names(${literal ? `std::borrow::Cow::Borrowed(${names})` : `${names}.into()`})`;
+        }
+        case "LogicalExpression":
+            if (n.operator === "&&")
+                return `if ${condition(cond(s, n.left))} { ${classAttr(s, n.right, side)} } else { fv::Attr::str("") }`;
+            break;
+        case "ConditionalExpression":
+            return `if ${condition(cond(s, n.test))} { ${classAttr(s, n.consequent, side)} } else { ${classAttr(s, n.alternate, side)} }`;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "str" || v.ty.k === "undef" || (v.ty.k === "opt" && v.ty.of.k === "str"))
+        return valueAttr(s, v, n);
+    return fail(s.comp, "a class is a string, an array, or an object of conditions", n);
+}
+/** A style as an `fv::Attr`: text as it is, objects by their properties, arrays merged, `cond && x`
+ * and `cond ? x : y` decided at run time. */
+function styleAttr(s, n) {
+    switch (n.type) {
+        case "StringLiteral":
+            return `fv::Attr::str(${rustStr(n.value)})`;
+        case "NullLiteral":
+            return "fv::Attr::Undefined";
+        case "ObjectExpression": {
+            const entries = n.properties.map((p) => {
+                if (p.type !== "ObjectProperty" || p.computed)
+                    fail(s.comp, "a style object holds plain `property: value` pairs", p);
+                const key = p.key.type === "Identifier" ? p.key.name : String(p.key.value);
+                if (/^\d+$/.test(key) || key.startsWith(":"))
+                    fail(s.comp, `style property \`${key}\``, p);
+                return `(${rustStr(key)}, ${valueAttr(s, expr(s, p.value), p.value)})`;
+            });
+            return `fv::Attr::style([${entries.join(", ")}])`;
+        }
+        case "ArrayExpression":
+            return `fv::Attr::styles([${n.elements.map((el) => (el ? styleAttr(s, el) : "fv::Attr::Undefined")).join(", ")}])`;
+        case "LogicalExpression":
+            if (n.operator === "&&")
+                return `if ${condition(cond(s, n.left))} { ${styleAttr(s, n.right)} } else { fv::Attr::Undefined }`;
+            break;
+        case "ConditionalExpression":
+            return `if ${condition(cond(s, n.test))} { ${styleAttr(s, n.consequent)} } else { ${styleAttr(s, n.alternate)} }`;
+    }
+    const v = expr(s, n);
+    if (v.ty.k === "str" || v.ty.k === "undef" || (v.ty.k === "opt" && v.ty.of.k === "str"))
+        return valueAttr(s, v, n);
+    return fail(s.comp, "a style binding is a string, an object or an array", n);
+}
 /** The objects a style binding merges, in order: an object literal, a static `style` the compiler
  * parsed, `v-show`'s `cond ? null : { display: "none" }`, and arrays of those. */
 export function styleItems(s, n, when) {