fusee-framework 1.7.0 → 1.8.0

package/app/pages/scroll-demo.ts

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

package/app/providers/ChildComponent.js

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

package/app/providers/ChildComponent.ts

@@ -1,47 +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>
-            `
-        }
-    }
-})
+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 we use optional: true to avoid throwing NullInjectorError
+        const nonExistent = inject('nonExistent', { optional: true })
+
+        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

@@ -1,4 +1,5 @@
 import { inject } from '../../framework/index.js'
+import { LoggerService, APP_CONFIG } from '../services.js'
 
 // GrandchildComponent - injects values from grandparent (ParentComponent)
 // This demonstrates that inject() searches the entire ancestor chain
@@ -10,6 +11,11 @@ export const GrandchildComponent = defineComponent({
         const userData = inject('userData')
         const appVersion = inject('appVersion')
 
+        const logger = inject(LoggerService)
+        const config = inject(APP_CONFIG)
+
+        logger.log('GrandchildComponent initialized!')
+
         function updateMessage() {
             // message is a signal, so we can update it from grandchild!
             message('Updated from Grandchild!')
@@ -20,6 +26,8 @@ export const GrandchildComponent = defineComponent({
             message,
             userData,
             appVersion,
+            logger,
+            config,
             updateMessage,
             template: `
                 <div style="padding: 15px; border: 2px solid #9C27B0; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
@@ -30,7 +38,18 @@ export const GrandchildComponent = defineComponent({
                         <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>
+                        <li><strong>Logger ID:</strong> {{ logger.id }} <em>(Singleton!)</em></li>
+                        <li><strong>App Title:</strong> {{ config.title }} <em>(Global Config)</em></li>
                     </ul>
+
+                    <div style="margin-top: 15px; padding: 10px; background: #2a2a2a; border-radius: 4px;">
+                        <h5 style="margin-bottom: 5px; color: #34d399;">Service Logs:</h5>
+                        <ul style="font-size: 0.8rem; list-style: none;">
+                            <li f-for="log in logger.logs" style="border-bottom: 1px solid #444; padding: 2px 0;">
+                                <span style="color: #888;">[{{ log.time }}]</span> {{ log.message }}
+                            </li>
+                        </ul>
+                    </div>
                     <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>

package/app/providers/ParentComponent.js

@@ -1,4 +1,5 @@
-import { provide } from '../../framework/index.js'
+import { provide, inject } from '../../framework/index.js'
+import { LoggerService } from '../services.js'
 import { ChildComponent } from './ChildComponent.js'
 
 // ParentComponent - provides values to child components
@@ -9,6 +10,9 @@ export const ParentComponent = defineComponent({
         const message = signal('Hello from Parent!')
         const userData = { name: 'John', age: 30 }
 
+        const logger = inject(LoggerService)
+        logger.log('ParentComponent initialized!')
+
         // Provide values to descendant components
         provide('count', count)
         provide('message', message)

package/app/routes/RouterExample.js

@@ -1,15 +1,24 @@
-import { currentRoute, navigate, routeParams, computed } from '../../framework/index.js'
+import { currentRoute, navigate, routeParams, routeQuery, computed } from '../../framework/index.js'
 
 export const RouterExample = defineComponent({
     setup() {
         const path = currentRoute
         const params = routeParams
+        const query = routeQuery
         const paramsJson = computed(() => JSON.stringify(params()))
+        const queryJson = computed(() => JSON.stringify(query()))
+
+        const updateQuery = () => {
+            const now = new Date().toLocaleTimeString()
+            navigate(`${path()}?t=${encodeURIComponent(now)}&user=guest`)
+        }
 
         return {
             path,
             paramsJson,
+            queryJson,
             navigate,
+            updateQuery,
             template: `
                 <div class="page">
                     <h1>🔗 Router API Demo</h1>
@@ -19,6 +28,19 @@ export const RouterExample = defineComponent({
                         <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
                     </div>
 
+                    <div class="demo-card">
+                        <h2>routeQuery Signal (Query Params)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/router?search=framework&page=1" f-link class="cmp-btn" style="text-decoration: none;">?search=framework&page=1</a>
+                            <a href="/router?filter=active&sort=desc" f-link class="cmp-btn" style="text-decoration: none;">?filter=active&sort=desc</a>
+                            <button @click="updateQuery" class="cmp-btn">Update Time via Query</button>
+                        </div>
+                        <code style="color: #f59e0b; font-size: 1.2rem;">{{ queryJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Query parameters are automatically parsed into the routeQuery signal.
+                        </p>
+                    </div>
+
                     <div class="demo-card">
                         <h2>routeParams Signal (Dynamic Routes)</h2>
                         <div style="display: flex; gap: 10px; margin-bottom: 10px;">

package/app/routes/TestResource.js

@@ -0,0 +1,47 @@
+import { defineComponent, signal, resource } from '../../framework/index.js'
+
+export default defineComponent({
+    setup() {
+        const userId = signal(1)
+
+        const [user] = resource(userId, async (id) => {
+            const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
+            if (!response.ok) throw new Error('User not found')
+            return response.json()
+        })
+
+        return {
+            userId,
+            user,
+            next: () => userId(userId() + 1),
+            prev: () => userId() > 1 && userId(userId() - 1),
+            template: `
+                <div class="p-4">
+                    <h1 class="text-2xl font-bold mb-4">Resource Demo</h1>
+                    
+                    <div class="flex gap-2 mb-4">
+                        <button @click="prev" class="px-4 py-2 bg-blue-500 text-white rounded">Prev User</button>
+                        <button @click="next" class="px-4 py-2 bg-blue-500 text-white rounded">Next User</button>
+                        <span class="py-2">User ID: {{ userId }}</span>
+                    </div>
+
+                    <div f-if="user.loading()">
+                        <p class="text-gray-500 italic">Loading user data...</p>
+                    </div>
+
+                    <div f-if="user.error()">
+                        <p class="text-red-500">Error: {{ user.error().message }}</p>
+                    </div>
+
+                    <div f-if="user() && !user.loading()">
+                        <div class="card border p-4 rounded shadow-lg bg-white">
+                            <h2 class="text-xl font-semibold">{{ user().name }}</h2>
+                            <p class="text-gray-600">Email: {{ user().email }}</p>
+                            <p class="text-gray-600">Company: {{ user().company.name }}</p>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/services.js

@@ -0,0 +1,15 @@
+import { InjectionToken, signal } from '../framework/index.js'
+
+export class LoggerService {
+    constructor() {
+        this.id = Math.random().toString(36).substr(2, 9);
+        this.logs = signal([]);
+    }
+
+    log(message) {
+        console.log(`[Logger ${this.id}] ${message}`);
+        this.logs([...this.logs(), { time: new Date().toLocaleTimeString(), message }]);
+    }
+}
+
+export const APP_CONFIG = new InjectionToken('app-config');

package/auto-imports.d.ts

@@ -6,7 +6,9 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const MutationType: typeof import('fusee-framework').MutationType
   const batch: typeof import('fusee-framework').batch
+  const clearStores: typeof import('fusee-framework').clearStores
   const computed: typeof import('fusee-framework').computed
   const defineComponent: typeof import('fusee-framework').defineComponent
   const defineStore: typeof import('fusee-framework').defineStore
@@ -21,7 +23,13 @@ declare global {
   const onMount: typeof import('fusee-framework').onMount
   const onUnmount: typeof import('fusee-framework').onUnmount
   const provide: typeof import('fusee-framework').provide
+  const registerStorePlugin: typeof import('fusee-framework').registerStorePlugin
+  const resetStore: typeof import('fusee-framework').resetStore
   const signal: typeof import('fusee-framework').signal
+  const storeToGetters: typeof import('fusee-framework').storeToGetters
+  const storeToRefs: typeof import('fusee-framework').storeToRefs
+  const storeToState: typeof import('fusee-framework').storeToState
   const untrack: typeof import('fusee-framework').untrack
+  const useNestedStore: typeof import('fusee-framework').useNestedStore
   const watch: typeof import('fusee-framework').watch
 }

package/framework/auto-import-preset.js

@@ -1,9 +1,13 @@
-export const FuseePreset = {
-    'fusee-framework': [
-        'signal', 'computed', 'effect', 'watch',
-        'batch', 'untrack', 'inspect', 'onCleanup',
-        'defineComponent', 'onMount', 'onUnmount',
-        'directive',
-        'mountOutlet', 'mountTemplate', 'emit'
-    ]
-}
+export const FuseePreset = {
+    'fusee-framework': [
+        'signal', 'computed', 'effect', 'watch',
+        'batch', 'untrack', 'inspect', 'onCleanup',
+        'defineComponent', 'onMount', 'onUnmount',
+        'directive',
+        'mountOutlet', 'mountTemplate', 'emit',
+        'defineStore', 'resetStore', 'clearStores',
+        'registerStorePlugin', 'useNestedStore',
+        'storeToRefs', 'storeToState', 'storeToGetters',
+        'MutationType'
+    ]
+}

package/framework/core/component.js

@@ -1,5 +1,7 @@
 import { effect, setEffectHook, batch } from './signal.js'
 import { mountTemplate } from './compiler.js'
+import { rootInjector, runInContext, replaceActiveInjector, EnvironmentInjector } from './di.js'
+export { inject } from './di.js'
 
 let currentInstance = null
 
@@ -129,20 +131,25 @@ export function onUnmount(fn) {
 
 export function defineComponent(options) {
     return function ComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
+        const parentInjector = (parent && parent._injector) || rootInjector;
+
         const instance = {
             props: options.props ? resolveProps(options.props, props) : props,
             _mountHooks: [],
             _unmountHooks: [],
             _effects: [],
             _element: null,
-            _provides: {},
             _parent: parent,
+            _injector: parentInjector,
+            _ownsInjector: false
         }
 
         const emit = createEmit(listeners)
 
         currentInstance = instance
-        const result = options.setup(instance.props, { emit, slots })
+        const result = runInContext(instance._injector, () => {
+            return options.setup(instance.props, { emit, slots });
+        });
         instance.state = result
         result._instance = instance
         currentInstance = null
@@ -183,17 +190,21 @@ export function defineComponent(options) {
 }
 
 export function provide(key, value) {
-    if (!currentInstance) return
-    currentInstance._provides[key] = value
-}
-
-export function inject(key) {
-    let parent = currentInstance?._parent
-    while (parent) {
-        if (key in parent._provides) return parent._provides[key];
-        parent = parent._parent;
+    if (!currentInstance) return;
+    
+    if (!currentInstance._ownsInjector) {
+        currentInstance._injector = new EnvironmentInjector([], currentInstance._injector);
+        currentInstance._ownsInjector = true;
+        replaceActiveInjector(currentInstance._injector);
+    }
+    
+    if (value === undefined && key && key.provide) {
+        currentInstance._injector.provide(key);
+    } else if (value && typeof value === 'object' && (value.useClass || value.useFactory || value.useExisting)) {
+        currentInstance._injector.provide({ provide: key, ...value });
+    } else {
+        currentInstance._injector.provide({ provide: key, useValue: value });
     }
-    return null;
 }
 
 export function defineAsyncComponent(loaderOrOptions) {
@@ -202,14 +213,17 @@ export function defineAsyncComponent(loaderOrOptions) {
         : loaderOrOptions
 
     return function AsyncComponentFactory(props = {}, { listeners = {}, slots = {}, parent = null } = {}) {
+        const parentInjector = (parent && parent._injector) || rootInjector;
+
         const instance = {
             props,
             _mountHooks: [],
             _unmountHooks: [],
             _effects: [],
             _element: null,
-            _provides: {},
             _parent: parent,
+            _injector: parentInjector,
+            _ownsInjector: false
         }
 
         let childApi = null