@bitstillery/mithril 3.9.0 → 3.9.2

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: {}
@@ -155,7 +167,7 @@ export default function router($window: any, mountRedraw: MountRedraw) {
     function getRedirectPath(redirectObj: RedirectObject): string {
         // First try our REDIRECT symbol
         if (REDIRECT in redirectObj) {
-            return redirectObj[REDIRECT]
+            return redirectObj[REDIRECT]!
         }
         // Otherwise, check all symbol keys
         const symbolKeys = Object.getOwnPropertySymbols(redirectObj)
@@ -203,9 +215,9 @@ export default function router($window: any, mountRedraw: MountRedraw) {
         function loop(i: number) {
             if (!compiled) return
             for (; i < compiled.length; i++) {
-                if (compiled[i].check(data)) {
-                    let payload = compiled[i].component
-                    const matchedRoute = compiled[i].route
+                if (compiled[i]!.check(data)) {
+                    let payload = compiled[i]!.component
+                    const matchedRoute = compiled[i]!.route
                     const localComp = payload
                     // Store the RouteResolver if payload has both onmatch and render
                     // This allows us to preserve the resolver even after onmatch returns a component
@@ -225,7 +237,7 @@ export default function router($window: any, mountRedraw: MountRedraw) {
                         // Handle redirect objects: explicit redirect signal
                         if (isRedirect(comp)) {
                             // Extract redirect target path
-                            const redirectPath = comp[REDIRECT]
+                            const redirectPath = getRedirectPath(comp)
                             const resolve = routeSetResolve
                             routeSetResolve = null
                             // Trigger navigation to redirect target; resolve original Promise when redirect completes

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.2",
     "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/pathname/compileTemplate.ts

@@ -38,14 +38,15 @@ export default function compileTemplate(template: string): CompiledTemplate {
         // First, check the params. Usually, there isn't any, and it's just
         // checking a static set.
         for (let i = 0; i < templateKeys.length; i++) {
-            if (templateData.params[templateKeys[i]] !== data.params[templateKeys[i]]) return false
+            if (templateData.params[templateKeys[i]!] !== data.params[templateKeys[i]!]) return false
         }
         // If no interpolations exist, let's skip all the ceremony
         if (!keys.length) return regexp.test(data.path)
         const values = regexp.exec(data.path)
         if (values == null) return false
         for (let i = 0; i < keys.length; i++) {
-            data.params[keys[i].k] = keys[i].r ? values[i + 1] : decodeURIComponent(values[i + 1])
+            // Every key is a non-optional capture group, so a match fills all of them.
+            data.params[keys[i]!.k] = keys[i]!.r ? values[i + 1] : decodeURIComponent(values[i + 1]!)
         }
         return true
     }

package/querystring/parse.ts

@@ -8,9 +8,9 @@ export default function parseQueryString(string: string | null | undefined): Rec
     const counters: Record<string, number> = {}
     const data: Record<string, any> = {}
     for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i].split('=')
-        const key = decodeURIComponentSafe(entry[0])
-        let value: any = entry.length === 2 ? decodeURIComponentSafe(entry[1]) : ''
+        const entry = entries[i]!.split('=')
+        const key = decodeURIComponentSafe(entry[0]!)
+        let value: any = entry.length === 2 ? decodeURIComponentSafe(entry[1]!) : ''
 
         if (value === 'true') value = true
         else if (value === 'false') value = false
@@ -19,9 +19,10 @@ export default function parseQueryString(string: string | null | undefined): Rec
         let cursor: any = data
         if (key.indexOf('[') > -1) levels.pop()
         for (let j = 0; j < levels.length; j++) {
-            const level = levels[j]
+            const level = levels[j]!
             const nextLevel = levels[j + 1]
-            const isNumber = nextLevel == '' || !isNaN(parseInt(nextLevel, 10))
+            // Past the last level nextLevel is undefined, which parseInt reads as NaN.
+            const isNumber = nextLevel == '' || !isNaN(parseInt(nextLevel as string, 10))
             let finalLevel: string | number
             if (level === '') {
                 const key = levels.slice(0, j).join()

package/render/hyperscript.ts

@@ -31,25 +31,27 @@ function isFormAttributeKey(key: string): boolean {
     return key === 'value' || key === 'checked' || key === 'selectedIndex' || key === 'selected'
 }
 
+// A match fills groups 1-2 (tag/#id/.class) or groups 3-4 ([attr]), never both; group 6
+// is absent for a bare `[attr]`, so a bare `[class]` joins in as an empty class.
 function compileSelector(selector: string): {tag: string; attrs: Record<string, any>; is?: string} {
     let match: RegExpExecArray | null
     let tag = 'div'
-    const classes: string[] = []
+    const classes: (string | undefined)[] = []
     let attrs: Record<string, any> = {}
     let isStatic = true
     while ((match = selectorParser.exec(selector)) !== null) {
         const type = match[1]
         const value = match[2]
-        if (type === '' && value !== '') tag = value
+        if (type === '' && value !== '') tag = value!
         else if (type === '#') attrs.id = value
         else if (type === '.') classes.push(value)
-        else if (match[3][0] === '[') {
+        else if (match[3]![0] === '[') {
             let attrValue = match[6]
             if (attrValue) attrValue = attrValue.replace(/\\(["'])/g, '$1').replace(/\\\\/g, '\\')
             if (match[4] === 'class') classes.push(attrValue)
             else {
-                attrs[match[4]] = attrValue === '' ? attrValue : attrValue || true
-                if (isFormAttributeKey(match[4])) isStatic = false
+                attrs[match[4]!] = attrValue === '' ? attrValue : attrValue || true
+                if (isFormAttributeKey(match[4]!)) isStatic = false
             }
         }
     }

package/render/render.ts

@@ -895,16 +895,18 @@ export default function renderFactory() {
     // of the items that are part of the longest increasing
     // subsequence
     const lisTemp: number[] = []
+    // Every index read below is in range: i < a.length, `result` is never empty and holds
+    // indices into `a`, and `lisTemp` mirrors `a`'s length.
     function makeLisIndices(a: number[]): number[] {
         const result = [0]
         let u = 0,
             v = 0
         const il = (lisTemp.length = a.length)
-        for (let i = 0; i < il; i++) lisTemp[i] = a[i]
+        for (let i = 0; i < il; i++) lisTemp[i] = a[i]!
         for (let i = 0; i < il; ++i) {
             if (a[i] === -1) continue
-            const j = result[result.length - 1]
-            if (a[j] < a[i]) {
+            const j = result[result.length - 1]!
+            if (a[j]! < a[i]!) {
                 lisTemp[i] = j
                 result.push(i)
                 continue
@@ -915,22 +917,22 @@ export default function renderFactory() {
                 // Fast integer average without overflow.
 
                 const c = (u >>> 1) + (v >>> 1) + (u & v & 1)
-                if (a[result[c]] < a[i]) {
+                if (a[result[c]!]! < a[i]!) {
                     u = c + 1
                 } else {
                     v = c
                 }
             }
-            if (a[i] < a[result[u]]) {
-                if (u > 0) lisTemp[i] = result[u - 1]
+            if (a[i]! < a[result[u]!]!) {
+                if (u > 0) lisTemp[i] = result[u - 1]!
                 result[u] = i
             }
         }
         u = result.length
-        v = result[u - 1]
+        v = result[u - 1]!
         while (u-- > 0) {
             result[u] = v
-            v = lisTemp[v]
+            v = lisTemp[v]!
         }
         lisTemp.length = 0
         return result
@@ -1453,14 +1455,14 @@ export default function renderFactory() {
                     false,
                 )
                 // Execute hooks from override render
-                for (let i = 0; i < overrideHooks.length; i++) overrideHooks[i]()
+                for (let i = 0; i < overrideHooks.length; i++) overrideHooks[i]!()
             }
 
             ;(dom as any).vnodes = normalized
             // `document.activeElement` can return null: https://html.spec.whatwg.org/multipage/interaction.html#dom-document-activeelement
             if (active != null && activeElement(dom) !== active && typeof (active as any).focus === 'function')
                 (active as any).focus()
-            for (let i = 0; i < hooks.length; i++) hooks[i]()
+            for (let i = 0; i < hooks.length; i++) hooks[i]!()
         } finally {
             currentRedraw = prevRedraw
             currentDOM = prevDOM

package/render/ssrState.ts

@@ -306,11 +306,11 @@ function restoreComputedProperties(state: State<any>, initial: any): void {
                     const keys = prefix ? prefix.split('.').filter((k) => k) : []
                     let targetState = target
                     for (let i = 0; i < keys.length; i++) {
-                        if (!targetState[keys[i]]) {
+                        if (!targetState[keys[i]!]) {
                             // Nested state doesn't exist yet, skip
                             return
                         }
-                        targetState = targetState[keys[i]]
+                        targetState = targetState[keys[i]!]
                     }
                     // Clear any existing signal in signalMap so function is re-initialized as ComputedSignal
                     if (targetState && typeof targetState === 'object' && (targetState as any).__isState) {

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/server/logger.ts

@@ -96,7 +96,7 @@ function getColorByHash(text: string): string {
         colors.cyan,
     ]
     const hash = hashString(text)
-    return colorOptions[hash % colorOptions.length]
+    return colorOptions[hash % colorOptions.length]!
 }
 
 const textEncoder = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null

package/server/session.ts

@@ -83,5 +83,5 @@ export class MemorySessionStore implements SessionStore {
 export function extractSessionId(req: Request): string | null {
     const cookies = req.headers.get('cookie') || ''
     const sessionIdMatch = cookies.match(/sessionId=([^;]+)/)
-    return sessionIdMatch ? sessionIdMatch[1] : null
+    return sessionIdMatch ? sessionIdMatch[1]! : null
 }

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

package/store.ts

@@ -21,11 +21,11 @@ function restoreComputedProperties(state: State<any>, initial: any): void {
                     const keys = prefix ? prefix.split('.').filter((k) => k) : []
                     let targetState = target
                     for (let i = 0; i < keys.length; i++) {
-                        if (!targetState || !targetState[keys[i]]) {
+                        if (!targetState || !targetState[keys[i]!]) {
                             // Nested state doesn't exist yet, skip
                             return
                         }
-                        targetState = targetState[keys[i]]
+                        targetState = targetState[keys[i]!]
                     }
                     if (targetState) {
                         // Clear any existing signal in signalMap so function is re-initialized as ComputedSignal
@@ -536,7 +536,7 @@ export class Store<T extends Record<string, any> = Record<string, any>> {
         try {
             const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${key}=([^;]*)`))
             if (!match) return {}
-            const parsed = JSON.parse(decodeURIComponent(match[1]))
+            const parsed = JSON.parse(decodeURIComponent(match[1]!))
             return parsed && typeof parsed === 'object' ? parsed : {}
         } catch {
             return {}

package/util/ssr.ts

@@ -198,7 +198,7 @@ function formatCombinedStructure(parent: Element | Node | null, vnode: any, maxP
 
     // Closing tags for DOM parents (in reverse order)
     for (let i = domElements.length - 1; i >= 0; i--) {
-        lines.push('  '.repeat(i) + domElements[i].closeTag)
+        lines.push('  '.repeat(i) + domElements[i]!.closeTag)
     }
 
     return lines.join('\n')