fusee-framework 1.1.1 → 1.2.0

package/README.md

@@ -1,7 +1,7 @@
 # Fusée Framework 🚀
-**v1.1.1 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.2.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
 
-Fusée is a custom, high-performance fine-grained reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, and a comprehensive CLI for instant application scaffolding.
+Fusée is a custom, high-performance fine-grained reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, Dependency Injection for components and a comprehensive CLI for instant application scaffolding.
 
 ---
 

package/app/components/Card.js

@@ -0,0 +1,32 @@
+export const Card = defineComponent({
+    props: {
+        title: { type: String, default: 'Default Card' }
+    },
+    setup(props) {
+        return {
+            get title() { return props.title },
+            template: `
+                <div style="border: 2px solid #333; border-radius: 8px; padding: 20px; margin: 20px 0; background: #1a1a1a;">
+                    <div style="border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px;">
+                        <h2 style="margin: 0; color: #fff;">{{ title }}</h2>
+                        <slot name="header">
+                            <p style="color: #888; font-size: 0.9rem;">Default header content</p>
+                        </slot>
+                    </div>
+                    
+                    <div style="color: #ccc; line-height: 1.6;">
+                        <slot>
+                            <p>This is the default slot content. You can override this by passing content between component tags.</p>
+                        </slot>
+                    </div>
+                    
+                    <div style="border-top: 1px solid #444; padding-top: 10px; margin-top: 15px;">
+                        <slot name="footer">
+                            <p style="color: #666; font-size: 0.8rem; text-align: right;">Default footer</p>
+                        </slot>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/Card.ts

@@ -0,0 +1,41 @@
+export interface CardProps {
+    title?: string
+}
+
+export interface CardResult {
+    get title(): string
+    template: string
+}
+
+export const Card = defineComponent({
+    props: {
+        title: { type: String, default: 'Default Card' }
+    },
+    setup(props: CardProps): CardResult {
+        return {
+            get title(): string { return props.title || 'Default Card' },
+            template: `
+                <div style="border: 2px solid #333; border-radius: 8px; padding: 20px; margin: 20px 0; background: #1a1a1a;">
+                    <div style="border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px;">
+                        <h2 style="margin: 0; color: #fff;">{{ title }}</h2>
+                        <slot name="header">
+                            <p style="color: #888; font-size: 0.9rem;">Default header content</p>
+                        </slot>
+                    </div>
+                    
+                    <div style="color: #ccc; line-height: 1.6;">
+                        <slot>
+                            <p>This is the default slot content. You can override this by passing content between component tags.</p>
+                        </slot>
+                    </div>
+                    
+                    <div style="border-top: 1px solid #444; padding-top: 10px; margin-top: 15px;">
+                        <slot name="footer">
+                            <p style="color: #666; font-size: 0.8rem; text-align: right;">Default footer</p>
+                        </slot>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/Counter.js

@@ -1,13 +1,13 @@
-import { defineComponent, signal, computed, effect, batch, untrack, onMount, onUnmount } from '../../framework/index.js'
 
 export const Counter = defineComponent({
     props: {
         initialValue: { type: String, default: '0' },
         parentTitle: { type: String, default: '' }
     },
-    setup(props) {
+    setup(props, { emit }) {
         const count = signal(Number(props.initialValue) || 0)
         const multiplier = signal(1)
+        inspect(count, multiplier)
 
         const double = computed(() => {
             console.log('[Counter] computing double...')
@@ -30,9 +30,7 @@ export const Counter = defineComponent({
             transform: `scale(${1 + (Math.abs(count()) % 3) * 0.1})`
         }))
 
-        effect(() => {
-            console.log(`[Counter Effect] Count: ${count()} | Step ignored in tracking: ${untrack(() => multiplier())}`)
-        })
+        inspect(() => `Count: ${count()} | Step ignored in tracking: ${untrack(() => multiplier())}`)
 
         function updateMultiple() {
             batch(() => {
@@ -60,6 +58,7 @@ export const Counter = defineComponent({
             updateMultiple,
             get parentTitle() { return props.parentTitle },
             displayStyle,
+            emit,
             template: `
                 <div class="counter" :title="counterTitle" @keydown.arrowup.window="increment" @keydown.arrowdown.window="decrement">
                     <h2>Counter</h2>

package/app/components/Counter.ts

@@ -1,4 +1,3 @@
-
 type CounterProps = {
     initialValue?: string
     parentTitle?: string
@@ -27,6 +26,7 @@ export const Counter = defineComponent({
     setup(props: CounterProps): CounterResult {
         const count = signal<number>(Number(props.initialValue) || 0)
         const multiplier = signal<number>(1)
+        inspect(count, multiplier)
 
         const double = computed(() => count() * 2)
 
@@ -40,9 +40,7 @@ export const Counter = defineComponent({
             `Counter: ${count()} (×${multiplier()})`
         )
 
-        effect(() => {
-            console.log(`[Counter Effect] Count: ${count()} | Step ignored in tracking: ${untrack(() => multiplier())}`)
-        })
+        inspect(() => `[Counter] Count: ${count()} | Step ignored: ${untrack(() => multiplier())}`)
 
         function updateMultiple(): void {
             batch(() => {

package/app/components/CounterSection.js

@@ -1,4 +1,3 @@
-import { defineComponent, signal } from '../../framework/index.js'
 import { Counter } from './Counter.js'
 
 export const CounterSection = defineComponent({
@@ -6,20 +5,27 @@ export const CounterSection = defineComponent({
         pageTitle: { type: String, default: '' }
     },
     components: { Counter },
-    setup(props) {
+    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>
                     <button @click="toggleCounter" class="primary-btn" style="margin: 10px 0;">Toggle Counter (f-if)</button>
                     
                     <div f-if="showCounter">
-                        {{ Counter initialValue="10" :parentTitle="title" }}
+                        {{ Counter initialValue="10" :parentTitle="title" @counter-change="handleCounterChange" @counter-reset="handleCounterReset" @custom-event="handleCustomEvent" }}
                     </div>
                     <div f-elif="title === 'Welcome!'">
                         <p style="color: yellow;">Counter is hidden, but title is "Welcome!"</p>

package/app/components/EmitTest.js

@@ -0,0 +1,77 @@
+export const EmitTest = defineComponent({
+    setup(props, { emit }) {
+        const clickCount = signal(0)
+        const lastEvent = signal('None')
+        
+        inspect(clickCount, lastEvent)
+        
+        return {
+            clickCount,
+            lastEvent,
+            
+            // Butoane pentru test emit
+            emitSimple: () => {
+                clickCount(clickCount() + 1)
+                emit('simple-click')
+                lastEvent('simple-click')
+            },
+            emitWithData: () => {
+                const count = clickCount() + 1
+                clickCount(count)
+                emit('click-with-data', count, 'button-pressed', Date.now())
+                lastEvent(`click-with-data: ${count}`)
+            },
+            emitObject: () => {
+                const data = { 
+                    timestamp: Date.now(),
+                    message: 'Hello from child!',
+                    counter: clickCount() + 1
+                }
+                clickCount(data.counter)
+                emit('object-event', data)
+                lastEvent(`object-event: ${data.message}`)
+            },
+            
+            template: `
+                <div style="background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%); border: 2px solid #4da6ff; border-radius: 12px; padding: 24px; margin: 20px 0; color: #fff;">
+                    <h3 style="margin: 0 0 16px 0; color: #4da6ff;">🧪 EMIT EVENTS TEST LAB</h3>
+                    
+                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;">
+                        <button @click="emitSimple" 
+                                style="padding: 16px; background: #10b981; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem;">
+                            📤 EMIT SIMPLE
+                            <small style="display: block; font-size: 0.8rem; font-weight: normal; margin-top: 4px;">No data</small>
+                        </button>
+                        
+                        <button @click="emitWithData" 
+                                style="padding: 16px; background: #f59e0b; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem;">
+                            📤 EMIT WITH DATA
+                            <small style="display: block; font-size: 0.8rem; font-weight: normal; margin-top: 4px;">count, label, timestamp</small>
+                        </button>
+                        
+                        <button @click="emitObject" 
+                                style="padding: 16px; background: #8b5cf6; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem;">
+                            📤 EMIT OBJECT
+                            <small style="display: block; font-size: 0.8rem; font-weight: normal; margin-top: 4px;">{ timestamp, message, counter }</small>
+                        </button>
+                    </div>
+                    
+                    <div style="background: rgba(0,0,0,0.3); padding: 16px; border-radius: 8px; font-family: monospace;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                            <span style="color: #888;">Click Count:</span>
+                            <span style="color: #4da6ff; font-size: 1.5rem; font-weight: bold;">{{ clickCount }}</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between;">
+                            <span style="color: #888;">Last Event:</span>
+                            <span style="color: #f59e0b;">{{ lastEvent }}</span>
+                        </div>
+                    </div>
+                    
+                    <p style="margin: 16px 0 0 0; font-size: 0.85rem; color: #888; text-align: center;">
+                        ✅ Check browser console for emitted events!
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/app/components/EmitTest.ts

@@ -0,0 +1,90 @@
+export interface EmitTestProps {
+    initialCount?: number
+}
+
+export interface EmitTestResult {
+    clickCount: SignalAccessor<number>
+    lastEvent: SignalAccessor<string>
+    emitSimple: () => void
+    emitWithData: () => void
+    emitObject: () => void
+    template: string
+}
+
+export const EmitTest = defineComponent({
+    setup(props: EmitTestProps, { emit }: { emit: (eventName: string, ...args: any[]) => void }): EmitTestResult {
+        const clickCount = signal<number>(props.initialCount ?? 0)
+        const lastEvent = signal<string>('None')
+
+        inspect(clickCount, lastEvent)
+
+        return {
+            clickCount,
+            lastEvent,
+
+            // Butoane pentru test emit
+            emitSimple: () => {
+                clickCount(clickCount() + 1)
+                emit('simple-click')
+                lastEvent('simple-click')
+            },
+            emitWithData: () => {
+                const count = clickCount() + 1
+                clickCount(count)
+                emit('click-with-data', count, 'button-pressed', Date.now())
+                lastEvent(`click-with-data: ${count}`)
+            },
+            emitObject: () => {
+                const data = {
+                    timestamp: Date.now(),
+                    message: 'Hello from child!',
+                    counter: clickCount() + 1
+                }
+                clickCount(data.counter)
+                emit('object-event', data)
+                lastEvent(`object-event: ${data.message}`)
+            },
+
+            template: `
+                <div style="background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%); border: 2px solid #4da6ff; border-radius: 12px; padding: 24px; margin: 20px 0; color: #fff;">
+                    <h3 style="margin: 0 0 16px 0; color: #4da6ff;">🧪 EMIT EVENTS TEST LAB</h3>
+                    
+                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;">
+                        <button @click="emitSimple" 
+                                style="padding: 16px; background: #10b981; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem;">
+                            📤 EMIT SIMPLE
+                            <small style="display: block; font-size: 0.8rem; font-weight: normal; margin-top: 4px;">No data</small>
+                        </button>
+                        
+                        <button @click="emitWithData" 
+                                style="padding: 16px; background: #f59e0b; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem;">
+                            📤 EMIT WITH DATA
+                            <small style="display: block; font-size: 0.8rem; font-weight: normal; margin-top: 4px;">count, label, timestamp</small>
+                        </button>
+                        
+                        <button @click="emitObject" 
+                                style="padding: 16px; background: #8b5cf6; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem;">
+                            📤 EMIT OBJECT
+                            <small style="display: block; font-size: 0.8rem; font-weight: normal; margin-top: 4px;">{ timestamp, message, counter }</small>
+                        </button>
+                    </div>
+                    
+                    <div style="background: rgba(0,0,0,0.3); padding: 16px; border-radius: 8px; font-family: monospace;">
+                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+                            <span style="color: #888;">Click Count:</span>
+                            <span style="color: #4da6ff; font-size: 1.5rem; font-weight: bold;">{{ clickCount }}</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between;">
+                            <span style="color: #888;">Last Event:</span>
+                            <span style="color: #f59e0b;">{{ lastEvent }}</span>
+                        </div>
+                    </div>
+                    
+                    <p style="margin: 16px 0 0 0; font-size: 0.85rem; color: #888; text-align: center;">
+                        ✅ Check browser console for emitted events!
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/app/components/UserForm.js

@@ -2,6 +2,7 @@ export const UserForm = defineComponent({
     setup() {
         const userName = signal('Guest')
         const inputRef = signal(null)
+        inspect(userName)
 
         return {
             userName,

package/app/components/UserForm.ts

@@ -1,5 +1,3 @@
-import { defineComponent, signal, type SignalAccessor } from '../../framework/index.js'
-
 type UserFormResult = {
     userName: SignalAccessor<string>
     inputRef: SignalAccessor<HTMLInputElement | null>

package/app/main.ts

@@ -1,11 +1,13 @@
-import { createRouter, mountOutlet } from '../framework/index.js'
+import { createRouter, provide, inject } from '../framework/index.js'
 import type { Route } from '../framework/types/index.js'
 import { Home } from './routes/Home.js'
 import { About } from './routes/About.js'
+import { TestFor } from './routes/TestFor.js'
 
 const routes: Route[] = [
     { path: '/', component: Home },
     { path: '/about', component: About },
+    { path: '/test-for', component: TestFor },
 ]
 
 createRouter(routes)

package/app/providers/ChildComponent.js

@@ -0,0 +1,44 @@
+import { inject } from '../../framework/index.js'
+import { GrandchildComponent } from './GrandchildComponent.js'
+
+// ChildComponent - injects values from parent (ParentComponent)
+export const ChildComponent = defineComponent({
+    components: { GrandchildComponent },
+    setup(props, { emit }) {
+        // Inject values provided by the parent
+        const count = inject('count')
+        const message = inject('message')
+
+        // These are NOT provided by parent, so they will be undefined
+        const nonExistent = inject('nonExistent')
+
+        function updateMessage() {
+            message('Message updated by Child!')
+        }
+
+        return {
+            count,
+            message,
+            nonExistent,
+            updateMessage,
+            template: `
+                <div style="padding: 15px; border: 2px solid #2196F3; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
+                    <h3 style="color: #2196F3;">Child Component (direct child of Parent)</h3>
+                    <p>I'm injecting these values from my parent:</p>
+                    <ul style="background: #333; padding: 12px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }}</li>
+                        <li><strong>message:</strong> {{ message }}</li>
+                        <li><strong>nonExistent:</strong> {{ nonExistent || 'undefined' }}</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
+                    </button>
+                    
+                    <div style="margin-top: 15px;">
+                        {{ GrandchildComponent }}
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/ChildComponent.ts

@@ -0,0 +1,47 @@
+import { inject, provide } from '../../framework/index.js'
+import { GrandchildComponent } from './GrandchildComponent.js'
+
+// ChildComponent - injects values from parent (ParentComponent)
+export const ChildComponent = defineComponent({
+    components: { GrandchildComponent },
+    setup() {
+        // Inject values provided by the parent
+        const count = inject('count')
+        const message = inject('message')
+
+        // These are NOT provided by parent, so they will be undefined
+        const nonExistent = inject('nonExistent')
+
+        function updateMessage(): void {
+            const msg = message as any
+            if (msg) {
+                msg('Message updated by Child!')
+            }
+        }
+
+        return {
+            count,
+            message,
+            nonExistent,
+            updateMessage,
+            template: `
+                <div style="padding: 15px; border: 2px solid #2196F3; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
+                    <h3 style="color: #2196F3;">Child Component (direct child of Parent)</h3>
+                    <p>I'm injecting these values from my parent:</p>
+                    <ul style="background: #333; padding: 12px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }}</li>
+                        <li><strong>message:</strong> {{ message }}</li>
+                        <li><strong>nonExistent:</strong> {{ nonExistent || 'undefined' }}</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
+                    </button>
+                    
+                    <div style="margin-top: 15px;">
+                        {{ GrandchildComponent }}
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/GrandchildComponent.js

@@ -0,0 +1,41 @@
+import { inject } from '../../framework/index.js'
+
+// GrandchildComponent - injects values from grandparent (ParentComponent)
+// This demonstrates that inject() searches the entire ancestor chain
+export const GrandchildComponent = defineComponent({
+    setup(props, { emit }) {
+        // Inject from grandparent (2 levels up)
+        const count = inject('count')
+        const message = inject('message')
+        const userData = inject('userData')
+        const appVersion = inject('appVersion')
+
+        function updateMessage() {
+            // message is a signal, so we can update it from grandchild!
+            message('Updated from Grandchild!')
+        }
+
+        return {
+            count,
+            message,
+            userData,
+            appVersion,
+            updateMessage,
+            template: `
+                <div style="padding: 15px; border: 2px solid #9C27B0; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
+                    <h4 style="color: #9C27B0;">Grandchild Component (injected from grandparent!)</h4>
+                    <p>I can inject from any ancestor, not just my direct parent:</p>
+                    <ul style="background: #333; padding: 12px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }} <em>(from ParentComponent)</em></li>
+                        <li><strong>message:</strong> {{ message }} <em>(from ParentComponent)</em></li>
+                        <li><strong>userData:</strong> {{ userData.name }}, {{ userData.age }} <em>(from ParentComponent)</em></li>
+                        <li><strong>appVersion:</strong> {{ appVersion }} <em>(from ParentComponent)</em></li>
+                    </ul>
+                    <button @click="updateMessage" style="margin-top: 10px; padding: 6px 12px; background: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                        Update Message from Grandchild
+                    </button>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/GrandchildComponent.ts

@@ -0,0 +1,48 @@
+import { inject, provide } from '../../framework/index.js'
+
+interface UserData {
+    name: string
+    age: number
+}
+
+// GrandchildComponent - injects values from grandparent (ParentComponent)
+// This demonstrates that inject() searches the entire ancestor chain
+export const GrandchildComponent = defineComponent({
+    setup() {
+        // Inject from grandparent (2 levels up)
+        const count = inject('count')
+        const message = inject('message')
+        const userData = inject('userData')
+        const appVersion = inject('appVersion')
+
+        function updateMessage(): void {
+            const msg = message as any
+            if (msg) {
+                msg('Updated from Grandchild!')
+            }
+        }
+
+        return {
+            count,
+            message,
+            userData,
+            appVersion,
+            updateMessage,
+            template: `
+                <div style="padding: 15px; border: 2px solid #9C27B0; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
+                    <h4 style="color: #9C27B0;">Grandchild Component (injected from grandparent!)</h4>
+                    <p>I can inject from any ancestor, not just my direct parent:</p>
+                    <ul style="background: #333; padding: 12px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }} <em>(from ParentComponent)</em></li>
+                        <li><strong>message:</strong> {{ message }} <em>(from ParentComponent)</em></li>
+                        <li><strong>userData:</strong> {{ userData.name }}, {{ userData.age }} <em>(from ParentComponent)</em></li>
+                        <li><strong>appVersion:</strong> {{ appVersion }} <em>(from ParentComponent)</em></li>
+                    </ul>
+                    <button @click="updateMessage" style="margin-top: 10px; padding: 6px 12px; background: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                        Update Message from Grandchild
+                    </button>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/ParentComponent.js

@@ -0,0 +1,48 @@
+import { provide } from '../../framework/index.js'
+import { ChildComponent } from './ChildComponent.js'
+
+// ParentComponent - provides values to child components
+export const ParentComponent = defineComponent({
+    components: { ChildComponent },
+    setup(props, { emit }) {
+        const count = signal(42)
+        const message = signal('Hello from Parent!')
+        const userData = { name: 'John', age: 30 }
+
+        // Provide values to descendant components
+        provide('count', count)
+        provide('message', message)
+        provide('userData', userData)
+        provide('appVersion', '1.0.0')
+
+        function updateCount() {
+            count(count() + 10)
+        }
+
+        return {
+            count,
+            message,
+            userData,
+            updateCount,
+            template: `
+                <div style="padding: 20px; border: 2px solid #4CAF50; border-radius: 8px; margin: 20px 0; color: #000;">
+                    <h2 style="color: #4CAF50;">Parent Component</h2>
+                    <p>I'm providing these values to my children:</p>
+                    <ul style="background: #333; padding: 15px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }}</li>
+                        <li><strong>message:</strong> {{ message }}</li>
+                        <li><strong>userData:</strong> {{ userData.name }} ({{ userData.age }} years)</li>
+                        <li><strong>appVersion:</strong> 1.0.0</li>
+                    </ul>
+                    <button @click="updateCount" style="margin-top: 10px; padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                        Update Count (+10)
+                    </button>
+                    
+                    <div style="margin-top: 20px;">
+                        {{ ChildComponent }}
+                    </div>
+                </div>
+            `
+        }
+    }
+})