@vmz/core 0.3.4 → 0.3.6

package/README.md

@@ -1,50 +1,50 @@
-# @vmz/core
-
-The browser should not have to rediscover an application's structure after every click. Yet that is the default cost of
-many UI systems: execute components again, compare a virtual tree, and infer which DOM work might be necessary.
-
-`@vmz/core` is the production runtime behind VMZ's alternative. It executes the creation, patch, SSR, resumption, HTTP,
-and lifetime schedules produced by the compiler. When VMZ can prove that a write affects one text binding, one control
-region, or one keyed item, the runtime can update that target directly rather than begin from a whole component tree.
-
-The same idea continues beyond a single browser update. SSR serializes planned regions; resumption attaches only
-reachable state and event entries instead of repeating completed server work; ownership regions give async tasks and
-resources a deterministic end; server and HTTP output stay tied to compiler-visible capabilities.
-
-| Instead of...                      | VMZ runtime work begins from...                       |
-|------------------------------------|-------------------------------------------------------|
-| Re-running a component tree        | A known affected binding or region                    |
-| Reconciling a generic virtual tree | Direct create, patch, switch, or keyed-list work      |
-| Hydrating every rendered component | The event and state entries that are actually reached |
-| Hoping cleanup follows callbacks   | A compiler-known ownership and disposal boundary      |
-
-For application authors, this mostly stays out of sight: write VMZ source and let the compiler generate the plan.
-`@vmz/core` matters when you care about the kind of runtime your product ships: small in responsibility, direct in
-execution, and able to account for why its work exists. 🌱
-
-## The hot path VMZ is aiming for
-
-```text
-state write
-  -> known dependency edge
-  -> affected computation or region
-  -> direct patch / switch / reconcile
-```
-
-There is no default detour through “execute every component that might matter, build virtual nodes, then compare them.”
-If analysis must widen, it widens to a safe region and should preserve the reason.
-
-## More than DOM updates
-
-- **Transactions:** related writes can settle before dependent work runs.
-- **Ownership:** branches, list items, resources, and tasks have a known lifetime.
-- **Cancellation:** an obsolete navigation or async generation cannot write into new state.
-- **Resumption:** the browser attaches to server-produced work at the smallest reachable boundary.
-- **Zero-JS delivery:** pages with no interactive requirement do not need an eager framework shell.
-
-The runtime should not grow a second compiler made of reflection, string dependencies, or generic proxies. Its quality
-comes from faithfully executing the generated plan while keeping the production surface focused.
-
-## License
-
-MIT
+# @vmz/core
+
+The browser should not have to rediscover an application's structure after every click. Yet that is the default cost of
+many UI systems: execute components again, compare a virtual tree, and infer which DOM work might be necessary.
+
+`@vmz/core` is the production runtime behind VMZ's alternative. It executes the creation, patch, SSR, resumption, HTTP,
+and lifetime schedules produced by the compiler. When VMZ can prove that a write affects one text binding, one control
+region, or one keyed item, the runtime can update that target directly rather than begin from a whole component tree.
+
+The same idea continues beyond a single browser update. SSR serializes planned regions; resumption attaches only
+reachable state and event entries instead of repeating completed server work; ownership regions give async tasks and
+resources a deterministic end; server and HTTP output stay tied to compiler-visible capabilities.
+
+| Instead of...                      | VMZ runtime work begins from...                       |
+|------------------------------------|-------------------------------------------------------|
+| Re-running a component tree        | A known affected binding or region                    |
+| Reconciling a generic virtual tree | Direct create, patch, switch, or keyed-list work      |
+| Hydrating every rendered component | The event and state entries that are actually reached |
+| Hoping cleanup follows callbacks   | A compiler-known ownership and disposal boundary      |
+
+For application authors, this mostly stays out of sight: write VMZ source and let the compiler generate the plan.
+`@vmz/core` matters when you care about the kind of runtime your product ships: small in responsibility, direct in
+execution, and able to account for why its work exists. 🌱
+
+## The hot path VMZ is aiming for
+
+```text
+state write
+  -> known dependency edge
+  -> affected computation or region
+  -> direct patch / switch / reconcile
+```
+
+There is no default detour through “execute every component that might matter, build virtual nodes, then compare them.”
+If analysis must widen, it widens to a safe region and should preserve the reason.
+
+## More than DOM updates
+
+- **Transactions:** related writes can settle before dependent work runs.
+- **Ownership:** branches, list items, resources, and tasks have a known lifetime.
+- **Cancellation:** an obsolete navigation or async generation cannot write into new state.
+- **Resumption:** the browser attaches to server-produced work at the smallest reachable boundary.
+- **Zero-JS delivery:** pages with no interactive requirement do not need an eager framework shell.
+
+The runtime should not grow a second compiler made of reflection, string dependencies, or generic proxies. Its quality
+comes from faithfully executing the generated plan while keeping the production surface focused.
+
+## License
+
+MIT

package/dist/faces/server.js

@@ -605,32 +605,32 @@ function wantsBrowserHtml(req) {
 function browserErrorHtml(status, title, message, stack) {
     const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
     const stackBlock = stack ? `<pre class="stack">${esc(stack)}</pre>` : '';
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${esc(title)}</title>
-  <style>
-    body{margin:0;background:#0f1115;color:#f4f4f5;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
-    main{max-width:56rem;margin:0 auto;padding:2rem 1.25rem}
-    h1{margin:0 0 .75rem;color:#f87171;font-size:1.1rem}
-    .code{opacity:.65;font-size:12px;margin-bottom:.75rem}
-    pre{white-space:pre-wrap;margin:0 0 1rem}
-    .stack{opacity:.7;font-size:12px}
-    .hint{opacity:.65;font-size:12px}
-  </style>
-</head>
-<body data-vmz-error="${status}">
-  <main>
-    <p class="code">HTTP ${status}</p>
-    <h1>${esc(title)}</h1>
-    <pre>${esc(message)}</pre>
-    ${stackBlock}
-    <p class="hint">Document navigation returns HTML errors — not API JSON.</p>
-  </main>
-</body>
-</html>
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${esc(title)}</title>
+  <style>
+    body{margin:0;background:#0f1115;color:#f4f4f5;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+    main{max-width:56rem;margin:0 auto;padding:2rem 1.25rem}
+    h1{margin:0 0 .75rem;color:#f87171;font-size:1.1rem}
+    .code{opacity:.65;font-size:12px;margin-bottom:.75rem}
+    pre{white-space:pre-wrap;margin:0 0 1rem}
+    .stack{opacity:.7;font-size:12px}
+    .hint{opacity:.65;font-size:12px}
+  </style>
+</head>
+<body data-vmz-error="${status}">
+  <main>
+    <p class="code">HTTP ${status}</p>
+    <h1>${esc(title)}</h1>
+    <pre>${esc(message)}</pre>
+    ${stackBlock}
+    <p class="hint">Document navigation returns HTML errors — not API JSON.</p>
+  </main>
+</body>
+</html>
 `;
 }
 function sendJson(res, status, body) {

package/dist/host/serve/hmr-dev.js

@@ -87,29 +87,29 @@ export function normalizeDevError(err) {
 export async function* emitDevErrorHtml(err) {
     const msg = escapeHtml(err.message || 'Unknown error');
     const stack = err.stack ? escapeHtml(err.stack) : '';
-    const style = `<style>
-    body{margin:0;background:#0f1115;color:#f4f4f5;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
-    main{max-width:56rem;margin:0 auto;padding:2rem 1.25rem}
-    h1{margin:0 0 .75rem;color:#f87171;font-size:1.1rem}
-    pre{white-space:pre-wrap;margin:0 0 1rem}
-    .hint{opacity:.65;font-size:12px}
+    const style = `<style>
+    body{margin:0;background:#0f1115;color:#f4f4f5;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+    main{max-width:56rem;margin:0 auto;padding:2rem 1.25rem}
+    h1{margin:0 0 .75rem;color:#f87171;font-size:1.1rem}
+    pre{white-space:pre-wrap;margin:0 0 1rem}
+    .hint{opacity:.65;font-size:12px}
   </style>`;
-    const body = `${style}
-  <main data-vmz-error="500">
-    <h1>Dev Error</h1>
-    <pre>${msg}</pre>
-    ${stack ? `<pre style="opacity:.7;font-size:12px">${stack}</pre>` : ''}
-    <p class="hint">Dev host stayed up. Fix the source and save — soft reload will recover.</p>
-  </main>
-  <script>
-  (() => {
-    const es = new EventSource("/__vmz/events");
-    es.onmessage = (ev) => {
-      let msg = null;
-      try { msg = JSON.parse(ev.data); } catch {}
-      if (msg && msg.type === "hmr") location.reload();
-    };
-  })();
+    const body = `${style}
+  <main data-vmz-error="500">
+    <h1>Dev Error</h1>
+    <pre>${msg}</pre>
+    ${stack ? `<pre style="opacity:.7;font-size:12px">${stack}</pre>` : ''}
+    <p class="hint">Dev host stayed up. Fix the source and save — soft reload will recover.</p>
+  </main>
+  <script>
+  (() => {
+    const es = new EventSource("/__vmz/events");
+    es.onmessage = (ev) => {
+      let msg = null;
+      try { msg = JSON.parse(ev.data); } catch {}
+      if (msg && msg.type === "hmr") location.reload();
+    };
+  })();
   </script>`;
     try {
         const native = loadNativeAddon();

package/dist/host/serve/page-render.js

@@ -240,79 +240,79 @@ function resolvePageDocumentMeta(Page) {
 async function* emitPageHtml(Page, chunkId, eventOnlyShell, props = {}, opts = {}, layoutChain = [], localeCtx = {}) {
     const signal = opts.signal;
     const live = serveState.isDev
-        ? `\n  <script>
-  (() => {
-    const es = new EventSource("/__vmz/events");
-    let sawDisconnect = false;
-    es.onerror = () => { sawDisconnect = true; };
-    es.onopen = () => {
-      if (sawDisconnect) location.reload();
-    };
-    function showOverlay(err) {
-      let el = document.getElementById("vmz-dev-overlay");
-      if (!el) {
-        el = document.createElement("div");
-        el.id = "vmz-dev-overlay";
-        el.setAttribute("role", "alert");
-        Object.assign(el.style, {
-          position: "fixed", inset: "0", zIndex: "2147483646",
-          background: "rgba(15,17,21,0.92)", color: "#f4f4f5",
-          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-          padding: "2rem", overflow: "auto",
-        });
-        document.documentElement.appendChild(el);
-      }
-      const msg = (err && err.message) || String(err || "Unknown error");
-      const stack = (err && err.stack) || "";
-      const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));
-      el.innerHTML = "<div style=\\"max-width:56rem;margin:0 auto\\">"
-        + "<p style=\\"margin:0 0 .5rem;color:#f87171;font-weight:700\\">Dev Error</p>"
-        + "<pre style=\\"white-space:pre-wrap;margin:0 0 1rem;font-size:13px;line-height:1.45\\">" + esc(msg) + "</pre>"
-        + (stack ? "<pre style=\\"white-space:pre-wrap;opacity:.7;font-size:12px\\">" + esc(stack) + "</pre>" : "")
-        + "<p style=\\"opacity:.65;font-size:12px\\">Fix the file and save — soft reload will clear this overlay.</p>"
-        + "</div>";
-    }
-    function hideOverlay() {
-      const el = document.getElementById("vmz-dev-overlay");
-      if (el) el.remove();
-    }
-    es.onmessage = async (ev) => {
-      let msg = null;
-      try { msg = JSON.parse(ev.data); } catch { /* plain string */ }
-      if (msg && msg.type === "error") {
-        showOverlay(msg);
-        return;
-      }
-      if (!msg || msg.type !== "hmr") {
-        if (ev.data === "reload") location.reload();
-        return;
-      }
-      hideOverlay();
-      if (msg.mode === "island") {
-        try {
-          const { hydrate } = await import("/dom.browser.js?t=" + msg.token);
-          const root = document.getElementById("app");
-          const pageChunk = root && root.getAttribute("data-vmz-page");
-          if (root && pageChunk) {
-            const pageMod = await import("/" + pageChunk + ".client.js?t=" + msg.token);
-            let hmrProps = {};
-            try {
-              const raw = root.getAttribute("data-vmz-props");
-              if (raw) hmrProps = JSON.parse(raw);
-            } catch { /* ignore */ }
-            await hydrate(pageMod.default, root, hmrProps, { preserveState: true, skipOnMount: true });
-          } else {
-            location.reload();
-          }
-        } catch (err) {
-          console.error("vmz island HMR failed", err);
-          showOverlay({ message: String(err && err.message || err), stack: err && err.stack });
-        }
-        return;
-      }
-      location.reload();
-    };
-  })();
+        ? `\n  <script>
+  (() => {
+    const es = new EventSource("/__vmz/events");
+    let sawDisconnect = false;
+    es.onerror = () => { sawDisconnect = true; };
+    es.onopen = () => {
+      if (sawDisconnect) location.reload();
+    };
+    function showOverlay(err) {
+      let el = document.getElementById("vmz-dev-overlay");
+      if (!el) {
+        el = document.createElement("div");
+        el.id = "vmz-dev-overlay";
+        el.setAttribute("role", "alert");
+        Object.assign(el.style, {
+          position: "fixed", inset: "0", zIndex: "2147483646",
+          background: "rgba(15,17,21,0.92)", color: "#f4f4f5",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+          padding: "2rem", overflow: "auto",
+        });
+        document.documentElement.appendChild(el);
+      }
+      const msg = (err && err.message) || String(err || "Unknown error");
+      const stack = (err && err.stack) || "";
+      const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;"}[c]));
+      el.innerHTML = "<div style=\\"max-width:56rem;margin:0 auto\\">"
+        + "<p style=\\"margin:0 0 .5rem;color:#f87171;font-weight:700\\">Dev Error</p>"
+        + "<pre style=\\"white-space:pre-wrap;margin:0 0 1rem;font-size:13px;line-height:1.45\\">" + esc(msg) + "</pre>"
+        + (stack ? "<pre style=\\"white-space:pre-wrap;opacity:.7;font-size:12px\\">" + esc(stack) + "</pre>" : "")
+        + "<p style=\\"opacity:.65;font-size:12px\\">Fix the file and save — soft reload will clear this overlay.</p>"
+        + "</div>";
+    }
+    function hideOverlay() {
+      const el = document.getElementById("vmz-dev-overlay");
+      if (el) el.remove();
+    }
+    es.onmessage = async (ev) => {
+      let msg = null;
+      try { msg = JSON.parse(ev.data); } catch { /* plain string */ }
+      if (msg && msg.type === "error") {
+        showOverlay(msg);
+        return;
+      }
+      if (!msg || msg.type !== "hmr") {
+        if (ev.data === "reload") location.reload();
+        return;
+      }
+      hideOverlay();
+      if (msg.mode === "island") {
+        try {
+          const { hydrate } = await import("/dom.browser.js?t=" + msg.token);
+          const root = document.getElementById("app");
+          const pageChunk = root && root.getAttribute("data-vmz-page");
+          if (root && pageChunk) {
+            const pageMod = await import("/" + pageChunk + ".client.js?t=" + msg.token);
+            let hmrProps = {};
+            try {
+              const raw = root.getAttribute("data-vmz-props");
+              if (raw) hmrProps = JSON.parse(raw);
+            } catch { /* ignore */ }
+            await hydrate(pageMod.default, root, hmrProps, { preserveState: true, skipOnMount: true });
+          } else {
+            location.reload();
+          }
+        } catch (err) {
+          console.error("vmz island HMR failed", err);
+          showOverlay({ message: String(err && err.message || err), stack: err && err.stack });
+        }
+        return;
+      }
+      location.reload();
+    };
+  })();
   </script>`
         : '';
     const bootOverlay = serveState.isDev && serveState.lastDevError

package/dist/ssr/serialize.js

@@ -36,6 +36,26 @@ export async function runDirectSerializeTreeWithMounts(Component, inst) {
     }
     throw new Error('vmz:dom SSR child onMount expansion exceeded 32 rounds');
 }
+/** HTML void elements never take a closing tag; `</br>` is parsed as another `<br>`. */
+const VOID_TAGS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);
+function isVoidTag(tag) {
+    return VOID_TAGS.has(String(tag).toLowerCase());
+}
 function serializeOpenTag(node) {
     const tag = node.tag || 'div';
     let attrs = '';
@@ -75,10 +95,10 @@ export function flattenSerializeNode(node) {
             return String(node.__rawHtml);
         const { open } = serializeOpenTag(node);
         if (node.__rawHtml != null) {
-            return `${open}${String(node.__rawHtml)}</${tag}>`;
+            return isVoidTag(tag) ? `${open}${String(node.__rawHtml)}` : `${open}${String(node.__rawHtml)}</${tag}>`;
         }
         const inner = (node.children || []).map(flattenSerializeNode).join('');
-        return `${open}${inner}</${tag}>`;
+        return isVoidTag(tag) ? `${open}${inner}` : `${open}${inner}</${tag}>`;
     }
     return '';
 }
@@ -128,7 +148,8 @@ export function* streamSerializeChunks(node) {
             for (const c of node.children || [])
                 yield* streamSerializeChunks(c);
         }
-        yield `</${tag}>`;
+        if (!isVoidTag(tag))
+            yield `</${tag}>`;
     }
 }
 function fillRowKernelHtml(rk, item, key) {

package/package.json

@@ -68,12 +68,12 @@
   "main": "./dist/faces/server.js",
   "name": "@vmz/core",
   "optionalDependencies": {
-    "@vmz/vmz-darwin-arm64": "0.3.4",
-    "@vmz/vmz-darwin-x64": "0.3.4",
-    "@vmz/vmz-linux-arm64": "0.3.4",
-    "@vmz/vmz-linux-x64": "0.3.4",
-    "@vmz/vmz-win32-arm64": "0.3.4",
-    "@vmz/vmz-win32-x64": "0.3.4"
+    "@vmz/vmz-darwin-arm64": "0.3.6",
+    "@vmz/vmz-darwin-x64": "0.3.6",
+    "@vmz/vmz-linux-arm64": "0.3.6",
+    "@vmz/vmz-linux-x64": "0.3.6",
+    "@vmz/vmz-win32-arm64": "0.3.6",
+    "@vmz/vmz-win32-x64": "0.3.6"
   },
   "publishConfig": {
     "access": "public"
@@ -88,5 +88,5 @@
   },
   "type": "module",
   "types": "./dist/faces/index.d.ts",
-  "version": "0.3.4"
+  "version": "0.3.6"
 }