ferrovue 0.14.1 → 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.1/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:
@@ -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/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/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/context.d.ts

@@ -1,4 +1,4 @@
-import type { Config, TypeName } from "./config.ts";
+import type { Config, TypeName, WhitespaceMode } from "./config.ts";
 import type { Plugin } from "./plugin.ts";
 import type { Declared, Exports } from "./constants.ts";
 import type { Alias } from "./compiler.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>;

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

@@ -143,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);

package/dist/paths.d.ts

@@ -3,3 +3,5 @@ import * as nodePath from "node:path";
  * code, a diagnostic or a key, or compares with a configured folder such as `out`, reads the same
  * on Windows as elsewhere. `path` is Node's own, and `path.win32` in a test. */
 export declare function relativePath(from: string, to: string, path?: Pick<typeof nodePath, "relative" | "sep">): string;
+/** A path written with `/` on every platform, as Vite writes the ids and imports it reads. */
+export declare function slashed(file: string, path?: Pick<typeof nodePath, "sep">): string;

package/dist/paths.js

@@ -3,5 +3,9 @@ import * as nodePath from "node:path";
  * code, a diagnostic or a key, or compares with a configured folder such as `out`, reads the same
  * on Windows as elsewhere. `path` is Node's own, and `path.win32` in a test. */
 export function relativePath(from, to, path = nodePath) {
-    return path.relative(from, to).split(path.sep).join("/");
+    return slashed(path.relative(from, to), path);
+}
+/** A path written with `/` on every platform, as Vite writes the ids and imports it reads. */
+export function slashed(file, path = nodePath) {
+    return file.split(path.sep).join("/");
 }

package/dist/plugins/css-modules.js

@@ -1,4 +1,4 @@
-import { resolve as resolvePath, sep } from "node:path";
+import { resolve as resolvePath } from "node:path";
 import genericNames from "generic-names";
 import postcss, {} from "postcss";
 import extractImports from "postcss-modules-extract-imports";
@@ -7,6 +7,7 @@ import modulesScope from "postcss-modules-scope";
 import modulesValues from "postcss-modules-values";
 import { fail, rustStr, sourceAt, STR, UNDEF } from "../model.js";
 import { CONFIG_FILE } from "../config.js";
+import { slashed } from "../paths.js";
 import {} from "../context.js";
 import { runOf, scopeOf } from "../plugin.js";
 import { scopeHash } from "./scoped.js";
@@ -19,7 +20,7 @@ export function styleRequest(file, index, style, id) {
         if (!IGNORED_ATTRS.has(name))
             query += `&${encodeURIComponent(name)}${value ? `=${encodeURIComponent(value)}` : ""}`;
     }
-    return `${resolvePath(file).split(sep).join("/")}?vue&type=style&index=${index}${style.scoped ? `&scoped=${id}` : ""}${query}&lang.module.css`;
+    return `${slashed(resolvePath(file))}?vue&type=style&index=${index}${style.scoped ? `&scoped=${id}` : ""}${query}&lang.module.css`;
 }
 /** The classes, keyframes and values a CSS module exports, by name, as postcss-modules names them
  * with `names`. */

package/dist/plugins/scoped.js

@@ -1,17 +1,18 @@
 import { parse as parseJs } from "@babel/parser";
 import { createHash } from "node:crypto";
-import { relative, resolve as resolvePath, sep } from "node:path";
+import { resolve as resolvePath } from "node:path";
 import { fail, namesSelf, rustStr } from "../model.js";
 import {} from "../config.js";
 import { runOf } from "../plugin.js";
 import { untilSettled } from "../fallthrough.js";
+import { relativePath } from "../paths.js";
 export function scopeIdOf(comp) {
     return runOf(scoped).ids.get(comp) ?? null;
 }
 /** The id `@vitejs/plugin-vue` gives a component, `descriptor.id`: a hash of its path from Vite's
  * root, followed by its source unless `mode` hashes the path alone. */
 export function componentId(file, source, mode, viteRoot) {
-    const path = relative(viteRoot, resolvePath(file)).split(sep).join("/");
+    const path = relativePath(viteRoot, resolvePath(file));
     return createHash("sha256")
         .update(mode === "filepath" ? path : path + source)
         .digest("hex")

package/dist/schema.js

@@ -63,6 +63,7 @@ export const CONFIG_SCHEMA = {
         viteRoot: { type: "string", default: "." },
         isProduction: { type: "boolean", default: true },
         comments: { type: "boolean" },
+        whitespace: { type: "string", enum: ["condense", "trim-edges"], default: "condense" },
         cssModules: {
             type: "object",
             properties: { generateScopedName: STRING, hashPrefix: { type: "string", default: "" }, context: STRING },

package/dist/ssr.d.ts

@@ -1,9 +1,13 @@
 import type { Component } from "vue";
+import type { WhitespaceMode } from "./config.ts";
 /** How `attachSsrRender` compiles a component's template. */
 export interface SsrRenderOptions {
     /** Whether the template's HTML comments render, as `comments` in `ferrovue.config.json`
      * decides it for the generated code: `false` by default. */
     comments?: boolean;
+    /** How the template's text is spaced, as `whitespace` in `ferrovue.config.json` decides it for
+     * the generated code: `"condense"` by default. */
+    whitespace?: WhitespaceMode;
 }
 /** Give a component compiled for the browser the `ssrRender` its SSR build would have. */
 export declare function attachSsrRender(file: string, name: string, component: Component, options?: SsrRenderOptions): void;

package/dist/ssr.js

@@ -3,6 +3,7 @@ import { compileScript, compileTemplate, parse as parseSfc } from "@vue/compiler
 import { getEscapedCssVarName } from "@vue/shared";
 import * as vue from "vue";
 import * as serverRenderer from "vue/server-renderer";
+import { trimEdges } from "./whitespace.js";
 const KEY = /(?:^|[{,])\s*"((?:[^"\\]|\\.)*)"\s*:/g;
 function cssVarNames(file, component, count) {
     const text = ["setup", "ssrRender"]
@@ -43,7 +44,7 @@ export function attachSsrRender(file, name, component, options = {}) {
         ssr: true,
         ssrCssVars: descriptor.cssVars,
         isProd: true,
-        compilerOptions: { ...(script?.bindings ? { bindingMetadata: script.bindings } : {}), comments },
+        compilerOptions: { ...(script?.bindings ? { bindingMetadata: script.bindings } : {}), comments, ...(options.whitespace === "trim-edges" ? { nodeTransforms: [trimEdges] } : {}) },
     }).code.replace(/^(\s*)":--[^"]*":/gm, (_, indent) => `${indent}":--${varNames[named++]}":`);
     const body = code
         .replace(/import \{([^}]*)\} from "vue"/g, (_, names) => `const {${names.replace(/ as /g, ": ")}} = __vue;`)

package/dist/strings.js

@@ -303,7 +303,7 @@ export function regexShape(pattern, flags) {
         const start = at;
         while (/[0-9]/.test(peek() ?? ""))
             at++;
-        return at > start ? Number(pattern.slice(start, at)) : null;
+        return at > start ? Math.min(Number(pattern.slice(start, at)), 2 ** 31 - 1) : null;
     };
     const quantifier = () => {
         const c = peek();

package/dist/template.js

@@ -35,7 +35,6 @@ function heldContent(p) {
     return p.properties.find((q) => q.type !== "ObjectProperty" || q.computed || CONTENT_KEYS.has(q.key.name ?? q.key.value)) ?? null;
 }
 function directedContent(s, n) {
-    s.temps.add(n.left.name);
     const parts = mergedParts(n.right);
     const held = parts.map(heldContent).find((p) => p !== null);
     if (held === undefined)
@@ -60,10 +59,7 @@ function rootControlKnown(s, names) {
 }
 function unpassedValue(s, n) {
     const test = n?.type === "ConditionalExpression" ? n.test : null;
-    if (test?.type !== "BinaryExpression" || test.operator !== "in" || test.left.type !== "StringLiteral" || test.right.type !== "Identifier" || !(s.temps.has(test.right.name) || s.comp.rootControl !== undefined))
-        return n;
-    rootControlKnown(s, [test.left.value]);
-    return n.alternate;
+    return s.temps.has(test?.right?.name) ? n.alternate : n;
 }
 function modelAttrs(s, n) {
     const [set, merged] = n.expressions;
@@ -125,6 +121,8 @@ export function slot(s, e, n) {
                 renderDynamicAttr(s, e, a[0].value, attrShown(s, a[0].value, a[1]), n);
                 return;
             case "_ssrRenderAttrs":
+                if (a[0].type === "AssignmentExpression")
+                    s.temps.add(a[0].left.name);
                 if (a.length > 1 && !(a[1].type === "StringLiteral" && a[1].value === "textarea" && rootControlKnown(s, ["value"])))
                     fail(s.comp, "FV0006", "`ssrRenderAttrs` with a tag argument", n);
                 if (a[0].type === "SequenceExpression") {
@@ -132,9 +130,7 @@ export function slot(s, e, n) {
                     return;
                 }
                 if (a[0].type === "AssignmentExpression") {
-                    if (a.length > 1)
-                        s.temps.add(a[0].left.name);
-                    else
+                    if (a.length === 1)
                         directedContent(s, a[0]);
                     renderAttrs(s, e, a[0].right);
                     return;

package/dist/vite.js

@@ -1,5 +1,5 @@
 import { existsSync, readdirSync, readFileSync, realpathSync } from "node:fs";
-import { join, posix, resolve, sep } from "node:path";
+import { join, posix, resolve } from "node:path";
 import { write } from "./compiler.js";
 import { CONFIG_FILE, loadConfig } from "./config.js";
 import { templateComments } from "./context.js";
@@ -7,6 +7,7 @@ import {} from "./errors.js";
 import { formatRefusal, formatWarning, isRefusal } from "./diagnostics.js";
 import { allPages, fileRoutes, pagesFolder } from "./file-routes.js";
 import { affects, inputsOf, watched } from "./inputs.js";
+import { slashed } from "./paths.js";
 /** How `@vitejs/plugin-vue`, as this build configures it, computes a `<style scoped>` id: from the
  * path alone or the path and source, hashed from Vite's root; and whether it compiles for production.
  * `null` without the plugin, or with an id generator of its own. */
@@ -27,6 +28,18 @@ function vueComments(config) {
     const set = vue.api?.options?.template?.compilerOptions?.comments;
     return typeof set === "boolean" ? set : !config.isProduction;
 }
+const TRIM_EDGES = Symbol.for("ferrovue.whitespace");
+/** How `@vitejs/plugin-vue`, as this build configures it, spaces the text of templates:
+ * `"trim-edges"` when its `template.compilerOptions.nodeTransforms` holds `trimEdges`, from any
+ * copy of ferrovue. `null` without the plugin. */
+function vueWhitespace(config) {
+    const vue = config.plugins.find((p) => p.name === "vite:vue");
+    if (!vue)
+        return null;
+    const transforms = vue.api?.options?.template?.compilerOptions?.nodeTransforms;
+    const trims = Array.isArray(transforms) && transforms.some((t) => typeof t === "function" && t[TRIM_EDGES] === "trim-edges");
+    return trims ? "trim-edges" : "condense";
+}
 function componentSources(root, config) {
     let files = [];
     try {
@@ -88,6 +101,20 @@ function commentsMismatch(root, vue, configFile = CONFIG_FILE) {
     const kept = (on) => (on ? "keeps them" : "leaves them out");
     return `the HTML comments of templates: @vitejs/plugin-vue ${kept(vue)}, where ${configFile} ${kept(own)}; set \`"comments": ${vue}\` in ${configFile}`;
 }
+/** Why the server would space the text of templates otherwise than the client, when plugin-vue
+ * trims it at the edges, `vue`, where the configuration, `configFile`, keeps it, or the other way
+ * round. */
+function whitespaceMismatch(root, vue, configFile = CONFIG_FILE) {
+    if (vue === null)
+        return null;
+    const own = loadConfig(root, configFile, ignore).whitespace ?? "condense";
+    if (own === vue)
+        return null;
+    if (own === "trim-edges") {
+        return `the whitespace at the edges of templates' text: ${configFile} trims it with \`"whitespace": "trim-edges"\`, where @vitejs/plugin-vue keeps it; add \`trimEdges\` from \`ferrovue/whitespace\` to plugin-vue's \`template.compilerOptions.nodeTransforms\``;
+    }
+    return `the whitespace at the edges of templates' text: @vitejs/plugin-vue trims it with \`trimEdges\`, where ${configFile} keeps it; set \`"whitespace": "trim-edges"\` in ${configFile}`;
+}
 /** Why the class names of the server's CSS modules would differ from those Vite gives the client,
  * when a component has `<style module>` and Vite's `css`, run from `cwd`, names them otherwise than
  * `cssModules` in the configuration, `configFile`. */
@@ -126,13 +153,13 @@ const ISLANDS_ID = `\0${ISLANDS}`;
 const ROUTES = "ferrovue/routes";
 const ROUTES_ID = `\0${ROUTES}`;
 function islandsModule(root, islands) {
-    const entries = Object.entries(islands).map(([name, file]) => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(resolve(root, file).split(sep).join("/"))}),`);
+    const entries = Object.entries(islands).map(([name, file]) => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(slashed(resolve(root, file)))}),`);
     return `export default {\n${entries.join("\n")}\n};\n`;
 }
 function routesTree(root, routes, indent, lazy) {
     return routes
         .map((r) => {
-        const page = r.file ? `() => import(${JSON.stringify(resolve(root, r.file).split(sep).join("/"))})` : null;
+        const page = r.file ? `() => import(${JSON.stringify(slashed(resolve(root, r.file)))})` : null;
         const fields = [
             `path: ${JSON.stringify(r.path)}`,
             ...(r.name !== undefined ? [`name: ${JSON.stringify(r.name)}`] : []),
@@ -212,6 +239,7 @@ export default function ferrovue(options = {}) {
     };
     let vue = null;
     let comments = null;
+    let whitespace = null;
     let aliases = [];
     let css;
     let building = true;
@@ -239,6 +267,7 @@ export default function ferrovue(options = {}) {
             readsImportedTypes(config);
             vue = vueScopeIds(config);
             comments = vueComments(config);
+            whitespace = vueWhitespace(config);
             aliases = config.resolve.alias;
             css = config.css;
             building = config.command === "build";
@@ -246,7 +275,10 @@ export default function ferrovue(options = {}) {
         buildStart() {
             try {
                 regenerate((w) => this.warn(formatWarning(w)));
-                const mismatch = scopeIdMismatch(root, vue, configFile) ?? cssModulesMismatch(root, css, process.cwd(), configFile) ?? (building ? commentsMismatch(root, comments, configFile) : null);
+                const mismatch = scopeIdMismatch(root, vue, configFile) ??
+                    cssModulesMismatch(root, css, process.cwd(), configFile) ??
+                    whitespaceMismatch(root, whitespace, configFile) ??
+                    (building ? commentsMismatch(root, comments, configFile) : null);
                 if (mismatch && building)
                     this.error(`ferrovue: ${mismatch}`);
                 if (mismatch)

package/dist/whitespace.d.ts

@@ -0,0 +1,7 @@
+/** A node transform for `@vitejs/plugin-vue`'s `template.compilerOptions.nodeTransforms` that
+ * trims the whitespace at the start and end of an element's text, where it meets the element's
+ * tags, as `"whitespace": "trim-edges"` makes ferrovue's Rust render it. It trims the content of
+ * elements, components and `<template v-slot>`, and leaves `<pre>`, `<textarea>`, `v-pre` and an
+ * element whose `style` sets `white-space: pre`, `pre-wrap`, `pre-line` or `break-spaces` as they
+ * are, with everything inside them. */
+export declare function trimEdges(node: object): void;

package/dist/whitespace.js

@@ -0,0 +1,58 @@
+const ROOT = 0;
+const ELEMENT = 1;
+const TEXT = 2;
+const PLAIN = 0;
+const COMPONENT = 1;
+const TEMPLATE = 3;
+const LEADING = /^[ \t\n\f\r]+/;
+const TRAILING = /[ \t\n\f\r]+$/;
+const KEPT_TAGS = new Set(["pre", "textarea"]);
+const PRE_STYLE = /(?:^|;)\s*white-space\s*:\s*(?:pre|pre-wrap|pre-line|break-spaces)\s*(?:!important\s*)?(?:;|$)/i;
+const OPEN_TAG = /^<[^\s/>]+(?:[^"'>]|"[^"]*"|'[^']*')*/;
+const QUOTED = /"[^"]*"|'[^']*'/g;
+const V_PRE = /\sv-pre(?=[\s/=]|$)/;
+const MARK = Symbol.for("ferrovue.whitespace");
+function keeps(el) {
+    if (KEPT_TAGS.has(el.tag.toLowerCase()))
+        return true;
+    if (el.props.some((p) => p.type === 6 && p.name === "style" && p.value !== undefined && PRE_STYLE.test(p.value.content)))
+        return true;
+    const open = OPEN_TAG.exec(el.loc.source)?.[0] ?? "";
+    return V_PRE.test(open.replace(QUOTED, '""'));
+}
+function trims(el) {
+    if (el.tagType === PLAIN || el.tagType === COMPONENT)
+        return true;
+    return el.tagType === TEMPLATE && el.props.some((p) => p.type === 7 && p.name === "slot");
+}
+function trimChildren(el) {
+    const children = el.children;
+    const first = children[0];
+    if (first?.type === TEXT)
+        first.content = first.content.replace(LEADING, "");
+    const last = children.at(-1);
+    if (last?.type === TEXT)
+        last.content = last.content.replace(TRAILING, "");
+    el.children = children.filter((c) => c.type !== TEXT || c.content !== "");
+}
+function walk(node) {
+    for (const child of node.children ?? []) {
+        if (child.type !== ELEMENT || keeps(child))
+            continue;
+        if (trims(child))
+            trimChildren(child);
+        walk(child);
+    }
+}
+/** A node transform for `@vitejs/plugin-vue`'s `template.compilerOptions.nodeTransforms` that
+ * trims the whitespace at the start and end of an element's text, where it meets the element's
+ * tags, as `"whitespace": "trim-edges"` makes ferrovue's Rust render it. It trims the content of
+ * elements, components and `<template v-slot>`, and leaves `<pre>`, `<textarea>`, `v-pre` and an
+ * element whose `style` sets `white-space: pre`, `pre-wrap`, `pre-line` or `break-spaces` as they
+ * are, with everything inside them. */
+export function trimEdges(node) {
+    const n = node;
+    if (n.type === ROOT)
+        walk(n);
+}
+Object.defineProperty(trimEdges, MARK, { value: "trim-edges" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferrovue",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Vue templates compiled to Rust render functions: server-side rendering with no JavaScript at run time",
   "license": "MIT OR Apache-2.0",
   "repository": {
@@ -85,6 +85,10 @@
       "types": "./dist/vite.d.ts",
       "default": "./dist/vite.js"
     },
+    "./whitespace": {
+      "types": "./dist/whitespace.d.ts",
+      "default": "./dist/whitespace.js"
+    },
     "./volar": {
       "types": "./dist/volar.d.ts",
       "default": "./dist/volar.js"
@@ -96,8 +100,8 @@
     "ferrovue": "./dist/cli.js"
   },
   "dependencies": {
-    "@babel/parser": "^7.29.9",
-    "@intlify/message-compiler": "11.4.16",
+    "@babel/parser": "^7.29.11",
+    "@intlify/message-compiler": "11.4.18",
     "@vue/compiler-sfc": "3.5.44",
     "@vue/shared": "3.5.44",
     "generic-names": "^4.0.0",
@@ -114,14 +118,14 @@
     "@vue/language-service": "3.3.13",
     "@vue/server-renderer": "3.5.44",
     "pinia": "^4.1.0",
-    "playwright": "1.64.1",
+    "playwright": "1.65.0",
     "typescript": "^7.0.2",
     "typescript-js": "npm:typescript@6.0.3",
-    "vite": "^8.3.5",
-    "vitest": "^5.0.5",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0",
     "vscode-uri": "3.2.0",
     "vue": "3.5.44",
-    "vue-i18n": "11.4.16",
+    "vue-i18n": "11.4.18",
     "vue-router": "^5.4.0"
   },
   "peerDependencies": {

package/schema.json

@@ -310,6 +310,16 @@
       "markdownDescription": "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`.",
       "type": "boolean"
     },
+    "whitespace": {
+      "description": "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`.",
+      "markdownDescription": "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`.",
+      "type": "string",
+      "enum": [
+        "condense",
+        "trim-edges"
+      ],
+      "default": "condense"
+    },
     "cssModules": {
       "description": "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.",
       "markdownDescription": "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.",