@bitstillery/mithril 3.4.0 → 3.4.2

package/api/router.ts

@@ -53,7 +53,7 @@ interface MountRedraw {
 }
 
 interface RouteOptions {
-    /** When true, forces the route component to remount (e.g. for same-route navigation with different query params) */
+    /** When true, bumps remountNonce once so the resolver fragment key changes for that navigation (e.g. Link). */
     remount?: boolean
     replace?: boolean
     state?: any
@@ -80,8 +80,8 @@ export default function router($window: any, mountRedraw: MountRedraw) {
     let currentPath: string | undefined
     let lastUpdate: ((comp: any) => void) | null = null
     let routeSetResolve: (() => void) | null = null
-    let remountPath: string | null = null
-    let pendingRemount = false
+    /** Incremented only when route.set(..., { remount: true }); fragment key is m-route-${remountNonce}. */
+    let remountNonce = 0
 
     const RouterRoot: ComponentType = {
         onremove: function () {
@@ -94,21 +94,15 @@ export default function router($window: any, mountRedraw: MountRedraw) {
             // if (!hasBeenResolved) return
 
             // Pass currentPath in attrs so RouteResolver.render can use it for routePath.
-            // Use remountPath when set (from route.set with remount: true) to force remount
-            // for same-route navigation; otherwise attrs.key for route param changes.
+            // No vnode key on the route component: same resolved component updates in place when path/query
+            // changes; apps sync state via attrs/onupdate. Do not use attrs.key from merged query (?key=...).
             const routeAttrs = {...attrs, routePath: currentPath || attrs.routePath}
-            const vnodeKey = remountPath ?? attrs.key
-            const vnode = Vnode(component, vnodeKey, routeAttrs, null, null, null)
+            const vnode = Vnode(component, undefined, routeAttrs, null, null, null)
             if (currentResolver) {
                 const result = currentResolver.render!(vnode as any)
-                // When remount requested, wrap in keyed fragment so same-route navigation
-                // (e.g. Stock <-> TBO) forces full remount. Key must change when path changes.
-                // Always wrap when we have a path so structure is consistent; key drives remount.
-                const fragmentKey = remountPath ?? currentPath ?? undefined
-                if (remountPath && fragmentKey != null) {
-                    return hyperscript.fragment({key: fragmentKey}, result)
-                }
-                return result
+                // Always wrap in a keyed fragment (stable shape). Key only changes when remountNonce bumps
+                // (route.set with remount: true), not on ordinary URL updates.
+                return hyperscript.fragment({key: 'm-route-' + remountNonce}, result)
             }
             // Wrap in a fragment to preserve existing key semantics
             return [vnode]
@@ -188,7 +182,10 @@ export default function router($window: any, mountRedraw: MountRedraw) {
         const path = decodeURIComponentSafe(prefix).slice(route.prefix.length)
         const data = parsePathname(path)
 
-        Object.assign(data.params, $window.history.state || {})
+        const histState = $window?.history?.state
+        if (histState != null && typeof histState === 'object' && !Array.isArray(histState)) {
+            Object.assign(data.params, histState)
+        }
 
         function reject(e: any) {
             console.error(e)
@@ -248,10 +245,6 @@ export default function router($window: any, mountRedraw: MountRedraw) {
                         }
                         attrs = data.params
                         currentPath = path
-                        if (pendingRemount) {
-                            remountPath = path
-                            pendingRemount = false
-                        }
                         lastUpdate = null
                         routeSetResolve?.()
                         routeSetResolve = null
@@ -339,10 +332,9 @@ export default function router($window: any, mountRedraw: MountRedraw) {
         }
         lastUpdate = null
 
-        if (!options?.remount) {
-            remountPath = null
+        if (options?.remount) {
+            remountNonce++
         }
-        pendingRemount = options?.remount ?? false
 
         path = buildPathname(path, data || {})
         if (!ready || !$window) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitstillery/mithril",
-    "version": "3.4.0",
+    "version": "3.4.2",
     "description": "Mithril + Signals, Store and SSR",
     "license": "MIT",
     "author": "Bitstillery",

package/pathname/compileTemplate.ts

@@ -1,5 +1,8 @@
 import parsePathname from './parse'
 
+/** Path segments, :params, and regexp escapes (shared by compileTemplate). */
+const TEMPLATE_PATH_TO_REGEXP = /:([^/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|[\]{}]/g
+
 interface CompiledTemplate {
     (data: {path: string; params: Record<string, any>}): boolean
 }
@@ -20,7 +23,7 @@ export default function compileTemplate(template: string): CompiledTemplate {
                 // `:lang-:locale` in routes. This is all merged into one pass so I
                 // don't also accidentally escape `-` and make it harder to detect it to
                 // ban it from template parameters.
-                /:([^/.-]+)(\.{3}|\.(?!\.)|-)?|[\\^$*+.()|[\]{}]/g,
+                TEMPLATE_PATH_TO_REGEXP,
                 function (m, key, extra) {
                     if (key == null) return '\\' + m
                     keys.push({k: key, r: extra === '...'})

package/render/ssrState.ts

@@ -100,8 +100,10 @@ export function serializeStore(state: State<any>): any {
                     continue
                 }
 
-                // For nested states, only serialize keys that belong to this state (not parent keys)
-                if (nestedOriginalKeys && !nestedOriginalKeys.has(key)) {
+                // For nested states, only serialize keys that belong to this state (not parent keys).
+                // When originalKeys is empty (e.g. lookup: {}), include all keys so dynamically
+                // added entries (e.g. $s.lookup[path] = data) are serialized.
+                if (nestedOriginalKeys && nestedOriginalKeys.size > 0 && !nestedOriginalKeys.has(key)) {
                     continue
                 }
 

package/store.ts

@@ -1,6 +1,5 @@
 import {state, State, updateStateRegistry} from './state'
 import {serializeStore, deserializeStore} from './render/ssrState'
-import {ComputedSignal} from './signal'
 
 // Helper function to restore computed properties (same as in ssrState.ts)
 function restoreComputedProperties(state: State<any>, initial: any): void {
@@ -374,22 +373,26 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
             return
         }
 
-        // Default to saving saved/tab when no options; session is opt-in (off by default)
-        const saveSaved = options?.saved ?? options === undefined
-        const saveTab = options?.tab ?? options === undefined
-        const saveSession = options?.session === true
+        // Default: write to localStorage and sessionStorage when no options; session is opt-in
+        const writeLocalStorage = options?.saved ?? options === undefined
+        const writeSessionStorage = options?.tab ?? options === undefined
+        const writeSessionApi = options?.session === true
 
-        // Use SSR serialization which properly handles State objects and skips ComputedSignal properties
-        // This is the same mechanism used for SSR, ensuring consistency
         const statePlain = serializeStore(this.stateInstance)
 
-        // Save to localStorage (saved state)
-        if (saveSaved && this.templates.saved) {
+        // Write to localStorage (persistent across browser restarts)
+        if (writeLocalStorage && this.templates.saved) {
             this.set(this.storageKey, this.blueprint(statePlain, copy_object(this.templates.saved)))
         }
 
-        // Save to sessionStorage (tab state)
-        if (saveTab && this.templates.tab) {
+        // Lookup is always persisted to localStorage when present, regardless of writeLocalStorage.
+        // This ensures cached values (e.g. filter/sort state) are never lost when save() is called.
+        if ((statePlain as any).lookup) {
+            this.persist_lookup_to_local_storage(statePlain)
+        }
+
+        // Write to sessionStorage (tab-scoped, cleared when tab closes)
+        if (writeSessionStorage && this.templates.tab) {
             const tabState = (this.stateInstance as any).tab
             if (tabState) {
                 // Get the tab template - unwrap if it's nested under a 'tab' key
@@ -420,7 +423,7 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
         // Save to session API (session state) - async by nature
         // Only save session on client side (not during SSR)
         if (
-            saveSession &&
+            writeSessionApi &&
             this.templates.session &&
             Object.keys(this.templates.session).length > 0 &&
             typeof window !== 'undefined'
@@ -441,6 +444,27 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
         }
     }
 
+    /**
+     * Merge lookup from state into localStorage and write. Ensures lookup is always persisted
+     * whenever save() is called and state contains lookup.
+     */
+    private persist_lookup_to_local_storage(statePlain: Record<string, any>): void {
+        if (typeof window === 'undefined') return
+        try {
+            const existing = this.get(this.storageKey)
+            let storeData: Record<string, any> = {}
+            try {
+                storeData = JSON.parse(existing) || {}
+            } catch {
+                storeData = {}
+            }
+            storeData.lookup = copy_object(statePlain.lookup || {})
+            window.localStorage.setItem(this.storageKey, JSON.stringify(storeData))
+        } catch (err) {
+            console.error('Cannot persist lookup to Local Storage; continue without.', err)
+        }
+    }
+
     set(key: string, item: object): void {
         if (typeof window === 'undefined') return
         try {