@fictjs/runtime 0.0.8 → 0.0.10

package/src/list-helpers.ts

@@ -11,6 +11,7 @@ import {
   createRootContext,
   destroyRoot,
   flushOnMount,
+  getCurrentRoot,
   popRoot,
   pushRoot,
   type RootContext,
@@ -18,7 +19,7 @@ import {
 import { insertNodesBefore, removeNodes, toNodeArray } from './node-ops'
 import reconcileArrays from './reconcile'
 import { batch } from './scheduler'
-import { createSignal, setActiveSub, type Signal } from './signal'
+import { createSignal, flush, setActiveSub, type Signal } from './signal'
 import type { FictNode } from './types'
 
 // Re-export shared DOM helpers for compiler-generated code
@@ -200,7 +201,7 @@ function removeBlockRange(block: MarkerBlock): void {
   }
 }
 
-function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
+export function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
   let current = initialValue
   let version = 0
   const track = createSignal(version)
@@ -243,6 +244,16 @@ export function createKeyedListContainer<T = unknown>(): KeyedListContainer<T> {
     container.nextBlocks.clear()
 
     // Remove nodes (including markers)
+    // Check if markers are still in DOM before using Range
+    if (!startMarker.parentNode || !endMarker.parentNode) {
+      // Markers already removed, nothing to do
+      container.currentNodes = []
+      container.nextNodes = []
+      container.orderedBlocks.length = 0
+      container.nextOrderedBlocks.length = 0
+      container.orderedIndexByKey.clear()
+      return
+    }
     const range = document.createRange()
     range.setStartBefore(startMarker)
     range.setEndAfter(endMarker)
@@ -292,6 +303,7 @@ export function createKeyedBlock<T>(
   index: number,
   render: (item: Signal<T>, index: Signal<number>, key: string | number) => Node[],
   needsIndex = true,
+  hostRoot?: RootContext,
 ): KeyedBlock<T> {
   // Use versioned signal for all item types; avoid diffing proxy overhead for objects
   const itemSig = createVersionedSignalAccessor(item)
@@ -303,7 +315,7 @@ export function createKeyedBlock<T>(
         index = next as number
         return index
       }) as Signal<number>)
-  const root = createRootContext()
+  const root = createRootContext(hostRoot)
   const prevRoot = pushRoot(root)
 
   // Isolate child effects from the outer effect (e.g., performDiff) by clearing activeSub.
@@ -327,7 +339,6 @@ export function createKeyedBlock<T>(
   } finally {
     setActiveSub(prevSub)
     popRoot(prevRoot)
-    flushOnMount(root)
   }
 
   return {
@@ -399,18 +410,34 @@ function createFineGrainedKeyedList<T>(
   needsIndex: boolean,
 ): KeyedListBinding {
   const container = createKeyedListContainer<T>()
+  const hostRoot = getCurrentRoot()
   const fragment = document.createDocumentFragment()
   fragment.append(container.startMarker, container.endMarker)
-  let pendingItems: T[] | null = null
   let disposed = false
+  let effectDispose: (() => void) | undefined
+  let connectObserver: MutationObserver | null = null
+  let effectStarted = false
+  let startScheduled = false
+
+  const getConnectedParent = (): (ParentNode & Node) | null => {
+    const endParent = container.endMarker.parentNode
+    const startParent = container.startMarker.parentNode
+    if (
+      endParent &&
+      startParent &&
+      endParent === startParent &&
+      (endParent as Node).nodeType !== 11
+    ) {
+      return endParent as ParentNode & Node
+    }
+    return null
+  }
 
   const performDiff = () => {
     if (disposed) return
-
+    const parent = getConnectedParent()
+    if (!parent) return
     batch(() => {
-      const newItems = pendingItems || getItems()
-      pendingItems = null
-
       const oldBlocks = container.blocks
       const newBlocks = container.nextBlocks
       const prevOrderedBlocks = container.orderedBlocks
@@ -419,27 +446,20 @@ function createFineGrainedKeyedList<T>(
       newBlocks.clear()
       nextOrderedBlocks.length = 0
       orderedIndexByKey.clear()
-
-      const endParent = container.endMarker.parentNode
-      const startParent = container.startMarker.parentNode
-      const parent =
-        endParent && startParent && endParent === startParent && (endParent as Node).isConnected
-          ? (endParent as ParentNode & Node)
-          : null
-
-      // If markers aren't mounted yet, store items and retry in microtask
-      if (!parent) {
-        pendingItems = newItems
-        queueMicrotask(performDiff)
-        return
-      }
+      const createdBlocks: KeyedBlock<T>[] = []
+      const newItems = getItems()
 
       if (newItems.length === 0) {
         if (oldBlocks.size > 0) {
+          // Destroy all block roots first
           for (const block of oldBlocks.values()) {
             destroyRoot(block.root)
-            removeNodes(block.nodes)
           }
+          // Use Range.deleteContents for efficient bulk DOM removal
+          const range = document.createRange()
+          range.setStartAfter(container.startMarker)
+          range.setEndBefore(container.endMarker)
+          range.deleteContents()
         }
         oldBlocks.clear()
         newBlocks.clear()
@@ -459,8 +479,9 @@ function createFineGrainedKeyedList<T>(
       // Phase 1: Build new blocks map (reuse or create)
       newItems.forEach((item, index) => {
         const key = keyFn(item, index)
-        const existed = oldBlocks.has(key)
+        // Micro-optimization: single Map.get instead of has+get
         let block = oldBlocks.get(key)
+        const existed = block !== undefined
 
         if (block) {
           if (block.rawItem !== item) {
@@ -473,45 +494,30 @@ function createFineGrainedKeyedList<T>(
           }
         }
 
-        // If newBlocks already has this key (duplicate key case), clean up the previous block
-        const existingBlock = newBlocks.get(key)
-        if (existingBlock && existingBlock !== block) {
-          destroyRoot(existingBlock.root)
-          removeNodes(existingBlock.nodes)
-        }
-
         if (block) {
+          // Reusing existing block from oldBlocks
           newBlocks.set(key, block)
           oldBlocks.delete(key)
         } else {
+          // If newBlocks already has this key (duplicate key case), clean up the previous block
           const existingBlock = newBlocks.get(key)
           if (existingBlock) {
             destroyRoot(existingBlock.root)
             removeNodes(existingBlock.nodes)
           }
-
           // Create new block
-          block = createKeyedBlock(key, item, index, renderItem, needsIndex)
+          block = createKeyedBlock(key, item, index, renderItem, needsIndex, hostRoot)
+          createdBlocks.push(block)
         }
 
-        const resolvedBlock = block!
+        const resolvedBlock = block
 
         newBlocks.set(key, resolvedBlock)
 
+        // Micro-optimization: single Map.get instead of checking position multiple times
         const position = orderedIndexByKey.get(key)
         if (position !== undefined) {
           appendCandidate = false
-        }
-        if (appendCandidate) {
-          if (index < prevCount) {
-            if (!prevOrderedBlocks[index] || prevOrderedBlocks[index]!.key !== key) {
-              appendCandidate = false
-            }
-          } else if (existed) {
-            appendCandidate = false
-          }
-        }
-        if (position !== undefined) {
           const prior = nextOrderedBlocks[position]
           if (prior && prior !== resolvedBlock) {
             destroyRoot(prior.root)
@@ -519,6 +525,15 @@ function createFineGrainedKeyedList<T>(
           }
           nextOrderedBlocks[position] = resolvedBlock
         } else {
+          if (appendCandidate) {
+            if (index < prevCount) {
+              if (!prevOrderedBlocks[index] || prevOrderedBlocks[index]!.key !== key) {
+                appendCandidate = false
+              }
+            } else if (existed) {
+              appendCandidate = false
+            }
+          }
           orderedIndexByKey.set(key, nextOrderedBlocks.length)
           nextOrderedBlocks.push(resolvedBlock)
         }
@@ -555,6 +570,11 @@ function createFineGrainedKeyedList<T>(
         container.nextBlocks = oldBlocks
         container.orderedBlocks = nextOrderedBlocks
         container.nextOrderedBlocks = prevOrderedBlocks
+        for (const block of createdBlocks) {
+          if (newBlocks.get(block.key) === block) {
+            flushOnMount(block.root)
+          }
+        }
         return
       }
 
@@ -595,24 +615,95 @@ function createFineGrainedKeyedList<T>(
       container.nextBlocks = oldBlocks
       container.orderedBlocks = nextOrderedBlocks
       container.nextOrderedBlocks = prevOrderedBlocks
+      for (const block of createdBlocks) {
+        if (newBlocks.get(block.key) === block) {
+          flushOnMount(block.root)
+        }
+      }
     })
   }
 
-  const effectDispose = createRenderEffect(performDiff)
+  const disconnectObserver = () => {
+    connectObserver?.disconnect()
+    connectObserver = null
+  }
+
+  const ensureEffectStarted = (): boolean => {
+    if (disposed || effectStarted) return effectStarted
+    const parent = getConnectedParent()
+    if (!parent) return false
+    const start = () => {
+      effectDispose = createRenderEffect(performDiff)
+      effectStarted = true
+    }
+    if (hostRoot) {
+      const prev = pushRoot(hostRoot)
+      try {
+        start()
+      } finally {
+        popRoot(prev)
+      }
+    } else {
+      start()
+    }
+    return true
+  }
+
+  const waitForConnection = () => {
+    if (connectObserver || typeof MutationObserver === 'undefined') return
+    connectObserver = new MutationObserver(() => {
+      if (disposed) return
+      if (getConnectedParent()) {
+        disconnectObserver()
+        if (ensureEffectStarted()) {
+          flush()
+        }
+      }
+    })
+    connectObserver.observe(document, { childList: true, subtree: true })
+  }
+
+  const scheduleStart = () => {
+    if (startScheduled || disposed || effectStarted) return
+    startScheduled = true
+    const run = () => {
+      startScheduled = false
+      if (!ensureEffectStarted()) {
+        waitForConnection()
+      }
+    }
+    if (typeof queueMicrotask === 'function') {
+      queueMicrotask(run)
+    } else {
+      Promise.resolve()
+        .then(run)
+        .catch(() => undefined)
+    }
+  }
+
+  scheduleStart()
 
   return {
-    marker: fragment,
+    get marker() {
+      scheduleStart()
+      return fragment
+    },
     startMarker: container.startMarker,
     endMarker: container.endMarker,
     // Flush pending items - call after markers are inserted into DOM
     flush: () => {
-      if (pendingItems !== null) {
-        performDiff()
+      if (disposed) return
+      scheduleStart()
+      if (ensureEffectStarted()) {
+        flush()
+      } else {
+        waitForConnection()
       }
     },
     dispose: () => {
       disposed = true
       effectDispose?.()
+      disconnectObserver()
       container.dispose()
     },
   }

package/src/ref.ts

@@ -20,6 +20,6 @@ import type { RefObject } from './types'
  * }
  * ```
  */
-export function createRef<T extends HTMLElement = HTMLElement>(): RefObject<T> {
+export function createRef<T extends Element = HTMLElement>(): RefObject<T> {
   return { current: null }
 }

package/src/signal.ts

@@ -1057,10 +1057,20 @@ export function endBatch(): void {
  */
 export function batch<T>(fn: () => T): T {
   ++batchDepth
+  let _error: unknown
+  let hasError = false
   try {
     return fn()
+  } catch (e) {
+    _error = e
+    hasError = true
+    throw e
   } finally {
-    if (--batchDepth === 0) flush()
+    --batchDepth
+    // Only flush if no error occurred to avoid interfering with error propagation
+    if (!hasError && batchDepth === 0) {
+      flush()
+    }
   }
 }
 /**
@@ -1253,7 +1263,7 @@ export function createSelector<T>(
   let current = source()
   const observers = new Map<T, SignalAccessor<boolean>>()
 
-  effect(() => {
+  const dispose = effect(() => {
     const next = source()
     if (equalityFn(current, next)) return
 
@@ -1265,6 +1275,10 @@ export function createSelector<T>(
 
     current = next
   })
+  registerRootCleanup(() => {
+    dispose()
+    observers.clear()
+  })
 
   return (key: T) => {
     let sig = observers.get(key)

package/src/store.ts

@@ -2,6 +2,7 @@ import { signal, batch, type SignalAccessor } from './signal'
 
 const PROXY = Symbol('fict:store-proxy')
 const TARGET = Symbol('fict:store-target')
+const ITERATE_KEY = Symbol('fict:iterate')
 
 // ============================================================================
 // Store (Deep Proxy)
@@ -57,22 +58,43 @@ function wrap<T>(value: T): T {
       // Recursively wrap objects
       return wrap(value)
     },
+    has(target, prop) {
+      const result = Reflect.has(target, prop)
+      track(target, prop)
+      return result
+    },
+    ownKeys(target) {
+      track(target, ITERATE_KEY)
+      return Reflect.ownKeys(target)
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      track(target, prop)
+      return Reflect.getOwnPropertyDescriptor(target, prop)
+    },
     set(target, prop, value, receiver) {
       if (prop === PROXY || prop === TARGET) return false
 
+      const hadKey = Object.prototype.hasOwnProperty.call(target, prop)
       const oldValue = Reflect.get(target, prop, receiver)
       if (oldValue === value) return true
 
       const result = Reflect.set(target, prop, value, receiver)
       if (result) {
         trigger(target, prop)
+        if (!hadKey) {
+          trigger(target, ITERATE_KEY)
+        }
       }
       return result
     },
     deleteProperty(target, prop) {
+      const hadKey = Object.prototype.hasOwnProperty.call(target, prop)
       const result = Reflect.deleteProperty(target, prop)
       if (result) {
         trigger(target, prop)
+        if (hadKey) {
+          trigger(target, ITERATE_KEY)
+        }
       }
       return result
     },
@@ -99,7 +121,9 @@ function track(target: object, prop: string | symbol) {
 
   let s = signals.get(prop)
   if (!s) {
-    s = signal(getLastValue(target, prop))
+    const initial =
+      prop === ITERATE_KEY ? (Reflect.ownKeys(target).length as number) : getLastValue(target, prop)
+    s = signal(initial)
     signals.set(prop, s)
   }
   s() // subscribe
@@ -110,7 +134,11 @@ function trigger(target: object, prop: string | symbol) {
   if (signals) {
     const s = signals.get(prop)
     if (s) {
-      s(getLastValue(target, prop)) // notify with new value
+      if (prop === ITERATE_KEY) {
+        s(Reflect.ownKeys(target).length)
+      } else {
+        s(getLastValue(target, prop)) // notify with new value
+      }
     }
   }
 }

package/src/types.ts

@@ -128,15 +128,15 @@ export interface DOMEventHandlers {
 // ============================================================================
 
 /** Ref callback type */
-export type RefCallback<T extends HTMLElement = HTMLElement> = (element: T) => void
+export type RefCallback<T extends Element = HTMLElement> = (element: T) => void
 
 /** Ref object type (for future use with createRef) */
-export interface RefObject<T extends HTMLElement = HTMLElement> {
+export interface RefObject<T extends Element = HTMLElement> {
   current: T | null
 }
 
 /** Ref type that can be either callback or object */
-export type Ref<T extends HTMLElement = HTMLElement> = RefCallback<T> | RefObject<T>
+export type Ref<T extends Element = HTMLElement> = RefCallback<T> | RefObject<T>
 
 // ============================================================================
 // Style Types