@pyreon/solid-compat 0.2.1 → 0.3.0

package/src/index.ts

@@ -1,6 +1,19 @@
-// @pyreon/solid-compat — SolidJS-compatible API shims running on Pyreon's reactive engine
-
-import type { ComponentFn, Props, VNodeChild } from "@pyreon/core"
+/**
+ * @pyreon/solid-compat
+ *
+ * Fully SolidJS-compatible API powered by Pyreon's reactive engine.
+ *
+ * Components re-render on state change via the compat JSX runtime wrapper.
+ * Signals use Pyreon's native signal system internally (enabling auto-tracking
+ * for createEffect/createMemo), while the component body runs inside
+ * `runUntracked` to prevent signal reads from being tracked by the reactive
+ * accessor. Only the version signal triggers re-renders.
+ *
+ * USAGE:
+ *   import { createSignal, createEffect } from "solid-js"  // aliased by vite plugin
+ */
+
+import type { ComponentFn, LazyComponent, Props, VNodeChild } from "@pyreon/core"
 import {
   ErrorBoundary,
   For,
@@ -25,6 +38,7 @@ import {
   runUntracked,
   setCurrentScope,
 } from "@pyreon/reactivity"
+import { getCurrentCtx, getHookIndex } from "./jsx-runtime"
 
 // ─── createSignal ────────────────────────────────────────────────────────────
 
@@ -32,10 +46,30 @@ export type SignalGetter<T> = () => T
 export type SignalSetter<T> = (v: T | ((prev: T) => T)) => void
 
 export function createSignal<T>(initialValue: T): [SignalGetter<T>, SignalSetter<T>] {
-  const s = pyreonSignal<T>(initialValue)
+  const ctx = getCurrentCtx()
+  if (ctx) {
+    const idx = getHookIndex()
+    if (idx >= ctx.hooks.length) {
+      ctx.hooks[idx] = pyreonSignal<T>(initialValue)
+    }
+    const s = ctx.hooks[idx] as ReturnType<typeof pyreonSignal<T>>
+    const { scheduleRerender } = ctx
 
-  const getter: SignalGetter<T> = () => s()
+    const getter: SignalGetter<T> = () => s()
+    const setter: SignalSetter<T> = (v) => {
+      if (typeof v === "function") {
+        s.update(v as (prev: T) => T)
+      } else {
+        s.set(v)
+      }
+      scheduleRerender()
+    }
+    return [getter, setter]
+  }
 
+  // Outside component — plain Pyreon signal
+  const s = pyreonSignal<T>(initialValue)
+  const getter: SignalGetter<T> = () => s()
   const setter: SignalSetter<T> = (v) => {
     if (typeof v === "function") {
       s.update(v as (prev: T) => T)
@@ -43,20 +77,53 @@ export function createSignal<T>(initialValue: T): [SignalGetter<T>, SignalSetter
       s.set(v)
     }
   }
-
   return [getter, setter]
 }
 
 // ─── createEffect ────────────────────────────────────────────────────────────
 
+/**
+ * Solid-compatible `createEffect` — creates a reactive side effect.
+ *
+ * In component context: hook-indexed, only created on first render. The effect
+ * uses Pyreon's native tracking so signal reads are automatically tracked.
+ * A re-entrance guard prevents infinite loops from signal writes inside
+ * the effect.
+ */
 export function createEffect(fn: () => void): void {
+  const ctx = getCurrentCtx()
+  if (ctx) {
+    const idx = getHookIndex()
+    if (idx < ctx.hooks.length) return // Already registered on first render
+
+    let running = false
+    const e = pyreonEffect(() => {
+      if (running) return
+      running = true
+      try {
+        fn()
+      } finally {
+        running = false
+      }
+    })
+    const stop = () => e.dispose()
+    ctx.hooks[idx] = stop
+    ctx.unmountCallbacks.push(stop)
+    return
+  }
+
+  // Outside component
   pyreonEffect(fn)
 }
 
 // ─── createRenderEffect ──────────────────────────────────────────────────────
 
+/**
+ * Solid-compatible `createRenderEffect` — same as createEffect.
+ * In Solid, this runs during the render phase; here it runs as a Pyreon effect.
+ */
 export function createRenderEffect(fn: () => void): void {
-  pyreonEffect(fn)
+  createEffect(fn)
 }
 
 // ─── createComputed (legacy Solid API) ───────────────────────────────────────
@@ -65,7 +132,24 @@ export { createEffect as createComputed }
 
 // ─── createMemo ──────────────────────────────────────────────────────────────
 
+/**
+ * Solid-compatible `createMemo` — derives a value from reactive sources.
+ *
+ * In component context: hook-indexed, only created on first render.
+ * Uses Pyreon's native computed for auto-tracking.
+ */
 export function createMemo<T>(fn: () => T): () => T {
+  const ctx = getCurrentCtx()
+  if (ctx) {
+    const idx = getHookIndex()
+    if (idx >= ctx.hooks.length) {
+      ctx.hooks[idx] = pyreonComputed(fn)
+    }
+    const c = ctx.hooks[idx] as ReturnType<typeof pyreonComputed<T>>
+    return () => c()
+  }
+
+  // Outside component
   const c = pyreonComputed(fn)
   return () => c()
 }
@@ -131,11 +215,64 @@ export { runUntracked as untrack }
 
 // ─── onMount / onCleanup ─────────────────────────────────────────────────────
 
-export { pyreonOnMount as onMount, pyreonOnUnmount as onCleanup }
+/**
+ * Solid-compatible `onMount` — runs once after the component's first render.
+ */
+type CleanupFn = () => void
+export function onMount(fn: () => CleanupFn | undefined): void {
+  const ctx = getCurrentCtx()
+  if (ctx) {
+    const idx = getHookIndex()
+    if (idx >= ctx.hooks.length) {
+      ctx.hooks[idx] = true
+      ctx.pendingEffects.push({
+        fn: () => {
+          fn()
+          return undefined
+        },
+        deps: undefined,
+        cleanup: undefined,
+      })
+    }
+    return
+  }
+
+  // Outside component
+  pyreonOnMount(fn)
+}
+
+/**
+ * Solid-compatible `onCleanup` — registers a callback to run when the component unmounts.
+ */
+export function onCleanup(fn: () => void): void {
+  const ctx = getCurrentCtx()
+  if (ctx) {
+    const idx = getHookIndex()
+    if (idx >= ctx.hooks.length) {
+      ctx.hooks[idx] = true
+      ctx.unmountCallbacks.push(fn)
+    }
+    return
+  }
+
+  // Outside component
+  pyreonOnUnmount(fn)
+}
 
 // ─── createSelector ──────────────────────────────────────────────────────────
 
-export { pyreonCreateSelector as createSelector }
+export function createSelector<T>(source: () => T): (key: T) => boolean {
+  const ctx = getCurrentCtx()
+  if (ctx) {
+    const idx = getHookIndex()
+    if (idx >= ctx.hooks.length) {
+      ctx.hooks[idx] = pyreonCreateSelector(source)
+    }
+    return ctx.hooks[idx] as (key: T) => boolean
+  }
+
+  return pyreonCreateSelector(source)
+}
 
 // ─── mergeProps ──────────────────────────────────────────────────────────────
 
@@ -224,37 +361,44 @@ export function children(fn: () => VNodeChild): () => VNodeChild {
 
 export function lazy<P extends Props>(
   loader: () => Promise<{ default: ComponentFn<P> }>,
-): ComponentFn<P> & { preload: () => Promise<{ default: ComponentFn<P> }> } {
-  let resolved: ComponentFn<P> | null = null
-  let error: Error | null = null
+): LazyComponent<P> & { preload: () => Promise<{ default: ComponentFn<P> }> } {
+  const loaded = pyreonSignal<ComponentFn<P> | null>(null)
+  const error = pyreonSignal<Error | null>(null)
   let promise: Promise<{ default: ComponentFn<P> }> | null = null
 
   const load = () => {
     if (!promise) {
       promise = loader()
         .then((mod) => {
-          resolved = mod.default
+          loaded.set(mod.default)
           return mod
         })
         .catch((err) => {
-          error = err instanceof Error ? err : new Error(String(err))
-          // Allow retry on next render by resetting the promise
+          const e = err instanceof Error ? err : new Error(String(err))
+          error.set(e)
           promise = null
-          throw error
+          throw e
         })
     }
     return promise
   }
 
+  // Uses Pyreon's __loading protocol — Suspense checks this to show fallback.
+  // __loading() triggers load() on first call so loading starts when Suspense
+  // first encounters the component (not at module load time, not on first render).
   const LazyComponent = ((props: P) => {
-    if (error) throw error
-    if (!resolved) {
-      // Throw the promise so Suspense can catch it
-      throw load()
-    }
-    return resolved(props)
-  }) as ComponentFn<P> & { preload: () => Promise<{ default: ComponentFn<P> }> }
-
+    const err = error()
+    if (err) throw err
+    const comp = loaded()
+    if (!comp) return null
+    return comp(props)
+  }) as LazyComponent<P> & { preload: () => Promise<{ default: ComponentFn<P> }> }
+
+  LazyComponent.__loading = () => {
+    const isLoading = loaded() === null && error() === null
+    if (isLoading) load()
+    return isLoading
+  }
   LazyComponent.preload = load
 
   return LazyComponent

package/src/jsx-runtime.ts

@@ -0,0 +1,300 @@
+/**
+ * Compat JSX runtime for SolidJS compatibility mode.
+ *
+ * When `jsxImportSource` is redirected to `@pyreon/solid-compat` (via the vite
+ * plugin's `compat: "solid"` option), OXC rewrites JSX to import from this file.
+ *
+ * For component VNodes, we wrap the component function so it returns a reactive
+ * accessor — enabling Solid-style re-renders on state change while Pyreon's
+ * existing renderer handles all DOM work.
+ *
+ * The component body runs inside `runUntracked` to prevent signal reads (from
+ * createSignal getters) from being tracked by the reactive accessor. Only the
+ * version signal triggers re-renders.
+ *
+ * ## Child instance preservation
+ *
+ * When a parent component re-renders, mountReactive does a full teardown+rebuild
+ * of the DOM tree. Without preservation, child components get brand new
+ * RenderContexts with empty hooks arrays — causing `onMount` and `onCleanup`
+ * to fire again, which can trigger infinite re-render loops.
+ *
+ * To fix this, we store child RenderContexts in the parent's hooks array (indexed
+ * by the parent's hook counter). When the child wrapper is called again after a
+ * parent re-render, it reuses the existing ctx (preserving hooks state), so
+ * hook-indexed guards like `if (idx >= ctx.hooks.length) return` work correctly
+ * and lifecycle hooks don't re-fire.
+ */
+
+import type { ComponentFn, Props, VNode, VNodeChild } from "@pyreon/core"
+import {
+  ErrorBoundary,
+  For,
+  Fragment,
+  h,
+  Match,
+  onUnmount,
+  Show,
+  Suspense,
+  Switch,
+} from "@pyreon/core"
+import { runUntracked, signal } from "@pyreon/reactivity"
+
+export { Fragment }
+
+// ─── Render context (used by hooks) ──────────────────────────────────────────
+
+export interface RenderContext {
+  hooks: unknown[]
+  scheduleRerender: () => void
+  /** Effect entries pending execution after render */
+  pendingEffects: EffectEntry[]
+  /** Layout effect entries pending execution after render */
+  pendingLayoutEffects: EffectEntry[]
+  /** Set to true when the component is unmounted */
+  unmounted: boolean
+  /** Callbacks to run on unmount (lifecycle + effect cleanups) */
+  unmountCallbacks: (() => void)[]
+}
+
+export interface EffectEntry {
+  // biome-ignore lint/suspicious/noConfusingVoidType: matches Solid's effect signature
+  fn: () => (() => void) | void
+  deps: unknown[] | undefined
+  cleanup: (() => void) | undefined
+}
+
+let _currentCtx: RenderContext | null = null
+let _hookIndex = 0
+
+export function getCurrentCtx(): RenderContext | null {
+  return _currentCtx
+}
+
+export function getHookIndex(): number {
+  return _hookIndex++
+}
+
+export function beginRender(ctx: RenderContext): void {
+  _currentCtx = ctx
+  _hookIndex = 0
+  ctx.pendingEffects = []
+  ctx.pendingLayoutEffects = []
+}
+
+export function endRender(): void {
+  _currentCtx = null
+  _hookIndex = 0
+}
+
+// ─── Effect runners ──────────────────────────────────────────────────────────
+
+function runLayoutEffects(entries: EffectEntry[]): void {
+  for (const entry of entries) {
+    if (entry.cleanup) entry.cleanup()
+    const cleanup = entry.fn()
+    entry.cleanup = typeof cleanup === "function" ? cleanup : undefined
+  }
+}
+
+function scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {
+  if (entries.length === 0) return
+  queueMicrotask(() => {
+    for (const entry of entries) {
+      if (ctx.unmounted) return
+      if (entry.cleanup) entry.cleanup()
+      const cleanup = entry.fn()
+      entry.cleanup = typeof cleanup === "function" ? cleanup : undefined
+    }
+  })
+}
+
+// ─── Child instance preservation ─────────────────────────────────────────────
+
+/** Stored in the parent's hooks array to preserve child state across re-renders */
+interface ChildInstance {
+  ctx: RenderContext
+  version: ReturnType<typeof signal<number>>
+  updateScheduled: boolean
+}
+
+// Internal prop keys for passing parent context info to child wrappers
+const _CHILD_INSTANCE = Symbol.for("pyreon.childInstance")
+const noop = () => {
+  /* noop */
+}
+
+// ─── Component wrapping ──────────────────────────────────────────────────────
+
+// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping
+const _wrapperCache = new WeakMap<Function, ComponentFn>()
+
+// Pyreon core components that must NOT be wrapped — they rely on internal reactivity
+// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component set
+const _nativeComponents: Set<Function> = new Set([
+  Show,
+  For,
+  Switch,
+  Match,
+  Suspense,
+  ErrorBoundary,
+])
+
+// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping
+function wrapCompatComponent(solidComponent: Function): ComponentFn {
+  if (_nativeComponents.has(solidComponent)) return solidComponent as ComponentFn
+
+  let wrapped = _wrapperCache.get(solidComponent)
+  if (wrapped) return wrapped
+
+  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's
+  // mountChild treats as a reactive expression via mountReactive.
+  wrapped = ((props: Props) => {
+    // Check for a preserved child instance from the parent's hooks
+    const existing = (props as Record<symbol, unknown>)[_CHILD_INSTANCE] as
+      | ChildInstance
+      | undefined
+
+    const ctx: RenderContext = existing?.ctx ?? {
+      hooks: [],
+      scheduleRerender: () => {
+        // Will be replaced below after version signal is created
+      },
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: [],
+    }
+
+    // When reusing an existing ctx after parent re-render, reset unmounted flag
+    // and clear stale unmount callbacks (they belong to the previous mount cycle)
+    if (existing) {
+      ctx.unmounted = false
+      ctx.unmountCallbacks = []
+    }
+
+    const version = existing?.version ?? signal(0)
+
+    // Use a shared updateScheduled flag (preserved across parent re-renders)
+    let updateScheduled = existing?.updateScheduled ?? false
+
+    ctx.scheduleRerender = () => {
+      if (ctx.unmounted || updateScheduled) return
+      updateScheduled = true
+      queueMicrotask(() => {
+        updateScheduled = false
+        if (!ctx.unmounted) version.set(version.peek() + 1)
+      })
+    }
+
+    // Register cleanup when component unmounts
+    onUnmount(() => {
+      ctx.unmounted = true
+      for (const cb of ctx.unmountCallbacks) cb()
+    })
+
+    // Strip the internal prop before passing to the component
+    const { [_CHILD_INSTANCE]: _stripped, ...cleanProps } = props as Record<
+      string | symbol,
+      unknown
+    >
+
+    // Return reactive accessor — Pyreon's mountChild calls mountReactive
+    return () => {
+      version() // tracked read — triggers re-execution when state changes
+      beginRender(ctx)
+      // runUntracked prevents signal reads (from createSignal getters) from
+      // being tracked by this accessor — only the version signal should trigger re-renders
+      const result = runUntracked(() => (solidComponent as ComponentFn)(cleanProps as Props))
+      const layoutEffects = ctx.pendingLayoutEffects
+      const effects = ctx.pendingEffects
+      endRender()
+
+      runLayoutEffects(layoutEffects)
+      scheduleEffects(ctx, effects)
+
+      return result
+    }
+  }) as unknown as ComponentFn
+
+  // Forward __loading from lazy components so Pyreon's Suspense can detect them
+  if ("__loading" in solidComponent) {
+    ;(wrapped as unknown as Record<string, unknown>).__loading = (
+      solidComponent as unknown as Record<string, unknown>
+    ).__loading
+  }
+
+  _wrapperCache.set(solidComponent, wrapped)
+  return wrapped
+}
+
+// ─── Child instance lookup ───────────────────────────────────────────────────
+
+function createChildInstance(): ChildInstance {
+  return {
+    ctx: {
+      hooks: [],
+      scheduleRerender: noop,
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: [],
+    },
+    version: signal(0),
+    updateScheduled: false,
+  }
+}
+
+/**
+ * During a parent component render, get or create the child instance at the
+ * current hook index. Returns undefined when called outside a component render.
+ */
+function resolveChildInstance(): ChildInstance | undefined {
+  const parentCtx = _currentCtx
+  if (!parentCtx) return undefined
+
+  const idx = _hookIndex++
+  if (idx < parentCtx.hooks.length) {
+    return parentCtx.hooks[idx] as ChildInstance
+  }
+  const instance = createChildInstance()
+  parentCtx.hooks[idx] = instance
+  return instance
+}
+
+// ─── JSX functions ───────────────────────────────────────────────────────────
+
+export function jsx(
+  type: string | ComponentFn | symbol,
+  props: Props & { children?: VNodeChild | VNodeChild[] },
+  key?: string | number | null,
+): VNode {
+  const { children, ...rest } = props
+  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props
+
+  if (typeof type === "function") {
+    if (_nativeComponents.has(type)) {
+      const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
+      return h(type as ComponentFn, componentProps)
+    }
+
+    const wrapped = wrapCompatComponent(type)
+    const componentProps =
+      children !== undefined ? { ...propsWithKey, children } : { ...propsWithKey }
+
+    const childInstance = resolveChildInstance()
+    if (childInstance) {
+      ;(componentProps as Record<symbol, unknown>)[_CHILD_INSTANCE] = childInstance
+    }
+
+    return h(wrapped, componentProps)
+  }
+
+  // DOM element or symbol (Fragment): children go in vnode.children
+  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
+
+  return h(type, propsWithKey, ...(childArray as VNodeChild[]))
+}
+
+export const jsxs = jsx
+export const jsxDEV = jsx