fusee-framework 1.3.0 → 1.4.1

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/composable.d.ts

@@ -0,0 +1,14 @@
+export interface Composable<T = any> {
+    (...args: any[]): T
+    readonly _isComposable: true
+}
+
+declare global {
+    interface Composable<T = any> {
+        (...args: any[]): T
+        readonly _isComposable: true
+    }
+}
+
+export function defineComposable<T>(fn: (...args: any[]) => T): Composable<T>
+export function assertSetupContext(name?: string): any

package/framework/types/directives.d.ts

@@ -37,3 +37,18 @@ export function processHtml(root: HTMLElement, context: ComponentResult, effects
 export function processText(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
 export function processEvents(root: HTMLElement, context: ComponentResult): void
 export function processCloak(root: HTMLElement): void
+
+export interface DirectiveBinding<V = any> {
+    value: V
+    expression: string
+    arg: string | null
+    modifiers: string[]
+}
+
+export interface DirectiveHooks<V = any> {
+    mounted?: (el: HTMLElement, binding: DirectiveBinding<V>) => void
+    updated?: (el: HTMLElement, binding: DirectiveBinding<V>) => void
+    unmounted?: (el: HTMLElement, binding: DirectiveBinding<V>) => void
+}
+
+export function directive<V = any>(name: string, hooks: DirectiveHooks<V>): void

package/framework/types/index.d.ts

@@ -1,16 +1,17 @@
-// ─── Fusée Framework Types ───────────────────────────────────────────────────
-
-// Public API
 export * from './signal'
 export * from './component'
+export * from './composable'
 export * from './router'
 export * from './compiler'
+export * from './directives'
 
 declare global {
     type Signal<T = any> = import('./signal').Signal<T>
     type Computed<T = any> = import('./signal').Computed<T>
     type SignalAccessor<T> = import('./signal').SignalAccessor<T>
+    type Composable<T extends (...args: any[]) => any> = import('./composable').Composable<T>
+    type DirectiveBinding<V = any> = import('./directives').DirectiveBinding<V>
+    type DirectiveHooks<V = any> = import('./directives').DirectiveHooks<V>
 }
 
-// Re-export as namespace for convenience
 export as namespace Fusee

package/framework/types/signal.d.ts

@@ -6,13 +6,47 @@ export type SignalAccessor<T> = {
     isSignal: boolean;
 }
 
+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;
+    unshift(...items: T[number][]): number;
+    splice(start: number, deleteCount: number, ...items: T[number][]): T[number][];
+    remove(predicate: (item: T[number], index: number) => boolean): void;
+    clear(): void;
+    sort(compareFn?: (a: T[number], b: T[number]) => number): ArraySignalAccessor<T>;
+    reverse(): ArraySignalAccessor<T>;
+}
+
 export type ComputedAccessor<T> = {
     (): T;
     isSignal: boolean;
     readonly: true;
-}
+} & (T extends any[] ? ReactiveArrayMethods<T[number]> : {})
 
-export type Signal<T = any> = SignalAccessor<T>
+export type Signal<T = any> = T extends any[] ? ArraySignalAccessor<T> : SignalAccessor<T>
 export type Computed<T = any> = ComputedAccessor<T>
 
 type EffectRunner = {
@@ -20,7 +54,8 @@ type EffectRunner = {
     deps: Set<Set<EffectRunner>>;
 }
 
-export declare function signal<T>(initialValue: T): Signal<T>
+export declare function signal<T extends any[]>(initialValue: T): ArraySignalAccessor<T>
+export declare function signal<T>(initialValue: T): SignalAccessor<T>
 export declare function effect(fn: () => void): () => void
 export declare function computed<T>(fn: () => T): Computed<T>
 export declare function batch<T>(fn: () => T): T

package/index.html

@@ -160,6 +160,139 @@
       opacity: 0.3;
       cursor: not-allowed;
     }
+
+    /* ── Composables demo ──────────────────────────────────────────── */
+    .demo-card {
+      background: #13131d;
+      border: 1px solid #2a2a3a;
+      border-radius: 12px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .demo-card h2 {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #e8e8f0;
+      margin-bottom: 0.35rem;
+    }
+
+    .demo-desc {
+      font-size: 0.8rem;
+      color: #555 !important;
+      margin-bottom: 1rem !important;
+    }
+
+    .counter-display {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .big-num {
+      font-size: 3.5rem;
+      font-weight: 700;
+      line-height: 1;
+      transition: color 0.2s;
+    }
+
+    .big-num.even {
+      color: #8b8bff;
+    }
+
+    .big-num.odd {
+      color: #ff3333;
+    }
+
+    .derived-label {
+      font-size: 0.8rem;
+      color: #555;
+      margin-top: 0.25rem;
+    }
+
+    .btn-row {
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+      margin-bottom: 0.75rem;
+    }
+
+    .cmp-btn {
+      padding: 0.45rem 1.1rem;
+      border-radius: 6px;
+      border: 1px solid #2a2a3a;
+      background: #0f0f1a;
+      color: #e8e8f0;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: background 0.15s;
+    }
+
+    .cmp-btn:hover {
+      background: #1f1f30;
+    }
+
+    .cmp-btn.plus {
+      border-color: #8b8bff;
+      color: #8b8bff;
+    }
+
+    .cmp-btn.minus {
+      border-color: #ff3333;
+      color: #ff3333;
+    }
+
+    .cmp-btn.reset {
+      border-color: #555;
+      color: #888;
+    }
+
+    .badge {
+      display: inline-block;
+      padding: 0.2rem 0.65rem;
+      border-radius: 999px;
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .badge-blue {
+      background: rgba(139, 139, 255, 0.15);
+      color: #8b8bff;
+    }
+
+    .badge-red {
+      background: rgba(255, 51, 51, 0.12);
+      color: #ff3333;
+    }
+
+    .mouse-display {
+      display: flex;
+      gap: 2rem;
+      font-size: 1.1rem;
+      color: #aaa;
+      margin-bottom: 0.5rem;
+    }
+
+    .mouse-display strong {
+      color: #e8e8f0;
+    }
+
+    .cmp-input {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      background: #0f0f1a;
+      border: 1px solid #2a2a3a;
+      border-radius: 6px;
+      color: #e8e8f0;
+      font-size: 0.95rem;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .cmp-input:focus {
+      border-color: #8b8bff;
+    }
   </style>
 </head>
 
@@ -169,6 +302,7 @@
     <a href="#/about">About</a>
     <a href="#/test-for">Loops Test</a>
     <a href="#/dynamic" style="color: #ec4899;">Dynamic Components</a>
+    <a href="#/composables" style="color: #34d399;">Composables</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.3.0",
+  "version": "1.4.1",
   "description": "Fusée - Signals-first JS Framework | Peak Performance",
   "main": "framework/index.js",
   "types": "framework/types/index.d.ts",