npm - fusee-framework - Versions diffs - 1.6.0 → 1.7.0 - Mend

fusee-framework 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/README.md +29 -13
package/app/benchmark/benchmark.js +633 -0
package/app/benchmark/index.html +102 -0
package/app/benchmark/styles.css +249 -0
package/app/components/Counter.js +17 -7
package/app/components/CounterSection.js +3 -4
package/app/main.js +29 -62
package/app/main.ts +72 -63
package/app/pages/404.js +16 -0
package/app/pages/[...all].js +35 -0
package/app/pages/[...all].ts +35 -0
package/app/pages/_layout.js +26 -0
package/app/pages/_layout.ts +26 -0
package/app/pages/about.js +23 -0
package/app/pages/about.ts +29 -0
package/app/pages/composables.js +158 -0
package/app/pages/composables.ts +158 -0
package/app/pages/dynamic.js +40 -0
package/app/pages/dynamic.ts +40 -0
package/app/pages/index.js +117 -0
package/app/pages/index.ts +78 -0
package/app/pages/login.ts +21 -0
package/app/pages/objects/[id].js +56 -0
package/app/pages/objects/[id].ts +56 -0
package/app/pages/posts/[category]/[slug].js +56 -0
package/app/pages/posts/[category]/[slug].ts +56 -0
package/app/pages/router-example.js +56 -0
package/app/pages/router-example.ts +56 -0
package/app/pages/test-for.js +65 -0
package/app/pages/test-for.ts +80 -0
package/app/pages/users/[id].js +24 -0
package/app/pages/users/[id].ts +46 -0
package/app/pages/users/index.js +22 -0
package/app/pages/users/index.ts +29 -0
package/app/pages/users.js +43 -0
package/app/pages/users.ts +78 -0
package/app/routes/About.js +1 -1
package/app/routes/About.ts +1 -1
package/app/routes/AuthRoutes.ts +41 -0
package/app/routes/Home.js +9 -0
package/app/routes/NotFound.js +16 -0
package/app/routes/NotFound.ts +16 -0
package/app/routes/RouterExample.js +56 -0
package/app/routes/RouterExample.ts +56 -0
package/app/routes/WildcardDemo.js +35 -0
package/app/routes/WildcardDemo.ts +35 -0
package/auto-imports.d.ts +1 -0
package/bin/create-fusee-linux +0 -0
package/bin/create-fusee-mac-arm64 +0 -0
package/bin/create-fusee-mac-intel +0 -0
package/bin/create-fusee-win.exe +0 -0
package/bin/create-fusee.exe +0 -0
package/bin/index.js +38 -0
package/create-fusee-go/cmd/generate.go +72 -0
package/create-fusee-go/cmd/init.go +38 -0
package/create-fusee-go/cmd/root.go +121 -0
package/create-fusee-go/go.mod +10 -0
package/create-fusee-go/go.sum +10 -0
package/create-fusee-go/internal/assets/assets.go +78 -0
package/create-fusee-go/internal/assets/embed/framework/auto-import-preset.js +9 -0
package/create-fusee-go/internal/assets/embed/framework/core/compiler.js +253 -0
package/create-fusee-go/internal/assets/embed/framework/core/component.js +266 -0
package/create-fusee-go/internal/assets/embed/framework/core/composable.js +27 -0
package/create-fusee-go/internal/assets/embed/framework/core/directives.js +875 -0
package/create-fusee-go/internal/assets/embed/framework/core/evaluator.js +153 -0
package/create-fusee-go/internal/assets/embed/framework/core/event-delegation.js +191 -0
package/create-fusee-go/internal/assets/embed/framework/core/signal.js +412 -0
package/create-fusee-go/internal/assets/embed/framework/core/store.js +81 -0
package/create-fusee-go/internal/assets/embed/framework/index.d.ts +3 -0
package/create-fusee-go/internal/assets/embed/framework/index.js +10 -0
package/create-fusee-go/internal/assets/embed/framework/router/file-router.js +177 -0
package/create-fusee-go/internal/assets/embed/framework/router/router.js +462 -0
package/create-fusee-go/internal/assets/embed/framework/types/compiler.d.ts +15 -0
package/create-fusee-go/internal/assets/embed/framework/types/component.d.ts +88 -0
package/create-fusee-go/internal/assets/embed/framework/types/composable.d.ts +14 -0
package/create-fusee-go/internal/assets/embed/framework/types/directives.d.ts +55 -0
package/create-fusee-go/internal/assets/embed/framework/types/evaluator.d.ts +13 -0
package/create-fusee-go/internal/assets/embed/framework/types/event-delegation.d.ts +32 -0
package/create-fusee-go/internal/assets/embed/framework/types/index.d.ts +22 -0
package/create-fusee-go/internal/assets/embed/framework/types/router.d.ts +32 -0
package/create-fusee-go/internal/assets/embed/framework/types/signal.d.ts +79 -0
package/create-fusee-go/internal/assets/embed/framework/types/store.d.ts +8 -0
package/create-fusee-go/internal/assets/templates/Counter.tmpl +26 -0
package/create-fusee-go/internal/assets/templates/component.tmpl +11 -0
package/create-fusee-go/internal/assets/templates/components/Loading.tmpl +24 -0
package/create-fusee-go/internal/assets/templates/index.html.tmpl +15 -0
package/create-fusee-go/internal/assets/templates/main.tmpl +14 -0
package/create-fusee-go/internal/assets/templates/package.json.tmpl +14 -0
package/create-fusee-go/internal/assets/templates/page.tmpl +12 -0
package/create-fusee-go/internal/assets/templates/pages/about.tmpl +20 -0
package/create-fusee-go/internal/assets/templates/pages/index.tmpl +22 -0
package/create-fusee-go/internal/assets/templates/pages/layout.tmpl +18 -0
package/create-fusee-go/internal/assets/templates/tsconfig.json.tmpl +14 -0
package/create-fusee-go/internal/assets/templates/vite.config.js.tmpl +18 -0
package/create-fusee-go/main.go +7 -0
package/framework/auto-import-preset.js +1 -1
package/framework/core/compiler.js +252 -249
package/framework/core/component.js +265 -260
package/framework/core/directives.js +875 -786
package/framework/core/evaluator.js +153 -70
package/framework/core/event-delegation.js +33 -14
package/framework/core/signal.js +412 -403
package/framework/index.js +10 -11
package/framework/router/file-router.js +177 -0
package/framework/router/router.js +462 -80
package/framework/types/event-delegation.d.ts +0 -58
package/framework/types/router.d.ts +32 -15
package/framework/types/signal.d.ts +1 -0
package/index.html +638 -626
package/package.json +5 -3
package/tsconfig.json +1 -0
/package/{framework → create-fusee-go/internal/assets/embed/framework}/bin/create-fusee.js +0 -0

package/app/benchmark/index.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fusée Framework Benchmark</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Fusée Framework Benchmark</h1>
+      <p>JS Framework Benchmark style - Reactivity + Rendering</p>
+    </header>
+    <div class="controls">
+      <button id="runFusée" class="btn btn-mode active">Fusée Framework</button>
+      <button id="runVanilla" class="btn btn-mode">Vanilla JS</button>
+      <button id="runAll" class="btn btn-primary">Run All Benchmarks</button>
+      <button id="clear" class="btn btn-secondary">Clear Results</button>
+    </div>
+    <div class="benchmarks">
+      <div class="benchmark-card" data-benchmark="create">
+        <h3>Create Rows</h3>
+        <p>Create 1,000 rows with f-for rendering</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="replace">
+        <h3>Replace All Rows</h3>
+        <p>Update all 1,000 rows</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="partial">
+        <h3>Partial Update</h3>
+        <p>Update every 10th row (100 rows)</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="select">
+        <h3>Select Row</h3>
+        <p>Highlight selected row with :class binding</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="swap">
+        <h3>Swap Rows</h3>
+        <p>Swap row 2 and row 999</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="remove">
+        <h3>Remove Row</h3>
+        <p>Remove one row from 1,000</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="createMany">
+        <h3>Create Many Rows</h3>
+        <p>Create 10,000 rows (stress test)</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="append">
+        <h3>Append Rows</h3>
+        <p>Append 1,000 to 1,000 existing rows</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+      <div class="benchmark-card" data-benchmark="clear">
+        <h3>Clear Rows</h3>
+        <p>Clear 1,000 rows</p>
+        <button class="btn btn-small run-benchmark">Run</button>
+        <div class="result"></div>
+      </div>
+    </div>
+    <div class="summary">
+      <h2>Summary</h2>
+      <div id="wgmResult"></div>
+      <div id="details"></div>
+    </div>
+    <div class="preview">
+      <h2>Live Preview</h2>
+      <div id="previewContainer"></div>
+    </div>
+  </div>
+  <script type="module" src="benchmark.js"></script>
+</body>
+</html>

package/app/benchmark/styles.css ADDED Viewed

@@ -0,0 +1,249 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+}
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+header {
+  text-align: center;
+  color: white;
+  margin-bottom: 30px;
+}
+header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+header p {
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+.controls {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.btn-primary {
+  background: white;
+  color: #667eea;
+}
+.btn-primary:hover {
+  background: #f0f0f0;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid white;
+}
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.btn-mode {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid white;
+  margin-right: 10px;
+}
+.btn-mode:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.btn-mode.active {
+  background: white;
+  color: #667eea;
+}
+.btn-small {
+  padding: 8px 16px;
+  font-size: 0.9rem;
+}
+.benchmarks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+.benchmark-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+.benchmark-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+}
+.benchmark-card h3 {
+  color: #667eea;
+  margin-bottom: 8px;
+  font-size: 1.2rem;
+}
+.benchmark-card p {
+  color: #666;
+  margin-bottom: 15px;
+  font-size: 0.9rem;
+}
+.benchmark-card .run-benchmark {
+  background: #667eea;
+  color: white;
+  margin-bottom: 10px;
+}
+.benchmark-card .run-benchmark:hover {
+  background: #5568d3;
+}
+.result {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  min-height: 24px;
+}
+.result .time {
+  color: #667eea;
+}
+.result .status {
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: #666;
+}
+.summary {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.summary h2 {
+  color: #667eea;
+  margin-bottom: 20px;
+  font-size: 1.5rem;
+}
+#wgmResult {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 15px;
+  color: #333;
+}
+#wgmResult .score {
+  color: #667eea;
+}
+#wgmResult .indicator {
+  font-size: 1.2rem;
+}
+#details {
+  margin-top: 15px;
+}
+#details table {
+  width: 100%;
+  border-collapse: collapse;
+}
+#details th,
+#details td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+#details th {
+  font-weight: 600;
+  color: #667eea;
+}
+.preview {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.preview h2 {
+  color: #667eea;
+  margin-bottom: 15px;
+  font-size: 1.5rem;
+}
+#previewContainer {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 15px;
+}
+#previewContainer table {
+  width: 100%;
+  border-collapse: collapse;
+}
+#previewContainer th,
+#previewContainer td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+#previewContainer th {
+  background: #f8f9fa;
+  font-weight: 600;
+  color: #333;
+}
+#previewContainer tr.selected {
+  background: #667eea;
+  color: white;
+}
+#previewContainer tr.selected td {
+  color: white;
+}

package/app/components/Counter.js CHANGED Viewed

@@ -39,9 +39,19 @@ export const Counter = defineComponent({
             })
         }
-        function increment() { count(count() + 1) }
-        function decrement() { count(count() - 1) }
-        function reset() { count(0) }
+        function increment() {
+            console.log('[Counter] increment called, current:', count())
+            count(count() + 1)
+            console.log('[Counter] after increment:', count())
+        }
+        function decrement() {
+            console.log('[Counter] decrement called')
+            count(count() - 1)
+        }
+        function reset() {
+            console.log('[Counter] reset called')
+            count(0)
+        }
         onMount(() => console.log('[Counter] mounted, initial:', count()))
         onUnmount(() => console.log('[Counter] unmounted'))
@@ -76,10 +86,10 @@ export const Counter = defineComponent({
                     <p class="derived">double: {{ double }}</p>
                     <div class="actions">
-                        <button @click.prevent="decrement">−</button>
-                        <button @click.once="reset" :disabled="isZero">Reset (Once only demo)</button>
-                        <button @click="increment">+</button>
-                        <button @click="updateMultiple">+5 & Step (Batched)</button>
+                        <button on:click.prevent="decrement">−</button>
+                        <button on:click.once="reset" :disabled="isZero">Reset (Once only demo)</button>
+                        <button on:click="increment">+</button>
+                        <button on:click="updateMultiple">+5 & Step (Batched)</button>
                     </div>
                     <div class="extras" style="margin-top: 24px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px;">

package/app/components/CounterSection.js CHANGED Viewed

@@ -8,17 +8,16 @@ export const CounterSection = defineComponent({
     setup(props, { emit }) {
         const showCounter = signal(true)
         inspect(showCounter)
         return {
             showCounter,
             get title() { return props.pageTitle },
             toggleCounter: () => showCounter(!showCounter()),
-            // 🔄 Re-emit handlers - forward events from Counter to parent
             handleCounterChange: (value) => emit('counter-change', value),
             handleCounterReset: () => emit('counter-reset'),
             handleCustomEvent: (count, multiplier) => emit('custom-event', count, multiplier),
             template: `
                 <div style="margin-top: 30px; border-top: 1px solid #333; padding-top: 20px;">
                     <h3>Counter Section</h3>

package/app/main.js CHANGED Viewed

@@ -1,62 +1,29 @@
-import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/index.js'
-import { Loading } from './components/Loading.js'
-directive('focus', {
-    mounted(el) {
-        el.focus()
-    }
-})
-directive('highlight', {
-    mounted(el, binding) {
-        el.style.backgroundColor = binding.value || '#ffff0033'
-        el.style.transition = 'background-color 0.3s'
-    },
-    updated(el, binding) {
-        el.style.backgroundColor = binding.value || '#ffff0033'
-    }
-})
-const routes = [
-    {
-        path: '/',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/Home.js'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/about',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/About.js'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/test-for',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/TestFor.js'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/dynamic',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/TestDynamic.js'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/composables',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/TestComposables.js'),
-            loadingComponent: Loading
-        })
-    },
-]
-createRouter(routes)
-const outlet = document.getElementById('app')
-if (!outlet) throw new Error('[app] #app element not found in DOM')
-mountOutlet(outlet)
+import { createRouter, mountOutlet, defineAsyncComponent, generateRoutes } from '../framework/index.js'
+import { Loading } from './components/Loading.js'
+directive('focus', {
+    mounted(el) {
+        el.focus()
+    }
+})
+directive('highlight', {
+    mounted(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+        el.style.transition = 'background-color 0.3s'
+    },
+    updated(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+    }
+})
+const pages = import.meta.glob('./pages/**/*.{js,ts}')
+const routes = generateRoutes(pages, {
+    loadingComponent: Loading
+})
+createRouter(routes)
+const outlet = document.getElementById('app')
+if (!outlet) throw new Error('[app] #app element not found in DOM')
+mountOutlet(outlet)

package/app/main.ts CHANGED Viewed

@@ -1,63 +1,72 @@
-import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/index.js'
-import type { Route } from '../framework/types/index.js'
-import { Loading } from './components/Loading.js'
-directive('focus', {
-    mounted(el) {
-        el.focus()
-    }
-})
-directive('highlight', {
-    mounted(el, binding) {
-        el.style.backgroundColor = binding.value || '#ffff0033'
-        el.style.transition = 'background-color 0.3s'
-    },
-    updated(el, binding) {
-        el.style.backgroundColor = binding.value || '#ffff0033'
-    }
-})
-const routes: Route[] = [
-    {
-        path: '/',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/Home.ts'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/about',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/About.ts'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/test-for',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/TestFor.ts'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/dynamic',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/TestDynamic.ts'),
-            loadingComponent: Loading
-        })
-    },
-    {
-        path: '/composables',
-        component: defineAsyncComponent({
-            loader: () => import('./routes/TestComposables.ts'),
-            loadingComponent: Loading
-        })
-    },
-]
-createRouter(routes)
-const outlet = document.getElementById('app')
-if (!outlet) throw new Error('[app] #app element not found in DOM')
-mountOutlet(outlet)
+import { createRouter, mountOutlet, generateRoutes } from '../framework/index.js'
+import { Loading } from './components/Loading.js'
+import { AuthRoutes } from './routes/AuthRoutes.js'
+directive('focus', {
+    mounted(el) {
+        el.focus()
+    }
+})
+directive('highlight', {
+    mounted(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+        el.style.transition = 'background-color 0.3s'
+    },
+    updated(el, binding) {
+        el.style.backgroundColor = binding.value || '#ffff0033'
+    }
+})
+const pages = import.meta.glob('./pages/**/*.{js,ts}')
+const routes = generateRoutes(pages, {
+    loadingComponent: Loading
+})
+// Add manual route with array paths - component won't re-render when switching between /login and /register
+routes.push({
+    path: ['/login', '/register'],
+    component: AuthRoutes
+})
+createRouter(routes)
+const outlet = document.getElementById('app')
+if (!outlet) throw new Error('[app] #app element not found in DOM')
+mountOutlet(outlet)

package/app/pages/404.js ADDED Viewed

@@ -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/pages/[...all].js ADDED Viewed

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