@pyreon/compiler 0.14.0 → 0.16.0

package/src/jsx.ts

@@ -29,30 +29,21 @@
  */
 
 import { parseSync } from 'oxc-parser'
-import { createRequire } from 'node:module'
-import { fileURLToPath } from 'node:url'
-import { dirname, join } from 'node:path'
+import { REACT_EVENT_REMAP } from './event-names'
+import { loadNativeBinding } from './load-native'
 
 // ─── Native binary auto-detection ────────────────────────────────────────────
-// Try to load the Rust napi-rs binary for 3.7-8.2x faster transforms.
-// Falls back to the JS implementation below if the binary isn't available
-// (wrong platform, CI environment, WASM runtime like StackBlitz, etc.)
+// Two-path resolution: in-tree binary first (dev mode), then per-platform
+// npm package (production install via optionalDependencies). Falls through
+// to the JS implementation below when both paths fail (wrong platform, CI
+// environment, WASM runtime like StackBlitz, missing per-platform package).
 //
-// Uses createRequire for ESM compatibility — __dirname and require() don't
-// exist in ESM modules.
+// See `load-native.ts` for the resolution logic.
 type NativeTransformFn = (code: string, filename: string, ssr: boolean, knownSignals: string[] | null) => TransformResult
-let nativeTransformJsx: NativeTransformFn | null = null
-
-try {
-  const __filename = fileURLToPath(import.meta.url)
-  const __dirname = dirname(__filename)
-  const nativeRequire = createRequire(import.meta.url)
-  const nativePath = join(__dirname, '..', 'native', 'pyreon-compiler.node')
-  const native = nativeRequire(nativePath) as { transformJsx: NativeTransformFn }
-  nativeTransformJsx = native.transformJsx
-} catch {
-  // Native binary not available — JS fallback will be used
-}
+const nativeBinding = loadNativeBinding(import.meta.url)
+const nativeTransformJsx: NativeTransformFn | null = nativeBinding
+  ? (nativeBinding.transformJsx as NativeTransformFn)
+  : null
 
 export interface CompilerWarning {
   /** Warning message */
@@ -773,19 +764,19 @@ export function transformJSX_JS(
   if (replacements.length === 0 && hoists.length === 0) return { code, warnings }
 
   replacements.sort((a, b) => a.start - b.start)
-  const parts: string[] = []
-  let lastPos = 0
+  const outParts: string[] = []
+  let outPos = 0
   for (const r of replacements) {
-    parts.push(code.slice(lastPos, r.start))
-    parts.push(r.text)
-    lastPos = r.end
+    outParts.push(code.slice(outPos, r.start))
+    outParts.push(r.text)
+    outPos = r.end
   }
-  parts.push(code.slice(lastPos))
-  let result = parts.join('')
+  outParts.push(code.slice(outPos))
+  let output = outParts.join('')
 
   if (hoists.length > 0) {
     const preamble = hoists.map((h) => `const ${h.name} = /*@__PURE__*/ ${h.text}\n`).join('')
-    result = preamble + result
+    output = preamble + output
   }
 
   if (needsTplImport) {
@@ -797,16 +788,16 @@ export function transformJSX_JS(
     const reactivityImports = needsBindImportGlobal
       ? `\nimport { _bind } from "@pyreon/reactivity";`
       : ''
-    result =
+    output =
       `import { ${runtimeDomImports.join(', ')} } from "@pyreon/runtime-dom";${reactivityImports}\n` +
-      result
+      output
   }
 
   if (needsRpImport) {
-    result = `import { _rp } from "@pyreon/core";\n` + result
+    output = `import { _rp } from "@pyreon/core";\n` + output
   }
 
-  return { code: result, usesTemplates: needsTplImport, warnings }
+  return { code: output, usesTemplates: needsTplImport, warnings }
 
   // ── Template emission helpers ─────────────────────────────────────────────
 
@@ -901,7 +892,26 @@ export function transformJSX_JS(
     }
 
     function emitEventListener(attr: N, attrName: string, varName: string): void {
-      const eventName = (attrName[2] ?? '').toLowerCase() + attrName.slice(3)
+      // Translate the JSX-style React attribute name (e.g. `onKeyDown`,
+      // `onDoubleClick`) to the canonical DOM event name (`keydown`,
+      // `dblclick`).
+      //
+      // The default rule is "drop the `on` prefix and lowercase" —
+      // covers `onKeyDown` → `keydown`, `onMouseEnter` → `mouseenter`,
+      // `onPointerLeave` → `pointerleave`, `onAnimationStart` →
+      // `animationstart`, etc. Most React event names follow this rule
+      // because the underlying DOM event name is also the lowercased
+      // multi-word form.
+      //
+      // The exception list lives in `REACT_EVENT_REMAP` (event-names.ts).
+      // Every React event-prop in the official component-prop list was
+      // audited against canonical DOM event names — see the JSDoc on
+      // REACT_EVENT_REMAP for the audit. Today exactly one entry:
+      //   `onDoubleClick` → `dblclick`
+      // The Rust native backend (`native/src/lib.rs:emit_event_listener`)
+      // mirrors the same table — keep them in sync if a new entry is added.
+      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
@@ -952,6 +962,7 @@ export function transformJSX_JS(
     function attrSetter(htmlAttrName: string, varName: string, expr: string): string {
       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})`
     }
 
@@ -970,7 +981,9 @@ export function transformJSX_JS(
             ? `(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)) }`
+              : DOM_PROPS.has(htmlAttrName)
+                ? `(v) => { ${varName}.${htmlAttrName} = v }`
+                : `(v) => { ${varName}.setAttribute("${htmlAttrName}", v == null ? "" : String(v)) }`
         bindLines.push(`const ${d} = _bindDirect(${directRef}, ${updater})`)
         return
       }
@@ -1080,8 +1093,8 @@ export function transformJSX_JS(
     ): void {
       if (child.type === 'JSXText') {
         const raw = child.value ?? child.raw ?? ''
-        const trimmed = raw.replace(/\n\s*/g, '').trim()
-        if (trimmed) out.push({ kind: 'text', text: trimmed })
+        const cleaned = cleanJsxText(raw)
+        if (cleaned) out.push({ kind: 'text', text: cleaned })
         return
       }
       if (child.type === 'JSXElement') {
@@ -1108,9 +1121,19 @@ export function transformJSX_JS(
 
     function analyzeChildren(flatChildren: FlatChild[]): { useMixed: boolean; useMultiExpr: boolean } {
       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, useMultiExpr: exprCount > 1 }
+      // `useMixed` triggers placeholder-based positional mounting (each
+      // dynamic child gets a `<!>` comment slot in the template that
+      // `replaceChild`-replaces at mount). It must fire whenever ≥2 of
+      // {element, text, expression} are interleaved — otherwise dynamic
+      // text nodes added via `appendChild` land after all static
+      // template content, breaking source-order rendering for shapes
+      // like `<p>foo {x()} bar</p>` (rendered "foo  barX" instead of
+      // "foo X bar"). Discovered by Phase B2's whitespace tests.
+      const present =
+        (hasElem ? 1 : 0) + (hasText ? 1 : 0) + (exprCount > 0 ? 1 : 0)
+      return { useMixed: present > 1, useMultiExpr: exprCount > 1 }
     }
 
     function attrIsDynamic(attr: N): boolean {
@@ -1210,7 +1233,31 @@ export function transformJSX_JS(
       return `_tpl("${escaped}", () => null)`
     }
 
-    let body = bindLines.map((l) => `  ${l}`).join('\n')
+    // Append `;` to every bind line so ASI can't merge consecutive
+    // statements when the next line starts with `(`, `[`, etc.
+    // Concrete bug shape (pre-fix): a child element with `hasDynamic=true`
+    // emits `const __e0 = __root.children[N]` followed by a ref-callback
+    // line `((el) => { x = el })(__e0)`. JS does NOT insert ASI here
+    // because `__root.children[N]((el) => ...)` is a valid expression,
+    // so the parser merges them into a single function call:
+    //   `const __e0 = __root.children[N]((el) => ...)(__e0)`
+    // — calling `children[N]` as a function with the arrow as argument,
+    // and self-referencing `__e0` before assignment. Adding the `;`
+    // terminates each statement deterministically. Trailing `;` after
+    // a `{...}` block is a harmless empty statement.
+    // Append `;` to every bind line so ASI can't merge consecutive
+    // statements when the next line starts with `(`, `[`, etc.
+    // Concrete bug shape (pre-fix): a child element with `hasDynamic=true`
+    // emits `const __e0 = __root.children[N]` followed by a ref-callback
+    // line `((el) => { x = el })(__e0)`. JS does NOT insert ASI here
+    // because `__root.children[N]((el) => ...)` is a valid expression,
+    // so the parser merges them into a single function call:
+    //   `const __e0 = __root.children[N]((el) => ...)(__e0)`
+    // — calling `children[N]` as a function with the arrow as argument,
+    // and self-referencing `__e0` before assignment. Adding the `;`
+    // terminates each statement deterministically. Trailing `;` after
+    // a `{...}` block is a harmless empty statement.
+    let body = bindLines.map((l) => `  ${l};`).join('\n')
     if (disposerNames.length > 0) {
       body += `\n  return () => { ${disposerNames.map((d) => `${d}()`).join('; ')} }`
     } else {
@@ -1244,6 +1291,16 @@ export function transformJSX_JS(
     if (node.type === 'Identifier' && isActiveSignal(node.name)) {
       const parent = findParent(node)
       if (parent && parent.type === 'MemberExpression' && parent.property === node && !parent.computed) return false
+      // signal.X(...) — operating on the signal object (calling a method).
+      // Mirrors the same narrow skip in findSignalIdents below.
+      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 // already called
       return true
     }
@@ -1269,6 +1326,27 @@ export function transformJSX_JS(
         const parent = findParent(node)
         // Skip property name positions (obj.name)
         if (parent && parent.type === 'MemberExpression' && parent.property === node && !parent.computed) return
+        // Skip when the identifier is the OBJECT of a member access AND
+        // the result is being CALLED (signal.set(...), signal.peek(),
+        // signal.update(...)). The user is invoking a method on the
+        // signal OBJECT — auto-calling would produce `signal().set(...)`
+        // which calls the signal, gets its value (string/number/etc),
+        // then `.set` on the value is undefined → TypeError. Every event
+        // handler that did `signal.set(x)` was silently broken.
+        //
+        // Note: bare `signal.value` (member access NOT followed by call)
+        // STILL auto-calls — keeps the existing convention where
+        // `signal({a:1})` followed by `signal.a` reads the signal's
+        // value's property (see "signal as member expression object IS
+        // auto-called" test).
+        if (
+          parent &&
+          parent.type === 'MemberExpression' &&
+          parent.object === node
+        ) {
+          const grand = findParent(parent)
+          if (grand && grand.type === 'CallExpression' && grand.callee === parent) return
+        }
         // Skip if already being called: signal()
         if (parent && parent.type === 'CallExpression' && parent.callee === node) return
         // Skip declaration positions
@@ -1313,6 +1391,24 @@ const JSX_TO_HTML_ATTR: Record<string, string> = {
   htmlFor: 'for',
 }
 
+// DOM properties whose live value diverges from the content attribute.
+// For these, emit property assignment (`el.value = v`) instead of
+// `setAttribute("value", v)`. Otherwise the property and attribute drift
+// apart in user-driven flows: typing in a controlled <input> updates the
+// .value property, but `input.set('')` clearing the signal only resets
+// the attribute — the stale typed text stays visible. Same for `checked`
+// on checkboxes (presence of the attribute means checked regardless of
+// value: `setAttribute("checked", "false")` still checks the box).
+const DOM_PROPS = new Set([
+  'value',
+  'checked',
+  'selected',
+  'disabled',
+  'multiple',
+  'readOnly',
+  'indeterminate',
+])
+
 const STATEFUL_CALLS = new Set([
   'signal', 'computed', 'effect', 'batch',
   'createContext', 'createReactiveContext',
@@ -1364,6 +1460,33 @@ function escapeHtmlText(s: string): string {
   return s.replace(/&(?!(?:#\d+|#x[\da-fA-F]+|[a-zA-Z]\w*);)/g, '&amp;').replace(/</g, '&lt;')
 }
 
+// React/Babel JSX whitespace algorithm (cleanJSXElementLiteralChild).
+// Same-line text is preserved verbatim so adjacent expressions keep their
+// spacing (`<p>doubled: {x}</p>` keeps the trailing space). Multi-line text
+// strips leading whitespace from non-first lines and trailing whitespace
+// from non-last lines, drops fully-empty lines, and joins the survivors
+// with a single space — collapsing JSX indentation without losing
+// intentional inline spacing.
+function cleanJsxText(raw: string): string {
+  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: N): boolean {
   if (node.type === 'JSXElement' && node.openingElement?.selfClosing) {
     return isStaticAttrs(node.openingElement.attributes ?? [])

package/src/load-native.ts

@@ -0,0 +1,155 @@
+/**
+ * Native binding loader — resolves the @pyreon/compiler napi-rs binary
+ * via two paths in priority order:
+ *
+ *   1. **In-tree binary** at `<package>/native/pyreon-compiler.node`.
+ *      Populated by `scripts/build-native.ts` during local development
+ *      (Phase 2). Faster path because it skips npm-package resolution.
+ *
+ *   2. **Per-platform npm package** (Phase 5b — not active until per-
+ *      platform packages are published). Resolves `@pyreon/compiler-
+ *      <platform>-<arch>[-<libc>]` via the standard Node module
+ *      resolution algorithm. End users on machines without a local
+ *      `cargo` install will hit this path: `bun install` resolves
+ *      `optionalDependencies` to the matching per-platform package and
+ *      this loader picks it up.
+ *
+ *   3. **JS fallback** (caller's responsibility) — if both paths fail,
+ *      `loadNativeBinding()` returns `null` and the caller uses the
+ *      pure-JS implementation. Slower but correctness-equivalent.
+ *
+ * Platform detection follows the napi-rs convention. Linux variants
+ * include a `libc` suffix (`gnu` for glibc, `musl` for musl) per
+ * https://napi.rs/docs/cli/build#deployment.
+ *
+ * The two-path resolution lets dev-mode (where `cargo build` produced
+ * an in-tree binary) and production-mode (where the user has only the
+ * published per-platform package) coexist with no flag flipping.
+ */
+
+import { createRequire } from 'node:module'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+export interface NativeBinding {
+  transformJsx: (
+    code: string,
+    filename: string,
+    ssr: boolean,
+    knownSignals: string[] | null,
+  ) => unknown
+}
+
+// Local Node-process surface. `@pyreon/runtime-dom` ships an ambient
+// `declare var process: { env: { NODE_ENV?: string } }` to enforce the
+// bundler-agnostic dev-gate pattern, which narrows `process` for ANY
+// file pulled in by runtime-dom's typecheck — including this one when
+// imported via the `bun` condition. Casting through a local interface
+// restores access to the platform/arch/report fields we genuinely need.
+interface NodeProcess {
+  platform: string
+  arch: string
+  report?: {
+    getReport(): unknown
+  }
+}
+const nodeProcess = process as unknown as NodeProcess
+
+/**
+ * Resolve the per-platform package name following the napi-rs naming
+ * convention: `@pyreon/compiler-<platform>-<arch>[-<libc>]`.
+ *
+ * Examples:
+ *   darwin + arm64        → @pyreon/compiler-darwin-arm64
+ *   darwin + x64          → @pyreon/compiler-darwin-x64
+ *   linux + x64 + gnu     → @pyreon/compiler-linux-x64-gnu
+ *   linux + arm64 + gnu   → @pyreon/compiler-linux-arm64-gnu
+ *   win32 + x64 + msvc    → @pyreon/compiler-win32-x64-msvc
+ *
+ * Returns `null` for unsupported (platform, arch) combinations — caller
+ * skips per-platform resolution entirely and falls through to JS.
+ */
+export function getPlatformPackageName(
+  platform: string = nodeProcess.platform,
+  arch: string = nodeProcess.arch,
+  libc: string | null = detectLibc(platform),
+): string | null {
+  // Build the suffix for libc-bearing platforms (Linux glibc/musl,
+  // Windows MSVC). Single source of truth — no per-platform branching.
+  const suffix = libc ? `-${libc}` : ''
+  // Allowlist of (platform, arch) combos that the cross-platform CI
+  // workflow actually builds. Keep in sync with
+  // `.github/workflows/release-native.yml` matrix.
+  const supported: Record<string, string[]> = {
+    darwin: ['arm64', 'x64'],
+    linux: ['x64', 'arm64'],
+    win32: ['x64'],
+  }
+  if (!supported[platform]?.includes(arch)) return null
+  return `@pyreon/compiler-${platform}-${arch}${suffix}`
+}
+
+/**
+ * Detect the libc family for the current Linux runtime. Returns:
+ *   - `'gnu'` on glibc-based distros (Debian, Ubuntu, RHEL, …)
+ *   - `'musl'` on musl-based distros (Alpine, …)
+ *   - `null` on macOS / Windows (no libc differentiation)
+ *   - `'msvc'` on Windows (we only ship MSVC binaries)
+ *
+ * `process.report.getReport().header.glibcVersionRuntime` is the
+ * Node-canonical detection: present on glibc, absent on musl. Falls
+ * back to `gnu` on read failure since glibc is the more common case.
+ */
+function detectLibc(platform: string): string | null {
+  if (platform === 'win32') return 'msvc'
+  if (platform !== 'linux') return null
+  try {
+    const report = nodeProcess.report?.getReport()
+    if (typeof report === 'object' && report !== null) {
+      const header = (report as { header?: { glibcVersionRuntime?: string } }).header
+      return header?.glibcVersionRuntime ? 'gnu' : 'musl'
+    }
+  } catch {
+    // Best-effort detection — fall through to glibc default.
+  }
+  return 'gnu'
+}
+
+/**
+ * Load the native binding by trying paths in order:
+ *   1. In-tree binary (`<package>/native/pyreon-compiler.node`)
+ *   2. Per-platform npm package (`@pyreon/compiler-<triple>`)
+ *
+ * Returns `null` if both paths fail — caller falls back to the
+ * pure-JS implementation. NEVER throws — every error path swallows
+ * silently because a missing native binary is a perf optimization
+ * miss, not a correctness failure.
+ */
+export function loadNativeBinding(metaUrl: string): NativeBinding | null {
+  const nativeRequire = createRequire(metaUrl)
+
+  // Path 1: in-tree binary (dev mode + Phase 2 local-build path).
+  try {
+    const __filename = fileURLToPath(metaUrl)
+    const __dirname = dirname(__filename)
+    const nativePath = join(__dirname, '..', 'native', 'pyreon-compiler.node')
+    return nativeRequire(nativePath) as NativeBinding
+  } catch {
+    // In-tree binary not present — fall through to per-platform package.
+  }
+
+  // Path 2: per-platform npm package (production install path).
+  // Will start working once Phase 5b publishes the per-platform
+  // packages and `optionalDependencies` resolves them at install time.
+  const pkgName = getPlatformPackageName()
+  if (pkgName !== null) {
+    try {
+      return nativeRequire(pkgName) as NativeBinding
+    } catch {
+      // Per-platform package not installed (typical pre-Phase-5b
+      // state, or a platform we don't yet ship binaries for).
+    }
+  }
+
+  return null
+}