fusee-framework 1.6.0 → 1.8.0

package/framework/core/evaluator.js

@@ -1,70 +1,153 @@
-export const MUSTACHE_RE = /\{\{\s*(.+?)\s*\}\}/
-
-const SENSITIVE_ATTRS = ['href', 'src', 'srcset', 'formaction', 'xlink:href', 'data']
-const DANGEROUS_SCHEMES = /^(javascript|data|vbscript|file):/i
-
-export function evaluateExpression(expr, context, extraContext = {}, unwrapSignals = true) {
-    const keys = []
-    const values = []
-    
-    const exprWithoutStrings = expr.replace(/'[^']*'|"[^"]*"/g, ' ')
-    const identifiers = new Set(exprWithoutStrings.match(/[a-zA-Z_$][a-zA-Z0-9_$]*/g) || [])
-
-    for (const k in context) {
-        if (identifiers.has(k)) {
-            keys.push(k)
-            const val = context[k]
-            values.push(unwrapSignals && typeof val === 'function' && val.isSignal ? val() : val)
-        }
-    }
-
-    for (const k in extraContext) {
-        if (!keys.includes(k)) {
-            keys.push(k)
-            values.push(extraContext[k])
-        }
-    }
-
-    try {
-        const isMultiStatement = expr.includes(';') || expr.includes('console.')
-        const body = isMultiStatement ? expr : `return ${expr}`
-        const fn = new Function(...keys, body)
-        return fn(...values)
-    } catch (e) {
-        console.warn(`[framework] Error evaluating "${expr}":`, e)
-        return ''
-    }
-}
-
-export function parseInterpolation(str) {
-    const parts = []
-    const regex = /\{\{\s*(.+?)\s*\}\}/g
-    let lastIndex = 0
-    let match
-
-    while ((match = regex.exec(str)) !== null) {
-        if (match.index > lastIndex) {
-            parts.push({ type: 'static', value: str.slice(lastIndex, match.index) })
-        }
-        parts.push({ type: 'dynamic', key: match[1] })
-        lastIndex = regex.lastIndex
-    }
-
-    if (lastIndex < str.length) {
-        parts.push({ type: 'static', value: str.slice(lastIndex) })
-    }
-
-    return parts
-}
-
-export function sanitizeAttr(name, value) {
-    const attrName = name.toLowerCase()
-    if (SENSITIVE_ATTRS.includes(attrName)) {
-        const trimmed = value.trim()
-        if (DANGEROUS_SCHEMES.test(trimmed)) {
-            console.warn(`[framework] Blocked potential XSS on ${name}: "${value}"`)
-            return 'about:blank'
-        }
-    }
-    return value
-}
+export const MUSTACHE_RE = /\{\{\s*(.+?)\s*\}\}/
+
+const SENSITIVE_ATTRS = ['href', 'src', 'srcset', 'formaction', 'xlink:href', 'data']
+const DANGEROUS_SCHEMES = /^(javascript|data|vbscript|file):/i
+
+export function evaluateExpression(expr, context, extraContext = {}, unwrapSignals = true) {
+    const keys = []
+    const values = []
+
+    const exprWithoutStrings = expr.replace(/'[^']*'|"[^"]*"/g, ' ')
+    const identifiers = new Set(exprWithoutStrings.match(/[a-zA-Z_$][a-zA-Z0-9_$]*/g) || [])
+
+    for (const k in context) {
+        if (identifiers.has(k)) {
+            keys.push(k)
+            const val = context[k]
+            values.push(val)
+        }
+    }
+
+    for (const k in extraContext) {
+        if (!keys.includes(k)) {
+            keys.push(k)
+            values.push(extraContext[k])
+        }
+    }
+
+    try {
+        const isMultiStatement = expr.includes(';') || expr.includes('console.')
+        let body
+        if (isMultiStatement) {
+            body = expr
+        } else {
+            const keysToUnwrap = unwrapSignals ? keys : []
+            const unwrapStatements = keysToUnwrap.map(id =>
+                `const __${id} = typeof ${id} === 'function' && ${id}.isSignal ? ${id}() : ${id};`
+            ).join('\n')
+            let wrappedExpr = expr
+            for (const id of keysToUnwrap) {
+                wrappedExpr = wrappedExpr.replace(new RegExp('\\b' + id + '\\b(?![\\.\\(])', 'g'), '__' + id)
+            }
+            body = (unwrapStatements ? unwrapStatements + '\n' : '') + `return ${wrappedExpr}`
+        }
+        const fn = new Function(...keys, body)
+        return fn(...values)
+    } catch (e) {
+        console.warn(`[framework] Error evaluating "${expr}":`, e)
+        return ''
+    }
+}
+
+export function parseInterpolation(str) {
+    const parts = []
+    let i = 0
+    let lastIndex = 0
+
+    while (i < str.length) {
+        if (str[i] === '{' && str[i+1] === '{') {
+            if (i > 0 && str[i-1] === '\\') {
+                if (i - 1 > lastIndex) {
+                    parts.push({ type: 'static', value: str.slice(lastIndex, i - 1) })
+                }
+                parts.push({ type: 'static', value: '{{' })
+                i += 2
+                lastIndex = i
+                continue
+            }
+
+            if (i > lastIndex) {
+                parts.push({ type: 'static', value: str.slice(lastIndex, i) })
+            }
+
+            let start = i + 2
+            let j = start
+            let braceLevel = 0
+            let inString = false
+            let stringChar = null
+
+            while (j < str.length) {
+                const char = str[j]
+                
+                if (inString) {
+                    if (char === '\\') {
+                        j += 2
+                        continue
+                    }
+                    if (char === stringChar) {
+                        inString = false
+                    }
+                    j++
+                    continue
+                }
+
+                if (char === "'" || char === '"' || char === '`') {
+                    inString = true
+                    stringChar = char
+                    j++
+                    continue
+                }
+
+                if (char === '{') {
+                    braceLevel++
+                    j++
+                    continue
+                }
+
+                if (char === '}') {
+                    if (braceLevel > 0) {
+                        braceLevel--
+                        j++
+                        continue
+                    } else if (j + 1 < str.length && str[j+1] === '}') {
+                        const key = str.slice(start, j).trim()
+                        parts.push({ type: 'dynamic', key })
+                        i = j + 2
+                        lastIndex = i
+                        break
+                    }
+                }
+
+                j++
+            }
+
+            if (j >= str.length) {
+                parts.push({ type: 'static', value: '{{' })
+                i += 2
+                lastIndex = i
+                continue
+            }
+
+        } else {
+            i++
+        }
+    }
+
+    if (lastIndex < str.length) {
+        parts.push({ type: 'static', value: str.slice(lastIndex) })
+    }
+
+    return parts
+}
+
+export function sanitizeAttr(name, value) {
+    const attrName = name.toLowerCase()
+    if (SENSITIVE_ATTRS.includes(attrName)) {
+        const trimmed = value.trim()
+        if (DANGEROUS_SCHEMES.test(trimmed)) {
+            console.warn(`[framework] Blocked potential XSS on ${name}: "${value}"`)
+            return 'about:blank'
+        }
+    }
+    return value
+}

package/framework/core/event-delegation.js

@@ -58,7 +58,7 @@ function ensureDocumentListener(eventType) {
 }
 
 export function registerDelegatedEvent(element, eventType, handler, options = {}) {
-    const { modifiers = [], context, expr } = options
+    const { modifiers = [], context, expr, handlerState } = options
     const normalizedEvent = eventType.toLowerCase()
 
     ensureDocumentListener(normalizedEvent)
@@ -72,12 +72,23 @@ export function registerDelegatedEvent(element, eventType, handler, options = {}
         modifiers,
         context,
         expr,
-        cleanup: null
+        cleanup: null,
+        handlerState: handlerState || { timeoutId: null, throttleTimeoutId: null, lastRun: 0 }
     }
 
     delegatedListeners.get(normalizedEvent).add(entry)
 
     return function cleanup() {
+        const state = entry.handlerState
+        if (state.timeoutId) {
+            clearTimeout(state.timeoutId)
+            state.timeoutId = null
+        }
+        if (state.throttleTimeoutId) {
+            clearTimeout(state.throttleTimeoutId)
+            state.throttleTimeoutId = null
+        }
+
         const listeners = delegatedListeners.get(normalizedEvent)
         if (listeners) {
             listeners.delete(entry)
@@ -93,10 +104,10 @@ export function registerDelegatedEvent(element, eventType, handler, options = {}
     }
 }
 
-export function createEventHandler(handler, modifiers, context, expr) {
-    let timeoutId
-    let lastRun = 0
-    let throttleTimeoutId
+export function createEventHandler(handler, modifiers, context, expr, state = null) {
+    const timeoutId = { value: null }
+    const throttleTimeoutId = { value: null }
+    const lastRun = { value: 0 }
 
     let debounceMs = 0
     let throttleMs = 0
@@ -146,25 +157,33 @@ export function createEventHandler(handler, modifiers, context, expr) {
 
         if (throttleMs > 0) {
             const now = Date.now()
-            const remaining = throttleMs - (now - lastRun)
+            const remaining = throttleMs - (now - lastRun.value)
 
             if (remaining <= 0) {
-                clearTimeout(throttleTimeoutId)
-                lastRun = now
+                if (state && state.throttleTimeoutId) clearTimeout(state.throttleTimeoutId)
+                else clearTimeout(throttleTimeoutId.value)
+                lastRun.value = now
                 executeLogic(e)
             } else {
-                clearTimeout(throttleTimeoutId)
-                throttleTimeoutId = setTimeout(() => {
-                    lastRun = Date.now()
+                if (state && state.throttleTimeoutId) clearTimeout(state.throttleTimeoutId)
+                else clearTimeout(throttleTimeoutId.value)
+                const newTimeoutId = setTimeout(() => {
+                    lastRun.value = Date.now()
                     executeLogic(e)
                 }, remaining)
+                if (state) state.throttleTimeoutId = newTimeoutId
+                else throttleTimeoutId.value = newTimeoutId
             }
+            if (state) state.lastRun = lastRun.value
             return
         }
 
         if (debounceMs > 0) {
-            clearTimeout(timeoutId)
-            timeoutId = setTimeout(() => executeLogic(e), debounceMs)
+            if (state && state.timeoutId) clearTimeout(state.timeoutId)
+            else clearTimeout(timeoutId.value)
+            const newTimeoutId = setTimeout(() => executeLogic(e), debounceMs)
+            if (state) state.timeoutId = newTimeoutId
+            else timeoutId.value = newTimeoutId
         } else {
             executeLogic(e)
         }

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;
+}