fusee-framework 1.3.0 → 1.4.1

package/README.md

@@ -1,5 +1,5 @@
 # Fusée Framework 🚀
-**v1.3.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/composables/demo.js

@@ -0,0 +1,29 @@
+import { defineComposable, assertSetupContext, signal, computed, onMount, onUnmount } from '../../framework/index.js'
+
+// ─── counterLogic ─────────────────────────────────────────────────────────────
+export const counterLogic = defineComposable((initial = 0, step = 1) => {
+    const count = signal(initial)
+    const doubled = computed(() => count() * 2)
+    const isEven = computed(() => count() % 2 === 0)
+
+    const increment = () => count(count() + step)
+    const decrement = () => count(count() - step)
+    const reset = () => count(initial)
+
+    return { count, doubled, isEven, increment, decrement, reset }
+})
+
+// ─── mouseTracker ─────────────────────────────────────────────────────────────
+export const mouseTracker = defineComposable(() => {
+    assertSetupContext('mouseTracker')
+
+    const x = signal(0)
+    const y = signal(0)
+
+    const onMove = (e) => { x(e.clientX); y(e.clientY) }
+
+    onMount(() => window.addEventListener('mousemove', onMove))
+    onUnmount(() => window.removeEventListener('mousemove', onMove))
+
+    return { x, y }
+})

package/app/composables/demo.ts

@@ -0,0 +1,30 @@
+import { defineComposable, assertSetupContext, signal, computed, onMount, onUnmount } from '../../framework/index.js'
+
+export const counterLogic = defineComposable((initial: number = 0, step: number = 1) => {
+    const count   = signal(initial)
+    const doubled = computed(() => count() * 2)
+    const isEven  = computed(() => count() % 2 === 0)
+
+    const increment = () => count(count() + step)
+    const decrement = () => count(count() - step)
+    const reset     = () => count(initial)
+
+    return { count, doubled, isEven, increment, decrement, reset }
+})
+
+export const mouseTracker = defineComposable(() => {
+    assertSetupContext('mouseTracker')
+
+    const x = signal(0)
+    const y = signal(0)
+
+    const onMove = (e: MouseEvent) => { 
+        x(e.clientX)
+        y(e.clientY) 
+    }
+
+    onMount(() => window.addEventListener('mousemove', onMove))
+    onUnmount(() => window.removeEventListener('mousemove', onMove))
+
+    return { x, y }
+})

package/app/composables/useFetch.js

@@ -0,0 +1,53 @@
+import { defineComposable, signal, effect } from '../../framework/index.js'
+
+/**
+ * @template T
+ * @param {string | (() => string)} urlOrSignal
+ * @param {{ immediate?: boolean, transform?: (raw: any) => T }} [options]
+ */
+export const useFetch = defineComposable((urlOrSignal, options = {}) => {
+    const { immediate = true, transform = null } = options
+
+    const data    = signal(null)
+    const loading = signal(false)
+    const error   = signal(null)
+
+    let controller = null
+
+    const execute = () => {
+        const url = typeof urlOrSignal === 'function' ? urlOrSignal() : urlOrSignal
+        if (!url) return
+
+        if (controller) controller.abort()
+        controller = new AbortController()
+
+        loading(true)
+        error(null)
+
+        fetch(url, { signal: controller.signal })
+            .then(res => {
+                if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`)
+                return res.json()
+            })
+            .then(raw => {
+                data(transform ? transform(raw) : raw)
+                loading(false)
+            })
+            .catch(err => {
+                if (err.name === 'AbortError') return
+                error(err.message ?? String(err))
+                loading(false)
+            })
+    }
+
+    if (typeof urlOrSignal === 'function') {
+        effect(() => {
+            urlOrSignal()
+            execute()
+        })
+    } else if (immediate) {
+        execute()
+    }
+
+    return { data, loading, error, refetch: execute }
+})

package/app/composables/useFetch.ts

@@ -0,0 +1,63 @@
+import { defineComposable, signal, effect } from '../../framework/index.js'
+
+export interface FetchOptions<T> {
+    immediate?: boolean
+    transform?: (raw: any) => T
+}
+
+export interface FetchResult<T> {
+    data:    Signal<T | null>
+    loading: Signal<boolean>
+    error:   Signal<string | null>
+    refetch: () => void
+}
+
+export const useFetch = defineComposable(<T = any>(
+    urlOrSignal: string | (() => string), 
+    options: FetchOptions<T> = {}
+): FetchResult<T> => {
+    const { immediate = true, transform = null } = options
+
+    const data    = signal<T | null>(null)
+    const loading = signal(false)
+    const error   = signal<string | null>(null)
+
+    let controller: AbortController | null = null
+
+    const execute = () => {
+        const url = typeof urlOrSignal === 'function' ? urlOrSignal() : urlOrSignal
+        if (!url) return
+
+        if (controller) controller.abort()
+        controller = new AbortController()
+
+        loading(true)
+        error(null)
+
+        fetch(url, { signal: controller.signal })
+            .then(res => {
+                if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`)
+                return res.json()
+            })
+            .then(raw => {
+                data(transform ? transform(raw) : raw)
+                loading(false)
+            })
+            .catch(err => {
+                if (err.name === 'AbortError') return
+                error(err.message ?? String(err))
+                loading(false)
+            })
+    }
+
+    if (typeof urlOrSignal === 'function') {
+        effect(() => {
+            urlOrSignal()
+            execute()
+        })
+    } else if (immediate) {
+        execute()
+    }
+
+    return { data, loading, error, refetch: execute }
+})

package/app/composables/useLocalStorage.js

@@ -0,0 +1,31 @@
+import { defineComposable, signal, effect } from '../../framework/index.js'
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {T}      defaultValue
+ */
+export const useLocalStorage = defineComposable((key, defaultValue = null) => {
+    const stored = localStorage.getItem(key)
+    let initial
+
+    try {
+        initial = stored !== null ? JSON.parse(stored) : defaultValue
+    } catch {
+        initial = defaultValue
+        localStorage.removeItem(key)
+    }
+
+    const value = signal(initial)
+
+    effect(() => {
+        const current = value()
+        if (current === null || current === undefined) {
+            localStorage.removeItem(key)
+        } else {
+            localStorage.setItem(key, JSON.stringify(current))
+        }
+    })
+
+    return value
+})

package/app/composables/useLocalStorage.ts

@@ -0,0 +1,26 @@
+import { defineComposable, signal, effect } from '../../framework/index.js'
+
+export const useLocalStorage = defineComposable(<T>(key: string, defaultValue: T | null = null): Signal<T | null> => {
+    const stored = localStorage.getItem(key)
+    let initial: T | null
+
+    try {
+        initial = stored !== null ? JSON.parse(stored) : defaultValue
+    } catch {
+        initial = defaultValue
+        localStorage.removeItem(key)
+    }
+
+    const value = signal<T | null>(initial)
+
+    effect(() => {
+        const current = value()
+        if (current === null || current === undefined) {
+            localStorage.removeItem(key)
+        } else {
+            localStorage.setItem(key, JSON.stringify(current))
+        }
+    })
+
+    return value
+})

package/app/main.js

@@ -1,34 +1,57 @@
 import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/index.js'
 import { Loading } from './components/Loading.js'
 
+directive('focus', {
+    mounted(el) {
+        el.focus()
+    }
+})
+
+directive('highlight', {
+    mounted(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+        el.style.transition = 'background-color 0.3s'
+    },
+    updated(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+    }
+})
+
 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',
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestComposables.js'),
+            loadingComponent: Loading
+        })
     },
 ]
 

package/app/main.ts

@@ -2,35 +2,58 @@ import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/in
 import type { Route } from '../framework/types/index.js'
 import { Loading } from './components/Loading.js'
 
+directive('focus', {
+    mounted(el) {
+        el.focus()
+    }
+})
+
+directive('highlight', {
+    mounted(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+        el.style.transition = 'background-color 0.3s'
+    },
+    updated(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+    }
+})
+
 const routes: Route[] = [
     { 
         path: '/', 
         component: defineAsyncComponent({
-            loader: () => import('./routes/Home.js'),
+            loader: () => import('./routes/Home.ts'),
             loadingComponent: Loading
         }) 
     },
     { 
         path: '/about', 
         component: defineAsyncComponent({
-            loader: () => import('./routes/About.js'),
+            loader: () => import('./routes/About.ts'),
             loadingComponent: Loading
         }) 
     },
     { 
         path: '/test-for', 
         component: defineAsyncComponent({
-            loader: () => import('./routes/TestFor.js'),
+            loader: () => import('./routes/TestFor.ts'),
             loadingComponent: Loading
         }) 
     },
     { 
         path: '/dynamic', 
         component: defineAsyncComponent({
-            loader: () => import('./routes/TestDynamic.js'),
+            loader: () => import('./routes/TestDynamic.ts'),
             loadingComponent: Loading
         }) 
     },
+    {
+        path: '/composables',
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestComposables.ts'),
+            loadingComponent: Loading
+        })
+    },
 ]
 
 createRouter(routes)

package/app/routes/TestComposables.js

@@ -0,0 +1,158 @@
+import { counterLogic, mouseTracker } from '../composables/demo.js'
+import { useFetch } from '../composables/useFetch.js'
+import { useLocalStorage } from '../composables/useLocalStorage.js'
+
+export const TestComposables = defineComponent({
+    setup() {
+        // ── 1. counterLogic — pure signal composable, no context needed ──────
+        const counter = counterLogic(0, 1)
+        const bigCounter = counterLogic(100, 10)
+
+        // ── 2. mouseTracker — lifecycle composable (needs setup context) ─────
+        const mouse = mouseTracker()
+
+        // ── 3. useLocalStorage — persists across page reloads ────────────────
+        const theme = useLocalStorage('demo-theme', 'dark')
+        const nickname = useLocalStorage('demo-nickname', '')
+
+        const toggleTheme = () => theme(theme() === 'dark' ? 'light' : 'dark')
+
+        // ── 4. useFetch — reactive data fetching ─────────────────────────────
+        const { data: posts, loading, error } = useFetch(
+            'https://jsonplaceholder.typicode.com/posts?_limit=3'
+        )
+        // ── 5. Custom Directives Test ────────────────────────────────────────
+        const hColor = signal('#8b8bff33')
+        const colors = ['#8b8bff33', '#10b98133', '#f59e0b33', '#ef444433']
+        let colorIdx = 0
+        const nextColor = () => hColor(colors[++colorIdx % colors.length])
+
+        return {
+            hColor,
+            nextColor,
+
+            // counter
+            count: counter.count,
+            doubled: counter.doubled,
+            isEven: counter.isEven,
+            increment: counter.increment,
+            decrement: counter.decrement,
+            reset: counter.reset,
+
+            // big counter
+            bigCount: bigCounter.count,
+            bigIncrement: bigCounter.increment,
+            bigDecrement: bigCounter.decrement,
+
+            // mouse
+            mouseX: mouse.x,
+            mouseY: mouse.y,
+
+            // localStorage
+            theme,
+            nickname,
+            toggleTheme,
+
+            // fetch
+            posts,
+            loading,
+            error,
+
+            template: `
+                <div class="page">
+                    <h1>🧩 Composables Demo</h1>
+                    <p style="color:#888; margin-bottom: 2rem;">
+                        Each section below is powered by a <code style="color:#ff3333">defineComposable()</code> function.
+                        No naming rules — just reactive logic.
+                    </p>
+
+                    <!-- ── 1. counterLogic ─────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>📦 counterLogic(0, step=1)</h2>
+                        <p class="demo-desc">Pure signal composable — works without setup() context.</p>
+                        <div class="counter-display">
+                            <span class="big-num" :class="isEven ? 'even' : 'odd'">{{ count }}</span>
+                            <span class="derived-label">× 2 = {{ doubled }}</span>
+                        </div>
+                        <div class="btn-row">
+                            <button @click="decrement" class="cmp-btn minus">−</button>
+                            <button @click="reset"     class="cmp-btn reset">↺</button>
+                            <button @click="increment" class="cmp-btn plus">+</button>
+                        </div>
+                        <p class="badge" :class="isEven ? 'badge-blue' : 'badge-red'">{{ isEven ? 'Even' : 'Odd' }}</p>
+                    </section>
+
+                    <!-- ── 1b. Second independent counter (step=10) ───────────── -->
+                    <section class="demo-card">
+                        <h2>📦 counterLogic(100, step=10)</h2>
+                        <p class="demo-desc">Same composable, different instance. Fully isolated state.</p>
+                        <div class="counter-display">
+                            <span class="big-num">{{ bigCount }}</span>
+                        </div>
+                        <div class="btn-row">
+                            <button @click="bigDecrement" class="cmp-btn minus">−10</button>
+                            <button @click="bigIncrement" class="cmp-btn plus">+10</button>
+                        </div>
+                    </section>
+
+                    <!-- ── 2. mouseTracker ────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>🖱️ mouseTracker()</h2>
+                        <p class="demo-desc">Lifecycle composable — registers window listener on mount, cleans up on unmount.</p>
+                        <div class="mouse-display">
+                            <span>X: <strong>{{ mouseX }}</strong></span>
+                            <span>Y: <strong>{{ mouseY }}</strong></span>
+                        </div>
+                    </section>
+
+                    <!-- ── 3. useLocalStorage ─────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>💾 useLocalStorage()</h2>
+                        <p class="demo-desc">State persists across page reloads. Try changing the nickname, then refresh.</p>
+                        <div style="margin-bottom: 12px;">
+                            <input f-model="nickname"
+                                   class="cmp-input"
+                                   placeholder="Your nickname…" />
+                            <p style="margin-top: 8px; color: #888; font-size: 0.85rem;">
+                                Stored: <strong style="color:#ff3333">{{ nickname || '(empty)' }}</strong>
+                            </p>
+                        </div>
+                        <button @click="toggleTheme" class="cmp-btn reset">
+                            Theme: {{ theme }}
+                        </button>
+                    </section>
+
+                    <!-- ── 4. useFetch ────────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>🌐 useFetch()</h2>
+                        <p class="demo-desc">Fetches from JSONPlaceholder. Loading state handled reactively.</p>
+                        <div f-if="loading">
+                            <p style="color: #888;">⏳ Loading posts…</p>
+                        </div>
+                        <div f-elif="error">
+                            <p style="color: #ff6b6b;">❌ {{ error }}</p>
+                        </div>
+                        <div f-else>
+                            <div f-for="post in posts" style="margin-bottom: 10px; padding: 10px; background:#1a1a24; border-radius:6px; border-left: 3px solid #ff3333;">
+                                <strong style="color:#ff9999">{{ post.title }}</strong>
+                                <p style="margin-top: 4px; font-size: 0.8rem; color: #666;">{{ post.body }}</p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ── 6. Custom Directives ────────────────────────────────────── -->
+                    <section class="demo-card">
+                        <h2>🛠️ Custom Directives</h2>
+                        <p class="demo-desc">Testing <code>f-focus</code> and <code>f-highlight</code>.</p>
+                        
+                        <div f-highlight="hColor" style="padding: 15px; border-radius: 8px; margin-bottom: 10px;">
+                            <input f-focus class="cmp-input" placeholder="I have f-focus!" />
+                        </div>
+                        
+                        <button @click="nextColor" class="cmp-btn plus">Change Highlight Color</button>
+                    </section>
+                </div>
+            `
+        }
+    }
+})