fusee-framework 1.7.0 → 1.8.0

package/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/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/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(?![\\.\\(])', 'g'), '__' + id)
             }
             body = (unwrapStatements ? unwrapStatements + '\n' : '') + `return ${wrappedExpr}`
         }

package/framework/core/reconcile.js

@@ -0,0 +1,151 @@
+export function reconcileArrays(parentNode, anchor, oldList, newList, keyFn, createFn, updateFn) {
+    let oldEnd = oldList.length - 1;
+    let newEnd = newList.length - 1;
+    let oldStart = 0;
+    let newStart = 0;
+
+    let oldStartNode = oldList[oldStart];
+    let oldEndNode = oldList[oldEnd];
+    let newStartItem = newList[newStart];
+    let newEndItem = newList[newEnd];
+
+    const nextOrder = new Array(newList.length);
+
+    while (oldStart <= oldEnd && newStart <= newEnd) {
+        if (oldStartNode === null) {
+            oldStartNode = oldList[++oldStart];
+        } else if (oldEndNode === null) {
+            oldEndNode = oldList[--oldEnd];
+        } else if (keyFn(oldStartNode) === keyFn(newStartItem)) {
+            updateFn(oldStartNode, newStartItem, newStart);
+            nextOrder[newStart] = oldStartNode;
+            oldStartNode = oldList[++oldStart];
+            newStartItem = newList[++newStart];
+        } else if (keyFn(oldEndNode) === keyFn(newEndItem)) {
+            updateFn(oldEndNode, newEndItem, newEnd);
+            nextOrder[newEnd] = oldEndNode;
+            oldEndNode = oldList[--oldEnd];
+            newEndItem = newList[--newEnd];
+        } else if (keyFn(oldStartNode) === keyFn(newEndItem)) {
+            updateFn(oldStartNode, newEndItem, newEnd);
+            const nextSibling = oldEndNode.node.nextSibling;
+            parentNode.insertBefore(oldStartNode.node, nextSibling === anchor ? anchor : nextSibling);
+            nextOrder[newEnd] = oldStartNode;
+            oldStartNode = oldList[++oldStart];
+            newEndItem = newList[--newEnd];
+        } else if (keyFn(oldEndNode) === keyFn(newStartItem)) {
+            updateFn(oldEndNode, newStartItem, newStart);
+            parentNode.insertBefore(oldEndNode.node, oldStartNode.node);
+            nextOrder[newStart] = oldEndNode;
+            oldEndNode = oldList[--oldEnd];
+            newStartItem = newList[++newStart];
+        } else {
+            break;
+        }
+    }
+
+    if (oldStart > oldEnd) {
+        for (; newStart <= newEnd; ++newStart) {
+            const nextPos = newStart + 1;
+            const refNode = nextPos < newList.length && nextOrder[nextPos] ? nextOrder[nextPos].node : (oldStart < oldList.length && oldList[oldStart] ? oldList[oldStart].node : anchor);
+            const newNode = createFn(newList[newStart], newStart);
+            parentNode.insertBefore(newNode.node, refNode);
+            nextOrder[newStart] = newNode;
+        }
+    } else if (newStart > newEnd) {
+        for (; oldStart <= oldEnd; ++oldStart) {
+            if (oldList[oldStart]) {
+                const node = oldList[oldStart];
+                node.node.remove();
+                if (node.effects) {
+                    node.effects.forEach(cleanup => typeof cleanup === 'function' && cleanup());
+                }
+            }
+        }
+    } else {
+        const keyToIndex = new Map();
+        for (let i = newStart; i <= newEnd; ++i) {
+            keyToIndex.set(keyFn(newList[i]), i);
+        }
+
+        let nodesToMove = 0;
+        let lastIndex = 0;
+        const newIndexToOldIndexMap = new Array(newEnd - newStart + 1).fill(0);
+
+        for (let i = oldStart; i <= oldEnd; ++i) {
+            const oldNode = oldList[i];
+            if (!oldNode) continue;
+
+            const newIndex = keyToIndex.get(keyFn(oldNode));
+            if (newIndex === undefined) {
+                oldNode.node.remove();
+                if (oldNode.effects) {
+                    oldNode.effects.forEach(cleanup => typeof cleanup === 'function' && cleanup());
+                }
+            } else {
+                updateFn(oldNode, newList[newIndex], newIndex);
+                newIndexToOldIndexMap[newIndex - newStart] = i + 1;
+                if (newIndex >= lastIndex) {
+                    lastIndex = newIndex;
+                } else {
+                    nodesToMove++;
+                }
+                nextOrder[newIndex] = oldNode;
+            }
+        }
+
+        for (let i = newEnd - newStart; i >= 0; i--) {
+            const newIndex = i + newStart;
+            const nextPos = newIndex + 1;
+            const refNode = nextPos < nextOrder.length && nextOrder[nextPos] ? nextOrder[nextPos].node : anchor;
+
+            if (newIndexToOldIndexMap[i] === 0) {
+                const newNode = createFn(newList[newIndex], newIndex);
+                parentNode.insertBefore(newNode.node, refNode);
+                nextOrder[newIndex] = newNode;
+            } else if (nodesToMove > 0) {
+                let currentPosIndex = i;
+                const oldNode = nextOrder[newIndex];
+                if (oldNode.node.nextSibling !== refNode) {
+                    parentNode.insertBefore(oldNode.node, refNode);
+                }
+            }
+        }
+    }
+
+    return nextOrder;
+}
+
+export function reconcile(container, oldList, newList, keyFn, createFn) {
+    if (!container._renderedNodes) {
+        container._renderedNodes = [];
+    }
+
+    const mappedOldList = container._renderedNodes;
+    const mappedNewList = newList.map((item, index) => ({
+        item: item,
+        key: keyFn(item),
+        rawIndex: index
+    }));
+
+    const nextOrder = reconcileArrays(
+        container,
+        null,
+        mappedOldList,
+        mappedNewList,
+        (x) => x.key,
+        (newItem) => {
+            const domNode = createFn(newItem.item);
+            return {
+                node: domNode,
+                item: newItem.item,
+                key: newItem.key
+            };
+        },
+        (oldNode, newItem) => {
+            oldNode.item = newItem.item;
+        }
+    );
+
+    container._renderedNodes = nextOrder;
+}