fusee-framework 1.5.2 → 1.5.3

package/README.md

@@ -1,5 +1,5 @@
 # Fusée Framework 🚀
-**v1.5.2 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.5.3 — 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/routes/Home.js

@@ -9,29 +9,67 @@ export const Home = defineComponent({
     setup() {
         const title = signal('Welcome!')
         inspect(title)
-        
+
+        const isActive = signal(false)
+        const isDisabled = signal(false)
+        const isLarge = signal(false)
+        const basicClasses = computed(() => ({
+            active: isActive(),
+            disabled: isDisabled(),
+            'is-large': isLarge()
+        }))
+
+        const toggleActive = () => isActive(!isActive())
+        const toggleDisabled = () => isDisabled(!isDisabled())
+        const toggleLarge = () => isLarge(!isLarge())
+
         return {
             title,
             changeTitle: () => title('Changed Title!'),
-            
+
+            isActive,
+            isDisabled,
+            isLarge,
+            basicClasses,
+            toggleActive,
+            toggleDisabled,
+            toggleLarge,
+
             // 🧪 Emit Event Handlers
             handleCounterChange: (value) => console.log('📢 Counter changed to:', value),
             handleCounterReset: () => console.log('🔄 Counter reset requested!'),
             handleCustomEvent: (count, multiplier) => console.log('🎯 Custom event:', { count, multiplier }),
-            
+
             // 🧪 Emit Test Handlers
             handleSimpleClick: () => console.log('✅ SIMPLE CLICK received from child!'),
             handleClickWithData: (count, label, timestamp) => console.log('✅ CLICK WITH DATA:', { count, label, timestamp }),
             handleObjectEvent: (data) => console.log('✅ OBJECT EVENT received:', data),
-            
+
             template: `
                 <div class="page">
                     <h1>{{ title.toUpperCase() }}</h1>
                     <p>This is an SPA built with my own JavaScript custom framework!</p>
                     <p>Made with passion by Sebastian Șomu</p>
-                    
+
                     <button @click="changeTitle" class="primary-btn" style="margin-bottom: 20px;">Change App Title</button>
-                    
+
+                    <!-- 🎨 f-classList Demo -->
+                    <h3 style="margin-top: 40px; margin-bottom: 20px; color: #f59e0b;">🎨 f-classList Demo</h3>
+                    <div class="demo-box" f-classList="basicClasses">
+                        Demo Box (hover me!)
+                    </div>
+                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem;">
+                        <button @click="toggleActive" :class="isActive ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isActive ? '✓ Active' : '○ Active' }}
+                        </button>
+                        <button @click="toggleDisabled" :class="isDisabled ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isDisabled ? '✓ Disabled' : '○ Disabled' }}
+                        </button>
+                        <button @click="toggleLarge" :class="isLarge ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isLarge ? '✓ Large' : '○ Large' }}
+                        </button>
+                    </div>
+
                     {{ UserForm }}
                     
                     {{ CounterSection @counter-change="handleCounterChange" @counter-reset="handleCounterReset" @custom-event="handleCustomEvent" :pageTitle="title" }}

package/app/routes/Home.ts

@@ -4,26 +4,72 @@ import { CounterSection } from '../components/CounterSection.js'
 type HomeResult = {
     title: Signal<string>
     changeTitle: () => void
+    isActive: Signal<boolean>
+    isDisabled: Signal<boolean>
+    isLarge: Signal<boolean>
+    basicClasses: Computed<ClassListObject>
+    toggleActive: () => void
+    toggleDisabled: () => void
+    toggleLarge: () => void
     template: string
 }
 
+type ClassListObject = Record<string, boolean>
+
 export const Home = defineComponent({
     components: { UserForm, CounterSection },
     setup(): HomeResult {
         const title = signal<string>('Welcome!')
+
+        const isActive = signal(false)
+        const isDisabled = signal(false)
+        const isLarge = signal(false)
+        const basicClasses = computed(() => ({
+            active: isActive(),
+            disabled: isDisabled(),
+            'is-large': isLarge()
+        }))
+
+        const toggleActive = () => isActive(!isActive())
+        const toggleDisabled = () => isDisabled(!isDisabled())
+        const toggleLarge = () => isLarge(!isLarge())
+
         return {
             title,
             changeTitle: () => title('Changed Title!'),
+            isActive,
+            isDisabled,
+            isLarge,
+            basicClasses,
+            toggleActive,
+            toggleDisabled,
+            toggleLarge,
             template: `
                 <div class="page">
                     <h1>{{ title.toUpperCase() }}</h1>
                     <p>This is an SPA built with my own (TypeScript!) custom framework!</p>
                     <p>Made with passion by Sebastian Șomu</p>
-                    
+
                     <button @click="changeTitle" class="primary-btn" style="margin-bottom: 20px;">Change App Title</button>
-                    
+
+                    <h3 style="margin-top: 40px; margin-bottom: 20px; color: #f59e0b;">🎨 f-classList Demo</h3>
+                    <div class="demo-box" f-classList="basicClasses">
+                        Demo Box (hover me!)
+                    </div>
+                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem;">
+                        <button @click="toggleActive" :class="isActive ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isActive ? '✓ Active' : '○ Active' }}
+                        </button>
+                        <button @click="toggleDisabled" :class="isDisabled ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isDisabled ? '✓ Disabled' : '○ Disabled' }}
+                        </button>
+                        <button @click="toggleLarge" :class="isLarge ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isLarge ? '✓ Large' : '○ Large' }}
+                        </button>
+                    </div>
+
                     {{ UserForm }}
-                    
+
                     {{ CounterSection :pageTitle="title" }}
                 </div>
             `

package/framework/core/directives.js

@@ -81,6 +81,7 @@ export function processDirectives(root, context, components, effects) {
     processText(root, context, effects)
     processEvents(root, context, effects)
     processCustomDirectives(root, context, effects)
+    processClassList(root, context, effects)
     processCloak(root)
 
     return false
@@ -589,3 +590,43 @@ export function processCloak(el) {
     const els = el.querySelectorAll('[f-cloak]')
     for (const e of els) e.removeAttribute('f-cloak')
 }
+
+export function processClassList(el, context, effects) {
+    if (el.nodeType !== 1 || !el.hasAttribute('f-classList')) return
+
+    const expr = el.getAttribute('f-classList')
+    el.removeAttribute('f-classList')
+
+    const appliedClasses = new Set()
+
+    const e = effect(() => {
+        const result = evaluateExpression(expr, context)
+
+        if (!result || typeof result !== 'object') {
+            console.warn(`[framework] f-classList must evaluate to an object, got: ${typeof result}`)
+            return
+        }
+
+        for (const [className, shouldApply] of Object.entries(result)) {
+            const isApplied = appliedClasses.has(className)
+
+            if (shouldApply && !isApplied) {
+                el.classList.add(className)
+                appliedClasses.add(className)
+            } else if (!shouldApply && isApplied) {
+                el.classList.remove(className)
+                appliedClasses.delete(className)
+            }
+        }
+
+        const currentClasses = new Set(Object.keys(result))
+        for (const className of [...appliedClasses]) {
+            if (!currentClasses.has(className)) {
+                el.classList.remove(className)
+                appliedClasses.delete(className)
+            }
+        }
+    })
+
+    effects.push(e)
+}

package/framework/core/signal.js

@@ -61,6 +61,7 @@ export function signal(initialValue) {
 export function effect(fn) {
     let active = true
     let running = false
+    const nestedEffects = new Set()
 
     const run = () => {
         if (!active || running) {
@@ -69,14 +70,28 @@ export function effect(fn) {
         }
 
         running = true
+
+        for (const childCleanup of nestedEffects) {
+            childCleanup()
+        }
+        nestedEffects.clear()
+
         for (const dep of run.deps) dep.delete(run)
         run.deps.clear()
 
         const prevEffect = currentEffect
+        const prevOnEffectCreated = onEffectCreated
+
+        onEffectCreated = (childCleanup) => {
+            nestedEffects.add(childCleanup)
+            if (prevOnEffectCreated) prevOnEffectCreated(childCleanup)
+        }
+
         currentEffect = run
         try { fn() }
         finally {
             currentEffect = prevEffect
+            onEffectCreated = prevOnEffectCreated
             running = false
         }
     }
@@ -88,6 +103,12 @@ export function effect(fn) {
         pendingEffects.delete(run)
         for (const dep of run.deps) dep.delete(run)
         run.deps.clear()
+
+        // Cleanup all nested effects when parent stops
+        for (const childCleanup of nestedEffects) {
+            childCleanup()
+        }
+        nestedEffects.clear()
     }
 
     if (onEffectCreated) onEffectCreated(cleanup)

package/framework/types/directives.d.ts

@@ -36,6 +36,7 @@ export function processShow(root: HTMLElement, context: ComponentResult, effects
 export function processHtml(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
 export function processText(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
 export function processEvents(root: HTMLElement, context: ComponentResult): void
+export function processClassList(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
 export function processCloak(root: HTMLElement): void
 
 export interface DirectiveBinding<V = any> {

package/index.html

@@ -293,6 +293,259 @@
     .cmp-input:focus {
       border-color: #8b8bff;
     }
+
+    /* ── f-classList demo styles (Home page) ─────────────────────── */
+    .demo-box {
+      width: 200px;
+      height: 100px;
+      background: #1a1a24;
+      border: 2px solid #3a3a5a;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      margin-top: 1rem;
+    }
+
+    .demo-box.active {
+      border-color: #8b8bff;
+      background: rgba(139, 139, 255, 0.1);
+      box-shadow: 0 0 20px rgba(139, 139, 255, 0.3);
+    }
+
+    .demo-box.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .demo-box.is-large {
+      width: 300px;
+      height: 150px;
+      font-size: 1.2rem;
+    }
+
+    .btn-on {
+      background: #8b8bff !important;
+      border-color: #8b8bff !important;
+      color: #fff !important;
+    }
+
+    .btn-off {
+      background: #1a1a24 !important;
+      border-color: #555 !important;
+      color: #888 !important;
+    }
+
+    .test-classlist h1 {
+      color: #f59e0b;
+      text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
+    }
+
+    .test-classlist .subtitle {
+      color: #aaa;
+      font-size: 0.9rem;
+      margin-bottom: 2rem;
+    }
+
+    .demo-section {
+      background: #13131d;
+      border: 1px solid #2a2a3a;
+      border-radius: 12px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .demo-section h2 {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #e8e8f0;
+      margin-bottom: 1rem;
+    }
+
+    .demo-box {
+      width: 200px;
+      height: 100px;
+      background: #1a1a24;
+      border: 2px solid #3a3a5a;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      margin-bottom: 1rem;
+    }
+
+    .demo-box.active {
+      border-color: #8b8bff;
+      background: rgba(139, 139, 255, 0.1);
+      box-shadow: 0 0 20px rgba(139, 139, 255, 0.3);
+    }
+
+    .demo-box.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .demo-box.is-large {
+      width: 300px;
+      height: 150px;
+      font-size: 1.2rem;
+    }
+
+    .controls {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    .controls button {
+      padding: 0.5rem 1rem;
+      border: 1px solid #3a3a5a;
+      background: #0f0f1a;
+      color: #e8e8f0;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .controls button:hover {
+      background: #2a2a3a;
+    }
+
+    .controls button.btn-on {
+      background: #8b8bff;
+      border-color: #8b8bff;
+      color: #fff;
+    }
+
+    .controls button.btn-off {
+      background: #1a1a24;
+      border-color: #555;
+      color: #888;
+    }
+
+    .theme-box {
+      padding: 1.5rem;
+      border-radius: 8px;
+      border: 2px solid #3a3a5a;
+      transition: all 0.3s ease;
+      margin-bottom: 1rem;
+    }
+
+    .theme-box.theme-light {
+      background: rgba(245, 158, 11, 0.1);
+      border-color: #f59e0b;
+      color: #f59e0b;
+    }
+
+    .theme-box.theme-dark {
+      background: rgba(139, 139, 255, 0.1);
+      border-color: #8b8bff;
+      color: #8b8bff;
+    }
+
+    .theme-toggle {
+      padding: 0.6rem 1.25rem;
+      background: #f59e0b;
+      color: #000;
+      border: none;
+      border-radius: 6px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .theme-toggle:hover {
+      background: #d97706;
+    }
+
+    .action-btn {
+      padding: 0.75rem 1.5rem;
+      border: 2px solid #3a3a5a;
+      background: #1a1a24;
+      color: #e8e8f0;
+      border-radius: 8px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      margin-bottom: 1rem;
+    }
+
+    .action-btn.btn-primary {
+      border-color: #8b8bff;
+      color: #8b8bff;
+    }
+
+    .action-btn.btn-primary:hover {
+      background: rgba(139, 139, 255, 0.1);
+    }
+
+    .action-btn.btn-loading {
+      border-color: #f59e0b;
+      color: #f59e0b;
+      animation: pulse 1.5s infinite;
+    }
+
+    .action-btn.btn-error {
+      border-color: #ff3333;
+      background: rgba(255, 51, 51, 0.1);
+      color: #ff3333;
+    }
+
+    .action-btn.btn-active {
+      transform: scale(0.95);
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .info-section {
+      background: #0f0f1a;
+      border: 1px solid #2a2a3a;
+      border-radius: 12px;
+      padding: 1.5rem;
+      margin-top: 2rem;
+    }
+
+    .info-section h2 {
+      color: #34d399;
+      margin-bottom: 1rem;
+    }
+
+    .info-section ul {
+      margin-left: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .info-section li {
+      color: #aaa;
+      margin-bottom: 0.5rem;
+      line-height: 1.5;
+    }
+
+    .info-section li strong {
+      color: #e8e8f0;
+    }
+
+    .code-example {
+      background: #1a1a24;
+      border: 1px solid #2a2a3a;
+      border-radius: 8px;
+      padding: 1rem;
+    }
+
+    .code-example pre {
+      color: #8b8bff;
+      font-family: 'Courier New', monospace;
+      font-size: 0.85rem;
+      margin: 0;
+      overflow-x: auto;
+    }
   </style>
 </head>
 

package/package.json

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