@bitstillery/mithril 3.0.2 → 3.0.3

package/README.md

@@ -10,12 +10,13 @@ bun add @bitstillery/mithril
 
 Mithril.js uses global `m.redraw()` — one state change re-renders **everything**. This fork adds component-level reactivity via signals so only affected components update.
 
-| Feature          | Original            | This Fork                       |
-| ---------------- | ------------------- | ------------------------------- |
-| Reactivity       | Global `m.redraw()` | Fine-grained component updates  |
-| State Management | Manual redraw calls | Signals with automatic tracking |
-| SSR              | No hydration        | State serialization + hydration |
-| TypeScript       | Community types     | Native                          |
+| Feature          | Original            | This Fork                        |
+| ---------------- | ------------------- | -------------------------------- |
+| Reactivity       | Global `m.redraw()` | Fine-grained component updates   |
+| State Management | Manual redraw calls | Signals with automatic tracking  |
+| SSR              | No hydration        | State serialization + hydration  |
+| TypeScript       | Community types     | Native                           |
+| Stream / request | Built-in            | Removed (use signals, `fetch()`) |
 
 Signals are opt-in. Existing Mithril code works unchanged.
 

package/api/mount-redraw.ts

@@ -1,5 +1,6 @@
 import Vnode from '../render/vnode'
 import {getSignalComponents, type Signal} from '../signal'
+import {getStateMaps} from '../render/render'
 
 import type {ComponentType, Children, Vnode as VnodeType} from '../render/vnode'
 
@@ -54,11 +55,9 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
     function redrawComponent(componentOrState: ComponentType) {
         // componentOrState might be vnode.state (from signal tracking) or component object
         // Try to find the actual component object if it's vnode.state
-        let component = componentOrState
-        const stateToComponentMap = (globalThis as any).__mithrilStateToComponent as WeakMap<any, ComponentType> | undefined
-        if (stateToComponentMap && stateToComponentMap.has(componentOrState)) {
-            component = stateToComponentMap.get(componentOrState)!
-        }
+        const {stateToComponentMap, stateToDomMap, stateToVnodeMap} = getStateMaps()
+        const resolved = stateToComponentMap.get(componentOrState)
+        const component = resolved !== undefined ? resolved : componentOrState
 
         // First try: find element in componentToElement (for m.mount components)
         // Check this first to ensure synchronous redraws for m.mount components
@@ -74,14 +73,31 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
             }
         }
 
-        // Second try: find DOM element directly from component state (for routed components)
+        // Second try: targeted redraw for nested components (stateToDomMap path)
         // Only check this if componentToElement didn't find anything (not an m.mount component)
-        const stateToDomMap = (globalThis as any).__mithrilStateToDom as WeakMap<any, Element> | undefined
-        if (stateToDomMap && stateToDomMap.has(componentOrState)) {
-            // For routed components, always use global redraw to ensure RouterRoot re-renders correctly
-            // RouterRoot needs currentResolver and component to be set (from route resolution)
-            // A direct redraw might use stale route state, so we trigger a full sync instead
-            // This ensures RouterRoot re-renders with the current route, preserving Layout
+        const nestedElement = stateToDomMap.get(componentOrState)
+        if (nestedElement !== undefined) {
+            const vnodeInfo = stateToVnodeMap.get(componentOrState)
+            if (nestedElement?.isConnected && component != null && vnodeInfo != null) {
+                const parent = nestedElement.parentElement
+                const oldVnodes = parent != null ? (parent as any).vnodes : null
+                if (parent != null && Array.isArray(oldVnodes) && oldVnodes.length > 0) {
+                    const i = oldVnodes.findIndex((v: any) => v?.state === componentOrState)
+                    if (i >= 0) {
+                        const {key, attrs} = vnodeInfo
+                        const newVnodes = [...oldVnodes]
+                        newVnodes[i] = Vnode(component, key ?? null, attrs ?? null, null, null, null)
+                        try {
+                            render(parent, newVnodes, redraw)
+                            return
+                        } catch (e) {
+                            console.error(e)
+                            // Fall through to full sync on error
+                        }
+                    }
+                }
+            }
+            // Fallback: full sync for RouterRoot correctness or when targeted path fails
             if (!pending) {
                 pending = true
                 schedule(function () {
@@ -117,6 +133,107 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
         }
     }
 
+    function redrawComponents(components: Set<ComponentType>) {
+        const {stateToComponentMap, stateToDomMap, stateToVnodeMap} = getStateMaps()
+        const mountRoots: ComponentType[] = []
+        const nested = new Set<ComponentType>()
+
+        for (const c of components) {
+            const component = stateToComponentMap.get(c) ?? c
+            if (componentToElement.get(component)) {
+                mountRoots.push(c)
+            } else {
+                nested.add(c)
+            }
+        }
+
+        for (const c of mountRoots) {
+            redrawComponent(c)
+        }
+
+        if (nested.size === 0) return
+
+        // Group nested components by parent element
+        const parentToStates = new Map<Element, Set<ComponentType>>()
+        for (const state of nested) {
+            const el = stateToDomMap.get(state)
+            const parent = el?.parentElement
+            if (!parent || !el?.isConnected) {
+                // Can't do targeted redraw, fall back to full sync
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+                return
+            }
+            let set = parentToStates.get(parent)
+            if (!set) {
+                set = new Set()
+                parentToStates.set(parent, set)
+            }
+            set.add(state)
+        }
+
+        for (const [parent, states] of parentToStates) {
+            const oldVnodes = (parent as any).vnodes
+            if (!Array.isArray(oldVnodes) || oldVnodes.length === 0) {
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+                return
+            }
+
+            const newVnodes = [...oldVnodes]
+            let allFound = true
+            for (const state of states) {
+                const i = oldVnodes.findIndex((v: any) => v?.state === state)
+                if (i < 0) {
+                    allFound = false
+                    break
+                }
+                const component = stateToComponentMap.get(state) ?? state
+                const vnodeInfo = stateToVnodeMap.get(state)
+                if (!vnodeInfo) {
+                    allFound = false
+                    break
+                }
+                const {key, attrs} = vnodeInfo
+                newVnodes[i] = Vnode(component, key ?? null, attrs ?? null, null, null, null)
+            }
+
+            if (!allFound) {
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+                return
+            }
+
+            try {
+                render(parent, newVnodes, redraw)
+            } catch (e) {
+                console.error(e)
+                if (!pending) {
+                    pending = true
+                    schedule(function () {
+                        pending = false
+                        sync()
+                    })
+                }
+            }
+        }
+    }
+
     function redraw(component?: ComponentType) {
         // Component-level redraw
         if (component !== undefined) {
@@ -135,6 +252,7 @@ export default function mountRedrawFactory(render: Render, schedule: Schedule, c
     }
 
     redraw.sync = sync
+    ;(redraw as any).redrawComponents = redrawComponents
 
     // Export function to redraw components affected by signal changes
     ;(redraw as any).signal = function (signal: Signal<any>) {

package/index.ts

@@ -70,14 +70,33 @@ m.censor = censor
 m.nextTick = nextTick
 m.domFor = domFor
 
-// Set up signal-to-component redraw integration
+// Set up signal-to-component redraw integration with batching.
+// Collects all components needing redraw in the current tick, then flushes once via queueMicrotask.
+// Avoids N synchronous redraws when many signals fire (e.g. 50% of 800 rows).
+let pendingRedrawComponents = new Set<any>()
+let redrawScheduled = false
+
+function flushPendingRedraws() {
+    const components = new Set(pendingRedrawComponents)
+    pendingRedrawComponents.clear()
+    redrawScheduled = false
+    if (components.size === 1) {
+        m.redraw(components.values().next().value)
+    } else if (components.size > 1) {
+        const fn = (m.redraw as any).redrawComponents
+        if (fn) fn(components)
+        else m.redraw()
+    }
+}
+
 setSignalRedrawCallback((sig: Signal<any>) => {
     const components = getSignalComponents(sig)
-    if (components) {
-        components.forEach((component) => {
-            // Use the component-level redraw
-            m.redraw(component as any)
-        })
+    if (components && components.size > 0) {
+        components.forEach((c) => pendingRedrawComponents.add(c))
+        if (!redrawScheduled) {
+            redrawScheduled = true
+            queueMicrotask(flushPendingRedraws)
+        }
     }
 })
 
@@ -90,6 +109,7 @@ export {Store} from './store'
 
 // Export SSR utilities
 export {serializeStore, deserializeStore, serializeAllStates, deserializeAllStates} from './render/ssrState'
+export type {DeserializeOptions} from './render/ssrState'
 
 // Export SSR request context (for per-request store and state registry)
 export {getSSRContext, runWithContext, runWithContextAsync, cleanupWatchers} from './ssrContext'

package/package.json

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

package/render/render.ts

@@ -9,6 +9,15 @@ import cachedAttrsIsStaticMap from './cachedAttrsIsStaticMap'
 
 import type {Vnode as VnodeType, Children} from './vnode'
 
+// Module-level maps for component/state-to-DOM tracking (used by mount-redraw for signal redraws)
+const stateToDomMap = new WeakMap<any, Element>()
+const stateToComponentMap = new WeakMap<any, any>()
+const stateToVnodeMap = new WeakMap<any, {key?: string | number | null; attrs?: Record<string, any>}>()
+
+export function getStateMaps() {
+    return {stateToDomMap, stateToComponentMap, stateToVnodeMap}
+}
+
 export default function renderFactory() {
     const nameSpace: Record<string, string> = {
         svg: 'http://www.w3.org/2000/svg',
@@ -383,8 +392,7 @@ export default function renderFactory() {
         // Track component for signal dependency tracking
         // Store mapping from vnode.state to vnode.tag (component object) for redraw
         if (vnode.state && vnode.tag && !isHydrating) {
-            ;(globalThis as any).__mithrilStateToComponent = (globalThis as any).__mithrilStateToComponent || new WeakMap()
-            ;(globalThis as any).__mithrilStateToComponent.set(vnode.state, vnode.tag)
+            stateToComponentMap.set(vnode.state, vnode.tag)
         }
         // Always track component dependencies for signal tracking (even during hydration)
         // This allows signals to know which components depend on them
@@ -418,10 +426,10 @@ export default function renderFactory() {
             vnode.dom = vnode.instance.dom
             vnode.domSize = vnode.instance.domSize
 
-            // Store component's DOM element for fine-grained redraw (not during hydration)
+            // Store component's DOM element and vnode info for fine-grained redraw (not during hydration)
             if (vnode.state && vnode.dom && !isHydrating) {
-                ;(globalThis as any).__mithrilStateToDom = (globalThis as any).__mithrilStateToDom || new WeakMap()
-                ;(globalThis as any).__mithrilStateToDom.set(vnode.state, vnode.dom)
+                stateToDomMap.set(vnode.state, vnode.dom)
+                stateToVnodeMap.set(vnode.state, {key: vnode.key, attrs: vnode.attrs})
             }
         } else {
             vnode.domSize = 0
@@ -697,8 +705,7 @@ export default function renderFactory() {
         // Track component for signal dependency tracking
         // Store mapping from vnode.state to vnode.tag (component object) for redraw
         if (vnode.state && vnode.tag && !isHydrating) {
-            ;(globalThis as any).__mithrilStateToComponent = (globalThis as any).__mithrilStateToComponent || new WeakMap()
-            ;(globalThis as any).__mithrilStateToComponent.set(vnode.state, vnode.tag)
+            stateToComponentMap.set(vnode.state, vnode.tag)
         }
         // Always track component dependencies for signal tracking (even during hydration)
         // This allows signals to know which components depend on them
@@ -723,10 +730,10 @@ export default function renderFactory() {
             vnode.dom = vnode.instance.dom
             vnode.domSize = vnode.instance.domSize
 
-            // Store component's DOM element for fine-grained redraw (not during hydration)
+            // Store component's DOM element and vnode info for fine-grained redraw (not during hydration)
             if (vnode.state && vnode.dom && !isHydrating) {
-                ;(globalThis as any).__mithrilStateToDom = (globalThis as any).__mithrilStateToDom || new WeakMap()
-                ;(globalThis as any).__mithrilStateToDom.set(vnode.state, vnode.dom)
+                stateToDomMap.set(vnode.state, vnode.dom)
+                stateToVnodeMap.set(vnode.state, {key: vnode.key, attrs: vnode.attrs})
             }
         } else {
             if (old.instance != null) removeNode(parent, old.instance)
@@ -912,9 +919,12 @@ export default function renderFactory() {
     }
 
     function onremove(vnode: any) {
-        // Clean up signal dependencies when component is removed
+        // Clean up signal dependencies and state maps when component is removed
         if (typeof vnode.tag !== 'string' && vnode.state != null) {
             clearComponentDependencies(vnode.state)
+            stateToDomMap.delete(vnode.state)
+            stateToComponentMap.delete(vnode.state)
+            stateToVnodeMap.delete(vnode.state)
         }
         if (typeof vnode.tag !== 'string' && typeof vnode.state.onremove === 'function')
             callHook.call(vnode.state.onremove, vnode)

package/render/ssrState.ts

@@ -326,12 +326,18 @@ function restoreComputedProperties(state: State<any>, initial: any): void {
     restore(initial, state)
 }
 
-export function deserializeAllStates(serialized: Record<string, any>): void {
+export interface DeserializeOptions {
+    /** Skip deserializing these state instances (e.g. Store state that should come from localStorage) */
+    skipStates?: Set<any>
+}
+
+export function deserializeAllStates(serialized: Record<string, any>, options?: DeserializeOptions): void {
     if (!serialized || typeof serialized !== 'object') {
         return
     }
 
     const registeredStates = getRegisteredStates()
+    const skipStates = options?.skipStates
 
     // First, deserialize all states
     for (const [name, serializedState] of Object.entries(serialized)) {
@@ -345,6 +351,10 @@ export function deserializeAllStates(serialized: Record<string, any>): void {
             continue
         }
 
+        if (skipStates?.has(entry.state)) {
+            continue
+        }
+
         try {
             deserializeStore(entry.state, serializedState)
         } catch (error) {
@@ -356,6 +366,9 @@ export function deserializeAllStates(serialized: Record<string, any>): void {
     // After deserializing, restore computed properties from original initial states
     // This ensures computed properties work after SSR deserialization
     for (const [name, entry] of registeredStates.entries()) {
+        if (skipStates?.has(entry.state)) {
+            continue
+        }
         try {
             restoreComputedProperties(entry.state, entry.initial)
         } catch (error) {

package/signal.ts

@@ -25,15 +25,20 @@ export function getCurrentComponent() {
 }
 
 export function trackComponentSignal(component: any, signal: Signal<any>) {
-    if (!componentSignalMap.has(component)) {
-        componentSignalMap.set(component, new Set())
+    let set = componentSignalMap.get(component)
+    if (!set) {
+        set = new Set()
+        componentSignalMap.set(component, set)
     }
-    componentSignalMap.get(component)!.add(signal)
+    if (set.has(signal)) return
+    set.add(signal)
 
-    if (!signalComponentMap.has(signal)) {
-        signalComponentMap.set(signal, new Set())
+    let compSet = signalComponentMap.get(signal)
+    if (!compSet) {
+        compSet = new Set()
+        signalComponentMap.set(signal, compSet)
     }
-    signalComponentMap.get(signal)!.add(component)
+    compSet.add(component)
 }
 
 export function getComponentSignals(component: any): Set<Signal<any>> | undefined {

package/store.ts

@@ -144,9 +144,13 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
     private lookup_verify_interval: number | null = null
     private lookup_ttl: number
     private computedPropertiesSetup?: () => void
+    private storageKey: string
+    private tabStorageKey: string
 
-    constructor(options: {lookup_ttl?: number} = {lookup_ttl: DEFAULT_LOOKUP_TTL}) {
+    constructor(options: {lookup_ttl?: number; storageKey?: string; tabStorageKey?: string} = {lookup_ttl: DEFAULT_LOOKUP_TTL}) {
         this.lookup_ttl = options.lookup_ttl || DEFAULT_LOOKUP_TTL
+        this.storageKey = options.storageKey ?? 'store'
+        this.tabStorageKey = options.tabStorageKey ?? this.storageKey
         // Initialize with empty state, will be loaded later (ADR-0013: defer computeds until ready() is called)
         const instanceName = `store.instance.${storeInstanceCounter++}`
         this.stateInstance = state({} as T, instanceName, {deferComputed: true})
@@ -271,8 +275,8 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
 
     load(saved: Partial<T>, temporary: Partial<T>, tab: Partial<T> = {} as Partial<T>, session: Partial<T> = {} as Partial<T>) {
         const restored_state = {
-            tab: this.get_tab_storage('store'),
-            store: this.get('store'),
+            tab: this.get_tab_storage(this.tabStorageKey),
+            store: this.get(this.storageKey),
         }
 
         this.templates = {
@@ -381,7 +385,7 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
 
         // Save to localStorage (saved state)
         if (saveSaved && this.templates.saved) {
-            this.set('store', this.blueprint(statePlain, copy_object(this.templates.saved)))
+            this.set(this.storageKey, this.blueprint(statePlain, copy_object(this.templates.saved)))
         }
 
         // Save to sessionStorage (tab state)
@@ -397,18 +401,18 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
                 if (isState(tabState)) {
                     const tabPlain = serializeStore(tabState)
                     // blueprint expects both arguments to have the same structure
-                    this.set_tab('store', this.blueprint(tabPlain, copy_object(tabTemplate)))
+                    this.set_tab(this.tabStorageKey, this.blueprint(tabPlain, copy_object(tabTemplate)))
                 } else {
                     // Plain object tab
-                    this.set_tab('store', this.blueprint(tabState, copy_object(tabTemplate)))
+                    this.set_tab(this.tabStorageKey, this.blueprint(tabState, copy_object(tabTemplate)))
                 }
             } else {
                 // No tab state - save empty tab based on template structure
                 const tabTemplate = (this.templates.tab as any).tab || this.templates.tab
                 if (tabTemplate && Object.keys(tabTemplate).length > 0) {
-                    this.set_tab('store', this.blueprint({} as any, copy_object(tabTemplate)))
+                    this.set_tab(this.tabStorageKey, this.blueprint({} as any, copy_object(tabTemplate)))
                 } else {
-                    this.set_tab('store', {})
+                    this.set_tab(this.tabStorageKey, {})
                 }
             }
         }