ferrovue 0.15.0 → 0.15.2

package/README.md

@@ -57,7 +57,7 @@ the configuration at your project root yourself:
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/ferrovue@0.15.0/schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/ferrovue@0.15.2/schema.json",
   "components": "client/components",
   "out": "src/generated"
 }
@@ -242,7 +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) |
+| Whitespace | text condensed as Vue condenses it, or with `"whitespace": "trim-edges"` also trimmed where it meets a block or inline-block element's tags across a line break and spaced between inline elements and components across one, 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 |

package/dist/config.d.ts

@@ -104,9 +104,11 @@ export interface Config {
      * `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`. */
+     * `"trim-edges"`, which also trims the whitespace holding a line break where text meets a block
+     * or inline-block element's tags and renders a line break between two inline elements as a
+     * space. 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. */

package/dist/whitespace.d.ts

@@ -1,7 +1,11 @@
 /** 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. */
+ * trims the whitespace at the start and end of a block or inline-block element's text, where it
+ * meets the element's tags, when that whitespace holds a line break, as `"whitespace": "trim-edges"`
+ * makes ferrovue's Rust render it. An inline element's edges keep Vue's one space, and a space
+ * typed on the same line as the tag stays. A line break between two inline elements, components,
+ * `<slot>`s or `<template>`s, such as `<span>` and `<a>`, renders as one space, as a formatter
+ * reads it, also at the template's root and across a comment.
+ * It trims the content of block and inline-block 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

@@ -1,16 +1,31 @@
 const ROOT = 0;
 const ELEMENT = 1;
 const TEXT = 2;
+const COMMENT = 3;
 const PLAIN = 0;
 const COMPONENT = 1;
+const SLOT = 2;
 const TEMPLATE = 3;
 const LEADING = /^[ \t\n\f\r]+/;
 const TRAILING = /[ \t\n\f\r]+$/;
+const LINE_BREAK = /[\n\r]/;
+const BLANK = /^[ \t\n\f\r]+$/;
+const HTML = 0;
+const SPACELESS_TAGS = new Set([
+    "address article aside blockquote body br caption center col colgroup dd details dialog dir div dl dt fieldset figcaption figure footer form",
+    "h1 h2 h3 h4 h5 h6 head header hgroup hr html legend li link listing main menu meta nav noscript ol optgroup option p param plaintext pre",
+    "script search section source style summary table tbody td template tfoot th thead title tr track ul xmp area base basefont datalist noembed noframes rp",
+]
+    .join(" ")
+    .split(" "));
+const INLINE_BLOCK_TAGS = new Set(["audio", "button", "meter", "object", "progress", "select", "video"]);
+const COMMENTS = /<!--[\s\S]*?(?:-->|$)/g;
 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 PLACELESS_COMPONENTS = new Set(["teleport", "keepalive", "suspense", "transition", "transitiongroup", "clientonly"]);
 const MARK = Symbol.for("ferrovue.whitespace");
 function keeps(el) {
     if (KEPT_TAGS.has(el.tag.toLowerCase()))
@@ -21,38 +36,88 @@ function keeps(el) {
     return V_PRE.test(open.replace(QUOTED, '""'));
 }
 function trims(el) {
-    if (el.tagType === PLAIN || el.tagType === COMPONENT)
+    if (el.tagType === PLAIN) {
+        const tag = el.tag.toLowerCase();
+        return el.ns !== HTML || SPACELESS_TAGS.has(tag) || INLINE_BLOCK_TAGS.has(tag);
+    }
+    if (el.tagType === COMPONENT)
         return true;
     return el.tagType === TEMPLATE && el.props.some((p) => p.type === 7 && p.name === "slot");
 }
+function breaks(text, edge) {
+    return LINE_BREAK.test(edge.exec(text.loc.source)?.[0] ?? "");
+}
 function trimChildren(el) {
     const children = el.children;
     const first = children[0];
-    if (first?.type === TEXT)
+    if (first?.type === TEXT && breaks(first, LEADING))
         first.content = first.content.replace(LEADING, "");
     const last = children.at(-1);
-    if (last?.type === TEXT)
+    if (last?.type === TEXT && breaks(last, TRAILING))
         last.content = last.content.replace(TRAILING, "");
     el.children = children.filter((c) => c.type !== TEXT || c.content !== "");
 }
+function inline(node) {
+    if (node.type !== ELEMENT)
+        return false;
+    if (node.tagType === COMPONENT)
+        return !PLACELESS_COMPONENTS.has(node.tag.replaceAll("-", "").toLowerCase());
+    if (node.tagType === SLOT)
+        return true;
+    if (node.tagType === TEMPLATE)
+        return !node.props.some((p) => p.type === 7 && p.name === "slot");
+    if (node.tagType !== PLAIN)
+        return false;
+    const tag = node.tag.toLowerCase();
+    return (node.ns === HTML || tag === "svg" || tag === "math") && !SPACELESS_TAGS.has(tag);
+}
+function spaceInline(node, source, start) {
+    const children = node.children;
+    const spaced = [];
+    let prev;
+    let after = 0;
+    children.forEach((child) => {
+        if (child.type === COMMENT) {
+            spaced.push(child);
+            return;
+        }
+        if (prev !== undefined && inline(prev) && inline(child)) {
+            const gap = source.slice(prev.loc.end.offset - start, child.loc.start.offset - start).replace(COMMENTS, "");
+            if (BLANK.test(gap) && LINE_BREAK.test(gap))
+                spaced.splice(after, 0, { type: TEXT, content: " ", loc: { source: gap, start: prev.loc.end, end: child.loc.start } });
+        }
+        spaced.push(child);
+        prev = child;
+        after = spaced.length;
+    });
+    node.children = spaced;
+}
 function walk(node) {
     for (const child of node.children ?? []) {
         if (child.type !== ELEMENT || keeps(child))
             continue;
         if (trims(child))
             trimChildren(child);
+        if (child.ns === HTML)
+            spaceInline(child, child.loc.source, child.loc.start.offset);
         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. */
+ * trims the whitespace at the start and end of a block or inline-block element's text, where it
+ * meets the element's tags, when that whitespace holds a line break, as `"whitespace": "trim-edges"`
+ * makes ferrovue's Rust render it. An inline element's edges keep Vue's one space, and a space
+ * typed on the same line as the tag stays. A line break between two inline elements, components,
+ * `<slot>`s or `<template>`s, such as `<span>` and `<a>`, renders as one space, as a formatter
+ * reads it, also at the template's root and across a comment.
+ * It trims the content of block and inline-block 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);
+    if (n.type !== ROOT)
+        return;
+    spaceInline(n, n.source ?? n.loc.source, n.source === undefined ? n.loc.start.offset : 0);
+    walk(n);
 }
 Object.defineProperty(trimEdges, MARK, { value: "trim-edges" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferrovue",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Vue templates compiled to Rust render functions: server-side rendering with no JavaScript at run time",
   "license": "MIT OR Apache-2.0",
   "repository": {

package/schema.json

@@ -311,8 +311,8 @@
       "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`.",
+      "description": "How the text of templates is spaced: `\"condense\"` (the default) as Vue spaces it, or `\"trim-edges\"`, which also trims the whitespace holding a line break where text meets a block or inline-block element's tags and renders a line break between two inline elements as a space. 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 holding a line break where text meets a block or inline-block element's tags and renders a line break between two inline elements as a space. The client compiles the same way with `trimEdges` from `ferrovue/whitespace` in `@vitejs/plugin-vue`'s `template.compilerOptions.nodeTransforms`.",
       "type": "string",
       "enum": [
         "condense",