fusee-framework 1.2.1 → 1.3.0

package/README.md

@@ -1,5 +1,5 @@
 # Fusée Framework 🚀
-**v1.2.1 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.3.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, Dependency Injection for components and a comprehensive CLI for instant application scaffolding.
 
@@ -44,20 +44,29 @@ A typical Fusée project looks like this:
 ## 📝 Example Component
 
 ```javascript
-import { defineComponent, signal } from './framework/core/index.js';
-
-export const Counter = defineComponent({
+export const Welcome = defineComponent({
     setup() {
+        const name = signal('World');
         const count = signal(0);
+        const double = computed(() => count() * 2);
+
         return {
+            name,
             count,
+            double,
             inc: () => count(count() + 1),
-            dec: () => count(count() - 1),
             template: `
-                <div class="counter-card">
-                    <h2>Counter: {{ count }}</h2>
-                    <button @click="dec">-</button>
-                    <button @click="inc">+</button>
+                <div class="card">
+                    <h2>Hello, {{ name }}!</h2>
+                    <input f-model="name" placeholder="Name" />
+                    
+                    <button @click.debounce.300ms="inc">
+                        Clicked {{ count }} times
+                    </button>
+                    
+                    <p f-if="count() > 0">
+                        Double: <strong>{{ double }}</strong>
+                    </p>
                 </div>
             `
         };
@@ -71,5 +80,6 @@ export const Counter = defineComponent({
 
 - [ ] Global Store Management
 - [ ] Advanced file-based routing support
+- [ ] Integrated lightweight compiler which transforms declarative HTML into optimized runtime instructions
 
 Built with ❤️ by me, Sebi Somu, a forward-thinking JavaScript Architect.

package/app/components/DynamicA.js

@@ -0,0 +1,24 @@
+export const DynamicA = defineComponent({
+    props: ['title'],
+    setup(props) {
+        onMount(() => console.log('✅ DynamicA mounted'))
+        onUnmount(() => console.log('❌ DynamicA unmounted'))
+        
+        const localValue = signal('')
+        
+        return {
+            title: props.title,
+            localValue,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #3b82f6;">
+                    <h3 style="color: #3b82f6;">Component A</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                        <label>Local state (persists with f-keepAlive):</label><br>
+                        <input f-model="localValue" placeholder="Type something here..." style="background: #0f172a; color: white; border: 1px solid #3b82f6; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/DynamicA.ts

@@ -0,0 +1,24 @@
+export const DynamicA = defineComponent({
+    props: ['title'],
+    setup(props: { title: string }) {
+        onMount(() => console.log('✅ DynamicA mounted'))
+        onUnmount(() => console.log('❌ DynamicA unmounted'))
+        
+        const localValue = signal('')
+        
+        return {
+            title: props.title,
+            localValue,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #3b82f6;">
+                    <h3 style="color: #3b82f6;">Component A</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                        <label>Local state (persists with f-keepAlive):</label><br>
+                        <input f-model="localValue" placeholder="Type something here..." style="background: #0f172a; color: white; border: 1px solid #3b82f6; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/DynamicB.js

@@ -0,0 +1,24 @@
+export const DynamicB = defineComponent({
+    props: ['title'],
+    setup(props) {
+        onMount(() => console.log('✅ DynamicB mounted'))
+        onUnmount(() => console.log('❌ DynamicB unmounted'))
+
+        const localInfo = signal('')
+
+        return {
+            title: props.title,
+            localInfo,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #ec4899;">
+                    <h3 style="color: #ec4899;">Component B</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                         <label>Local info (B):</label><br>
+                         <input f-model="localInfo" placeholder="B settings..." style="background: #1a1a1a; color: white; border: 1px solid #ec4899; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/DynamicB.ts

@@ -0,0 +1,24 @@
+export const DynamicB = defineComponent({
+    props: ['title'],
+    setup(props: { title: string }) {
+        onMount(() => console.log('✅ DynamicB mounted'))
+        onUnmount(() => console.log('❌ DynamicB unmounted'))
+
+        const localInfo = signal('')
+
+        return {
+            title: props.title,
+            localInfo,
+            template: `
+                <div style="padding: 20px; background: #1e293b; border-radius: 8px; border: 2px solid #ec4899;">
+                    <h3 style="color: #ec4899;">Component B</h3>
+                    <p>Prop from parent: <strong>{{ title }}</strong></p>
+                    <div style="margin-top: 10px;">
+                         <label>Local info (B):</label><br>
+                         <input f-model="localInfo" placeholder="B settings..." style="background: #1a1a1a; color: white; border: 1px solid #ec4899; padding: 5px; width: 100%;">
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/components/EmitTest.js

@@ -2,14 +2,13 @@ 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')
@@ -22,7 +21,7 @@ export const EmitTest = defineComponent({
                 lastEvent(`click-with-data: ${count}`)
             },
             emitObject: () => {
-                const data = { 
+                const data = {
                     timestamp: Date.now(),
                     message: 'Hello from child!',
                     counter: clickCount() + 1
@@ -31,7 +30,7 @@ export const EmitTest = defineComponent({
                 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>

package/app/components/Loading.js

@@ -0,0 +1,26 @@
+import { defineComponent } from '../../framework/index.js'
+
+export const Loading = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="display: flex; justify-content: center; align-items: center; padding: 2rem;">
+                    <div style="
+                        width: 40px; 
+                        height: 40px; 
+                        border: 4px solid #f3f3f3; 
+                        border-top: 4px solid #3b82f6; 
+                        border-radius: 50%; 
+                        animation: spin 1s linear infinite;
+                    "></div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                </div>
+            `
+        }
+    }
+})

package/app/components/Loading.ts

@@ -0,0 +1,26 @@
+import { defineComponent } from '../../framework/index.js'
+
+export const Loading = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="display: flex; justify-content: center; align-items: center; padding: 2rem;">
+                    <div style="
+                        width: 40px; 
+                        height: 40px; 
+                        border: 4px solid #f3f3f3; 
+                        border-top: 4px solid #3b82f6; 
+                        border-radius: 50%; 
+                        animation: spin 1s linear infinite;
+                    "></div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                </div>
+            `
+        }
+    }
+})

package/app/main.js

@@ -1,13 +1,39 @@
-import { createRouter } from '../framework/index.js'
-import { Home } from './routes/Home.js'
-import { About } from './routes/About.js'
-import { TestFor } from './routes/TestFor.js'
+import { createRouter, mountOutlet, defineAsyncComponent } from '../framework/index.js'
+import { Loading } from './components/Loading.js'
 
-createRouter([
-    { path: '/', component: Home },
-    { path: '/about', component: About },
-    { path: '/test-for', component: TestFor },
-])
+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
+        }) 
+    },
+]
+
+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

@@ -1,13 +1,36 @@
-import { createRouter, provide, inject } from '../framework/index.js'
+import { createRouter, mountOutlet, defineAsyncComponent } 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'
+import { Loading } from './components/Loading.js'
 
 const routes: Route[] = [
-    { path: '/', component: Home },
-    { path: '/about', component: About },
-    { path: '/test-for', component: TestFor },
+    { 
+        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
+        }) 
+    },
 ]
 
 createRouter(routes)

package/app/routes/TestDynamic.js

@@ -0,0 +1,40 @@
+import { DynamicA } from '../components/DynamicA.js'
+import { DynamicB } from '../components/DynamicB.js'
+
+export const TestDynamic = defineComponent({
+    components: { DynamicA, DynamicB },
+    setup() {
+        const currentType = signal('DynamicA')
+        const sharedTitle = signal('Test Dinamic active')
+
+        return {
+            currentType,
+            sharedTitle,
+            toggle: () => {
+                currentType(currentType() === 'DynamicA' ? 'DynamicB' : 'DynamicA')
+            },
+            template: `
+                <div class="page">
+                    <h1>Dynamic Components System (Vue-style)</h1>
+                    <p>Using the custom <code>f-is</code> directive.</p>
+                    
+                    <div style="margin: 20px 0; display: flex; gap: 10px; align-items: center;">
+                        <button @click="toggle" class="primary-btn">Toggle Component</button>
+                        <span>Active: <strong>{{ currentType }}</strong></span>
+                    </div>
+
+                    <input f-model="sharedTitle" style="margin-bottom: 20px; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; width: 100%;">
+
+                    <hr style="border: 0; border-top: 1px solid #444; margin: 30px 0;">
+
+                    <div f-is="currentType" f-keepAlive :title="sharedTitle"></div>
+                    
+                    <p style="margin-top: 40px; color: #888; font-size: 0.9em;">
+                        Note: The component above changes reactively when you click the button. 
+                        The <code>:title</code> prop is automatically passed to the active component.
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/TestDynamic.ts

@@ -0,0 +1,40 @@
+import { DynamicA } from '../components/DynamicA.js'
+import { DynamicB } from '../components/DynamicB.js'
+
+export const TestDynamic = defineComponent({
+    components: { DynamicA, DynamicB },
+    setup() {
+        const currentType = signal('DynamicA')
+        const sharedTitle = signal('Dynamic Test Active')
+
+        return {
+            currentType,
+            sharedTitle,
+            toggle: () => {
+                currentType(currentType() === 'DynamicA' ? 'DynamicB' : 'DynamicA')
+            },
+            template: `
+                <div class="page">
+                    <h1>Dynamic Components System (Vue-style)</h1>
+                    <p>Using the custom <code>f-is</code> directive.</p>
+                    
+                    <div style="margin: 20px 0; display: flex; gap: 10px; align-items: center;">
+                        <button @click="toggle" class="primary-btn">Toggle Component</button>
+                        <span>Active: <strong>{{ currentType }}</strong></span>
+                    </div>
+
+                    <input f-model="sharedTitle" style="margin-bottom: 20px; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; width: 100%;">
+
+                    <hr style="border: 0; border-top: 1px solid #444; margin: 30px 0;">
+
+                    <div f-is="currentType" :title="sharedTitle"></div>
+                    
+                    <p style="margin-top: 40px; color: #888; font-size: 0.9em;">
+                        Note: The component above changes reactively when you click the button. 
+                        The <code>:title</code> prop is automatically passed to the active component.
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/framework/core/component.js

@@ -187,15 +187,84 @@ export function defineComponent(options) {
 }
 
 export function provide(key, value) {
-    if(!currentInstance) return
+    if (!currentInstance) return
     currentInstance._provides[key] = value
 }
 
 export function inject(key) {
     let parent = currentInstance?._parent
-    while(parent) {
+    while (parent) {
         if (key in parent._provides) return parent._provides[key];
         parent = parent._parent;
     }
     return null;
+}
+
+export function defineAsyncComponent(loaderOrOptions) {
+    const options = typeof loaderOrOptions === 'function' 
+        ? { loader: loaderOrOptions } 
+        : loaderOrOptions
+
+    return function AsyncComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
+        const instance = {
+            props,
+            _mountHooks: [],
+            _unmountHooks: [],
+            _effects: [],
+            _element: null,
+            _provides: {},
+            _parent: parent,
+        }
+
+        let childApi = null
+        let loadingApi = null
+        let isUnmounted = false
+
+        function render(container) {
+            instance._element = container
+
+            if (options.loadingComponent) {
+                loadingApi = options.loadingComponent({}, { parent })
+                loadingApi.render(container)
+            } else {
+                container.innerHTML = '<!-- async component boundary -->'
+            }
+
+            Promise.resolve(options.loader())
+                .then(comp => {
+                    if (isUnmounted) return
+                    let ComponentFn = comp.default || comp
+
+                    if (typeof ComponentFn === 'object' && ComponentFn !== null) {
+                        ComponentFn = Object.values(ComponentFn).find(v => typeof v === 'function') || ComponentFn
+                    }
+
+                    if (loadingApi) {
+                        loadingApi.unmount()
+                        loadingApi = null
+                    }
+
+                    childApi = ComponentFn(props, { listeners, slots, parent })
+
+                    container.innerHTML = ''
+                    childApi.render(container)
+                })
+                .catch(err => {
+                    console.error('[framework] Failed to load async component:', err)
+                })
+
+            return instance
+        }
+
+        function unmount() {
+            isUnmounted = true
+            if (loadingApi) loadingApi.unmount()
+            if (childApi) childApi.unmount()
+            if (instance._element && !childApi && !loadingApi) {
+                instance._element.innerHTML = ''
+            }
+        }
+
+        return { render, unmount, instance }
+    }
 }

package/framework/core/directives.js

@@ -5,6 +5,7 @@ import { compileNode } from './compiler.js'
 export function processDirectives(root, context, components, effects) {
     if (processFor(root, context, components, effects)) return true
     if (processIf(root, context, components, effects)) return true
+    if (processIs(root, context, components, effects)) return true
 
     processShow(root, context, effects)
     processModel(root, context, effects)
@@ -275,6 +276,110 @@ export function processIf(el, context, components, effects) {
     return true
 }
 
+export function processIs(el, context, components, effects) {
+    if (el.nodeType !== 1 || !el.hasAttribute('f-is')) return false
+
+    // 1. Prepare directive state
+    const expr = el.getAttribute('f-is')
+    const keepAlive = processKeepAlive(el)
+    
+    el.removeAttribute('f-is')
+
+    const anchor = document.createComment('f-keepAlive-anchor')
+    el.parentNode.insertBefore(anchor, el)
+
+    // Keep a clone to reuse attributes (props/@events) for every dynamic instance
+    const templateNode = el.cloneNode(true)
+    el.remove()
+
+    const cache = new Map()
+    let activeKey = null
+    let activeCleanup = []
+
+    // 2. Reactive loop
+    effects.push(effect(() => {
+        const rawValue = evaluateExpression(expr, context)
+
+        // Skip if same component is already active
+        if (rawValue === activeKey) return
+
+        // 3. Handle exiting component
+        if (activeKey !== null) {
+            const currentEntry = cache.get(activeKey)
+            if (currentEntry) {
+                if (keepAlive) {
+                    currentEntry.node.remove()
+                } else {
+                    for (const cleanup of activeCleanup) if (typeof cleanup === 'function') cleanup()
+                    currentEntry.node.remove()
+                    cache.delete(activeKey)
+                    activeCleanup = []
+                }
+            }
+        }
+
+        if (!rawValue) {
+            activeKey = null
+            return
+        }
+
+        // 4. Handle entering component
+        let entry = cache.get(rawValue)
+
+        if (entry && keepAlive) {
+            // Restore from cache
+            anchor.parentNode.insertBefore(entry.node, anchor.nextSibling)
+            activeCleanup = entry.cleanup
+        } else {
+            // Create new instance
+            let ComponentFn = typeof rawValue === 'string' ? components[rawValue] : rawValue
+
+            if (typeof ComponentFn !== 'function') {
+                console.warn(`[framework] f-is: Component "${rawValue}" not found or invalid.`)
+                return
+            }
+
+            const compEl = templateNode.cloneNode(true)
+            compEl._isDynamicComponent = true
+
+            const tempName = '__dynamic_component__'
+            compEl.setAttribute('data-component', tempName)
+
+            anchor.parentNode.insertBefore(compEl, anchor.nextSibling)
+
+            const childCleanup = []
+            const dynamicComponents = { ...components, [tempName]: ComponentFn }
+
+            // Trigger the internal compiler to bind props and events
+            compileNode(compEl, context, dynamicComponents, childCleanup)
+
+            entry = { node: compEl, cleanup: childCleanup }
+            cache.set(rawValue, entry)
+            activeCleanup = childCleanup
+        }
+
+        activeKey = rawValue
+    }))
+
+    // Cleanup all cached components when this directive is destroyed
+    effects.push(() => {
+        for (const entry of cache.values()) {
+            for (const c of entry.cleanup) if (typeof c === 'function') c()
+            entry.node.remove()
+        }
+        cache.clear()
+    })
+
+    return true
+}
+
+function processKeepAlive(el) {
+    if (el.nodeType !== 1) return false
+    const hasKeepAlive = el.hasAttribute('f-keepAlive')
+    if (hasKeepAlive) el.removeAttribute('f-keepAlive')
+    return hasKeepAlive
+}
+
 export function processShow(el, context, effects) {
     if (el.nodeType !== 1 || !el.hasAttribute('f-show')) return
 
@@ -304,6 +409,7 @@ export function processHtml(el, context, effects) {
         el.innerHTML = String(val ?? '')
     }))
 }
+
 export function processEvents(el, context, effects) {
     if (el.nodeType !== 1 || !el.attributes) return
 
@@ -317,6 +423,39 @@ export function processEvents(el, context, effects) {
 
             el.removeAttribute(attr.name)
 
+            let timeoutId
+            let lastRun = 0
+            let throttleTimeoutId
+
+            let debounceMs = 0
+            let throttleMs = 0
+
+            const parseDuration = (idx) => {
+                const next = modifiers[idx + 1]
+                if (next && /^\d/.test(next)) {
+                    if (next.endsWith('ms')) return parseInt(next) || 250
+                    if (next.endsWith('s')) return (parseFloat(next) || 0.25) * 1000
+                }
+                return 250 // Default
+            }
+
+            const debounceIdx = modifiers.indexOf('debounce')
+            if (debounceIdx > -1) debounceMs = parseDuration(debounceIdx)
+
+            const throttleIdx = modifiers.indexOf('throttle')
+            if (throttleIdx > -1) throttleMs = parseDuration(throttleIdx)
+
+            const executeLogic = (e) => {
+                batch(() => {
+                    const potentialFn = context[expr]
+                    if (typeof potentialFn === 'function' && !potentialFn.isSignal) {
+                        potentialFn(e)
+                    } else {
+                        evaluateExpression(expr, context, { $event: e }, false)
+                    }
+                })
+            }
+
             const handler = (e) => {
                 if (modifiers.includes('prevent')) e.preventDefault()
                 if (modifiers.includes('stop')) e.stopPropagation()
@@ -336,14 +475,33 @@ export function processEvents(el, context, effects) {
                     }
                 }
 
-                batch(() => {
-                    const potentialFn = context[expr]
-                    if (typeof potentialFn === 'function' && !potentialFn.isSignal) {
-                        potentialFn(e)
+                // Throttle logic (ensures execution at most once every X ms)
+                if (throttleMs > 0) {
+                    const now = Date.now()
+                    const remaining = throttleMs - (now - lastRun)
+
+                    if (remaining <= 0) {
+                        clearTimeout(throttleTimeoutId)
+                        lastRun = now
+                        executeLogic(e)
                     } else {
-                        evaluateExpression(expr, context, { $event: e }, false)
+                        // Standard throttle with trailing edge support
+                        clearTimeout(throttleTimeoutId)
+                        throttleTimeoutId = setTimeout(() => {
+                            lastRun = Date.now()
+                            executeLogic(e)
+                        }, remaining)
                     }
-                })
+                    return
+                }
+
+                // Debounce logic (waits for X ms of inactivity)
+                if (debounceMs > 0) {
+                    clearTimeout(timeoutId)
+                    timeoutId = setTimeout(() => executeLogic(e), debounceMs)
+                } else {
+                    executeLogic(e)
+                }
             }
 
             const targetNode = modifiers.includes('window') ? window : (modifiers.includes('document') ? document : el)
@@ -356,6 +514,8 @@ export function processEvents(el, context, effects) {
             if (effects) {
                 effects.push(() => {
                     targetNode.removeEventListener(eventName, handler, options)
+                    if (timeoutId) clearTimeout(timeoutId)
+                    if (throttleTimeoutId) clearTimeout(throttleTimeoutId)
                 })
             }
         }

package/framework/index.js

@@ -1,6 +1,6 @@
 // ─── Framework Public API ─────────────────────────────────────────────────────
 export { signal, computed, effect, batch, untrack, inspect } from './core/signal.js'
-export { defineComponent, onMount, onUnmount, parseSlots, provide, inject } from './core/component.js'
+export { defineComponent, defineAsyncComponent, onMount, onUnmount, parseSlots, provide, inject } from './core/component.js'
 export { createRouter, navigate, mountOutlet } from './router/router.js'
 export { mountTemplate } from './core/compiler.js'
 

package/framework/types/component.d.ts

@@ -70,3 +70,14 @@ export declare function inject<T>(key: string): T | null
 export declare function defineComponent<TProps = EmptyProps>(
     options: ComponentOptions<TProps>
 ): ComponentFactory<TProps>
+
+export type AsyncComponentLoader<TProps = ComponentProps> = () => Promise<ComponentFactory<TProps> | { default: ComponentFactory<TProps> } | Record<string, any>>
+
+export type AsyncComponentOptions<TProps = ComponentProps> = {
+    loader: AsyncComponentLoader<TProps>
+    loadingComponent?: ComponentFactory<any>
+}
+
+export declare function defineAsyncComponent<TProps = ComponentProps>(
+    loaderOrOptions: AsyncComponentLoader<TProps> | AsyncComponentOptions<TProps>
+): ComponentFactory<TProps>

package/framework/types/directives.d.ts

@@ -25,6 +25,13 @@ export function processIf(
     effects: (() => void)[]
 ): void
 
+export function processIs(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
 export function processShow(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
 export function processHtml(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
 export function processText(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void

package/index.html

@@ -167,7 +167,8 @@
   <nav>
     <a href="#/">Home</a>
     <a href="#/about">About</a>
-    <a href="#/test-for">Test f-for</a>
+    <a href="#/test-for">Loops Test</a>
+    <a href="#/dynamic" style="color: #ec4899;">Dynamic Components</a>
   </nav>
   <div id="app"></div>
   <script type="module" src="./app/main.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fusee-framework",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Fusée - Signals-first JS Framework | Peak Performance",
   "main": "framework/index.js",
   "types": "framework/types/index.d.ts",