fusee-framework 2.7.0 → 2.7.2

package/framework/core/h.js

@@ -1,4 +1,4 @@
-import { effect, batch, signal, microEffect } from '../core/signal.js'
+import { effect, batch, signal, microEffect, untrack, runDetached } from '../core/signal.js'
 import { createEventHandler, registerDelegatedEvent, isDelegatedEvent } from '../core/event-delegation.js'
 import { resolveElementProperty } from '../core/element-props.js'
 
@@ -70,14 +70,19 @@ export function hIf(branches) {
 
     let currentNodes  = []
     let currentBranch = -1
+    const mounted = _createMountTracker()
 
     const cleanup = effect(() => {
+        mounted.track()
         let matchIdx = -1
         for (let i = 0; i < branches.length; i++) {
             const [cond] = branches[i]
             if (cond === null || cond()) { matchIdx = i; break }
         }
 
+        const parent = anchor.parentNode
+        if (!parent) return mounted.defer()
+
         if (matchIdx === currentBranch) return
 
         _unmountNodes(currentNodes)
@@ -87,24 +92,28 @@ export function hIf(branches) {
         if (matchIdx === -1) return
 
         const [, getChildren] = branches[matchIdx]
-        const children = getChildren()
-        const parent   = anchor.parentNode
+        // Detached: branch effects belong to the branch, which is unmounted explicitly below.
+        const children = runDetached(getChildren)
 
-        if (parent) {
-            for (const fnode of children) {
-                parent.insertBefore(fnode.node, anchor)
-                currentNodes.push(fnode)
-            }
+        for (const fnode of children) {
+            if (!fnode?.node) continue
+            insertFNode(parent, fnode, anchor)
+            currentNodes.push(fnode)
         }
     })
 
-    effects.push(cleanup)
+    effects.push(() => {
+        cleanup()
+        _unmountNodes(currentNodes)
+        currentNodes = []
+    })
 
     return {
         node: anchor,
         effects,
         _ifBranchNodes: () => currentNodes,
         _isIf: true,
+        _afterInsert: mounted.resume,
     }
 }
 
@@ -118,19 +127,28 @@ export function hFor(sourceGetter, renderItem, keyFn) {
     let _keyEvalCurrent = null
     const keyEvaluatorGetter = () => _keyEvalCurrent
     keyEvaluatorGetter.isSignal = true
+    const mounted = _createMountTracker()
 
     const cleanup = effect(() => {
+        mounted.track()
         const list = sourceGetter() ?? []
         const parent = anchor.parentNode
 
-        if (!parent) {
-            return
-        }
+        if (!parent) return mounted.defer()
 
         const newKeys = new Array(list.length)
         for (let i = 0; i < list.length; i++) {
             _keyEvalCurrent = list[i]
-            newKeys[i] = keyFn(keyEvaluatorGetter, i)
+            const key = keyFn(keyEvaluatorGetter, i)
+            // Loops without :key compile to a key of undefined; key them by position, as SSR does.
+            newKeys[i] = key === undefined ? i : key
+        }
+
+        if (newKeys.length === 0 && keyedMap.size > 0) {
+            _clearRows(parent, keyedMap)
+            keyedMap = new Map()
+            oldKeys  = newKeys
+            return
         }
 
         if (oldKeys.length === newKeys.length) {
@@ -140,10 +158,7 @@ export function hFor(sourceGetter, renderItem, keyFn) {
             }
             if (identical) {
                 for (let i = 0; i < list.length; i++) {
-                    const entry = keyedMap.get(newKeys[i])
-                    if (entry.itemSignal() !== list[i]) {
-                        entry.itemSignal(list[i])
-                    }
+                    _setItem(keyedMap.get(newKeys[i]), list[i])
                 }
                 return
             }
@@ -172,12 +187,9 @@ export function hFor(sourceGetter, renderItem, keyFn) {
                 const parentEl = nodeA.parentNode
                 parentEl.insertBefore(nodeA, nodeB.nextSibling)
                 parentEl.insertBefore(nodeB, refA)
-                if (entryA.itemSignal() !== list[diffA]) {
-                    entryA.itemSignal(list[diffA])
-                }
-                if (entryB.itemSignal() !== list[diffB]) {
-                    entryB.itemSignal(list[diffB])
-                }
+                // The two rows traded places: each keeps its key and receives the item now at its new index.
+                _setItem(entryA, list[diffB])
+                _setItem(entryB, list[diffA])
                 oldKeys = newKeys
                 return
             }
@@ -191,13 +203,13 @@ export function hFor(sourceGetter, renderItem, keyFn) {
 
             const exists = keyedMap.get(key)
             if (exists) {
-                if (exists.itemSignal() !== item) {
-                    exists.itemSignal(item)
-                }
+                _setItem(exists, item)
                 newMap.set(key, exists)
             } else {
                 const itemSignal = signal(item)
-                const fnode = renderItem(itemSignal, i)
+                // Detached: otherwise every row's effects are registered as children of this
+                // list effect and stay reachable after the row is removed.
+                const fnode = runDetached(() => renderItem(itemSignal, i))
                 newMap.set(key, { fnode, key, itemSignal })
             }
         }
@@ -228,10 +240,10 @@ export function hFor(sourceGetter, renderItem, keyFn) {
             if (inLis) {
                 lisPtr--
                 if (!entry.fnode.node.parentNode) {
-                    parent.insertBefore(entry.fnode.node, ref)
+                    insertFNode(parent, entry.fnode, ref)
                 }
             } else if (entry.fnode.node.nextSibling !== ref || !entry.fnode.node.parentNode) {
-                parent.insertBefore(entry.fnode.node, ref)
+                insertFNode(parent, entry.fnode, ref)
             }
         }
 
@@ -239,14 +251,80 @@ export function hFor(sourceGetter, renderItem, keyFn) {
         oldKeys  = newKeys
     })
 
-    effects.push(cleanup)
+    effects.push(() => {
+        cleanup()
+        _unmountNodes([...keyedMap.values()].map(e => e.fnode))
+        keyedMap = new Map()
+        oldKeys  = []
+    })
 
     return {
         node: anchor,
         effects,
         _isFor: true,
         _getNodes: () => [...keyedMap.values()].map(e => e.fnode),
+        _afterInsert: mounted.resume,
+    }
+}
+
+/**
+ * Unmounts every row. When the rows are the only elements in the parent, the parent is emptied
+ * in one operation instead of one removeChild per row, and its other nodes (the anchor, template
+ * whitespace, text) are put back in order.
+ */
+function _clearRows(parent, keyedMap) {
+    const fnodes = [...keyedMap.values()].map(e => e.fnode)
+    const rowsAreElements = fnodes.every(f => f.node.nodeType === 1)
+
+    if (rowsAreElements && parent.childElementCount === fnodes.length) {
+        const kept = []
+        for (let n = parent.firstChild; n; n = n.nextSibling) {
+            if (n.nodeType !== 1) kept.push(n)
+        }
+        for (const fnode of fnodes) _disposeEffects(fnode)
+        parent.textContent = ''
+        parent.append(...kept)
+        return
     }
+    _unmountNodes(fnodes)
+}
+
+/** Updates a keyed row's item signal without subscribing the list effect to it. */
+function _setItem(entry, item) {
+    if (untrack(entry.itemSignal) !== item) entry.itemSignal(item)
+}
+
+/**
+ * hIf/hFor are built before their anchor has a parent (children are created before the
+ * element that holds them), so their first render waits until insertFNode() places the
+ * anchor and calls _afterInsert.
+ */
+function _createMountTracker() {
+    const tick = signal(0)
+    let pending = false
+    return {
+        track: () => tick(),
+        defer: () => { pending = true },
+        resume: () => {
+            if (!pending) return
+            pending = false
+            tick(untrack(tick) + 1)
+        }
+    }
+}
+
+/**
+ * Inserts a framework node (and slot nodes it carries) before ref, then lets anchor-based
+ * nodes (hIf/hFor) render now that they have a parent.
+ */
+export function insertFNode(parent, fnode, ref = null) {
+    parent.insertBefore(fnode.node, ref)
+    if (fnode._isSlot && fnode._slotNodes) {
+        for (const sn of fnode._slotNodes) {
+            if (sn?.node) insertFNode(parent, sn, ref)
+        }
+    }
+    if (typeof fnode._afterInsert === 'function') fnode._afterInsert()
 }
 
 function _getLIS(arr) {
@@ -479,13 +557,7 @@ function _mountChildren(parent, children, parentEffects) {
     for (const fnode of children) {
         if (!fnode || !fnode.node) continue
 
-        parent.appendChild(fnode.node)
-
-        if (fnode._isSlot && fnode._slotNodes) {
-            for (const sn of fnode._slotNodes) {
-                if (sn?.node) parent.insertBefore(sn.node, null)
-            }
-        }
+        insertFNode(parent, fnode)
 
         if (fnode.effects) parentEffects.push(...fnode.effects)
         mounted.push(fnode)
@@ -494,16 +566,19 @@ function _mountChildren(parent, children, parentEffects) {
     return mounted
 }
 
+function _disposeEffects(fnode) {
+    if (!fnode.effects) return
+    for (let i = fnode.effects.length - 1; i >= 0; i--) {
+        const cleanup = fnode.effects[i]
+        if (typeof cleanup === 'function') cleanup()
+    }
+}
+
 function _unmountNodes(fnodes) {
     for (const fnode of fnodes) {
         if (!fnode) continue
 
-        if (fnode.effects) {
-            for (let i = fnode.effects.length - 1; i >= 0; i--) {
-                const cleanup = fnode.effects[i]
-                if (typeof cleanup === 'function') cleanup()
-            }
-        }
+        _disposeEffects(fnode)
 
         if (fnode.node?.parentNode) {
             fnode.node.parentNode.removeChild(fnode.node)
@@ -545,7 +620,7 @@ export function mount(renderFn, ctx, components, container) {
 
     for (const fnode of fnodes) {
         if (!fnode?.node) continue
-        container.appendChild(fnode.node)
+        insertFNode(container, fnode)
         if (fnode.effects) effects.push(...fnode.effects)
     }
 

package/framework/core/jsx-helpers.js

@@ -1,4 +1,4 @@
-import { hFor, hIf } from './h.js'
+import { hFor, hIf, hText } from './h.js'
 
 /**
  * Flattens JSX children into a single array of fnodes, dropping
@@ -6,7 +6,8 @@ import { hFor, hIf } from './h.js'
  * behave the way JSX authors expect. Recursively flattens nested arrays,
  * which is all Fragment needs: it returns its children as-is, and whatever
  * consumes those children (h()'s children arg, or another flattenChildren
- * call) inlines them automatically.
+ * call) inlines them automatically. Text and numbers become text nodes, and
+ * getters (dynamic `{expr}` wrapped by the Babel plugin) become reactive ones.
  */
 export function flattenChildren(children) {
     const out = []
@@ -19,6 +20,14 @@ export function flattenChildren(children) {
             stack.unshift(...child)
             continue
         }
+        if (typeof child === 'string' || typeof child === 'number' || typeof child === 'bigint') {
+            out.push(hText(String(child)))
+            continue
+        }
+        if (typeof child === 'function') {
+            out.push(hText(child))
+            continue
+        }
         out.push(child)
     }
 

package/framework/core/jsx-runtime.js

@@ -1,74 +1,74 @@
-// Point your bundler at this module and JSX compiles here with zero custom
-// parser/Babel plugin needed yet:
-//   - esbuild/Vite:  jsx: 'automatic', jsxImportSource: '<path-to-this-folder>'
-//   - tsconfig.json: "jsx": "react-jsx", "jsxImportSource": "<path-to-this-folder>"
-
-import { h, createComponent } from './h.js'
-import {
-    Fragment,
-    For,
-    Show,
-    Slot,
-    on,
-    flattenChildren,
-    normalizeEventProps,
-    normalizeComponentListenerProps,
-    splitSlotChildren
-} from './jsx-helpers.js'
-import { defineComponent as coreDefineComponent } from '../component.js' // adjust to your project layout
-
-export { Fragment, For, Show, Slot, on }
-
-/**
- * Wraps defineComponent so JSX can tell "a fusée component" apart from a
- * plain helper function (Fragment/For/Show/Slot, or your own stateless JSX
- * helpers). Import defineComponent from here instead of component.js in
- * any file that defines components with JSX.
- */
-export function defineComponent(options) {
-    const factory = coreDefineComponent(options)
-    factory._isFuseeComponent = true
-    factory._componentName = options?.name
-    return factory
-}
-
-/** Dispatches a JSX element to h() (DOM tags), createComponent() (fusée components), or a direct call (helpers). */
-function createNode(type, rawProps) {
-    const { children, ...rest } = rawProps || {}
-
-    if (type === Fragment) {
-        return Fragment({ children })
-    }
-
-    if (typeof type === 'string') {
-        return h(type, normalizeEventProps(rest), flattenChildren(children))
-    }
-
-    if (typeof type === 'function' && type._isFuseeComponent) {
-        const name = type._componentName || type.name || 'AnonymousComponent'
-        const props = normalizeComponentListenerProps(rest)
-        return createComponent(name, type, props, splitSlotChildren(children))
-    }
-
-    if (typeof type === 'function') {
-        return type({ ...rest, children })
-    }
-
-    console.warn('[fusée] Unsupported JSX element type:', type)
-    return null
-}
-
-/** Automatic JSX runtime entry point for a single (or statically known) child. */
-export function jsx(type, props, _key) {
-    return createNode(type, props)
-}
-
-/** Automatic JSX runtime entry point when children are a static array. */
-export function jsxs(type, props, _key) {
-    return createNode(type, props)
-}
-
-/** Dev-mode entry point; fusée doesn't use the extra source/self-closing args (yet). */
-export function jsxDEV(type, props, _key, _isStaticChildren, _source, _self) {
-    return createNode(type, props)
+// Point your bundler at this module and JSX compiles here with zero custom
+// parser/Babel plugin needed yet:
+//   - esbuild/Vite:  jsx: 'automatic', jsxImportSource: '<path-to-this-folder>'
+//   - tsconfig.json: "jsx": "react-jsx", "jsxImportSource": "<path-to-this-folder>"
+
+import { h, createComponent } from './h.js'
+import {
+    Fragment,
+    For,
+    Show,
+    Slot,
+    on,
+    flattenChildren,
+    normalizeEventProps,
+    normalizeComponentListenerProps,
+    splitSlotChildren
+} from './jsx-helpers.js'
+import { defineCompiledComponent as coreDefineComponent } from './component-core.js'
+
+export { Fragment, For, Show, Slot, on }
+
+/**
+ * Wraps defineComponent so JSX can tell "a fusée component" apart from a
+ * plain helper function (Fragment/For/Show/Slot, or your own stateless JSX
+ * helpers). Import defineComponent from here instead of component.js in
+ * any file that defines components with JSX.
+ */
+export function defineComponent(options) {
+    const factory = coreDefineComponent(options)
+    factory._isFuseeComponent = true
+    factory._componentName = options?.name
+    return factory
+}
+
+/** Dispatches a JSX element to h() (DOM tags), createComponent() (fusée components), or a direct call (helpers). */
+function createNode(type, rawProps) {
+    const { children, ...rest } = rawProps || {}
+
+    if (type === Fragment) {
+        return Fragment({ children })
+    }
+
+    if (typeof type === 'string') {
+        return h(type, normalizeEventProps(rest), flattenChildren(children))
+    }
+
+    if (typeof type === 'function' && type._isFuseeComponent) {
+        const name = type._componentName || type.name || 'AnonymousComponent'
+        const props = normalizeComponentListenerProps(rest)
+        return createComponent(name, type, props, splitSlotChildren(children))
+    }
+
+    if (typeof type === 'function') {
+        return type({ ...rest, children })
+    }
+
+    console.warn('[fusée] Unsupported JSX element type:', type)
+    return null
+}
+
+/** Automatic JSX runtime entry point for a single (or statically known) child. */
+export function jsx(type, props, _key) {
+    return createNode(type, props)
+}
+
+/** Automatic JSX runtime entry point when children are a static array. */
+export function jsxs(type, props, _key) {
+    return createNode(type, props)
+}
+
+/** Dev-mode entry point; fusée doesn't use the extra source/self-closing args (yet). */
+export function jsxDEV(type, props, _key, _isStaticChildren, _source, _self) {
+    return createNode(type, props)
 }