@pyreon/compiler 0.14.0 → 0.15.0

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"106fae60-1","name":"jsx.ts"},{"uid":"106fae60-3","name":"project-scanner.ts"},{"uid":"106fae60-5","name":"react-intercept.ts"},{"uid":"106fae60-7","name":"pyreon-intercept.ts"},{"uid":"106fae60-9","name":"test-audit.ts"},{"uid":"106fae60-11","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"106fae60-1":{"renderedLength":42528,"gzipLength":10166,"brotliLength":0,"metaUid":"106fae60-0"},"106fae60-3":{"renderedLength":4762,"gzipLength":1730,"brotliLength":0,"metaUid":"106fae60-2"},"106fae60-5":{"renderedLength":27698,"gzipLength":6923,"brotliLength":0,"metaUid":"106fae60-4"},"106fae60-7":{"renderedLength":12664,"gzipLength":4204,"brotliLength":0,"metaUid":"106fae60-6"},"106fae60-9":{"renderedLength":13163,"gzipLength":5058,"brotliLength":0,"metaUid":"106fae60-8"},"106fae60-11":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"106fae60-10"}},"nodeMetas":{"106fae60-0":{"id":"/src/jsx.ts","moduleParts":{"index.js":"106fae60-1"},"imported":[{"uid":"106fae60-12"},{"uid":"106fae60-13"},{"uid":"106fae60-14"},{"uid":"106fae60-15"}],"importedBy":[{"uid":"106fae60-10"}]},"106fae60-2":{"id":"/src/project-scanner.ts","moduleParts":{"index.js":"106fae60-3"},"imported":[{"uid":"106fae60-16"},{"uid":"106fae60-15"}],"importedBy":[{"uid":"106fae60-10"}]},"106fae60-4":{"id":"/src/react-intercept.ts","moduleParts":{"index.js":"106fae60-5"},"imported":[{"uid":"106fae60-17"}],"importedBy":[{"uid":"106fae60-10"}]},"106fae60-6":{"id":"/src/pyreon-intercept.ts","moduleParts":{"index.js":"106fae60-7"},"imported":[{"uid":"106fae60-17"}],"importedBy":[{"uid":"106fae60-10"}]},"106fae60-8":{"id":"/src/test-audit.ts","moduleParts":{"index.js":"106fae60-9"},"imported":[{"uid":"106fae60-16"},{"uid":"106fae60-15"}],"importedBy":[{"uid":"106fae60-10"}]},"106fae60-10":{"id":"/src/index.ts","moduleParts":{"index.js":"106fae60-11"},"imported":[{"uid":"106fae60-0"},{"uid":"106fae60-2"},{"uid":"106fae60-4"},{"uid":"106fae60-6"},{"uid":"106fae60-8"}],"importedBy":[],"isEntry":true},"106fae60-12":{"id":"oxc-parser","moduleParts":{},"imported":[],"importedBy":[{"uid":"106fae60-0"}]},"106fae60-13":{"id":"node:module","moduleParts":{},"imported":[],"importedBy":[{"uid":"106fae60-0"}]},"106fae60-14":{"id":"node:url","moduleParts":{},"imported":[],"importedBy":[{"uid":"106fae60-0"}]},"106fae60-15":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"106fae60-0"},{"uid":"106fae60-2"},{"uid":"106fae60-8"}]},"106fae60-16":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"106fae60-2"},{"uid":"106fae60-8"}]},"106fae60-17":{"id":"typescript","moduleParts":{},"imported":[],"importedBy":[{"uid":"106fae60-4"},{"uid":"106fae60-6"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"7624ee76-1","name":"event-names.ts"},{"uid":"7624ee76-3","name":"jsx.ts"},{"uid":"7624ee76-5","name":"project-scanner.ts"},{"uid":"7624ee76-7","name":"react-intercept.ts"},{"uid":"7624ee76-9","name":"pyreon-intercept.ts"},{"uid":"7624ee76-11","name":"test-audit.ts"},{"uid":"7624ee76-13","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"7624ee76-1":{"renderedLength":2941,"gzipLength":1335,"brotliLength":0,"metaUid":"7624ee76-0"},"7624ee76-3":{"renderedLength":43854,"gzipLength":10520,"brotliLength":0,"metaUid":"7624ee76-2"},"7624ee76-5":{"renderedLength":4762,"gzipLength":1730,"brotliLength":0,"metaUid":"7624ee76-4"},"7624ee76-7":{"renderedLength":27698,"gzipLength":6923,"brotliLength":0,"metaUid":"7624ee76-6"},"7624ee76-9":{"renderedLength":20090,"gzipLength":6573,"brotliLength":0,"metaUid":"7624ee76-8"},"7624ee76-11":{"renderedLength":13163,"gzipLength":5058,"brotliLength":0,"metaUid":"7624ee76-10"},"7624ee76-13":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"7624ee76-12"}},"nodeMetas":{"7624ee76-0":{"id":"/src/event-names.ts","moduleParts":{"index.js":"7624ee76-1"},"imported":[],"importedBy":[{"uid":"7624ee76-2"}]},"7624ee76-2":{"id":"/src/jsx.ts","moduleParts":{"index.js":"7624ee76-3"},"imported":[{"uid":"7624ee76-14"},{"uid":"7624ee76-15"},{"uid":"7624ee76-16"},{"uid":"7624ee76-17"},{"uid":"7624ee76-0"}],"importedBy":[{"uid":"7624ee76-12"}]},"7624ee76-4":{"id":"/src/project-scanner.ts","moduleParts":{"index.js":"7624ee76-5"},"imported":[{"uid":"7624ee76-18"},{"uid":"7624ee76-17"}],"importedBy":[{"uid":"7624ee76-12"}]},"7624ee76-6":{"id":"/src/react-intercept.ts","moduleParts":{"index.js":"7624ee76-7"},"imported":[{"uid":"7624ee76-19"}],"importedBy":[{"uid":"7624ee76-12"}]},"7624ee76-8":{"id":"/src/pyreon-intercept.ts","moduleParts":{"index.js":"7624ee76-9"},"imported":[{"uid":"7624ee76-19"}],"importedBy":[{"uid":"7624ee76-12"}]},"7624ee76-10":{"id":"/src/test-audit.ts","moduleParts":{"index.js":"7624ee76-11"},"imported":[{"uid":"7624ee76-18"},{"uid":"7624ee76-17"}],"importedBy":[{"uid":"7624ee76-12"}]},"7624ee76-12":{"id":"/src/index.ts","moduleParts":{"index.js":"7624ee76-13"},"imported":[{"uid":"7624ee76-2"},{"uid":"7624ee76-4"},{"uid":"7624ee76-6"},{"uid":"7624ee76-8"},{"uid":"7624ee76-10"}],"importedBy":[],"isEntry":true},"7624ee76-14":{"id":"oxc-parser","moduleParts":{},"imported":[],"importedBy":[{"uid":"7624ee76-2"}]},"7624ee76-15":{"id":"node:module","moduleParts":{},"imported":[],"importedBy":[{"uid":"7624ee76-2"}]},"7624ee76-16":{"id":"node:url","moduleParts":{},"imported":[],"importedBy":[{"uid":"7624ee76-2"}]},"7624ee76-17":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"7624ee76-2"},{"uid":"7624ee76-4"},{"uid":"7624ee76-10"}]},"7624ee76-18":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"7624ee76-4"},{"uid":"7624ee76-10"}]},"7624ee76-19":{"id":"typescript","moduleParts":{},"imported":[],"importedBy":[{"uid":"7624ee76-6"},{"uid":"7624ee76-8"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -7,6 +7,56 @@ import * as fs from "node:fs";
 import { readFileSync, readdirSync, statSync } from "node:fs";
 import ts from "typescript";
 
+//#region src/event-names.ts
+/**
+* React-style → DOM event-name remap.
+*
+* The compiler translates JSX event handler attributes (`onClick`,
+* `onMouseEnter`, ...) to DOM event names by stripping the `on` prefix
+* and lowercasing. That rule covers MOST React event-name conventions
+* because the underlying DOM event name happens to be the lowercased
+* multi-word form (e.g. `onKeyDown` → `keydown`, `onMouseEnter` →
+* `mouseenter`, `onPointerLeave` → `pointerleave`,
+* `onAnimationStart` → `animationstart`, `onContextMenu` → `contextmenu`).
+*
+* **The exceptions** — where lowercasing produces the WRONG DOM event
+* name — are listed in `REACT_EVENT_REMAP` below. Each entry maps the
+* lowercased React form to the actual DOM event name.
+*
+* Today there is exactly ONE remap: `doubleclick → dblclick`. React
+* inherits this mismatch from the DOM spec — `dblclick` is the canonical
+* event name (RFC at `https://dom.spec.whatwg.org/#interface-mouseevent`),
+* while React's component-prop convention is the `onDoubleClick` shape.
+*
+* **Audit completeness.** The full React event-prop list from
+* `https://react.dev/reference/react-dom/components/common` was checked
+* against canonical DOM event names. Every multi-word event other than
+* `onDoubleClick` lowercases correctly:
+*   - Pointer family: `onPointerDown` → `pointerdown`, `onGotPointerCapture` → `gotpointercapture`, …
+*   - Mouse family: `onMouseEnter` → `mouseenter`, `onMouseLeave` → `mouseleave`, …
+*   - Drag family: `onDragStart` → `dragstart`, `onDragEnd` → `dragend`, …
+*   - Touch family: `onTouchStart` → `touchstart`, `onTouchEnd` → `touchend`, …
+*   - Composition family: `onCompositionEnd` → `compositionend`, …
+*   - Animation/transition: `onAnimationStart` → `animationstart`, `onTransitionEnd` → `transitionend`, …
+*   - Media family: `onCanPlayThrough` → `canplaythrough`, `onLoadedData` → `loadeddata`, `onTimeUpdate` → `timeupdate`, `onVolumeChange` → `volumechange`, …
+*   - Form family: `onContextMenu` → `contextmenu`, `onBeforeInput` → `beforeinput`, …
+*
+* If a future React release adds a new event-prop with a non-trivial
+* mismatch, append the entry here. Both compiler backends (JS and Rust)
+* read the same shape — the Rust port lives in `native/src/lib.rs` next
+* to `emit_event_listener`. Keep them in sync.
+*
+* **Testing.** `packages/core/compiler/src/tests/runtime/events.test.ts`
+* exercises this table end-to-end via a real-Chromium harness:
+*   - `onDoubleClick fires (multi-word + delegated)` — locks in the remap.
+*   - `onContextMenu fires (multi-word, lowercases to contextmenu)` —
+*     locks in the no-remap default for an adjacent multi-word event.
+*   - `event-name-remap-table sanity` — asserts that every entry in
+*     `REACT_EVENT_REMAP` has a corresponding runtime test.
+*/
+const REACT_EVENT_REMAP = Object.freeze({ doubleclick: "dblclick" });
+
+//#endregion
 //#region src/jsx.ts
 /**
 * JSX transform — wraps dynamic JSX expressions in `() =>` so the Pyreon runtime
@@ -661,7 +711,8 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 			else bindLines.push(`{ const __r = ${sliceExpr(expr)}; if (typeof __r === "function") __r(${varName}); else if (__r) __r.current = ${varName} }`);
 		}
 		function emitEventListener(attr, attrName, varName) {
-			const eventName = (attrName[2] ?? "").toLowerCase() + attrName.slice(3);
+			const lowered = attrName.slice(2).toLowerCase();
+			const eventName = REACT_EVENT_REMAP[lowered] ?? lowered;
 			if (!attr.value || attr.value.type !== "JSXExpressionContainer") return;
 			const expr = attr.value.expression;
 			if (!expr || expr.type === "JSXEmptyExpression") return;
@@ -702,6 +753,7 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 		function attrSetter(htmlAttrName, varName, expr) {
 			if (htmlAttrName === "class") return `${varName}.className = ${expr}`;
 			if (htmlAttrName === "style") return `${varName}.style.cssText = ${expr}`;
+			if (DOM_PROPS.has(htmlAttrName)) return `${varName}.${htmlAttrName} = ${expr}`;
 			return `${varName}.setAttribute("${htmlAttrName}", ${expr})`;
 		}
 		function emitDynamicAttr(_expr, exprNode, htmlAttrName, varName) {
@@ -714,7 +766,7 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 			if (directRef) {
 				needsBindDirectImport = true;
 				const d = nextDisp();
-				const updater = htmlAttrName === "class" ? `(v) => { ${varName}.className = v == null ? "" : String(v) }` : htmlAttrName === "style" ? `(v) => { if (typeof v === "string") ${varName}.style.cssText = v; else if (v) Object.assign(${varName}.style, v) }` : `(v) => { ${varName}.setAttribute("${htmlAttrName}", v == null ? "" : String(v)) }`;
+				const updater = htmlAttrName === "class" ? `(v) => { ${varName}.className = v == null ? "" : String(v) }` : htmlAttrName === "style" ? `(v) => { if (typeof v === "string") ${varName}.style.cssText = v; else if (v) Object.assign(${varName}.style, v) }` : DOM_PROPS.has(htmlAttrName) ? `(v) => { ${varName}.${htmlAttrName} = v }` : `(v) => { ${varName}.setAttribute("${htmlAttrName}", v == null ? "" : String(v)) }`;
 				bindLines.push(`const ${d} = _bindDirect(${directRef}, ${updater})`);
 				return;
 			}
@@ -798,10 +850,10 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 		}
 		function classifyJsxChild(child, out, elemIdxRef, recurse) {
 			if (child.type === "JSXText") {
-				const trimmed = (child.value ?? child.raw ?? "").replace(/\n\s*/g, "").trim();
-				if (trimmed) out.push({
+				const cleaned = cleanJsxText(child.value ?? child.raw ?? "");
+				if (cleaned) out.push({
 					kind: "text",
-					text: trimmed
+					text: cleaned
 				});
 				return;
 			}
@@ -834,10 +886,10 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 		}
 		function analyzeChildren(flatChildren) {
 			const hasElem = flatChildren.some((c) => c.kind === "element");
-			const hasNonElem = flatChildren.some((c) => c.kind !== "element");
+			const hasText = flatChildren.some((c) => c.kind === "text");
 			const exprCount = flatChildren.filter((c) => c.kind === "expression").length;
 			return {
-				useMixed: hasElem && hasNonElem,
+				useMixed: (hasElem ? 1 : 0) + (hasText ? 1 : 0) + (exprCount > 0 ? 1 : 0) > 1,
 				useMultiExpr: exprCount > 1
 			};
 		}
@@ -914,7 +966,7 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 			bindLines.push(`const ${combinedName} = _bind(() => { ${combinedBody} })`);
 		}
 		if (bindLines.length === 0 && disposerNames.length === 0) return `_tpl("${escaped}", () => null)`;
-		let body = bindLines.map((l) => `  ${l}`).join("\n");
+		let body = bindLines.map((l) => `  ${l};`).join("\n");
 		if (disposerNames.length > 0) body += `\n  return () => { ${disposerNames.map((d) => `${d}()`).join("; ")} }`;
 		else body += "\n  return null";
 		return `_tpl("${escaped}", (__root) => {\n${body}\n})`;
@@ -934,6 +986,10 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 		if (node.type === "Identifier" && isActiveSignal(node.name)) {
 			const parent = findParent(node);
 			if (parent && parent.type === "MemberExpression" && parent.property === node && !parent.computed) return false;
+			if (parent && parent.type === "MemberExpression" && parent.object === node) {
+				const grand = findParent(parent);
+				if (grand && grand.type === "CallExpression" && grand.callee === parent) return false;
+			}
 			if (parent && parent.type === "CallExpression" && parent.callee === node) return false;
 			return true;
 		}
@@ -955,6 +1011,10 @@ function transformJSX_JS(code, filename = "input.tsx", options = {}) {
 			if (node.type === "Identifier" && isActiveSignal(node.name)) {
 				const parent = findParent(node);
 				if (parent && parent.type === "MemberExpression" && parent.property === node && !parent.computed) return;
+				if (parent && parent.type === "MemberExpression" && parent.object === node) {
+					const grand = findParent(parent);
+					if (grand && grand.type === "CallExpression" && grand.callee === parent) return;
+				}
 				if (parent && parent.type === "CallExpression" && parent.callee === node) return;
 				if (parent && parent.type === "VariableDeclarator" && parent.id === node) return;
 				if (parent && (parent.type === "Property" || parent.type === "ObjectProperty")) {
@@ -1002,6 +1062,15 @@ const JSX_TO_HTML_ATTR = {
 	className: "class",
 	htmlFor: "for"
 };
+const DOM_PROPS = new Set([
+	"value",
+	"checked",
+	"selected",
+	"disabled",
+	"multiple",
+	"readOnly",
+	"indeterminate"
+]);
 const STATEFUL_CALLS = new Set([
 	"signal",
 	"computed",
@@ -1054,6 +1123,23 @@ function escapeHtmlAttr(s) {
 function escapeHtmlText(s) {
 	return s.replace(/&(?!(?:#\d+|#x[\da-fA-F]+|[a-zA-Z]\w*);)/g, "&amp;").replace(/</g, "&lt;");
 }
+function cleanJsxText(raw) {
+	if (!raw.includes("\n") && !raw.includes("\r")) return raw;
+	const lines = raw.split(/\r\n|\n|\r/);
+	let lastNonEmpty = -1;
+	for (let i = 0; i < lines.length; i++) if (/[^ \t]/.test(lines[i] ?? "")) lastNonEmpty = i;
+	let str = "";
+	for (let i = 0; i < lines.length; i++) {
+		let line = (lines[i] ?? "").replace(/\t/g, " ");
+		if (i !== 0) line = line.replace(/^ +/, "");
+		if (i !== lines.length - 1) line = line.replace(/ +$/, "");
+		if (line) {
+			if (i !== lastNonEmpty) line += " ";
+			str += line;
+		}
+	}
+	return str;
+}
 function isStaticJSXNode(node) {
 	if (node.type === "JSXElement" && node.openingElement?.selfClosing) return isStaticAttrs(node.openingElement.attributes ?? []);
 	if (node.type === "JSXFragment") return (node.children ?? []).every(isStaticChild);
@@ -2004,6 +2090,18 @@ function diagnoseError(error) {
 *                       monotonic counter.
 *  - `on-click-undefined` — `onClick={undefined}` explicitly; the runtime
 *                       used to crash on this pattern. Omit the prop.
+*  - `signal-write-as-call` — `sig(value)` is a no-op read that ignores
+*                       its argument; the runtime warns in dev. Static
+*                       detector spots it pre-runtime when `sig` was
+*                       declared as `const sig = signal(...)` /
+*                       `computed(...)` and called with ≥1 argument.
+*  - `static-return-null-conditional` — `if (cond) return null` at the
+*                       top of a component body runs ONCE; signal changes
+*                       in `cond` never re-evaluate the early-return.
+*                       Wrap in a returned reactive accessor.
+*  - `as-unknown-as-vnodechild` — defensive `as unknown as VNodeChild`
+*                       cast on JSX returns is unnecessary (`JSX.Element`
+*                       is already assignable to `VNodeChild`).
 *
 * Two-mode surface mirrors `react-intercept.ts`:
 *  - `detectPyreonPatterns(code)` — diagnostics only
@@ -2164,9 +2262,122 @@ function detectOnClickUndefined(ctx, node) {
 	if (!(ts.isIdentifier(expr) && expr.text === "undefined" || expr.kind === ts.SyntaxKind.VoidExpression)) return;
 	pushDiag(ctx, node, "on-click-undefined", `\`${attrName}={undefined}\` explicitly passes undefined as a listener. Pyreon's runtime guards against this, but the cleanest pattern is to omit the attribute entirely or use a conditional: \`${attrName}={condition ? handler : undefined}\`.`, getNodeText(ctx, node), `/* omit ${attrName} when the handler is not defined */`, false);
 }
+/**
+* Walks the file and collects every identifier bound to a `signal(...)` or
+* `computed(...)` call. Only `const` declarations are tracked — `let`/`var`
+* may be reassigned to non-signal values, so a use-site call wouldn't be a
+* reliable signal-write.
+*
+* The collection is intentionally scope-blind: a name shadowed in a nested
+* scope (`const x = signal(0); function f() { const x = 5; x(7) }`) would
+* produce a false positive on `x(7)`. That tradeoff is acceptable because
+* (1) shadowing a signal name with a non-signal is itself unusual and
+* (2) the detector message points at exactly the wrong-shape call so a
+* human reviewer can dismiss the rare false positive in seconds.
+*/
+function collectSignalBindings(sf) {
+	const names = /* @__PURE__ */ new Set();
+	function isSignalFactoryCall(init) {
+		if (!init || !ts.isCallExpression(init)) return false;
+		const callee = init.expression;
+		if (!ts.isIdentifier(callee)) return false;
+		return callee.text === "signal" || callee.text === "computed";
+	}
+	function walk(node) {
+		if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name)) {
+			const list = node.parent;
+			if (ts.isVariableDeclarationList(list) && (list.flags & ts.NodeFlags.Const) !== 0 && isSignalFactoryCall(node.initializer)) names.add(node.name.text);
+		}
+		ts.forEachChild(node, walk);
+	}
+	walk(sf);
+	return names;
+}
+function detectSignalWriteAsCall(ctx, node) {
+	if (ctx.signalBindings.size === 0) return;
+	const callee = node.expression;
+	if (!ts.isIdentifier(callee)) return;
+	if (!ctx.signalBindings.has(callee.text)) return;
+	if (node.arguments.length === 0) return;
+	pushDiag(ctx, node, "signal-write-as-call", `\`${callee.text}(value)\` does NOT write the signal — \`signal()\` is the read-only callable surface and ignores its arguments. Use \`${callee.text}.set(value)\` to assign or \`${callee.text}.update((prev) => …)\` to derive from the previous value. Pyreon's runtime warns about this pattern in dev, but the warning fires AFTER the silent no-op.`, getNodeText(ctx, node), `${callee.text}.set(${node.arguments.map((a) => getNodeText(ctx, a)).join(", ")})`, false);
+}
+/**
+* `if (cond) return null` at the top of a component body runs ONCE — Pyreon
+* components mount and never re-execute their function bodies. A signal
+* change inside `cond` therefore never re-evaluates the condition; the
+* component is permanently stuck on whichever branch the first run picked.
+*
+* The fix is to wrap the conditional in a returned reactive accessor:
+*   return (() => { if (!cond()) return null; return <div /> })
+*
+* Detection:
+*  - The function contains JSX (i.e. it's a component)
+*  - The function body has an `IfStatement` whose `thenStatement` is
+*    `return null` (either bare `return null` or `{ return null }`)
+*  - The `if` is at the function body's top level, NOT inside a returned
+*    arrow / IIFE (those are reactive scopes — flagging them would be a
+*    false positive)
+*/
+function returnsNullStatement(stmt) {
+	if (ts.isReturnStatement(stmt)) {
+		const expr = stmt.expression;
+		return !!expr && expr.kind === ts.SyntaxKind.NullKeyword;
+	}
+	if (ts.isBlock(stmt)) return stmt.statements.length === 1 && returnsNullStatement(stmt.statements[0]);
+	return false;
+}
+/**
+* Returns true if the function looks like a top-level component:
+*  - `function PascalName(...) { ... }` (FunctionDeclaration with PascalCase id), OR
+*  - `const PascalName = (...) => { ... }` (arrow inside a VariableDeclaration whose name is PascalCase).
+*
+* Anonymous nested arrows — most importantly the reactive accessor
+* `return (() => { if (!cond()) return null; return <div /> })` — are
+* NOT considered components here, even when they contain JSX. Without
+* this filter the detector would fire on the very pattern the
+* diagnostic recommends as the fix.
+*/
+function isComponentShapedFunction(node) {
+	if (ts.isFunctionDeclaration(node)) return !!node.name && /^[A-Z]/.test(node.name.text);
+	const parent = node.parent;
+	if (parent && ts.isVariableDeclaration(parent) && ts.isIdentifier(parent.name)) return /^[A-Z]/.test(parent.name.text);
+	return false;
+}
+function detectStaticReturnNullConditional(ctx, node) {
+	if (!isComponentShapedFunction(node)) return;
+	if (!containsJsx(node)) return;
+	const body = node.body;
+	if (!body || !ts.isBlock(body)) return;
+	for (const stmt of body.statements) {
+		if (!ts.isIfStatement(stmt)) continue;
+		if (!returnsNullStatement(stmt.thenStatement)) continue;
+		pushDiag(ctx, stmt, "static-return-null-conditional", "Pyreon components run ONCE — `if (cond) return null` at the top of a component body is evaluated exactly once at mount. Reading a signal inside `cond` will NOT re-trigger the early return when the signal changes; the component is stuck on whichever branch the first run picked. Wrap the conditional in a returned reactive accessor: `return (() => { if (!cond()) return null; return <div /> })` — the accessor re-runs whenever its tracked signals change.", getNodeText(ctx, stmt), "return (() => { if (!cond()) return null; return <JSX /> })", false);
+		return;
+	}
+}
+/**
+* `JSX.Element` (which is what JSX evaluates to) is already assignable to
+* `VNodeChild`. The `as unknown as VNodeChild` double-cast is unnecessary
+* — it's been showing up in `@pyreon/ui-primitives` as a defensive habit
+* carried over from earlier framework versions. The cast is never load-
+* bearing today; removing it never changes runtime behavior. Pure cosmetic
+* but a useful proxy for non-idiomatic Pyreon code in primitives.
+*/
+function detectAsUnknownAsVNodeChild(ctx, node) {
+	const outerType = node.type;
+	if (!ts.isTypeReferenceNode(outerType)) return;
+	if (!ts.isIdentifier(outerType.typeName) || outerType.typeName.text !== "VNodeChild") return;
+	const inner = node.expression;
+	if (!ts.isAsExpression(inner)) return;
+	if (inner.type.kind !== ts.SyntaxKind.UnknownKeyword) return;
+	pushDiag(ctx, node, "as-unknown-as-vnodechild", "`as unknown as VNodeChild` is unnecessary — `JSX.Element` (the type produced by JSX) is already assignable to `VNodeChild`. Remove the double cast; it is pure noise that hides genuine type issues if they ever appear at this site.", getNodeText(ctx, node), getNodeText(ctx, inner.expression), false);
+}
 function visitNode(ctx, node) {
 	if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) detectForKeying(ctx, node);
-	if (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node)) detectPropsDestructured(ctx, node);
+	if (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node)) {
+		detectPropsDestructured(ctx, node);
+		detectStaticReturnNullConditional(ctx, node);
+	}
 	if (ts.isBinaryExpression(node)) {
 		detectProcessDevGate(ctx, node);
 		detectDateMathRandomId(ctx, node);
@@ -2175,8 +2386,10 @@ function visitNode(ctx, node) {
 	if (ts.isCallExpression(node)) {
 		detectEmptyTheme(ctx, node);
 		detectRawEventListener(ctx, node);
+		detectSignalWriteAsCall(ctx, node);
 	}
 	if (ts.isJsxAttribute(node)) detectOnClickUndefined(ctx, node);
+	if (ts.isAsExpression(node)) detectAsUnknownAsVNodeChild(ctx, node);
 }
 function visit(ctx, node) {
 	ts.forEachChild(node, (child) => {
@@ -2189,7 +2402,8 @@ function detectPyreonPatterns(code, filename = "input.tsx") {
 	const ctx = {
 		sf,
 		code,
-		diagnostics: []
+		diagnostics: [],
+		signalBindings: collectSignalBindings(sf)
 	};
 	visit(ctx, sf);
 	ctx.diagnostics.sort((a, b) => a.line - b.line || a.column - b.column);
@@ -2197,7 +2411,7 @@ function detectPyreonPatterns(code, filename = "input.tsx") {
 }
 /** Fast regex pre-filter — returns true if the code is worth a full AST walk. */
 function hasPyreonPatterns(code) {
-	return /\bFor\b[^=]*\beach\s*=/.test(code) || /\btypeof\s+process\b/.test(code) || /\.theme\s*\(\s*\{\s*\}\s*\)/.test(code) || /\b(?:add|remove)EventListener\s*\(/.test(code) || /\bDate\.now\s*\(/.test(code) && /\bMath\.random\s*\(/.test(code) || /on[A-Z]\w*\s*=\s*\{\s*undefined\s*\}/.test(code) || /=\s*\(\s*\{[^}]+\}\s*[:)]/.test(code);
+	return /\bFor\b[^=]*\beach\s*=/.test(code) || /\btypeof\s+process\b/.test(code) || /\.theme\s*\(\s*\{\s*\}\s*\)/.test(code) || /\b(?:add|remove)EventListener\s*\(/.test(code) || /\bDate\.now\s*\(/.test(code) && /\bMath\.random\s*\(/.test(code) || /on[A-Z]\w*\s*=\s*\{\s*undefined\s*\}/.test(code) || /=\s*\(\s*\{[^}]+\}\s*[:)]/.test(code) || /\b(?:signal|computed)\s*[<(]/.test(code) || /\bif\s*\([^)]+\)\s*\{?\s*return\s+null\b/.test(code) || /\bas\s+unknown\s+as\s+VNodeChild\b/.test(code);
 }
 
 //#endregion

package/lib/types/index.d.ts

@@ -194,6 +194,18 @@ declare function diagnoseError(error: string): ErrorDiagnosis | null;
  *                       monotonic counter.
  *  - `on-click-undefined` — `onClick={undefined}` explicitly; the runtime
  *                       used to crash on this pattern. Omit the prop.
+ *  - `signal-write-as-call` — `sig(value)` is a no-op read that ignores
+ *                       its argument; the runtime warns in dev. Static
+ *                       detector spots it pre-runtime when `sig` was
+ *                       declared as `const sig = signal(...)` /
+ *                       `computed(...)` and called with ≥1 argument.
+ *  - `static-return-null-conditional` — `if (cond) return null` at the
+ *                       top of a component body runs ONCE; signal changes
+ *                       in `cond` never re-evaluate the early-return.
+ *                       Wrap in a returned reactive accessor.
+ *  - `as-unknown-as-vnodechild` — defensive `as unknown as VNodeChild`
+ *                       cast on JSX returns is unnecessary (`JSX.Element`
+ *                       is already assignable to `VNodeChild`).
  *
  * Two-mode surface mirrors `react-intercept.ts`:
  *  - `detectPyreonPatterns(code)` — diagnostics only
@@ -214,7 +226,7 @@ declare function diagnoseError(error: string): ErrorDiagnosis | null;
  *  2. CLI `pyreon doctor`
  *  3. MCP server `validate` tool
  */
-type PyreonDiagnosticCode = 'for-missing-by' | 'for-with-key' | 'props-destructured' | 'process-dev-gate' | 'empty-theme' | 'raw-add-event-listener' | 'raw-remove-event-listener' | 'date-math-random-id' | 'on-click-undefined';
+type PyreonDiagnosticCode = 'for-missing-by' | 'for-with-key' | 'props-destructured' | 'process-dev-gate' | 'empty-theme' | 'raw-add-event-listener' | 'raw-remove-event-listener' | 'date-math-random-id' | 'on-click-undefined' | 'signal-write-as-call' | 'static-return-null-conditional' | 'as-unknown-as-vnodechild';
 interface PyreonDiagnostic {
   /** Machine-readable code for filtering + programmatic handling */
   code: PyreonDiagnosticCode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/compiler",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Template and JSX compiler for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/compiler#readme",
   "bugs": {
@@ -14,6 +14,7 @@
   },
   "files": [
     "lib",
+    "!lib/**/*.map",
     "src",
     "README.md",
     "LICENSE"
@@ -42,7 +43,14 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "oxc-parser": "^0.123.0"
+    "oxc-parser": "^0.129.0"
+  },
+  "devDependencies": {
+    "@pyreon/core": "^0.15.0",
+    "@pyreon/reactivity": "^0.15.0",
+    "@pyreon/runtime-dom": "^0.15.0",
+    "@pyreon/test-utils": "^0.13.2",
+    "happy-dom": "^20.8.3"
   },
   "peerDependencies": {
     "typescript": ">=5.0.0"

package/src/event-names.ts

@@ -0,0 +1,65 @@
+/**
+ * React-style → DOM event-name remap.
+ *
+ * The compiler translates JSX event handler attributes (`onClick`,
+ * `onMouseEnter`, ...) to DOM event names by stripping the `on` prefix
+ * and lowercasing. That rule covers MOST React event-name conventions
+ * because the underlying DOM event name happens to be the lowercased
+ * multi-word form (e.g. `onKeyDown` → `keydown`, `onMouseEnter` →
+ * `mouseenter`, `onPointerLeave` → `pointerleave`,
+ * `onAnimationStart` → `animationstart`, `onContextMenu` → `contextmenu`).
+ *
+ * **The exceptions** — where lowercasing produces the WRONG DOM event
+ * name — are listed in `REACT_EVENT_REMAP` below. Each entry maps the
+ * lowercased React form to the actual DOM event name.
+ *
+ * Today there is exactly ONE remap: `doubleclick → dblclick`. React
+ * inherits this mismatch from the DOM spec — `dblclick` is the canonical
+ * event name (RFC at `https://dom.spec.whatwg.org/#interface-mouseevent`),
+ * while React's component-prop convention is the `onDoubleClick` shape.
+ *
+ * **Audit completeness.** The full React event-prop list from
+ * `https://react.dev/reference/react-dom/components/common` was checked
+ * against canonical DOM event names. Every multi-word event other than
+ * `onDoubleClick` lowercases correctly:
+ *   - Pointer family: `onPointerDown` → `pointerdown`, `onGotPointerCapture` → `gotpointercapture`, …
+ *   - Mouse family: `onMouseEnter` → `mouseenter`, `onMouseLeave` → `mouseleave`, …
+ *   - Drag family: `onDragStart` → `dragstart`, `onDragEnd` → `dragend`, …
+ *   - Touch family: `onTouchStart` → `touchstart`, `onTouchEnd` → `touchend`, …
+ *   - Composition family: `onCompositionEnd` → `compositionend`, …
+ *   - Animation/transition: `onAnimationStart` → `animationstart`, `onTransitionEnd` → `transitionend`, …
+ *   - Media family: `onCanPlayThrough` → `canplaythrough`, `onLoadedData` → `loadeddata`, `onTimeUpdate` → `timeupdate`, `onVolumeChange` → `volumechange`, …
+ *   - Form family: `onContextMenu` → `contextmenu`, `onBeforeInput` → `beforeinput`, …
+ *
+ * If a future React release adds a new event-prop with a non-trivial
+ * mismatch, append the entry here. Both compiler backends (JS and Rust)
+ * read the same shape — the Rust port lives in `native/src/lib.rs` next
+ * to `emit_event_listener`. Keep them in sync.
+ *
+ * **Testing.** `packages/core/compiler/src/tests/runtime/events.test.ts`
+ * exercises this table end-to-end via a real-Chromium harness:
+ *   - `onDoubleClick fires (multi-word + delegated)` — locks in the remap.
+ *   - `onContextMenu fires (multi-word, lowercases to contextmenu)` —
+ *     locks in the no-remap default for an adjacent multi-word event.
+ *   - `event-name-remap-table sanity` — asserts that every entry in
+ *     `REACT_EVENT_REMAP` has a corresponding runtime test.
+ */
+export const REACT_EVENT_REMAP: Readonly<Record<string, string>> = Object.freeze({
+  doubleclick: 'dblclick',
+})
+
+/**
+ * Translate a React-style event prop name (`onDoubleClick`) to the
+ * canonical DOM event name (`dblclick`). Returns null for non-event
+ * attribute names (anything not starting with `on` or shorter than 3
+ * characters — single-letter `on*` props don't correspond to DOM events).
+ *
+ * The compiler uses the returned name in two emission shapes:
+ *   - Delegated events (in `DELEGATED_EVENTS`): `el.__ev_${eventName} = handler`
+ *   - Direct listeners: `el.addEventListener("${eventName}", handler)`
+ */
+export function reactEventToDom(attrName: string): string | null {
+  if (attrName.length <= 2 || !attrName.startsWith('on')) return null
+  const lower = attrName.slice(2).toLowerCase()
+  return REACT_EVENT_REMAP[lower] ?? lower
+}