@fictjs/runtime 0.1.0 → 0.2.0

package/dist/{props-BBi8Tkks.d.ts → props-DAyeRPwH.d.ts}

@@ -1,7 +1,4 @@
-import { C as Cleanup, F as FictNode, D as DOMElement } from './effect-Auji1rz9.js';
-
-type Memo<T> = () => T;
-declare function createMemo<T>(fn: () => T): Memo<T>;
+import { C as Cleanup, F as FictNode, D as DOMElement } from './effect-ClARNUCc.js';
 
 type LifecycleFn = () => void | Cleanup;
 interface CreateRootOptions {
@@ -15,6 +12,9 @@ declare function createRoot<T>(fn: () => T, options?: CreateRootOptions): {
     value: T;
 };
 
+type Memo<T> = () => T;
+declare function createMemo<T>(fn: () => T): Memo<T>;
+
 declare const Fragment: unique symbol;
 declare namespace JSX {
     type Element = FictNode;

package/dist/{scope-S6eAzBJZ.d.ts → scope-DvgMquEy.d.ts}

@@ -1,4 +1,4 @@
-import { O as MaybeReactive } from './effect-Auji1rz9.js';
+import { O as MaybeReactive } from './effect-ClARNUCc.js';
 
 /**
  * Signal accessor - function to get/set signal value

package/dist/{scope-DKYzWfTn.d.cts → scope-xmdo6lVU.d.cts}

@@ -1,4 +1,4 @@
-import { O as MaybeReactive } from './effect-Auji1rz9.cjs';
+import { O as MaybeReactive } from './effect-ClARNUCc.cjs';
 
 /**
  * Signal accessor - function to get/set signal value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fictjs/runtime",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Fict reactive runtime",
   "publishConfig": {
     "access": "public",

package/src/binding.ts

@@ -36,7 +36,7 @@ import {
 } from './lifecycle'
 import { toNodeArray, removeNodes, insertNodesBefore } from './node-ops'
 import { batch } from './scheduler'
-import { computed, untrack } from './signal'
+import { computed, untrack, isSignal, isComputed, isEffect, isEffectScope } from './signal'
 import type { Cleanup, FictNode } from './types'
 
 const isDev =
@@ -70,11 +70,43 @@ export interface BindingHandle {
 // ============================================================================
 
 /**
- * Check if a value is reactive (a getter function)
- * Note: Event handlers (functions that take arguments) are NOT reactive values
+ * Check if a value is reactive (a getter function that returns a value).
+ *
+ * A value is considered reactive if:
+ * 1. It's a signal or computed value created by the runtime (marked with Symbol)
+ * 2. It's a zero-argument function (getter pattern used by the compiler)
+ *
+ * NOT considered reactive:
+ * - Event handlers (functions that take arguments)
+ * - Effect disposers (zero-arg but for cleanup, not value access)
+ * - Effect scopes (zero-arg but for scope management)
+ *
+ * @param value - The value to check
+ * @returns true if the value is a reactive getter
+ *
+ * @example
+ * ```ts
+ * const [count, setCount] = createSignal(0)
+ * isReactive(count)          // true - signal accessor
+ * isReactive(() => 42)       // true - getter pattern
+ * isReactive((x) => x)       // false - takes argument
+ * isReactive('hello')        // false - not a function
+ * isReactive(effectDisposer) // false - effect cleanup function
+ * ```
  */
 export function isReactive(value: unknown): value is () => unknown {
-  return typeof value === 'function' && value.length === 0
+  if (typeof value !== 'function') return false
+
+  // Check for runtime-created signals/computed (most reliable)
+  if (isSignal(value) || isComputed(value)) return true
+
+  // Exclude effect disposers and effect scopes - they are zero-arg
+  // functions but not reactive getters
+  if (isEffect(value) || isEffectScope(value)) return false
+
+  // Fall back to length check for compiler-generated getters
+  // Zero-argument functions are treated as reactive getters
+  return value.length === 0
 }
 
 /**
@@ -590,6 +622,7 @@ export function insert(
     const root = createRootContext(hostRoot)
     const prev = pushRoot(root)
     let nodes: Node[] = []
+    let handledError = false
     try {
       let newNode: Node | Node[]
 
@@ -614,14 +647,34 @@ export function insert(
       }
 
       nodes = toNodeArray(newNode)
+      if (root.suspended) {
+        handledError = true
+        destroyRoot(root)
+        return
+      }
       if (parentNode) {
         insertNodesBefore(parentNode, nodes, marker)
       }
+    } catch (err) {
+      if (handleSuspend(err as any, root)) {
+        handledError = true
+        destroyRoot(root)
+        return
+      }
+      if (handleError(err, { source: 'renderChild' }, root)) {
+        handledError = true
+        destroyRoot(root)
+        return
+      }
+      throw err
     } finally {
       popRoot(prev)
-      flushOnMount(root)
+      if (!handledError) {
+        flushOnMount(root)
+      }
     }
 
+    // If we reach here, no error was handled (handledError blocks return early)
     currentRoot = root
     currentNodes = nodes
   })

package/src/effect.ts

@@ -1,6 +1,7 @@
 import {
   getCurrentRoot,
   handleError,
+  handleSuspend,
   registerRootCleanup,
   runCleanupList,
   withEffectCleanups,
@@ -34,6 +35,9 @@ export function createEffect(fn: Effect): () => void {
           bucket.push(maybeCleanup)
         }
       } catch (err) {
+        if (handleSuspend(err as any, rootForError)) {
+          return
+        }
         if (handleError(err, { source: 'effect' }, rootForError)) {
           return
         }
@@ -43,7 +47,7 @@ export function createEffect(fn: Effect): () => void {
     cleanups = bucket
   }
 
-  const disposeEffect = effectWithCleanup(run, doCleanup)
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError)
   const teardown = () => {
     runCleanupList(cleanups)
     disposeEffect()
@@ -76,6 +80,9 @@ export function createRenderEffect(fn: Effect): () => void {
         cleanup = maybeCleanup
       }
     } catch (err) {
+      if (handleSuspend(err as any, rootForError)) {
+        return
+      }
       const handled = handleError(err, { source: 'effect' }, rootForError)
       if (handled) {
         return
@@ -84,7 +91,7 @@ export function createRenderEffect(fn: Effect): () => void {
     }
   }
 
-  const disposeEffect = effectWithCleanup(run, doCleanup)
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError)
   const teardown = () => {
     if (cleanup) {
       cleanup()

package/src/lifecycle.ts

@@ -15,6 +15,7 @@ export interface RootContext {
   destroyCallbacks: Cleanup[]
   errorHandlers?: ErrorHandler[]
   suspenseHandlers?: SuspenseHandler[]
+  suspended?: boolean
 }
 
 export interface CreateRootOptions {
@@ -30,7 +31,7 @@ const globalErrorHandlers = new WeakMap<RootContext, ErrorHandler[]>()
 const globalSuspenseHandlers = new WeakMap<RootContext, SuspenseHandler[]>()
 
 export function createRootContext(parent?: RootContext): RootContext {
-  return { parent, cleanups: [], destroyCallbacks: [] }
+  return { parent, cleanups: [], destroyCallbacks: [], suspended: false }
 }
 
 export function pushRoot(root: RootContext): RootContext | undefined {
@@ -267,13 +268,18 @@ export function handleSuspend(
   startRoot?: RootContext,
 ): boolean {
   let root: RootContext | undefined = startRoot ?? currentRoot
+  const originRoot = root // Preserve reference to set suspended flag on success
   while (root) {
     const handlers = root.suspenseHandlers
     if (handlers && handlers.length) {
       for (let i = handlers.length - 1; i >= 0; i--) {
         const handler = handlers[i]!
         const handled = handler(token)
-        if (handled !== false) return true
+        if (handled !== false) {
+          // Only set suspended = true when a handler actually handles the token
+          if (originRoot) originRoot.suspended = true
+          return true
+        }
       }
     }
     root = root.parent
@@ -288,7 +294,11 @@ export function handleSuspend(
     for (let i = globalForRoot.length - 1; i >= 0; i--) {
       const handler = globalForRoot[i]!
       const handled = handler(token)
-      if (handled !== false) return true
+      if (handled !== false) {
+        // Only set suspended = true when a handler actually handles the token
+        if (originRoot) originRoot.suspended = true
+        return true
+      }
     }
   }
   return false

package/src/signal.ts

@@ -1,6 +1,12 @@
 import { beginFlushGuard, beforeEffectRunGuard, endFlushGuard } from './cycle-guard'
 import { getDevtoolsHook } from './devtools'
-import { registerRootCleanup } from './lifecycle'
+import {
+  getCurrentRoot,
+  handleError,
+  handleSuspend,
+  registerRootCleanup,
+  type RootContext,
+} from './lifecycle'
 
 const isDev =
   typeof __DEV__ !== 'undefined'
@@ -103,6 +109,8 @@ export interface EffectNode extends BaseNode {
   depsTail: Link | undefined
   /** Optional cleanup runner to be called before checkDirty */
   runCleanup?: () => void
+  /** Root context for error/suspense handling */
+  root?: RootContext
   /** Devtools ID */
   __id?: number | undefined
 }
@@ -808,7 +816,25 @@ function runEffect(e: EffectNode): void {
         inCleanup = false
       }
     }
-    if (checkDirty(e.deps, e)) {
+    let isDirty = false
+    try {
+      isDirty = checkDirty(e.deps, e)
+    } catch (err) {
+      if (handleSuspend(err as any, e.root)) {
+        if (e.flags !== 0) {
+          e.flags = Watching
+        }
+        return
+      }
+      if (handleError(err, { source: 'effect' }, e.root)) {
+        if (e.flags !== 0) {
+          e.flags = Watching
+        }
+        return
+      }
+      throw err
+    }
+    if (isDirty) {
       ++cycle
       effectRunDevtools(e)
       e.depsTail = undefined
@@ -1031,7 +1057,7 @@ function computedOper<T>(this: ComputedNode<T>): T {
  * @returns An effect disposer function
  */
 export function effect(fn: () => void): EffectDisposer {
-  const e = {
+  const e: EffectNode = {
     fn,
     subs: undefined,
     subsTail: undefined,
@@ -1040,6 +1066,10 @@ export function effect(fn: () => void): EffectDisposer {
     flags: WatchingRunning,
     __id: undefined as number | undefined,
   }
+  const root = getCurrentRoot()
+  if (root) {
+    e.root = root
+  }
 
   registerEffectDevtools(e)
 
@@ -1066,9 +1096,14 @@ export function effect(fn: () => void): EffectDisposer {
  * cleanup functions to access the previous values of signals.
  * @param fn - The effect function
  * @param cleanupRunner - Function to run cleanups before signal value commit
+ * @param root - Root context for error/suspense handling (defaults to current root)
  * @returns An effect disposer function
  */
-export function effectWithCleanup(fn: () => void, cleanupRunner: () => void): EffectDisposer {
+export function effectWithCleanup(
+  fn: () => void,
+  cleanupRunner: () => void,
+  root?: RootContext,
+): EffectDisposer {
   const e: EffectNode = {
     fn,
     subs: undefined,
@@ -1079,6 +1114,10 @@ export function effectWithCleanup(fn: () => void, cleanupRunner: () => void): Ef
     runCleanup: cleanupRunner,
     __id: undefined as number | undefined,
   }
+  const resolvedRoot = root ?? getCurrentRoot()
+  if (resolvedRoot) {
+    e.root = resolvedRoot
+  }
 
   registerEffectDevtools(e)
 

package/src/suspense.ts

@@ -60,11 +60,6 @@ export function Suspense(props: SuspenseProps): FictNode {
       ? (props.fallback as (e?: unknown) => FictNode)(err)
       : props.fallback
 
-  const switchView = (view: FictNode | null) => {
-    currentView(view)
-    renderView(view)
-  }
-
   const renderView = (view: FictNode | null) => {
     if (cleanup) {
       cleanup()
@@ -88,8 +83,9 @@ export function Suspense(props: SuspenseProps): FictNode {
       // Suspended view: child threw a suspense token and was handled upstream.
       // Avoid replacing existing fallback content; tear down this attempt.
       const suspendedAttempt =
-        nodes.length > 0 &&
-        nodes.every(node => node instanceof Comment && (node as Comment).data === 'fict:suspend')
+        root.suspended ||
+        (nodes.length > 0 &&
+          nodes.every(node => node instanceof Comment && (node as Comment).data === 'fict:suspend'))
       if (suspendedAttempt) {
         popRoot(prev)
         destroyRoot(root)
@@ -134,7 +130,10 @@ export function Suspense(props: SuspenseProps): FictNode {
   registerSuspenseHandler(token => {
     const tokenEpoch = epoch
     pending(pending() + 1)
-    switchView(toFallback())
+    // Directly render fallback instead of using switchView to avoid
+    // triggering the effect which would cause duplicate renders
+    currentView(toFallback())
+    renderView(toFallback())
 
     const thenable = (token as SuspenseToken).then
       ? (token as SuspenseToken)
@@ -157,7 +156,9 @@ export function Suspense(props: SuspenseProps): FictNode {
           const newPending = Math.max(0, pending() - 1)
           pending(newPending)
           if (newPending === 0) {
-            switchView(props.children ?? null)
+            // Directly render children instead of using switchView
+            currentView(props.children ?? null)
+            renderView(props.children ?? null)
             onResolveMaybe()
           }
         },
@@ -180,9 +181,10 @@ export function Suspense(props: SuspenseProps): FictNode {
     return false
   })
 
-  createEffect(() => {
-    renderView(currentView())
-  })
+  // Initial render - render children directly
+  // Note: This will be called synchronously during component creation.
+  // If children suspend, the handler above will be called and switch to fallback.
+  renderView(props.children ?? null)
 
   if (props.resetKeys !== undefined) {
     const isGetter =
@@ -195,7 +197,9 @@ export function Suspense(props: SuspenseProps): FictNode {
         prev = next
         epoch++
         pending(0)
-        switchView(props.children ?? null)
+        // Directly render children instead of using switchView
+        currentView(props.children ?? null)
+        renderView(props.children ?? null)
       }
     })
   }