fusee-framework 1.7.0 → 1.9.0

package/framework/core/h.js

@@ -0,0 +1,430 @@
+import { effect, batch, signal } from '../core/signal.js'
+import { createEventHandler, registerDelegatedEvent, isDelegatedEvent } from '../core/event-delegation.js'
+
+export { effect as _effect, batch as _batch }
+
+function isGetter(v) {
+    return typeof v === 'function' && !v.isSignal
+}
+
+const SENSITIVE_ATTRS  = new Set(['href', 'src', 'srcset', 'formaction', 'xlink:href', 'data'])
+const DANGEROUS_SCHEME = /^(javascript|data|vbscript|file):/i
+
+function sanitize(name, value) {
+    if (SENSITIVE_ATTRS.has(name.toLowerCase())) {
+        const trimmed = String(value).trim()
+        if (DANGEROUS_SCHEME.test(trimmed)) {
+            console.warn(`[fusée] Blocked potential XSS on "${name}": "${value}"`)
+            return 'about:blank'
+        }
+    }
+    return value
+}
+
+export function h(tag, props = {}, children = [], isStatic = false) {
+    const el = document.createElement(tag)
+    const effects = []
+
+    if (!isStatic) {
+        _applyProps(el, props, effects)
+    } else {
+        _applyStaticProps(el, props)
+    }
+
+    const childNodes = _mountChildren(el, children, effects)
+
+    return {
+        node: el,
+        effects,
+        props,
+        children: childNodes,
+        _tag: tag,
+    }
+}
+
+export function hText(value) {
+    const node = document.createTextNode('')
+    const effects = []
+
+    if (typeof value === 'function') {
+        const cleanup = effect(() => {
+            node.textContent = String(value() ?? '')
+        })
+        effects.push(cleanup)
+    } else {
+        node.textContent = String(value ?? '')
+    }
+
+    return { node, effects }
+}
+
+export function hIf(branches) {
+    const anchor  = document.createComment('f-if')
+    const effects = []
+
+    let currentNodes  = []
+    let currentBranch = -1
+
+    const cleanup = effect(() => {
+        let matchIdx = -1
+        for (let i = 0; i < branches.length; i++) {
+            const [cond] = branches[i]
+            if (cond === null || cond()) { matchIdx = i; break }
+        }
+
+        if (matchIdx === currentBranch) return
+
+        _unmountNodes(currentNodes)
+        currentNodes  = []
+        currentBranch = matchIdx
+
+        if (matchIdx === -1) return
+
+        const [, getChildren] = branches[matchIdx]
+        const children = getChildren()
+        const parent   = anchor.parentNode
+
+        if (parent) {
+            for (const fnode of children) {
+                parent.insertBefore(fnode.node, anchor)
+                currentNodes.push(fnode)
+            }
+        }
+    })
+
+    effects.push(cleanup)
+
+    return {
+        node: anchor,
+        effects,
+        _ifBranchNodes: () => currentNodes,
+        _isIf: true,
+    }
+}
+
+export function hFor(sourceGetter, renderItem, keyFn) {
+    const anchor  = document.createComment('f-for')
+    const effects = []
+
+    let keyedMap = new Map()
+    const keyEvaluatorSignal = signal(null)
+
+    const cleanup = effect(() => {
+        const list = sourceGetter() ?? []
+        const parent = anchor.parentNode
+
+        if (!parent) {
+            return
+        }
+
+        const newMap = new Map()
+        const newKeys = []
+
+        for (let i = 0; i < list.length; i++) {
+            const item = list[i]
+            
+            keyEvaluatorSignal(item)
+            const key = keyFn(keyEvaluatorSignal, i)
+            newKeys.push(key)
+
+            const exists = keyedMap.get(key)
+            if (exists) {
+                if (exists.itemSignal() !== item) {
+                    exists.itemSignal(item)
+                }
+                newMap.set(key, exists)
+            } else {
+                const itemSignal = signal(item)
+                const fnode = renderItem(itemSignal, i)
+                newMap.set(key, { fnode, key, itemSignal })
+            }
+        }
+
+        for (const [key, entry] of keyedMap) {
+            if (!newMap.has(key)) {
+                _unmountNodes([entry.fnode])
+            }
+        }
+
+        for (let i = newKeys.length - 1; i >= 0; i--) {
+            const key = newKeys[i]
+            const entry = newMap.get(key)
+            const ref = i === newKeys.length - 1 ? anchor : newMap.get(newKeys[i + 1])?.fnode?.node
+
+            if (ref && entry.fnode.node.nextSibling !== ref) {
+                parent.insertBefore(entry.fnode.node, ref ?? anchor)
+            } else if (!entry.fnode.node.parentNode) {
+                parent.insertBefore(entry.fnode.node, anchor)
+            }
+        }
+
+        keyedMap = newMap
+    })
+
+    effects.push(cleanup)
+
+    return {
+        node: anchor,
+        effects,
+        _isFor: true,
+        _getNodes: () => [...keyedMap.values()].map(e => e.fnode),
+    }
+}
+
+export function hSlot(slots, name, fallback = []) {
+    const anchor = document.createComment(`slot:${name}`)
+    const effects = []
+    const slotFn = slots?.[name]
+    const nodes = typeof slotFn === 'function' ? slotFn() : fallback
+    return {
+        node: anchor,
+        effects,
+        _slotNodes: nodes,
+        _isSlot: true,
+    }
+}
+
+export function createComponent(name, ComponentFn, rawProps = {}, rawSlots = {}) {
+    if (!ComponentFn) {
+        console.warn(`[fusée] Component "${name}" is not registered`)
+        const placeholder = document.createComment(`missing:${name}`)
+        return { node: placeholder, effects: [] }
+    }
+
+    const resolvedProps = _resolveComponentProps(rawProps)
+    const listeners = {}
+    const slots = {}
+
+    for (const [key, value] of Object.entries(rawProps)) {
+        if (key.startsWith('on:')) {
+            listeners[key.slice(3)] = value
+        }
+    }
+
+    for (const [slotName, slotFn] of Object.entries(rawSlots)) {
+        slots[slotName] = slotFn
+    }
+
+    const container = document.createElement('div')
+    container.setAttribute('data-fusee-component', name)
+
+    const api = ComponentFn(resolvedProps, { listeners, slots })
+    api.render(container)
+    const root = container.firstElementChild ?? container
+
+    const effects = []
+    effects.push(() => api.unmount())
+
+    return { node: root, effects, _component: api }
+}
+
+function _applyProps(el, props, effects) {
+    for (const [key, value] of Object.entries(props)) {
+        if (key.startsWith('@')) {
+            const eventName = key.slice(1)
+            const { handler, modifiers = [] } = value
+            const handlerState = { timeoutId: null, throttleTimeoutId: null, lastRun: 0 }
+            const wrappedHandler = createEventHandler(handler, modifiers, null, null, handlerState)
+
+            let cleanup
+            if (isDelegatedEvent(eventName)) {
+                cleanup = registerDelegatedEvent(el, eventName, wrappedHandler, { modifiers, handlerState })
+            } else {
+                el.addEventListener(eventName, wrappedHandler)
+                cleanup = () => el.removeEventListener(eventName, wrappedHandler)
+            }
+            effects.push(cleanup)
+            continue
+        }
+
+        if (key === 'f-show') {
+            const cleanup = effect(() => {
+                el.style.display = value() ? '' : 'none'
+            })
+            effects.push(cleanup)
+            continue
+        }
+
+        if (key === 'f-html') {
+            const cleanup = effect(() => {
+                el.innerHTML = String(value() ?? '')
+            })
+            effects.push(cleanup)
+            continue
+        }
+
+        if (key === 'f-model') {
+            const sig = value()
+            const cleanup = effect(() => {
+                const v = typeof sig === 'function' ? sig() : sig
+                if (el.value !== String(v ?? '')) el.value = String(v ?? '')
+            })
+            effects.push(cleanup)
+            continue
+        }
+
+        if (key === 'f-ref') {
+            el.dispatchEvent(new CustomEvent('fusee:ref', {
+                detail: { name: value },
+                bubbles: true,
+            }))
+            continue
+        }
+
+        if (key === 'f-once') continue
+
+        if (typeof value !== 'function') {
+            _applyAttr(el, key, value)
+            continue
+        }
+
+        const attrName = key
+        const getter = value
+        const cleanup = effect(() => {
+            _applyAttr(el, attrName, getter())
+        })
+        effects.push(cleanup)
+    }
+}
+
+function _applyStaticProps(el, props) {
+    for (const [key, value] of Object.entries(props)) {
+        if (key.startsWith('@') || key.startsWith('f-')) 
+            continue
+        if (typeof value !== 'function') 
+            _applyAttr(el, key, value)
+    }
+}
+
+function _applyAttr(el, name, value) {
+    if (name === 'class') {
+        const cls = _resolveClass(value)
+        if (cls) el.className = cls
+        else el.removeAttribute('class')
+        return
+    }
+
+    if (name === 'style') {
+        if (value !== null && typeof value === 'object') {
+            for (const k in value) el.style[k] = value[k]
+        } else {
+            el.style.cssText = String(value ?? '')
+        }
+        return
+    }
+
+    if (name in el && typeof el[name] !== 'undefined' && name !== 'type') {
+        try {
+            el[name] = value
+            return
+        } catch (_) {
+            return
+        }
+    }
+
+    if (typeof value === 'boolean') {
+        value ? el.setAttribute(name, '') : el.removeAttribute(name)
+        return
+    }
+
+    if (value == null) {
+        el.removeAttribute(name)
+        return
+    }
+
+    el.setAttribute(name, sanitize(name, String(value)))
+}
+
+function _resolveClass(value) {
+    if (typeof value === 'string') 
+        return value
+    if (Array.isArray(value)) 
+        return value.filter(Boolean).join(' ')
+    if (value && typeof value === 'object') 
+        return Object.entries(value).filter(([, v]) => !!v).map(([k]) => k).join(' ')
+    return String(value ?? '')
+}
+
+function _mountChildren(parent, children, parentEffects) {
+    const mounted = []
+
+    for (const fnode of children) {
+        if (!fnode || !fnode.node) continue
+
+        parent.appendChild(fnode.node)
+
+        if (fnode._isSlot && fnode._slotNodes) {
+            for (const sn of fnode._slotNodes) {
+                if (sn?.node) parent.insertBefore(sn.node, null)
+            }
+        }
+
+        if (fnode.effects) parentEffects.push(...fnode.effects)
+        mounted.push(fnode)
+    }
+
+    return mounted
+}
+
+function _unmountNodes(fnodes) {
+    for (const fnode of fnodes) {
+        if (!fnode) continue
+
+        if (fnode.effects) {
+            for (let i = fnode.effects.length - 1; i >= 0; i--) {
+                const cleanup = fnode.effects[i]
+                if (typeof cleanup === 'function') cleanup()
+            }
+        }
+
+        if (fnode.node?.parentNode) {
+            fnode.node.parentNode.removeChild(fnode.node)
+        }
+
+        if (fnode._ifBranchNodes) {
+            _unmountNodes(fnode._ifBranchNodes())
+        }
+
+        if (fnode._getNodes) {
+            _unmountNodes(fnode._getNodes())
+        }
+    }
+}
+
+function _resolveComponentProps(rawProps) {
+    const resolved = {}
+
+    for (const [key, value] of Object.entries(rawProps)) {
+        if (key.startsWith('on:')) continue
+
+        if (isGetter(value)) {
+            Object.defineProperty(resolved, key, {
+                get: value,
+                enumerable: true,
+                configurable: true,
+            })
+        } else {
+            resolved[key] = value
+        }
+    }
+
+    return resolved
+}
+
+export function mount(renderFn, ctx, components, container) {
+    const fnodes  = renderFn(ctx, components)
+    const effects = []
+
+    for (const fnode of fnodes) {
+        if (!fnode?.node) continue
+        container.appendChild(fnode.node)
+        if (fnode.effects) effects.push(...fnode.effects)
+    }
+
+    return {
+        unmount() {
+            _unmountNodes(fnodes)
+            container.innerHTML = ''
+        }
+    }
+}

package/framework/core/hydration.js

@@ -0,0 +1,83 @@
+const _hydrationRegistry = new Map()
+const _registeredCaches = []
+
+export function _registerResourceCache(resourceKey, cache) {
+    _registeredCaches.push({ resourceKey, cache })
+}
+
+export function extractHydrationData() {
+    const snapshot = {}
+
+    for (const { resourceKey, cache } of _registeredCaches) {
+        const entries = {}
+        for (const [cacheKey, entry] of cache) {
+            entries[cacheKey] = { data: entry.data, updatedAt: entry.updatedAt }
+        }
+        if (Object.keys(entries).length > 0) {
+            snapshot[resourceKey] = entries
+        }
+    }
+
+    return snapshot
+}
+
+export function dehydrate(snapshot = extractHydrationData()) {
+    try {
+        const json = JSON.stringify(snapshot)
+        return json.replace(/<\/script>/gi, '<\\/script>')
+    } catch (err) {
+        console.error('[fusée] dehydrate() failed to serialize hydration data:', err)
+        return '{}'
+    }
+}
+
+export function loadHydration(snapshot) {
+    if (!snapshot || typeof snapshot !== 'object') {
+        console.warn('[fusée] loadHydration() received invalid snapshot')
+        return
+    }
+
+    for (const [resourceKey, entries] of Object.entries(snapshot)) {
+        if (!_hydrationRegistry.has(resourceKey)) {
+            _hydrationRegistry.set(resourceKey, new Map())
+        }
+        const map = _hydrationRegistry.get(resourceKey)
+        for (const [cacheKey, entry] of Object.entries(entries)) {
+            map.set(cacheKey, { data: entry.data, updatedAt: entry.updatedAt })
+        }
+    }
+}
+
+export function hydrateFromWindow() {
+    if (typeof window === 'undefined') return
+    const raw = window.__FUSEE_HYDRATION__
+    if (raw) loadHydration(raw)
+}
+
+export function getHydratedEntries(resourceKey) {
+    return _hydrationRegistry.get(resourceKey) ?? null
+}
+
+export function isHydrationFresh(resourceKey, cacheKey, staleTime = 0) {
+    const entries = _hydrationRegistry.get(resourceKey)
+    if (!entries) return false
+    const entry = entries.get(cacheKey)
+    if (!entry) return false
+    return (Date.now() - entry.updatedAt) <= staleTime
+}
+
+export function clearHydration() {
+    _hydrationRegistry.clear()
+    _registeredCaches.length = 0
+}
+
+export function getHydrationSnapshot() {
+    const out = {}
+    for (const [resourceKey, map] of _hydrationRegistry) {
+        out[resourceKey] = {}
+        for (const [cacheKey, entry] of map) {
+            out[resourceKey][cacheKey] = { ...entry }
+        }
+    }
+    return out
+}

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