@bitstillery/mithril 3.9.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

@@ -160,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.9.0",
+    "version": "3.9.1",
     "description": "Mithril + Signals, Store and SSR",
     "license": "MIT",
     "author": "Bitstillery",
@@ -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",

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> =

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)
                 },