fusee-framework 1.9.0 → 1.9.1

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

@@ -1,5 +1,7 @@
 import { effect, setEffectHook, batch } from './signal.js'
 import { mountTemplate } from './compiler.js'
+import { rootInjector, runInContext, replaceActiveInjector, EnvironmentInjector } from './di.js'
+export { inject } from './di.js'
 
 let currentInstance = null
 
@@ -129,20 +131,25 @@ export function onUnmount(fn) {
 
 export function defineComponent(options) {
     return function ComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
+        const parentInjector = (parent && parent._injector) || rootInjector;
+
         const instance = {
             props: options.props ? resolveProps(options.props, props) : props,
             _mountHooks: [],
             _unmountHooks: [],
             _effects: [],
             _element: null,
-            _provides: {},
             _parent: parent,
+            _injector: parentInjector,
+            _ownsInjector: false
         }
 
         const emit = createEmit(listeners)
 
         currentInstance = instance
-        const result = options.setup(instance.props, { emit, slots })
+        const result = runInContext(instance._injector, () => {
+            return options.setup(instance.props, { emit, slots });
+        });
         instance.state = result
         result._instance = instance
         currentInstance = null
@@ -150,17 +157,41 @@ export function defineComponent(options) {
         function render(container) {
             instance._element = container
 
-            const resolvedTemplate = resolveSlots(result.template, slots)
-
-            const { effects } = mountTemplate(
-                resolvedTemplate,
-                container,
-                result,
-                options.components || {}
-            )
+            if (options.render) {
+                const nodes = options.render(result, options.components || {})
+                container.innerHTML = ''
+                
+                function mountNode(fnode) {
+                    if (!fnode || !fnode.node) return
+                    container.appendChild(fnode.node)
+                    
+                    if (fnode.effects) {
+                        instance._effects.push(...fnode.effects)
+                    }
+                    
+                    if (fnode.children) {
+                        for (const child of fnode.children) {
+                            mountNode(child)
+                        }
+                    }
+                }
+                
+                for (const node of nodes) {
+                    mountNode(node)
+                }
+            } else {
+                const resolvedTemplate = resolveSlots(result.template, slots)
+                const { effects } = mountTemplate(
+                    resolvedTemplate,
+                    container,
+                    result,
+                    options.components || {}
+                )
+                instance._effects.push(...effects)
+            }
 
-            instance._effects.push(...effects)
-            for (const hook of instance._mountHooks) hook()
+            for (const hook of instance._mountHooks) 
+                hook()
 
             return instance
         }
@@ -183,17 +214,21 @@ export function defineComponent(options) {
 }
 
 export function provide(key, value) {
-    if (!currentInstance) return
-    currentInstance._provides[key] = value
-}
-
-export function inject(key) {
-    let parent = currentInstance?._parent
-    while (parent) {
-        if (key in parent._provides) return parent._provides[key];
-        parent = parent._parent;
+    if (!currentInstance) return;
+    
+    if (!currentInstance._ownsInjector) {
+        currentInstance._injector = new EnvironmentInjector([], currentInstance._injector);
+        currentInstance._ownsInjector = true;
+        replaceActiveInjector(currentInstance._injector);
+    }
+    
+    if (value === undefined && key && key.provide) {
+        currentInstance._injector.provide(key);
+    } else if (value && typeof value === 'object' && (value.useClass || value.useFactory || value.useExisting)) {
+        currentInstance._injector.provide({ provide: key, ...value });
+    } else {
+        currentInstance._injector.provide({ provide: key, useValue: value });
     }
-    return null;
 }
 
 export function defineAsyncComponent(loaderOrOptions) {
@@ -202,14 +237,17 @@ export function defineAsyncComponent(loaderOrOptions) {
         : loaderOrOptions
 
     return function AsyncComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
+        const parentInjector = (parent && parent._injector) || rootInjector;
+
         const instance = {
             props,
             _mountHooks: [],
             _unmountHooks: [],
             _effects: [],
             _element: null,
-            _provides: {},
             _parent: parent,
+            _injector: parentInjector,
+            _ownsInjector: false
         }
 
         let childApi = null

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

@@ -0,0 +1,187 @@
+export class InjectionToken {
+    constructor(description) {
+        this.description = description;
+    }
+    toString() {
+        return `InjectionToken ${this.description}`;
+    }
+}
+
+export function isClass(fn) {
+    if (typeof fn !== 'function') return false;
+    const str = fn.toString();
+    if (/^\s*class\s+/.test(str)) return true;
+    return fn.prototype !== undefined && 
+           fn.prototype.constructor === fn && 
+           Object.getOwnPropertyNames(fn.prototype).length > 1;
+}
+
+export class Injector {
+    get(token, options = { optional: false }) {
+        throw new Error('Not implemented');
+    }
+}
+
+export class NullInjector extends Injector {
+    get(token, options = { optional: false }) {
+        if (options.optional) {
+            return null;
+        }
+        const tokenName = token?.name || token?.description || token;
+        throw new Error(`NullInjectorError: No provider for ${tokenName}!`);
+    }
+}
+
+const NULL_INJECTOR = new NullInjector();
+
+export class EnvironmentInjector extends Injector {
+    constructor(providers = [], parent = NULL_INJECTOR) {
+        super();
+        this.parent = parent;
+        this.records = new Map(); 
+        this.instances = new Map(); 
+        this.resolutionStack = new Set(); 
+        this._normalizeProviders(providers);
+    }
+
+    _normalizeProviders(providers) {
+        for (const provider of providers) {
+            if (typeof provider === 'function' && isClass(provider)) {
+                this.records.set(provider, { useClass: provider });
+            } else if (provider && provider.provide) {
+                this.records.set(provider.provide, provider);
+            } else {
+                throw new Error(`Invalid provider configuration: ${provider}`);
+            }
+        }
+    }
+
+    provide(provider) {
+        this._normalizeProviders([provider]);
+    }
+
+    // Bubble-up algorithm for resolving hierarchical dependencies
+    get(token, options = { optional: false }) {
+        if (this.instances.has(token)) {
+            return this.instances.get(token);
+        }
+
+        if (this.records.has(token)) {
+            if (this.resolutionStack.has(token)) {
+                const path = [...this.resolutionStack, token]
+                    .map(t => t?.name || t?.description || t)
+                    .join(' -> ');
+                throw new Error(`Circular dependency detected: ${path}`);
+            }
+
+            this.resolutionStack.add(token);
+
+            try {
+                const record = this.records.get(token);
+                const instance = this._instantiate(record);
+                this.instances.set(token, instance);
+                return instance;
+            } finally {
+                this.resolutionStack.delete(token);
+            }
+        }
+
+        if (options.self === true) {
+            if (options.optional === true) {
+                return null;
+            }
+            const tokenName = token?.name || token?.description || token;
+            throw new Error(`NullInjectorError: No provider found for ${tokenName} locally (self: true)`);
+        }
+
+        return this.parent.get(token, options);
+    }
+
+    _instantiate(record) {
+        return runInContext(this, () => {
+            if (record.useValue !== undefined) {
+                return record.useValue;
+            }
+            if (record.useFactory) {
+                return record.useFactory();
+            }
+            if (record.useExisting) {
+                return inject(record.useExisting);
+            }
+            if (record.useClass) {
+                const ClassDef = record.useClass;
+                return new ClassDef();
+            }
+            throw new Error(`Invalid provider record configuration for ${record.provide?.name || record.provide}`);
+        });
+    }
+
+    createChild(providers = []) {
+        return new EnvironmentInjector(providers, this);
+    }
+
+    destroy() {
+        for (const instance of this.instances.values()) {
+            if (instance && typeof instance.destroy === 'function') {
+                try {
+                    instance.destroy();
+                } catch (e) {
+                    console.error('Error during instance destroy:', e);
+                }
+            } else if (instance && typeof instance.onDestroy === 'function') {
+                try {
+                    instance.onDestroy();
+                } catch (e) {
+                    console.error('Error during instance onDestroy:', e);
+                }
+            }
+        }
+        this.instances.clear();
+        this.records.clear();
+    }
+}
+
+let _activeInjector = null;
+
+export function runInContext(injector, fn) {
+    const previousInjector = _activeInjector;
+    _activeInjector = injector;
+    try {
+        return fn();
+    } finally {
+        _activeInjector = previousInjector;
+    }
+}
+
+export function replaceActiveInjector(injector) {
+    _activeInjector = injector;
+}
+
+export function inject(token, options = {}) {
+    if (_activeInjector === null) {
+        throw new Error('inject() called outside of an injection context');
+    }
+
+    const isOptional = options.optional === true;
+    const skipSelf = options.skipSelf === true;
+    const self = options.self === true;
+
+    if (skipSelf && self) {
+        throw new Error('Cannot combine both skipSelf and self InjectOptions');
+    }
+
+    const injectorToUse = skipSelf ? _activeInjector.parent : _activeInjector;
+
+    if (!injectorToUse) {
+        if (isOptional) return null;
+        throw new Error(`NullInjectorError: No provider found for ${token?.name || token}`);
+    }
+
+    return injectorToUse.get(token, options);
+}
+
+export const rootInjector = new EnvironmentInjector();
+
+export function provideGlobal(provider) {
+    rootInjector.provide(provider);
+}

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

@@ -1,8 +1,9 @@
 import { signal, effect, batch } from './signal.js'
 import { evaluateExpression } from './evaluator.js'
 import { compileNode } from './compiler.js'
+import { reconcileArrays } from './reconcile.js'
 import { registerDelegatedEvent, createEventHandler, isDelegatedEvent } from './event-delegation.js'
-import { currentRoute } from '../router/router.js'
+import { currentRoute, navigate } from '../router/router.js'
 
 const customDirectives = new Map()
 
@@ -165,8 +166,7 @@ export function processFor(el, context, components, effects) {
     const templateNode = el.cloneNode(true)
     parent.removeChild(el)
 
-    let cache = new Map()
-    let previousOrder = []
+    let oldRenderedNodes = []
 
     effects.push(effect(() => {
         const rawItems = evaluateExpression(arrayExpr, context)
@@ -180,9 +180,6 @@ export function processFor(el, context, components, effects) {
             items = Object.entries(rawItems).map(([key, value], index) => ({ value, key, rawIndex: index }))
         }
 
-        const nextCache = new Map()
-        const nextOrder = []
-
         const newItemsWithKeys = items.map((item, index) => {
             const itemContext = Object.create(context)
             itemContext[itemName] = item.value
@@ -190,116 +187,54 @@ export function processFor(el, context, components, effects) {
             if (indexName) itemContext[indexName] = index
 
             const key = keyExpr ? evaluateExpression(keyExpr, itemContext) : item.rawIndex
-            return { item, key }
+            return { item, key, index }
         })
 
         const parentNode = anchor.parentNode
-        let currentCursor = anchor.nextSibling
-
-        const isClear = items.length === 0 && previousOrder.length > 0
-        if (isClear) {
-            const nodesToRemove = []
-            let node = anchor.nextSibling
-            while (node) {
-                const next = node.nextSibling
-                nodesToRemove.push(node)
-                node = next
-            }
-            if (nodesToRemove.length > 0) {
-                const fragment = document.createDocumentFragment()
-                nodesToRemove.forEach(n => fragment.appendChild(n))
-            }
-            for (const entry of cache.values()) {
-                for (let i = entry.effects.length - 1; i >= 0; i--) {
-                    const cleanup = entry.effects[i]
-                    if (typeof cleanup === 'function') cleanup()
-                }
-            }
-            cache.clear()
-            previousOrder = []
-            return
-        }
-
-        const fragment = document.createDocumentFragment()
-        const nodesToInsert = []
-
-        newItemsWithKeys.forEach(({ item, key }, index) => {
-            let entry = cache.get(key)
-
-            if (entry) {
-                batch(() => {
-                    if (typeof entry.context[itemName] === 'function' && entry.context[itemName].isSignal) {
-                        entry.context[itemName](item.value)
-                    }
-                    if (keyName && typeof entry.context[keyName] === 'function' && entry.context[keyName].isSignal) {
-                        entry.context[keyName](item.hasOwnProperty('key') ? item.key : item.rawIndex)
-                    }
-                    if (indexName && typeof entry.context[indexName] === 'function' && entry.context[indexName].isSignal) {
-                        entry.context[indexName](index)
-                    }
-                })
 
-                if (entry.node !== currentCursor) {
-                    parentNode.insertBefore(entry.node, currentCursor)
-                } else {
-                    currentCursor = currentCursor.nextSibling
-                }
-                cache.delete(key)
-            } else {
+        oldRenderedNodes = reconcileArrays(
+            parentNode,
+            anchor,
+            oldRenderedNodes,
+            newItemsWithKeys,
+            (obj) => obj.key,
+            (newItem, index) => {
                 const itemContext = Object.create(context)
-                itemContext[itemName] = signal(item.value)
-                if (keyName) itemContext[keyName] = signal(item.hasOwnProperty('key') ? item.key : item.rawIndex)
+                itemContext[itemName] = signal(newItem.item.value)
+                if (keyName) itemContext[keyName] = signal(newItem.item.hasOwnProperty('key') ? newItem.item.key : newItem.item.rawIndex)
                 if (indexName) itemContext[indexName] = signal(index)
 
                 const clone = templateNode.cloneNode(true)
                 const childEffects = []
                 compileNode(clone, itemContext, components, childEffects)
 
-                fragment.appendChild(clone)
-                entry = { node: clone, effects: childEffects, context: itemContext }
-                nodesToInsert.push({ node: clone, effects: childEffects, context: itemContext, key })
+                return { node: clone, effects: childEffects, context: itemContext, key: newItem.key }
+            },
+            (oldNode, newItem, index) => {
+                batch(() => {
+                    if (typeof oldNode.context[itemName] === 'function' && oldNode.context[itemName].isSignal) {
+                        oldNode.context[itemName](newItem.item.value)
+                    }
+                    if (keyName && typeof oldNode.context[keyName] === 'function' && oldNode.context[keyName].isSignal) {
+                        oldNode.context[keyName](newItem.item.hasOwnProperty('key') ? newItem.item.key : newItem.item.rawIndex)
+                    }
+                    if (indexName && typeof oldNode.context[indexName] === 'function' && oldNode.context[indexName].isSignal) {
+                        oldNode.context[indexName](index)
+                    }
+                })
             }
-
-            nextCache.set(key, entry)
-            nextOrder.push(entry.node)
-        })
-
-        if (fragment.childNodes.length > 0) {
-            parentNode.insertBefore(fragment, currentCursor)
-            nodesToInsert.forEach(({ node, effects, context, key }) => {
-                nextCache.set(key, { node, effects, context })
-            })
-        }
-
-        const removedEntries = []
-        for (const [_, entry] of cache.entries()) {
-            removedEntries.push(entry)
-        }
-        if (removedEntries.length > 0) {
-            const removeFragment = document.createDocumentFragment()
-            removedEntries.forEach(entry => {
-                for (let i = entry.effects.length - 1; i >= 0; i--) {
-                    const cleanup = entry.effects[i]
-                    if (typeof cleanup === 'function') cleanup()
-                }
-                if (entry.node.parentNode) {
-                    removeFragment.appendChild(entry.node)
-                }
-            })
-        }
-
-        cache = nextCache
-        previousOrder = nextOrder
+        )
     }))
 
     effects.push(() => {
-        for (const entry of cache.values()) {
+        for (const entry of oldRenderedNodes) {
+            if (!entry) continue
             for (let i = entry.effects.length - 1; i >= 0; i--) {
                 const cleanup = entry.effects[i]
                 if (typeof cleanup === 'function') cleanup()
             }
         }
-        cache.clear()
+        oldRenderedNodes = []
     })
 
     return true
@@ -861,6 +796,8 @@ export function processLinks(el, effects) {
         const href = link.getAttribute('href')
         if (!href) continue
 
+        link.removeAttribute('f-link')
+
         effects.push(effect(() => {
             const currentPath = currentRoute()
             const isActive = currentPath === href || currentPath.startsWith(href + '/')
@@ -871,5 +808,12 @@ export function processLinks(el, effects) {
                 link.classList.remove('active')
             }
         }))
+
+        const clickHandler = (e) => {
+            e.preventDefault()
+            navigate(href)
+        }
+        link.addEventListener('click', clickHandler)
+        effects.push(() => link.removeEventListener('click', clickHandler))
     }
 }

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

@@ -37,7 +37,7 @@ export function evaluateExpression(expr, context, extraContext = {}, unwrapSigna
             ).join('\n')
             let wrappedExpr = expr
             for (const id of keysToUnwrap) {
-                wrappedExpr = wrappedExpr.replace(new RegExp('\\b' + id + '\\b', 'g'), '__' + id)
+                wrappedExpr = wrappedExpr.replace(new RegExp('\\b' + id + '\\b(?!\\(|\\.loading\\b|\\.error\\b|\\.isFetching\\b)', 'g'), '__' + id)
             }
             body = (unwrapStatements ? unwrapStatements + '\n' : '') + `return ${wrappedExpr}`
         }