@srfnstack/fntags 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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;AAgYD;;;;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;;;;;;;;;kCAjxBmC,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,14 +258,26 @@ 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) => {
   const parentCtx = ctx.state.parentCtx
-  const key = keyMapper(parentCtx.mapKey, ctx.currentValue)
+  const key = keyMapper(parentCtx.mapKey, ctx.currentValue, 0)
   if (parentCtx.selectObservers[key] === undefined) {
     parentCtx.selectObservers[key] = []
   }
@@ -387,7 +410,7 @@ function doBindChildren (parent, element) {
   }
   if (typeof ctx.mapKey !== 'function') {
     console.warn('Using value index as key, may not work correctly when moving items...')
-    ctx.mapKey = (o, i) => i
+    ctx.mapKey = (_, i) => i
   }
 
   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))
+  })
 }
 
 /**
@@ -476,18 +541,32 @@ function reconcile (ctx, oldState) {
   }
 }
 
-function keyMapper (mapKey, value) {
+function keyMapper (mapKey, value, i) {
   if (typeof value !== 'object') {
     return value
   } else if (typeof mapKey !== 'function') {
     return 0
   } else {
-    return mapKey(value)
+    return mapKey(value, i)
   }
 }
 
+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 = {}
@@ -506,7 +585,7 @@ function arrangeElements (ctx, bindContext, oldState) {
   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)
+    const key = keyMapper(ctx.mapKey, rawValue, i)
 
     if (keys[key]) {
       if (oldState) ctx.state(oldState)
@@ -531,7 +610,7 @@ function arrangeElements (ctx, bindContext, oldState) {
         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)
+        const idx = currentArr.findIndex((item, i) => keyMapper(ctx.mapKey, item, i) === key)
 
         if (idx > -1 && currentArr[idx] !== newItem) {
           currentArr[idx] = newItem
@@ -558,8 +637,16 @@ function arrangeElements (ctx, bindContext, oldState) {
 
     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
     }
 
@@ -580,6 +667,7 @@ function arrangeElements (ctx, bindContext, oldState) {
         // the previous was deleted all together, so we will delete it and replace the element
         if (keys[prev.previousSibling.key] === undefined) {
           const keyToDelete = prev.previousSibling.key
+          cleanElementSubscriptions(bindContext, keyToDelete)
           delete bindContext.boundElementByKey[keyToDelete]
           delete bindContext.elementStates[keyToDelete] // Cleanup element state
 
@@ -606,6 +694,7 @@ function arrangeElements (ctx, bindContext, oldState) {
   // 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