fusee-framework 1.6.0 → 1.7.0

package/framework/router/router.js

@@ -1,80 +1,462 @@
-let _routes = []
-let _outlet = null
-let _currentInstance = null
-
-export function createRouter(routes) {
-    _routes = routes
-
-    const handler = () => _resolve()
-    window.addEventListener('hashchange', handler)
-
-    if (document.readyState === 'loading') {
-        window.addEventListener('DOMContentLoaded', handler, { once: true })
-    } else {
-        setTimeout(() => {
-            if (!_currentInstance) _resolve()
-        }, 0)
-    }
-
-    return {
-        navigate,
-        destroy() {
-            window.removeEventListener('hashchange', handler)
-            window.removeEventListener('DOMContentLoaded', handler)
-            if (_currentInstance) {
-                try {
-                    _currentInstance.unmount()
-                } catch { }
-            }
-            _routes = []
-            _outlet = null
-            _currentInstance = null
-        }
-    }
-}
-
-export function navigate(path) {
-    window.location.hash = path
-}
-
-export function mountOutlet(el) {
-    _outlet = el
-    _resolve()
-}
-
-function _resolve() {
-    if (!_outlet || _routes.length === 0) {
-        return
-    }
-
-    const hash = window.location.hash
-    const path = hash.startsWith('#') ? hash.slice(1) || '/' : '/'
-
-    const matched = _routes.find(r => _matchPath(r.path, path))
-
-    if (!matched) {
-        _outlet.innerHTML = `<p style="color:red">[framework] No route matched for "${path}"</p>`
-        return
-    }
-
-    if (_currentInstance) {
-        try { _currentInstance.unmount() } catch { }
-    }
-
-    _outlet.innerHTML = ''
-
-    const componentFn = matched.component
-    _currentInstance = componentFn()
-    _currentInstance.render(_outlet)
-}
-
-function _matchPath(routePath, actualPath) {
-    const routeParts = routePath.split('/').filter(Boolean)
-    const actualParts = actualPath.split('/').filter(Boolean)
-
-    if (routeParts.length !== actualParts.length) return false
-
-    return routeParts.every((part, i) =>
-        part.startsWith(':') || part === actualParts[i]
-    )
-}
+import { signal } from '../core/signal.js'
+
+export const currentRoute = signal('/')
+export const routeParams = signal({})
+export const matchedRoutes = signal([])
+
+let _routes = []
+let _rootOutlet = null
+let _clickHandler = null
+let _activeChain = []
+let _routeCache = new Map()
+let _cacheMaxSize = 100
+let _routerViewTimeout = 10000
+
+function _getPath() {
+    return window.location.pathname || '/'
+}
+
+function _getRoutePaths(routePath) {
+    return Array.isArray(routePath) ? routePath : [routePath]
+}
+
+function _updateRoute() {
+    currentRoute(_getPath())
+}
+
+function _matchSegments(routePath, urlSegments) {
+    const cleanPath = routePath.startsWith('/') ? routePath.slice(1) : routePath
+
+    if (cleanPath === '') {
+        return { matched: true, consumed: 0, params: {} }
+    }
+
+    if (cleanPath === '*') {
+        return { matched: true, consumed: urlSegments.length, params: {} }
+    }
+
+    const routeSegs = cleanPath.split('/').filter(Boolean)
+    const hasWildcard = routeSegs[routeSegs.length - 1] === '*'
+    const checkSegs = hasWildcard ? routeSegs.slice(0, -1) : routeSegs
+
+    if (hasWildcard) {
+        if (urlSegments.length < checkSegs.length) return null
+    }
+
+    if (urlSegments.length < checkSegs.length) return null
+
+    const params = {}
+    for (let i = 0; i < checkSegs.length; i++) {
+        const rSeg = checkSegs[i]
+        const uSeg = urlSegments[i]
+        if (rSeg.startsWith(':')) {
+            params[rSeg.slice(1)] = uSeg
+        } else if (rSeg !== uSeg) {
+            return null
+        }
+    }
+
+    const consumed = hasWildcard ? urlSegments.length : checkSegs.length
+    return { matched: true, consumed, params }
+}
+
+function _matchRouteTree(routes, urlSegments) {
+    for (const route of routes) {
+        const paths = _getRoutePaths(route.path)
+        for (const path of paths) {
+            const result = _matchSegments(path, urlSegments)
+            if (!result) continue
+
+            const remaining = urlSegments.slice(result.consumed)
+
+            if (route.children && route.children.length > 0) {
+                const childChain = _matchRouteTree(route.children, remaining)
+                if (childChain) {
+                    return [
+                        { route, params: result.params, matchedSegments: urlSegments.slice(0, result.consumed), matchedPath: path },
+                        ...childChain
+                    ]
+                }
+                continue
+            }
+
+            if (remaining.length === 0 || path === '*' || path.endsWith('/*')) {
+                return [{ route, params: result.params, matchedSegments: urlSegments.slice(0, result.consumed), matchedPath: path }]
+            }
+        }
+    }
+
+    return null
+}
+
+function _matchSingleFlat(routePath, actualPath) {
+    if (routePath === '*') return true
+
+    const routeParts = routePath.split('/').filter(Boolean)
+    const actualParts = actualPath.split('/').filter(Boolean)
+
+    const hasWildcard = routeParts.length > 0 && routeParts[routeParts.length - 1] === '*'
+
+    if (hasWildcard) {
+        const baseParts = routeParts.slice(0, -1)
+        if (actualParts.length < baseParts.length) return false
+        return baseParts.every((part, i) => part.startsWith(':') || part === actualParts[i])
+    }
+
+    if (routeParts.length !== actualParts.length) return false
+    return routeParts.every((part, i) => part.startsWith(':') || part === actualParts[i])
+}
+
+function _matchFlat(routePath, actualPath) {
+    const paths = _getRoutePaths(routePath)
+    return paths.some(p => _matchSingleFlat(p, actualPath))
+}
+
+function _findMatchingPath(routePath, actualPath) {
+    const paths = _getRoutePaths(routePath)
+    return paths.find(p => _matchSingleFlat(p, actualPath)) || null
+}
+
+function _extractParamsFromPath(singlePath, actualPath) {
+    const params = {}
+    if (singlePath === '*') return params
+
+    const routeParts = singlePath.split('/').filter(Boolean)
+    const actualParts = actualPath.split('/').filter(Boolean)
+
+    const hasWildcard = routeParts.length > 0 && routeParts[routeParts.length - 1] === '*'
+    const checkLen = hasWildcard ? routeParts.length - 1 : routeParts.length
+
+    for (let i = 0; i < checkLen; i++) {
+        if (routeParts[i] && routeParts[i].startsWith(':')) {
+            params[routeParts[i].slice(1)] = actualParts[i] || ''
+        }
+    }
+    return params
+}
+
+function _extractParamsFlat(routePath, actualPath) {
+    const matchingPath = _findMatchingPath(routePath, actualPath)
+    if (!matchingPath) return {}
+    return _extractParamsFromPath(matchingPath, actualPath)
+}
+
+function _findMatchingChain(path) {
+    if (_routeCache.has(path)) {
+        const cached = _routeCache.get(path)
+        _routeCache.delete(path)
+        _routeCache.set(path, cached)
+        return cached
+    }
+
+    const urlSegments = path.split('/').filter(Boolean)
+    const hasNested = _routes.some(r => r.children && r.children.length > 0)
+
+    let chain = null
+
+    if (hasNested) {
+        chain = _matchRouteTree(_routes, urlSegments)
+        if (chain) {
+            _cacheResult(path, chain)
+            return chain
+        }
+    }
+
+    const paths = _routes.filter(r => {
+        const routePaths = _getRoutePaths(r.path)
+        return !routePaths.includes('*') && !routePaths.some(p => p.endsWith('/*')) && !r.children
+    })
+    const exactMatch = paths.find(r => _matchFlat(r.path, path))
+    if (exactMatch) {
+        const matchedPath = _findMatchingPath(exactMatch.path, path)
+        chain = [{ route: exactMatch, params: _extractParamsFlat(exactMatch.path, path), matchedSegments: urlSegments, matchedPath }]
+        _cacheResult(path, chain)
+        return chain
+    }
+
+    const wildcardPaths = _routes.filter(r => {
+        const routePaths = _getRoutePaths(r.path)
+        return !r.children && routePaths.some(p => p.endsWith('/*'))
+    })
+    const wildcardMatch = wildcardPaths.find(r => _matchFlat(r.path, path))
+    if (wildcardMatch) {
+        const matchedPath = _findMatchingPath(wildcardMatch.path, path)
+        chain = [{ route: wildcardMatch, params: _extractParamsFlat(wildcardMatch.path, path), matchedSegments: urlSegments, matchedPath }]
+        _cacheResult(path, chain)
+        return chain
+    }
+
+    const catchAll = _routes.find(r => {
+        const routePaths = _getRoutePaths(r.path)
+        return routePaths.includes('*')
+    })
+    if (catchAll) {
+        chain = [{ route: catchAll, params: {}, matchedSegments: urlSegments, matchedPath: '*' }]
+        _cacheResult(path, chain)
+        return chain
+    }
+
+    return null
+}
+
+function _cacheResult(path, chain) {
+    if (_routeCache.size >= _cacheMaxSize) {
+        const firstKey = _routeCache.keys().next().value
+        _routeCache.delete(firstKey)
+    }
+    _routeCache.set(path, chain)
+}
+
+function _clearRouteCache() {
+    _routeCache.clear()
+}
+
+function _unmountFromLevel(level) {
+    for (let i = _activeChain.length - 1; i >= level; i--) {
+        const entry = _activeChain[i]
+        if (entry && entry.instance) {
+            try { entry.instance.unmount() } catch { }
+        }
+    }
+    _activeChain.length = level
+}
+
+function _getRoutePathCount(route) {
+    return Array.isArray(route.path) ? route.path.length : 1
+}
+
+function _renderChain(chain) {
+    try {
+        let reuseUntil = 0
+        for (let i = 0; i < Math.min(_activeChain.length, chain.length); i++) {
+            const active = _activeChain[i]
+            const incoming = chain[i]
+
+            if (
+                active.route === incoming.route &&
+                _segmentsEqual(active.matchedSegments, incoming.matchedSegments)
+            ) {
+                reuseUntil = i + 1
+            }
+            else if (
+                active.route === incoming.route &&
+                _getRoutePathCount(active.route) > 1
+            ) {
+                reuseUntil = i + 1
+            }
+            else {
+                break
+            }
+        }
+
+        _unmountFromLevel(reuseUntil)
+
+        const allParams = {}
+        for (const entry of chain) {
+            Object.assign(allParams, entry.params)
+        }
+        routeParams(allParams)
+        matchedRoutes(chain.map(e => e.route))
+        _renderFromLevel(chain, reuseUntil)
+    } catch (error) {
+        console.error('[framework] Error rendering route chain:', error)
+        _unmountFromLevel(0)
+        if (_rootOutlet) {
+            _rootOutlet.innerHTML = `<p style="color:red">[framework] Error rendering route: ${error.message}</p>`
+        }
+    }
+}
+
+function _renderFromLevel(chain, level) {
+    if (level >= chain.length) return
+
+    const entry = chain[level]
+    const outlet = _getOutletForLevel(level)
+
+    if (!outlet) {
+        _waitForRouterView(level, () => _renderFromLevel(chain, level))
+        return
+    }
+
+    outlet.innerHTML = ''
+
+    const componentFn = entry.route.component
+    const instance = componentFn()
+    instance.render(outlet)
+
+    _activeChain[level] = {
+        route: entry.route,
+        matchedSegments: entry.matchedSegments,
+        params: entry.params,
+        instance,
+        outlet
+    }
+
+    if (level + 1 < chain.length) _scheduleNextLevel(chain, level + 1)
+}
+
+function _scheduleNextLevel(chain, level) {
+    const outlet = _getOutletForLevel(level)
+    if (outlet) {
+        _renderFromLevel(chain, level)
+        return
+    }
+
+    _waitForRouterView(level, () => _renderFromLevel(chain, level))
+}
+
+function _getOutletForLevel(level) {
+    if (level === 0) return _rootOutlet
+
+    const parentEntry = _activeChain[level - 1]
+    if (!parentEntry || !parentEntry.outlet) return null
+
+    return parentEntry.outlet.querySelector('[data-router-view]')
+}
+
+function _waitForRouterView(level, callback) {
+    const parentEntry = _activeChain[level - 1]
+    if (!parentEntry || !parentEntry.outlet) return
+
+    const parentOutlet = parentEntry.outlet
+
+    const existing = parentOutlet.querySelector('[data-router-view]')
+    if (existing) {
+        callback()
+        return
+    }
+
+    const observer = new MutationObserver(() => {
+        const el = parentOutlet.querySelector('[data-router-view]')
+        if (el) {
+            observer.disconnect()
+            callback()
+        }
+    })
+
+    observer.observe(parentOutlet, { childList: true, subtree: true })
+
+    setTimeout(() => observer.disconnect(), _routerViewTimeout)
+}
+
+function _segmentsEqual(a, b) {
+    if (a.length !== b.length) return false
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) return false
+    }
+    return true
+}
+
+function _resolveRoute() {
+    if (!_rootOutlet || _routes.length === 0) return
+
+    const path = _getPath()
+    const chain = _findMatchingChain(path)
+
+    if (!chain) {
+        _unmountFromLevel(0)
+        _rootOutlet.innerHTML = `<p style="color:red">[framework] No route matched for "${path}"</p>`
+        routeParams({})
+        matchedRoutes([])
+        return
+    }
+
+    _renderChain(chain)
+}
+
+export function navigate(path) {
+    if (path === _getPath()) return
+    window.history.pushState({}, '', path)
+    _updateRoute()
+    _resolveRoute()
+}
+
+export function mountOutlet(el) {
+    _rootOutlet = el
+    _resolveRoute()
+}
+
+function _isInternalLink(anchor) {
+    const href = anchor.getAttribute('href')
+    if (!href) return false
+    if (href.startsWith('#')) return false
+    if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+        const url = new URL(href, window.location.origin)
+        return url.origin === window.location.origin
+    }
+    return href.startsWith('/')
+}
+
+function _getAnchorFromEvent(e) {
+    if (e.composedPath) {
+        return e.composedPath().find(el => el.tagName === 'A')
+    }
+    return e.target.tagName === 'A' ? e.target : null
+}
+
+function _handleLinkClick(e) {
+    const anchor = _getAnchorFromEvent(e)
+    if (!anchor) return
+
+    if (anchor.hasAttribute('f-link') || _isInternalLink(anchor)) {
+        e.preventDefault()
+        const href = anchor.getAttribute('href')
+        if (href && href !== _getPath()) {
+            navigate(href)
+        }
+    }
+}
+
+function _setupPopstateHandler() {
+    const handler = () => {
+        _updateRoute()
+        _resolveRoute()
+    }
+    window.addEventListener('popstate', handler)
+    return handler
+}
+
+function _setupClickHandler() {
+    _clickHandler = _handleLinkClick
+    document.addEventListener('click', _clickHandler)
+    return _clickHandler
+}
+
+function _setupInitialRoute() {
+    if (document.readyState === 'loading') {
+        window.addEventListener('DOMContentLoaded', () => {
+            _updateRoute()
+            _resolveRoute()
+        }, { once: true })
+    } else {
+        setTimeout(() => {
+            if (_activeChain.length === 0) _resolveRoute()
+        }, 0)
+    }
+}
+
+export function createRouter(routes, options = {}) {
+    _routes = routes
+    _activeChain = []
+    _cacheMaxSize = options.cacheSize || 100
+    _routerViewTimeout = options.routerViewTimeout || 10000
+
+    _updateRoute()
+
+    const popstateHandler = _setupPopstateHandler()
+    _setupClickHandler()
+    _setupInitialRoute()
+
+    return {
+        navigate,
+        destroy() {
+            window.removeEventListener('popstate', popstateHandler)
+            document.removeEventListener('click', _clickHandler)
+            _unmountFromLevel(0)
+            _routes = []
+            _rootOutlet = null
+            _activeChain = []
+            _clearRouteCache()
+        }
+    }
+}

package/framework/types/event-delegation.d.ts

@@ -1,40 +1,13 @@
-// ─── Event Delegation Types ────────────────────────────────────────────────
-
-/**
- * Set of standard events that support delegation.
- * These events bubble and are commonly used in UI interactions.
- */
 export const DELEGATED_EVENTS: Set<string>
 
-/**
- * Check if an event type is delegated.
- * @param eventName - The event name to check (e.g., 'click', 'keydown')
- * @returns True if the event can be delegated
- */
 export function isDelegatedEvent(eventName: string): boolean
 
-/**
- * Options for registering a delegated event.
- */
 export interface DelegatedEventOptions {
-    /** Event modifiers (e.g., 'prevent', 'stop', 'debounce', 'throttle') */
     modifiers?: string[]
-    /** Component context for evaluating expressions */
     context?: Record<string, any>
-    /** Expression string to evaluate */
     expr?: string
 }
 
-/**
- * Register a delegated event handler for an element.
- * Creates a single document-level listener if not already present.
- *
- * @param element - The DOM element to register
- * @param eventType - The event type (e.g., 'click', 'input')
- * @param handler - The event handler function
- * @param options - Optional configuration
- * @returns Cleanup function to remove the handler
- */
 export function registerDelegatedEvent(
     element: Element,
     eventType: string,
@@ -42,16 +15,6 @@ export function registerDelegatedEvent(
     options?: DelegatedEventOptions
 ): () => void
 
-/**
- * Create a wrapped event handler with modifier support.
- * Supports: prevent, stop, self, debounce, throttle, keyboard modifiers.
- *
- * @param handler - The original handler (function or expression)
- * @param modifiers - Array of modifier names
- * @param context - Component context for evaluating expressions
- * @param expr - Expression string (when handler is a string)
- * @returns Wrapped handler function
- */
 export function createEventHandler(
     handler: Function | string,
     modifiers: string[],
@@ -59,29 +22,8 @@ export function createEventHandler(
     expr: string
 ): (event: Event) => void
 
-/**
- * Event handler syntax preference.
- * Use @ prefix for delegated events (optimized, single document listener).
- * Use on: prefix for native events (individual element listeners, full event control).
- *
- * @example
- * // Delegated - efficient for many elements
- * <button @click="handleClick">Click</button>
- *
- * @example
- * // Native - full control including stopPropagation
- * <button on:click="handleClick">Click</button>
- *
- * @example
- * // With modifiers
- * <form @submit.prevent="handleSubmit">Submit</form>
- * <input @keydown.enter="handleEnter" />
- * <input @input.debounce="handleInput" />
- */
 export interface EventHandlerSyntax {
-    /** Delegated event: @click, @input, @keydown, etc. */
     delegated: `@${string}`
-    /** Native event: on:click, on:input, on:custom, etc. */
     native: `on:${string}`
 }
 

package/framework/types/router.d.ts

@@ -1,15 +1,32 @@
-import type { ComponentApi } from './component'
-
-export type Route = {
-    path: string
-    component: () => ComponentApi
-}
-
-export type Router = {
-    navigate: (path: string) => void
-    destroy: () => void
-}
-
-export declare function createRouter(routes: Route[]): Router
-export declare function navigate(path: string): void
-export declare function mountOutlet(el: HTMLElement): void
+import type { ComponentApi, ComponentFactory } from './component'
+import type { Signal } from './signal'
+
+export type Route = {
+    path: string | string[]
+    component: ComponentFactory<any>
+    children?: Route[]
+}
+
+export type Router = {
+    navigate: (path: string) => void
+    destroy: () => void
+}
+
+export type RouteParams = Record<string, string>
+
+export declare const currentRoute: Signal<string>
+export declare const routeParams: Signal<RouteParams>
+export declare const matchedRoutes: Signal<Route[]>
+
+export declare function createRouter(routes: Route[], options?: { cacheSize?: number; routerViewTimeout?: number }): Router
+export declare function navigate(path: string): void
+export declare function mountOutlet(el: HTMLElement): void
+
+export type FileRouterOptions = {
+    loadingComponent?: ComponentFactory<any>
+}
+
+export declare function generateRoutes(
+    globResults: Record<string, () => Promise<any>>,
+    options?: FileRouterOptions
+): Route[]

package/framework/types/signal.d.ts

@@ -73,6 +73,7 @@ export declare function watch<T extends any[]>(
     options?: WatchOptions
 ): () => void
 export declare function inspect(...args: any[]): (() => void) | void
+export declare function onCleanup(fn: () => void): void
 
 declare function setEffectHook(fn: (eff: any) => void): void