fusee-framework 0.1.0-alpha.1 → 1.0.1

package/README.md

@@ -1,8 +1,75 @@
-\# 🚀 Fusée v0.1.0-alpha
-
-
-
-Peak Performance JS Framework
-
-\*\*Signals + Components + SPA\*\*
-
+# Fusée Framework 🚀
+**v1.0.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, and a comprehensive CLI for instant application scaffolding.
+
+---
+
+## ⚡ Quick Start
+
+The fastest way to get started with Fusée is via the CLI:
+
+```bash
+# 1. Install Fusée globally
+npm install -g fusee-framework
+
+# 2. Scaffold your first project
+create-fusee-app .
+```
+Follow the interactive prompt to choose your template (**JavaScript** or **TypeScript**) and launch your app with `npm run dev`!
+
+---
+
+## 🔥 Key Features
+
+- **Signals-First Reactivity**: Modern atomic updates that ensure only the modified parts of the DOM are touched.
+- **Recursive Hybrid Compiler**: A robust architectural approach to node traversal, eliminating rendering bugs while maintaining "greedy" directive processing for speed.
+- **Strict Component System**: Use `defineComponent` for prop validation, lifecycle hooks (`onMount`, `onUnmount`), and automated cleanup.
+- **Optimized Directives**: Native support for `f-if`, `f-for`, `f-model`, `f-text`, `f-cloak` and more.
+- **Performance Shield (`f-once`)**: Isolate and stabilize static subtrees to prevent unnecessary reactivity.
+- **Vite Integration**: Full support for the fastest development workflow and Hot Module Replacement (HMR).
+
+---
+
+## 🛠 Project Structure
+
+A typical Fusée project looks like this:
+
+- **`framework/`**: The core reactive engine.
+- **`app/`**: Your application logic (routes, components).
+- **`index.html`**: The entry point of your reactive world.
+
+---
+
+## 📝 Example Component
+
+```javascript
+import { defineComponent, signal } from './framework/core/index.js';
+
+export const Counter = defineComponent({
+    setup() {
+        const count = signal(0);
+        return {
+            count,
+            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>
+            `
+        };
+    }
+});
+```
+
+---
+
+## 🚀 Future Roadmap
+
+- [ ] Global Store Management
+- [ ] Advanced file-based routing support
+
+Built with ❤️ by me, Sebi Somu, a forward-thinking JavaScript Architect.

package/app/components/Counter.js

@@ -1,38 +1,115 @@
-import { defineComponent, signal, onMount, onUnmount } from '../../framework/index.js'
+import { defineComponent, signal, computed, effect, batch, untrack, onMount, onUnmount } from '../../framework/index.js'
 
 export const Counter = defineComponent({
-  props: ['initialValue'],
-  setup(props) {
-    const count = signal(Number(props.initialValue) || 0)
-    const double = signal(0)
-
-    // Manual computed: keep double in sync
-    // (could use computed() from framework too)
-    function increment() { count(count() + 1); double(count() * 2) }
-    function decrement() { count(count() - 1); double(count() * 2) }
-    function reset()     { count(0); double(0) }
-
-    onMount(() => console.log('[Counter] mounted, initial:', count()))
-    onUnmount(() => console.log('[Counter] unmounted'))
-
-    return {
-      count,
-      double,
-      increment,
-      decrement,
-      reset,
-      template: `
-        <div class="counter">
-          <h2>Counter</h2>
-          <p class="value">{{ count }}</p>
-          <p class="derived">double: {{ double }}</p>
-          <div class="actions">
-            <button @click="decrement">−</button>
-            <button @click="reset">reset</button>
-            <button @click="increment">+</button>
-          </div>
-        </div>
-      `
+    props: {
+        initialValue: { type: String, default: '0' },
+        parentTitle: { type: String, default: '' }
+    },
+    setup(props) {
+        const count = signal(Number(props.initialValue) || 0)
+        const multiplier = signal(1)
+
+        const double = computed(() => {
+            console.log('[Counter] computing double...')
+            return count() * 2
+        })
+
+        const isZero = computed(() => count() === 0)
+
+        const counterTitle = computed(() =>
+            `Counter: ${count()} (×${multiplier()})`
+        )
+
+        const displayStyle = computed(() => ({
+            fontSize: '16rem',
+            fontWeight: '900',
+            lineHeight: '1',
+            margin: '0',
+            color: count() >= 0 ? '#3b82f6' : '#ef4444',
+            transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+            transform: `scale(${1 + (Math.abs(count()) % 3) * 0.1})`
+        }))
+
+        effect(() => {
+            console.log(`[Counter Effect] Count: ${count()} | Step ignored in tracking: ${untrack(() => multiplier())}`)
+        })
+
+        function updateMultiple() {
+            batch(() => {
+                count(count() + 5)
+                multiplier(multiplier() + 1)
+            })
+        }
+
+        function increment() { count(count() + 1) }
+        function decrement() { count(count() - 1) }
+        function reset() { count(0) }
+
+        onMount(() => console.log('[Counter] mounted, initial:', count()))
+        onUnmount(() => console.log('[Counter] unmounted'))
+
+        return {
+            count,
+            multiplier,
+            double,
+            isZero,
+            counterTitle,
+            increment,
+            decrement,
+            reset,
+            updateMultiple,
+            get parentTitle() { return props.parentTitle },
+            displayStyle,
+            template: `
+                <div class="counter" :title="counterTitle" @keydown.arrowup.window="increment" @keydown.arrowdown.window="decrement">
+                    <h2>Counter</h2>
+                    <p style="font-size: 0.8rem; color: #888;">Message from Home: {{ parentTitle }}</p>
+                    
+                    <div class="counter-display" style="text-align: center; margin: 60px 0;">
+                        <span style="display: block; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 3px; color: #888;">Current Value</span>
+                        <p class="value" 
+                           :class="{ positive: count >= 0, negative: count < 0 }"
+                           :style="displayStyle">
+                            {{ count }}
+                        </p>
+                        <span style="font-size: 1.2rem; color: #aaa;">(Multiplier step: {{ multiplier }})</span>
+                    </div>
+                    <p class="derived">double: {{ double }}</p>
+                    
+                    <div class="actions">
+                        <button @click.prevent="decrement">−</button>
+                        <button @click.once="reset" :disabled="isZero">Reset (Once only demo)</button>
+                        <button @click="increment">+</button>
+                        <button @click="updateMultiple">+5 & Step (Batched)</button>
+                    </div>
+
+                    <div class="extras" style="margin-top: 24px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px;">
+                        <p style="font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; color: #444;">Advanced Controls</p>
+                        
+                        <div style="display: flex; gap: 10px; margin-bottom: 15px;">
+                            <input 
+                                type="text" 
+                                placeholder="Set count..." 
+                                style="flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; outline: none; transition: border-color 0.2s;"
+                                onfocus="this.style.borderColor = '#3b82f6'"
+                                onblur="this.style.borderColor = '#ddd'"
+                                @keyup.enter="count(Number($event.target.value) || 0); $event.target.value = ''"
+                            >
+                            <button 
+                                style="padding: 10px 16px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 0.9rem; transition: opacity 0.2s;"
+                                onmouseover="this.style.opacity = '0.9'"
+                                onmouseout="this.style.opacity = '1'"
+                                @click="console.log('Clicked at: ' + $event.clientX + 'x' + $event.clientY)"
+                            >
+                                Log Position
+                            </button>
+                        </div>
+                        <p style="font-size: 0.75rem; color: #888;">
+                            Tip: Use Up/Down arrows to nudge globally, or Enter in the box above.
+                        </p>
+                    </div>
+                </div>
+            `
+        }
     }
-  }
 })

package/app/components/Counter.ts

@@ -0,0 +1,99 @@
+import { defineComponent, signal, computed, effect, batch, untrack, onMount, onUnmount, type Signal, type Computed } from '../../framework/index.js'
+
+type CounterProps = {
+    initialValue?: string
+    parentTitle?: string
+}
+
+type CounterResult = {
+    count: Signal<number>
+    multiplier: Signal<number>
+    double: Computed<number>
+    valueClass: Computed<string>
+    isZero: Computed<boolean>
+    counterTitle: Computed<string>
+    increment: () => void
+    decrement: () => void
+    reset: () => void
+    updateMultiple: () => void
+    parentTitle: string
+    template: string
+}
+
+export const Counter = defineComponent({
+    props: {
+        initialValue: { type: String, default: '0' },
+        parentTitle: { type: String, default: '' }
+    },
+    setup(props: CounterProps): CounterResult {
+        const count = signal<number>(Number(props.initialValue) || 0)
+        const multiplier = signal<number>(1)
+
+        const double = computed(() => count() * 2)
+
+        const valueClass = computed(() =>
+            count() >= 0 ? 'value positive' : 'value negative'
+        )
+
+        const isZero = computed(() => count() === 0)
+
+        const counterTitle = computed(() =>
+            `Counter: ${count()} (×${multiplier()})`
+        )
+
+        effect(() => {
+            console.log(`[Counter Effect] Count: ${count()} | Step ignored in tracking: ${untrack(() => multiplier())}`)
+        })
+
+        function updateMultiple(): void {
+            batch(() => {
+                count(count() + 5)
+                multiplier(multiplier() + 1)
+            })
+        }
+
+        function increment(): void {
+            count(count() + 1)
+        }
+
+        function decrement(): void {
+            count(count() - 1)
+        }
+
+        function reset(): void {
+            count(0)
+        }
+
+        onMount(() => console.log('[Counter] mounted, initial:', count()))
+        onUnmount(() => console.log('[Counter] unmounted'))
+
+        return {
+            count,
+            multiplier,
+            double,
+            valueClass,
+            isZero,
+            counterTitle,
+            increment,
+            decrement,
+            reset,
+            updateMultiple,
+            get parentTitle() { return props.parentTitle || '' },
+            template: `
+                <div class="counter" :title="counterTitle">
+                    <h2>Counter</h2>
+                    <p style="font-size: 0.8rem; color: #888;">Message from Home: {{ parentTitle }}</p>
+                    <p class="{{ valueClass }}">Count: {{ count }} (Multiplier step: {{ multiplier }})</p>
+                    <p class="derived">double: {{ double }}</p>
+                    <div class="actions">
+                        <button @click="decrement">−</button>
+                        <button @click="reset" :disabled="isZero">reset</button>
+                        <button @click="increment">+</button>
+                        <button @click="updateMultiple">+5 & Step (Batched)</button>
+                    </div>
+                </div>
+            `
+        }
+    }
+})
+

package/app/components/CounterSection.js

@@ -0,0 +1,34 @@
+import { defineComponent, signal } from '../../framework/index.js'
+import { Counter } from './Counter.js'
+
+export const CounterSection = defineComponent({
+    props: {
+        pageTitle: { type: String, default: '' }
+    },
+    components: { Counter },
+    setup(props) {
+        const showCounter = signal(true)
+
+        return {
+            showCounter,
+            get title() { return props.pageTitle },
+            toggleCounter: () => showCounter(!showCounter()),
+            template: `
+                <div style="margin-top: 30px; border-top: 1px solid #333; padding-top: 20px;">
+                    <h3>Counter Section</h3>
+                    <button @click="toggleCounter" class="primary-btn" style="margin: 10px 0;">Toggle Counter (f-if)</button>
+                    
+                    <div f-if="showCounter">
+                        {{ Counter initialValue="10" :parentTitle="title" }}
+                    </div>
+                    <div f-elif="title === 'Welcome!'">
+                        <p style="color: yellow;">Counter is hidden, but title is "Welcome!"</p>
+                    </div>
+                    <div f-else>
+                        <p style="color: red;">Counter is hidden and title is changed.</p>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/CounterSection.ts

@@ -0,0 +1,45 @@
+import { defineComponent, signal, type SignalAccessor } from '../../framework/index.js'
+import { Counter } from './Counter.js'
+
+type CounterSectionProps = {
+    pageTitle: string
+}
+
+type CounterSectionResult = {
+    showCounter: SignalAccessor<boolean>
+    title: string
+    toggleCounter: () => void
+    template: string
+}
+
+export const CounterSection = defineComponent({
+    props: {
+        pageTitle: { type: String, default: '' }
+    },
+    components: { Counter },
+    setup(props: CounterSectionProps): CounterSectionResult {
+        const showCounter = signal(true)
+
+        return {
+            showCounter,
+            get title() { return props.pageTitle },
+            toggleCounter: () => showCounter(!showCounter()),
+            template: `
+                <div style="margin-top: 30px; border-top: 1px solid #333; padding-top: 20px;">
+                    <h3>Counter Section</h3>
+                    <button @click="toggleCounter" class="primary-btn" style="margin: 10px 0;">Toggle Counter (f-if)</button>
+                    
+                    <div f-if="showCounter">
+                        {{ Counter initialValue="10" :parentTitle="title" }}
+                    </div>
+                    <div f-elif="title === 'Welcome!'">
+                        <p style="color: yellow;">Counter is hidden, but title is "Welcome!"</p>
+                    </div>
+                    <div f-else>
+                        <p style="color: red;">Counter is hidden and title is changed.</p>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/UserForm.js

@@ -0,0 +1,31 @@
+import { defineComponent, signal } from '../../framework/index.js'
+
+export const UserForm = defineComponent({
+    setup() {
+        const userName = signal('Guest')
+        const inputRef = signal(null)
+
+        return {
+            userName,
+            inputRef,
+            focusInput: () => {
+                const el = inputRef()
+                if (el) {
+                    console.log('[UserForm] Focused input via f-ref:', el)
+                    el.focus()
+                }
+            },
+            template: `
+                <div style="margin: 20px 0; background: #1a1a24; padding: 15px; border-radius: 8px;">
+                    <h2 style="color: #fff;">Hello, {{ userName || 'Guest' }}!</h2>
+                    <label style="display: block; margin-bottom: 8px; color: #8b8bff;">Two-way binding (f-model):</label>
+                    <div style="display: flex; gap: 10px;">
+                        <input type="text" f-ref="inputRef" f-model="userName" placeholder="Enter your name..." 
+                               style="padding: 8px 12px; border-radius: 4px; border: 1px solid #3a3a5a; background: #0f0f1a; color: #fff; width: 100%; max-width: 300px;" />
+                        <button @click="focusInput" class="primary-btn">Focus Field</button>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/UserForm.ts

@@ -0,0 +1,38 @@
+import { defineComponent, signal, type SignalAccessor } from '../../framework/index.js'
+
+type UserFormResult = {
+    userName: SignalAccessor<string>
+    inputRef: SignalAccessor<HTMLInputElement | null>
+    focusInput: () => void
+    template: string
+}
+
+export const UserForm = defineComponent({
+    setup(): UserFormResult {
+        const userName = signal('Guest')
+        const inputRef = signal<HTMLInputElement | null>(null)
+
+        return {
+            userName,
+            inputRef,
+            focusInput: () => {
+                const el = inputRef()
+                if (el) {
+                    console.log('[UserForm] Focused input via f-ref:', el)
+                    el.focus()
+                }
+            },
+            template: `
+                <div style="margin: 20px 0; background: #1a1a24; padding: 15px; border-radius: 8px;">
+                    <h2 style="color: #fff;">Hello, {{ userName || 'Guest' }}!</h2>
+                    <label style="display: block; margin-bottom: 8px; color: #8b8bff;">Two-way binding (f-model):</label>
+                    <div style="display: flex; gap: 10px;">
+                        <input type="text" f-ref="inputRef" f-model="userName" placeholder="Enter your name..." 
+                               style="padding: 8px 12px; border-radius: 4px; border: 1px solid #3a3a5a; background: #0f0f1a; color: #fff; width: 100%; max-width: 300px;" />
+                        <button @click="focusInput" class="primary-btn">Focus Field</button>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/main.js

@@ -1,10 +1,12 @@
 import { createRouter, mountOutlet } from '../framework/index.js'
 import { Home } from './routes/Home.js'
 import { About } from './routes/About.js'
+import { TestFor } from './routes/TestFor.js'
 
 createRouter([
-  { path: '/', component: Home },
-  { path: '/about', component: About },
+    { path: '/', component: Home },
+    { path: '/about', component: About },
+    { path: '/test-for', component: TestFor },
 ])
 
 const outlet = document.getElementById('app')

package/app/main.ts

@@ -0,0 +1,15 @@
+import { createRouter, mountOutlet } from '../framework/index.js'
+import type { Route } from '../framework/types/index.js'
+import { Home } from './routes/Home.js'
+import { About } from './routes/About.js'
+
+const routes: Route[] = [
+    { path: '/', component: Home },
+    { path: '/about', component: About },
+]
+
+createRouter(routes)
+
+const outlet = document.getElementById('app')
+if (!outlet) throw new Error('[app] #app element not found in DOM')
+mountOutlet(outlet)

package/app/routes/About.js

@@ -1,24 +1,24 @@
 import { defineComponent, signal, onMount } from '../../framework/index.js'
 
 export const About = defineComponent({
-  props: [],
-  setup() {
-    const loaded = signal(false)
+    props: [],
+    setup() {
+        const loaded = signal(false)
 
-    onMount(() => {
-      setTimeout(() => loaded(true), 300)
-    })
+        onMount(() => {
+            setTimeout(() => loaded(true), 300)
+        })
 
-    return {
-      loaded,
-      template: `
-        <div class="page">
-          <h1>About</h1>
-          <p>Framework custom — prototip SPA.</p>
-          <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
-          <p class="status">{{ loaded }}</p>
-        </div>
-      `
+        return {
+            loaded,
+            template: `
+                <div class="page">
+                    <h1>About</h1>
+                    <p>Framework custom — SPA prototipe</p>
+                    <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+                    <p class="status">{{ loaded }}</p>
+                </div>
+            `
+        }
     }
-  }
 })

package/app/routes/About.ts

@@ -0,0 +1,29 @@
+import { defineComponent, signal, onMount, type Signal, type EmptyProps } from '../../framework/index.js'
+
+type AboutResult = {
+    loaded: Signal<boolean>
+    template: string
+}
+
+export const About = defineComponent({
+    props: [],
+    setup(): AboutResult {
+        const loaded = signal<boolean>(false)
+
+        onMount(() => {
+            setTimeout(() => loaded(true), 300)
+        })
+
+        return {
+            loaded,
+            template: `
+                <div class="page">
+                    <h1>About</h1>
+                    <p>Framework custom — prototip SPA.</p>
+                    <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+                    <p class="status">{{ loaded }}</p>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/Home.js

@@ -1,22 +1,27 @@
 import { defineComponent, signal } from '../../framework/index.js'
-import { Counter } from '../components/Counter.js'
+import { UserForm } from '../components/UserForm.js'
+import { CounterSection } from '../components/CounterSection.js'
 
 export const Home = defineComponent({
-  props: [],
-  components: { Counter },
-  setup() {
-    const title = signal('Welcome!')
-
-    return {
-      title,
-      template: `
-        <div class="page">
-          <h1>{{ title }}</h1>
-          <p>This is an SPA built with my own JavaScript custom framework!</p>
-          <p>Made with passion by Sebastian Șomu</p>
-          {{ Counter }}
-        </div>
-      `
+    components: { UserForm, CounterSection },
+    setup() {
+        const title = signal('Welcome!')
+        return {
+            title,
+            changeTitle: () => title('Changed Title!'),
+            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>
+                    
+                    {{ UserForm }}
+                    
+                    {{ CounterSection :pageTitle="title" }}
+                </div>
+            `
+        }
     }
-  }
 })