@bitstillery/mithril 3.0.0-AA

package/server/logger.ts

@@ -0,0 +1,223 @@
+/**
+ * Isomorphic logger with colors and structured logging.
+ * Works in both server (Bun/Node) and client (browser) environments.
+ * Provides info, debug, warning, and error log levels with appropriate formatting.
+ */
+
+// Detect if we're running in a browser environment
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
+
+// ANSI color codes for terminal output (server only)
+const colors = {
+    reset: '\x1b[0m',
+    bright: '\x1b[1m',
+    dim: '\x1b[2m',
+
+    // Text colors
+    black: '\x1b[30m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+
+    // Background colors
+    bgBlack: '\x1b[40m',
+    bgRed: '\x1b[41m',
+    bgGreen: '\x1b[42m',
+    bgYellow: '\x1b[43m',
+    bgBlue: '\x1b[44m',
+    bgMagenta: '\x1b[45m',
+    bgCyan: '\x1b[46m',
+    bgWhite: '\x1b[47m',
+}
+
+// ANSI colors for server/terminal. In browser we use %c for proper DevTools styling.
+const enableColors =
+    !isBrowser &&
+    (typeof process === 'undefined' || !process?.env || (process.env.NO_COLOR !== '1' && process.env.NO_COLOR !== 'true'))
+
+function colorize(text: string, color: string): string {
+    return enableColors ? `${color}${text}${colors.reset}` : text
+}
+
+function getTimestamp(): string {
+    const now = new Date()
+    const hours = String(now.getHours()).padStart(2, '0')
+    const minutes = String(now.getMinutes()).padStart(2, '0')
+    const seconds = String(now.getSeconds()).padStart(2, '0')
+    const ms = String(now.getMilliseconds()).padStart(3, '0')
+    return `${hours}:${minutes}:${seconds}.${ms}`
+}
+
+function formatLevel(level: 'info' | 'debug' | 'warn' | 'error'): string {
+    const levelMap = {
+        info: colorize('info', colors.bright + colors.cyan),
+        debug: colorize('debug', colors.bright + colors.blue),
+        warn: colorize('warn', colors.bright + colors.yellow),
+        error: colorize('error', colors.bright + colors.red),
+    }
+    return levelMap[level]
+}
+
+export interface LogContext {
+    pathname?: string
+    method?: string
+    sessionId?: string
+    route?: string
+    module?: string // Module name (e.g., 'identity', 'order') - will be shown as [module] prefix
+    [key: string]: any
+}
+
+class Logger {
+    // Default prefix: [ssr] for server infrastructure, [app] for application code
+    private prefix: string = '[ssr]'
+
+    /**
+     * Set the log prefix (default: '[ssr]' for infrastructure, '[app]' for application code)
+     */
+    setPrefix(prefix: string): void {
+        this.prefix = prefix
+    }
+
+    private formatMessage(level: 'info' | 'debug' | 'warn' | 'error', message: string, context?: LogContext): string {
+        const timestamp = colorize(getTimestamp(), colors.dim + colors.white)
+        const levelStr = formatLevel(level)
+
+        // Always use the set prefix (e.g., [app] or [ssr])
+        const prefixStr = colorize(
+            this.prefix,
+            this.prefix === '[ssr]' ? colors.bright + colors.magenta : colors.bright + colors.cyan,
+        )
+
+        // Include module in message if provided
+        let displayMessage = message
+        if (context?.module) {
+            displayMessage = `[${context.module}] ${message}`
+        }
+
+        let contextStr = ''
+        if (context) {
+            const contextParts: string[] = []
+            if (context.method) {
+                contextParts.push(colorize(context.method, colors.cyan))
+            }
+            if (context.pathname) {
+                contextParts.push(colorize(context.pathname, colors.green))
+            }
+            if (context.route) {
+                contextParts.push(colorize(`route:${context.route}`, colors.blue))
+            }
+            if (context.sessionId) {
+                contextParts.push(colorize(`session:${context.sessionId.slice(0, 8)}...`, colors.dim + colors.white))
+            }
+
+            // Add any additional context fields (excluding module which is shown in message)
+            for (const [key, value] of Object.entries(context)) {
+                if (!['method', 'pathname', 'route', 'sessionId', 'module'].includes(key)) {
+                    contextParts.push(colorize(`${key}:${value}`, colors.dim + colors.white))
+                }
+            }
+
+            if (contextParts.length > 0) {
+                contextStr = ' ' + contextParts.join(' ')
+            }
+        }
+
+        return `${timestamp} ${prefixStr} ${levelStr}${contextStr} ${displayMessage}`
+    }
+
+    private formatContextForBrowser(context?: LogContext): string[] {
+        if (!context) return []
+        const parts: string[] = []
+        if (context.method) parts.push(`Method: ${context.method}`)
+        if (context.pathname) parts.push(`Path: ${context.pathname}`)
+        if (context.route) parts.push(`Route: ${context.route}`)
+        if (context.sessionId) parts.push(`Session: ${context.sessionId.slice(0, 8)}...`)
+        for (const [key, value] of Object.entries(context)) {
+            if (!['method', 'pathname', 'route', 'sessionId', 'module'].includes(key)) {
+                parts.push(`${key}: ${value}`)
+            }
+        }
+        return parts
+    }
+
+    private logBrowser(
+        level: 'info' | 'debug' | 'warn' | 'error',
+        message: string,
+        context?: LogContext,
+        error?: Error | unknown,
+    ): void {
+        const displayMessage = context?.module ? `[${context.module}] ${message}` : message
+        const prefixStyle = this.prefix === '[ssr]' ? 'color: #d946ef; font-weight: bold' : 'color: #3b82f6; font-weight: bold'
+        const levelStyles: Record<string, string> = {
+            info: 'color: #22d3ee; font-weight: bold',
+            debug: 'color: #4ade80; font-weight: bold',
+            warn: 'color: #fbbf24; font-weight: bold',
+            error: 'color: #ef4444; font-weight: bold',
+        }
+        const logFn = level === 'error' ? console.error : level === 'warn' ? console.warn : console.log
+        const contextParts = this.formatContextForBrowser(context)
+        if (contextParts.length > 0 || error) {
+            console.group(`%c${this.prefix}%c ${level}%c ${displayMessage}`, prefixStyle, levelStyles[level], 'color: inherit')
+            contextParts.forEach((part) => logFn(`  ${part}`))
+            if (error instanceof Error && error.stack) {
+                console.error('Stack trace:', error.stack)
+            }
+            console.groupEnd()
+        } else {
+            logFn(`%c${this.prefix}%c ${level}%c ${displayMessage}`, prefixStyle, levelStyles[level], 'color: inherit')
+        }
+    }
+
+    info(message: string, context?: LogContext): void {
+        if (isBrowser) {
+            this.logBrowser('info', message, context)
+        } else {
+            console.log(this.formatMessage('info', message, context))
+        }
+    }
+
+    debug(message: string, context?: LogContext): void {
+        const shouldLog =
+            globalThis.__SSR_MODE__ || (isBrowser && typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production')
+        if (!shouldLog) return
+
+        if (isBrowser) {
+            this.logBrowser('debug', message, context)
+        } else {
+            console.log(this.formatMessage('debug', message, context))
+        }
+    }
+
+    warn(message: string, context?: LogContext): void {
+        if (isBrowser) {
+            this.logBrowser('warn', message, context)
+        } else {
+            console.warn(this.formatMessage('warn', message, context))
+        }
+    }
+
+    error(message: string, error?: Error | unknown, context?: LogContext): void {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        const baseMessage = error ? `${message}: ${errorMessage}` : message
+
+        if (isBrowser) {
+            this.logBrowser('error', baseMessage, context, error)
+        } else {
+            console.error(this.formatMessage('error', baseMessage, context))
+            if (error instanceof Error && error.stack) {
+                const stackTrace = colorize(error.stack, colors.dim + colors.red)
+                console.error(stackTrace)
+            }
+        }
+    }
+}
+
+// Default logger instance for application code (will be set to [app] by app initialization)
+export const logger = new Logger()
+
+// Export Logger class for creating custom instances
+export {Logger}

package/server/session.ts

@@ -0,0 +1,87 @@
+// Session management interfaces and default in-memory implementation
+
+export interface SessionData {
+    userId: string | null
+    data: Record<string, any>
+    createdAt: Date
+    expiresAt: Date
+}
+
+export interface SessionStore {
+    getSession(sessionId: string): SessionData | null
+    updateSession(sessionId: string, data: Record<string, any>): void
+    createSession(userId: string | null): string
+}
+
+// Default in-memory session store implementation
+// In production, this would be replaced with Redis, database, etc.
+export class MemorySessionStore implements SessionStore {
+    private sessions = new Map<string, SessionData>()
+
+    createSession(userId: string | null): string {
+        const sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+        const now = Date.now()
+        this.sessions.set(sessionId, {
+            userId,
+            data: {},
+            createdAt: new Date(now),
+            expiresAt: new Date(now + 1000 * 60 * 60 * 24), // 24 hours
+        })
+        return sessionId
+    }
+
+    getSession(sessionId: string): SessionData | null {
+        const session = this.sessions.get(sessionId)
+        if (!session) return null
+
+        // Check expiration
+        if (session.expiresAt.getTime() < Date.now()) {
+            this.sessions.delete(sessionId)
+            return null
+        }
+
+        return session
+    }
+
+    getSessionByUserId(userId: string): string | null {
+        for (const [sessionId, session] of this.sessions.entries()) {
+            if (session.userId === userId) {
+                // Check expiration
+                if (session.expiresAt.getTime() >= Date.now()) {
+                    return sessionId
+                }
+            }
+        }
+        return null
+    }
+
+    updateSession(sessionId: string, data: Record<string, any>): void {
+        const session = this.sessions.get(sessionId)
+        if (session) {
+            // Merge data with existing session data
+            // Handle nested structures like session_data
+            session.data = {...session.data, ...data}
+        }
+    }
+
+    deleteSession(sessionId: string): void {
+        this.sessions.delete(sessionId)
+    }
+
+    // Clean up expired sessions
+    cleanup(): void {
+        const now = Date.now()
+        for (const [sessionId, session] of this.sessions.entries()) {
+            if (session.expiresAt.getTime() < now) {
+                this.sessions.delete(sessionId)
+            }
+        }
+    }
+}
+
+// Helper function to extract session ID from request cookies
+export function extractSessionId(req: Request): string | null {
+    const cookies = req.headers.get('cookie') || ''
+    const sessionIdMatch = cookies.match(/sessionId=([^;]+)/)
+    return sessionIdMatch ? sessionIdMatch[1] : null
+}

package/server/ssr.ts

@@ -0,0 +1,205 @@
+import {readFile} from 'fs/promises'
+
+import m from '../server'
+import {runWithContextAsync} from '../ssrContext'
+
+import {extractSessionId} from './session'
+import {logger} from './ssrLogger'
+
+import type {SessionStore} from './session'
+import type {SSRAccessContext} from '../ssrContext'
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var __SSR_MODE__: boolean | undefined
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var __SSR_URL__: string | undefined
+}
+
+globalThis.__SSR_MODE__ = true
+
+export interface SSROptions {
+    routes: Record<string, any>
+    /** Create per-request context (store, stateRegistry, sessionId, sessionData). */
+    createRequestContext: (req: Request) => SSRAccessContext
+    /** Load store and register state for this request; runs inside request context. */
+    initRequestContext: (context: SSRAccessContext) => void | Promise<void>
+    getHtmlTemplate: () => Promise<string>
+    appSelector?: string // Default: '#app'
+    stateScriptId?: string // Default: '__SSR_STATE__'
+}
+
+export interface BunSSRConfig {
+    port: number
+    templatePath: string
+    templateRoute?: string // Default: '/__template__'
+    htmlTemplate: any // Bun route handler
+}
+
+/**
+ * Helper function to get Bun's processed HTML template with HMR scripts
+ * This ensures HMR scripts and proper asset serving work in development
+ */
+export async function getBunProcessedTemplate(
+    port: number,
+    templatePath: string,
+    templateRoute: string = '/__template__',
+): Promise<string> {
+    // Fetch from Bun's route handler to get processed template with HMR scripts
+    // Use a special route that Bun processes but we don't use for SSR
+    const templateUrl = `http://localhost:${port}${templateRoute}`
+    try {
+        const response = await fetch(templateUrl)
+        if (response.ok) {
+            return await response.text()
+        }
+    } catch {
+        // Fallback: read template file directly (won't have HMR, but will work)
+    }
+
+    return await readFile(templatePath, 'utf-8')
+}
+
+/**
+ * Helper to check if a pathname is a Bun internal asset (should be handled by Bun)
+ */
+export function shouldHandleBunAssets(pathname: string): boolean {
+    return pathname.startsWith('/_bun/')
+}
+
+/**
+ * Create Bun.serve() configuration with template route for HMR support
+ */
+export function createBunSSRConfig(config: BunSSRConfig) {
+    return {
+        port: config.port,
+        routes: {
+            // Let Bun process the HTML template for HMR and asset serving
+            // Use a special route that we don't use for SSR, so fetch handler can intercept SSR routes
+            [config.templateRoute || '/__template__']: config.htmlTemplate,
+        },
+    }
+}
+
+/**
+ * Create SSR response with serialized state and session cookie.
+ * Runs the whole request inside runWithContextAsync so getSSRContext() returns
+ * this request's context; initRequestContext then loads the store and registers state.
+ */
+export async function createSSRResponse(pathname: string, req: Request, options: SSROptions): Promise<Response> {
+    const context = options.createRequestContext(req)
+
+    return runWithContextAsync(context, async () => {
+        try {
+            await options.initRequestContext(context)
+
+            globalThis.__SSR_URL__ = req.url
+
+            const routeCount = Object.keys(options.routes).length
+            logger.debug('resolving route', {pathname, routeCount, routeExists: !!options.routes[pathname]})
+
+            const result = await m.route.resolve(pathname, options.routes, m.renderToString)
+
+            const appHtml = typeof result === 'string' ? result : result.html
+            const serializedState = typeof result === 'string' ? {} : result.state
+            const htmlLength = appHtml?.length || 0
+
+            logger.debug('route resolved', {pathname, htmlLength, resultType: typeof result === 'string' ? 'string' : 'object'})
+
+            if (!appHtml || appHtml.trim() === '' || appHtml.trim() === '<div></div>') {
+                logger.warn('empty html rendered', {pathname})
+            } else {
+                logger.info(`get ${pathname} → ${htmlLength} chars`)
+            }
+
+            let html = await options.getHtmlTemplate()
+
+            const appSelector = options.appSelector || '#app'
+
+            let openingTagPattern: string
+            if (appSelector.startsWith('#')) {
+                const id = appSelector.slice(1)
+                openingTagPattern = `<([a-zA-Z][a-zA-Z0-9]*)\\s+id="${id}"([^>]*)>`
+            } else if (appSelector.startsWith('.')) {
+                const className = appSelector.slice(1)
+                openingTagPattern = `<([a-zA-Z][a-zA-Z0-9]*)([^>]*\\s+class="[^"]*\\b${className}\\b[^"]*"[^>]*)>`
+            } else {
+                openingTagPattern = `<${appSelector}([^>]*)>`
+            }
+
+            const fullPattern = new RegExp(`(${openingTagPattern})\\s*</([a-zA-Z][a-zA-Z0-9]*)>`, 'i')
+            html = html.replace(fullPattern, (_match, openingTag, closingTagName) => {
+                const tagMatch = openingTag.match(/^<([a-zA-Z][a-zA-Z0-9]*)/)
+                const elementName = tagMatch ? tagMatch[1] : closingTagName || 'div'
+                return `${openingTag}${appHtml}</${elementName}>`
+            })
+
+            const stateScriptId = options.stateScriptId || '__SSR_STATE__'
+            const stateScript = `<script id="${stateScriptId}" type="application/json">${JSON.stringify(serializedState)}</script>`
+            html = html.replace('</head>', `${stateScript}</head>`)
+
+            const sessionId = context.sessionId ?? ''
+
+            return new Response(html, {
+                headers: {
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    'Content-Type': 'text/html; charset=utf-8',
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    'Set-Cookie': `sessionId=${sessionId}; Path=/; HttpOnly; SameSite=Lax`,
+                },
+            })
+        } catch (error) {
+            logger.error('ssr request failed', error, {
+                pathname,
+                method: req.method,
+                sessionId: context.sessionId,
+            })
+            return new Response('Internal Server Error', {status: 500})
+        }
+    })
+}
+
+/**
+ * Create session update API handler factory
+ * Returns a handler function for POST /api/session requests
+ */
+export function createSessionUpdateHandler(
+    sessionStore: SessionStore,
+    extractSessionIdFn: (req: Request) => string | null = extractSessionId,
+): (req: Request) => Promise<Response> {
+    return async (req: Request): Promise<Response> => {
+        const sessionId = extractSessionIdFn(req)
+
+        if (!sessionId) {
+            return new Response('No session ID', {status: 401})
+        }
+
+        try {
+            const body = await req.json()
+            // Blueprint extracts { session: {...} }, so body.session contains the actual session data
+            // body structure: { session: { user: {...}, serverData: '...', lastServerUpdate: ... } }
+            const sessionData = body.session_data || body.session || {} // Support both session_data and session for compatibility
+
+            // Update session store with new session state
+            // Store under session_data key in sessionStore.data
+            // sessionData structure: { user: {...}, serverData: '...', lastServerUpdate: ... }
+            sessionStore.updateSession(sessionId, {session_data: sessionData})
+
+            logger.debug('session updated', {
+                method: req.method,
+                sessionId,
+            })
+
+            return new Response(JSON.stringify({success: true}), {
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                headers: {'Content-Type': 'application/json'},
+            })
+        } catch (error) {
+            logger.error('failed to update session', error, {
+                method: req.method,
+                sessionId,
+            })
+            return new Response('Internal Server Error', {status: 500})
+        }
+    }
+}

package/server/ssrLogger.ts

@@ -0,0 +1,13 @@
+/**
+ * SSR-specific logger instance.
+ * SSR infrastructure code should import {logger} from this file
+ * to get a logger instance with [ssr] prefix.
+ */
+
+import {Logger} from './logger'
+
+// Create SSR logger instance with [ssr] prefix
+const logger = new Logger()
+logger.setPrefix('[ssr]')
+
+export {logger}

package/server.ts

@@ -0,0 +1,101 @@
+import hyperscript from './render/hyperscript'
+import {logger} from './server/logger'
+import {version} from './version'
+import {renderToStringFactory} from './render/renderToString'
+
+import routerFactory from './api/router'
+import parseQueryString from './querystring/parse'
+import buildQueryString from './querystring/build'
+import parsePathname from './pathname/parse'
+import buildPathname from './pathname/build'
+import Vnode from './render/vnode'
+import censor from './util/censor'
+
+import type {MithrilStatic, Hyperscript} from './index'
+import type {Redraw} from './api/mount-redraw'
+
+logger.debug(`mithril ssr v${version}`)
+
+// Create server-side renderer
+const {renderToString, renderToStringSync} = renderToStringFactory()
+
+// Create isomorphic router instance (null window for server, mock mountRedraw)
+const router = routerFactory(null, {
+    mount: () => {
+        throw new Error('m.mount is not available on server. Use m.route.resolve instead.')
+    },
+    redraw: () => {
+        throw new Error('m.redraw is not available on server.')
+    },
+})
+
+// Set prefix to empty string for pathname-based routing (not hash-based)
+router.prefix = ''
+
+// Expose resolve method and Link component for server-side routing
+const routerServer = {
+    resolve: router.resolve.bind(router),
+    Link: router.Link,
+    prefix: router.prefix,
+    get: router.get.bind(router),
+    set: router.set.bind(router),
+    param: router.param.bind(router),
+    params: router.params,
+    link: router.link.bind(router),
+    redirect: router.redirect.bind(router),
+    REDIRECT: router.REDIRECT,
+    SKIP: router.SKIP,
+}
+
+// Server-side Mithril instance
+const mServer: MithrilStatic &
+    Hyperscript & {
+        renderToString: typeof renderToString
+        renderToStringSync: typeof renderToStringSync
+        route: typeof routerServer
+    } = function m(this: any) {
+    return hyperscript.apply(this, arguments as any)
+} as unknown as MithrilStatic &
+    Hyperscript & {
+        renderToString: typeof renderToString
+        renderToStringSync: typeof renderToStringSync
+        route: typeof routerServer
+    }
+
+mServer.m = hyperscript as Hyperscript
+mServer.trust = hyperscript.trust
+mServer.fragment = hyperscript.fragment
+mServer.Fragment = '['
+mServer.renderToString = renderToString
+mServer.renderToStringSync = renderToStringSync
+mServer.route = routerServer as any
+mServer.parseQueryString = parseQueryString
+mServer.buildQueryString = buildQueryString
+mServer.parsePathname = parsePathname
+mServer.buildPathname = buildPathname
+mServer.vnode = Vnode
+mServer.censor = censor
+
+// Placeholder implementations for server (not used but needed for type compatibility)
+mServer.mount = () => {
+    throw new Error('m.mount is not available on server. Use m.renderToString instead.')
+}
+mServer.render = () => {
+    throw new Error('m.render is not available on server. Use m.renderToString instead.')
+}
+mServer.redraw = Object.assign(
+    () => {
+        throw new Error('m.redraw is not available on server.')
+    },
+    {
+        sync: () => {
+            throw new Error('m.redraw.sync is not available on server.')
+        },
+    },
+) as Redraw
+
+export default mServer
+
+// Export SSR server utilities
+export * from './server/session'
+export * from './server/ssr'