@bitstillery/mithril 3.8.0 → 3.9.1

package/api/router.ts

@@ -26,6 +26,15 @@ export interface RouteResolver<Attrs = Record<string, any>, State = any> {
 export type SSRState = Record<string, any>
 export type SSRResult = string | {html: string; state: SSRState}
 
+/**
+ * A route parameter as the URL can carry it. Path params are always strings; the querystring parser
+ * also turns `true`/`false` into booleans and `a[]=`/`a[b]=` keys into arrays and objects. A plain
+ * object in `history.state` is merged over the params too, so values put there must keep to this
+ * shape for the type to hold.
+ */
+export type RouteParamValue = string | boolean | RouteParamValue[] | {[key: string]: RouteParamValue}
+export type RouteParams = Record<string, RouteParamValue>
+
 export interface Route {
     (path: string, params?: Record<string, any>, shouldReplaceHistory?: boolean): void
     (path: string, component: ComponentType, shouldReplaceHistory?: boolean): void
@@ -33,7 +42,10 @@ export interface Route {
     get: () => string
     prefix: string
     link: (vnode: VnodeType) => string
-    param: (key?: string) => any
+    param: {
+        (key: string): RouteParamValue | undefined
+        (): RouteParams
+    }
     params: Record<string, any>
     Link: ComponentType
     SKIP: {}

package/index.ts

@@ -12,7 +12,15 @@ import censor from './util/censor'
 import nextTick from './util/next_tick'
 import domFor from './render/domFor'
 import {signal, computed, effect, Signal, ComputedSignal, setSignalRedrawCallback, getSignalComponents} from './signal'
-import {state, watch, registerState, getRegisteredStates, clearStateRegistry, copyGlobalStatesToContext} from './state'
+import {
+    state,
+    watch,
+    registerState,
+    getRegisteredStates,
+    clearStateRegistry,
+    copyGlobalStatesToContext,
+    allowComputed,
+} from './state'
 
 import type {Vnode, Children, ComponentType} from './render/vnode'
 import type {Hyperscript} from './render/hyperscript'
@@ -101,8 +109,20 @@ setSignalRedrawCallback((sig: Signal<any>) => {
 })
 
 // Export signals API
-export {signal, computed, effect, Signal, ComputedSignal, state, watch, registerState, getRegisteredStates, clearStateRegistry}
-export type {State, StateArray, StateOptions, StateSignals, Unwatch} from './state'
+export {
+    signal,
+    computed,
+    effect,
+    Signal,
+    ComputedSignal,
+    state,
+    watch,
+    registerState,
+    getRegisteredStates,
+    clearStateRegistry,
+    allowComputed,
+}
+export type {DeepPartial, State, StateArray, StateOptions, StateSignals, Unwatch} from './state'
 
 // Export Store class
 export {Store} from './store'
@@ -140,7 +160,7 @@ export type {
 } from './render/vnode'
 export {MithrilComponent}
 export type {Hyperscript} from './render/hyperscript'
-export type {Route, RouteResolver, RedirectObject} from './api/router'
+export type {Route, RouteParams, RouteParamValue, RouteResolver, RedirectObject} from './api/router'
 export type {Render, Redraw, Mount} from './api/mount-redraw'
 
 // Namespace merge: enables m.Vnode<Attrs> and m.Children when using import m from '@bitstillery/mithril'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitstillery/mithril",
-    "version": "3.8.0",
+    "version": "3.9.1",
     "description": "Mithril + Signals, Store and SSR",
     "license": "MIT",
     "author": "Bitstillery",
@@ -52,7 +52,7 @@
         "lint:ts": "bun run lint:ts-format && bun run lint:ts-syntax && bun run lint:ts-types",
         "lint:ts-format": "oxfmt",
         "lint:ts-syntax": "oxlint -c .oxlintrc.json",
-        "lint:ts-types": "tsgo --noEmit",
+        "lint:ts-types": "tsc --noEmit",
         "test": "bun test",
         "bench": "NODE_ENV=production bun run bench/index.ts",
         "bench:hyperscript": "NODE_ENV=production bun run bench/index.ts hyperscript",
@@ -60,7 +60,7 @@
         "bench:signal": "NODE_ENV=production bun run bench/index.ts signal",
         "bench:state": "NODE_ENV=production bun run bench/index.ts state",
         "bench:profile": "bun --cpu-prof-md run bench/index.ts",
-        "prepublishOnly": "bun run lint:ts",
+        "prepublishOnly": "oxfmt --check && bun run lint:ts-syntax && bun run lint:ts-types",
         "pack:dry-run": "npm pack --dry-run",
         "release": "./scripts/release.sh",
         "release:patch": "./scripts/release.sh --release-as patch",
@@ -78,7 +78,6 @@
         "@codemirror/theme-one-dark": "^6.1.2",
         "@codemirror/view": "^6.39.1",
         "@types/bun": "^1.3.9",
-        "@typescript/native-preview": "^7.0.0-dev.20260120.1",
         "codemirror": "^6.0.1",
         "marked": "^15.0.4",
         "marked-gfm-heading-id": "^4.0.0",
@@ -86,6 +85,7 @@
         "oxfmt": "^0.32.0",
         "oxlint": "^1.30.0",
         "standard-version": "^9.5.0",
-        "tippy.js": "^6.3.7"
+        "tippy.js": "^6.3.7",
+        "typescript": "^7.0.2"
     }
 }

package/render/vnode.ts

@@ -28,19 +28,26 @@ export type VnodeDOM<Attrs = Record<string, any>, State = any> = ComponentVnode<
  */
 export type ComponentVnode<Attrs = Record<string, any>, State = any> = Omit<Vnode<Attrs, State>, 'attrs'> & {attrs: Attrs}
 
+/**
+ * The hooks are declared as methods, not function-typed properties: under `strictFunctionTypes` a
+ * property's parameters are checked contravariantly, so `Component<{name: string}>` would not be a
+ * `Component<Record<string, any>>` and `m(Icon, attrs)` could not be passed where `Children` is expected.
+ * Method parameters are bivariant, which matches how Mithril really calls them — with the vnode it
+ * built for that component.
+ */
 export interface Component<Attrs = Record<string, any>, State = any> {
-    oninit?: (vnode: ComponentVnode<Attrs, State>) => void
-    oncreate?: (vnode: ComponentVnode<Attrs, State>) => void
-    onbeforeupdate?: (vnode: ComponentVnode<Attrs, State>, old: ComponentVnode<Attrs, State>) => boolean | void
-    onupdate?: (vnode: ComponentVnode<Attrs, State>) => void
-    onbeforeremove?: (vnode: ComponentVnode<Attrs, State>) => Promise<any> | void
-    onremove?: (vnode: ComponentVnode<Attrs, State>) => void
-    view: (vnode: ComponentVnode<Attrs, State>) => Children | Vnode | null
+    oninit?(vnode: ComponentVnode<Attrs, State>): void
+    oncreate?(vnode: ComponentVnode<Attrs, State>): void
+    onbeforeupdate?(vnode: ComponentVnode<Attrs, State>, old: ComponentVnode<Attrs, State>): boolean | void
+    onupdate?(vnode: ComponentVnode<Attrs, State>): void
+    onbeforeremove?(vnode: ComponentVnode<Attrs, State>): Promise<any> | void
+    onremove?(vnode: ComponentVnode<Attrs, State>): void
+    view(vnode: ComponentVnode<Attrs, State>): Children | Vnode | null
 }
 
 export interface ComponentFactory<Attrs = Record<string, any>, State = any> {
     (...args: any[]): Component<Attrs, State>
-    view?: (vnode: ComponentVnode<Attrs, State>) => Children | Vnode | null
+    view?(vnode: ComponentVnode<Attrs, State>): Children | Vnode | null
 }
 
 export type ComponentType<Attrs = Record<string, any>, State = any> =
@@ -55,7 +62,7 @@ export type ComponentType<Attrs = Record<string, any>, State = any> =
  */
 export abstract class MithrilComponent<Attrs = Record<string, any>> {
     /** Required for JSX attribute type-checking - do not use directly */
-    private readonly __tsx_attrs!: (unknown extends Attrs ? Record<string, any> : Attrs) & {key?: string | number}
+    private readonly __tsx_attrs!: (unknown extends Attrs ? Record<string, any> : Attrs) & {key?: string | number | null}
 
     oninit?(vnode: ComponentVnode<Attrs>): void
     oncreate?(vnode: ComponentVnode<Attrs>): void

package/ssrContext.ts

@@ -5,6 +5,8 @@
  * request's context. No globals, safe under concurrent requests.
  * In the browser, getSSRContext() returns undefined and runWithContext just runs fn.
  */
+import type {Store} from './store'
+
 type StorageLike = {
     getStore(): SSRAccessContext | undefined
     run<T>(context: SSRAccessContext, fn: () => T): T
@@ -28,7 +30,7 @@ try {
  * that runs inside the same runWithContext() call.
  */
 export interface SSRAccessContext {
-    store?: any
+    store?: Store
     /** Per-request state registry for serialization; fresh Map per request. */
     stateRegistry: Map<string, {state: any; initial: any}>
     sessionId?: string

package/state.ts

@@ -232,15 +232,17 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
 
         // Handle arrays
         if (Array.isArray(obj)) {
-            // Arrays don't get their own signalMap - they use the parent's
-            // Nested objects AND arrays should be recursively wrapped
-            const signals = obj.map((item: any) => {
+            // Init, push/unshift, splice and index assignment all wrap through here, so an element typed as
+            // `State<E>` is one: objects and arrays become their own state proxy (the proxy is the element, not a
+            // signal around it), everything else a signal.
+            const toElement = (item: any) => {
                 if (typeof item === 'object' && item !== null) {
-                    // Recursively wrap nested objects AND arrays in Proxies
                     return initializeSignals(item, undefined, context)
                 }
                 return toSignal(item)
-            })
+            }
+            // Arrays don't get their own signalMap - they use the parent's
+            const signals = obj.map(toElement)
 
             // List of mutating array methods that should trigger the parent signal
             const mutatingMethods = new Set([
@@ -354,14 +356,7 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                                 const deleteCount = args[1] ?? signals.length - start
                                 const newItems = args.slice(2)
 
-                                // Convert new items - nested arrays/objects become Proxies, primitives become Signals
-                                const newSignals = newItems.map((item: any) => {
-                                    if (typeof item === 'object' && item !== null) {
-                                        // Wrap objects/arrays in Proxies (NOT in Signals - the Proxy IS the value)
-                                        return initializeSignals(item, undefined, context)
-                                    }
-                                    return toSignal(item)
-                                })
+                                const newSignals = newItems.map(toElement)
 
                                 // Update the signals array (target is signals array)
                                 const removed = signals.splice(start, deleteCount, ...newSignals)
@@ -399,14 +394,7 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                                 let result
                                 if (propStr === 'push' || propStr === 'unshift') {
                                     const newItems = args
-                                    // Convert new items - nested arrays/objects become Proxies, primitives become Signals
-                                    const newSignals = newItems.map((item: any) => {
-                                        if (typeof item === 'object' && item !== null) {
-                                            // Wrap objects/arrays in Proxies (NOT in Signals - the Proxy IS the value)
-                                            return initializeSignals(item, undefined, context)
-                                        }
-                                        return toSignal(item)
-                                    })
+                                    const newSignals = newItems.map(toElement)
                                     if (propStr === 'push') {
                                         result = signals.push(...newSignals)
                                     } else {
@@ -449,9 +437,11 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                                     const fillValue = args[0]
                                     const start = args[1] ?? 0
                                     const end = args[2] ?? signals.length
-                                    const fillSignal = toSignal(fillValue)
+                                    // A wrap per slot, so no two slots share a signal. An object fill value still reads
+                                    // back as one shared element in every slot, as native fill shares the reference:
+                                    // `toElement` returns the cached proxy for the same object.
                                     for (let i = start; i < end; i++) {
-                                        signals[i] = fillSignal
+                                        signals[i] = toElement(fillValue)
                                     }
                                     result = signals.length
                                 } else {
@@ -493,12 +483,14 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                 set(target, prop, value) {
                     if (typeof prop === 'string' && !isNaN(Number(prop))) {
                         const index = Number(prop)
-                        if (index >= 0 && index < signals.length) {
+                        // Assigning past the end (`arr[arr.length] = x`) appends, so it wraps and notifies like push.
+                        if ((index >= 0 && index < signals.length) || (Number.isInteger(index) && index >= signals.length)) {
                             const sig = signals[index]
-                            if (isSignal(sig)) {
+                            // A primitive over a primitive keeps the element's signal, so `arr.$i` subscribers see it.
+                            if (isSignal(sig) && (typeof value !== 'object' || value === null)) {
                                 sig.value = value
                             } else {
-                                signals[index] = toSignal(value)
+                                signals[index] = toElement(value)
                             }
                             // Trigger parent signal on element assignment (look up when called)
                             const parentSignal = arrayParentSignalMap.get(wrapped) || (wrapped as any)._parentSignal
@@ -520,9 +512,13 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                                 }
                             }
                             return true
-                        } else if (prop === 'length') {
-                            signals.length = Number(value)
-                            // Trigger parent signal on length change (look up when called)
+                        }
+                    }
+                    if (prop === 'length') {
+                        const previousLength = signals.length
+                        const result = Reflect.set(target, prop, value)
+                        // Resizing adds or drops elements without going through a mutator, so it notifies like splice.
+                        if (signals.length !== previousLength) {
                             const parentSignal = arrayParentSignalMap.get(wrapped) || (wrapped as any)._parentSignal
                             if (parentSignal) {
                                 // Notify subscribers directly since the array reference hasn't changed
@@ -541,8 +537,8 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
                                     ;(signal as any).__redrawCallback(parentSignal)
                                 }
                             }
-                            return true
                         }
+                        return result
                     }
                     return Reflect.set(target, prop, value)
                 },
@@ -871,11 +867,13 @@ export function state<T extends Record<string, any>>(initial: T, name?: string,
  * Mapped type that adds $prop for each key, returning the Signal for that property.
  * - Primitives: $prop => Signal<T[K]>
  * - Nested objects: $prop => Signal<State<T[K]>>
- * - Functions: $prop => ComputedSignal (computed from getter)
+ * - Functions: $prop => ComputedSignal of the getter's return type
  */
 export type StateSignals<T extends Record<string, any>> = {
-    [K in keyof T as K extends string ? `$${K}` : never]: T[K] extends (...args: any[]) => any
-        ? ComputedSignal<any>
+    // Only for declared keys: a record's index signature would otherwise gain a `$${string}` twin, and every
+    // lookup by a `string` key would read as `Value | Signal<Value>`.
+    [K in keyof T as K extends string ? (string extends K ? never : `$${K}`) : never]: T[K] extends (...args: any[]) => infer R
+        ? ComputedSignal<R>
         : T[K] extends object
           ? Signal<State<T[K]>>
           : Signal<T[K]>
@@ -895,6 +893,27 @@ export type State<T extends Record<string, any>> = T extends (infer Elem)[]
           [K in keyof T]: T[K] extends (...args: any[]) => infer R ? R : T[K] extends Record<string, any> ? State<T[K]> : T[K]
       } & StateSignals<T>
 
+/**
+ * A partial of a state shape at every depth, for the persistence tiers of a Store: each tier fills in
+ * part of a nested object (`saved` some keys of `exact`, `temporary` the rest). Arrays and computed
+ * getters are replaced wholesale, never merged element-wise.
+ */
+export type DeepPartial<T> = T extends (...args: any[]) => any
+    ? T
+    : T extends readonly unknown[]
+      ? T
+      : T extends object
+        ? {[K in keyof T]?: DeepPartial<T[K]>}
+        : T
+
+/**
+ * Opens the deferred-computed gate of a state built with `deferComputed` (ADR-0013) and marks its
+ * computeds dirty. The gate is a proxy trap rather than a key of the state, so it isn't on `State<T>`.
+ */
+export function allowComputed(stateInstance: State<any>): void {
+    ;(stateInstance as unknown as {allowComputed?: () => void}).allowComputed?.()
+}
+
 /** Function returned by watch() to remove the watcher */
 export type Unwatch = () => void
 

package/store.ts

@@ -1,4 +1,4 @@
-import {state, State, updateStateRegistry} from './state'
+import {allowComputed, state, State, updateStateRegistry, type DeepPartial} from './state'
 import {serializeStore, deserializeStore} from './render/ssrState'
 
 // Helper function to restore computed properties (same as in ssrState.ts)
@@ -143,11 +143,11 @@ let storeInstanceCounter = 0
 export class Store<T extends Record<string, any> = Record<string, any>> {
     private stateInstance: State<T>
     private templates = {
-        saved: {} as Partial<T>,
-        temporary: {} as Partial<T>,
-        tab: {} as Partial<T>,
-        session: {} as Partial<T>,
-        cookie: {} as Partial<T>,
+        saved: {} as DeepPartial<T>,
+        temporary: {} as DeepPartial<T>,
+        tab: {} as DeepPartial<T>,
+        session: {} as DeepPartial<T>,
+        cookie: {} as DeepPartial<T>,
     }
     private lookup_verify_interval: number | null = null
     private lookup_ttl: number
@@ -193,15 +193,15 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
      * (e.g. after $s, context, or route are ready) so computeds that depend on them can run.
      */
     ready(): void {
-        ;(this.stateInstance as any).allowComputed?.()
+        allowComputed(this.stateInstance)
     }
 
     /**
      * Merge deep on object `state`, but only the key/values in `blueprint`.
      */
-    blueprint(state: T, blueprint: Partial<T>): Partial<T> {
+    blueprint(state: T, blueprint: DeepPartial<T>): DeepPartial<T> {
         if (state == null || typeof state !== 'object') {
-            return {} as Partial<T>
+            return {} as DeepPartial<T>
         }
         const result: any = {}
         for (const key of Object.keys(blueprint)) {
@@ -227,7 +227,7 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
                 result[key] = stateValue
             }
         }
-        return result as Partial<T>
+        return result as DeepPartial<T>
     }
 
     clean_lookup() {
@@ -297,11 +297,11 @@ 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>,
-        cookie: Partial<T> = {} as Partial<T>,
+        saved: DeepPartial<T>,
+        temporary: DeepPartial<T>,
+        tab: DeepPartial<T> = {} as DeepPartial<T>,
+        session: DeepPartial<T> = {} as DeepPartial<T>,
+        cookie: DeepPartial<T> = {} as DeepPartial<T>,
     ) {
         const restored_state = {
             tab: this.get_tab_storage(this.tabStorageKey),