fusee-framework 0.1.0-alpha.1 → 1.0.1

package/framework/core/directives.js

@@ -0,0 +1,369 @@
+import { effect, batch } from './signal.js'
+import { evaluateExpression } from './evaluator.js'
+import { compileNode } from './compiler.js'
+
+export function processDirectives(root, context, components, effects) {
+    processFor(root, context, components, effects)
+    processIf(root, context, components, effects)
+    processShow(root, context, effects)
+    processModel(root, context, effects)
+    processRefs(root, context)
+    processHtml(root, context, effects)
+    processText(root, context, effects)
+    processEvents(root, context)
+    processCloak(root)
+}
+
+export function processRefs(root, context) {
+    const refEls = root.querySelectorAll('[f-ref]')
+    for (const el of refEls) {
+        if (!el.parentNode) continue
+
+        const refName = el.getAttribute('f-ref')
+        el.removeAttribute('f-ref')
+
+        const refVar = context[refName]
+        if (typeof refVar === 'function' && refVar.isSignal && !refVar.readonly) {
+            refVar(el)
+        } else {
+            const reason = refVar?.readonly ? 'it is read-only (computed)' : 'it is not a signal'
+            console.warn(`[framework] f-ref requires a writable signal. Target "${refName}" is invalid: ${reason}`)
+        }
+    }
+}
+
+export function processModel(root, context, effects) {
+    const modelEls = root.querySelectorAll('[f-model]')
+    for (const el of modelEls) {
+        if (!el.parentNode) continue
+
+        const expr = el.getAttribute('f-model')
+        el.removeAttribute('f-model')
+
+        const signalMethod = context[expr]
+        if (typeof signalMethod === 'function' && signalMethod.isSignal && !signalMethod.readonly) {
+            effects.push(effect(() => {
+                const val = signalMethod()
+                if (el.type === 'checkbox') {
+                    el.checked = !!val
+                } else {
+                    el.value = val ?? ''
+                }
+            }))
+
+            const eventName = (el.tagName === 'SELECT' || el.type === 'checkbox' || el.type === 'radio') ? 'change' : 'input'
+            el.addEventListener(eventName, () => {
+                const newVal = el.type === 'checkbox' ? el.checked : el.value
+                batch(() => signalMethod(newVal))
+            })
+        } else {
+            const reason = signalMethod?.readonly ? 'it is read-only (computed)' : 'it is not a signal'
+            console.warn(`[framework] f-model requires a writable signal. Expression "${expr}" is invalid: ${reason}`)
+        }
+    }
+}
+
+export function processFor(root, context, components, effects) {
+    const forEls = root.querySelectorAll('[f-for]')
+    for (const el of forEls) {
+        if (!el.parentNode) continue
+
+        const expr = el.getAttribute('f-for')
+        el.removeAttribute('f-for')
+
+        const match = expr.match(/^\s*(?:(?:\(\s*([a-zA-Z_$][0-9a-zA-Z_$]*)(?:\s*,\s*([a-zA-Z_$][0-9a-zA-Z_$]*))?(?:\s*,\s*([a-zA-Z_$][0-9a-zA-Z_$]*))?\s*\))|([a-zA-Z_$][0-9a-zA-Z_$]*))\s+in\s+(.+)\s*$/)
+        if (!match) {
+            console.warn(`[framework] Invalid f-for expression: "${expr}"`)
+            continue
+        }
+
+        const itemName = match[4] || match[1]
+        const keyName = match[2]
+        const indexName = match[3]
+        const arrayExpr = match[5]
+
+        const keyExpr = el.getAttribute('data-bind-key') || el.getAttribute(':key')
+        if (keyExpr) {
+            el.removeAttribute('data-bind-key')
+            el.removeAttribute(':key')
+        }
+
+        const anchor = document.createComment('f-for')
+        const parent = el.parentNode
+        parent.insertBefore(anchor, el)
+
+        const templateNode = el.cloneNode(true)
+        parent.removeChild(el)
+
+        // Cache of currently rendered items: Map<key, { node, effects, context }>
+        let cache = new Map()
+        let previousOrder = []
+
+        effects.push(effect(() => {
+            const rawItems = evaluateExpression(arrayExpr, context)
+            let items = []
+
+            if (Array.isArray(rawItems)) {
+                items = rawItems.map((item, index) => ({ value: item, rawIndex: index }))
+            } else if (typeof rawItems === 'number' && !isNaN(rawItems)) {
+                items = Array.from({ length: Math.max(0, Math.floor(rawItems)) }, (_, i) => ({ value: i + 1, rawIndex: i }))
+            } else if (rawItems && typeof rawItems === 'object') {
+                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
+                if (keyName) itemContext[keyName] = item.hasOwnProperty('key') ? item.key : item.rawIndex
+                if (indexName) itemContext[indexName] = index
+
+                const key = keyExpr ? evaluateExpression(keyExpr, itemContext) : item.rawIndex
+                return { item, key, itemContext }
+            })
+
+            const parentNode = anchor.parentNode
+            let currentCursor = anchor.nextSibling
+
+            newItemsWithKeys.forEach(({ item, key, itemContext }, index) => {
+                let entry = cache.get(key)
+
+                if (entry) {
+                    entry.context[itemName] = item.value
+                    if (keyName) entry.context[keyName] = item.hasOwnProperty('key') ? item.key : item.rawIndex
+                    if (indexName) entry.context[indexName] = index
+
+                    if (entry.node !== currentCursor) {
+                        parentNode.insertBefore(entry.node, currentCursor)
+                    } else {
+                        currentCursor = currentCursor.nextSibling
+                    }
+                    cache.delete(key)
+                } else {
+                    // Create new node
+                    const clone = templateNode.cloneNode(true)
+                    const childEffects = []
+                    compileNode(clone, itemContext, components, childEffects)
+
+                    parentNode.insertBefore(clone, currentCursor)
+                    entry = { node: clone, effects: childEffects, context: itemContext }
+                }
+
+                nextCache.set(key, entry)
+                nextOrder.push(entry.node)
+            })
+
+            for (const [key, entry] of cache.entries()) {
+                for (const e of entry.effects) if (typeof e === 'function') e()
+                entry.node.parentNode?.removeChild(entry.node)
+            }
+
+            cache = nextCache
+            previousOrder = nextOrder
+        }))
+    }
+}
+
+export function processIf(root, context, components, effects) {
+    const ifEls = Array.from(root.querySelectorAll('[f-if]'))
+    const processedEls = new Set()
+
+    for (const ifEl of ifEls) {
+        if (processedEls.has(ifEl)) continue
+
+        const parent = ifEl.parentNode
+        if (!parent) continue
+
+        const group = []
+        let curr = ifEl
+
+        while (curr) {
+            if (curr.nodeType === 1) {
+                const type = curr.hasAttribute('f-if') ? 'if' :
+                    curr.hasAttribute('f-elif') ? 'elif' :
+                        curr.hasAttribute('f-else-if') ? 'elif' :
+                            curr.hasAttribute('f-else') ? 'else' : null
+
+                if (type) {
+                    const expr = type === 'else' ? 'true' : curr.getAttribute(`f-${type === 'elif' && curr.hasAttribute('f-else-if') ? 'else-if' : type}`)
+                    group.push({ node: curr, expr, type, isElement: true })
+                    processedEls.add(curr)
+
+                    curr.removeAttribute('f-if')
+                    curr.removeAttribute('f-elif')
+                    curr.removeAttribute('f-else-if')
+                    curr.removeAttribute('f-else')
+
+                    if (type === 'else') break
+                } else {
+                    break
+                }
+            } else if (curr.nodeType === 3 && curr.textContent.trim() === '' || curr.nodeType === 8) {
+                group.push({ node: curr, isElement: false })
+            } else {
+                break
+            }
+            curr = curr.nextSibling
+        }
+
+        const templates = group
+            .filter(item => item.isElement)
+            .map(item => ({
+                template: item.node.cloneNode(true),
+                expr: item.expr,
+                type: item.type
+            }))
+
+        const anchor = document.createComment('f-condition-anchor')
+        parent.insertBefore(anchor, ifEl)
+
+        for (const item of group) item.node.remove()
+
+        let activeIndex = -1
+        let activeNode = null
+        let activeCleanup = []
+
+        effects.push(effect(() => {
+            let nextIndex = -1
+            for (let i = 0; i < templates.length; i++) {
+                const isMatch = templates[i].type === 'else' ? true : evaluateExpression(templates[i].expr, context)
+                if (isMatch) {
+                    nextIndex = i
+                    break
+                }
+            }
+
+            if (nextIndex !== activeIndex) {
+                for (const cleanup of activeCleanup) if (typeof cleanup === 'function') cleanup()
+                activeCleanup = []
+                if (activeNode) {
+                    activeNode.remove()
+                    activeNode = null
+                }
+
+                if (nextIndex !== -1) {
+                    activeNode = templates[nextIndex].template.cloneNode(true)
+                    compileNode(activeNode, context, components, activeCleanup)
+                    anchor.parentNode.insertBefore(activeNode, anchor.nextSibling)
+                }
+                activeIndex = nextIndex
+            }
+        }))
+    }
+}
+
+export function processShow(root, context, effects) {
+    const showEls = root.querySelectorAll('[f-show]')
+    for (const el of showEls) {
+        if (!el.parentNode) continue
+
+        const expr = el.getAttribute('f-show')
+        el.removeAttribute('f-show')
+        const originalDisplay = el.style.display === 'none' ? '' : el.style.display
+
+        effects.push(effect(() => {
+            const val = evaluateExpression(expr, context)
+            el.style.display = val ? originalDisplay : 'none'
+        }))
+    }
+}
+
+export function processHtml(root, context, effects) {
+    const els = root.querySelectorAll('[f-html]')
+    for (const el of els) {
+        if (!el.parentNode) continue
+
+        const expr = el.getAttribute('f-html')
+        el.removeAttribute('f-html')
+
+        const isDev = typeof import.meta.env !== 'undefined' ? !!import.meta.env.DEV : true
+        if (isDev) {
+            console.warn(`[framework] f-html can expose the site to XSS. Use only with trusted content.`)
+        }
+
+        effects.push(effect(() => {
+            const val = evaluateExpression(expr, context)
+            el.innerHTML = String(val ?? '')
+        }))
+    }
+}
+export function processEvents(root, context) {
+    const els = root.querySelectorAll('*')
+    const targets = root.attributes ? [root, ...els] : els
+
+    for (const el of targets) {
+        if (!el.attributes) continue
+
+        for (const attr of [...el.attributes]) {
+            if (attr.name.startsWith('@')) {
+                const fullEventName = attr.name.slice(1)
+                const parts = fullEventName.split('.')
+                const eventName = parts[0]
+                const modifiers = parts.slice(1)
+                const expr = attr.value
+
+                el.removeAttribute(attr.name)
+
+                const handler = (e) => {
+                    if (modifiers.includes('prevent')) e.preventDefault()
+                    if (modifiers.includes('stop')) e.stopPropagation()
+                    if (modifiers.includes('self') && e.target !== el) return
+
+                    // Specific handling for common modifiers like .enter, .escape etc on keyboard events
+                    if (e instanceof KeyboardEvent) {
+                        const key = e.key.toLowerCase()
+                        const keyModifiers = modifiers.filter(m => ['enter', 'escape', 'tab', 'space', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(m))
+                        if (keyModifiers.length > 0) {
+                            const match = keyModifiers.some(m => {
+                                if (m === 'escape') return key === 'escape' || key === 'esc'
+                                if (m === 'space') return key === ' ' || key === 'spacebar'
+                                return key === m
+                            })
+                            if (!match) return
+                        }
+                    }
+
+                    batch(() => {
+                        const potentialFn = context[expr]
+                        if (typeof potentialFn === 'function' && !potentialFn.isSignal) {
+                            potentialFn(e)
+                        } else {
+                            evaluateExpression(expr, context, { $event: e }, false)
+                        }
+                    })
+                }
+
+                const targetNode = modifiers.includes('window') ? window : (modifiers.includes('document') ? document : el)
+                const options = {
+                    once: modifiers.includes('once'),
+                    capture: modifiers.includes('capture') || modifiers.includes('away')
+                }
+
+                targetNode.addEventListener(eventName, handler, options)
+            }
+        }
+    }
+}
+
+export function processText(root, context, effects) {
+    const els = root.querySelectorAll('[f-text]')
+    for (const el of els) {
+        if (!el.parentNode) continue
+        const expr = el.getAttribute('f-text')
+        el.removeAttribute('f-text')
+        effects.push(effect(() => {
+            const val = evaluateExpression(expr, context)
+            el.textContent = String(val ?? '')
+        }))
+    }
+}
+
+export function processCloak(root) {
+    const els = root.querySelectorAll('[f-cloak]')
+    const targets = root.hasAttribute && root.hasAttribute('f-cloak') ? [root, ...els] : els
+    for (const el of targets) {
+        el.removeAttribute('f-cloak')
+    }
+}

package/framework/core/evaluator.js

@@ -0,0 +1,70 @@
+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 identifiers = new Set(expr.match(/[a-zA-Z_$][a-zA-Z0-9_$]*/g) || [])
+
+    // Map global context (only what is used in expression)
+    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)
+        }
+    }
+
+    // Map extra context (like $event)
+    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
+}

package/framework/core/signal.js

@@ -1,52 +1,137 @@
-// ─── Reactivity Engine ───────────────────────────────────────────────────────
-// Solid-style signals: count() to read, count(val) to write.
-// An "effect" is any function that should re-run when signals it reads change.
-
 let currentEffect = null
+let onEffectCreated = null
 
-export function signal(initialValue) {
-  let value = initialValue
-  const subscribers = new Set()
-
-  function accessor(newValue) {
-    if (newValue === undefined) {
-      // READ — track dependency if inside an effect
-      if (currentEffect) {
-        subscribers.add(currentEffect)
-        currentEffect.deps.add(subscribers)
-      }
-      return value
+export function setEffectHook(fn) { onEffectCreated = fn }
+
+let batchDepth = 0
+const pendingEffects = new Set()
+
+export function batch(fn) {
+    batchDepth++
+    try {
+        return fn()
+    } finally {
+        batchDepth--
+        if (batchDepth === 0) {
+            while (pendingEffects.size > 0) {
+                const toRun = [...pendingEffects]
+                pendingEffects.clear()
+                for (const eff of toRun) eff()
+            }
+        }
+    }
+}
+
+function scheduleEffect(effectFn) {
+    if (batchDepth > 0) {
+        pendingEffects.add(effectFn)
     } else {
-      // WRITE — notify subscribers only if value changed
-      if (newValue !== value) {
-        value = newValue
-        for (const sub of [...subscribers]) sub()
-      }
+        effectFn()
     }
-  }
+}
 
-  return accessor
+export function signal(initialValue) {
+    let value = initialValue
+    const subscribers = new Set()
+
+    function accessor() {
+        if (arguments.length === 0) {
+            if (currentEffect) {
+                subscribers.add(currentEffect)
+                currentEffect.deps.add(subscribers)
+            }
+            return value
+        } else {
+            const newValue = arguments[0]
+            if (!Object.is(value, newValue)) {
+                value = newValue
+                for (const sub of [...subscribers]) scheduleEffect(sub)
+            }
+        }
+    }
+
+    accessor.isSignal = true
+    return accessor
 }
 
 export function effect(fn) {
-  const run = () => {
-    // Clean up previous subscriptions before re-running
-    for (const dep of run.deps) dep.delete(run)
-    run.deps.clear()
-
-    currentEffect = run
-    try { fn() }
-    finally { currentEffect = null }
-  }
-
-  run.deps = new Set()
-  run() // run immediately to collect dependencies
-  return run
+    const run = () => {
+        for (const dep of run.deps) dep.delete(run)
+        run.deps.clear()
+
+        currentEffect = run
+        try { fn() }
+        finally { currentEffect = null }
+    }
+
+    run.deps = new Set()
+    const cleanup = () => {
+        for (const dep of run.deps) dep.delete(run)
+        run.deps.clear()
+    }
+
+    if (onEffectCreated) onEffectCreated(cleanup)
+    run()
+
+    return cleanup
 }
 
 export function computed(fn) {
-  // A computed is a read-only signal derived from other signals
-  const result = signal(undefined)
-  effect(() => result(fn()))
-  return result
+    let value
+    let dirty = true
+    const subscribers = new Set()
+
+    const computedNode = () => {
+        if (!dirty) {
+            dirty = true
+            for (const sub of [...subscribers]) scheduleEffect(sub)
+        }
+    }
+
+    computedNode.deps = new Set()
+
+    function accessor() {
+        if (arguments.length === 0) {
+            if (currentEffect) {
+                subscribers.add(currentEffect)
+                currentEffect.deps.add(subscribers)
+            }
+            if (dirty) {
+                for (const dep of computedNode.deps) dep.delete(computedNode)
+                computedNode.deps.clear()
+
+                const prevEffect = currentEffect
+                currentEffect = computedNode
+                try {
+                    const newValue = fn()
+                    if (newValue !== value) value = newValue
+                } finally {
+                    currentEffect = prevEffect
+                    dirty = false
+                }
+            }
+            return value
+        }
+        console.warn('[framework] computed() is read-only')
+    }
+
+    accessor.dispose = () => {
+        for (const dep of computedNode.deps) dep.delete(computedNode)
+        computedNode.deps.clear()
+        subscribers.clear()
+    }
+
+    accessor.isSignal = true
+    accessor.readonly = true
+    return accessor
+}
+
+export function untrack(fn) {
+    const prevEffect = currentEffect
+    currentEffect = null
+    try {
+        return fn()
+    } finally {
+        currentEffect = prevEffect
+    }
 }

package/framework/index.d.ts

@@ -0,0 +1,3 @@
+// ─── Fusée Framework Main Types ──────────────────────────────────────────────
+
+export * from './types/index'

package/framework/index.js

@@ -1,4 +1,4 @@
 // ─── Framework Public API ─────────────────────────────────────────────────────
-export { signal, computed, effect } from './core/signal.js'
+export { signal, computed, effect, batch, untrack } from './core/signal.js'
 export { defineComponent, onMount, onUnmount } from './core/component.js'
 export { createRouter, navigate, mountOutlet } from './router/router.js'