ferrovue 0.7.0 → 0.7.1

package/dist/client-render.d.ts

@@ -6,6 +6,10 @@ import { type App, type Plugin } from "vue";
  * `<input>`'s `value` and `checked`, a `<textarea>`'s `value`, an `<option>`'s `selected`) by its
  * property, which Vue's client sets where the server writes the attribute. */
 export declare function renderedShape(container: Element): string;
+/** `renderedShape` of markup as the browser parsed it, untouched since: an `<option>`'s state is
+ * the selection the HTML parser gives it, from the `selected` attributes (the last one in a single
+ * `<select>`, or its first enabled option without one), which happy-dom's property misreports. */
+export declare function parsedShape(container: Element): string;
 /** A plugin that takes what the app is mounted on, and its `renderedShape` as `mount` returns,
  * before any update an `onMounted` hook scheduled has run. */
 export declare function shapeAtMount(): {

package/dist/client-render.js

@@ -3,7 +3,29 @@ import { Fragment, Static } from "vue";
 import { settled, stillLoading } from "./settle.js";
 const escapeText = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 const STATE_ATTRS = { INPUT: ["value", "checked"], TEXTAREA: ["value"], OPTION: ["selected"] };
-function element(el, scratch) {
+function selectOf(option) {
+    const parent = option.parentElement;
+    const select = parent?.tagName === "OPTGROUP" ? parent.parentElement : parent;
+    return select?.tagName === "SELECT" ? select : null;
+}
+function optionsOf(select) {
+    return [...select.children].flatMap((child) => (child.tagName === "OPTION" ? [child] : child.tagName === "OPTGROUP" ? [...child.children].filter((c) => c.tagName === "OPTION") : []));
+}
+function parsedSelected(option) {
+    const select = selectOf(option);
+    if (!select || select.hasAttribute("multiple") || Number(select.getAttribute("size")) > 1)
+        return option.hasAttribute("selected");
+    const options = optionsOf(select);
+    const disabled = (o) => o.hasAttribute("disabled") || (o.parentElement?.tagName === "OPTGROUP" && o.parentElement.hasAttribute("disabled"));
+    const chosen = options.findLast((o) => o.hasAttribute("selected")) ?? options.find((o) => !disabled(o));
+    return option === chosen;
+}
+function stateOf(el, name, parsed) {
+    if (parsed && el.tagName === "OPTION")
+        return parsedSelected(el);
+    return el[name];
+}
+function element(el, scratch, parsed) {
     const state = STATE_ATTRS[el.tagName] ?? [];
     const attrs = el
         .getAttributeNames()
@@ -17,8 +39,8 @@ function element(el, scratch) {
     if (style)
         attrs.push(` style=${JSON.stringify(style)}`);
     for (const name of state)
-        attrs.push(` .${name}=${JSON.stringify(el[name])}`);
-    const children = el.tagName === "TEXTAREA" ? "" : nodes(el.childNodes, scratch);
+        attrs.push(` .${name}=${JSON.stringify(stateOf(el, name, parsed))}`);
+    const children = el.tagName === "TEXTAREA" ? "" : nodes(el.childNodes, scratch, parsed);
     return `<${el.localName}${attrs.join("")}>${children}</${el.localName}>`;
 }
 function styleShape(text, scratch) {
@@ -33,7 +55,7 @@ function styleShape(text, scratch) {
     }
     return [...own, ...custom.toSorted()].join(" ");
 }
-function nodes(list, scratch) {
+function nodes(list, scratch, parsed) {
     let out = "";
     let text = "";
     for (const node of list) {
@@ -43,7 +65,7 @@ function nodes(list, scratch) {
         }
         if (node.nodeType !== 1)
             continue;
-        out += escapeText(text) + element(node, scratch);
+        out += escapeText(text) + element(node, scratch, parsed);
         text = "";
     }
     return out + escapeText(text);
@@ -55,7 +77,13 @@ function nodes(list, scratch) {
  * `<input>`'s `value` and `checked`, a `<textarea>`'s `value`, an `<option>`'s `selected`) by its
  * property, which Vue's client sets where the server writes the attribute. */
 export function renderedShape(container) {
-    return nodes(container.childNodes, container.ownerDocument.createElement("div"));
+    return nodes(container.childNodes, container.ownerDocument.createElement("div"), false);
+}
+/** `renderedShape` of markup as the browser parsed it, untouched since: an `<option>`'s state is
+ * the selection the HTML parser gives it, from the `selected` attributes (the last one in a single
+ * `<select>`, or its first enabled option without one), which happy-dom's property misreports. */
+export function parsedShape(container) {
+    return nodes(container.childNodes, container.ownerDocument.createElement("div"), true);
 }
 /** A plugin that takes what the app is mounted on, and its `renderedShape` as `mount` returns,
  * before any update an `onMounted` hook scheduled has run. */

package/dist/conformance.js

@@ -8,7 +8,7 @@ import { allPages, fileRoutes, pagesFolder, routeEntries } from "./file-routes.j
 import { fixtureApp, peer, readFixture } from "./fixture.js";
 import { headRendered, settled } from "./settle.js";
 import { attachSsrRender } from "./ssr.js";
-import { applyCssVars, renderDifference, renderedShape } from "./client-render.js";
+import { applyCssVars, parsedShape, renderDifference, renderedShape } from "./client-render.js";
 export const TELEPORTS = "<!--fv-teleports-->";
 export const HEAD = "<!--fv-head-->";
 /** The head a recorded render wrote after its body, if it wrote one. */
@@ -204,7 +204,7 @@ export async function clientRenderDifference(app, html) {
         throw new Error("rendering a fixture on the client needs a DOM: run the suite with `environment: \"happy-dom\"` (or jsdom)");
     document.body.innerHTML = hydrationBody(html);
     const root = document.getElementById("root");
-    const expected = renderedShape(root);
+    const expected = parsedShape(root);
     root.replaceChildren();
     app.config.warnHandler = () => { };
     const { warn } = console;

package/dist/hydration.js

@@ -1,5 +1,5 @@
 import { mountPage, readPage, renderPage } from "./client.js";
-import { renderDifference, renderedShape, shapeAtMount } from "./client-render.js";
+import { parsedShape, renderDifference, shapeAtMount } from "./client-render.js";
 import { settled } from "./settle.js";
 function recordScript(id, record) {
     const json = JSON.stringify(record).replace(/[<>&\u2028\u2029]/g, (ch) => `\\u${ch.charCodeAt(0).toString(16).padStart(4, "0")}`);
@@ -96,7 +96,7 @@ export async function renderRecordedPage(page, layout, components, options = {})
     const container = typeof selector === "string" ? doc.querySelector(selector) : selector;
     if (!container)
         throw new Error(`the recorded page has no ${selector}`);
-    const expected = renderedShape(container);
+    const expected = parsedShape(container);
     const problems = [];
     const watch = {
         install(app) {

package/package.json

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