fusee-framework 1.6.0 → 1.7.0

package/create-fusee-go/internal/assets/embed/framework/router/router.js

@@ -0,0 +1,462 @@
+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/create-fusee-go/internal/assets/embed/framework/types/compiler.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentResult, ComponentFactory } from './component'
+
+export function mountTemplate(
+    template: string,
+    container: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>
+): { effects: (() => void)[] }
+
+export function compileNode(
+    node: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void

package/create-fusee-go/internal/assets/embed/framework/types/component.d.ts

@@ -0,0 +1,88 @@
+export type ComponentProps = Record<string, any>
+export type EmptyProps = Record<string, never>
+export type PropSchema = string[] | Record<string, PropConfig>
+
+export type PropConfig = {
+    type?: FunctionConstructor | StringConstructor | NumberConstructor | BooleanConstructor
+    default?: any | (() => any)
+    required?: boolean
+}
+
+export type EmitFn = (eventName: string, ...args: any[]) => void
+
+export type Slots = Record<string, string>
+
+export type SetupContext = {
+    emit: EmitFn
+    slots: Slots
+}
+
+export type ComponentInstance = {
+    props: ComponentProps
+    _mountHooks: (() => void)[]
+    _unmountHooks: (() => void)[]
+    _effects: import('./signal').EffectRunner[]
+    _element: HTMLElement | null
+    _provides: Record<string, any>
+    _parent: ComponentInstance | null
+}
+
+export type ComponentResult = {
+    template: string
+    [key: string]: any
+}
+
+export type ComponentOptions<TProps = ComponentProps, P = PropSchema> = {
+    props?: P
+    components?: Record<string, ComponentFactory<any>>
+    setup: (props: TProps, ctx: SetupContext) => ComponentResult
+}
+
+export type ComponentFactory<TProps = ComponentProps> = (
+    props?: TProps,
+    options?: { listeners?: Record<string, Function>, slots?: Slots, parent?: ComponentInstance }
+) => ComponentApi
+
+export type ComponentApi = {
+    render: (container: HTMLElement) => ComponentInstance
+    unmount: () => void
+    instance: ComponentInstance
+}
+
+export declare function onMount(fn: () => void): void
+export declare function onUnmount(fn: () => void): void
+export declare function parseSlots(slotHTML: string): Slots
+export declare function getCurrentInstance(): ComponentInstance | null
+
+export declare function provide<T>(key: string, value: T): void
+export declare function inject<T>(key: string): T | null
+
+type InferPropType<T> = T extends StringConstructor ? string :
+    T extends NumberConstructor ? number :
+    T extends BooleanConstructor ? boolean :
+    any;
+
+type InferProps<P> = P extends string[]
+    ? Record<P[number], any>
+    : P extends Record<string, PropConfig>
+    ? {
+        [K in keyof P]: P[K]['required'] extends true
+        ? InferPropType<P[K]['type']>
+        : InferPropType<P[K]['type']> | (P[K] extends { default: any } ? never : undefined)
+    }
+    : Record<string, any>;
+
+export declare function defineComponent<P extends PropSchema = any, TProps = InferProps<P>>(
+    options: ComponentOptions<TProps, P>
+): ComponentFactory<TProps>
+
+export type AsyncComponentLoader<TProps = ComponentProps> = () => Promise<ComponentFactory<TProps> | { default: ComponentFactory<TProps> } | Record<string, any>>
+
+export type AsyncComponentOptions<TProps = ComponentProps> = {
+    loader: AsyncComponentLoader<TProps>
+    loadingComponent?: ComponentFactory<any>
+}
+
+export declare function defineAsyncComponent<TProps = ComponentProps>(
+    loaderOrOptions: AsyncComponentLoader<TProps> | AsyncComponentOptions<TProps>
+): ComponentFactory<TProps>

package/create-fusee-go/internal/assets/embed/framework/types/composable.d.ts

@@ -0,0 +1,14 @@
+export interface Composable<T = any> {
+    (...args: any[]): T
+    readonly _isComposable: true
+}
+
+declare global {
+    interface Composable<T = any> {
+        (...args: any[]): T
+        readonly _isComposable: true
+    }
+}
+
+export declare function defineComposable<T extends (...args: any[]) => any>(fn: T): T;
+export declare function assertSetupContext(name?: string): void;

package/create-fusee-go/internal/assets/embed/framework/types/directives.d.ts

@@ -0,0 +1,55 @@
+import type { ComponentResult, ComponentFactory } from './component'
+
+export function processDirectives(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processRefs(root: HTMLElement, context: ComponentResult): void
+
+export function processModel(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+
+export function processFor(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processIf(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processIs(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processShow(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processHtml(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processText(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processEvents(root: HTMLElement, context: ComponentResult): void
+export function processClassList(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processCloak(root: HTMLElement): void
+
+export interface DirectiveBinding<V = any> {
+    value: V
+    expression: string
+    arg: string | null
+    modifiers: string[]
+}
+
+export interface DirectiveHooks<V = any> {
+    mounted?: (el: HTMLElement, binding: DirectiveBinding<V>) => void
+    updated?: (el: HTMLElement, binding: DirectiveBinding<V>) => void
+    unmounted?: (el: HTMLElement, binding: DirectiveBinding<V>) => void
+}
+
+export function directive<V = any>(name: string, hooks: DirectiveHooks<V>): void

package/create-fusee-go/internal/assets/embed/framework/types/evaluator.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentResult } from './component'
+
+export type InterpolationPart = {
+    type: 'static' | 'dynamic'
+    value?: string
+    key?: string
+}
+
+export const MUSTACHE_RE: RegExp
+
+export function evaluateExpression(expr: string, context: Record<string, any>, extraContext?: Record<string, any>): any
+export function parseInterpolation(str: string): InterpolationPart[]
+export function sanitizeAttr(name: string, value: string): string

package/create-fusee-go/internal/assets/embed/framework/types/event-delegation.d.ts

@@ -0,0 +1,32 @@
+export const DELEGATED_EVENTS: Set<string>
+
+export function isDelegatedEvent(eventName: string): boolean
+
+export interface DelegatedEventOptions {
+    modifiers?: string[]
+    context?: Record<string, any>
+    expr?: string
+}
+
+export function registerDelegatedEvent(
+    element: Element,
+    eventType: string,
+    handler: (event: Event) => void,
+    options?: DelegatedEventOptions
+): () => void
+
+export function createEventHandler(
+    handler: Function | string,
+    modifiers: string[],
+    context: Record<string, any>,
+    expr: string
+): (event: Event) => void
+
+export interface EventHandlerSyntax {
+    delegated: `@${string}`
+    native: `on:${string}`
+}
+
+declare global {
+    const isDelegatedEvent: typeof import('./event-delegation').isDelegatedEvent
+}

package/create-fusee-go/internal/assets/embed/framework/types/index.d.ts

@@ -0,0 +1,22 @@
+export * from './signal'
+export * from './component'
+export * from './composable'
+export * from './router'
+export * from './compiler'
+export * from './directives'
+export * from './store'
+export * from './event-delegation'
+
+declare global {
+    type Signal<T = any> = import('./signal').Signal<T>
+    type Computed<T = any> = import('./signal').Computed<T>
+    type SignalAccessor<T> = import('./signal').SignalAccessor<T>
+    type Composable<T extends (...args: any[]) => any> = import('./composable').Composable<T>
+    type DirectiveBinding<V = any> = import('./directives').DirectiveBinding<V>
+    type DirectiveHooks<V = any> = import('./directives').DirectiveHooks<V>
+    type DelegatedEventOptions = import('./event-delegation').DelegatedEventOptions
+    const defineStore: typeof import('./store').defineStore
+    const isDelegatedEvent: typeof import('./event-delegation').isDelegatedEvent
+}
+
+export as namespace Fusee