@fictjs/runtime 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fictjs/runtime",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Fict reactive runtime",
   "publishConfig": {
     "access": "public",
@@ -30,11 +30,6 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./slim": {
-      "types": "./dist/slim.d.ts",
-      "import": "./dist/slim.js",
-      "require": "./dist/slim.cjs"
-    },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
       "import": "./dist/jsx-runtime.js",

package/src/binding.ts

@@ -19,12 +19,10 @@ import {
   ChildProperties,
   getPropAlias,
   SVGNamespace,
-  Aliases,
 } from './constants'
 import { createRenderEffect } from './effect'
 import { Fragment } from './jsx'
 import {
-  clearRoot,
   createRootContext,
   destroyRoot,
   flushOnMount,
@@ -36,12 +34,16 @@ import {
   registerRootCleanup,
   type RootContext,
 } from './lifecycle'
-import { createVersionedSignalAccessor } from './list-helpers'
 import { toNodeArray, removeNodes, insertNodesBefore } from './node-ops'
 import { batch } from './scheduler'
-import { computed, createSignal, untrack, type Signal } from './signal'
+import { computed, untrack } from './signal'
 import type { Cleanup, FictNode } from './types'
 
+const isDev =
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+
 // ============================================================================
 // Type Definitions
 // ============================================================================
@@ -63,16 +65,6 @@ export interface BindingHandle {
 }
 
 /** Managed child node with its dispose function */
-interface ManagedBlock<T = unknown> {
-  nodes: Node[]
-  root: RootContext
-  value: Signal<T>
-  index: Signal<number>
-  start: Comment
-  end: Comment
-  renderCurrent: () => FictNode
-}
-
 // ============================================================================
 // Utility Functions
 // ============================================================================
@@ -130,151 +122,6 @@ export function callEventHandler(
   invoke(handler)
 }
 
-export const PRIMITIVE_PROXY = Symbol('fict:primitive-proxy')
-const PRIMITIVE_PROXY_RAW_VALUE = Symbol('fict:primitive-proxy:raw-value')
-
-/**
- * Unwrap a primitive proxy value to get the raw primitive value.
- * This is primarily useful for advanced scenarios where you need the actual
- * primitive type (e.g., for typeof checks or strict equality comparisons).
- *
- * @param value - A potentially proxied primitive value
- * @returns The raw primitive value
- *
- * @example
- * ```ts
- * createList(
- *   () => [1, 2, 3],
- *   (item) => {
- *     const raw = unwrapPrimitive(item)
- *     typeof raw === 'number'  // true
- *     raw === 1  // true (for first item)
- *   },
- *   item => item
- * )
- * ```
- */
-export function unwrapPrimitive<T>(value: T): T {
-  if (value && typeof value === 'object' && PRIMITIVE_PROXY in value) {
-    // Use the internal raw value getter
-    const getRawValue = (value as Record<PropertyKey, unknown>)[PRIMITIVE_PROXY_RAW_VALUE]
-    if (typeof getRawValue === 'function') {
-      return (getRawValue as () => T)()
-    }
-  }
-  return value
-}
-
-function _createValueProxy<T>(read: () => T): T {
-  const getPrimitivePrototype = (value: unknown): Record<PropertyKey, unknown> | undefined => {
-    switch (typeof value) {
-      case 'string':
-        return String.prototype as unknown as Record<PropertyKey, unknown>
-      case 'number':
-        return Number.prototype as unknown as Record<PropertyKey, unknown>
-      case 'boolean':
-        return Boolean.prototype as unknown as Record<PropertyKey, unknown>
-      case 'bigint':
-        return BigInt.prototype as unknown as Record<PropertyKey, unknown>
-      case 'symbol':
-        return Symbol.prototype as unknown as Record<PropertyKey, unknown>
-      default:
-        return undefined
-    }
-  }
-
-  const target: Record<PropertyKey, unknown> = {}
-  const handler: ProxyHandler<Record<PropertyKey, unknown>> = {
-    get(_target, prop, receiver) {
-      if (prop === PRIMITIVE_PROXY) {
-        return true
-      }
-      if (prop === PRIMITIVE_PROXY_RAW_VALUE) {
-        return () => read()
-      }
-      if (prop === Symbol.toPrimitive) {
-        return (hint: 'string' | 'number' | 'default') => {
-          const value = read() as unknown
-          if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-            const toPrimitive = (value as { [Symbol.toPrimitive]?: (hint: string) => unknown })[
-              Symbol.toPrimitive
-            ]
-            if (typeof toPrimitive === 'function') {
-              return toPrimitive.call(value, hint)
-            }
-            if (hint === 'string') return value.toString?.() ?? '[object Object]'
-            if (hint === 'number') return value.valueOf?.() ?? value
-            return value.valueOf?.() ?? value
-          }
-          return value
-        }
-      }
-      if (prop === 'valueOf') {
-        return () => {
-          const value = read() as unknown
-          if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-            return typeof (value as { valueOf?: () => unknown }).valueOf === 'function'
-              ? (value as { valueOf: () => unknown }).valueOf()
-              : value
-          }
-          return value
-        }
-      }
-      if (prop === 'toString') {
-        return () => String(read())
-      }
-
-      const value = read() as unknown
-      if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-        return Reflect.get(value as object, prop, receiver === _target ? value : receiver)
-      }
-
-      const proto = getPrimitivePrototype(value)
-      if (proto && prop in proto) {
-        const descriptor = Reflect.get(proto, prop, value)
-        return typeof descriptor === 'function' ? descriptor.bind(value) : descriptor
-      }
-      return undefined
-    },
-    set(_target, prop, newValue, receiver) {
-      const value = read() as unknown
-      if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-        return Reflect.set(value as object, prop, newValue, receiver === _target ? value : receiver)
-      }
-      return false
-    },
-    has(_target, prop) {
-      if (prop === PRIMITIVE_PROXY || prop === PRIMITIVE_PROXY_RAW_VALUE) {
-        return true
-      }
-      const value = read() as unknown
-      if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-        return prop in (value as object)
-      }
-      const proto = getPrimitivePrototype(value)
-      return proto ? prop in proto : false
-    },
-    ownKeys() {
-      const value = read() as unknown
-      if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-        return Reflect.ownKeys(value as object)
-      }
-      const proto = getPrimitivePrototype(value)
-      return proto ? Reflect.ownKeys(proto) : []
-    },
-    getOwnPropertyDescriptor(_target, prop) {
-      const value = read() as unknown
-      if (value != null && (typeof value === 'object' || typeof value === 'function')) {
-        return Object.getOwnPropertyDescriptor(value as object, prop)
-      }
-      const proto = getPrimitivePrototype(value)
-      return proto ? Object.getOwnPropertyDescriptor(proto, prop) || undefined : undefined
-    },
-  }
-
-  return new Proxy(target, handler) as T
-}
-
 // ============================================================================
 // Text Binding
 // ============================================================================
@@ -519,9 +366,9 @@ function applyStyle(
   }
 }
 
-function isUnitlessStyleProperty(prop: string): boolean {
-  return UnitlessStyles.has(prop)
-}
+const isUnitlessStyleProperty = isDev
+  ? (prop: string): boolean => UnitlessStyles.has(prop)
+  : (prop: string): boolean => prop === 'opacity' || prop === 'zIndex'
 
 // ============================================================================
 // Class Binding
@@ -1107,7 +954,7 @@ export function bindEvent(
   // Optimization: Global Event Delegation
   // If the event is delegatable and no special options (capture, passive) are used,
   // we attach the handler to the element property and rely on the global listener.
-  if (DelegatedEvents.has(eventName) && !options) {
+  if (isDev && DelegatedEvents.has(eventName) && !options) {
     const key = `$$${eventName}`
 
     // Ensure global delegation is active for this event
@@ -1124,7 +971,9 @@ export function bindEvent(
         const fn = resolveHandler()
         callEventHandler(fn as EventListenerOrEventListenerObject, args[0] as Event, el)
       } catch (err) {
-        handleError(err, { source: 'event', eventName }, rootRef)
+        if (!handleError(err, { source: 'event', eventName }, rootRef)) {
+          throw err
+        }
       }
     }
 
@@ -1386,7 +1235,7 @@ function assignProp(
   // Standard event handling: onClick, onInput, etc.
   if (prop.slice(0, 2) === 'on') {
     const eventName = prop.slice(2).toLowerCase()
-    const shouldDelegate = DelegatedEvents.has(eventName)
+    const shouldDelegate = isDev && DelegatedEvents.has(eventName)
     if (!shouldDelegate && prev) {
       const handler = Array.isArray(prev) ? prev[0] : prev
       node.removeEventListener(eventName, handler as EventListener)
@@ -1430,13 +1279,20 @@ function assignProp(
 
   // Property handling (for non-SVG elements)
   if (!isSVG) {
-    const propAlias = getPropAlias(prop, node.tagName)
-    const isProperty = Properties.has(prop)
-    const isChildProp = ChildProperties.has(prop)
+    const propAlias = isDev ? getPropAlias(prop, node.tagName) : undefined
+    const isProperty = isDev
+      ? Properties.has(prop)
+      : prop in (node as unknown as Record<string, unknown>)
+    const isChildProp = isDev
+      ? ChildProperties.has(prop)
+      : prop === 'innerHTML' ||
+        prop === 'textContent' ||
+        prop === 'innerText' ||
+        prop === 'children'
 
     if (propAlias || isProperty || isChildProp || isCE) {
       const propName = propAlias || prop
-      if (isCE && !isProperty && !isChildProp) {
+      if (isCE && !isProperty && !isChildProp && !propAlias) {
         ;(node as unknown as Record<string, unknown>)[toPropertyName(propName)] = value
       } else {
         ;(node as unknown as Record<string, unknown>)[propName] = value
@@ -1457,7 +1313,7 @@ function assignProp(
   }
 
   // Default: set as attribute
-  const attrName = Aliases[prop] || prop
+  const attrName = prop === 'htmlFor' ? 'for' : prop
   if (value == null) node.removeAttribute(attrName)
   else node.setAttribute(attrName, String(value))
   return value
@@ -1605,116 +1461,6 @@ export function createConditional(
   }
 }
 
-// ============================================================================
-// List Rendering
-// ============================================================================
-
-/** Key extractor function type */
-export type KeyFn<T> = (item: T, index: number) => string | number
-
-/**
- * Create a reactive list rendering binding with optional keying.
- * The render callback receives signal accessors for the item and index.
- */
-export function createList<T>(
-  items: () => T[],
-  renderItem: (item: Signal<T>, index: Signal<number>) => FictNode,
-  createElementFn: CreateElementFn,
-  getKey?: KeyFn<T>,
-): BindingHandle {
-  const startMarker = document.createComment('fict:list:start')
-  const endMarker = document.createComment('fict:list:end')
-  const fragment = document.createDocumentFragment()
-  fragment.append(startMarker, endMarker)
-  const hostRoot = getCurrentRoot()
-
-  const nodeMap = new Map<string | number, ManagedBlock<T>>()
-  let pendingItems: T[] | null = null
-
-  const runListUpdate = () => {
-    const arr = items()
-    const parent = startMarker.parentNode as (ParentNode & Node) | null
-    if (!parent) {
-      pendingItems = arr
-      return
-    }
-    pendingItems = null
-
-    const newNodeMap = new Map<string | number, ManagedBlock<T>>()
-    const blocks: ManagedBlock<T>[] = []
-
-    for (let i = 0; i < arr.length; i++) {
-      const item = arr[i]! as T
-      const key = getKey ? getKey(item, i) : i
-      const existing = nodeMap.get(key)
-
-      let block: ManagedBlock<T>
-      if (existing) {
-        const previousValue = existing.value()
-        if (!getKey && previousValue !== item) {
-          destroyRoot(existing.root)
-          removeBlockNodes(existing)
-          block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn, hostRoot)
-        } else {
-          const previousIndex = existing.index()
-          existing.value(item)
-          existing.index(i)
-
-          const needsRerender = getKey ? true : previousValue !== item || previousIndex !== i
-          block = needsRerender ? rerenderBlock(existing, createElementFn) : existing
-        }
-      } else {
-        block = mountBlock(item, i, renderItem, parent, endMarker, createElementFn, hostRoot)
-      }
-
-      newNodeMap.set(key, block)
-      blocks.push(block)
-    }
-
-    for (const [key, managed] of nodeMap) {
-      if (!newNodeMap.has(key)) {
-        destroyRoot(managed.root)
-        removeBlockNodes(managed)
-      }
-    }
-
-    let anchor: Node = endMarker
-    for (let i = blocks.length - 1; i >= 0; i--) {
-      const block = blocks[i]!
-      insertNodesBefore(parent, block.nodes, anchor)
-      if (block.nodes.length > 0) {
-        anchor = block.nodes[0]!
-      }
-    }
-
-    nodeMap.clear()
-    for (const [k, v] of newNodeMap) {
-      nodeMap.set(k, v)
-    }
-  }
-
-  const dispose = createRenderEffect(runListUpdate)
-
-  return {
-    marker: fragment,
-    flush: () => {
-      if (pendingItems !== null) {
-        runListUpdate()
-      }
-    },
-    dispose: () => {
-      dispose()
-      for (const [, managed] of nodeMap) {
-        destroyRoot(managed.root)
-        removeBlockNodes(managed)
-      }
-      nodeMap.clear()
-      startMarker.parentNode?.removeChild(startMarker)
-      endMarker.parentNode?.removeChild(endMarker)
-    },
-  }
-}
-
 // ============================================================================
 // Show/Hide Helper
 // ==========================================================================
@@ -1846,131 +1592,6 @@ export function createPortal(
   }
 }
 
-// ============================================================================
-// Internal helpers
-// ============================================================================
-
-function mountBlock<T>(
-  initialValue: T,
-  initialIndex: number,
-  renderItem: (item: Signal<T>, index: Signal<number>) => FictNode,
-  parent: ParentNode & Node,
-  anchor: Node,
-  createElementFn: CreateElementFn,
-  hostRoot?: RootContext | undefined,
-): ManagedBlock<T> {
-  const start = document.createComment('fict:block:start')
-  const end = document.createComment('fict:block:end')
-  const valueSig = createVersionedSignalAccessor<T>(initialValue)
-  const indexSig = createSignal<number>(initialIndex)
-  const renderCurrent = () => renderItem(valueSig, indexSig)
-  const root = createRootContext(hostRoot)
-  const prev = pushRoot(root)
-  const nodes: Node[] = [start]
-  let handledError = false
-  try {
-    const output = renderCurrent()
-    if (output != null && output !== false) {
-      const el = createElementFn(output)
-      const rendered = toNodeArray(el)
-      nodes.push(...rendered)
-    }
-    nodes.push(end)
-    insertNodesBefore(parent, nodes, anchor)
-  } catch (err) {
-    if (handleSuspend(err as any, root)) {
-      handledError = true
-      nodes.push(end)
-      insertNodesBefore(parent, nodes, anchor)
-    } else if (handleError(err, { source: 'renderChild' }, root)) {
-      handledError = true
-      nodes.push(end)
-      insertNodesBefore(parent, nodes, anchor)
-    } else {
-      throw err
-    }
-  } finally {
-    popRoot(prev)
-    if (!handledError) {
-      flushOnMount(root)
-    } else {
-      destroyRoot(root)
-    }
-  }
-  return {
-    nodes,
-    root,
-    value: valueSig,
-    index: indexSig,
-    start,
-    end,
-    renderCurrent,
-  }
-}
-
-function rerenderBlock<T>(
-  block: ManagedBlock<T>,
-  createElementFn: CreateElementFn,
-): ManagedBlock<T> {
-  const currentContent = block.nodes.slice(1, Math.max(1, block.nodes.length - 1))
-  const currentNode = currentContent.length === 1 ? currentContent[0] : null
-
-  clearRoot(block.root)
-
-  const prev = pushRoot(block.root)
-  let nextOutput: FictNode
-  let handledError = false
-  try {
-    nextOutput = block.renderCurrent()
-  } catch (err) {
-    if (handleSuspend(err as any, block.root)) {
-      handledError = true
-      popRoot(prev)
-      destroyRoot(block.root)
-      block.nodes = [block.start, block.end]
-      return block
-    }
-    if (handleError(err, { source: 'renderChild' }, block.root)) {
-      handledError = true
-      popRoot(prev)
-      destroyRoot(block.root)
-      block.nodes = [block.start, block.end]
-      return block
-    }
-    throw err
-  } finally {
-    if (!handledError) {
-      popRoot(prev)
-    }
-  }
-
-  if (isFragmentVNode(nextOutput) && currentContent.length > 0) {
-    const patched = patchFragmentChildren(currentContent, nextOutput.props?.children)
-    if (patched) {
-      block.nodes = [block.start, ...currentContent, block.end]
-      return block
-    }
-  }
-
-  if (currentNode && patchNode(currentNode, nextOutput)) {
-    block.nodes = [block.start, currentNode, block.end]
-    return block
-  }
-
-  clearContent(block)
-
-  if (nextOutput != null && nextOutput !== false) {
-    const newNodes = toNodeArray(
-      nextOutput instanceof Node ? nextOutput : (createElementFn(nextOutput) as Node),
-    )
-    insertNodesBefore(block.start.parentNode as ParentNode & Node, newNodes, block.end)
-    block.nodes = [block.start, ...newNodes, block.end]
-  } else {
-    block.nodes = [block.start, block.end]
-  }
-  return block
-}
-
 function patchElement(el: Element, output: FictNode): boolean {
   if (
     output === null ||
@@ -2102,7 +1723,7 @@ function patchNode(currentNode: Node | null, nextOutput: FictNode): boolean {
   return false
 }
 
-function isFragmentVNode(
+function _isFragmentVNode(
   value: unknown,
 ): value is { type: typeof Fragment; props?: { children?: FictNode | FictNode[] } } {
   return (
@@ -2133,7 +1754,7 @@ function normalizeChildren(
   return result
 }
 
-function patchFragmentChildren(
+function _patchFragmentChildren(
   nodes: Node[],
   children: FictNode | FictNode[] | undefined,
 ): boolean {
@@ -2149,20 +1770,4 @@ function patchFragmentChildren(
   return true
 }
 
-function clearContent<T>(block: ManagedBlock<T>): void {
-  const nodes = block.nodes.slice(1, Math.max(1, block.nodes.length - 1))
-  removeNodes(nodes)
-}
-
-function removeBlockNodes<T>(block: ManagedBlock<T>): void {
-  let cursor: Node | null = block.start
-  const end = block.end
-  while (cursor) {
-    const next: Node | null = cursor.nextSibling
-    cursor.parentNode?.removeChild(cursor)
-    if (cursor === end) break
-    cursor = next
-  }
-}
-
 // DOM utility functions are imported from './node-ops' to avoid duplication