fusee-framework 1.7.0 → 1.9.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/server/actions.js

@@ -0,0 +1,173 @@
+import { signal, batch } from '../core/signal.js'
+import { getCurrentInstance } from '../core/component.js'
+
+const ACTION_BASE_URL = '/__fusee/actions'
+const _actionHydrationRegistry = new Map()
+
+export function defineAction(fnOrName, opts = {}) {
+    const name = opts.name
+        || (typeof fnOrName === 'function' ? fnOrName.name : fnOrName)
+
+    if (!name) {
+        throw new Error('[fusee] defineAction() client stub: nu s-a putut determina numele acțiunii')
+    }
+
+    return createActionProxy(name, opts)
+}
+
+export function createActionProxy(name, opts = {}) {
+    const baseUrl = opts.baseUrl ?? ACTION_BASE_URL
+
+    async function actionProxy(...args) {
+        const res = await fetch(`${baseUrl}/${name}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...(opts.headers ?? {})
+            },
+            body: JSON.stringify({ args })
+        })
+
+        const json = await res.json()
+
+        if (!res.ok) {
+            const err = new Error(json.error ?? `Action "${name}" failed (${res.status})`)
+            err.status = res.status
+            err.code = json.code
+            throw err
+        }
+
+        return json.data
+    }
+
+    actionProxy._isAction = true
+    actionProxy._actionName = name
+
+    return actionProxy
+}
+
+export function useAction(action, opts = {}) {
+    if (typeof action !== 'function') {
+        throw new Error('[fusee] useAction() requires an action function (result of defineAction or createActionProxy)')
+    }
+
+    const pending = signal(false)
+    const data = signal(undefined)
+    const error = signal(undefined)
+
+    const { onSuccess, onError, resetOnCall = true } = opts
+
+    let callId = 0
+
+    async function execute(...args) {
+        const id = ++callId
+
+        batch(() => {
+            pending(true)
+            if (resetOnCall) {
+                data(undefined)
+                error(undefined)
+            }
+        })
+
+        try {
+            const result = await action(...args)
+
+            if (id !== callId) return result
+
+            batch(() => {
+                data(result)
+                pending(false)
+            })
+
+            if (typeof onSuccess === 'function') {
+                onSuccess(result)
+            }
+
+            return result
+        } catch (err) {
+            if (id !== callId) return
+
+            batch(() => {
+                error(err)
+                pending(false)
+            })
+
+            if (typeof onError === 'function') {
+                onError(err)
+            } else {
+                console.error(`[fusee] useAction("${action._actionName ?? '?'}") error:`, err)
+            }
+        }
+    }
+
+    function reset() {
+        batch(() => {
+            pending(false)
+            data(undefined)
+            error(undefined)
+        })
+        callId++
+    }
+
+    const instance = getCurrentInstance()
+    if (instance) {
+        instance._unmountHooks.push(() => {
+            callId++
+        })
+    }
+
+    return { execute, pending, data, error, reset }
+}
+
+export function hydrateAction(actionName, data, opts = {}) {
+    const key = `action:${actionName}`
+    _actionHydrationRegistry.set(key, {
+        data,
+        timestamp: Date.now(),
+        staleTime: opts.staleTime ?? 0
+    })
+}
+
+export function getHydratedAction(actionName, staleTime) {
+    const key = `action:${actionName}`
+    const entry = _actionHydrationRegistry.get(key)
+    if (!entry) return undefined
+
+    if (staleTime !== undefined && (Date.now() - entry.timestamp) > staleTime) {
+        return undefined
+    }
+    if (entry.staleTime && (Date.now() - entry.timestamp) > entry.staleTime) {
+        return undefined
+    }
+
+    return entry.data
+}
+
+export function clearActionHydration() {
+    _actionHydrationRegistry.clear()
+}
+
+export function extractActionHydration() {
+    const snapshot = {}
+    for (const [key, entry] of _actionHydrationRegistry) {
+        snapshot[key] = {
+            data: entry.data,
+            timestamp: entry.timestamp,
+            staleTime: entry.staleTime
+        }
+    }
+    return snapshot
+}
+
+export function loadActionHydration(snapshot) {
+    if (!snapshot || typeof snapshot !== 'object') return
+
+    for (const [key, entry] of Object.entries(snapshot)) {
+        _actionHydrationRegistry.set(key, {
+            data: entry.data,
+            timestamp: entry.timestamp,
+            staleTime: entry.staleTime
+        })
+    }
+}

package/framework/server/actions.server.js

@@ -0,0 +1,88 @@
+import { withRequestContext, createRequestContext } from './index.js'
+
+const _actionRegistry = new Map()
+
+export function defineAction(fn, opts = {}) {
+    if (typeof fn !== 'function') {
+        throw new Error('[fusee] defineAction() requires a function')
+    }
+
+    const name = opts.name || fn.name
+    if (!name) {
+        throw new Error(
+            '[fusee] defineAction(): funcția trebuie să aibă un nume sau să specifici opts.name'
+        )
+    }
+
+    const wrapped = async function (...args) {
+        if (opts.authorize) {
+            await opts.authorize(...args)
+        }
+        return fn(...args)
+    }
+
+    wrapped._isAction = true
+    wrapped._actionName = name
+    _actionRegistry.set(name, { fn: wrapped, opts })
+
+    return wrapped
+}
+
+export async function handleActionRequest(req, res) {
+    let actionName
+    if (req.params?.name) {
+        actionName = req.params.name
+    } else {
+        const url = new URL(req.url, 'http://localhost')
+        const parts = url.pathname.split('/')
+        actionName = parts[parts.length - 1]
+    }
+
+    const entry = _actionRegistry.get(actionName)
+    if (!entry) {
+        return _sendJson(res, 404, { error: `Action "${actionName}" not found` })
+    }
+
+    let body
+    try {
+        body = req.body ?? (await _parseBody(req))
+    } catch {
+        return _sendJson(res, 400, { error: 'Invalid JSON body' })
+    }
+
+    const args = Array.isArray(body?.args) ? body.args : body != null ? [body] : []
+    const ctx = createRequestContext()
+
+    try {
+        const data = await withRequestContext(ctx, () => entry.fn(...args))
+        return _sendJson(res, 200, { data: data ?? null })
+    } catch (err) {
+        const isPublic = err?.expose === true
+        console.error(`[fusee] Action "${actionName}" threw:`, err)
+        return _sendJson(res, err?.status ?? 500, {
+            error: isPublic ? err.message : 'Internal server error',
+            code: err?.code
+        })
+    }
+}
+
+export function getRegisteredActions() {
+    return [..._actionRegistry.keys()]
+}
+
+async function _parseBody(req) {
+    const chunks = []
+    for await (const chunk of req) chunks.push(chunk)
+    return JSON.parse(Buffer.concat(chunks).toString('utf8'))
+}
+
+function _sendJson(res, status, body) {
+    if (typeof res.status === 'function') {
+        return res.status(status).json(body)
+    }
+
+    return new Response(JSON.stringify(body), {
+        status,
+        headers: { 'Content-Type': 'application/json' }
+    })
+}

package/framework/server/index.js

@@ -0,0 +1,18 @@
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { _registerALS } from '../core/async-context.js'
+
+const _als = new AsyncLocalStorage()
+_registerALS(_als)
+
+export function createRequestContext() {
+    return {
+        inFlightMaps: {
+            byKey: new Map(),
+            byFetcher: new WeakMap()
+        }
+    }
+}
+
+export function withRequestContext(ctx, fn) {
+    return _als.run(ctx, fn)
+}

package/framework/types/actions.d.ts

@@ -0,0 +1,50 @@
+export interface ActionOptions {
+    name?: string
+    baseUrl?: string
+    headers?: Record<string, string>
+}
+
+export interface UseActionOptions {
+    onSuccess?: (data: any) => void
+    onError?: (error: Error) => void
+    resetOnCall?: boolean
+}
+
+export interface ActionReturn {
+    execute: (...args: any[]) => Promise<any>
+    pending: Signal<boolean>
+    data: Signal<any>
+    error: Signal<any>
+    reset: () => void
+}
+
+export interface ActionProxy extends Function {
+    _isAction: boolean
+    _actionName: string
+}
+
+export declare function defineAction(fnOrName: Function | string, opts?: ActionOptions): ActionProxy
+export declare function createActionProxy(name: string, opts?: ActionOptions): ActionProxy
+export declare function useAction(action: ActionProxy, opts?: UseActionOptions): ActionReturn
+
+// ─── Hydration Support ─────────────────────────────────────────────────────
+
+export interface ActionHydrationOptions {
+    staleTime?: number
+}
+
+export interface ActionHydrationEntry {
+    data: any
+    timestamp: number
+    staleTime: number
+}
+
+export interface ActionHydrationSnapshot {
+    [key: string]: ActionHydrationEntry
+}
+
+export declare function hydrateAction(actionName: string, data: any, opts?: ActionHydrationOptions): void
+export declare function getHydratedAction(actionName: string, staleTime?: number): any
+export declare function clearActionHydration(): void
+export declare function extractActionHydration(): ActionHydrationSnapshot
+export declare function loadActionHydration(snapshot: ActionHydrationSnapshot): void

package/framework/types/actions.server.d.ts

@@ -0,0 +1,36 @@
+export interface ActionServerOptions {
+    name?: string
+    authorize?: (...args: any[]) => Promise<void> | void
+}
+
+export interface RegisteredAction {
+    fn: Function
+    opts: ActionServerOptions
+}
+
+export interface ActionRegistry {
+    get(name: string): RegisteredAction | undefined
+    set(name: string, entry: RegisteredAction): void
+    keys(): IterableIterator<string>
+}
+
+export interface RequestLike {
+    params?: { name?: string }
+    body?: any
+    url?: string
+}
+
+export interface ResponseLike {
+    status(code: number): ResponseLike
+    json(body: any): any
+}
+
+export interface ActionError extends Error {
+    status?: number
+    code?: string
+    expose?: boolean
+}
+
+export declare function defineAction(fn: Function, opts?: ActionServerOptions): Function
+export declare function handleActionRequest(req: RequestLike, res: ResponseLike): Promise<void>
+export declare function getRegisteredActions(): string[]