@srfnstack/fntags 1.1.2 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "author": "Robert Kempton <r@snow87.com>",
   "private": false,
   "homepage": "https://github.com/srfnstack/fntags",

package/src/fntags.d.mts

@@ -1,6 +1,3 @@
-/**
- * @module fntags
- */
 /**
  * A function to create dom elements with the given attributes and children.
  *

package/src/fntags.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"fntags.d.mts","sourceRoot":"","sources":["fntags.mjs"],"names":[],"mappings":"AAAA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,2DALW,MAAM,eACH,CAAC,IAAI,MAAO,CAAC,OA6C1B;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH;;;GAGG;AAEH;;;;;;;;;;GAUG;AACH,iEAPgB,GAAG,cAoIlB;AAwWD;;;;GAIG;AACH,iCAHW,GAAG,GACD,IAAI,CAuBhB;AAqFD;;;;GAIG;AACH,6BAHW,GAAG,GACD,OAAO,CAInB;AAED;;;;GAIG;AACH,mCAHW,GAAG,GACF,MAAM,CAIjB;AAED;;;;;;;;;;GAUG;AACH,kEALW,MAAM,GAAC,MAAM,OACb,MAAM,YACN,MAAM,EAAE,GAAC,IAAI,EAAE,KAezB;AAOD;;;;;;;;;;;;;;;GAeG;AACH,qDAJkB,IAAI,iBACH,IAAI,CA+DtB;;;;;;;;;kCAzvBmC,CAAC,YAAY,CAAC,KAAG,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;;;2BAE/C,CAAC,MAAI,CAAC,IAAI,GAAC,GAAG,CAAC,CAAC,GAAC,GAAG,GAAC,IAAI,gCAAkC,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;;qBAG9E,MAAM,KAAG,IAAI;;;;sCAEI,CAAC,YAAY,CAAC,KAAG,CAAC,MAAM,GAAC,GAAG,CAAC,KAAG,GAAG;;;;mCACvC,CAAC,YAAY,CAAC,KAAG,MAAM,KAAK,MAAM;;;;yCAC7B,GAAG,KAAG,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;+CACrB,GAAG,KAAG,CAAC,MAAM,GAAC,GAAG,CAAC,KAAG,GAAG;;;;;;kBAC7C,GAAG,KAAG,IAAI;;;;cAGhB,MAAK,GAAG;;;;;qBACC,CAAC,KAAG,IAAI;;;;;;oBAEV,MAAM,KAAG,GAAG;;;;oBAGZ,MAAM,SAAS,GAAG,mBAAmB,OAAO,KAAG,IAAI;;;;uCAClC,CAAC,YAAY,CAAC,KAAG,IAAI,KAAK,IAAI;;;;eACtD,OAAO;;;;;sDAKqB,CAAC,KAAG,CAAC"}
+{"version":3,"file":"fntags.d.mts","sourceRoot":"","sources":["fntags.mjs"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,2DALW,MAAM,eACH,CAAC,IAAI,MAAO,CAAC,OA6C1B;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH;;;GAGG;AAEH;;;;;;;;;;GAUG;AACH,iEAPgB,GAAG,cAoIlB;AA8cD;;;;GAIG;AACH,iCAHW,GAAG,GACD,IAAI,CAuBhB;AAqFD;;;;GAIG;AACH,6BAHW,GAAG,GACD,OAAO,CAInB;AAED;;;;GAIG;AACH,mCAHW,GAAG,GACF,MAAM,CAIjB;AAED;;;;;;;;;;GAUG;AACH,kEALW,MAAM,GAAC,MAAM,OACb,MAAM,YACN,MAAM,EAAE,GAAC,IAAI,EAAE,KAezB;AAOD;;;;;;;;;;;;;;;GAeG;AACH,qDAJkB,IAAI,iBACH,IAAI,CA+DtB;;;;;;;;;kCA/1BmC,CAAC,YAAY,CAAC,KAAG,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;;;2BAE/C,CAAC,MAAI,CAAC,IAAI,GAAC,GAAG,CAAC,CAAC,GAAC,GAAG,GAAC,IAAI,gCAAkC,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;;qBAG9E,MAAM,KAAG,IAAI;;;;sCAEI,CAAC,YAAY,CAAC,KAAG,CAAC,MAAM,GAAC,GAAG,CAAC,KAAG,GAAG;;;;mCACvC,CAAC,YAAY,CAAC,KAAG,MAAM,KAAK,MAAM;;;;yCAC7B,GAAG,KAAG,CAAC,IAAI,GAAC,GAAG,CAAC,KAAG,IAAI;;;;+CACrB,GAAG,KAAG,CAAC,MAAM,GAAC,GAAG,CAAC,KAAG,GAAG;;;;;;kBAC7C,GAAG,KAAG,IAAI;;;;cAGhB,MAAK,GAAG;;;;;qBACC,CAAC,KAAG,IAAI;;;;;;oBAEV,MAAM,KAAG,GAAG;;;;oBAGZ,MAAM,SAAS,GAAG,mBAAmB,OAAO,KAAG,IAAI;;;;uCAClC,CAAC,YAAY,CAAC,KAAG,IAAI,KAAK,IAAI;;;;eACtD,OAAO;;;;;sDAKqB,CAAC,KAAG,CAAC"}

package/src/fntags.mjs

@@ -1,6 +1,17 @@
 /**
  * @module fntags
  */
+
+// Tracks subscriptions created during a bindAs render so they can be cleaned
+// up when the bindAs re-renders. null means we are not inside a render.
+let activeRenderCleanups = null
+
+function runCleanups (elCtx) {
+  if (!elCtx.cleanups) return
+  for (const unsub of elCtx.cleanups) unsub()
+  elCtx.cleanups = null
+}
+
 /**
  * A function to create dom elements with the given attributes and children.
  *
@@ -247,9 +258,21 @@ function doSubscribe (callback) {
   const ctx = this._ctx
   const id = ctx.nextId++
   ctx.observers.push({ id, fn: callback })
-  return () => {
-    ctx.observers.splice(ctx.observers.findIndex(l => l.id === id), 1)
+  // Idempotent unsub — safe to call multiple times
+  let active = true
+  const unsub = () => {
+    if (!active) return
+    active = false
+    const idx = ctx.observers.findIndex(l => l.id === id)
+    if (idx !== -1) ctx.observers.splice(idx, 1)
+  }
+  // If we're inside a bindAs render, register this subscription for cleanup
+  // on the next re-render. This prevents nested bindAs/bindAttr/bindStyle
+  // subscriptions from accumulating when the parent bindAs re-renders.
+  if (activeRenderCleanups !== null) {
+    activeRenderCleanups.push(unsub)
   }
+  return unsub
 }
 
 const subscribeSelect = (ctx, callback) => {
@@ -393,7 +416,7 @@ function doBindChildren (parent, element) {
   if (!Array.isArray(ctx.currentValue)) {
     throw new Error('You can only use bindChildren with a state that contains an array. try myState([mystate]) before calling this function.')
   }
-  ctx.currentValue = ctx.currentValue.map(v => v.isFnState ? v : fnstate(v))
+
   ctx.bindContexts.push({ element, parent })
   this.subscribe((_, oldState) => {
     if (!Array.isArray(ctx.currentValue)) {
@@ -420,13 +443,47 @@ const doBind = function (ctx, element, handleReplace) {
   if (typeof element !== 'function') {
     throw new Error('You must pass a function to bind with')
   }
-  const elCtx = { current: renderNode(evaluateElement(element, ctx.currentValue)) }
+
+  // Track subscriptions created during the initial render so they can be
+  // cleaned up if this bindAs itself re-renders (updateReplacer) or when
+  // a parent bindAs re-renders and tears us down entirely.
+  const prevRenderCleanups = activeRenderCleanups
+  const thisRenderCleanups = []
+  activeRenderCleanups = thisRenderCleanups
+  const elCtx = { current: renderNode(evaluateElement(element, ctx.currentValue)), cleanups: thisRenderCleanups }
+  // Suppress tracking during handleReplace — the driving subscription is
+  // registered separately below as part of a cascading cleanup.
+  activeRenderCleanups = null
   handleReplace(elCtx)
+  activeRenderCleanups = prevRenderCleanups
+
+  // If inside a parent bindAs render, register a cascading cleanup that tears
+  // down both the driving subscription and all subscriptions created inside
+  // this bindAs's render, so they don't outlive the parent's re-render.
+  if (prevRenderCleanups !== null && elCtx.drivingUnsub) {
+    prevRenderCleanups.push(() => {
+      elCtx.drivingUnsub()
+      runCleanups(elCtx)
+    })
+  }
+
   return () => elCtx.current
 }
 
 const updateReplacer = (ctx, element, elCtx) => (_, oldValue) => {
+  // Clean up subscriptions from the previous render before re-rendering.
+  // This prevents nested bindAs/bindAttr/bindStyle subscriptions from
+  // accumulating each time the parent state changes.
+  runCleanups(elCtx)
+
+  // Track subscriptions created during this re-render for cleanup next time.
+  const prevRenderCleanups = activeRenderCleanups
+  const thisRenderCleanups = []
+  activeRenderCleanups = thisRenderCleanups
   let rendered = renderNode(evaluateElement(element, ctx.currentValue, oldValue))
+  activeRenderCleanups = prevRenderCleanups
+  elCtx.cleanups = thisRenderCleanups
+
   if (rendered !== undefined) {
     if (elCtx.current.key !== undefined) {
       rendered.key = elCtx.current.key
@@ -438,8 +495,13 @@ const updateReplacer = (ctx, element, elCtx) => (_, oldValue) => {
     }
     // Perform this action on the next event loop to give the parent a chance to render
     new Promise((resolve) => {
-      elCtx.current.replaceWith(rendered)
-      elCtx.current = rendered
+      // Guard: skip replaceWith when the same element is returned (e.g. when
+      // toggling between two pre-built element references). el.replaceWith(el)
+      // is a no-op in the DOM but wastes a microtask.
+      if (rendered !== elCtx.current) {
+        elCtx.current.replaceWith(rendered)
+        elCtx.current = rendered
+      }
       rendered = null
       resolve()
     }).catch(e => {
@@ -461,7 +523,10 @@ function doBindSelect (element) {
 function doBindAs (element) {
   const ctx = this._ctx
   const el = element ?? this
-  return doBind(ctx, el, (elCtx) => this.subscribe(updateReplacer(ctx, el, elCtx)))
+  return doBind(ctx, el, (elCtx) => {
+    // Store so doBind can build a cascading cleanup when nested inside another bindAs
+    elCtx.drivingUnsub = this.subscribe(updateReplacer(ctx, el, elCtx))
+  })
 }
 
 /**
@@ -486,64 +551,105 @@ function keyMapper (mapKey, value) {
   }
 }
 
+function cleanElementSubscriptions (bindContext, key) {
+  const cleanups = bindContext.elementCleanups?.[key]
+  if (!cleanups) return
+  for (const unsub of cleanups) unsub()
+  delete bindContext.elementCleanups[key]
+}
+
 function arrangeElements (ctx, bindContext, oldState) {
   if (!ctx?.currentValue?.length) {
+    // Clean up subscriptions for all existing elements before clearing
+    if (bindContext.elementCleanups) {
+      for (const key in bindContext.elementCleanups) {
+        for (const unsub of bindContext.elementCleanups[key]) unsub()
+      }
+      bindContext.elementCleanups = {}
+    }
     bindContext.parent.textContent = ''
     bindContext.boundElementByKey = {}
+    bindContext.elementStates = {}
     ctx.selectObservers = {}
     return
   }
 
+  // Initialize the element state map if it doesn't exist
+  if (!bindContext.elementStates) {
+    bindContext.elementStates = {}
+  }
+
   const keys = {}
   const keysArr = []
-  let oldStateMap = null
-  for (const i in ctx.currentValue) {
-    let valueState = ctx.currentValue[i]
-    // if the value is not a fnstate, we need to wrap it
-    if (valueState === null || valueState === undefined || !valueState.isFnState) {
-      if (oldStateMap === null) {
-        oldStateMap = oldState && oldState.reduce((acc, v) => {
-          const key = keyMapper(ctx.mapKey, v.isFnState ? v() : v)
-          acc[key] = v
-          return acc
-        }, {})
-      }
-      // check if we have an old state for this key
-      const key = keyMapper(ctx.mapKey, valueState)
-      if (oldStateMap && oldStateMap[key]) {
-        const newValue = valueState
-        valueState = ctx.currentValue[i] = oldStateMap[key]
-        valueState(newValue)
-      } else {
-        valueState = ctx.currentValue[i] = fnstate(valueState)
-      }
-    }
-    const key = keyMapper(ctx.mapKey, valueState())
+
+  for (let i = 0; i < ctx.currentValue.length; i++) {
+    const rawValue = ctx.currentValue[i]
+    // Use the raw value to get the key
+    const key = keyMapper(ctx.mapKey, rawValue)
+
     if (keys[key]) {
       if (oldState) ctx.state(oldState)
       throw new Error('Duplicate keys in a bound array are not allowed, state reset to previous value.')
     }
+
     keys[key] = i
     keysArr[i] = key
+
+    // We look up the persistent fnstate for this key, or create it if new
+    let elementState = bindContext.elementStates[key]
+    if (!elementState) {
+      elementState = fnstate(rawValue)
+      // Ensure the parent state is set so child states can listen to selection changes
+      elementState.parentCtx = ctx
+      bindContext.elementStates[key] = elementState
+      // If the user replaces the value of this elementState (e.g. elementState(newObj)),
+      // we must update the original array to keep it in sync.
+      elementState.subscribe((newItem) => {
+        const currentArr = ctx.state()
+        // If the parent is no longer an array, abort
+        if (!Array.isArray(currentArr)) return
+
+        // find the element dynamically because sorting/filtering might have shifted the index
+        const idx = currentArr.findIndex(item => keyMapper(ctx.mapKey, item) === key)
+
+        if (idx > -1 && currentArr[idx] !== newItem) {
+          currentArr[idx] = newItem
+        }
+      })
+    } else {
+      // Update existing state with new raw value.
+      // fnstate handles the equality check (newValue !== oldValue) internally.
+      elementState(rawValue)
+    }
   }
 
   let prev = null
   const parent = bindContext.parent
 
+  // 2. Render Loop
   for (let i = ctx.currentValue.length - 1; i >= 0; i--) {
     const key = keysArr[i]
-    const valueState = ctx.currentValue[i]
+    // Retrieve the element state to pass to the builder
+    const valueState = bindContext.elementStates[key]
+
     let current = bindContext.boundElementByKey[key]
     let isNew = false
-    // ensure the parent state is always set and can be accessed by the child states to listen to the selection change and such
-    if (valueState.parentCtx === undefined) {
-      valueState.parentCtx = ctx
-    }
+
     if (current === undefined) {
       isNew = true
+      // Track subscriptions created during the builder call so they can be
+      // cleaned up when this item is removed from the array.
+      if (!bindContext.elementCleanups) bindContext.elementCleanups = {}
+      const prevCleanups = activeRenderCleanups
+      const thisElementCleanups = []
+      activeRenderCleanups = thisElementCleanups
+      // Pass the valueState (the fnstate wrapper) to the user's element builder
       current = bindContext.boundElementByKey[key] = renderNode(evaluateElement(bindContext.element, valueState))
+      activeRenderCleanups = prevCleanups
+      bindContext.elementCleanups[key] = thisElementCleanups
       current.key = key
     }
+
     // place the element in the parent
     if (prev == null) {
       if (!parent.lastChild || parent.lastChild.key !== current.key) {
@@ -560,9 +666,13 @@ function arrangeElements (ctx, bindContext, oldState) {
       } else if (prev.previousSibling.key !== current.key) {
         // the previous was deleted all together, so we will delete it and replace the element
         if (keys[prev.previousSibling.key] === undefined) {
-          delete bindContext.boundElementByKey[prev.previousSibling.key]
-          if (ctx.selectObservers[prev.previousSibling.key] !== undefined && current.insertAdjacentElement !== undefined) {
-            delete ctx.selectObservers[prev.previousSibling.key]
+          const keyToDelete = prev.previousSibling.key
+          cleanElementSubscriptions(bindContext, keyToDelete)
+          delete bindContext.boundElementByKey[keyToDelete]
+          delete bindContext.elementStates[keyToDelete] // Cleanup element state
+
+          if (ctx.selectObservers[keyToDelete] !== undefined && current.insertAdjacentElement !== undefined) {
+            delete ctx.selectObservers[keyToDelete]
           }
           prev.previousSibling.replaceWith(current)
         } else if (isNew) {
@@ -581,11 +691,14 @@ function arrangeElements (ctx, bindContext, oldState) {
     prev = current
   }
 
-  // catch any strays
+  // 3. Catch any strays (Cleanup)
   for (const key in bindContext.boundElementByKey) {
     if (keys[key] === undefined) {
+      cleanElementSubscriptions(bindContext, key)
       bindContext.boundElementByKey[key].remove()
       delete bindContext.boundElementByKey[key]
+      delete bindContext.elementStates[key] // Cleanup element state
+
       if (ctx.selectObservers[key] !== undefined) {
         delete ctx.selectObservers[key]
       }