fusee-framework 1.2.1 → 1.4.0

package/README.md

@@ -1,5 +1,5 @@
 # Fusée Framework 🚀
-**v1.2.1 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.4.0 — 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.
 
@@ -44,20 +44,29 @@ A typical Fusée project looks like this:
 ## 📝 Example Component
 
 ```javascript
-import { defineComponent, signal } from './framework/core/index.js';
-
-export const Counter = defineComponent({
+export const Welcome = defineComponent({
     setup() {
+        const name = signal('World');
         const count = signal(0);
+        const double = computed(() => count() * 2);
+
         return {
+            name,
             count,
+            double,
             inc: () => count(count() + 1),
-            dec: () => count(count() - 1),
             template: `
-                <div class="counter-card">
-                    <h2>Counter: {{ count }}</h2>
-                    <button @click="dec">-</button>
-                    <button @click="inc">+</button>
+                <div class="card">
+                    <h2>Hello, {{ name }}!</h2>
+                    <input f-model="name" placeholder="Name" />
+                    
+                    <button @click.debounce.300ms="inc">
+                        Clicked {{ count }} times
+                    </button>
+                    
+                    <p f-if="count() > 0">
+                        Double: <strong>{{ double }}</strong>
+                    </p>
                 </div>
             `
         };
@@ -71,5 +80,6 @@ export const Counter = defineComponent({
 
 - [ ] Global Store Management
 - [ ] Advanced file-based routing support
+- [ ] Integrated lightweight compiler which transforms declarative HTML into optimized runtime instructions
 
 Built with ❤️ by me, Sebi Somu, a forward-thinking JavaScript Architect.

package/app/components/DynamicA.js

@@ -0,0 +1,24 @@
+export const DynamicA = defineComponent({
+    props: ['title'],
+    setup(props) {
+        onMount(() => console.log('✅ DynamicA mounted'))
+        onUnmount(() => console.log('❌ DynamicA unmounted'))
+        
+        const localValue = signal('')
+        
+        return {
+            title: props.title,
+            localValue,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #3b82f6;">
+                    <h3 style="color: #3b82f6;">Component A</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                        <label>Local state (persists with f-keepAlive):</label><br>
+                        <input f-model="localValue" placeholder="Type something here..." style="background: #0f172a; color: white; border: 1px solid #3b82f6; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/DynamicA.ts

@@ -0,0 +1,24 @@
+export const DynamicA = defineComponent({
+    props: ['title'],
+    setup(props: { title: string }) {
+        onMount(() => console.log('✅ DynamicA mounted'))
+        onUnmount(() => console.log('❌ DynamicA unmounted'))
+        
+        const localValue = signal('')
+        
+        return {
+            title: props.title,
+            localValue,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #3b82f6;">
+                    <h3 style="color: #3b82f6;">Component A</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                        <label>Local state (persists with f-keepAlive):</label><br>
+                        <input f-model="localValue" placeholder="Type something here..." style="background: #0f172a; color: white; border: 1px solid #3b82f6; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/DynamicB.js

@@ -0,0 +1,24 @@
+export const DynamicB = defineComponent({
+    props: ['title'],
+    setup(props) {
+        onMount(() => console.log('✅ DynamicB mounted'))
+        onUnmount(() => console.log('❌ DynamicB unmounted'))
+
+        const localInfo = signal('')
+
+        return {
+            title: props.title,
+            localInfo,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #ec4899;">
+                    <h3 style="color: #ec4899;">Component B</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                         <label>Local info (B):</label><br>
+                         <input f-model="localInfo" placeholder="B settings..." style="background: #1a1a1a; color: white; border: 1px solid #ec4899; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/DynamicB.ts

@@ -0,0 +1,24 @@
+export const DynamicB = defineComponent({
+    props: ['title'],
+    setup(props: { title: string }) {
+        onMount(() => console.log('✅ DynamicB mounted'))
+        onUnmount(() => console.log('❌ DynamicB unmounted'))
+
+        const localInfo = signal('')
+
+        return {
+            title: props.title,
+            localInfo,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #ec4899;">
+                    <h3 style="color: #ec4899;">Component B</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                         <label>Local info (B):</label><br>
+                         <input f-model="localInfo" placeholder="B settings..." style="background: #1a1a1a; color: white; border: 1px solid #ec4899; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/EmitTest.js

@@ -2,14 +2,13 @@ export const EmitTest = defineComponent({
     setup(props, { emit }) {
         const clickCount = signal(0)
         const lastEvent = signal('None')
-        
+
         inspect(clickCount, lastEvent)
-        
+
         return {
             clickCount,
             lastEvent,
-            
-            // Butoane pentru test emit
+
             emitSimple: () => {
                 clickCount(clickCount() + 1)
                 emit('simple-click')
@@ -22,7 +21,7 @@ export const EmitTest = defineComponent({
                 lastEvent(`click-with-data: ${count}`)
             },
             emitObject: () => {
-                const data = { 
+                const data = {
                     timestamp: Date.now(),
                     message: 'Hello from child!',
                     counter: clickCount() + 1
@@ -31,7 +30,7 @@ export const EmitTest = defineComponent({
                 emit('object-event', data)
                 lastEvent(`object-event: ${data.message}`)
             },
-            
+
             template: `
                 <div style="background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%); border: 2px solid #4da6ff; border-radius: 12px; padding: 24px; margin: 20px 0; color: #fff;">
                     <h3 style="margin: 0 0 16px 0; color: #4da6ff;">🧪 EMIT EVENTS TEST LAB</h3>

package/app/components/Loading.js

@@ -0,0 +1,26 @@
+import { defineComponent } from '../../framework/index.js'
+
+export const Loading = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="display: flex; justify-content: center; align-items: center; padding: 2rem;">
+                    <div style="
+                        width: 40px; 
+                        height: 40px; 
+                        border: 4px solid #f3f3f3; 
+                        border-top: 4px solid #3b82f6; 
+                        border-radius: 50%; 
+                        animation: spin 1s linear infinite;
+                    "></div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                </div>
+            `
+        }
+    }
+})

package/app/components/Loading.ts

@@ -0,0 +1,26 @@
+import { defineComponent } from '../../framework/index.js'
+
+export const Loading = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="display: flex; justify-content: center; align-items: center; padding: 2rem;">
+                    <div style="
+                        width: 40px; 
+                        height: 40px; 
+                        border: 4px solid #f3f3f3; 
+                        border-top: 4px solid #3b82f6; 
+                        border-radius: 50%; 
+                        animation: spin 1s linear infinite;
+                    "></div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                </div>
+            `
+        }
+    }
+})

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,13 +1,62 @@
-import { createRouter } from '../framework/index.js'
-import { Home } from './routes/Home.js'
-import { About } from './routes/About.js'
-import { TestFor } from './routes/TestFor.js'
+import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/index.js'
+import { Loading } from './components/Loading.js'
 
-createRouter([
-    { path: '/', component: Home },
-    { path: '/about', component: About },
-    { path: '/test-for', component: TestFor },
-])
+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: '/', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/Home.js'),
+            loadingComponent: Loading
+        }) 
+    },
+    { 
+        path: '/about', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/About.js'),
+            loadingComponent: Loading
+        }) 
+    },
+    { 
+        path: '/test-for', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestFor.js'),
+            loadingComponent: Loading
+        }) 
+    },
+    { 
+        path: '/dynamic', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestDynamic.js'),
+            loadingComponent: Loading
+        }) 
+    },
+    {
+        path: '/composables',
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestComposables.js'),
+            loadingComponent: Loading
+        })
+    },
+]
+
+createRouter(routes)
 
 const outlet = document.getElementById('app')
+if (!outlet) throw new Error('[app] #app element not found in DOM')
 mountOutlet(outlet)

package/app/main.ts

@@ -1,13 +1,59 @@
-import { createRouter, provide, inject } from '../framework/index.js'
+import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/index.js'
 import type { Route } from '../framework/types/index.js'
-import { Home } from './routes/Home.js'
-import { About } from './routes/About.js'
-import { TestFor } from './routes/TestFor.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: Home },
-    { path: '/about', component: About },
-    { path: '/test-for', component: TestFor },
+    { 
+        path: '/', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/Home.ts'),
+            loadingComponent: Loading
+        }) 
+    },
+    { 
+        path: '/about', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/About.ts'),
+            loadingComponent: Loading
+        }) 
+    },
+    { 
+        path: '/test-for', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestFor.ts'),
+            loadingComponent: Loading
+        }) 
+    },
+    { 
+        path: '/dynamic', 
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestDynamic.ts'),
+            loadingComponent: Loading
+        }) 
+    },
+    {
+        path: '/composables',
+        component: defineAsyncComponent({
+            loader: () => import('./routes/TestComposables.ts'),
+            loadingComponent: Loading
+        })
+    },
 ]
 
 createRouter(routes)