@srfnstack/fntags 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srfnstack/fntags",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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

@@ -92,6 +92,30 @@ export function getAttrs(children: any): object;
  * @return {T} The styled element
  */
 export function styled<T extends HTMLElement | SVGElement>(style: object | string, tag: string, children: object[] | Node[]): T;
+/**
+ * Get or create a state instance from the global HMR registry.
+ * During development with HMR, the Vite plugin rewrites fnstate() calls to use this function,
+ * ensuring state instances survive module reloads.
+ *
+ * @param {string} id A stable identifier for this state instance (typically 'filepath:varName')
+ * @param {any} initialValue The initial value, used only when creating a new state
+ * @param {((v: any) => string)?} [mapKey] Optional key function, used only when creating a new state
+ * @returns {FnState} The state instance from the registry
+ */
+export function registeredState(id: string, initialValue: any, mapKey?: (v: any) => string): any;
+/**
+ * Create an HMR-aware root mount point. Call this in your entry file to mount your app.
+ * The returned `rerender` function can be called from an HMR accept callback to re-render
+ * the app with new code while preserving state (via registeredState).
+ *
+ * @param {HTMLElement} container The DOM element to mount into
+ * @param {(()=>Node)|Node} appFn A function that returns the app's root element, or the element itself
+ * @returns {{ container: HTMLElement, rerender: () => void }}
+ */
+export function hmrRoot(container: HTMLElement, appFn: (() => Node) | Node): {
+    container: HTMLElement;
+    rerender: () => void;
+};
 /**
  * Create a compiled template function. The returned function takes a single object that contains the properties
  * defined in the template.

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;;;;;;;;;GASG;AACH,oCALW,MAAM,gBACN,GAAG,eACE,GAAG,KAAK,MAAM,OAc7B;AAED;;;;;;;;GAQG;AACH,mCAJW,WAAW,SACX,CAAC,MAAI,IAAI,CAAC,GAAC,IAAI,GACb;IAAE,SAAS,EAAE,WAAW,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAE,CAU5D;AAED;;;;;;;;;;;;;;;GAeG;AACH,qDAJkB,IAAI,iBACH,IAAI,CA+DtB;;;;;;;;;kCAj7BmC,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)
         }
       }
@@ -282,6 +283,24 @@ const subscribeSelect = (ctx, callback) => {
     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)
   }
 }
 
@@ -417,7 +436,27 @@ function doBindChildren (parent, element) {
     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) {
@@ -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)
@@ -873,6 +913,48 @@ const stringifyStyle = style =>
     ? style
     : Object.keys(style).map(prop => `${prop}:${style[prop]}`).join(';')
 
+/**
+ * Get or create a state instance from the global HMR registry.
+ * During development with HMR, the Vite plugin rewrites fnstate() calls to use this function,
+ * ensuring state instances survive module reloads.
+ *
+ * @param {string} id A stable identifier for this state instance (typically 'filepath:varName')
+ * @param {any} initialValue The initial value, used only when creating a new state
+ * @param {((v: any) => string)?} [mapKey] Optional key function, used only when creating a new state
+ * @returns {FnState} The state instance from the registry
+ */
+export function registeredState (id, initialValue, mapKey) {
+  if (!globalThis.__fntags_registry) {
+    globalThis.__fntags_registry = new Map()
+  }
+  const registry = globalThis.__fntags_registry
+  if (registry.has(id)) {
+    return registry.get(id)
+  }
+  const state = fnstate(initialValue, mapKey)
+  registry.set(id, state)
+  return state
+}
+
+/**
+ * Create an HMR-aware root mount point. Call this in your entry file to mount your app.
+ * The returned `rerender` function can be called from an HMR accept callback to re-render
+ * the app with new code while preserving state (via registeredState).
+ *
+ * @param {HTMLElement} container The DOM element to mount into
+ * @param {(()=>Node)|Node} appFn A function that returns the app's root element, or the element itself
+ * @returns {{ container: HTMLElement, rerender: () => void }}
+ */
+export function hmrRoot (container, appFn) {
+  const render = () => {
+    container.innerHTML = ''
+    const result = typeof appFn === 'function' ? appFn() : appFn
+    container.appendChild(renderNode(result))
+  }
+  render()
+  return { container, rerender: render }
+}
+
 /**
  * Create a compiled template function. The returned function takes a single object that contains the properties
  * defined in the template.