gonia 0.3.2 → 0.3.4

package/dist/bind-utils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared g-bind attribute processing utilities.
+ *
+ * @packageDocumentation
+ */
+import { Expression, Context } from './types.js';
+/**
+ * Apply a single g-bind attribute value to an element.
+ *
+ * @param el - The element to update
+ * @param targetAttr - The attribute name to set (without g-bind: prefix)
+ * @param value - The evaluated value
+ */
+export declare function applyBindValue(el: Element, targetAttr: string, value: unknown): void;
+/**
+ * Process all g-bind:* attributes on an element.
+ * For server-side rendering (one-time evaluation).
+ *
+ * @param el - The element to process
+ * @param ctx - The context for expression evaluation
+ * @param decode - Whether to decode HTML entities (for server-side)
+ */
+export declare function processBindAttributesOnce(el: Element, ctx: Context, decode?: boolean): void;
+/**
+ * Get all g-bind attributes from an element.
+ * Used by client to set up reactive bindings.
+ *
+ * @param el - The element to get bindings from
+ * @returns Array of [targetAttr, expression] pairs
+ */
+export declare function getBindAttributes(el: Element): Array<[string, Expression]>;

package/dist/bind-utils.js

@@ -0,0 +1,56 @@
+/**
+ * Shared g-bind attribute processing utilities.
+ *
+ * @packageDocumentation
+ */
+import { decodeHTMLEntities } from './template-utils.js';
+/**
+ * Apply a single g-bind attribute value to an element.
+ *
+ * @param el - The element to update
+ * @param targetAttr - The attribute name to set (without g-bind: prefix)
+ * @param value - The evaluated value
+ */
+export function applyBindValue(el, targetAttr, value) {
+    if (value === null || value === undefined) {
+        el.removeAttribute(targetAttr);
+    }
+    else {
+        el.setAttribute(targetAttr, String(value));
+    }
+}
+/**
+ * Process all g-bind:* attributes on an element.
+ * For server-side rendering (one-time evaluation).
+ *
+ * @param el - The element to process
+ * @param ctx - The context for expression evaluation
+ * @param decode - Whether to decode HTML entities (for server-side)
+ */
+export function processBindAttributesOnce(el, ctx, decode = false) {
+    for (const attr of [...el.attributes]) {
+        if (attr.name.startsWith('g-bind:')) {
+            const targetAttr = attr.name.slice('g-bind:'.length);
+            const expr = decode ? decodeHTMLEntities(attr.value) : attr.value;
+            const value = ctx.eval(expr);
+            applyBindValue(el, targetAttr, value);
+        }
+    }
+}
+/**
+ * Get all g-bind attributes from an element.
+ * Used by client to set up reactive bindings.
+ *
+ * @param el - The element to get bindings from
+ * @returns Array of [targetAttr, expression] pairs
+ */
+export function getBindAttributes(el) {
+    const bindings = [];
+    for (const attr of el.attributes) {
+        if (attr.name.startsWith('g-bind:')) {
+            const targetAttr = attr.name.slice('g-bind:'.length);
+            bindings.push([targetAttr, attr.value]);
+        }
+    }
+    return bindings;
+}

package/dist/client/hydrate.d.ts

@@ -8,10 +8,7 @@ import { Directive, Context } from '../types.js';
  * Registry of directives by name.
  */
 export type DirectiveRegistry = Map<string, Directive<any>>;
-/**
- * Service registry for dependency injection.
- */
-export type ServiceRegistry = Map<string, unknown>;
+export type { ServiceRegistry } from '../resolver-config.js';
 /**
  * Set context for an element (used by directives that create child contexts).
  *
@@ -52,3 +49,11 @@ export declare const hydrate: typeof init;
  * Alias for {@link init}. Use for pure client-side rendering.
  */
 export declare const mount: typeof init;
+/**
+ * Reset hydration state for testing.
+ *
+ * @remarks
+ * Clears cached selector, disconnects observer, and resets initialized flag.
+ * Primarily useful for testing.
+ */
+export declare function resetHydration(): void;

package/dist/client/hydrate.js

@@ -6,13 +6,15 @@
 import { Mode, DirectivePriority, getDirective, getDirectiveNames } from '../types.js';
 import { createContext } from '../context.js';
 import { processNativeSlot } from '../directives/slot.js';
-import { getLocalState, registerProvider, resolveFromProviders, registerDIProviders, resolveFromDIProviders } from '../providers.js';
+import { getLocalState, registerProvider, registerDIProviders } from '../providers.js';
 import { FOR_PROCESSED_ATTR } from '../directives/for.js';
 import { findParentScope, createElementScope, getElementScope } from '../scope.js';
 import { resolveDependencies as resolveInjectables } from '../inject.js';
-import { resolveContext } from '../context-registry.js';
 import { effect } from '../reactivity.js';
 import { applyAssigns, directiveNeedsScope } from '../directive-utils.js';
+import { getTemplateAttrs } from '../template-utils.js';
+import { applyBindValue, getBindAttributes } from '../bind-utils.js';
+import { createClientResolverConfig } from '../resolver-config.js';
 // Built-in directives
 import { text } from '../directives/text.js';
 import { show } from '../directives/show.js';
@@ -27,6 +29,8 @@ let cachedSelector = null;
 let initialized = false;
 /** Registered services */
 let services = new Map();
+/** Current MutationObserver (for cleanup) */
+let observer = null;
 /** Context cache by element */
 const contextCache = new WeakMap();
 /** Default registry with built-in directives */
@@ -162,30 +166,6 @@ function getContextForElement(el) {
 export function setElementContext(el, ctx) {
     contextCache.set(el, ctx);
 }
-/**
- * Create resolver config for client-side dependency resolution.
- *
- * @internal
- */
-function createClientResolverConfig(el, ctx) {
-    return {
-        resolveContext: (key) => resolveContext(el, key),
-        resolveState: () => findParentScope(el, true) ?? getLocalState(el),
-        resolveCustom: (name) => {
-            // Look up in ancestor DI providers first (provide option)
-            const diProvided = resolveFromDIProviders(el, name);
-            if (diProvided !== undefined)
-                return diProvided;
-            // Look up in global services registry
-            const service = services.get(name);
-            if (service !== undefined)
-                return service;
-            // Look up in ancestor context providers ($context)
-            return resolveFromProviders(el, name);
-        },
-        mode: 'client'
-    };
-}
 /**
  * Process directives on a single element.
  * Returns a promise if any directive is async, otherwise void.
@@ -209,7 +189,7 @@ function processElement(el, registry) {
         if (ifDirective) {
             const expr = el.getAttribute('data-g-if') || '';
             const ctx = getContextForElement(el);
-            const config = createClientResolverConfig(el, ctx);
+            const config = createClientResolverConfig(el, () => findParentScope(el, true) ?? getLocalState(el), services);
             const registration = getDirective('g-if');
             const args = resolveInjectables(ifDirective, expr, el, ctx.eval.bind(ctx), config, registration?.options.using);
             const result = ifDirective(...args);
@@ -263,26 +243,17 @@ function processElement(el, registry) {
         }
     }
     // Process g-bind:* attributes (dynamic attribute binding with reactivity)
-    for (const attr of [...el.attributes]) {
-        if (attr.name.startsWith('g-bind:')) {
-            const targetAttr = attr.name.slice('g-bind:'.length);
-            const valueExpr = attr.value;
-            effect(() => {
-                const value = ctx.eval(valueExpr);
-                if (value === null || value === undefined) {
-                    el.removeAttribute(targetAttr);
-                }
-                else {
-                    el.setAttribute(targetAttr, String(value));
-                }
-            });
-        }
+    for (const [targetAttr, valueExpr] of getBindAttributes(el)) {
+        effect(() => {
+            const value = ctx.eval(valueExpr);
+            applyBindValue(el, targetAttr, value);
+        });
     }
     // Process directives sequentially, handling async ones properly
     let chain;
     for (const { directive, expr, using } of directives) {
         const processDirective = () => {
-            const config = createClientResolverConfig(el, ctx);
+            const config = createClientResolverConfig(el, () => findParentScope(el, true) ?? getLocalState(el), services);
             const args = resolveInjectables(directive, expr, el, ctx.eval.bind(ctx), config, using);
             const result = directive(...args);
             // Register as provider if directive declares $context
@@ -387,24 +358,32 @@ export function registerService(name, service) {
  * ```
  */
 /**
- * Extract template attributes from an element.
+ * Build a selector for custom element directives that need processing.
  *
  * @internal
  */
-function getTemplateAttrs(el) {
-    const attrs = {
-        children: el.innerHTML
-    };
-    for (const attr of el.attributes) {
-        attrs[attr.name] = attr.value;
+function getCustomElementSelector() {
+    const selectors = [];
+    for (const name of getDirectiveNames()) {
+        const registration = getDirective(name);
+        if (!registration)
+            continue;
+        const { options } = registration;
+        // Only include directives with templates, scope, provide, or using
+        if (options.template || options.scope || options.provide || options.using) {
+            selectors.push(name);
+        }
     }
-    return attrs;
+    return selectors.join(',');
 }
 /**
  * Process custom element directives (those with templates).
  * Directives with templates are web components and must be processed before
  * attribute directives so their content is rendered first.
  *
+ * Elements are processed in document order (parents before children) to ensure
+ * parent scopes are initialized before child expressions are evaluated.
+ *
  * Order for each element:
  * 1. Create scope (if scope: true)
  * 2. Call directive function (if fn exists) - initializes state
@@ -414,74 +393,68 @@ function getTemplateAttrs(el) {
  * @internal
  */
 async function processDirectiveElements() {
-    for (const name of getDirectiveNames()) {
+    const selector = getCustomElementSelector();
+    if (!selector)
+        return;
+    // Get all custom elements in document order (parents before children)
+    const elements = document.querySelectorAll(selector);
+    for (const el of elements) {
+        // Skip if already processed
+        if (getElementScope(el)) {
+            continue;
+        }
+        // Find the directive registration for this element
+        const name = el.tagName.toLowerCase();
         const registration = getDirective(name);
         if (!registration) {
             continue;
         }
         const { fn, options } = registration;
-        // Only process directives with templates (web components),
-        // scope: true, provide (DI overrides), or using (context dependencies)
-        if (!options.template && !options.scope && !options.provide && !options.using) {
-            continue;
-        }
-        // Find all elements matching this directive's tag name
-        const elements = document.querySelectorAll(name);
-        for (const el of elements) {
-            // Skip if already processed
-            if (getElementScope(el)) {
-                continue;
-            }
-            // 1. Create scope if needed
-            let scope = {};
-            if (options.scope) {
-                const parentScope = findParentScope(el);
-                scope = createElementScope(el, parentScope);
-                // Collect unique directive names on this element for conflict detection
-                const directiveNameSet = new Set([name]);
-                for (const attr of el.attributes) {
-                    const attrReg = getDirective(attr.name);
-                    if (attrReg) {
-                        directiveNameSet.add(attr.name);
-                    }
+        // 1. Create scope if needed
+        let scope = {};
+        if (options.scope) {
+            const parentScope = findParentScope(el);
+            scope = createElementScope(el, parentScope);
+            // Collect unique directive names on this element for conflict detection
+            const directiveNameSet = new Set([name]);
+            for (const attr of el.attributes) {
+                const attrReg = getDirective(attr.name);
+                if (attrReg) {
+                    directiveNameSet.add(attr.name);
                 }
-                // Apply assigns with conflict detection
-                applyAssigns(scope, [...directiveNameSet]);
-            }
-            else {
-                scope = findParentScope(el, true) ?? {};
             }
-            // 2. Register DI providers if present (for descendants)
-            if (options.provide) {
-                registerDIProviders(el, options.provide);
+            // Apply assigns with conflict detection
+            applyAssigns(scope, [...directiveNameSet]);
+        }
+        else {
+            scope = findParentScope(el, true) ?? {};
+        }
+        // 2. Register DI providers if present (for descendants)
+        if (options.provide) {
+            registerDIProviders(el, options.provide);
+        }
+        // 3. Call directive function if present (initializes state)
+        if (fn) {
+            const ctx = createContext(Mode.CLIENT, scope);
+            const config = createClientResolverConfig(el, () => scope, services);
+            const args = resolveInjectables(fn, '', el, ctx.eval.bind(ctx), config, options.using);
+            const result = fn(...args);
+            if (result instanceof Promise) {
+                await result;
             }
-            // 3. Call directive function if present (initializes state)
-            if (fn) {
-                const ctx = createContext(Mode.CLIENT, scope);
-                const config = {
-                    resolveContext: (key) => resolveContext(el, key),
-                    resolveState: () => scope,
-                    mode: 'client'
-                };
-                const args = resolveInjectables(fn, '', el, ctx.eval.bind(ctx), config, options.using);
-                const result = fn(...args);
-                if (result instanceof Promise) {
-                    await result;
-                }
+        }
+        // 4. Render template if present (can query DOM for <template> elements etc)
+        if (options.template) {
+            const attrs = getTemplateAttrs(el);
+            let html;
+            if (typeof options.template === 'string') {
+                html = options.template;
             }
-            // 4. Render template if present (can query DOM for <template> elements etc)
-            if (options.template) {
-                const attrs = getTemplateAttrs(el);
-                let html;
-                if (typeof options.template === 'string') {
-                    html = options.template;
-                }
-                else {
-                    const result = options.template(attrs, el);
-                    html = result instanceof Promise ? await result : result;
-                }
-                el.innerHTML = html;
+            else {
+                const result = options.template(attrs, el);
+                html = result instanceof Promise ? await result : result;
             }
+            el.innerHTML = html;
         }
     }
 }
@@ -511,7 +484,11 @@ export async function init(registry) {
         await Promise.all(promises);
     }
     // Set up MutationObserver for dynamic elements
-    const observer = new MutationObserver((mutations) => {
+    // Clean up previous observer if it exists
+    if (observer) {
+        observer.disconnect();
+    }
+    observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
             for (const node of mutation.addedNodes) {
                 if (node.nodeType !== Node.ELEMENT_NODE)
@@ -537,3 +514,19 @@ export const hydrate = init;
  * Alias for {@link init}. Use for pure client-side rendering.
  */
 export const mount = init;
+/**
+ * Reset hydration state for testing.
+ *
+ * @remarks
+ * Clears cached selector, disconnects observer, and resets initialized flag.
+ * Primarily useful for testing.
+ */
+export function resetHydration() {
+    cachedSelector = null;
+    initialized = false;
+    defaultRegistry = null;
+    if (observer) {
+        observer.disconnect();
+        observer = null;
+    }
+}

package/dist/resolver-config.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Shared resolver configuration factory for client and server.
+ *
+ * @packageDocumentation
+ */
+import { ContextKey } from './context-registry.js';
+/**
+ * Service registry for dependency injection.
+ */
+export type ServiceRegistry = Map<string, unknown>;
+/**
+ * Resolver configuration for dependency injection.
+ */
+export interface ResolverConfig {
+    resolveContext: (key: ContextKey<unknown>) => unknown;
+    resolveState: () => Record<string, unknown>;
+    resolveRootState?: () => Record<string, unknown>;
+    resolveCustom: (name: string) => unknown;
+    mode: 'client' | 'server';
+}
+/**
+ * Create the resolveCustom function shared by client and server.
+ *
+ * @param el - The element for provider lookup
+ * @param services - The global service registry
+ * @returns A function that resolves custom dependencies
+ */
+export declare function createCustomResolver(el: Element, services: ServiceRegistry): (name: string) => unknown;
+/**
+ * Create resolver config for client-side dependency resolution.
+ *
+ * @param el - The element being processed
+ * @param resolveState - Function to resolve the current state
+ * @param services - The global service registry
+ * @returns Resolver configuration for client mode
+ */
+export declare function createClientResolverConfig(el: Element, resolveState: () => Record<string, unknown>, services: ServiceRegistry): ResolverConfig;
+/**
+ * Create resolver config for server-side dependency resolution.
+ *
+ * @param el - The element being processed
+ * @param scopeState - The current scope state
+ * @param rootState - The root state object
+ * @param services - The global service registry
+ * @returns Resolver configuration for server mode
+ */
+export declare function createServerResolverConfig(el: Element, scopeState: Record<string, unknown>, rootState: Record<string, unknown>, services: ServiceRegistry): ResolverConfig;

package/dist/resolver-config.js

@@ -0,0 +1,62 @@
+/**
+ * Shared resolver configuration factory for client and server.
+ *
+ * @packageDocumentation
+ */
+import { resolveFromProviders, resolveFromDIProviders } from './providers.js';
+import { resolveContext } from './context-registry.js';
+/**
+ * Create the resolveCustom function shared by client and server.
+ *
+ * @param el - The element for provider lookup
+ * @param services - The global service registry
+ * @returns A function that resolves custom dependencies
+ */
+export function createCustomResolver(el, services) {
+    return (name) => {
+        // Look up in ancestor DI providers first (provide option)
+        const diProvided = resolveFromDIProviders(el, name);
+        if (diProvided !== undefined)
+            return diProvided;
+        // Look up in global services registry
+        const service = services.get(name);
+        if (service !== undefined)
+            return service;
+        // Look up in ancestor context providers ($context)
+        return resolveFromProviders(el, name);
+    };
+}
+/**
+ * Create resolver config for client-side dependency resolution.
+ *
+ * @param el - The element being processed
+ * @param resolveState - Function to resolve the current state
+ * @param services - The global service registry
+ * @returns Resolver configuration for client mode
+ */
+export function createClientResolverConfig(el, resolveState, services) {
+    return {
+        resolveContext: (key) => resolveContext(el, key),
+        resolveState,
+        resolveCustom: createCustomResolver(el, services),
+        mode: 'client'
+    };
+}
+/**
+ * Create resolver config for server-side dependency resolution.
+ *
+ * @param el - The element being processed
+ * @param scopeState - The current scope state
+ * @param rootState - The root state object
+ * @param services - The global service registry
+ * @returns Resolver configuration for server mode
+ */
+export function createServerResolverConfig(el, scopeState, rootState, services) {
+    return {
+        resolveContext: (key) => resolveContext(el, key),
+        resolveState: () => scopeState,
+        resolveRootState: () => rootState,
+        resolveCustom: createCustomResolver(el, services),
+        mode: 'server'
+    };
+}

package/dist/scope.d.ts

@@ -4,6 +4,13 @@
  * @packageDocumentation
  */
 import { Directive, DirectiveOptions } from './types.js';
+/**
+ * Clear all element scopes.
+ *
+ * @remarks
+ * Primarily useful for testing.
+ */
+export declare function clearElementScopes(): void;
 /**
  * Get or create the root scope.
  *

package/dist/scope.js

@@ -10,7 +10,16 @@ import { resolveDependencies } from './inject.js';
 import { findAncestor } from './dom.js';
 import { resolveContext } from './context-registry.js';
 /** WeakMap to store element scopes */
-const elementScopes = new WeakMap();
+let elementScopes = new WeakMap();
+/**
+ * Clear all element scopes.
+ *
+ * @remarks
+ * Primarily useful for testing.
+ */
+export function clearElementScopes() {
+    elementScopes = new WeakMap();
+}
 /** Root scope for top-level directives without explicit parent scope */
 let rootScope = null;
 /**

package/dist/server/render.d.ts

@@ -1,5 +1,5 @@
 /**
- * Server-side rendering with MutationObserver-based directive indexing.
+ * Server-side rendering with direct tree walking for directive indexing.
  *
  * @packageDocumentation
  */
@@ -8,10 +8,7 @@ import { Directive } from '../types.js';
  * Registry of directives by name.
  */
 export type DirectiveRegistry = Map<string, Directive>;
-/**
- * Service registry for dependency injection.
- */
-export type ServiceRegistry = Map<string, unknown>;
+export type { ServiceRegistry } from '../resolver-config.js';
 /**
  * Register a directive in the registry.
  *
@@ -33,8 +30,8 @@ export declare function registerService(name: string, service: unknown): void;
  * Render HTML with directives on the server.
  *
  * @remarks
- * Uses MutationObserver to index elements with directive attributes
- * as they are parsed, then executes directives to produce the final HTML.
+ * Uses direct tree walking to index elements with directive attributes,
+ * then executes directives to produce the final HTML.
  * Directive attributes are preserved in output for client hydration.
  * Directives are processed in tree order (parents before children),
  * with priority used only for multiple directives on the same element.

package/dist/server/render.js

@@ -1,5 +1,5 @@
 /**
- * Server-side rendering with MutationObserver-based directive indexing.
+ * Server-side rendering with direct tree walking for directive indexing.
  *
  * @packageDocumentation
  */
@@ -7,28 +7,16 @@ import { Window } from 'happy-dom';
 import { Mode, DirectivePriority, getDirective, getDirectiveNames } from '../types.js';
 import { createContext } from '../context.js';
 import { processNativeSlot } from '../directives/slot.js';
-import { registerProvider, resolveFromProviders, registerDIProviders, resolveFromDIProviders } from '../providers.js';
+import { registerProvider, registerDIProviders } from '../providers.js';
 import { createElementScope, getElementScope } from '../scope.js';
 import { FOR_PROCESSED_ATTR, FOR_TEMPLATE_ATTR } from '../directives/for.js';
 import { IF_PROCESSED_ATTR } from '../directives/if.js';
 import { PROCESSED_ATTR } from '../process.js';
 import { resolveDependencies as resolveInjectables } from '../inject.js';
-import { resolveContext } from '../context-registry.js';
 import { applyAssigns, directiveNeedsScope } from '../directive-utils.js';
-/**
- * Decode HTML entities that happy-dom doesn't decode.
- *
- * @internal
- */
-function decodeHTMLEntities(str) {
-    return str
-        .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
-        .replace(/"/g, '"')
-        .replace(/'/g, "'")
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')
-        .replace(/&amp;/g, '&');
-}
+import { getTemplateAttrs, hasBindAttributes, decodeHTMLEntities } from '../template-utils.js';
+import { processBindAttributesOnce } from '../bind-utils.js';
+import { createServerResolverConfig } from '../resolver-config.js';
 /** Registered services */
 let services = new Map();
 /**
@@ -68,49 +56,23 @@ function getSelector(localRegistry) {
     selectors.push('[g-scope]');
     // Match common g-bind:* attributes for dynamic binding
     // These need to be indexed so their expressions can be evaluated with proper scope
-    selectors.push('[g-bind\\:class]');
-    selectors.push('[g-bind\\:style]');
-    selectors.push('[g-bind\\:href]');
-    selectors.push('[g-bind\\:src]');
-    selectors.push('[g-bind\\:id]');
-    selectors.push('[g-bind\\:value]');
-    selectors.push('[g-bind\\:disabled]');
-    selectors.push('[g-bind\\:checked]');
-    selectors.push('[g-bind\\:placeholder]');
-    selectors.push('[g-bind\\:title]');
-    selectors.push('[g-bind\\:alt]');
-    selectors.push('[g-bind\\:name]');
-    selectors.push('[g-bind\\:type]');
+    // Note: happy-dom doesn't need colon escaping (and escaped colons don't work)
+    selectors.push('[g-bind:class]');
+    selectors.push('[g-bind:style]');
+    selectors.push('[g-bind:href]');
+    selectors.push('[g-bind:src]');
+    selectors.push('[g-bind:id]');
+    selectors.push('[g-bind:value]');
+    selectors.push('[g-bind:disabled]');
+    selectors.push('[g-bind:checked]');
+    selectors.push('[g-bind:placeholder]');
+    selectors.push('[g-bind:title]');
+    selectors.push('[g-bind:alt]');
+    selectors.push('[g-bind:name]');
+    selectors.push('[g-bind:type]');
     // Note: Can't do wildcard for data-* attributes in CSS, but hasBindAttributes handles them
     return selectors.join(',');
 }
-/**
- * Get template attributes from an element.
- *
- * @internal
- */
-function getTemplateAttrs(el) {
-    const attrs = {
-        children: el.innerHTML
-    };
-    for (const attr of el.attributes) {
-        attrs[attr.name] = attr.value;
-    }
-    return attrs;
-}
-/**
- * Check if element has any g-bind:* attributes.
- *
- * @internal
- */
-function hasBindAttributes(el) {
-    for (const attr of el.attributes) {
-        if (attr.name.startsWith('g-bind:')) {
-            return true;
-        }
-    }
-    return false;
-}
 /**
  * Register a directive in the registry.
  *
@@ -149,37 +111,12 @@ function findServerScope(el, rootState) {
     }
     return rootState;
 }
-/**
- * Create resolver config for server-side dependency resolution.
- *
- * @internal
- */
-function createServerResolverConfig(el, scopeState, rootState) {
-    return {
-        resolveContext: (key) => resolveContext(el, key),
-        resolveState: () => scopeState,
-        resolveRootState: () => rootState,
-        resolveCustom: (name) => {
-            // Look up in ancestor DI providers first (provide option)
-            const diProvided = resolveFromDIProviders(el, name);
-            if (diProvided !== undefined)
-                return diProvided;
-            // Look up in global services registry
-            const service = services.get(name);
-            if (service !== undefined)
-                return service;
-            // Look up in ancestor context providers ($context)
-            return resolveFromProviders(el, name);
-        },
-        mode: 'server'
-    };
-}
 /**
  * Render HTML with directives on the server.
  *
  * @remarks
- * Uses MutationObserver to index elements with directive attributes
- * as they are parsed, then executes directives to produce the final HTML.
+ * Uses direct tree walking to index elements with directive attributes,
+ * then executes directives to produce the final HTML.
  * Directive attributes are preserved in output for client hydration.
  * Directives are processed in tree order (parents before children),
  * with priority used only for multiple directives on the same element.
@@ -206,149 +143,133 @@ export async function render(html, state, registry) {
     const window = new Window();
     const document = window.document;
     const index = [];
-    const indexedDirectives = new Map(); // Track indexed (element, directive) pairs
+    const indexed = new Set(); // Track which elements have been indexed
     const selector = getSelector(registry);
-    // Helper to add to index only if not already indexed for this (element, directive) pair
-    const addToIndex = (item) => {
-        const existing = indexedDirectives.get(item.el);
-        if (existing?.has(item.name)) {
-            return false; // Already indexed
-        }
-        if (!existing) {
-            indexedDirectives.set(item.el, new Set([item.name]));
-        }
-        else {
-            existing.add(item.name);
-        }
-        index.push(item);
-        return true;
-    };
-    const observer = new window.MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            for (const node of mutation.addedNodes) {
-                if (node.nodeType !== 1)
-                    continue;
-                const el = node;
-                const matches = el.matches(selector) ? [el] : [];
-                const descendants = [...el.querySelectorAll(selector)];
-                for (const match of [...matches, ...descendants]) {
-                    // Skip elements inside template content (used as placeholders)
-                    if (match.closest('template')) {
-                        continue;
+    /**
+     * Index all directive elements in a subtree.
+     * Called after innerHTML is set to discover new elements.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function indexTree(root) {
+        // Get all matching elements in the subtree
+        const elements = root.querySelectorAll(selector);
+        for (const match of elements) {
+            // Skip if already indexed
+            if (indexed.has(match))
+                continue;
+            indexed.add(match);
+            // Skip elements inside template content (used as placeholders)
+            if (match.closest('template')) {
+                continue;
+            }
+            // Handle native <slot> elements
+            if (match.tagName === 'SLOT') {
+                index.push({
+                    el: match,
+                    name: 'slot',
+                    directive: null,
+                    expr: '',
+                    priority: DirectivePriority.NORMAL,
+                    isNativeSlot: true
+                });
+                continue;
+            }
+            // Handle g-scope elements that don't have other directives
+            if (match.hasAttribute('g-scope')) {
+                let hasDirective = false;
+                for (const name of getDirectiveNames()) {
+                    if (match.hasAttribute(name)) {
+                        hasDirective = true;
+                        break;
+                    }
+                }
+                if (!hasDirective) {
+                    index.push({
+                        el: match,
+                        name: 'scope',
+                        directive: null,
+                        expr: '',
+                        priority: DirectivePriority.STRUCTURAL,
+                        isNativeSlot: false
+                    });
+                }
+            }
+            // Handle g-bind:* elements that don't have other directives
+            if (hasBindAttributes(match)) {
+                let hasDirective = false;
+                for (const name of getDirectiveNames()) {
+                    if (match.hasAttribute(name)) {
+                        hasDirective = true;
+                        break;
                     }
-                    // Handle native <slot> elements
-                    if (match.tagName === 'SLOT') {
-                        addToIndex({
+                }
+                if (!hasDirective && !match.hasAttribute('g-scope')) {
+                    index.push({
+                        el: match,
+                        name: 'bind',
+                        directive: null,
+                        expr: '',
+                        priority: DirectivePriority.NORMAL,
+                        isNativeSlot: false
+                    });
+                }
+            }
+            // Check all registered directives from global registry
+            const tagName = match.tagName.toLowerCase();
+            for (const name of getDirectiveNames()) {
+                const registration = getDirective(name);
+                if (!registration)
+                    continue;
+                const { fn, options } = registration;
+                // Check if this is a custom element directive (tag name matches)
+                if (tagName === name) {
+                    if (options.template || options.scope || options.provide || options.using) {
+                        index.push({
                             el: match,
-                            name: 'slot',
-                            directive: null,
+                            name,
+                            directive: fn,
                             expr: '',
-                            priority: DirectivePriority.NORMAL,
-                            isNativeSlot: true
+                            priority: fn?.priority ?? DirectivePriority.TEMPLATE,
+                            isCustomElement: true,
+                            using: options.using
                         });
-                        continue;
-                    }
-                    // Handle g-scope elements that don't have other directives
-                    // Add a placeholder entry so they get processed
-                    if (match.hasAttribute('g-scope')) {
-                        let hasDirective = false;
-                        for (const name of getDirectiveNames()) {
-                            if (match.hasAttribute(name)) {
-                                hasDirective = true;
-                                break;
-                            }
-                        }
-                        if (!hasDirective) {
-                            addToIndex({
-                                el: match,
-                                name: 'scope',
-                                directive: null,
-                                expr: '',
-                                priority: DirectivePriority.STRUCTURAL,
-                                isNativeSlot: false
-                            });
-                        }
-                    }
-                    // Handle g-bind:* elements that don't have other directives
-                    // Add a placeholder so they get processed for dynamic attribute binding
-                    if (hasBindAttributes(match)) {
-                        let hasDirective = false;
-                        for (const name of getDirectiveNames()) {
-                            if (match.hasAttribute(name)) {
-                                hasDirective = true;
-                                break;
-                            }
-                        }
-                        if (!hasDirective && !match.hasAttribute('g-scope')) {
-                            addToIndex({
-                                el: match,
-                                name: 'bind',
-                                directive: null,
-                                expr: '',
-                                priority: DirectivePriority.NORMAL,
-                                isNativeSlot: false
-                            });
-                        }
-                    }
-                    // Check all registered directives from global registry
-                    const tagName = match.tagName.toLowerCase();
-                    for (const name of getDirectiveNames()) {
-                        const registration = getDirective(name);
-                        if (!registration)
-                            continue;
-                        const { fn, options } = registration;
-                        // Check if this is a custom element directive (tag name matches)
-                        if (tagName === name) {
-                            if (options.template || options.scope || options.provide || options.using) {
-                                addToIndex({
-                                    el: match,
-                                    name,
-                                    directive: fn,
-                                    expr: '',
-                                    priority: fn?.priority ?? DirectivePriority.TEMPLATE,
-                                    isCustomElement: true,
-                                    using: options.using
-                                });
-                            }
-                        }
-                        // Check if this is an attribute directive
-                        const attr = match.getAttribute(name);
-                        if (attr !== null) {
-                            addToIndex({
-                                el: match,
-                                name,
-                                directive: fn,
-                                expr: decodeHTMLEntities(attr),
-                                priority: fn?.priority ?? DirectivePriority.NORMAL,
-                                using: options.using
-                            });
-                        }
-                    }
-                    // Also check local registry for backward compatibility
-                    // Local registry uses short names with g- prefix
-                    for (const [name, directive] of registry) {
-                        const attr = match.getAttribute(`g-${name}`);
-                        if (attr !== null) {
-                            // Skip if already added from global registry
-                            const fullName = `g-${name}`;
-                            if (getDirective(fullName))
-                                continue;
-                            addToIndex({
-                                el: match,
-                                name,
-                                directive,
-                                expr: decodeHTMLEntities(attr),
-                                priority: directive.priority ?? DirectivePriority.NORMAL
-                            });
-                        }
                     }
                 }
+                // Check if this is an attribute directive
+                const attr = match.getAttribute(name);
+                if (attr !== null) {
+                    index.push({
+                        el: match,
+                        name,
+                        directive: fn,
+                        expr: decodeHTMLEntities(attr),
+                        priority: fn?.priority ?? DirectivePriority.NORMAL,
+                        using: options.using
+                    });
+                }
+            }
+            // Also check local registry for backward compatibility
+            for (const [name, directive] of registry) {
+                const attr = match.getAttribute(`g-${name}`);
+                if (attr !== null) {
+                    // Skip if already added from global registry
+                    const fullName = `g-${name}`;
+                    if (getDirective(fullName))
+                        continue;
+                    index.push({
+                        el: match,
+                        name,
+                        directive,
+                        expr: decodeHTMLEntities(attr),
+                        priority: directive.priority ?? DirectivePriority.NORMAL
+                    });
+                }
             }
         }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
+    }
+    // Set HTML and index initial tree
     document.body.innerHTML = html;
-    await new Promise(r => setTimeout(r, 0));
+    indexTree(document.body);
     const ctx = createContext(Mode.SERVER, state);
     const processed = new Set();
     // Process directives in rounds until no new elements are added
@@ -399,30 +320,6 @@ export async function render(html, state, registry) {
             const directives = byElement.get(el);
             // Sort directives on this element by priority (higher first)
             directives.sort((a, b) => b.priority - a.priority);
-            // Process g-scope first (inline scope initialization)
-            const scopeAttr = el.getAttribute('g-scope');
-            if (scopeAttr) {
-                const scopeValues = ctx.eval(decodeHTMLEntities(scopeAttr));
-                if (scopeValues && typeof scopeValues === 'object') {
-                    Object.assign(state, scopeValues);
-                }
-            }
-            // Process g-bind:* attributes (dynamic attribute binding)
-            // Use the nearest ancestor scope for evaluation
-            const bindScope = findServerScope(el, state);
-            const bindCtx = createContext(Mode.SERVER, bindScope);
-            for (const attr of [...el.attributes]) {
-                if (attr.name.startsWith('g-bind:')) {
-                    const targetAttr = attr.name.slice('g-bind:'.length);
-                    const value = bindCtx.eval(decodeHTMLEntities(attr.value));
-                    if (value === null || value === undefined) {
-                        el.removeAttribute(targetAttr);
-                    }
-                    else {
-                        el.setAttribute(targetAttr, String(value));
-                    }
-                }
-            }
             // Collect unique directive names for conflict detection
             const directiveNameSet = new Set();
             for (const item of directives) {
@@ -432,6 +329,7 @@ export async function render(html, state, registry) {
             }
             const directiveNames = [...directiveNameSet];
             // Check if any directive needs scope - create once if so
+            // Must happen BEFORE g-scope and g-bind so assigns are available
             let elementScope = null;
             for (const name of directiveNames) {
                 if (directiveNeedsScope(name)) {
@@ -442,6 +340,19 @@ export async function render(html, state, registry) {
                     break;
                 }
             }
+            // Use element scope if created, otherwise find nearest ancestor
+            const scopeState = elementScope ?? findServerScope(el, state);
+            const scopeCtx = createContext(Mode.SERVER, scopeState);
+            // Process g-scope (inline scope initialization)
+            const scopeAttr = el.getAttribute('g-scope');
+            if (scopeAttr) {
+                const scopeValues = scopeCtx.eval(decodeHTMLEntities(scopeAttr));
+                if (scopeValues && typeof scopeValues === 'object') {
+                    Object.assign(scopeState, scopeValues);
+                }
+            }
+            // Process g-bind:* attributes (dynamic attribute binding)
+            processBindAttributesOnce(el, scopeCtx, true);
             for (const item of directives) {
                 // Check if element was disconnected by a previous directive (e.g., g-for replacing it)
                 if (!item.el.isConnected) {
@@ -466,7 +377,7 @@ export async function render(html, state, registry) {
                     }
                     // Call directive function if present (initializes state)
                     if (fn) {
-                        const config = createServerResolverConfig(item.el, scopeState, state);
+                        const config = createServerResolverConfig(item.el, scopeState, state, services);
                         const args = resolveInjectables(fn, item.expr, item.el, ctx.eval.bind(ctx), config, options.using);
                         await fn(...args);
                         // Register as context provider if directive declares $context
@@ -477,15 +388,17 @@ export async function render(html, state, registry) {
                     // Render template if present
                     if (options.template) {
                         const attrs = getTemplateAttrs(item.el);
-                        let html;
+                        let templateHtml;
                         if (typeof options.template === 'string') {
-                            html = options.template;
+                            templateHtml = options.template;
                         }
                         else {
                             const result = options.template(attrs, item.el);
-                            html = result instanceof Promise ? await result : result;
+                            templateHtml = result instanceof Promise ? await result : result;
                         }
-                        item.el.innerHTML = html;
+                        item.el.innerHTML = templateHtml;
+                        // Index new elements from the template
+                        indexTree(item.el);
                     }
                 }
                 else if (item.directive === null) {
@@ -502,7 +415,7 @@ export async function render(html, state, registry) {
                     if (options.provide) {
                         registerDIProviders(item.el, options.provide);
                     }
-                    const config = createServerResolverConfig(item.el, scopeState, state);
+                    const config = createServerResolverConfig(item.el, scopeState, state, services);
                     const args = resolveInjectables(item.directive, item.expr, item.el, ctx.eval.bind(ctx), config, item.using);
                     await item.directive(...args);
                     // Register as context provider if directive declares $context
@@ -511,10 +424,9 @@ export async function render(html, state, registry) {
                     }
                 }
             }
-            // Let observer catch new elements
-            await new Promise(r => setTimeout(r, 0));
         }
+        // Re-index tree to catch elements added by directives (e.g., g-template)
+        indexTree(document.body);
     }
-    observer.disconnect();
     return document.body.innerHTML;
 }

package/dist/template-utils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared template utilities for client and server.
+ *
+ * @packageDocumentation
+ */
+import { TemplateAttrs } from './types.js';
+/**
+ * Extract template attributes from an element.
+ *
+ * @param el - The element to extract attributes from
+ * @returns An object with all attributes and children innerHTML
+ */
+export declare function getTemplateAttrs(el: Element): TemplateAttrs;
+/**
+ * Check if element has any g-bind:* attributes.
+ *
+ * @param el - The element to check
+ * @returns True if element has g-bind attributes
+ */
+export declare function hasBindAttributes(el: Element): boolean;
+/**
+ * Decode HTML entities that happy-dom doesn't decode.
+ * Only needed for server-side rendering.
+ *
+ * @param str - The string with HTML entities
+ * @returns The decoded string
+ */
+export declare function decodeHTMLEntities(str: string): string;

package/dist/template-utils.js

@@ -0,0 +1,50 @@
+/**
+ * Shared template utilities for client and server.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Extract template attributes from an element.
+ *
+ * @param el - The element to extract attributes from
+ * @returns An object with all attributes and children innerHTML
+ */
+export function getTemplateAttrs(el) {
+    const attrs = {
+        children: el.innerHTML
+    };
+    for (const attr of el.attributes) {
+        attrs[attr.name] = attr.value;
+    }
+    return attrs;
+}
+/**
+ * Check if element has any g-bind:* attributes.
+ *
+ * @param el - The element to check
+ * @returns True if element has g-bind attributes
+ */
+export function hasBindAttributes(el) {
+    for (const attr of el.attributes) {
+        if (attr.name.startsWith('g-bind:')) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Decode HTML entities that happy-dom doesn't decode.
+ * Only needed for server-side rendering.
+ *
+ * @param str - The string with HTML entities
+ * @returns The decoded string
+ */
+export function decodeHTMLEntities(str) {
+    return str
+        .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
+        .replace(/"/g, '"')
+        .replace(/'/g, "'")
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gonia",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "A lightweight, SSR-first reactive UI library with declarative directives",
   "type": "module",
   "license": "MIT",