@bitstillery/mithril 3.0.0-AA

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Leo Horie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# @bitstillery/mithril
+
+> Mithril.js with **fine-grained reactivity**, **SSR hydration**, and **zero-dependency signals**.
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
+## The Problem
+
+Mithril.js uses global `m.redraw()`—one state change updates **all** components. This fork adds fine-grained reactivity: only components using changed state re-render.
+
+## What Makes This Different
+
+### Signals
+
+Fine-grained reactivity primitives with automatic dependency tracking. Zero-dependency implementation—no Preact Signals or other packages.
+
+```typescript
+import {signal, computed, effect} from '@bitstillery/mithril'
+
+const count = signal(0)
+const doubled = computed(() => count() * 2)
+
+effect(() => {
+    console.log(`Count: ${count()}, Doubled: ${doubled()}`)
+})
+
+count(5) // Logs: Count: 5, Doubled: 10
+```
+
+### Signal State
+
+Proxy-based reactive state that makes signals developer-friendly. Automatic dependency tracking with no manual redraw calls.
+
+```tsx
+import {state} from '@bitstillery/mithril'
+
+const $s = state(
+    {
+        count: 0,
+        user: {name: 'John'},
+        todos: [],
+        totalTodos: () => $s.todos.length, // Computed
+    },
+    'my.state',
+) // Name required for SSR serialization
+
+// Component only re-renders when $s.count changes
+class Counter extends MithrilComponent {
+    view() {
+        return (
+            <div>
+                <p>Count: {$s.count}</p>
+                <button onclick={() => $s.count++}>Increment</button>
+            </div>
+        )
+    }
+}
+```
+
+### Persistent Store
+
+State persistence with automatic serialization. The `Store` class wraps `state()` with localStorage/sessionStorage support, seamlessly integrating with SSR hydration.
+
+```typescript
+import {Store} from '@bitstillery/mithril'
+
+const store = new Store<{user: {name: string}; preferences: Record<string, any>}>()
+
+// Define what persists vs what's volatile
+store.blueprint(
+    {user: {name: ''}, preferences: {}},
+    {
+        user: {name: ''}, // Persistent
+        preferences: {}, // Persistent
+    },
+)
+
+// Load from storage, or initialize with defaults
+store.load({user: {name: 'John'}, preferences: {theme: 'dark'}})
+
+// State is reactive and automatically saves on changes
+store.state.user.name = 'Jane' // Auto-saves to localStorage
+```
+
+### SSR Hydration
+
+Server-side rendering with state preservation. `renderToString` automatically serializes state; restore it on the client before mounting.
+
+```typescript
+// Server
+const {html, state} = await m.renderToString(App)
+// Inject: <script id="__SSR_STATE__">${JSON.stringify(state)}</script>
+
+// Client
+import {deserializeAllStates} from '@bitstillery/mithril'
+
+const ssrState = document.getElementById('__SSR_STATE__')
+if (ssrState?.textContent) {
+    deserializeAllStates(JSON.parse(ssrState.textContent))
+}
+m.mount(root, App)
+```
+
+## The Complete Picture
+
+These features build on each other: signals provide the foundation for fine-grained reactivity, proxy-based state makes them developer-friendly, `Store` adds persistence for localStorage/sessionStorage, and SSR hydration enables search-engine friendly websites. The result? State that "just works"—from initial render through hydration, user interactions, and page refreshes—all while maintaining Mithril's familiar API.
+
+## Quick Start
+
+```bash
+bun add @bitstillery/mithril
+```
+
+```tsx
+import m, {state, MithrilComponent} from '@bitstillery/mithril'
+
+const $s = state({count: 0}, 'app.state') // Name required for SSR
+
+class App extends MithrilComponent {
+    view() {
+        return (
+            <div>
+                <p>Count: {$s.count}</p>
+                <button onclick={() => $s.count++}>Increment</button>
+            </div>
+        )
+    }
+}
+
+m.mount(document.body, App)
+```
+
+## Examples
+
+- **SSR**: [`examples/ssr/`](examples/ssr/) - Server-side rendering with hydration
+- **State**: [`examples/state/`](examples/state/) - Signals, state management, and Store persistence patterns
+
+## Differences from Mithril.js
+
+| Feature          | Original            | This Fork                       |
+| ---------------- | ------------------- | ------------------------------- |
+| Reactivity       | Global `m.redraw()` | Fine-grained component updates  |
+| State Management | Manual redraw calls | Signals with automatic tracking |
+| SSR Hydration    | State loss          | Proper state preservation       |
+| TypeScript       | Community types     | Native TypeScript               |
+
+**100% API compatible** with Mithril.js v2.x. Signals are opt-in.
+
+## Development
+
+```bash
+bun install
+bun test
+```
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Credits
+
+Mithril.js was originally written by Leo Horie, but it is where it is today thanks to the hard work and great ideas of many people.
+
+Special thanks to:
+
+- Pat Cavit, who exposed most of the public API for Mithril.js 1.0, brought in test coverage and automated the publishing process
+- Claudia Meadows, who brought in linting, modernized the test suite and has been a strong voice in design discussions
+- Zoli Kahan, who replaced the original Promise implementation with one that actually worked properly
+- Alec Embke, who single-handedly wrote the JSON-P implementation
+- Barney Carroll, who suggested many great ideas and relentlessly pushed Mithril.js to the limit to uncover design issues prior to Mithril.js 1.0
+- Dominic Gannaway, who offered insanely meticulous technical insight into rendering performance
+- Boris Letocha, whose search space reduction algorithm is the basis for Mithril.js' virtual DOM engine
+- Joel Richard, whose monomorphic virtual DOM structure is the basis for Mithril.js' vnode implementation
+- Simon Friis Vindum, whose open source work was an inspiration to many design decisions for Mithril.js 1.0
+- Boris Kaul, for his awesome work on the benchmarking tools used to develop Mithril.js
+- Leon Sorokin, for writing a DOM instrumentation tool that helped improve performance in Mithril.js 1.0
+- Jordan Walke, whose work on React was prior art to the implementation of keys in Mithril.js
+- Pierre-Yves Gérardy, who consistently makes high quality contributions
+- Gyandeep Singh, who contributed significant IE performance improvements
+
+Other people who also deserve recognition:
+
+- Arthur Clemens - creator of [Polythene](https://github.com/ArthurClemens/Polythene) and the [HTML-to-Mithril converter](https://arthurclemens.github.io/mithril-template-converter/index.html)
+- Stephan Hoyer - creator of [mithril-node-render](https://github.com/StephanHoyer/mithril-node-render), [mithril-query](https://github.com/StephanHoyer/mithril-query) and [mithril-source-hint](https://github.com/StephanHoyer/mithril-source-hint)
+- the countless people who have reported and fixed bugs, participated in discussions, and helped promote Mithril.js

package/api/mount-redraw.ts

@@ -0,0 +1,173 @@
+import Vnode from '../render/vnode'
+import {getSignalComponents, type Signal} from '../signal'
+
+import type {ComponentType, Children, Vnode as VnodeType} from '../render/vnode'
+
+export interface Render {
+    (root: Element, vnodes: Children | VnodeType | null, redraw?: () => void): void
+}
+
+export interface Redraw {
+    (component?: ComponentType): void
+    sync(): void
+    signal?: (signal: Signal<any>) => void
+}
+
+export interface Mount {
+    (root: Element, component: ComponentType | null): void
+}
+
+interface Schedule {
+    (fn: () => void): void
+}
+
+interface Console {
+    error: (e: any) => void
+}
+
+interface MountRedraw {
+    mount: Mount
+    redraw: Redraw
+}
+
+export default function mountRedrawFactory(render: Render, schedule: Schedule, console: Console): MountRedraw {
+    const subscriptions: Array<Element | ComponentType> = []
+    const componentToElement = new WeakMap<ComponentType, Element>()
+    let pending = false
+    let offset = -1
+
+    function sync() {
+        for (offset = 0; offset < subscriptions.length; offset += 2) {
+            try {
+                render(
+                    subscriptions[offset] as Element,
+                    Vnode(subscriptions[offset + 1] as ComponentType, null, null, null, null, null),
+                    redraw,
+                )
+            } catch (e) {
+                console.error(e)
+            }
+        }
+        offset = -1
+    }
+
+    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)!
+        }
+
+        // First try: find element in componentToElement (for m.mount components)
+        // Check this first to ensure synchronous redraws for m.mount components
+        const element = componentToElement.get(component)
+        if (element) {
+            try {
+                render(element, Vnode(component, null, null, null, null, null), redraw)
+                // If render succeeds, we're done
+                return
+            } catch (e) {
+                console.error(e)
+                // If render fails, continue to next check (fall through)
+            }
+        }
+
+        // Second try: find DOM element directly from component state (for routed components)
+        // 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
+            if (!pending) {
+                pending = true
+                schedule(function () {
+                    pending = false
+                    sync()
+                })
+                return
+            }
+        }
+
+        // Third try: find element in subscriptions
+        const index = subscriptions.indexOf(component)
+        if (index >= 0 && index % 2 === 1) {
+            const rootElement = subscriptions[index - 1] as Element
+            try {
+                render(rootElement, Vnode(component, null, null, null, null, null), redraw)
+                // If render succeeds, we're done
+                return
+            } catch (e) {
+                console.error(e)
+                // If render fails, continue to fallback (fall through)
+            }
+        }
+
+        // Final fallback: component not found - trigger global redraw
+        // This handles edge cases where component tracking failed
+        if (!pending) {
+            pending = true
+            schedule(function () {
+                pending = false
+                sync()
+            })
+        }
+    }
+
+    function redraw(component?: ComponentType) {
+        // Component-level redraw
+        if (component !== undefined) {
+            redrawComponent(component)
+            return
+        }
+
+        // Global redraw (backward compatibility)
+        if (!pending) {
+            pending = true
+            schedule(function () {
+                pending = false
+                sync()
+            })
+        }
+    }
+
+    redraw.sync = sync
+
+    // Export function to redraw components affected by signal changes
+    ;(redraw as any).signal = function (signal: Signal<any>) {
+        const components = getSignalComponents(signal)
+        if (components) {
+            components.forEach((component) => {
+                redrawComponent(component)
+            })
+        }
+    }
+
+    function mount(root: Element, component: ComponentType | null) {
+        if (component != null && (component as any).view == null && typeof component !== 'function') {
+            throw new TypeError('m.mount expects a component, not a vnode.')
+        }
+
+        const index = subscriptions.indexOf(root)
+        if (index >= 0) {
+            const oldComponent = subscriptions[index + 1] as ComponentType
+            if (oldComponent) {
+                componentToElement.delete(oldComponent)
+            }
+            subscriptions.splice(index, 2)
+            if (index <= offset) offset -= 2
+            render(root, [])
+        }
+
+        if (component != null) {
+            subscriptions.push(root, component)
+            componentToElement.set(component, root)
+            render(root, Vnode(component, null, null, null, null, null), redraw)
+        }
+    }
+
+    return {mount: mount, redraw: redraw}
+}

package/api/router-server.ts

@@ -0,0 +1,88 @@
+import Vnode from '../render/vnode'
+import hyperscript from '../render/hyperscript'
+import decodeURIComponentSafe from '../util/decodeURIComponentSafe'
+import parsePathname from '../pathname/parse'
+import compileTemplate from '../pathname/compileTemplate'
+
+import type {RouteResolver} from './router'
+
+interface RenderToString {
+    (vnodes: any): Promise<string>
+}
+
+export default function routerServerFactory(renderToString: RenderToString) {
+    // Compile route templates
+    function compileRoutes(routes: Record<string, any>): Array<{
+        route: string
+        component: any
+        check: (data: {path: string; params: Record<string, any>}) => boolean
+    }> {
+        const compiled: Array<{
+            route: string
+            component: any
+            check: (data: {path: string; params: Record<string, any>}) => boolean
+        }> = []
+
+        for (const route in routes) {
+            const component = routes[route]
+            const template = compileTemplate(route)
+            const check = (data: {path: string; params: Record<string, any>}) => {
+                return template(data)
+            }
+            compiled.push({route, component, check})
+        }
+
+        return compiled
+    }
+
+    // Resolve route and render component
+    async function resolveRoute(pathname: string, routes: Record<string, any>, prefix: string = ''): Promise<string> {
+        const path = decodeURIComponentSafe(pathname).slice(prefix.length)
+        const data = parsePathname(path)
+
+        const compiled = compileRoutes(routes)
+
+        // Find matching route
+        for (const {route, component, check} of compiled) {
+            if (check(data)) {
+                let payload = component
+
+                // Handle RouteResolver
+                if (payload && typeof payload === 'object' && 'onmatch' in payload) {
+                    const resolver = payload as RouteResolver
+                    if (resolver.onmatch) {
+                        const result = resolver.onmatch(data.params, pathname, route)
+                        if (result instanceof Promise) {
+                            payload = await result
+                        } else if (result !== undefined) {
+                            payload = result
+                        }
+                    }
+
+                    // If resolver has render, use it
+                    if (resolver.render) {
+                        const vnode = Vnode(payload, data.params.key, data.params, null, null, null)
+                        return await renderToString(resolver.render(vnode))
+                    }
+                }
+
+                // Render component
+                if (payload != null && (typeof payload.view === 'function' || typeof payload === 'function')) {
+                    const vnode = hyperscript(payload, data.params)
+                    return await renderToString(vnode)
+                }
+
+                // Fallback to div
+                const vnode = hyperscript('div', data.params)
+                return await renderToString(vnode)
+            }
+        }
+
+        // No route found
+        throw new Error(`No route found for ${pathname}`)
+    }
+
+    return {
+        resolve: resolveRoute,
+    }
+}