fusee-framework 1.0.0 → 1.0.1

package/README.md

@@ -1,7 +1,7 @@
 # Fusée Framework 🚀
-**v1.0.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.0.1 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
 
-Fusée is a custom, high-performance reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, and a comprehensive CLI for instant application scaffolding.
+Fusée is a custom, high-performance fine-grained reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, and a comprehensive CLI for instant application scaffolding.
 
 ---
 
@@ -10,8 +10,8 @@ Fusée is a custom, high-performance reactive JavaScript framework built for spe
 The fastest way to get started with Fusée is via the CLI:
 
 ```bash
-# 1. Install globally (linking the engine)
-npm link
+# 1. Install Fusée globally
+npm install -g fusee-framework
 
 # 2. Scaffold your first project
 create-fusee-app .
@@ -70,7 +70,6 @@ export const Counter = defineComponent({
 ## 🚀 Future Roadmap
 
 - [ ] Global Store Management
-- [ ] Keyed `f-for` for list reconciliation
-- [ ] Advanced router transitions support
+- [ ] Advanced file-based routing support
 
-Built with ❤️ by a forward-thinking JavaScript Architect. 🏎️🔥🏆🥇_
+Built with ❤️ by me, Sebi Somu, a forward-thinking JavaScript Architect.

package/app/main.js

@@ -1,10 +1,12 @@
 import { createRouter, mountOutlet } from '../framework/index.js'
 import { Home } from './routes/Home.js'
 import { About } from './routes/About.js'
+import { TestFor } from './routes/TestFor.js'
 
 createRouter([
     { path: '/', component: Home },
     { path: '/about', component: About },
+    { path: '/test-for', component: TestFor },
 ])
 
 const outlet = document.getElementById('app')

package/app/routes/TestFor.js

@@ -0,0 +1,43 @@
+import { defineComponent, signal } from '../../framework/index.js'
+
+export const TestFor = defineComponent({
+    setup() {
+        const items = signal([
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+        ])
+
+        return {
+            items,
+            addItem: () => {
+                const nextId = Math.max(0, ...items().map(i => i.id)) + 1
+                items([...items(), { id: nextId, name: `Item ${nextId}` }])
+            },
+            shuffleItems: () => {
+                const shuffled = [...items()].sort(() => Math.random() - 0.5)
+                items(shuffled)
+            },
+            template: `
+                <div class="page">
+                    <h1>Keyed f-for Test</h1>
+                    <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+                    
+                    <div style="margin-bottom: 20px; display: flex; gap: 10px;">
+                        <button @click="addItem" class="primary-btn">Add Item</button>
+                        <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; gap: 10px;">
+                        <div f-for="item in items" :key="item.id" 
+                             style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
+                            <span>ID: {{ item.id }}</span>
+                            <input type="text" :value="item.name" placeholder="Type here..." 
+                                   style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/framework/core/directives.js

@@ -82,6 +82,12 @@ export function processFor(root, context, components, effects) {
         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)
@@ -89,45 +95,73 @@ export function processFor(root, context, components, effects) {
         const templateNode = el.cloneNode(true)
         parent.removeChild(el)
 
-        let previousNodes = []
-        let previousEffects = []
+        // 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, key: index, index }))
+                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, key: i, index: i }))
+                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, index }))
+                items = Object.entries(rawItems).map(([key, value], index) => ({ value, key, rawIndex: index }))
             }
 
-            for (const e of previousEffects) if (typeof e === 'function') e()
-            for (const node of previousNodes) node.parentNode?.removeChild(node)
+            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
 
-            previousNodes = []
-            previousEffects = []
+                const key = keyExpr ? evaluateExpression(keyExpr, itemContext) : item.rawIndex
+                return { item, key, itemContext }
+            })
 
-            const fragment = document.createDocumentFragment()
-            items.forEach((item) => {
-                const clone = templateNode.cloneNode(true)
-                const childContext = Object.create(context)
+            const parentNode = anchor.parentNode
+            let currentCursor = anchor.nextSibling
 
-                childContext[itemName] = item.value
-                if (keyName) childContext[keyName] = item.key
-                if (indexName) childContext[indexName] = item.index
+            newItemsWithKeys.forEach(({ item, key, itemContext }, index) => {
+                let entry = cache.get(key)
 
-                const childEffects = []
-                compileNode(clone, childContext, components, childEffects)
+                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
 
-                fragment.appendChild(clone)
-                previousNodes.push(clone)
-                previousEffects.push(...childEffects)
+                    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)
             })
 
-            anchor.parentNode.insertBefore(fragment, anchor)
+            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
         }))
     }
 }

package/framework/core/evaluator.js

@@ -6,12 +6,15 @@ 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
+    // Map global context (only what is used in expression)
     for (const k in context) {
-        keys.push(k)
-        const val = context[k]
-        values.push(unwrapSignals && typeof val === 'function' && val.isSignal ? val() : val)
+        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)

package/index.html

@@ -159,6 +159,7 @@
   <nav>
     <a href="#/">Home</a>
     <a href="#/about">About</a>
+    <a href="#/test-for">Test f-for</a>
   </nav>
   <div id="app"></div>
   <script type="module" src="./app/main.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fusee-framework",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Fusée - Signals-first JS Framework | Peak Performance",
   "main": "framework/index.js",
   "types": "framework/types/index.d.ts",

package/vite.config.js

@@ -2,11 +2,8 @@ import { defineConfig } from 'vite'
 import path from 'path'
 
 export default defineConfig({
-    // Directorul rădăcină al proiectului
     root: '.',
 
-    // Alias-uri pentru import-uri mai curate
-    // În loc de '../../framework/index.js' poți scrie '@fusee'
     resolve: {
         alias: {
             '@fusee': path.resolve(__dirname, './framework'),
@@ -14,14 +11,12 @@ export default defineConfig({
         }
     },
 
-    // Config pentru server-ul de development
     server: {
         port: 3000,
         open: true,        // Deschide browserul automat
         hmr: true,         // Hot Module Replacement
     },
 
-    // Config pentru build de producție
     build: {
         outDir: 'dist',
         emptyOutDir: true,