fusee-framework 1.6.0 → 1.8.0

package/app/pages/router-example.ts

@@ -0,0 +1,56 @@
+import { currentRoute, navigate, routeParams, computed } from '../../framework/index.js'
+
+export const RouterExample = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔗 Router API Demo</h1>
+
+                    <div class="demo-card">
+                        <h2>currentRoute Signal</h2>
+                        <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeParams Signal (Dynamic Routes)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/objects/123" f-link class="cmp-btn" style="text-decoration: none;">Object 123</a>
+                            <a href="/objects/456" f-link class="cmp-btn" style="text-decoration: none;">Object 456</a>
+                            <a href="/posts/tech/my-post" f-link class="cmp-btn" style="text-decoration: none;">Post Route</a>
+                        </div>
+                        <code style="color: #34d399; font-size: 1.2rem;">{{ paramsJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Dynamic routes use :param syntax (e.g., /users/:id or /posts/:category/:slug)
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>navigate() Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/')" class="cmp-btn">Home</button>
+                            <button @click="navigate('/about')" class="cmp-btn">About</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</button>
+                            <button @click="navigate('/nonexistent')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Test</button>
+                        </div>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>f-link Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <a href="/" f-link class="cmp-btn" style="text-decoration: none;">Home</a>
+                            <a href="/about" f-link class="cmp-btn" style="text-decoration: none;">About</a>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/scroll-demo.ts

@@ -0,0 +1,102 @@
+import { defineComponent, currentRoute } from '../../framework/index.js'
+
+/**
+ * Scroll Demo - demonstrates router scroll behavior
+ */
+export default defineComponent({
+    setup() {
+        const route = currentRoute
+
+        return {
+            template: `
+                <div class="content-wrap">
+                    <h1>🔽 Scroll Behavior Demo</h1>
+                    <p>This page demonstrates the router's scroll behavior. Click the navigation links to jump to sections.</p>
+
+                    <!-- Navigation -->
+                    <div class="demo-section">
+                        <h2>Navigation</h2>
+                        <div class="controls">
+                            <a href="/scroll-demo#intro" f-link class="cmp-btn">Introduction</a>
+                            <a href="/scroll-demo#features" f-link class="cmp-btn">Features</a>
+                            <a href="/scroll-demo#examples" f-link class="cmp-btn">Examples</a>
+                            <a href="/scroll-demo#api" f-link class="cmp-btn">API</a>
+                            <a href="/scroll-demo#bottom" f-link class="cmp-btn">Bottom</a>
+                        </div>
+                    </div>
+
+                    <!-- Scroll indicator -->
+                    <div class="info-section">
+                        <h2>Current Route</h2>
+                        <p><strong>Scroll Features:</strong></p>
+                        <ul>
+                            <li>✓ scrollToTop</li>
+                            <li>✓ saveScrollPosition</li>
+                            <li>✓ custom scroll function</li>
+                        </ul>
+                    </div>
+
+                    <!-- Sections -->
+                    <div style="display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem;">
+                        <section id="intro" class="demo-section" style="min-height: 40vh; scroll-margin-top: 100px;">
+                            <h2>Introduction</h2>
+                            <p>Welcome to the scroll behavior demo! Navigate between sections using the links below.</p>
+                            <div style="opacity: 0.5; margin-top: 1rem;">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            </div>
+                        </section>
+
+                        <section id="features" class="demo-section" style="min-height: 40vh; scroll-margin-top: 100px;">
+                            <h2>Features</h2>
+                            <p>Smooth scrolling, anchor navigation, and scroll position restoration are all supported by the Fusee router.</p>
+                            <div style="opacity: 0.5; margin-top: 1rem;">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            </div>
+                        </section>
+
+                        <section id="examples" class="demo-section" style="min-height: 40vh; scroll-margin-top: 100px;">
+                            <h2>Examples</h2>
+                            <p>Click on any section link to see smooth scroll to anchor. Use browser back/forward to see scroll position restore.</p>
+                            <div style="opacity: 0.5; margin-top: 1rem;">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            </div>
+                        </section>
+
+                        <section id="api" class="demo-section" style="min-height: 40vh; scroll-margin-top: 100px;">
+                            <h2>API</h2>
+                            <p>Configure scroll behavior in createRouter(): scrollToTop, saveScrollPosition, or custom function.</p>
+                            <div style="opacity: 0.5; margin-top: 1rem;">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            </div>
+                        </section>
+
+                        <section id="bottom" class="demo-section" style="min-height: 40vh; scroll-margin-top: 100px;">
+                            <h2>Bottom Section</h2>
+                            <p>You made it to the bottom! The scroll behavior automatically scrolls to anchors when navigating with #hash URLs.</p>
+                            <div style="opacity: 0.5; margin-top: 1rem;">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            </div>
+                        </section>
+                    </div>
+
+                    <!-- Back to top -->
+                    <div style="text-align: center; margin-top: 3rem; padding: 2rem;">
+                        <a href="/scroll-demo" f-link class="action-btn btn-primary">
+                            ⬆️ Back to Top
+                        </a>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/test-for.js

@@ -0,0 +1,65 @@
+export const TestFor = defineComponent({
+    setup() {
+        const items = signal([
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+        ])
+        const search = signal('')
+
+        const filteredItems = items.filter(item =>
+            item.name.toLowerCase().includes(search().toLowerCase())
+        )
+
+        inspect(items)
+
+        return {
+            items,
+            search,
+            filteredItems,
+            namesSummary: filteredItems.map(i => i.name).join(', '),
+
+            updateItem: (id, newName) => {
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
+            addItem: () => {
+                const nextId = Math.max(0, ...items().map(i => i.id)) + 1
+                items.push({ id: nextId, name: `Item ${nextId}` })
+            },
+            shuffleItems: () => {
+                items.sort(() => Math.random() - 0.5)
+            },
+            template: `
+                <div class="page">
+                    <h1>Keyed f-for Test</h1>
+                    <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </p>
+                    
+                    <div style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; gap: 10px;">
+                        <div f-for="item in filteredItems" :key="item.id" 
+                             style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
+                            <span>ID: {{ item.id }}</span>
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
+                                   style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/test-for.ts

@@ -0,0 +1,80 @@
+type Item = {
+    id: number
+    name: string
+}
+
+type TestForResult = {
+    items: Signal<Item[]>
+    search: Signal<string>
+    filteredItems: Computed<Item[]>
+    namesSummary: Computed<string>
+    updateItem: (id: number, name: string) => void
+    addItem: () => void
+    shuffleItems: () => void
+    template: string
+}
+
+export const TestFor = defineComponent({
+    setup(): TestForResult {
+        const items = signal<Item[]>([
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+        ])
+        const search = signal('')
+        const filteredItems = items.filter(i =>
+            i.name.toLowerCase().includes(search().toLowerCase())
+        )
+        const namesSummary = filteredItems.map(i => i.name).join(', ')
+
+        return {
+            items,
+            search,
+            filteredItems,
+            namesSummary,
+            updateItem: (id, newName) => {
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
+            addItem: () => {
+                const nextIds = items().map(i => i.id)
+                const nextId = nextIds.length > 0 ? Math.max(...nextIds) + 1 : 1
+                items.push({ id: nextId, name: `Item ${nextId}` })
+            },
+            shuffleItems: () => {
+                items.sort(() => Math.random() - 0.5)
+            },
+            template: `
+                <div class="page">
+                    <h1>Keyed f-for Test (TypeScript)</h1>
+                    <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </p>
+                    
+                    <div style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; gap: 10px;">
+                        <div f-for="item in filteredItems" :key="item.id" 
+                             style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
+                            <span>ID: {{ item.id }}</span>
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
+                                   style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/users/[id].js

@@ -0,0 +1,24 @@
+import { routeParams, computed } from '../../../framework/index.js'
+
+/**
+ * User Detail (JS) — child of the /users layout.
+ */
+export const UserDetail = defineComponent({
+    setup() {
+        const params = routeParams
+        const userId = computed(() => params().id || '?')
+
+        return {
+            userId,
+            template: `
+                <div class="page">
+                    <h1>👤 User #{{ userId }} (JS)</h1>
+                    <div class="demo-card">
+                        <p>This content area changes while the sidebar persists.</p>
+                        <p>Current User ID: <strong style="color: #8b8bff;">{{ userId }}</strong></p>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/users/[id].ts

@@ -0,0 +1,46 @@
+import { routeParams, computed, defineComponent } from '../../../framework/index'
+
+/**
+ * User Detail — child of the /users layout.
+ * Renders inside the layout's <div data-router-view> for /users/:id.
+ */
+export const UserDetail = defineComponent({
+    setup() {
+        const params = routeParams
+        const userId = computed(() => params().id || '?')
+
+        return {
+            userId,
+            params,
+            template: `
+                <div class="page">
+                    <h1>👤 User #{{ userId }}</h1>
+
+                    <div class="demo-card">
+                        <h2>User Profile</h2>
+                        <p style="color: #8b8bff; font-size: 1.2rem; margin-bottom: 0.5rem;">
+                            ID: <strong>{{ userId }}</strong>
+                        </p>
+                        <p style="color: #888; font-size: 0.9rem;">
+                            This page renders inside the Users layout.
+                            The sidebar persists — only this content area changes.
+                        </p>
+                    </div>
+
+                    <div class="demo-card" style="margin-top: 1rem;">
+                        <h2>Navigate to Other Users</h2>
+                        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+                            <a href="/users/1" f-link class="cmp-btn" style="text-decoration: none;">User #1</a>
+                            <a href="/users/2" f-link class="cmp-btn" style="text-decoration: none;">User #2</a>
+                            <a href="/users/42" f-link class="cmp-btn" style="text-decoration: none;">User #42</a>
+                            <a href="/users/999" f-link class="cmp-btn" style="text-decoration: none;">User #999</a>
+                        </div>
+                        <p style="margin-top: 0.75rem; color: #555; font-size: 0.8rem;">
+                            ⚡ Notice: the layout sidebar does NOT re-render when switching users!
+                        </p>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/users/index.js

@@ -0,0 +1,22 @@
+export const UsersIndex = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div class="page">
+                    <h1>📋 All Users (JS)</h1>
+                    <p>Select a user from the sidebar to view their profile.</p>
+                    <div style="display: grid; gap: 0.75rem; margin-top: 1rem;">
+                        <a href="/users/1" f-link class="demo-card" style="text-decoration: none;">
+                            <h2>👤 Alice Johnson</h2>
+                            <p>ID: 1 · Engineer</p>
+                        </a>
+                        <a href="/users/2" f-link class="demo-card" style="text-decoration: none;">
+                            <h2>👤 Bob Smith</h2>
+                            <p>ID: 2 · Designer</p>
+                        </a>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/users/index.ts

@@ -0,0 +1,29 @@
+import { defineComponent } from '../../../framework/index'
+
+export const UsersIndex = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div class="page">
+                    <h1>📋 All Users</h1>
+                    <p style="margin-bottom: 1.5rem;">Select a user from the sidebar to view their profile.</p>
+
+                    <div style="display: grid; gap: 0.75rem;">
+                        <a href="/users/1" f-link class="demo-card" style="text-decoration: none; cursor: pointer; transition: border-color 0.2s;">
+                            <h2 style="font-size: 1rem;">👤 Alice Johnson</h2>
+                            <p style="font-size: 0.85rem; color: #888;">ID: 1 · Engineer</p>
+                        </a>
+                        <a href="/users/2" f-link class="demo-card" style="text-decoration: none; cursor: pointer; transition: border-color 0.2s;">
+                            <h2 style="font-size: 1rem;">👤 Bob Smith</h2>
+                            <p style="font-size: 0.85rem; color: #888;">ID: 2 · Designer</p>
+                        </a>
+                        <a href="/users/42" f-link class="demo-card" style="text-decoration: none; cursor: pointer; transition: border-color 0.2s;">
+                            <h2 style="font-size: 1rem;">👤 Charlie Dev</h2>
+                            <p style="font-size: 0.85rem; color: #888;">ID: 42 · Architect</p>
+                        </a>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/users.js

@@ -0,0 +1,43 @@
+import { currentRoute, routeParams, computed } from '../../framework/index.js'
+
+/**
+ * Users Layout (JS) — persists across all /users/* child routes.
+ */
+export const UsersLayout = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            template: `
+                <div style="display: flex; gap: 2rem; min-height: 60vh;">
+                    <aside style="
+                        width: 220px;
+                        flex-shrink: 0;
+                        background: #13131d;
+                        border: 1px solid #2a2a3a;
+                        border-radius: 12px;
+                        padding: 1.25rem;
+                    ">
+                        <h3 style="color: #8b8bff; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 1rem;">👥 Users</h3>
+                        <nav style="display: flex; flex-direction: column; gap: 0.5rem;">
+                            <a href="/users" f-link class="cmp-btn" style="text-decoration: none; text-align: left;">📋 All Users</a>
+                            <a href="/users/1" f-link class="cmp-btn" style="text-decoration: none; text-align: left;">👤 User #1</a>
+                            <a href="/users/2" f-link class="cmp-btn" style="text-decoration: none; text-align: left;">👤 User #2</a>
+                        </nav>
+                        <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #2a2a3a; font-size: 0.75rem; color: #555;">
+                            <p>Route: <span style="color: #8b8bff;">{{ path }}</span></p>
+                            <p>Params: <span style="color: #34d399;">{{ paramsJson }}</span></p>
+                        </div>
+                    </aside>
+                    <main style="flex: 1;">
+                        <div data-router-view></div>
+                    </main>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/users.ts

@@ -0,0 +1,78 @@
+import { currentRoute, routeParams, computed, defineComponent } from '../../framework/index'
+
+/**
+ * Users Layout — persists across all /users/* child routes.
+ * Contains a sidebar nav and a <div data-router-view> where children render.
+ */
+export const UsersLayout = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            template: `
+                <div style="display: flex; gap: 2rem; min-height: 60vh;">
+                    <!-- Sidebar (persists across child navigations) -->
+                    <aside style="
+                        width: 220px;
+                        flex-shrink: 0;
+                        background: #13131d;
+                        border: 1px solid #2a2a3a;
+                        border-radius: 12px;
+                        padding: 1.25rem;
+                    ">
+                        <h3 style="
+                            color: #8b8bff;
+                            font-size: 0.85rem;
+                            text-transform: uppercase;
+                            letter-spacing: 0.1em;
+                            margin-bottom: 1rem;
+                        ">👥 Users</h3>
+
+                        <nav style="display: flex; flex-direction: column; gap: 0.5rem;">
+                            <a href="/users" f-link class="cmp-btn" style="
+                                text-decoration: none;
+                                text-align: left;
+                                font-size: 0.9rem;
+                            ">📋 All Users</a>
+                            <a href="/users/1" f-link class="cmp-btn" style="
+                                text-decoration: none;
+                                text-align: left;
+                                font-size: 0.9rem;
+                            ">👤 User #1</a>
+                            <a href="/users/2" f-link class="cmp-btn" style="
+                                text-decoration: none;
+                                text-align: left;
+                                font-size: 0.9rem;
+                            ">👤 User #2</a>
+                            <a href="/users/42" f-link class="cmp-btn" style="
+                                text-decoration: none;
+                                text-align: left;
+                                font-size: 0.9rem;
+                            ">👤 User #42</a>
+                        </nav>
+
+                        <div style="
+                            margin-top: 1.5rem;
+                            padding-top: 1rem;
+                            border-top: 1px solid #2a2a3a;
+                            font-size: 0.75rem;
+                            color: #555;
+                        ">
+                            <p style="margin-bottom: 4px;">Route: <span style="color: #8b8bff;">{{ path }}</span></p>
+                            <p>Params: <span style="color: #34d399;">{{ paramsJson }}</span></p>
+                        </div>
+                    </aside>
+
+                    <!-- Child route renders here -->
+                    <main style="flex: 1; min-width: 0;">
+                        <div data-router-view></div>
+                    </main>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/ChildComponent.js

@@ -1,4 +1,5 @@
 import { inject } from '../../framework/index.js'
+import { LoggerService } from '../services.js'
 import { GrandchildComponent } from './GrandchildComponent.js'
 
 // ChildComponent - injects values from parent (ParentComponent)
@@ -9,8 +10,11 @@ export const ChildComponent = defineComponent({
         const count = inject('count')
         const message = inject('message')
 
-        // These are NOT provided by parent, so they will be undefined
-        const nonExistent = inject('nonExistent')
+        const logger = inject(LoggerService)
+        logger.log('ChildComponent initialized!')
+
+        // These are NOT provided by parent, so we use optional: true to avoid throwing NullInjectorError
+        const nonExistent = inject('nonExistent', { optional: true })
 
         function updateMessage() {
             message('Message updated by Child!')
@@ -20,6 +24,7 @@ export const ChildComponent = defineComponent({
             count,
             message,
             nonExistent,
+            logger,
             updateMessage,
             template: `
                 <div style="padding: 15px; border: 2px solid #2196F3; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
@@ -29,6 +34,7 @@ export const ChildComponent = defineComponent({
                         <li><strong>count:</strong> {{ count }}</li>
                         <li><strong>message:</strong> {{ message }}</li>
                         <li><strong>nonExistent:</strong> {{ nonExistent || 'undefined' }}</li>
+                        <li><strong>Logger ID:</strong> {{ logger.id }} <em>(Singleton!)</em></li>
                     </ul>
                     <button @click="updateMessage" style="margin-top: 10px; padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
                         Update Message