ferrovue 0.14.0 → 0.15.0

package/README.md

@@ -57,7 +57,7 @@ the configuration at your project root yourself:
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/ferrovue@0.14.0/schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/ferrovue@0.15.0/schema.json",
   "components": "client/components",
   "out": "src/generated"
 }
@@ -87,6 +87,7 @@ read `$schema`. Offline, the copy in the installed package works as well:
 | `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) |
+| `whitespace` | no | `"trim-edges"` trims the whitespace where a template's text meets its element's tags, with `trimEdges` from `ferrovue/whitespace` in plugin-vue's `template.compilerOptions.nodeTransforms` for the client; `"condense"`, the default, spaces text as Vue does. See [`generated_code`](https://docs.rs/ferrovue/latest/ferrovue/guide/generated_code/index.html#whitespace) |
 | `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`) |
 
@@ -174,7 +175,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.14", default-features = false }`.
+  `ferrovue-i18n`: `ferrovue = { version = "0.15", 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:
@@ -226,7 +227,7 @@ ferrovue compiles `<script setup lang="ts">` components, and components with no
 |---|---|
 | Prop types | `string`, `number` (integers, `i64`, written and computed as JavaScript does, exact within ±2⁵³), `Float` from `ferrovue/types` (fractions, `f64`), `boolean`, unions of two or more string literals (`"sm" \| "md"`, an alias, or written in place), each a Rust enum generated for it (`Size::Md`, `"md".parse::<Size>()`, written and serialised as its literal; see the crate's [`props`](https://docs.rs/ferrovue/latest/ferrovue/guide/props/index.html#unions-of-string-literals) guide), or an enum of the application's own that `unions` names for the alias; a list of such a union, a list of its enum (`Size[]` is `Vec<Size>`); `T \| undefined`, `T \| null` (an `Option` written as `null`), arrays (`T[]`, `Array<T>`, `readonly T[]`), interfaces and object type aliases (recursive ones too), object types written in place, mapped types and `Record`s over a union of names, indexed types (`Card["size"]`), tuples (`[label: string, n: number]`, a tuple struct written as an array), dictionaries (`Record<string, T>`, `{ [key: string]: T }`, `ferrovue::props::Record` in Rust, which keeps JavaScript's order of keys), another component's exported `Props`, `TrustedHtml`, `InlineHtml`, `Date` (a prop, optional or nullable too, and inside lists, dictionaries and interfaces: `ferrovue::date::JsDate`, or `chrono::DateTime<Utc>` with the `chrono` feature) |
 | Shared types | Interfaces and type aliases imported from `.ts` files (generated once, into `types.rs`; imported by a relative path or through an alias the project declares, in its tsconfig.json's `compilerOptions.paths` or, with the Vite plugin, Vite's `resolve.alias`: `@/lib/format`), from a store's file, or from another component's `.vue` file; objects of a shared type can be passed between components. A TypeScript `enum` of string members is a Rust enum, as a union of string literals is, its variants named after its members; one of numbers is a number |
-| Constants | Constants imported from `.ts` files, object constants declared in `<script setup>`, and `enum`s (imported, or declared in the component, with members set to such constants or to earlier members), evaluated when the component is compiled: strings, numbers, booleans, `null`, arithmetic and joined strings of them as JavaScript evaluates them (`60 * MINUTE`, `` `${BASE}/feed` ``, `"#" + 1.5`, and `**` where it gives an exact integer within ±2⁵³), lists of them, objects of them read field by field (`LABELS.save`, `Tone.Loud`, `Rank[5]`), and lists of objects of them, which become a `const` in `types.rs` (`{ value, label }` items get a type named after the constant, `OptionsItem`, unless the constant is typed with an interface: `OPTIONS: Option[]`; a field that is `null` in some items is `T | null`); lookup tables: an object constant (`as const`, `Record<Size, T>` or untyped, keys computed from enum members too) read by a key whose type is a union of string or integer literals or an `enum` (a prop, a `computed`, a `v-for` item's field, a `?:` of literals, or built from one by `.toUpperCase()`, `.toLowerCase()` or a template literal), or by a constant number (`O[HALF]` reads `O["0.5"]`), compiled to a `match` over the members (over the variants of a union's enum, with no catch-all arm; a table of a union's members, `Record<Tone, Tone>`, reaches a union prop as a `match` from variant to variant), read on by field (`THEME[tone].fg`) in text, attributes, `:class` and `:style`, with `undefined` for a member the object lacks (`ICONS[kind] ?? "none"`, `ICONS[kind]?.label`, `v-if="ICONS[kind]"`, `kind && ICONS[kind]`); a free-text key tested with `Object.hasOwn(ROLES, key)`, against the object's own keys, which narrows the key for `ROLES[key]` in what follows; `Object.keys()` of an object constant; a constant `new Map([[key, value], …])` of string or integer keys, read with `.get(key)` (`undefined` for a key it lacks) and `.has(key)`. See the crate's [`props`](https://docs.rs/ferrovue/latest/ferrovue/guide/props/index.html#constants) guide |
+| Constants | Constants imported from `.ts` files (exported on their declaration, by name in `export { A, B as C }`, as `export default A`, or passed on with `export { A } from` and `export * from`), object constants declared in `<script setup>`, and `enum`s (imported, or declared in the component, with members set to such constants or to earlier members), evaluated when the component is compiled: strings, numbers, booleans, `null`, arithmetic and joined strings of them as JavaScript evaluates them (`60 * MINUTE`, `` `${BASE}/feed` ``, `"#" + 1.5`, and `**` where it gives an exact integer within ±2⁵³), lists of them, objects of them read field by field (`LABELS.save`, `Tone.Loud`, `Rank[5]`), and lists of objects of them, which become a `const` in `types.rs` (`{ value, label }` items get a type named after the constant, `OptionsItem`, unless the constant is typed with an interface: `OPTIONS: Option[]`; a field that is `null` in some items is `T | null`); lookup tables: an object constant (`as const`, `Record<Size, T>` or untyped, keys computed from enum members too) read by a key whose type is a union of string or integer literals or an `enum` (a prop, a `computed`, a `v-for` item's field, a `?:` of literals, or built from one by `.toUpperCase()`, `.toLowerCase()` or a template literal), or by a constant number (`O[HALF]` reads `O["0.5"]`), compiled to a `match` over the members (over the variants of a union's enum, with no catch-all arm; a table of a union's members, `Record<Tone, Tone>`, reaches a union prop as a `match` from variant to variant), read on by field (`THEME[tone].fg`) in text, attributes, `:class` and `:style`, with `undefined` for a member the object lacks (`ICONS[kind] ?? "none"`, `ICONS[kind]?.label`, `v-if="ICONS[kind]"`, `kind && ICONS[kind]`); a free-text key tested with `Object.hasOwn(ROLES, key)`, against the object's own keys, which narrows the key for `ROLES[key]` in what follows; `Object.keys()` of an object constant; a constant `new Map([[key, value], …])` of string or integer keys, read with `.get(key)` (`undefined` for a key it lacks) and `.has(key)`. See the crate's [`props`](https://docs.rs/ferrovue/latest/ferrovue/guide/props/index.html#constants) guide |
 | Props | Props declared in place, by an interface of the component, or by one imported from a `.ts` file by a relative path (`defineProps<CardProps>()`), extended or joined with `&`; `withDefaults`, destructured props with defaults and new names (`const { size = "md", label: text } = defineProps<…>()`), the props object (`const props = defineProps<…>()`, then `props.label` in the template or in script code), optional booleans (Vue casts an absent one to `false`), `defineModel` (named, required, with defaults), components with no props. A generic component (`<script setup generic="T extends Item">`) renders each type parameter as its constraint, which is all the template can rely on |
 | Setup | `ref`/`shallowRef`, `computed` (an expression, or a body of statements: see Statements; one that may throw, through `.repeat()`, `.padStart()`, a date, `$t` or a helper, is evaluated where the render first reads it, once, as Vue does), refs that start empty, typed by their type argument (`ref<Row[]>([])`, `ref<Row>()`, `ref<string \| undefined>(undefined)`), refs of a union of string literals, held as its enum (`ref<Choice>(props.tone ?? "")`, a member, a value of the union, a lookup table's value, or a `?:` or `??` of them), plain `const`/`let`, `.value` in script code, helpers with Rust twins, functions (see Functions), a plain `<script>` block beside setup. Lifecycle hooks, `watch` (not `immediate`), `defineEmits`, `defineSlots`, `defineOptions`, `defineExpose` and template refs (`ref(null)`, `useTemplateRef`) are client-only, as is a function only an event handler calls. The template may name them only from event handlers, which the server drops |
 | Statements | in a `computed`'s body and in a list method's callback (`.map()`, `.filter()`, `.find()`, `.some()`, `.reduce()`, a `.toSorted()` comparator and the others): `const` and `let` of any value the template may compute, destructured too (`const { name, posts: count } = author`); `if` / `else if` / `else` and early `return`, narrowing what follows as TypeScript narrows it (`if (!user) return ""; return user.name`, `if (!a \|\| !a.title) return "-"`); `switch` over a string or a number, with stacked `case`s, `default` and `break`; assignments to the body's `let`s (`=`, `+=`, `-=`, `*=`, `++`, `--` and the others), with the type TypeScript gives them; `for (const x of list)` over a list, `list.entries()`, `Object.keys()` or `Object.entries()`, `for (const ch of text)` over a string by its characters (a character beyond U+FFFF is one), and counting loops `for (let i = 0; i < n; i++)` to an integer bound, with `break`, `continue`, nested loops and `return` inside them, carrying strings, numbers and booleans from one item to the next (`let total = 0; for (const r of rows) total += r.n;`, thousands separators, the largest of a list). Each value is evaluated once, where JavaScript evaluates it, and only on the path that reaches it. `while`, `do…while` and `for…in` loops, assignments to props, refs, `const`s, parameters and fields, `try`, `throw`, `var` and a path that ends without `return` are refused. See the crate's [`script_logic`](https://docs.rs/ferrovue/latest/ferrovue/guide/script_logic/index.html) guide |
@@ -241,6 +242,7 @@ ferrovue compiles `<script setup lang="ts">` components, and components with no
 | 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 |
+| Whitespace | text condensed as Vue condenses it, or with `"whitespace": "trim-edges"` also trimmed where it meets its element's tags, the client compiled alike with `trimEdges`: in elements, components and `<template v-slot>`, keeping `<pre>`, `<textarea>`, `v-pre` and a static `white-space: pre*` style. See [`generated_code`](https://docs.rs/ferrovue/latest/ferrovue/guide/generated_code/index.html#whitespace) |
 | 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 |
@@ -248,7 +250,7 @@ ferrovue compiles `<script setup lang="ts">` components, and components with no
 | `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`; 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 |
+| `<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) or as one (`as: "h1"`), 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 |

package/dist/attrs.d.ts

@@ -1,6 +1,7 @@
-import { type N, type Scope, type Val } from "./model.ts";
+import { type N, type Piece, type Scope, type Val } from "./model.ts";
 import { type ErrorCode } from "./errors.ts";
 import { Emitter } from "./emitter.ts";
+export declare function displayPieces(e: Emitter, pieces: Piece[]): void;
 export declare function display(e: Emitter, v: Val): boolean;
 export declare function interpolate(s: Scope, e: Emitter, v: Val, n: N): void;
 export declare function attrValue(e: Emitter, v: Val): void;

package/dist/attrs.js

@@ -6,23 +6,29 @@ import { CONFIG_FILE } from "./config.js";
 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, ifElse, not, receiver, scrutinee, strArg } from "./parens.js";
+import { asCow, isTemporary, piecesOf, unquote } from "./strings.js";
+import { atom, bare, condition, ifElse, logical, 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 branches = v.branches;
+    if (branches !== undefined && branches.of === v.code) {
+        const [yes, no] = [emptyTest(branches.yes), emptyTest(branches.no)];
+        const binds = branches.test.startsWith("let ");
+        if (yes === no && !binds)
+            return yes;
+        if (!binds && yes === "false")
+            return logical(not(branches.test), "&&", no);
+        if (!binds && no === "false")
+            return logical(branches.test, "&&", yes);
+        return `if ${branches.test} { ${yes} } else { ${no} }`;
+    }
     const pieces = piecesOf(v);
     if (pieces === undefined)
         return `${receiver(v.code)}.is_empty()`;
@@ -31,17 +37,32 @@ function emptyTest(v) {
         return "false";
     return strs.map((p) => `${receiver(p.code)}.is_empty()`).join(" && ");
 }
+export function displayPieces(e, pieces) {
+    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);
+    }
+}
 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);
-        }
+        displayPieces(e, pieces);
+        return true;
+    }
+    const branches = v.branches;
+    if (branches !== undefined && branches.of === v.code) {
+        e.open(`if ${branches.test}`);
+        display(e, branches.yes);
+        e.close(" else {");
+        const at = e.lines.length;
+        display(e, branches.no);
+        e.close();
+        if (e.lines.length === at + 1)
+            e.lines.splice(at - 1, 2, e.lines[at - 1].replace(/\} else \{$/, "}"));
         return true;
     }
     if (v.ty.k === "str" && known(v) !== undefined)

package/dist/classes.d.ts

@@ -1,9 +1,10 @@
-import { type N, type Scope } from "./model.ts";
+import { type N, type Scope, type Val } from "./model.ts";
 import { Emitter } from "./emitter.ts";
 export type ClassItem = {
     lit: string;
 } | {
     code: string;
+    join?: Val;
 };
 export declare function classItems(s: Scope, n: N): ClassItem[];
 export declare function renderClass(s: Scope, e: Emitter, n: N, after?: boolean): void;

package/dist/classes.js

@@ -3,10 +3,10 @@ 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, unquote } from "./strings.js";
+import { meet, piecesOf, 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";
+import { displayPieces, stringAttr } from "./attrs.js";
 import { fresh, jsHint } from "./names.js";
 export function classItems(s, n) {
     switch (n.type) {
@@ -79,7 +79,7 @@ export function classItems(s, n) {
     if (literal !== null && literal === literal.trim())
         return [{ lit: literal }];
     if (v.ty.k === "str")
-        return [{ code: v.code }];
+        return [piecesOf(v) === undefined ? { code: v.code } : { code: v.code, join: v }];
     if (v.ty.k === "opt" && v.ty.of.k === "str")
         return [{ code: `${atom(v.code)}.unwrap_or("")` }];
     if (nothing(v.ty))
@@ -118,10 +118,49 @@ export function renderClass(s, e, n, after = false) {
         e.lit((wrote ? " " : "") + escapeHtml(it.lit));
         wrote = true;
     }
-    if (i < items.length) {
-        const rest = items.slice(i).map((it) => ("lit" in it ? rustStr(it.lit) : it.code));
-        e.stmt(`fv::attrs::class_into(out, ${wrote}, &[${rest.join(", ")}]);`);
+    let group = [];
+    let at = null;
+    for (; i < items.length; i++) {
+        const it = items[i];
+        const parts = "join" in it && it.join !== undefined ? trimmedParts(it.join) : null;
+        if (parts === null) {
+            if (!group.length && !wrote && items.slice(i + 1).some((later) => "join" in later && later.join !== undefined)) {
+                at = fresh("at", "class");
+                e.stmt(`let ${at} = out.len();`);
+            }
+            group.push("lit" in it ? rustStr(it.lit) : it.code);
+            continue;
+        }
+        if (group.length)
+            e.stmt(`fv::attrs::class_into(out, ${wrote}, &[${group.join(", ")}]);`);
+        if (wrote)
+            e.lit(" ");
+        else if (group.length && at !== null)
+            e.stmt(`if out.len() != ${at} { out.push(' '); }`);
+        displayPieces(e, parts);
+        [group, at, wrote] = [[], null, true];
+    }
+    if (group.length)
+        e.stmt(`fv::attrs::class_into(out, ${wrote}, &[${group.join(", ")}]);`);
+}
+/** The pieces of a joined class name with the spaces `normalizeClass` trims taken off its ends,
+ * when only its first or last piece may hold them and the join writes a name: null otherwise. */
+function trimmedParts(v) {
+    const pieces = [...piecesOf(v)];
+    const solid = (p, start) => p !== undefined && (typeof p === "string" ? p !== "" && p === (start ? p.trimStart() : p.trimEnd()) : "shown" in p || p.ty.k !== "str");
+    for (const start of [true, false]) {
+        const edge = start ? 0 : pieces.length - 1;
+        const next = start ? 1 : pieces.length - 2;
+        const p = pieces[edge];
+        if (typeof p === "string")
+            pieces[edge] = start ? p.trimStart() : p.trimEnd();
+        if (solid(pieces[edge], start))
+            continue;
+        if (typeof p === "string" || "shown" in p || pieces.length < 2 || !solid(pieces[next], start))
+            return null;
+        pieces[edge] = { code: `fv::strings::js_trim_${start ? "start" : "end"}(${strArg(p.code)})`, ty: STR };
     }
+    return pieces;
 }
 const UNWRITTEN = new Set(["on", "if", "else-if", "else", "for", "slot", "once", "memo", "cloak", "pre"]);
 /** The class list of an element in content Vue renders from virtual nodes, in the order Vue's

package/dist/compiler.js

@@ -47,6 +47,7 @@ function generateAll(root, config, sources, options) {
     ctx.mappedUnions = new Map();
     ctx.builders = config.builders ?? true;
     ctx.comments = templateComments(config);
+    ctx.whitespace = config.whitespace ?? "condense";
     ctx.clientDirectives = new Set(config.clientDirectives ?? []);
     ctx.rootDir = root;
     ctx.vnodeTag = null;

package/dist/component.js

@@ -14,6 +14,7 @@ import { claim } from "./plugin.js";
 import { asyncChildren } from "./script.js";
 import { declareConsts } from "./constants.js";
 import { resolveImport } from "./resolve.js";
+import { trimEdges } from "./whitespace.js";
 function vueErrorNode(err, within) {
     const loc = err.loc;
     if (!loc)
@@ -451,7 +452,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 } : {}), comments: ctx.comments, sourceMap: true, nodeTransforms: [mergedControls(controls)] },
+        compilerOptions: { ...(script ? { bindingMetadata: script.bindings } : {}), comments: ctx.comments, sourceMap: true, nodeTransforms: [...(ctx.whitespace === "trim-edges" ? [trimEdges] : []), 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

@@ -2,9 +2,9 @@ import { absence, enumOf, fail, FLOAT, joinAbsence, joinTy, literalsOf, literalT
 import { GenError } from "./errors.js";
 import { annotatedStr, exactlyEnum, intoEnum, knownLiteral } from "./enums.js";
 import { ctx } from "./context.js";
-import { atom, bare, enclosed, occurrences, strArg } from "./parens.js";
+import { atom, bare, condition, enclosed, occurrences, strArg } from "./parens.js";
 import { collected, sliced, typedEmpty, untypedEmpty } from "./lists.js";
-import { asCow, isTemporary, loneOf } from "./strings.js";
+import { asCow, isTemporary, loneOf, piecesOf } from "./strings.js";
 import { asF64, intFromF64, isCast, isNumber } from "./numbers.js";
 import { choice, known, literalNarrowing, narrowTo, presence, truthTested, truthy } from "./narrowing.js";
 import { ownedStruct, ownedStructs } from "./objects.js";
@@ -65,7 +65,14 @@ function branches(s, n, t) {
         a = { ...a, ty: b.ty };
     if (emptyB && a.ty.k === "list")
         b = { ...b, ty: a.ty };
-    return choiceOf({ comp, n, a, b, emptyA, emptyB, choose: chooser(t, p, name, a), lone: loneOf(a, b) });
+    const [x, y] = [a, b];
+    const head = () => {
+        if (!p)
+            return { test: condition(truthy(t)), yes: x, no: y };
+        const [present, absent] = p.negated ? [y, x] : [x, y];
+        return { test: occurrences(present.code, name) ? p.pattern(name) : condition(p.present), yes: present, no: absent };
+    };
+    return choiceOf({ comp, n, a, b, emptyA, emptyB, choose: chooser(t, p, name, a), head, lone: loneOf(a, b) });
 }
 function chooser(t, p, name, a) {
     const second = (code) => (a.ty.k === "str" ? strArg(code) : bare(code));
@@ -90,7 +97,9 @@ function choiceOf(c) {
     if (owned !== null)
         return owned;
     if (sameTy(a.ty, b.ty) && a.ty.k === "str" && (isTemporary(a) || isTemporary(b))) {
-        return { code: `&*(${choose(asCow(a), asCow(b))})`, ty: STR, ...lone };
+        const code = `&*(${choose(asCow(a), asCow(b))})`;
+        const joins = (v) => piecesOf(v) !== undefined || v.branches?.of === v.code;
+        return { code, ty: STR, ...lone, ...(joins(a) || joins(b) ? { branches: { of: code, ...c.head() } } : {}) };
     }
     if (sameTy(a.ty, b.ty) && a.ty.k === "list" && a.ty.of.k !== "undef")
         return listChoice(c);

package/dist/config.d.ts

@@ -103,6 +103,11 @@ export interface Config {
      * `template.compilerOptions.comments`: by default as Vue decides it, kept when `isProduction` is
      * `false` and left out when it is `true`. */
     comments?: boolean;
+    /** How the text of templates is spaced: `"condense"` (the default) as Vue spaces it, or
+     * `"trim-edges"`, which also trims the whitespace where text meets its element's tags. The
+     * client compiles the same way with `trimEdges` from `ferrovue/whitespace` in
+     * `@vitejs/plugin-vue`'s `template.compilerOptions.nodeTransforms`. */
+    whitespace?: WhitespaceMode;
     /** 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?: {
@@ -120,6 +125,10 @@ export interface Config {
     builders?: boolean;
 }
 export type ScopeIdMode = "filepath" | "filepath-source";
+/** How the text of templates is spaced: `"condense"`, Vue's own rule, or `"trim-edges"`, which
+ * also trims text where it meets its element's tags, as `trimEdges` from `ferrovue/whitespace`
+ * does for the client. */
+export type WhitespaceMode = "condense" | "trim-edges";
 /** Where the routes come from: a JSON file of routes, or a folder of pages. */
 export type RoutesSource = string | {
     /** The folder of pages, each a component, whose file names give the routes. */

package/dist/conformance.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, { comments: templateComments(config) });
+            attachSsrRender(source, name, component, { comments: templateComments(config), whitespace: config.whitespace ?? "condense" });
     }
     const cases = casesIn(fixtures);
     const { routes, options: configured } = fixtureOptions(root, config);

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-import { type Component, type N, type Scope, type Val } from "./model.ts";
+import { type Component, type Fn, type N, type Scope, type Val } from "./model.ts";
 export type Const = {
     k: "scalar";
     js: Scalar;
@@ -25,10 +25,30 @@ type Scalar = string | number | boolean | null;
 export interface Declared {
     node: N;
     home: Component;
-    exported: boolean;
 }
 /** Remember the constants and enums a file declares at its top level, to evaluate when one is used. */
 export declare function declareConsts(home: Component, body: N[]): Map<string, Declared>;
+/** A name a `.ts` file exports: one of its own, by its local name, or one of another file's, by the
+ * name that file exports it as (`null` for a module that is no `.ts` file of the project, or for a
+ * namespace, `export * as ns from`). */
+export type Export = {
+    local: string;
+} | {
+    file: string | null;
+    name: string | null;
+};
+/** What a `.ts` file exports: its names, and the files whose names `export * from` passes on. */
+export interface Exports {
+    names: Map<string, Export>;
+    stars: (string | null)[];
+}
+/** The names a `.ts` file exports: by `export const`, `export function`, `export enum`,
+ * `export { a, b as c }`, `export default a`, and from other files by `export { a } from` and `export * from`. */
+export declare function exportsOf(rel: string, body: N[]): Exports;
+/** The constant or enum a `.ts` file exports as `name`. */
+export declare function exportedConst(file: string, name: string): Declared | undefined;
+/** The function a `.ts` file exports as `name`. */
+export declare function exportedFunction(file: string, name: string): Fn | undefined;
 /** What a declared constant or enum stands for, evaluated once. */
 export declare function constOfDecl(d: Declared): Const;
 /** The type an enum stands for: the union of its members' literal types. */

package/dist/constants.js

@@ -2,7 +2,8 @@ import { absence, blankComponent, BOOL, distinctFields, enumOf, enumTy, fail, FL
 import { GenError } from "./errors.js";
 import { aliasEnum, knownLiteral, matchOver, overVariants } from "./enums.js";
 const TYPES_HOME = blankComponent("types", "types", "types");
-import { ONE_NOTHING, reachType, tyOfTs } from "./typescript.js";
+import { ONE_NOTHING, reachType, readTypeFile, tyOfTs } from "./typescript.js";
+import { resolveImport } from "./resolve.js";
 import { ctx } from "./context.js";
 import { asF64, exactPower, numberVal } from "./numbers.js";
 import { describeTy, expr } from "./expr.js";
@@ -18,19 +19,100 @@ let enumScope = null;
 export function declareConsts(home, body) {
     const found = new Map();
     for (const st of body) {
-        const exported = st.type === "ExportNamedDeclaration";
-        const d = exported ? st.declaration : st;
+        const d = st.type === "ExportNamedDeclaration" ? st.declaration : st;
         if (d?.type === "TSEnumDeclaration")
-            found.set(d.id.name, { node: d, home, exported });
+            found.set(d.id.name, { node: d, home });
         if (d?.type === "VariableDeclaration" && d.kind === "const") {
             for (const v of d.declarations)
                 if (v.id.type === "Identifier" && v.init)
-                    found.set(v.id.name, { node: v, home, exported });
+                    found.set(v.id.name, { node: v, home });
         }
     }
     files.set(home, found);
     return found;
 }
+/** The names a `.ts` file exports: by `export const`, `export function`, `export enum`,
+ * `export { a, b as c }`, `export default a`, and from other files by `export { a } from` and `export * from`. */
+export function exportsOf(rel, body) {
+    const names = new Map();
+    const stars = [];
+    const nameOf = (n) => n.name ?? n.value;
+    for (const st of body) {
+        if (st.type === "ExportDefaultDeclaration") {
+            const d = st.declaration;
+            names.set("default", { local: d.type === "Identifier" ? d.name : "default" });
+        }
+        if (st.exportKind === "type")
+            continue;
+        if (st.type === "ExportAllDeclaration") {
+            const file = resolveImport(rel, st.source.value);
+            if (st.exported)
+                names.set(nameOf(st.exported), { file: null, name: null });
+            else
+                stars.push(file);
+        }
+        if (st.type !== "ExportNamedDeclaration")
+            continue;
+        const d = st.declaration;
+        if (d?.type === "VariableDeclaration")
+            for (const v of d.declarations)
+                if (v.id.type === "Identifier")
+                    names.set(v.id.name, { local: v.id.name });
+        if (d?.id?.type === "Identifier")
+            names.set(d.id.name, { local: d.id.name });
+        if (d)
+            continue;
+        const from = st.source ? resolveImport(rel, st.source.value) : undefined;
+        for (const sp of st.specifiers) {
+            if (sp.exportKind === "type")
+                continue;
+            const as = nameOf(sp.exported);
+            if (sp.type === "ExportNamespaceSpecifier")
+                names.set(as, { file: null, name: null });
+            else if (sp.type === "ExportSpecifier")
+                names.set(as, from === undefined ? { local: sp.local.name } : { file: from, name: nameOf(sp.local) });
+        }
+    }
+    return { names, stars };
+}
+/** The file and local name of what a `.ts` file exports as `name`, followed through `export … from`
+ * and `export * from`; `undefined` when nothing is exported by that name, or two `export *` give it. */
+function exportOrigin(file, name, seen = new Set()) {
+    const key = `${file}\0${name}`;
+    if (seen.has(key))
+        return undefined;
+    seen.add(key);
+    readTypeFile(file);
+    const exports = ctx.tsModules.get(file)?.exports;
+    const e = exports?.names.get(name);
+    if (e !== undefined) {
+        if ("local" in e)
+            return { file, local: e.local };
+        return e.file === null || e.name === null ? undefined : exportOrigin(e.file, e.name, seen);
+    }
+    if (name === "default")
+        return undefined;
+    let found;
+    for (const star of exports?.stars ?? []) {
+        const o = star === null ? undefined : exportOrigin(star, name, new Set(seen));
+        if (o === undefined)
+            continue;
+        if (found !== undefined && (found.file !== o.file || found.local !== o.local))
+            return undefined;
+        found = o;
+    }
+    return found;
+}
+/** The constant or enum a `.ts` file exports as `name`. */
+export function exportedConst(file, name) {
+    const o = exportOrigin(file, name);
+    return o === undefined ? undefined : ctx.constDecls.get(o.file)?.get(o.local);
+}
+/** The function a `.ts` file exports as `name`. */
+export function exportedFunction(file, name) {
+    const o = exportOrigin(file, name);
+    return o === undefined ? undefined : ctx.tsModules.get(o.file)?.functions.get(o.local);
+}
 /** What a declared constant or enum stands for, evaluated once. */
 export function constOfDecl(d) {
     const done = evaluated.get(d.node);

package/dist/context.d.ts

@@ -1,6 +1,6 @@
-import type { Config, TypeName } from "./config.ts";
+import type { Config, TypeName, WhitespaceMode } from "./config.ts";
 import type { Plugin } from "./plugin.ts";
-import type { Declared } from "./constants.ts";
+import type { Declared, Exports } from "./constants.ts";
 import type { Alias } from "./compiler.ts";
 import type { TsProject } from "./resolve.ts";
 import { type Component, type EnumDef, type Fn, type N, type Struct, type Ty } from "./model.ts";
@@ -33,6 +33,7 @@ export declare const ctx: {
     mappedUnions: Map<string, EnumDef>;
     builders: boolean;
     comments: boolean;
+    whitespace: WhitespaceMode;
     clientDirectives: Set<string>;
     plugins: readonly Plugin[];
     runs: Map<Plugin<unknown, unknown>, unknown>;
@@ -51,10 +52,8 @@ export declare const ctx: {
     tsModules: Map<string, {
         home: Component;
         body: N[];
-        functions: Map<string, {
-            fn: Fn;
-            exported: boolean;
-        }>;
+        functions: Map<string, Fn>;
+        exports: Exports;
     }>;
     typeConsts: Map<string, {
         of: unknown;

package/dist/context.js

@@ -102,6 +102,8 @@ export function checkConfig(raw, file, warn, schema = CONFIG_SCHEMA) {
         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.whitespace !== undefined && raw.whitespace !== "condense" && raw.whitespace !== "trim-edges")
+        wrong("whitespace", '`"condense"` or `"trim-edges"`: how the text of templates is spaced');
     if (raw.cssModules !== undefined) {
         const m = raw.cssModules;
         if (!isObject(m))
@@ -225,6 +227,7 @@ export const ctx = {
     mappedUnions: new Map(),
     builders: true,
     comments: false,
+    whitespace: "condense",
     clientDirectives: new Set(),
     plugins: [],
     runs: new Map(),

package/dist/dynamic.js

@@ -4,6 +4,7 @@ import { basename } from "node:path";
 import { camelize, directiveOwner, fail, isAttribute, literalsOf, placeOf, rustStr, templateAst } from "./model.js";
 import { GenError } from "./errors.js";
 import { ctx } from "./context.js";
+import { exportedConst } from "./constants.js";
 import { matchOver } from "./enums.js";
 import { expr } from "./expr.js";
 import { cond, known } from "./narrowing.js";
@@ -142,7 +143,7 @@ function propType(s, name) {
 }
 function fieldLiterals(ty) {
     const literals = literalsOf(ty.k === "opt" ? ty.of : ty);
-    return (ty.k === "opt" ? ty.of : ty).k === "str" && literals !== undefined && literals.length > 1 && literals.every((l) => typeof l === "string") ? literals : null;
+    return (ty.k === "opt" ? ty.of : ty).k === "str" && literals !== undefined && literals.every((l) => typeof l === "string") ? literals : null;
 }
 function keysOf(s, n, at) {
     const name = propOf(s, n);
@@ -208,8 +209,8 @@ function tableOf(s, n) {
         if (!sp)
             continue;
         const file = resolveImport(s.comp.file, st.source.value);
-        const d = file === null ? undefined : ctx.constDecls.get(file)?.get(sp.imported.name ?? sp.imported.value);
-        if (!d?.exported || d.node.type !== "VariableDeclarator")
+        const d = file === null ? undefined : exportedConst(file, sp.imported.name ?? sp.imported.value);
+        if (!d || d.node.type !== "VariableDeclarator")
             return null;
         const entries = objectEntries(d.home, name, d.node.init);
         if (!entries)

package/dist/functions.d.ts

@@ -5,10 +5,7 @@ export declare function functionOf(st: N): {
     node: N;
 } | null;
 /** The functions a `.ts` file declares at its top level, exported or not. */
-export declare function declareFunctions(home: Component, body: N[], file: string): Map<string, {
-    fn: Fn;
-    exported: boolean;
-}>;
+export declare function declareFunctions(home: Component, body: N[], file: string): Map<string, Fn>;
 /** A call of a function the server translates: its arguments evaluated in order at the call, each
  * bound once, then its body, with JavaScript's defaults for what is not passed. */
 export declare function callFunction(s: Scope, name: string, fn: Fn, args: N[], n: N): Val;