fusee-framework 1.2.1 → 1.4.0

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>
+            `
+        }
+    }
+})

package/app/routes/TestComposables.ts

@@ -0,0 +1,158 @@
+import { defineComponent } from '../../framework/index.js'
+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<string>('demo-theme', 'dark')
+        const nickname = useLocalStorage<string>('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>
+            `
+        }
+    }
+})

package/app/routes/TestDynamic.js

@@ -0,0 +1,40 @@
+import { DynamicA } from '../components/DynamicA.js'
+import { DynamicB } from '../components/DynamicB.js'
+
+export const TestDynamic = defineComponent({
+    components: { DynamicA, DynamicB },
+    setup() {
+        const currentType = signal('DynamicA')
+        const sharedTitle = signal('Test Dinamic active')
+
+        return {
+            currentType,
+            sharedTitle,
+            toggle: () => {
+                currentType(currentType() === 'DynamicA' ? 'DynamicB' : 'DynamicA')
+            },
+            template: `
+                <div class="page">
+                    <h1>Dynamic Components System (Vue-style)</h1>
+                    <p>Using the custom <code>f-is</code> directive.</p>
+                    
+                    <div style="margin: 20px 0; display: flex; gap: 10px; align-items: center;">
+                        <button @click="toggle" class="primary-btn">Toggle Component</button>
+                        <span>Active: <strong>{{ currentType }}</strong></span>
+                    </div>
+
+                    <input f-model="sharedTitle" style="margin-bottom: 20px; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; width: 100%;">
+
+                    <hr style="border: 0; border-top: 1px solid #444; margin: 30px 0;">
+
+                    <div f-is="currentType" f-keepAlive :title="sharedTitle"></div>
+                    
+                    <p style="margin-top: 40px; color: #888; font-size: 0.9em;">
+                        Note: The component above changes reactively when you click the button. 
+                        The <code>:title</code> prop is automatically passed to the active component.
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/TestDynamic.ts

@@ -0,0 +1,40 @@
+import { DynamicA } from '../components/DynamicA.js'
+import { DynamicB } from '../components/DynamicB.js'
+
+export const TestDynamic = defineComponent({
+    components: { DynamicA, DynamicB },
+    setup() {
+        const currentType = signal('DynamicA')
+        const sharedTitle = signal('Dynamic Test Active')
+
+        return {
+            currentType,
+            sharedTitle,
+            toggle: () => {
+                currentType(currentType() === 'DynamicA' ? 'DynamicB' : 'DynamicA')
+            },
+            template: `
+                <div class="page">
+                    <h1>Dynamic Components System (Vue-style)</h1>
+                    <p>Using the custom <code>f-is</code> directive.</p>
+                    
+                    <div style="margin: 20px 0; display: flex; gap: 10px; align-items: center;">
+                        <button @click="toggle" class="primary-btn">Toggle Component</button>
+                        <span>Active: <strong>{{ currentType }}</strong></span>
+                    </div>
+
+                    <input f-model="sharedTitle" style="margin-bottom: 20px; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; width: 100%;">
+
+                    <hr style="border: 0; border-top: 1px solid #444; margin: 30px 0;">
+
+                    <div f-is="currentType" :title="sharedTitle"></div>
+                    
+                    <p style="margin-top: 40px; color: #888; font-size: 0.9em;">
+                        Note: The component above changes reactively when you click the button. 
+                        The <code>:title</code> prop is automatically passed to the active component.
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/TestFor.js

@@ -11,11 +11,10 @@ export const TestFor = defineComponent({
             items,
             addItem: () => {
                 const nextId = Math.max(0, ...items().map(i => i.id)) + 1
-                items([...items(), { id: nextId, name: `Item ${nextId}` }])
+                items.push({ id: nextId, name: `Item ${nextId}` })
             },
             shuffleItems: () => {
-                const shuffled = [...items()].sort(() => Math.random() - 0.5)
-                items(shuffled)
+                items.sort(() => Math.random() - 0.5)
             },
             template: `
                 <div class="page">

package/app/routes/TestFor.ts

@@ -23,11 +23,10 @@ export const TestFor = defineComponent({
             addItem: () => {
                 const nextIds = items().map(i => i.id)
                 const nextId = nextIds.length > 0 ? Math.max(...nextIds) + 1 : 1
-                items([...items(), { id: nextId, name: `Item ${nextId}` }])
+                items.push({ id: nextId, name: `Item ${nextId}` })
             },
             shuffleItems: () => {
-                const shuffled = [...items()].sort(() => Math.random() - 0.5)
-                items(shuffled)
+                items.sort(() => Math.random() - 0.5)
             },
             template: `
                 <div class="page">

package/auto-imports.d.ts

@@ -9,6 +9,7 @@ declare global {
   const batch: typeof import('fusee-framework').batch
   const computed: typeof import('fusee-framework').computed
   const defineComponent: typeof import('fusee-framework').defineComponent
+  const directive: typeof import('fusee-framework').directive
   const effect: typeof import('fusee-framework').effect
   const emit: typeof import('fusee-framework').emit
   const inject: typeof import('fusee-framework').inject

package/framework/auto-import-preset.js

@@ -3,6 +3,7 @@ export const FuseePreset = {
         'signal', 'computed', 'effect',
         'batch', 'untrack', 'inspect',
         'defineComponent', 'onMount', 'onUnmount',
+        'directive',
         'mountOutlet', 'mountTemplate', 'emit'
     ]
 }

package/framework/core/component.js

@@ -7,6 +7,10 @@ setEffectHook(eff => {
     if (currentInstance) currentInstance._effects.push(eff)
 })
 
+export function getCurrentInstance() {
+    return currentInstance
+}
+
 function resolveProps(schema, received) {
     const isArray = Array.isArray(schema)
     const resolved = {}
@@ -68,9 +72,6 @@ function resolveProps(schema, received) {
     return resolved
 }
 
-// ── Emit ──────────────────────────────────────────────────────────────────────
-// listeners: { change: fn, submit: fn, ... }
-// emit('change', 42) → calls listeners.change(42)
 function createEmit(listeners) {
     return function emit(eventName, ...args) {
         const handler = listeners[eventName]
@@ -82,10 +83,6 @@ function createEmit(listeners) {
     }
 }
 
-// ── Slots ─────────────────────────────────────────────────────────────────────
-// Parses slot content from parent HTML string.
-// Named slots: <template slot="header">...</template>
-// Default slot: everything else
 export function parseSlots(slotHTML) {
     const slots = { default: '' }
     if (!slotHTML || !slotHTML.trim()) return slots
@@ -105,19 +102,15 @@ export function parseSlots(slotHTML) {
     return slots
 }
 
-// Replaces <slot> and <slot name="x"> in template with actual slot content
 function resolveSlots(template, slots) {
-    // Handle named slots with any content between tags (including default content)
     let result = template.replace(/<slot\s+name="([^"]+)"\s*>[\s\S]*?<\/slot>/gi, (match, name) => {
         return slots[name] ?? ''
     })
-    // Handle default slots with any content between tags
     result = result.replace(/<slot\s*>[\s\S]*?<\/slot>/gi, () => {
         return slots.default ?? ''
     })
-    // Handle self-closing named slots
+
     result = result.replace(/<slot\s+name="([^"]+)"\s*\/>/gi, (_, name) => slots[name] ?? '')
-    // Handle self-closing default slots
     result = result.replace(/<slot\s*\/>/gi, () => slots.default ?? '')
     return result
 }
@@ -131,10 +124,6 @@ export function onUnmount(fn) {
 }
 
 export function defineComponent(options) {
-    // ComponentFactory now accepts props + optional { listeners, slots, parent }
-    // listeners: event handlers from parent @eventName="handler"
-    // slots: parsed slot HTML from parent
-    // parent: parent component instance for provide/inject
     return function ComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
         const instance = {
             props: options.props ? resolveProps(options.props, props) : props,
@@ -149,16 +138,13 @@ export function defineComponent(options) {
         const emit = createEmit(listeners)
 
         currentInstance = instance
-        // setup() receives (props, { emit, slots })
         const result = options.setup(instance.props, { emit, slots })
-        // Store instance reference on result for child component access
         result._instance = instance
         currentInstance = null
 
         function render(container) {
             instance._element = container
 
-            // Resolve slot placeholders before mounting
             const resolvedTemplate = resolveSlots(result.template, slots)
 
             const { effects } = mountTemplate(
@@ -187,15 +173,84 @@ export function defineComponent(options) {
 }
 
 export function provide(key, value) {
-    if(!currentInstance) return
+    if (!currentInstance) return
     currentInstance._provides[key] = value
 }
 
 export function inject(key) {
     let parent = currentInstance?._parent
-    while(parent) {
+    while (parent) {
         if (key in parent._provides) return parent._provides[key];
         parent = parent._parent;
     }
     return null;
+}
+
+export function defineAsyncComponent(loaderOrOptions) {
+    const options = typeof loaderOrOptions === 'function'
+        ? { loader: loaderOrOptions }
+        : loaderOrOptions
+
+    return function AsyncComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
+        const instance = {
+            props,
+            _mountHooks: [],
+            _unmountHooks: [],
+            _effects: [],
+            _element: null,
+            _provides: {},
+            _parent: parent,
+        }
+
+        let childApi = null
+        let loadingApi = null
+        let isUnmounted = false
+
+        function render(container) {
+            instance._element = container
+
+            if (options.loadingComponent) {
+                loadingApi = options.loadingComponent({}, { parent })
+                loadingApi.render(container)
+            } else {
+                container.innerHTML = '<!-- async component boundary -->'
+            }
+
+            Promise.resolve(options.loader())
+                .then(comp => {
+                    if (isUnmounted) return
+                    let ComponentFn = comp.default || comp
+
+                    if (typeof ComponentFn === 'object' && ComponentFn !== null) {
+                        ComponentFn = Object.values(ComponentFn).find(v => typeof v === 'function') || ComponentFn
+                    }
+
+                    if (loadingApi) {
+                        loadingApi.unmount()
+                        loadingApi = null
+                    }
+
+                    childApi = ComponentFn(props, { listeners, slots, parent })
+
+                    container.innerHTML = ''
+                    childApi.render(container)
+                })
+                .catch(err => {
+                    console.error('[framework] Failed to load async component:', err)
+                })
+
+            return instance
+        }
+
+        function unmount() {
+            isUnmounted = true
+            if (loadingApi) loadingApi.unmount()
+            if (childApi) childApi.unmount()
+            if (instance._element && !childApi && !loadingApi) {
+                instance._element.innerHTML = ''
+            }
+        }
+
+        return { render, unmount, instance }
+    }
 }

package/framework/core/composable.js

@@ -0,0 +1,27 @@
+import { getCurrentInstance } from './component.js'
+
+export function defineComposable(fn) {
+    const composable = function (...args) {
+        return fn(...args)
+    }
+
+    composable._isComposable = true
+
+    Object.defineProperty(composable, 'name', {
+        value: fn.name || 'composable',
+        configurable: true
+    })
+
+    return composable
+}
+
+export function assertSetupContext(name) {
+    const instance = getCurrentInstance()
+    if (!instance) {
+        console.warn(
+            `[framework] ${name ? name + ' ' : ''}composable was called outside of setup(). ` +
+            `Lifecycle hooks (onMount, onUnmount) and injections will not work.`
+        )
+    }
+    return instance
+}