fusee-framework 1.5.3 → 1.7.0

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/routes/About.js

@@ -14,7 +14,7 @@ export const About = defineComponent({
                 <div class="page">
                     <h1>About</h1>
                     <p>Framework custom — SPA prototipe</p>
-                    <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+                    <p><strong>Features:</strong> signals, defineComponent, History API router, lifecycle hooks.</p>
                     <p class="status">{{ loaded }}</p>
                 </div>
             `

package/app/routes/About.ts

@@ -20,7 +20,7 @@ export const About = defineComponent({
                 <div class="page">
                     <h1>About</h1>
                     <p>Framework custom — prototip SPA.</p>
-                    <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+                    <p><strong>Features:</strong> signals, defineComponent, History API router, lifecycle hooks.</p>
                     <p class="status">{{ loaded }}</p>
                 </div>
             `

package/app/routes/AuthRoutes.ts

@@ -0,0 +1,41 @@
+import { currentRoute, navigate } from '../../framework/index.js'
+
+// Demo: Multiple paths for the same component
+// Navigating between /login and /register will NOT cause re-render
+export const AuthRoutes = defineComponent({
+    setup() {
+        const path = currentRoute
+        
+        return {
+            path,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔐 Auth Page (Multiple Paths Demo)</h1>
+                    <div class="demo-card">
+                        <p>Current path: <code>{{ path }}</code></p>
+                        <p style="color: #888; margin-top: 10px;">
+                            This component handles multiple paths: <code>/login</code> and <code>/register</code>
+                        </p>
+                        <p style="color: #34d399;">
+                            ✅ The component is NOT re-rendered when switching between these paths!
+                        </p>
+                    </div>
+                    
+                    <div class="demo-card">
+                        <h2>Switch Paths (No Re-render)</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/login')" class="cmp-btn">Go to /login</button>
+                            <button @click="navigate('/register')" class="cmp-btn" style="border-color: #8b8bff; color: #8b8bff;">Go to /register</button>
+                        </div>
+                    </div>
+                    
+                    <div class="demo-card">
+                        <h2>Test Re-render</h2>
+                        <button @click="navigate('/about')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Go to /about (causes re-render)</button>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/Home.js

@@ -1,3 +1,4 @@
+import { Counter } from '../components/Counter.js'
 import { UserForm } from '../components/UserForm.js'
 import { CounterSection } from '../components/CounterSection.js'
 import { Card } from '../components/Card.js'
@@ -98,6 +99,14 @@ export const Home = defineComponent({
                         <p>This card uses only the default slot - no named slots provided.</p>
                     {{ /Card }}
                     
+                    <!-- 🧪 INTERPOLATION TEST -->
+                    <h3 style="margin-top: 40px; margin-bottom: 20px; color: #e83e8c;">🔤 INTERPOLATION TEST</h3>
+                    <div style="background: #2a2a2a; padding: 15px; border-radius: 8px; border: 1px solid #444;">
+                        <p><strong>Escaped Braces:</strong> \\{{ this is not evaluated }}</p>
+                        <p><strong>String Literal with Braces:</strong> {{ "Look, {{ braces }} inside a string!" }}</p>
+                        <p><strong>Dynamic + Escaped:</strong> {{ isActive ? 'Currently: \\{{ Active }}' : 'Currently: \\{{ Inactive }}' }}</p>
+                    </div>
+
                     <!-- 🧪 PROVIDE / INJECT TEST -->
                     <h3 style="margin-top: 40px; margin-bottom: 20px; color: #4CAF50;">🔗 PROVIDE / INJECT TEST</h3>
                     {{ ParentComponent }}

package/app/routes/NotFound.js

@@ -0,0 +1,16 @@
+import { navigate } from '../../framework/index.js'
+
+export const NotFound = defineComponent({
+    setup() {
+        return {
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #ff6b6b;">404 - Page Not Found</h1>
+                    <p>The requested route does not exist.</p>
+                    <button @click="navigate('/')" class="primary-btn">Go Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/NotFound.ts

@@ -0,0 +1,16 @@
+import { navigate } from '../../framework/index.js'
+
+export const NotFound = defineComponent({
+    setup() {
+        return {
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #ff6b6b;">404 - Page Not Found</h1>
+                    <p>The requested route does not exist.</p>
+                    <button @click="navigate('/')" class="primary-btn">Go Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/RouterExample.js

@@ -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="/users/123" f-link class="cmp-btn" style="text-decoration: none;">User 123</a>
+                            <a href="/users/456" f-link class="cmp-btn" style="text-decoration: none;">User 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('/404')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Page</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</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/routes/RouterExample.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="/users/123" f-link class="cmp-btn" style="text-decoration: none;">User 123</a>
+                            <a href="/users/456" f-link class="cmp-btn" style="text-decoration: none;">User 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/routes/WildcardDemo.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/routes/WildcardDemo.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/auto-imports.d.ts

@@ -17,6 +17,7 @@ declare global {
   const inspect: typeof import('fusee-framework').inspect
   const mountOutlet: typeof import('fusee-framework').mountOutlet
   const mountTemplate: typeof import('fusee-framework').mountTemplate
+  const onCleanup: typeof import('fusee-framework').onCleanup
   const onMount: typeof import('fusee-framework').onMount
   const onUnmount: typeof import('fusee-framework').onUnmount
   const provide: typeof import('fusee-framework').provide