fusee-framework 1.4.0 → 1.4.1

package/README.md

@@ -1,5 +1,5 @@
 # Fusée Framework 🚀
-**v1.4.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.4.1 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
 
 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, Dependency Injection for components and a comprehensive CLI for instant application scaffolding.
 

package/app/main.js

@@ -18,33 +18,33 @@ directive('highlight', {
 })
 
 const routes = [
-    { 
-        path: '/', 
+    {
+        path: '/',
         component: defineAsyncComponent({
             loader: () => import('./routes/Home.js'),
             loadingComponent: Loading
-        }) 
+        })
     },
-    { 
-        path: '/about', 
+    {
+        path: '/about',
         component: defineAsyncComponent({
             loader: () => import('./routes/About.js'),
             loadingComponent: Loading
-        }) 
+        })
     },
-    { 
-        path: '/test-for', 
+    {
+        path: '/test-for',
         component: defineAsyncComponent({
             loader: () => import('./routes/TestFor.js'),
             loadingComponent: Loading
-        }) 
+        })
     },
-    { 
-        path: '/dynamic', 
+    {
+        path: '/dynamic',
         component: defineAsyncComponent({
             loader: () => import('./routes/TestDynamic.js'),
             loadingComponent: Loading
-        }) 
+        })
     },
     {
         path: '/composables',

package/app/routes/TestFor.js

@@ -5,10 +5,27 @@ export const TestFor = defineComponent({
             { id: 2, name: 'Item 2' },
             { id: 3, name: 'Item 3' }
         ])
+        const search = signal('')
+        
+        // ✨ NEW: Using the reactive .filter() method on the signal!
+        // This returns a Computed signal that updates automatically.
+        const filteredItems = items.filter(item => 
+            item.name.toLowerCase().includes(search().toLowerCase())
+        )
+
         inspect(items)
 
         return {
             items,
+            search,
+            filteredItems,
+            // 🔗 Chaining test: filter -> map -> join
+            namesSummary: filteredItems.map(i => i.name).join(', '),
+
+            updateItem: (id, newName) => {
+                // We update the SOURCE signal so the .filter() can see the new values!
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
             addItem: () => {
                 const nextId = Math.max(0, ...items().map(i => i.id)) + 1
                 items.push({ id: nextId, name: `Item ${nextId}` })
@@ -20,17 +37,28 @@ export const TestFor = defineComponent({
                 <div class="page">
                     <h1>Keyed f-for Test</h1>
                     <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </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 style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
                     </div>
 
                     <div style="display: flex; flex-direction: column; gap: 10px;">
-                        <div f-for="item in items" :key="item.id" 
+                        <div f-for="item in filteredItems" :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..." 
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
                                    style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
                         </div>
                     </div>

package/app/routes/TestFor.ts

@@ -5,6 +5,10 @@ type Item = {
 
 type TestForResult = {
     items: Signal<Item[]>
+    search: Signal<string>
+    filteredItems: Computed<Item[]>
+    namesSummary: Computed<string>
+    updateItem: (id: number, name: string) => void
     addItem: () => void
     shuffleItems: () => void
     template: string
@@ -17,9 +21,20 @@ export const TestFor = defineComponent({
             { id: 2, name: 'Item 2' },
             { id: 3, name: 'Item 3' }
         ])
+        const search = signal('')
+        const filteredItems = items.filter(i =>
+            i.name.toLowerCase().includes(search().toLowerCase())
+        )
+        const namesSummary = filteredItems.map(i => i.name).join(', ')
 
         return {
             items,
+            search,
+            filteredItems,
+            namesSummary,
+            updateItem: (id, newName) => {
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
             addItem: () => {
                 const nextIds = items().map(i => i.id)
                 const nextId = nextIds.length > 0 ? Math.max(...nextIds) + 1 : 1
@@ -32,17 +47,29 @@ export const TestFor = defineComponent({
                 <div class="page">
                     <h1>Keyed f-for Test (TypeScript)</h1>
                     <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </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 style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
                     </div>
 
                     <div style="display: flex; flex-direction: column; gap: 10px;">
-                        <div f-for="item in items" :key="item.id" 
+                        <div f-for="item in filteredItems" :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..." 
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
                                    style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
                         </div>
                     </div>

package/framework/core/signal.js

@@ -52,62 +52,8 @@ export function signal(initialValue) {
 
     accessor.isSignal = true
 
-    if (Array.isArray(initialValue)) {
-        accessor.push = (...items) => {
-            const next = [...accessor(), ...items]
-            accessor(next)
-            return next.length
-        }
-
-        accessor.pop = () => {
-            const arr = accessor()
-            if (arr.length === 0) return undefined
-            const item = arr[arr.length - 1]
-            accessor(arr.slice(0, -1))
-            return item
-        }
-
-        accessor.shift = () => {
-            const arr = accessor()
-            if (arr.length === 0) return undefined
-            const item = arr[0]
-            accessor(arr.slice(1))
-            return item
-        }
-
-        accessor.unshift = (...items) => {
-            const next = [...items, ...accessor()]
-            accessor(next)
-            return next.length
-        }
-
-        accessor.splice = (start, deleteCount, ...items) => {
-            const arr = [...accessor()]
-            const removed = arr.splice(start, deleteCount, ...items)
-            accessor(arr)
-            return removed
-        }
-
-        accessor.remove = (predicate) => {
-            accessor(accessor().filter((item, i) => !predicate(item, i)))
-        }
-
-        accessor.clear = () => {
-            accessor([])
-        }
-
-        accessor.sort = (compareFn) => {
-            const next = [...accessor()].sort(compareFn)
-            accessor(next)
-            return accessor
-        }
-
-        accessor.reverse = () => {
-            const next = [...accessor()].reverse()
-            accessor(next)
-            return accessor
-        }
-    }
+    if (Array.isArray(initialValue)) addMutatingArrayMethods(accessor)
+    addReactiveArrayMethods(accessor)
 
     return accessor
 }
@@ -183,6 +129,9 @@ export function computed(fn) {
 
     accessor.isSignal = true
     accessor.readonly = true
+
+    addReactiveArrayMethods(accessor)
+
     return accessor
 }
 
@@ -196,11 +145,6 @@ export function untrack(fn) {
     }
 }
 
-/**
- * Reactive log helper similar to Svelte 5's $inspect.
- * Watches signals or functions and logs their current values on change.
- * Only active in development mode.
- */
 export function inspect(...args) {
     const isDev = typeof import.meta.env !== 'undefined' ? !!import.meta.env.DEV : true
     if (!isDev) return
@@ -215,3 +159,88 @@ export function inspect(...args) {
         console.log('[inspect]', ...values)
     })
 }
+
+function addReactiveArrayMethods(accessor) {
+    // Transformations
+    accessor.map = (fn) => computed(() => accessor()?.map?.(fn) ?? [])
+    accessor.filter = (fn) => computed(() => accessor()?.filter?.(fn) ?? [])
+    accessor.slice = (...args) => computed(() => accessor()?.slice?.(...args) ?? [])
+    accessor.concat = (...args) => computed(() => accessor()?.concat?.(...args) ?? [])
+    accessor.flat = (depth) => computed(() => accessor()?.flat?.(depth) ?? [])
+    accessor.flatMap = (fn) => computed(() => accessor()?.flatMap?.(fn) ?? [])
+
+    // Searches
+    accessor.find = (fn) => computed(() => accessor()?.find?.(fn))
+    accessor.findLast = (fn) => computed(() => accessor()?.findLast?.(fn))
+    accessor.findIndex = (fn) => computed(() => accessor()?.findIndex?.(fn))
+    accessor.findLastIndex = (fn) => computed(() => accessor()?.findLastIndex?.(fn))
+    accessor.indexOf = (searchElement, fromIdx) => computed(() => accessor()?.indexOf?.(searchElement, fromIdx))
+    accessor.lastIndexOf = (searchElement, fromIdx) => computed(() => accessor()?.lastIndexOf?.(searchElement, fromIdx))
+    accessor.includes = (searchElement, fromIdx) => computed(() => accessor()?.includes?.(searchElement, fromIdx))
+
+    // Validations
+    accessor.every = (fn) => computed(() => accessor()?.every?.(fn))
+    accessor.some = (fn) => computed(() => accessor()?.some?.(fn))
+
+    // Accumulators & Access
+    accessor.reduce = (...args) => computed(() => accessor()?.reduce?.(...args))
+    accessor.at = (index) => computed(() => accessor()?.at?.(index))
+    accessor.join = (separator) => computed(() => accessor()?.join?.(separator) ?? '')
+}
+
+function addMutatingArrayMethods(accessor) {
+    accessor.push = (...items) => {
+        const next = [...accessor(), ...items]
+        accessor(next)
+        return next.length
+    }
+
+    accessor.pop = () => {
+        const arr = accessor()
+        if (arr.length === 0) return undefined
+        const item = arr[arr.length - 1]
+        accessor(arr.slice(0, -1))
+        return item
+    }
+
+    accessor.shift = () => {
+        const arr = accessor()
+        if (arr.length === 0) return undefined
+        const item = arr[0]
+        accessor(arr.slice(1))
+        return item
+    }
+
+    accessor.unshift = (...items) => {
+        const next = [...items, ...accessor()]
+        accessor(next)
+        return next.length
+    }
+
+    accessor.splice = (start, deleteCount, ...items) => {
+        const arr = [...accessor()]
+        const removed = arr.splice(start, deleteCount, ...items)
+        accessor(arr)
+        return removed
+    }
+
+    accessor.remove = (predicate) => {
+        accessor(accessor().filter((item, i) => !predicate(item, i)))
+    }
+
+    accessor.clear = () => {
+        accessor([])
+    }
+
+    accessor.sort = (compareFn) => {
+        const next = [...accessor()].sort(compareFn)
+        accessor(next)
+        return accessor
+    }
+
+    accessor.reverse = () => {
+        const next = [...accessor()].reverse()
+        accessor(next)
+        return accessor
+    }
+}

package/framework/router/router.js

@@ -22,9 +22,9 @@ export function createRouter(routes) {
             window.removeEventListener('hashchange', handler)
             window.removeEventListener('DOMContentLoaded', handler)
             if (_currentInstance) {
-                try { 
-                    _currentInstance.unmount() 
-                } catch {}
+                try {
+                    _currentInstance.unmount()
+                } catch { }
             }
             _routes = []
             _outlet = null
@@ -58,7 +58,7 @@ function _resolve() {
     }
 
     if (_currentInstance) {
-        try { _currentInstance.unmount() } catch {}
+        try { _currentInstance.unmount() } catch { }
     }
 
     _outlet.innerHTML = ''

package/framework/types/signal.d.ts

@@ -6,7 +6,29 @@ export type SignalAccessor<T> = {
     isSignal: boolean;
 }
 
-export type ArraySignalAccessor<T extends any[]> = SignalAccessor<T> & {
+export interface ReactiveArrayMethods<T> {
+    map<U>(callbackfn: (value: T, index: number, array: T[]) => U): Computed<U[]>;
+    filter(predicate: (value: T, index: number, array: T[]) => boolean): Computed<T[]>;
+    slice(start?: number, end?: number): Computed<T[]>;
+    reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): Computed<U>;
+    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): Computed<T>;
+    find(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<T | undefined>;
+    findLast(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<T | undefined>;
+    findIndex(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<number>;
+    findLastIndex(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<number>;
+    every(predicate: (value: T, index: number, array: T[]) => boolean): Computed<boolean>;
+    some(predicate: (value: T, index: number, array: T[]) => boolean): Computed<boolean>;
+    includes(searchElement: T, fromIndex?: number): Computed<boolean>;
+    indexOf(searchElement: T, fromIndex?: number): Computed<number>;
+    lastIndexOf(searchElement: T, fromIndex?: number): Computed<number>;
+    at(index: number): Computed<T | undefined>;
+    concat(...items: (T | T[])[]): Computed<T[]>;
+    flat<depth extends number = 1>(depth?: depth): Computed<any[]>;
+    flatMap<U>(callback: (value: T, index: number, array: T[]) => U | U[]): Computed<U[]>;
+    join(separator?: string): Computed<string>;
+}
+
+export type ArraySignalAccessor<T extends any[]> = SignalAccessor<T> & ReactiveArrayMethods<T[number]> & {
     push(...items: T[number][]): number;
     pop(): T[number] | undefined;
     shift(): T[number] | undefined;
@@ -22,7 +44,7 @@ export type ComputedAccessor<T> = {
     (): T;
     isSignal: boolean;
     readonly: true;
-}
+} & (T extends any[] ? ReactiveArrayMethods<T[number]> : {})
 
 export type Signal<T = any> = T extends any[] ? ArraySignalAccessor<T> : SignalAccessor<T>
 export type Computed<T = any> = ComputedAccessor<T>

package/index.html

@@ -305,7 +305,7 @@
     <a href="#/composables" style="color: #34d399;">Composables</a>
   </nav>
   <div id="app"></div>
-  <script type="module" src="./app/main.ts"></script>
+  <script type="module" src="./app/main.js"></script>
 </body>
 
 </html>

package/package.json

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