@fictjs/runtime 0.5.2 → 0.7.0

package/src/binding.ts

@@ -44,7 +44,53 @@ import type { Cleanup, FictNode } from './types'
 const isDev =
   typeof __DEV__ !== 'undefined'
     ? __DEV__
-    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
+
+const TEXT_CACHE = Symbol('fict:text')
+const ATTR_CACHE = Symbol('fict:attr')
+const PROP_CACHE = Symbol('fict:prop')
+const STYLE_CACHE = Symbol('fict:style')
+const CLASS_STATE_CACHE = Symbol('fict:class-state')
+const CLASS_VALUE_CACHE = Symbol('fict:class-value')
+const NON_REACTIVE_FN_MARKER = Symbol.for('fict:non-reactive-fn')
+const REACTIVE_FN_MARKER = Symbol.for('fict:reactive-fn')
+const NON_REACTIVE_FN_REGISTRY_KEY = Symbol.for('fict:non-reactive-fn-registry')
+
+type NonReactiveRegistryHost = typeof globalThis & {
+  [NON_REACTIVE_FN_REGISTRY_KEY]?: WeakSet<(...args: unknown[]) => unknown>
+}
+
+const PROPERTY_BINDING_KEYS = new Set([
+  'value',
+  'checked',
+  'selected',
+  'disabled',
+  'readOnly',
+  'multiple',
+  'muted',
+])
+
+const STYLE_PROP_CACHE = new Map<string, string>()
+const hasOwn = Object.prototype.hasOwnProperty
+
+function getNonReactiveFnRegistry(): WeakSet<(...args: unknown[]) => unknown> {
+  const host = globalThis as NonReactiveRegistryHost
+  let registry = host[NON_REACTIVE_FN_REGISTRY_KEY]
+  if (!registry) {
+    registry = new WeakSet<(...args: unknown[]) => unknown>()
+    host[NON_REACTIVE_FN_REGISTRY_KEY] = registry
+  }
+  return registry
+}
+
+function isExplicitReactiveFn(value: unknown): boolean {
+  if (typeof value !== 'function') return false
+  return (
+    (value as ((...args: unknown[]) => unknown) & { [REACTIVE_FN_MARKER]?: boolean })[
+      REACTIVE_FN_MARKER
+    ] === true
+  )
+}
 
 // ============================================================================
 // Type Definitions
@@ -99,9 +145,15 @@ export interface BindingHandle {
 export function isReactive(value: unknown): value is () => unknown {
   if (typeof value !== 'function') return false
 
+  // Explicit non-reactive marker always wins.
+  if (isNonReactiveFn(value)) return false
+
   // Check for runtime-created signals/computed (most reliable)
   if (isSignal(value) || isComputed(value)) return true
 
+  // Explicit marker for user-authored reactive getters.
+  if (isExplicitReactiveFn(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
@@ -112,20 +164,22 @@ export function isReactive(value: unknown): value is () => unknown {
 }
 
 /**
- * fix: Stricter reactive check that only considers explicitly marked values.
- * Used for event handlers where we don't want to misidentify regular callbacks
- * (like `onClick={() => doSomething()}`) as reactive getters.
+ * Stricter reactive check that only considers explicitly marked values.
+ * Used in DOM/event paths where regular callbacks must not be treated as
+ * reactive getters.
  *
  * Only returns true for:
  * - Signal accessors (created by createSignal)
  * - Computed accessors (created by createMemo)
  * - Prop getters (marked by __fictProp)
+ * - Explicitly marked getters (reactive(...))
  */
-function isStrictlyReactive(value: unknown): value is () => unknown {
+export function isStrictlyReactive(value: unknown): value is () => unknown {
   if (typeof value !== 'function') return false
-  // Only check for explicitly marked reactive values
-  // Do NOT use length === 0 as fallback - many callbacks have 0 params
-  return isSignal(value) || isComputed(value) || isPropGetterFn(value)
+  // Do NOT use length === 0 as fallback - many callbacks have 0 params.
+  return (
+    isSignal(value) || isComputed(value) || isPropGetterFn(value) || isExplicitReactiveFn(value)
+  )
 }
 
 // Import-like check for prop getter marker without circular dependency
@@ -135,6 +189,48 @@ function isPropGetterFn(value: unknown): boolean {
   return (value as any)[PROP_GETTER_MARKER] === true
 }
 
+function isNonReactiveFn(value: unknown): boolean {
+  if (typeof value !== 'function') return false
+  if (getNonReactiveFnRegistry().has(value as (...args: unknown[]) => unknown)) return true
+  return (
+    (value as ((...args: unknown[]) => unknown) & { [NON_REACTIVE_FN_MARKER]?: boolean })[
+      NON_REACTIVE_FN_MARKER
+    ] === true
+  )
+}
+
+/**
+ * Mark a function as non-reactive so runtime bindings won't treat it as a getter.
+ * Useful for callback props / function-as-child patterns that must remain callbacks.
+ */
+export function nonReactive<T extends (...args: unknown[]) => unknown>(fn: T): T {
+  getNonReactiveFnRegistry().add(fn as (...args: unknown[]) => unknown)
+  if (Object.isExtensible(fn)) {
+    try {
+      ;(fn as T & { [NON_REACTIVE_FN_MARKER]?: boolean })[NON_REACTIVE_FN_MARKER] = true
+    } catch {
+      // Ignore marker failures on non-standard function objects.
+    }
+  }
+  return fn
+}
+
+/**
+ * Mark a zero-arg function as an explicit reactive getter.
+ * Useful when authoring runtime code manually and you need function values
+ * to participate in reactive binding without relying on heuristics.
+ */
+export function reactive<T>(fn: () => T): () => T {
+  if (Object.isExtensible(fn)) {
+    try {
+      ;(fn as (() => T) & { [REACTIVE_FN_MARKER]?: boolean })[REACTIVE_FN_MARKER] = true
+    } catch {
+      // Ignore marker failures on non-standard function objects.
+    }
+  }
+  return fn
+}
+
 /**
  * Unwrap a potentially reactive value to get the actual value
  */
@@ -202,15 +298,11 @@ export function createTextBinding(value: MaybeReactive<unknown>): Text {
   if (isReactive(value)) {
     // Reactive: create effect to update text when value changes
     createRenderEffect(() => {
-      const v = (value as () => unknown)()
-      const fmt = formatTextValue(v)
-      if (text.data !== fmt) {
-        text.data = fmt
-      }
+      setText(text, (value as () => unknown)())
     })
   } else {
     // Static: set once
-    text.data = formatTextValue(value)
+    setText(text, value)
   }
 
   return text
@@ -221,12 +313,22 @@ export function createTextBinding(value: MaybeReactive<unknown>): Text {
  * This is a convenience function for binding to existing DOM nodes.
  */
 export function bindText(textNode: Text, getValue: () => unknown): Cleanup {
-  return createRenderEffect(() => {
-    const value = formatTextValue(getValue())
-    if (textNode.data !== value) {
-      textNode.data = value
-    }
-  })
+  return createRenderEffect(() => setText(textNode, getValue()))
+}
+
+/**
+ * Patch text node content with per-node value caching.
+ * This is the low-level primitive used by compiled render effects.
+ */
+export function setText(textNode: Text, value: unknown): void {
+  const next = formatTextValue(value)
+  const cache = textNode as unknown as Record<PropertyKey, unknown>
+  const prev = cache[TEXT_CACHE]
+  if (prev === next && textNode.data === next) return
+  cache[TEXT_CACHE] = next
+  if (textNode.data !== next) {
+    textNode.data = next
+  }
 }
 
 /**
@@ -279,52 +381,53 @@ export function createAttributeBinding(
  * Bind a reactive value to an element's attribute.
  */
 export function bindAttribute(el: Element, key: string, getValue: () => unknown): Cleanup {
-  let prevValue: unknown = undefined
-  return createRenderEffect(() => {
-    const value = getValue()
-    if (value === prevValue) return
-    prevValue = value
+  return createRenderEffect(() => setAttr(el, key, getValue()))
+}
 
-    if (value === undefined || value === null || value === false) {
-      el.removeAttribute(key)
-    } else if (value === true) {
-      el.setAttribute(key, '')
-    } else {
-      el.setAttribute(key, String(value))
-    }
-  })
+/**
+ * Patch attribute value with per-node, per-attribute cache.
+ */
+export function setAttr(el: Element, key: string, value: unknown): void {
+  const cacheTarget = el as unknown as Record<PropertyKey, unknown>
+  const attrCache =
+    (cacheTarget[ATTR_CACHE] as Record<string, unknown> | undefined) ??
+    (cacheTarget[ATTR_CACHE] = Object.create(null))
+  if (attrCache[key] === value) return
+  attrCache[key] = value
+
+  if (value === undefined || value === null || value === false) {
+    el.removeAttribute(key)
+  } else if (value === true) {
+    el.setAttribute(key, '')
+  } else {
+    el.setAttribute(key, String(value))
+  }
 }
 
 /**
  * Bind a reactive value to an element's property.
  */
 export function bindProperty(el: Element, key: string, getValue: () => unknown): Cleanup {
-  // Keep behavior aligned with the legacy createElement+applyProps path in `dom.ts`,
-  // where certain keys must behave like DOM properties and nullish clears should
-  // reset to sensible defaults (e.g. value -> '', checked -> false).
-  const PROPERTY_BINDING_KEYS = new Set([
-    'value',
-    'checked',
-    'selected',
-    'disabled',
-    'readOnly',
-    'multiple',
-    'muted',
-  ])
-
-  let prevValue: unknown = undefined
-  return createRenderEffect(() => {
-    const next = getValue()
-    if (next === prevValue) return
-    prevValue = next
-
-    if (PROPERTY_BINDING_KEYS.has(key) && (next === undefined || next === null)) {
-      const fallback = key === 'checked' || key === 'selected' ? false : ''
-      ;(el as unknown as Record<string, unknown>)[key] = fallback
-      return
-    }
-    ;(el as unknown as Record<string, unknown>)[key] = next
-  })
+  return createRenderEffect(() => setProp(el, key, getValue()))
+}
+
+/**
+ * Patch DOM property with per-node, per-property cache.
+ */
+export function setProp(el: Element, key: string, value: unknown): void {
+  const cacheTarget = el as unknown as Record<PropertyKey, unknown>
+  const propCache =
+    (cacheTarget[PROP_CACHE] as Record<string, unknown> | undefined) ??
+    (cacheTarget[PROP_CACHE] = Object.create(null))
+  if (propCache[key] === value) return
+  propCache[key] = value
+
+  if (PROPERTY_BINDING_KEYS.has(key) && (value === undefined || value === null)) {
+    const fallback = key === 'checked' || key === 'selected' ? false : ''
+    ;(el as unknown as Record<string, unknown>)[key] = fallback
+    return
+  }
+  ;(el as unknown as Record<string, unknown>)[key] = value
 }
 
 // ============================================================================
@@ -338,16 +441,12 @@ export function createStyleBinding(
   el: Element,
   value: MaybeReactive<string | Record<string, string | number> | null | undefined>,
 ): void {
-  const target = el as Element & { style: CSSStyleDeclaration }
   if (isReactive(value)) {
-    let prev: unknown
     createRenderEffect(() => {
-      const next = (value as () => unknown)()
-      applyStyle(target, next, prev)
-      prev = next
+      setStyle(el, (value as () => unknown)() as string | Record<string, string | number> | null)
     })
   } else {
-    applyStyle(target, value, undefined)
+    setStyle(el, value)
   }
 }
 
@@ -358,13 +457,23 @@ export function bindStyle(
   el: Element,
   getValue: () => string | Record<string, string | number> | null | undefined,
 ): Cleanup {
+  return createRenderEffect(() => setStyle(el, getValue()))
+}
+
+/**
+ * Patch style value with cached previous style payload.
+ */
+export function setStyle(
+  el: Element,
+  value: string | Record<string, string | number> | null | undefined,
+): void {
   const target = el as Element & { style: CSSStyleDeclaration }
-  let prev: unknown
-  return createRenderEffect(() => {
-    const next = getValue()
-    applyStyle(target, next, prev)
-    prev = next
-  })
+  const cache = target as unknown as Record<PropertyKey, unknown>
+  const prev = cache[STYLE_CACHE]
+  if (typeof value === 'string' && prev === value) return
+  if ((value === null || value === undefined) && (prev === null || prev === undefined)) return
+  applyStyle(target, value, prev)
+  cache[STYLE_CACHE] = value
 }
 
 /**
@@ -388,23 +497,25 @@ function applyStyle(
     // Remove styles that were present in prev but not in current
     if (prev && typeof prev === 'object') {
       const prevStyles = prev as Record<string, string | number>
-      for (const key of Object.keys(prevStyles)) {
-        if (!(key in styles)) {
-          const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+      for (const key in prevStyles) {
+        if (!hasOwn.call(prevStyles, key)) continue
+        if (!hasOwn.call(styles, key)) {
+          const cssProperty = normalizeStyleProperty(key)
           el.style.removeProperty(cssProperty)
         }
       }
     }
 
-    for (const [prop, v] of Object.entries(styles)) {
+    for (const prop in styles) {
+      if (!hasOwn.call(styles, prop)) continue
+      const v = styles[prop]
       if (v != null) {
-        // Handle camelCase to kebab-case conversion
-        const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase()
+        const cssProperty = normalizeStyleProperty(prop)
         const unitless = isUnitlessStyleProperty(prop) || isUnitlessStyleProperty(cssProperty)
         const valueStr = typeof v === 'number' && !unitless ? `${v}px` : String(v)
         el.style.setProperty(cssProperty, valueStr)
       } else {
-        const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase()
+        const cssProperty = normalizeStyleProperty(prop)
         el.style.removeProperty(cssProperty) // Handle null/undefined values by removing
       }
     }
@@ -414,8 +525,9 @@ function applyStyle(
     // Ideally we remove keys from prev.
     if (prev && typeof prev === 'object') {
       const prevStyles = prev as Record<string, string | number>
-      for (const key of Object.keys(prevStyles)) {
-        const cssProperty = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+      for (const key in prevStyles) {
+        if (!hasOwn.call(prevStyles, key)) continue
+        const cssProperty = normalizeStyleProperty(key)
         el.style.removeProperty(cssProperty)
       }
     } else if (typeof prev === 'string') {
@@ -428,6 +540,14 @@ const isUnitlessStyleProperty = isDev
   ? (prop: string): boolean => UnitlessStyles.has(prop)
   : (prop: string): boolean => prop === 'opacity' || prop === 'zIndex'
 
+function normalizeStyleProperty(prop: string): string {
+  const cached = STYLE_PROP_CACHE.get(prop)
+  if (cached) return cached
+  const normalized = prop.includes('-') ? prop : prop.replace(/([A-Z])/g, '-$1').toLowerCase()
+  STYLE_PROP_CACHE.set(prop, normalized)
+  return normalized
+}
+
 // ============================================================================
 // Class Binding
 // ============================================================================
@@ -440,13 +560,11 @@ export function createClassBinding(
   value: MaybeReactive<string | Record<string, boolean> | null | undefined>,
 ): void {
   if (isReactive(value)) {
-    let prev: Record<string, boolean> = {}
-    createRenderEffect(() => {
-      const next = (value as () => unknown)()
-      prev = applyClass(el, next, prev)
-    })
+    createRenderEffect(() =>
+      setClass(el, (value as () => string | Record<string, boolean> | null | undefined)()),
+    )
   } else {
-    applyClass(el, value, {})
+    setClass(el, value)
   }
 }
 
@@ -457,21 +575,31 @@ export function bindClass(
   el: Element,
   getValue: () => string | Record<string, boolean> | null | undefined,
 ): Cleanup {
-  let prev: Record<string, boolean> = {}
-  let prevString: string | undefined
-  return createRenderEffect(() => {
-    const next = getValue()
-    // Short-circuit for string values to avoid DOM writes when unchanged
-    if (typeof next === 'string') {
-      if (next === prevString) return
-      prevString = next
-      el.className = next
-      prev = {}
-      return
-    }
-    prevString = undefined
-    prev = applyClass(el, next, prev)
-  })
+  return createRenderEffect(() => setClass(el, getValue()))
+}
+
+/**
+ * Patch class value using per-node cached class state.
+ */
+export function setClass(
+  el: Element,
+  value: string | Record<string, boolean> | null | undefined,
+): void {
+  const cache = el as unknown as Record<PropertyKey, unknown>
+  const prevValue = cache[CLASS_VALUE_CACHE]
+  const prevState = (cache[CLASS_STATE_CACHE] as Record<string, boolean> | undefined) ?? {}
+
+  // Preserve existing behavior: short-circuit only for stable string values.
+  if (typeof value === 'string') {
+    if (typeof prevValue === 'string' && prevValue === value) return
+    el.className = value
+    cache[CLASS_STATE_CACHE] = {}
+    cache[CLASS_VALUE_CACHE] = value
+    return
+  }
+
+  cache[CLASS_STATE_CACHE] = applyClass(el, value, prevState)
+  cache[CLASS_VALUE_CACHE] = value
 }
 
 /**

package/src/constants.ts

@@ -15,7 +15,7 @@ import { DelegatedEventNames } from './delegated-events'
 const isDev =
   typeof __DEV__ !== 'undefined'
     ? __DEV__
-    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
 
 // ============================================================================
 // Boolean Attributes

package/src/cycle-guard.ts

@@ -3,10 +3,10 @@ import { getDevtoolsHook } from './devtools'
 const isDev =
   typeof __DEV__ !== 'undefined'
     ? __DEV__
-    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
 
 export interface CycleProtectionOptions {
-  /** Enable cycle protection guards (defaults to dev-only) */
+  /** Enable cycle protection guards (enabled by default in all modes) */
   enabled?: boolean
   maxFlushCyclesPerMicrotask?: number
   maxEffectRunsPerFlush?: number
@@ -35,7 +35,8 @@ let enterRootGuard: (root: object) => boolean = () => true
 let exitRootGuard: (root: object) => void = () => {}
 
 const defaultOptions = {
-  enabled: isDev,
+  // Keep cycle guards on in production to avoid infinite flush loops.
+  enabled: true,
   maxFlushCyclesPerMicrotask: 10_000,
   maxEffectRunsPerFlush: 20_000,
   windowSize: 5,

package/src/dom.ts

@@ -60,7 +60,7 @@ const MATHML_NS = 'http://www.w3.org/1998/Math/MathML'
 const isDev =
   typeof __DEV__ !== 'undefined'
     ? __DEV__
-    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
 
 let nextComponentId = 1
 
@@ -201,6 +201,12 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
     return createElementWithContext(resolved, namespace)
   }
 
+  // Non-reactive function values are not valid DOM nodes.
+  // Keep callback values inert instead of stringifying function source.
+  if (typeof node === 'function') {
+    return document.createTextNode('')
+  }
+
   if (typeof node === 'object' && node !== null && !(node instanceof Node)) {
     // Handle BindingHandle (list/conditional bindings, etc)
     if ('marker' in node) {
@@ -507,10 +513,15 @@ function appendChildNode(
     return
   }
 
-  // Handle getter function (recursive)
-  if (typeof child === 'function' && (child as () => FictNode).length === 0) {
+  // Handle function children:
+  // - reactive accessors (signals/computed/getters) become child bindings
+  // - non-reactive callbacks stay inert
+  if (typeof child === 'function') {
     const childGetter = child as () => FictNode
-    createChildBinding(parent, childGetter, node => createElementWithContext(node, namespace))
+    if (isReactive(childGetter)) {
+      createChildBinding(parent, childGetter, node => createElementWithContext(node, namespace))
+      return
+    }
     return
   }
 

package/src/hooks.ts

@@ -11,7 +11,7 @@ import {
 const isDev =
   typeof __DEV__ !== 'undefined'
     ? __DEV__
-    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
 
 export interface HookContext {
   slots: unknown[]

package/src/internal.ts

@@ -82,10 +82,17 @@ export {
   bindAttribute,
   bindStyle,
   bindClass,
+  setText,
+  setAttr,
+  setProp,
+  setStyle,
+  setClass,
   bindEvent,
   callEventHandler,
   bindProperty,
   bindRef,
+  nonReactive,
+  reactive,
   insert,
   insertBetween,
   createConditional,

package/src/lifecycle.ts

@@ -4,7 +4,7 @@ import type { Cleanup, ErrorInfo, SuspenseToken } from './types'
 const isDev =
   typeof __DEV__ !== 'undefined'
     ? __DEV__
-    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
 
 type LifecycleFn = () => void | Cleanup
 

package/src/props.ts

@@ -1,10 +1,28 @@
 import { createMemo } from './memo'
+import { isComputed, isEffect, isEffectScope, isSignal } from './signal'
 
 const PROP_GETTER_MARKER = Symbol.for('fict:prop-getter')
+const NON_REACTIVE_FN_MARKER = Symbol.for('fict:non-reactive-fn')
+const REACTIVE_FN_MARKER = Symbol.for('fict:reactive-fn')
+const NON_REACTIVE_FN_REGISTRY_KEY = Symbol.for('fict:non-reactive-fn-registry')
 const propGetters = new WeakSet<(...args: unknown[]) => unknown>()
 const rawToProxy = new WeakMap<object, object>()
 const proxyToRaw = new WeakMap<object, object>()
 
+type NonReactiveRegistryHost = typeof globalThis & {
+  [NON_REACTIVE_FN_REGISTRY_KEY]?: WeakSet<(...args: unknown[]) => unknown>
+}
+
+function getNonReactiveFnRegistry(): WeakSet<(...args: unknown[]) => unknown> {
+  const host = globalThis as NonReactiveRegistryHost
+  let registry = host[NON_REACTIVE_FN_REGISTRY_KEY]
+  if (!registry) {
+    registry = new WeakSet<(...args: unknown[]) => unknown>()
+    host[NON_REACTIVE_FN_REGISTRY_KEY] = registry
+  }
+  return registry
+}
+
 /**
  * @internal
  * Marks a zero-arg getter so props proxy can lazily evaluate it.
@@ -30,6 +48,47 @@ function isPropGetter(value: unknown): value is () => unknown {
   return propGetters.has(fn as (...args: unknown[]) => unknown) || fn[PROP_GETTER_MARKER] === true
 }
 
+function isNonReactiveFn(value: unknown): boolean {
+  if (typeof value !== 'function') return false
+  if (getNonReactiveFnRegistry().has(value as (...args: unknown[]) => unknown)) return true
+  return (
+    (value as ((...args: unknown[]) => unknown) & { [NON_REACTIVE_FN_MARKER]?: boolean })[
+      NON_REACTIVE_FN_MARKER
+    ] === true
+  )
+}
+
+function markNonReactiveFn<T extends (...args: unknown[]) => unknown>(fn: T): T {
+  getNonReactiveFnRegistry().add(fn as (...args: unknown[]) => unknown)
+  if (Object.isExtensible(fn)) {
+    try {
+      ;(fn as T & { [NON_REACTIVE_FN_MARKER]?: boolean })[NON_REACTIVE_FN_MARKER] = true
+    } catch {
+      // Ignore marker failures on non-standard function objects.
+    }
+  }
+  return fn
+}
+
+function isExplicitReactiveFn(value: unknown): boolean {
+  if (typeof value !== 'function') return false
+  return (
+    (value as ((...args: unknown[]) => unknown) & { [REACTIVE_FN_MARKER]?: boolean })[
+      REACTIVE_FN_MARKER
+    ] === true
+  )
+}
+
+function normalizePropsFunction(value: unknown): unknown {
+  if (typeof value !== 'function') return value
+  if (value.length !== 0) return value
+  if (isPropGetter(value) || isSignal(value) || isComputed(value) || isExplicitReactiveFn(value)) {
+    return value
+  }
+  if (isEffect(value) || isEffectScope(value) || isNonReactiveFn(value)) return value
+  return markNonReactiveFn(value as (...args: unknown[]) => unknown)
+}
+
 export function createPropsProxy<T extends Record<string, unknown>>(props: T): T {
   if (!props || typeof props !== 'object') {
     return props
@@ -50,7 +109,7 @@ export function createPropsProxy<T extends Record<string, unknown>>(props: T): T
       if (isPropGetter(value)) {
         return value()
       }
-      return value
+      return normalizePropsFunction(value)
     },
     set(target, prop, value, receiver) {
       return Reflect.set(target, prop, value, receiver)