fusee-framework 1.6.0 → 1.8.0

package/app/pages/[...all].js

@@ -0,0 +1,35 @@
+import { currentRoute, navigate } from '../../framework/index.js'
+
+export const WildcardDemo = defineComponent({
+    setup() {
+        const path = currentRoute
+
+        return {
+            path,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #f59e0b;">🎯 Wildcard Match!</h1>
+                    <p>This route matched via wildcard <code>path: '*'</code></p>
+                    
+                    <div class="demo-card">
+                        <h2>Current Path</h2>
+                        <code style="color: #f59e0b; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>Test Wildcard</h2>
+                        <p>Any path works here:</p>
+                        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                            <button @click="navigate('/random-123')" class="cmp-btn">/random-123</button>
+                            <button @click="navigate('/test/abc')" class="cmp-btn">/test/abc</button>
+                            <button @click="navigate('/deep/nested/path')" class="cmp-btn">/deep/nested/path</button>
+                        </div>
+                    </div>
+
+                    <button @click="navigate('/')" class="primary-btn">Back Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/[...all].ts

@@ -0,0 +1,35 @@
+import { currentRoute, navigate } from '../../framework/index.js'
+
+export const WildcardDemo = defineComponent({
+    setup() {
+        const path = currentRoute
+
+        return {
+            path,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #f59e0b;">🎯 Wildcard Match!</h1>
+                    <p>This route matched via wildcard <code>path: '*'</code></p>
+                    
+                    <div class="demo-card">
+                        <h2>Current Path</h2>
+                        <code style="color: #f59e0b; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>Test Wildcard</h2>
+                        <p>Any path works here:</p>
+                        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                            <button @click="navigate('/random-123')" class="cmp-btn">/random-123</button>
+                            <button @click="navigate('/test/abc')" class="cmp-btn">/test/abc</button>
+                            <button @click="navigate('/deep/nested/path')" class="cmp-btn">/deep/nested/path</button>
+                        </div>
+                    </div>
+
+                    <button @click="navigate('/')" class="primary-btn">Back Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/_layout.js

@@ -0,0 +1,53 @@
+import { defineComponent } from '../../framework/index.js'
+
+
+
+export const RootLayout = defineComponent({
+
+    setup() {
+
+        return {
+
+            template: `
+
+                <div class="root-layout">
+
+                    <nav>
+
+                        <a href="/" f-link>Home</a>
+
+                        <a href="/about" f-link>About</a>
+
+                        <a href="/test-for" f-link>Loops Test</a>
+
+                        <a href="/dynamic" f-link style="color: #ec4899;">Dynamic Components</a>
+
+                        <a href="/composables" f-link style="color: #34d399;">Composables</a>
+
+                        <a href="/users" f-link style="color: #f59e0b;">👥 Users (Nested)</a>
+
+                        <a href="/router-example" f-link style="color: #8b8bff;">🔗 Router Example</a>
+                        <a href="/async-work" f-link style="color: #34d399;">⚡ Async Work</a>
+
+                    </nav>
+
+                    
+
+                    <main class="content-wrap">
+
+                        <!-- This is where all pages will be rendered -->
+
+                        <div data-router-view></div>
+
+                    </main>
+
+                </div>
+
+            `
+
+        }
+
+    }
+
+})
+

package/app/pages/_layout.ts

@@ -0,0 +1,26 @@
+import { defineComponent } from '../../framework/index.js'
+
+export const RootLayout = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div class="root-layout">
+                    <nav>
+                        <a href="/" f-link>Home</a>
+                        <a href="/about" f-link>About</a>
+                        <a href="/test-for" f-link>Loops Test</a>
+                        <a href="/dynamic" f-link style="color: #ec4899;">Dynamic Components</a>
+                        <a href="/composables" f-link style="color: #34d399;">Composables</a>
+                        <a href="/users" f-link style="color: #f59e0b;">👥 Users (Nested)</a>
+                        <a href="/router-example" f-link style="color: #8b8bff;">🔗 Router Example</a>
+                    </nav>
+                    
+                    <main class="content-wrap">
+                        <!-- This is where all pages will be rendered -->
+                        <div data-router-view></div>
+                    </main>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/about.js

@@ -0,0 +1,23 @@
+export const About = defineComponent({
+    props: [],
+    setup() {
+        const loaded = signal(false)
+        inspect(loaded)
+
+        onMount(() => {
+            setTimeout(() => loaded(true), 300)
+        })
+
+        return {
+            loaded,
+            template: `
+                <div class="page">
+                    <h1>About</h1>
+                    <p>Framework custom — SPA prototipe</p>
+                    <p><strong>Features:</strong> signals, defineComponent, History API router, lifecycle hooks.</p>
+                    <p class="status">{{ loaded }}</p>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/about.ts

@@ -0,0 +1,29 @@
+import type { Signal, 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, History API router, lifecycle hooks.</p>
+                    <p class="status">{{ loaded }}</p>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/async-work.js

@@ -0,0 +1,65 @@
+import { defineComponent, signal, resource } from '../../framework/index.js'
+
+export default defineComponent({
+    setup() {
+        const userId = signal(1)
+
+        const [user, { refetch }] = resource(userId, async (id) => {
+            const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
+            if (!response.ok) throw new Error('User not found')
+            return response.json()
+        })
+
+        return {
+            userId,
+            user,
+            refetch,
+            next: () => userId(userId() + 1),
+            prev: () => userId() > 1 && userId(userId() - 1),
+            template: `
+                <div class="page">
+                    <h1>⚡ Async Work with Resources</h1>
+                    <p>This page demonstrates the new <code>resource</code> primitive, inspired by SolidJS. It handles async data fetching with reactive loading and error states.</p>
+                    
+                    <div class="demo-section">
+                        <div class="flex gap-2 mb-6">
+                            <button @click="prev" class="cmp-btn minus" :disabled="userId() <= 1">← Previous</button>
+                            <button @click="next" class="cmp-btn plus">Next User →</button>
+                            <button @click="refetch" class="cmp-btn reset">🔄 Refetch</button>
+                            <span class="ml-4 flex items-center">Current ID: <strong>{{ userId }}</strong></span>
+                        </div>
+
+                        <div f-if="user.loading()">
+                            <div class="action-btn btn-loading">Fetching data from API...</div>
+                        </div>
+
+                        <div f-if="user.error()">
+                            <div class="action-btn btn-error">
+                                <strong>Error:</strong> {{ user.error().message }}
+                            </div>
+                        </div>
+
+                        <div f-if="user() && !user.loading()">
+                            <div class="theme-box theme-dark">
+                                <h2 class="text-xl font-bold mb-2">{{ user().name }}</h2>
+                                <p><strong>Username:</strong> @{{ user().username }}</p>
+                                <p><strong>Email:</strong> {{ user().email }}</p>
+                                <p><strong>Website:</strong> <a :href="'https://' + user().website" target="_blank" style="color: #8b8bff">{{ user().website }}</a></p>
+                                <p><strong>Company:</strong> {{ user().company.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="info-section">
+                        <h2>How it works:</h2>
+                        <ul>
+                            <li><strong>Reactive Source:</strong> The fetcher automatically reruns when <code>userId</code> changes.</li>
+                            <li><strong>State Tracking:</strong> <code>user.loading()</code> and <code>user.error()</code> are signals updated by the framework.</li>
+                            <li><strong>Batching:</strong> Loading and data states are updated atomically to prevent UI flickers.</li>
+                        </ul>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/composables.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/pages/composables.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/pages/dynamic.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>
+            `
+        }
+    }
+})