fusee-framework 1.7.0 → 1.8.0

package/framework/index.js

@@ -1,10 +1,12 @@
 // ─── Framework Public API ─────────────────────────────────────────────────────
-export { signal, computed, effect, batch, untrack, inspect, watch, onCleanup } from './core/signal.js'
+export { signal, computed, effect, batch, untrack, inspect, watch, onCleanup, resource, createSuspense, scheduleAsyncJob } from './core/signal.js'
 export { defineComponent, defineAsyncComponent, onMount, onUnmount, parseSlots, provide, inject, getCurrentInstance } from './core/component.js'
-export { createRouter, navigate, mountOutlet, currentRoute, routeParams, matchedRoutes } from './router/router.js'
+export { InjectionToken, provideGlobal } from './core/di.js'
+export { createRouter, navigate, mountOutlet, currentRoute, routeParams, routeQuery, matchedRoutes } from './router/router.js'
 export { generateRoutes } from './router/file-router.js'
 export { mountTemplate } from './core/compiler.js'
 export { defineComposable, assertSetupContext } from './core/composable.js'
-export { defineStore, resetStore, clearStores, registerStorePlugin } from './core/store.js'
+export { defineStore, resetStore, clearStores, registerStorePlugin, storeToRefs, storeToState, storeToGetters, useNestedStore, MutationType } from './core/store.js'
 export { directive } from './core/directives.js'
+export { reconcile } from './core/reconcile.js'
 export const emit = () => console.warn('[framework] emit() can only be used inside component setup()')

package/framework/router/file-router.js

@@ -173,5 +173,5 @@ function _compareRoutes(a, b) {
     const bSegs = bPath.split('/').filter(Boolean).length;
     if (aSegs !== bSegs) return bSegs - aSegs;
 
-    return bPath.length - aPath.length;
+    return aPath.localeCompare(bPath);
 }

package/framework/router/router.js

@@ -2,6 +2,7 @@ import { signal } from '../core/signal.js'
 
 export const currentRoute = signal('/')
 export const routeParams = signal({})
+export const routeQuery = signal({})
 export const matchedRoutes = signal([])
 
 let _routes = []
@@ -11,9 +12,26 @@ let _activeChain = []
 let _routeCache = new Map()
 let _cacheMaxSize = 100
 let _routerViewTimeout = 10000
+let _scrollBehaviorOptions = null
+let _scrollPositions = new Map()
+let _currentPath = null
 
 function _getPath() {
-    return window.location.pathname || '/'
+    const pathname = window.location.pathname || '/'
+    const search = window.location.search || ''
+    const hash = window.location.hash || ''
+    return pathname + search + hash
+}
+
+function _extractQuery(path) {
+    const queryStr = path.split('?')[1]?.split('#')[0]
+    if (!queryStr) return {}
+    const params = new URLSearchParams(queryStr)
+    const query = {}
+    for (const [key, value] of params.entries()) {
+        query[key] = value
+    }
+    return query
 }
 
 function _getRoutePaths(routePath) {
@@ -90,10 +108,9 @@ function _matchRouteTree(routes, urlSegments) {
 }
 
 function _matchSingleFlat(routePath, actualPath) {
-    if (routePath === '*') return true
-
+    const actualPathWithoutParams = actualPath.split(/[?#]/)[0]
     const routeParts = routePath.split('/').filter(Boolean)
-    const actualParts = actualPath.split('/').filter(Boolean)
+    const actualParts = actualPathWithoutParams.split('/').filter(Boolean)
 
     const hasWildcard = routeParts.length > 0 && routeParts[routeParts.length - 1] === '*'
 
@@ -121,8 +138,9 @@ function _extractParamsFromPath(singlePath, actualPath) {
     const params = {}
     if (singlePath === '*') return params
 
+    const actualPathWithoutParams = actualPath.split(/[?#]/)[0]
     const routeParts = singlePath.split('/').filter(Boolean)
-    const actualParts = actualPath.split('/').filter(Boolean)
+    const actualParts = actualPathWithoutParams.split('/').filter(Boolean)
 
     const hasWildcard = routeParts.length > 0 && routeParts[routeParts.length - 1] === '*'
     const checkLen = hasWildcard ? routeParts.length - 1 : routeParts.length
@@ -142,14 +160,16 @@ function _extractParamsFlat(routePath, actualPath) {
 }
 
 function _findMatchingChain(path) {
-    if (_routeCache.has(path)) {
-        const cached = _routeCache.get(path)
-        _routeCache.delete(path)
-        _routeCache.set(path, cached)
+    const pathWithoutParams = path.split(/[?#]/)[0]
+
+    if (_routeCache.has(pathWithoutParams)) {
+        const cached = _routeCache.get(pathWithoutParams)
+        _routeCache.delete(pathWithoutParams)
+        _routeCache.set(pathWithoutParams, cached)
         return cached
     }
 
-    const urlSegments = path.split('/').filter(Boolean)
+    const urlSegments = pathWithoutParams.split('/').filter(Boolean)
     const hasNested = _routes.some(r => r.children && r.children.length > 0)
 
     let chain = null
@@ -157,7 +177,7 @@ function _findMatchingChain(path) {
     if (hasNested) {
         chain = _matchRouteTree(_routes, urlSegments)
         if (chain) {
-            _cacheResult(path, chain)
+            _cacheResult(pathWithoutParams, chain)
             return chain
         }
     }
@@ -166,11 +186,11 @@ function _findMatchingChain(path) {
         const routePaths = _getRoutePaths(r.path)
         return !routePaths.includes('*') && !routePaths.some(p => p.endsWith('/*')) && !r.children
     })
-    const exactMatch = paths.find(r => _matchFlat(r.path, path))
+    const exactMatch = paths.find(r => _matchFlat(r.path, pathWithoutParams))
     if (exactMatch) {
-        const matchedPath = _findMatchingPath(exactMatch.path, path)
-        chain = [{ route: exactMatch, params: _extractParamsFlat(exactMatch.path, path), matchedSegments: urlSegments, matchedPath }]
-        _cacheResult(path, chain)
+        const matchedPath = _findMatchingPath(exactMatch.path, pathWithoutParams)
+        chain = [{ route: exactMatch, params: _extractParamsFlat(exactMatch.path, pathWithoutParams), matchedSegments: urlSegments, matchedPath }]
+        _cacheResult(pathWithoutParams, chain)
         return chain
     }
 
@@ -178,11 +198,11 @@ function _findMatchingChain(path) {
         const routePaths = _getRoutePaths(r.path)
         return !r.children && routePaths.some(p => p.endsWith('/*'))
     })
-    const wildcardMatch = wildcardPaths.find(r => _matchFlat(r.path, path))
+    const wildcardMatch = wildcardPaths.find(r => _matchFlat(r.path, pathWithoutParams))
     if (wildcardMatch) {
-        const matchedPath = _findMatchingPath(wildcardMatch.path, path)
-        chain = [{ route: wildcardMatch, params: _extractParamsFlat(wildcardMatch.path, path), matchedSegments: urlSegments, matchedPath }]
-        _cacheResult(path, chain)
+        const matchedPath = _findMatchingPath(wildcardMatch.path, pathWithoutParams)
+        chain = [{ route: wildcardMatch, params: _extractParamsFlat(wildcardMatch.path, pathWithoutParams), matchedSegments: urlSegments, matchedPath }]
+        _cacheResult(pathWithoutParams, chain)
         return chain
     }
 
@@ -192,7 +212,7 @@ function _findMatchingChain(path) {
     })
     if (catchAll) {
         chain = [{ route: catchAll, params: {}, matchedSegments: urlSegments, matchedPath: '*' }]
-        _cacheResult(path, chain)
+        _cacheResult(pathWithoutParams, chain)
         return chain
     }
 
@@ -211,6 +231,63 @@ function _clearRouteCache() {
     _routeCache.clear()
 }
 
+function _saveScrollPosition(path) {
+    if (!_scrollBehaviorOptions?.saveScrollPosition) return
+    _scrollPositions.set(path, {
+        left: window.scrollX,
+        top: window.scrollY
+    })
+}
+
+function _getSavedScrollPosition(path) {
+    return _scrollPositions.get(path) || null
+}
+
+function _applyScrollBehavior(to, from) {
+    const options = _scrollBehaviorOptions
+    if (!options) return
+
+    const savedPosition = _getSavedScrollPosition(to)
+
+    if (options.custom) {
+        const result = options.custom(to, from, savedPosition)
+        if (result && typeof result.then === 'function') {
+            result.then(pos => _performScroll(pos))
+        } else {
+            _performScroll(result)
+        }
+        return
+    }
+
+    if (options.scrollToAnchor && to.includes('#')) {
+        const anchor = to.split('#')[1]
+        const element = document.getElementById(anchor)
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth' })
+            return
+        }
+    }
+
+    if (options.scrollToTop !== false) {
+        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+    } else if (savedPosition && options.saveScrollPosition) {
+        window.scrollTo(savedPosition.left, savedPosition.top)
+    }
+}
+
+function _performScroll(position) {
+    if (!position || position === false) return
+
+    if (typeof position === 'object' && 'selector' in position) {
+        const element = document.querySelector(position.selector)
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth' })
+        }
+    } else if (typeof position === 'object' && 'left' in position) {
+        window.scrollTo({ left: position.left, top: position.top, behavior: 'smooth' })
+    }
+}
+
 function _unmountFromLevel(level) {
     for (let i = _activeChain.length - 1; i >= level; i--) {
         const entry = _activeChain[i]
@@ -362,10 +439,21 @@ function _resolveRoute() {
     }
 
     _renderChain(chain)
+
+    const from = _currentPath
+    _currentPath = path
+    _applyScrollBehavior(path, from)
+    routeQuery(_extractQuery(path))
 }
 
 export function navigate(path) {
-    if (path === _getPath()) return
+    const currentPath = _getPath().split(/[?#]/)[0]
+    const targetPath = path.split(/[?#]/)[0]
+    if (targetPath === currentPath && path === _getPath()) {
+        _applyScrollBehavior(path, _getPath())
+        return
+    }
+    _saveScrollPosition(_getPath())
     window.history.pushState({}, '', path)
     _updateRoute()
     _resolveRoute()
@@ -440,6 +528,7 @@ export function createRouter(routes, options = {}) {
     _activeChain = []
     _cacheMaxSize = options.cacheSize || 100
     _routerViewTimeout = options.routerViewTimeout || 10000
+    _scrollBehaviorOptions = options.scrollBehavior || null
 
     _updateRoute()
 
@@ -457,6 +546,9 @@ export function createRouter(routes, options = {}) {
             _rootOutlet = null
             _activeChain = []
             _clearRouteCache()
+            _scrollPositions.clear()
+            _scrollBehaviorOptions = null
+            _currentPath = null
         }
     }
 }

package/framework/types/component.d.ts

@@ -1,88 +1,89 @@
-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>
+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
+    _parent: ComponentInstance | null
+    _injector: import('./di').Injector
+    _ownsInjector: boolean
+}
+
+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(keyOrProvider: any, value?: any): void
+export { inject } from './di'
+
+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/framework/types/di.d.ts

@@ -0,0 +1,43 @@
+export declare class InjectionToken<T = any> {
+    constructor(description: string);
+    description: string;
+    toString(): string;
+}
+
+export declare function isClass(fn: any): boolean;
+
+export interface InjectOptions {
+    optional?: boolean;
+    skipSelf?: boolean;
+    self?: boolean;
+}
+
+export declare abstract class Injector {
+    get<T>(token: any, options?: InjectOptions): T;
+}
+
+export declare class NullInjector extends Injector {
+    get<T>(token: any, options?: InjectOptions): T | null;
+}
+
+export declare type Provider = 
+  | any // class (shorthand)
+  | { provide: any, useClass: any }
+  | { provide: any, useValue: any }
+  | { provide: any, useFactory: () => any }
+  | { provide: any, useExisting: any };
+
+export declare class EnvironmentInjector extends Injector {
+    constructor(providers?: Provider[], parent?: Injector);
+    parent: Injector;
+    provide(provider: Provider): void;
+    get<T>(token: any, options?: InjectOptions): T;
+    createChild(providers?: Provider[]): EnvironmentInjector;
+    destroy(): void;
+}
+
+export declare function runInContext<T>(injector: Injector, fn: () => T): T;
+export declare function replaceActiveInjector(injector: Injector): void;
+export declare function inject<T>(token: any, options: InjectOptions & { optional: true }): T | null;
+export declare function inject<T>(token: any, options?: InjectOptions): T;
+

package/framework/types/index.d.ts

@@ -1,22 +1,32 @@
-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
+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'
+export * from './di'
+export * from './reconcile'
+
+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 storeToRefs: typeof import('./store').storeToRefs
+    const storeToState: typeof import('./store').storeToState
+    const storeToGetters: typeof import('./store').storeToGetters
+    const useNestedStore: typeof import('./store').useNestedStore
+    type StoreHook<T> = import('./store').StoreHook<T>
+    const isDelegatedEvent: typeof import('./event-delegation').isDelegatedEvent
+    const InjectionToken: typeof import('./di').InjectionToken
+    const provideGlobal: typeof import('./di').provideGlobal
+    const reconcile: typeof import('./reconcile').reconcile
+}
+
+export as namespace Fusee

package/framework/types/reconcile.d.ts

@@ -0,0 +1,7 @@
+export function reconcile<T = any>(
+    container: Element,
+    oldList: T[],
+    newList: T[],
+    keyFn: (item: T) => any,
+    createFn: (item: T) => Element
+): void;

package/framework/types/router.d.ts

@@ -7,6 +7,15 @@ export type Route = {
     children?: Route[]
 }
 
+export type ScrollPosition = { left: number; top: number } | { selector: string } | false
+
+export type ScrollBehaviorOptions = {
+    scrollToTop?: boolean
+    scrollToAnchor?: boolean
+    saveScrollPosition?: boolean
+    custom?: (to: string, from: string, savedPosition: ScrollPosition | null) => ScrollPosition | Promise<ScrollPosition>
+}
+
 export type Router = {
     navigate: (path: string) => void
     destroy: () => void
@@ -16,9 +25,10 @@ export type RouteParams = Record<string, string>
 
 export declare const currentRoute: Signal<string>
 export declare const routeParams: Signal<RouteParams>
+export declare const routeQuery: Signal<Record<string, string>>
 export declare const matchedRoutes: Signal<Route[]>
 
-export declare function createRouter(routes: Route[], options?: { cacheSize?: number; routerViewTimeout?: number }): Router
+export declare function createRouter(routes: Route[], options?: { cacheSize?: number; routerViewTimeout?: number; scrollBehavior?: ScrollBehaviorOptions }): Router
 export declare function navigate(path: string): void
 export declare function mountOutlet(el: HTMLElement): void