ferrovue 0.2.0 → 0.3.0

package/dist/template.js

@@ -1,11 +1,13 @@
 /* The compiled template's statements: pushes, conditions, lists, child components and slots. */
-import { fail, GenError, INT, rustStr, sameTy, snake, STR } from "./model.js";
+import { camelize, declares, fail, GenError, INT, rustStr, sameTy, snake, STR, takesAttrs } from "./model.js";
 import { ctx } from "./context.js";
 import { markHome } from "./typescript.js";
 import { asF64, boolOf, cond, expr, fieldVal, isObjectCall, known, narrowTo, presence, truthy } from "./expr.js";
 import { atom, bare, CMP, condition, occurrences, operand, OR, strArg, UNARY } from "./parens.js";
 import { Emitter } from "./emitter.js";
-import { IGNORED_PROPS, interpolate, renderAttr, renderAttrs, renderClass, renderDynamicAttr, renderStyle } from "./attrs.js";
+import { attrOf, dollarAttrs, IGNORED_PROPS, interpolate, isAttrs, mergedParts, renderAttr, renderAttrs, renderClass, renderDynamicAttr, renderStyle } from "./attrs.js";
+import { passedKey } from "./scoped.js";
+import { isSSRSafeAttrName, propsToAttrMap } from "@vue/shared";
 import { routerLink } from "./router.js";
 import { rustTy } from "./rust.js";
 /** One `${...}` inside a pushed template literal. */
@@ -26,7 +28,7 @@ export function slot(s, e, n) {
             case "_ssrRenderAttr":
                 if (a[0].type !== "StringLiteral")
                     fail(s.comp, "attribute names are literal", n);
-                renderAttr(e, a[0].value, expr(s, a[1]));
+                renderAttr(s, e, a[0].value, expr(s, a[1]), a[1]);
                 return;
             // `:hidden`, whose rendering depends on the value's type: Vue cannot decide it at compile time.
             case "_ssrRenderDynamicAttr":
@@ -87,24 +89,51 @@ export function isComment(text) {
         return false;
     return text.length <= 8 || !text.replace(/<!--[^]*?-->/gm, "").trim();
 }
-/** Whether a `_push` argument is content to `ssrRenderSlot`, rather than only comments. */
-export function pushesContent(s, n) {
+/** Whether a `_push` argument is content to `ssrRenderSlot` rather than only comments — `"run"`
+ * when that depends on the values it interpolates (`${of1}<!--[-->` is a comment when `of1` writes
+ * nothing). Vue asks it of each pushed string, so the generated code asks `fv::is_comment` of what
+ * that push wrote. */
+export function pushesContent(n) {
     if (n.type === "StringLiteral")
         return !isComment(n.value);
     if (n.type === "TemplateLiteral") {
+        const quasis = n.quasis.map((q) => q.value.cooked);
         if (n.expressions.length === 0)
-            return !isComment(n.quasis[0].value.cooked);
-        if (n.quasis[0].value.cooked.startsWith("<!--")) {
-            fail(s.comp, "slot content that starts with a comment holding an interpolation", n);
-        }
-        return true;
+            return !isComment(quasis[0]);
+        // A comment starts with `<!--` and ends with `-->`: literal text that cannot decides it now.
+        const first = quasis[0];
+        const last = quasis.at(-1);
+        if (!"<!--".startsWith(first) && !first.startsWith("<!--"))
+            return true;
+        if (!"-->".endsWith(last) && !last.endsWith("-->"))
+            return true;
+        /* An interpolated value is escaped, so it writes no `<` or `>`: every comment starts and ends in
+         * the literal text — unless a value is raw (`v-html`), or a marker could be split across text
+         * and a value. Then literal text left over once the comments are taken out is content, whatever
+         * the values write. */
+        const raw = n.expressions.some((x) => x.type !== "CallExpression" && !(x.type === "Identifier" && x.name === "_scopeId"));
+        const split = quasis.some((q, i) => (i > 0 && /^(?:-|--|!--|->|>)/.test(q)) || (i < quasis.length - 1 && /(?:<|<!|<!-|-|--)$/.test(q)));
+        if (!raw && !split && /\S/.test(quasis.join("\0").replace(/<!--[^]*?-->/g, "").replaceAll("\0", "")))
+            return true;
+        return "run";
     }
     // A component's render is a buffer, never a comment.
     return true;
 }
 export function push(s, e, n) {
-    if (s.fill && pushesContent(s, n))
+    const content = s.fill ? pushesContent(n) : false;
+    if (content === true)
         e.stmt("filled = true;");
+    if (content !== "run") {
+        pushed(s, e, n);
+        return;
+    }
+    e.stmt("let fv_chunk = out.len();");
+    pushed(s, e, n);
+    e.stmt("filled |= !fv::is_comment(&out[fv_chunk..]);");
+}
+/** What one `_push` writes. */
+function pushed(s, e, n) {
     const text = n.type === "StringLiteral" ? n.value : n.type === "TemplateLiteral" && !n.expressions.length ? n.quasis[0].value.cooked : null;
     if (s.vnode && text === "<!---->") {
         e.lit("<!--v-if-->");
@@ -165,9 +194,6 @@ function childAttrs(s, child, passesAttrs, inSlot, n) {
 }
 export function renderChild(s, e, n) {
     const [target, rawProps, slots, , slotScopeId] = n.arguments;
-    // The parent's `_attrs`, which it passes on to a child that is its root.
-    const isAttrs = (a) => a?.type === "Identifier" && a.name === "_attrs";
-    const passesAttrs = isAttrs(rawProps) || (rawProps?.type === "CallExpression" && rawProps.arguments.some(isAttrs));
     let local = null;
     if (target.type === "MemberExpression" && target.object.name === "$setup") {
         local = target.computed ? target.property.value : target.property.name;
@@ -175,56 +201,67 @@ export function renderChild(s, e, n) {
     const isSelf = target.type === "Identifier" && target.name === s.selfAlias.name;
     const childName = isSelf ? s.comp.name : local ? s.children.get(local) : undefined;
     const child = childName ? s.components.get(childName) : undefined;
-    // Inside a `v-for`, Vue merges a `{ ref_for: true }` marker into the props; it renders nothing.
-    let props = rawProps;
-    if (props?.type === "CallExpression" && props.callee.type === "Identifier" && props.callee.name === "_mergeProps" &&
-        props.arguments.length === 2 && props.arguments[0].type === "ObjectExpression" &&
-        props.arguments[0].properties.every((p) => p.type === "ObjectProperty" && IGNORED_PROPS.has(p.key.name ?? p.key.value))) {
-        props = props.arguments[1];
-    }
-    // A component at the root of the template is handed the fallthrough attributes, which an island
-    // never has.
-    if (props?.type === "CallExpression" && props.callee.type === "Identifier" && props.callee.name === "_mergeProps" &&
-        props.arguments.length === 2 && props.arguments[1].type === "Identifier" && props.arguments[1].name === "_attrs") {
-        props = props.arguments[0];
-    }
-    // A child given no props at all: Vue passes `null`, or the empty fallthrough attributes.
-    if ((props?.type === "Identifier" && props.name === "_attrs") || props?.type === "NullLiteral" || !props) {
-        props = { type: "ObjectExpression", properties: [] };
-    }
     if (!child)
         fail(s.comp, "a child component must be an imported island", n);
     if (child.routerView) {
         fail(s.comp, `${child.name} holds \`<RouterView>\`: the server renders it at the top, never as a child`, n);
     }
+    // What the props merge: object literals — a `{ ref_for: true }` marker inside a `v-for` among
+    // them, which renders nothing — the parent's `_attrs` when the child is its root, and `$attrs`.
+    const parts = !rawProps || rawProps.type === "NullLiteral" ? [] : mergedParts(rawProps);
+    const merges = parts.length > 0 && parts[0] !== rawProps;
+    const passesAttrs = parts.some(isAttrs);
+    const passed = (p) => s.fallthrough !== null && ((isAttrs(p) && s.comp.inheritAttrs) || dollarAttrs(s, p));
+    const marker = (p) => p.type === "ObjectExpression" && p.properties.length > 0 && p.properties.every((q) => q.type === "ObjectProperty" && IGNORED_PROPS.has(q.key.name ?? q.key.value));
+    const objects = parts.filter((p) => !isAttrs(p) && !dollarAttrs(s, p) && !marker(p));
+    // Attributes this component is passed reach the child's props too, where a prop would take them.
+    if (parts.some(passed)) {
+        for (const name of s.comp.attrNames) {
+            if (declares(child, name)) {
+                fail(s.comp, `\`${name}\`, an attribute ${s.comp.name} may be passed, would reach ${child.name} as its prop \`${camelize(name)}\`, which an attribute has no type for`, n);
+            }
+        }
+    }
+    const ids = childAttrs(s, child, passesAttrs, !!slotScopeId, n);
     // `v-bind="x"`, where `x` is exactly the child's own `Props`: handed over as it is.
-    if (props.type !== "ObjectExpression") {
-        const v = expr(s, props);
+    if (objects.length === 1 && objects[0].type !== "ObjectExpression") {
+        const v = expr(s, objects[0]);
         // The component itself, however the template reached it: its own `Props` struct is the type.
         const own = child.name === s.comp.name && v.ty.k === "struct" && v.ty.name === "Props";
         if (own || (v.ty.k === "child" && v.ty.name === child.name)) {
-            callChild(s, e, child, v.code, slots, childAttrs(s, child, passesAttrs, !!slotScopeId, n));
+            callChild(s, e, child, v.code, slots, childAttrsArg(s, child, parts, merges, null, ids));
             return;
         }
         fail(s.comp, `child props must be an object literal, or \`v-bind\` of ${child.name}'s own \`Props\``, n);
     }
+    for (const p of objects) {
+        if (p.type !== "ObjectExpression")
+            fail(s.comp, `child props must be an object literal, or \`v-bind\` of ${child.name}'s own \`Props\``, p);
+    }
     const given = new Map();
-    for (const p of props.properties) {
-        if (p.type !== "ObjectProperty" || p.computed)
-            fail(s.comp, "child props hold plain keys", p);
-        const key = p.key.type === "Identifier" ? p.key.name : p.key.value;
-        // Listeners, `v-model`'s `onUpdate:…` among them, run on the client alone; a model's modifiers
-        // change only what an update writes.
-        if (IGNORED_PROPS.has(key) || /^on[^a-z]/.test(key))
-            continue;
-        if (key.endsWith("Modifiers") && child.props.fields.some((f) => f.js === (key === "modelModifiers" ? "modelValue" : key.slice(0, -"Modifiers".length))))
-            continue;
-        if (!child.props.fields.some((f) => f.js === key)) {
-            // A key the child does not declare would fall through onto its root element as an
-            // attribute, which the generated child does not render.
-            fail(s.comp, `\`${key}\` is not a prop of ${child.name}`, p);
+    // Keys the child does not declare are attributes, which fall through to its root.
+    const fallthrough = new Set();
+    for (const obj of objects) {
+        for (const p of obj.properties) {
+            if (p.type !== "ObjectProperty" || p.computed)
+                fail(s.comp, "child props hold plain keys", p);
+            const key = p.key.type === "Identifier" ? p.key.name : String(p.key.value);
+            // Listeners, `v-model`'s `onUpdate:…` among them, run on the client alone; a model's modifiers
+            // change only what an update writes.
+            if (!passedKey(child, key))
+                continue;
+            const field = child.props.fields.find((f) => camelize(f.js) === camelize(key));
+            if (field) {
+                given.set(field.js, p.value);
+                continue;
+            }
+            if (array(key))
+                fail(s.comp, `an attribute named \`${key}\`, which JavaScript would put before the others`, p);
+            const name = propsToAttrMap[key] ?? key.toLowerCase();
+            if (key !== "class" && key !== "style" && !isSSRSafeAttrName(name))
+                fail(s.comp, `unsafe attribute name \`${name}\``, p);
+            fallthrough.add(p);
         }
-        given.set(key, p.value);
     }
     const inits = child.props.fields.map((f) => {
         const node = given.get(f.js);
@@ -238,7 +275,42 @@ export function renderChild(s, e, n) {
         const v = expr(s, node);
         return fieldInit(f.rust, ownInto(s.comp, { ...v, ty: markHome(v.ty, s.comp.name) }, markHome(f.ty, child.name), node));
     });
-    callChild(s, e, child, `&super::${child.module}::Props { ${inits.join(", ")} }`, slots, childAttrs(s, child, passesAttrs, !!slotScopeId, n));
+    callChild(s, e, child, `&super::${child.module}::Props { ${inits.join(", ")} }`, slots, childAttrsArg(s, child, parts, merges, fallthrough, ids));
+}
+/** Whether a name is an array index, which a JavaScript object lists before its other keys. */
+function array(key) {
+    return /^(0|[1-9]\d*)$/.test(key) && Number(key) < 2 ** 32 - 1;
+}
+/** The last argument of a child's `render_scoped`: for a child a parent may pass attributes, the
+ * `fv::Attrs` this call passes — the keys of its props objects it does not declare, and what this
+ * component was passed, merged in their order — with the scope ids; for any other, the ids. */
+function childAttrsArg(s, child, parts, merges, fallthrough, ids) {
+    const sources = [];
+    for (const p of parts) {
+        if (s.fallthrough !== null && ((isAttrs(p) && s.comp.inheritAttrs) || dollarAttrs(s, p))) {
+            sources.push(`${s.fallthrough}.list()`);
+        }
+        else if (p.type === "ObjectExpression" && fallthrough !== null) {
+            const entries = p.properties.filter((q) => fallthrough.has(q)).map((q) => {
+                const key = q.key.type === "Identifier" ? q.key.name : String(q.key.value);
+                return `(${rustStr(key)}, ${attrOf(s, key, q.value, "vnode")})`;
+            });
+            if (entries.length)
+                sources.push(`&[${entries.join(", ")}]`);
+        }
+    }
+    if (!takesAttrs(child)) {
+        if (sources.length)
+            throw new GenError(`${s.comp.file}: ${child.name} is passed attributes it does not take`);
+        return ids;
+    }
+    if (!sources.length)
+        return ids === null ? "&fv::Attrs::NONE" : `&fv::Attrs::scoped(${ids})`;
+    // One object literal, or `_attrs` or `$attrs` alone, is the child's as it is: only `_mergeProps`
+    // normalises what it merges, even one object.
+    if (sources.length === 1 && !merges)
+        return `&fv::Attrs::new(${sources[0]}, ${ids ?? '""'})`;
+    return `&fv::Attrs::merged(&[${sources.join(", ")}], ${ids ?? '""'})`;
 }
 /** `name: value` in a struct literal, or the name alone when the value is a variable of that name. */
 export function fieldInit(name, value) {
@@ -262,8 +334,8 @@ export function extraParams(c) {
         (c.usesTeleports ? ", fv_teleports: &fv::Teleports" : ""));
 }
 /** `render(out, props[, slots][, route])` for a child, with the slot content this template gives
- * it as closures; `render_scoped`, with the scope ids its root is handed last, for a child that may
- * be handed some. */
+ * it as closures; `render_scoped`, with the scope ids its root is handed last — and the attributes
+ * it is passed, as `fv::Attrs` — for a child that may be handed some. */
 export function callChild(s, e, child, propsCode, slots, attrs) {
     const given = new Map();
     if (slots && slots.type !== "NullLiteral") {
@@ -281,9 +353,10 @@ export function callChild(s, e, child, propsCode, slots, attrs) {
         }
     }
     const m = `super::${child.module}`;
+    const scoped = child.inherits || takesAttrs(child);
     const route = (child.usesRoute ? ", fv_route" : "") + (child.usesStores ? ", fv_stores" : "") + (child.usesI18n ? ", fv_i18n" : "") + (child.usesTeleports ? ", fv_teleports" : "") +
-        (child.inherits ? `, ${attrs ?? '""'}` : "");
-    const render = child.inherits ? "render_scoped" : "render";
+        (scoped ? `, ${attrs ?? (takesAttrs(child) ? "&fv::Attrs::NONE" : '""')}` : "");
+    const render = scoped ? "render_scoped" : "render";
     if (!takesSlots(child)) {
         e.stmt(`${m}::${render}(out, ${propsCode}${route});`);
         return;
@@ -304,7 +377,7 @@ export function callChild(s, e, child, propsCode, slots, attrs) {
         const sidParam = sid === null ? "" : `, ${sid}: &str`;
         /** The content's statements, then whether it pushed anything but comments. */
         const content = (inner) => {
-            if (staticallyFilled(inner, body)) {
+            if (staticallyFilled(body)) {
                 statements({ ...inner, fill: false }, e, body);
                 e.stmt("true");
             }
@@ -356,7 +429,7 @@ export function callChild(s, e, child, propsCode, slots, attrs) {
             unread(opened, sid);
             e.close(")),");
         }
-        else if (staticallyFilled(inner, body)) {
+        else if (staticallyFilled(body)) {
             e.open(`${field}: Some(fv::Slot::new(&|out: &mut String|`);
             statements({ ...inner, fill: false }, e, body);
             e.close(")),");
@@ -393,10 +466,10 @@ export function slotContent(s, value) {
 }
 /** Whether slot content always pushes something that is not a comment: a push of content outside
  * any `if` or loop. Then nothing has to be decided at run time. */
-export function staticallyFilled(s, body) {
+export function staticallyFilled(body) {
     return body.some((st) => st.type === "ExpressionStatement" && st.expression.type === "CallExpression" &&
         st.expression.callee.type === "Identifier" && st.expression.callee.name === "_push" &&
-        pushesContent(s, st.expression.arguments[0]));
+        pushesContent(st.expression.arguments[0]) === true);
 }
 /** `RowSlotProps`, `RowSlot`: the names of a scoped slot's props struct and content type. */
 export function slotTypeName(slotName, suffix) {

package/dist/vite.js

@@ -6,7 +6,10 @@
  * A build regenerates them once and fails on a construct ferrovue refuses, naming the line in the
  * `.vue` file. The dev server regenerates them whenever a component, store, type file, the routes
  * or the configuration changes, and shows a refusal in its error overlay. Only files whose text
- * changed are rewritten, so `cargo watch` rebuilds no more than it must. */
+ * changed are rewritten, so `cargo watch` rebuilds no more than it must.
+ *
+ * It also writes `ferrovue/islands`: every component that has an `island()`, by name, each a lazy
+ * `import()` of its `.vue` file, for `mountIslands`. */
 import { readdirSync, readFileSync } from "node:fs";
 import { join, relative, resolve, sep } from "node:path";
 import { CONFIG_FILE, GenError, loadConfig, write } from "./compiler.js";
@@ -60,13 +63,45 @@ export function scopeIdMismatch(root, vue) {
         return null;
     return `\`<style scoped>\` ids: @vitejs/plugin-vue hashes "${vue.mode}" from ${vue.root}, ${CONFIG_FILE} "${mode}" from ${viteRoot}; set \`scopeId\` and \`viteRoot\` to match, or plugin-vue's \`features.componentIdGenerator\``;
 }
+/** The import that names the islands, and the id the plugin gives the module it writes for it. */
+const ISLANDS = "ferrovue/islands";
+const ISLANDS_ID = `\0${ISLANDS}`;
+/** The text of `ferrovue/islands`: each island's name, mapped to an `import()` of its `.vue` file,
+ * which the bundler splits into a chunk of its own. */
+function islandsModule(root, islands) {
+    const entries = Object.entries(islands).map(([name, file]) => `  ${JSON.stringify(name)}: () => import(${JSON.stringify(resolve(root, file).split(sep).join("/"))}),`);
+    return `export default {\n${entries.join("\n")}\n};\n`;
+}
 export default function ferrovue(options = {}) {
     const root = resolve(options.root ?? process.cwd());
-    const regenerate = () => write(root, loadConfig(root));
+    // The islands as the last generation found them, for `ferrovue/islands`.
+    let islands = null;
+    const regenerate = () => {
+        const written = write(root, loadConfig(root));
+        islands = written.islands;
+        return written;
+    };
     let vue = null;
     let building = true;
     return {
         name: "ferrovue",
+        // Before Vite's own resolver, which would find `ferrovue/islands` in the package instead.
+        enforce: "pre",
+        resolveId(id) {
+            return id === ISLANDS ? ISLANDS_ID : null;
+        },
+        load(id) {
+            if (id !== ISLANDS_ID)
+                return null;
+            try {
+                return islandsModule(root, islands ?? regenerate().islands);
+            }
+            catch (e) {
+                if (e instanceof GenError || e instanceof SyntaxError)
+                    this.error(e.message);
+                throw e;
+            }
+        },
         configResolved(config) {
             vue = vueScopeIds(config);
             building = config.command === "build";
@@ -94,10 +129,18 @@ export default function ferrovue(options = {}) {
                 if (!affects(root, file))
                     return;
                 try {
+                    const before = JSON.stringify(islands);
                     const { changed, removed } = regenerate();
                     if (changed.length || removed.length) {
                         server.config.logger.info(`ferrovue: ${changed.length} changed, ${removed.length} removed`, { timestamp: true });
                     }
+                    // A component that became an island, or stopped being one: the page loads the islands
+                    // afresh, as the server now writes them.
+                    const loaded = server.moduleGraph.getModuleById(ISLANDS_ID);
+                    if (loaded && JSON.stringify(islands) !== before) {
+                        server.moduleGraph.invalidateModule(loaded);
+                        server.ws.send({ type: "full-reload" });
+                    }
                 }
                 catch (e) {
                     if (!(e instanceof GenError || e instanceof SyntaxError))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferrovue",
-  "version": "0.2.0",
+  "version": "0.3.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": {
@@ -44,6 +44,10 @@
       "types": "./dist/client.d.ts",
       "default": "./dist/client.js"
     },
+    "./islands": {
+      "types": "./dist/islands.d.ts",
+      "default": "./dist/islands.js"
+    },
     "./vite": {
       "types": "./dist/vite.d.ts",
       "default": "./dist/vite.js"