@fictjs/runtime 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fictjs/runtime",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Fict reactive runtime",
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,7 @@
     "src"
   ],
   "devDependencies": {
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.4.0",
     "tsup": "^8.5.1"
   },
   "scripts": {

package/src/binding.ts

@@ -92,6 +92,44 @@ export function unwrap<T>(value: MaybeReactive<T>): T {
   return isReactive(value) ? (value as () => T)() : value
 }
 
+/**
+ * Invoke an event handler or handler accessor in a safe way.
+ * Supports handlers that return another handler and handlers that expect an
+ * optional data payload followed by the event.
+ */
+export function callEventHandler(
+  handler: EventListenerOrEventListenerObject | null | undefined,
+  event: Event,
+  node?: EventTarget | null,
+  data?: unknown,
+): void {
+  if (!handler) return
+
+  const context = (node ?? event.currentTarget ?? undefined) as EventTarget | undefined
+  const invoke = (fn: EventListenerOrEventListenerObject | null | undefined): void => {
+    if (typeof fn === 'function') {
+      const result =
+        data === undefined
+          ? (fn as EventListener).call(context, event)
+          : (fn as (data: unknown, e: Event) => unknown).call(context, data, event)
+
+      if (typeof result === 'function' && result !== fn) {
+        if (data === undefined) {
+          ;(result as EventListener).call(context, event)
+        } else {
+          ;(result as (data: unknown, e: Event) => unknown).call(context, data, event)
+        }
+      } else if (result && typeof (result as EventListenerObject).handleEvent === 'function') {
+        ;(result as EventListenerObject).handleEvent.call(result as EventListenerObject, event)
+      }
+    } else if (fn && typeof fn.handleEvent === 'function') {
+      fn.handleEvent.call(fn, event)
+    }
+  }
+
+  invoke(handler)
+}
+
 export const PRIMITIVE_PROXY = Symbol('fict:primitive-proxy')
 const PRIMITIVE_PROXY_RAW_VALUE = Symbol('fict:primitive-proxy:raw-value')
 
@@ -908,15 +946,10 @@ function globalEventHandler(e: Event): void {
       const hasData = rawData !== undefined
       const resolvedNodeData = hasData ? resolveData(rawData) : undefined
       if (typeof handler === 'function') {
-        // Handler with optional data: handler(data, event?) or handler(event)
-        if (hasData) {
-          ;(handler as (data: unknown, e: Event) => void).call(node, resolvedNodeData, e)
-        } else {
-          ;(handler as EventListener).call(node, e)
-        }
+        callEventHandler(handler, e, node, hasData ? resolvedNodeData : undefined)
       } else if (Array.isArray(handler)) {
         const tupleData = resolveData(handler[1])
-        ;(handler[0] as (data: unknown, e: Event) => void).call(node, tupleData, e)
+        callEventHandler(handler[0], e, node, tupleData)
       }
       if (e.cancelBubble) return false
     }
@@ -1050,31 +1083,20 @@ export function bindEvent(
     // Ensure global delegation is active for this event
     delegateEvents([eventName])
 
-    const createWrapped = (
-      resolve: () => EventListenerOrEventListenerObject | null | undefined,
-    ) => {
-      const wrapped = function (this: any, ...args: any[]) {
-        try {
-          const fn = resolve()
-          if (typeof fn === 'function') {
-            return (fn as EventListener).apply(this, args as [Event])
-          } else if (fn && typeof fn.handleEvent === 'function') {
-            return fn.handleEvent.apply(fn, args as [Event])
-          }
-        } catch (err) {
-          handleError(err, { source: 'event', eventName }, rootRef)
-        }
-      }
-      return wrapped
-    }
-
     const resolveHandler = isReactive(handler)
       ? (handler as () => EventListenerOrEventListenerObject | null | undefined)
       : () => handler
 
     // Cache a single wrapper that resolves the latest handler when invoked
     // @ts-expect-error - using dynamic property for delegation
-    el[key] = createWrapped(resolveHandler)
+    el[key] = function (this: any, ...args: any[]) {
+      try {
+        const fn = resolveHandler()
+        callEventHandler(fn as EventListenerOrEventListenerObject, args[0] as Event, el)
+      } catch (err) {
+        handleError(err, { source: 'event', eventName }, rootRef)
+      }
+    }
 
     // Cleanup: remove property (no effect needed for static or reactive)
     return () => {
@@ -1091,11 +1113,7 @@ export function bindEvent(
   const wrapped: EventListener = event => {
     try {
       const resolved = getHandler()
-      if (typeof resolved === 'function') {
-        ;(resolved as EventListener)(event)
-      } else if (resolved && typeof (resolved as EventListenerObject).handleEvent === 'function') {
-        ;(resolved as EventListenerObject).handleEvent(event)
-      }
+      callEventHandler(resolved as EventListenerOrEventListenerObject, event, el)
     } catch (err) {
       if (handleError(err, { source: 'event', eventName }, rootRef)) {
         return

package/src/index.ts

@@ -3,9 +3,11 @@
 // ============================================================================
 
 export { createSignal, createSelector, type Signal, $state } from './signal'
+export { effectScope } from './signal'
 export { createStore, type Store } from './store'
 export { createMemo, type Memo, $memo } from './memo'
 export { createEffect, createRenderEffect, type Effect, $effect } from './effect'
+export { createScope, runInScope, type ReactiveScope } from './scope'
 export {
   __fictUseContext,
   __fictPushContext,
@@ -83,6 +85,7 @@ export {
   bindStyle,
   bindClass,
   bindEvent,
+  callEventHandler,
   bindProperty,
   bindRef,
   insert,

package/src/scope.ts

@@ -0,0 +1,55 @@
+import { isReactive, type MaybeReactive } from './binding'
+import { createEffect } from './effect'
+import { createRoot, onCleanup, registerRootCleanup } from './lifecycle'
+
+export { effectScope } from './signal'
+
+export interface ReactiveScope {
+  run<T>(fn: () => T): T
+  stop(): void
+}
+
+/**
+ * Create an explicit reactive scope that can contain effects/memos and be stopped manually.
+ * The scope registers with the current root for cleanup.
+ */
+export function createScope(): ReactiveScope {
+  let dispose: (() => void) | null = null
+
+  const stop = () => {
+    if (dispose) {
+      dispose()
+      dispose = null
+    }
+  }
+
+  const run = <T>(fn: () => T): T => {
+    stop()
+    const { dispose: rootDispose, value } = createRoot(fn)
+    dispose = rootDispose
+    return value
+  }
+
+  registerRootCleanup(stop)
+  return { run, stop }
+}
+
+/**
+ * Run a block of reactive code inside a managed scope that follows a boolean flag.
+ * When the flag turns false, the scope is disposed and all contained effects/memos are cleaned up.
+ */
+export function runInScope(flag: MaybeReactive<boolean>, fn: () => void): void {
+  const scope = createScope()
+  const evaluate = () => (isReactive(flag) ? (flag as () => boolean)() : !!flag)
+
+  createEffect(() => {
+    const enabled = evaluate()
+    if (enabled) {
+      scope.run(fn)
+    } else {
+      scope.stop()
+    }
+  })
+
+  onCleanup(scope.stop)
+}

package/src/slim.ts

@@ -9,6 +9,7 @@
 export { createSignal, createSelector, $state } from './signal'
 export { createMemo } from './memo'
 export { createEffect, createRenderEffect } from './effect'
+export { effectScope, createScope, runInScope, type ReactiveScope } from './scope'
 export { batch, untrack } from './scheduler'
 
 // DOM rendering