@srfnstack/fntags 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "author": "Robert Kempton <r@snow87.com>",
   "private": false,
   "homepage": "https://github.com/srfnstack/fntags",
@@ -50,10 +50,10 @@
     "typescript": "^5.3.3"
   },
   "scripts": {
-    "test": "cp src/*.mjs docs/lib/ && npm run lint && cypress run --spec \"test/**\" --headless -b chrome",
-    "cypress": "cypress run --headed --spec test/** -b chrome",
-    "lint": "standard --env browser src && standard --env browser --env jest --global Prism --global cy test",
-    "lint:fix": "standard --env browser --fix src && standard --env browser --env jest --global Prism --global cy --fix test",
+    "test": "cp src/*.mjs docs/lib/ && npm run lint && npm test --prefix packages/fntags-testing && cypress run --spec \"test/docs/**\" --headless -b chrome",
+    "cypress": "cypress run --headed --spec test/docs/** -b chrome",
+    "lint": "standard --env browser src && standard --env browser --env jest --global Prism --global cy test/docs",
+    "lint:fix": "standard --env browser --fix src && standard --env browser --env jest --global Prism --global cy --fix test/docs",
     "typedef": "rm -rf src/*.mts* && tsc",
     "docs": "typedoc --plugin typedoc-plugin-markdown --out docs/types --json docs/types.json ./src/*.mjs && node scripts/generateApi.js",
     "generate-api": "node scripts/generateApi.js",

package/src/fntags.d.mts.map

@@ -1 +1 @@
-{"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"}
+{"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,cAqIlB;AAqfD;;;;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;;;;;;;;;kCAv4BmC,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

@@ -141,7 +141,8 @@ export function fnstate (initialValue, mapKey) {
       } else {
         const oldState = ctx.currentValue
         ctx.currentValue = newState
-        for (const observer of ctx.observers) {
+        const snapshot = ctx.observers.slice()
+        for (const observer of snapshot) {
           observer.fn(newState, oldState)
         }
       }
@@ -277,11 +278,29 @@ function doSubscribe (callback) {
 
 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] = []
   }
   parentCtx.selectObservers[key].push(callback)
+
+  // Return an unsub that removes this callback, and register it in
+  // activeRenderCleanups so parent bindAs re-renders clean it up.
+  let active = true
+  const unsub = () => {
+    if (!active) return
+    active = false
+    const arr = parentCtx.selectObservers[key]
+    if (arr) {
+      const idx = arr.indexOf(callback)
+      if (idx !== -1) arr.splice(idx, 1)
+      if (arr.length === 0) delete parentCtx.selectObservers[key]
+    }
+  }
+  if (activeRenderCleanups !== null) {
+    activeRenderCleanups.push(unsub)
+  }
+  return unsub
 }
 
 function doBindSelectAttr (attribute) {
@@ -335,10 +354,10 @@ function doSelect (key) {
   const currentSelected = ctx.selected
   ctx.selected = key
   if (ctx.selectObservers[currentSelected] !== undefined) {
-    for (const obs of ctx.selectObservers[currentSelected]) obs(ctx.selected)
+    for (const obs of ctx.selectObservers[currentSelected].slice()) obs(ctx.selected)
   }
   if (ctx.selectObservers[ctx.selected] !== undefined) {
-    for (const obs of ctx.selectObservers[ctx.selected]) obs(ctx.selected)
+    for (const obs of ctx.selectObservers[ctx.selected].slice()) obs(ctx.selected)
   }
 }
 
@@ -410,14 +429,34 @@ 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)) {
     throw new Error('You can only use bindChildren with a state that contains an array. try myState([mystate]) before calling this function.')
   }
 
-  ctx.bindContexts.push({ element, parent })
+  const bindContext = { element, parent }
+  ctx.bindContexts.push(bindContext)
+
+  // If inside a parent bindAs render, register a cleanup that tears down all
+  // per-item subscriptions when the parent re-renders or is itself torn down.
+  // Without this, nested bindAttr/bindStyle/bindAs subscriptions created for
+  // each array item would be orphaned when the parent replaces this tree.
+  if (activeRenderCleanups !== null) {
+    activeRenderCleanups.push(() => {
+      if (bindContext.elementCleanups) {
+        for (const key in bindContext.elementCleanups) {
+          for (const unsub of bindContext.elementCleanups[key]) unsub()
+        }
+        bindContext.elementCleanups = {}
+      }
+      // Remove this bindContext so reconcile doesn't operate on stale state
+      const idx = ctx.bindContexts.indexOf(bindContext)
+      if (idx !== -1) ctx.bindContexts.splice(idx, 1)
+    })
+  }
+
   this.subscribe((_, oldState) => {
     if (!Array.isArray(ctx.currentValue)) {
       console.warn('A state used with bindChildren was updated to a non array value. This will be converted to an array of 1 and the state will be updated.')
@@ -460,9 +499,10 @@ const doBind = function (ctx, element, handleReplace) {
   // 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) {
+  if (prevRenderCleanups !== null && (elCtx.drivingUnsub || elCtx.selectUnsub)) {
     prevRenderCleanups.push(() => {
-      elCtx.drivingUnsub()
+      if (elCtx.drivingUnsub) elCtx.drivingUnsub()
+      if (elCtx.selectUnsub) elCtx.selectUnsub()
       runCleanups(elCtx)
     })
   }
@@ -517,7 +557,9 @@ const updateReplacer = (ctx, element, elCtx) => (_, oldValue) => {
 function doBindSelect (element) {
   element = element ?? this
   const ctx = this._ctx
-  return doBind(ctx, element, (elCtx) => subscribeSelect(ctx, updateReplacer(ctx, element, elCtx)))
+  return doBind(ctx, element, (elCtx) => {
+    elCtx.selectUnsub = subscribeSelect(ctx, updateReplacer(ctx, element, elCtx))
+  })
 }
 
 function doBindAs (element) {
@@ -541,13 +583,13 @@ 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)
   }
 }
 
@@ -585,7 +627,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)
@@ -610,7 +652,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
@@ -671,9 +713,7 @@ function arrangeElements (ctx, bindContext, oldState) {
           delete bindContext.boundElementByKey[keyToDelete]
           delete bindContext.elementStates[keyToDelete] // Cleanup element state
 
-          if (ctx.selectObservers[keyToDelete] !== undefined && current.insertAdjacentElement !== undefined) {
-            delete ctx.selectObservers[keyToDelete]
-          }
+          delete ctx.selectObservers[keyToDelete]
           prev.previousSibling.replaceWith(current)
         } else if (isNew) {
           // insertAdjacentElement is faster, but some nodes don't have it (lookin' at you text)