gonia 0.3.0 → 0.3.2

package/dist/client/hydrate.js

@@ -12,6 +12,7 @@ import { findParentScope, createElementScope, getElementScope } from '../scope.j
 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';
 // Built-in directives
 import { text } from '../directives/text.js';
 import { show } from '../directives/show.js';
@@ -56,15 +57,22 @@ function getDefaultRegistry() {
 function getSelector(registry) {
     if (!cachedSelector) {
         const directiveSelectors = [];
+        // Include directives from passed registry
         for (const name of registry.keys()) {
             directiveSelectors.push(`[g-${name}]`);
         }
+        // Include directives from global registry
+        for (const name of getDirectiveNames()) {
+            directiveSelectors.push(`[${name}]`);
+        }
         // Also match native <slot> elements
         directiveSelectors.push('slot');
         // Match template placeholders from SSR (g-if with false condition)
         directiveSelectors.push('template[data-g-if]');
         // Match g-scope for inline scope initialization
         directiveSelectors.push('[g-scope]');
+        // Match g-bind:* for attribute bindings
+        directiveSelectors.push('[g-bind\\:class]');
         cachedSelector = directiveSelectors.join(',');
     }
     return cachedSelector;
@@ -76,10 +84,10 @@ function getSelector(registry) {
  */
 function getDirectivesForElement(el, registry) {
     const directives = [];
+    // Check local registry (built-in directives with g- prefix)
     for (const [name, directive] of registry) {
         const attr = el.getAttribute(`g-${name}`);
         if (attr !== null) {
-            // Look up options from the global directive registry
             const registration = getDirective(`g-${name}`);
             directives.push({
                 name,
@@ -89,6 +97,24 @@ function getDirectivesForElement(el, registry) {
             });
         }
     }
+    // Check global registry (custom directives)
+    for (const name of getDirectiveNames()) {
+        // Skip if already matched via local registry
+        if (directives.some(d => `g-${d.name}` === name))
+            continue;
+        const attr = el.getAttribute(name);
+        if (attr !== null) {
+            const registration = getDirective(name);
+            if (registration?.fn) {
+                directives.push({
+                    name: name.replace(/^g-/, ''),
+                    directive: registration.fn,
+                    expr: attr,
+                    using: registration.options.using
+                });
+            }
+        }
+    }
     // Sort by priority (higher first)
     directives.sort((a, b) => {
         const priorityA = a.directive.priority ?? DirectivePriority.NORMAL;
@@ -199,8 +225,35 @@ function processElement(el, registry) {
     // Skip if nothing to process
     if (directives.length === 0 && !hasScopeAttr && !hasBindAttrs)
         return;
-    const ctx = getContextForElement(el);
-    const scope = findParentScope(el, true) ?? {};
+    // Check if any directive needs a scope
+    let scope = findParentScope(el, true) ?? {};
+    let directiveCreatedScope = false;
+    // Collect unique directive names for conflict detection
+    const directiveNameSet = new Set();
+    for (const { name } of directives) {
+        const fullName = `g-${name}`;
+        const isNew = !directiveNameSet.has(fullName);
+        directiveNameSet.add(fullName);
+        // Only process first occurrence
+        if (!isNew)
+            continue;
+        const registration = getDirective(fullName);
+        if (!directiveCreatedScope && directiveNeedsScope(fullName)) {
+            // Create a new scope that inherits from parent
+            scope = createElementScope(el, scope);
+            directiveCreatedScope = true;
+        }
+        // Register DI providers if present
+        if (registration?.options.provide) {
+            registerDIProviders(el, registration.options.provide);
+        }
+    }
+    // Apply assigns with conflict detection
+    if (directiveCreatedScope) {
+        applyAssigns(scope, [...directiveNameSet]);
+    }
+    const ctx = createContext(Mode.CLIENT, scope);
+    contextCache.set(el, ctx);
     // Process g-scope first (inline scope initialization)
     if (hasScopeAttr) {
         const scopeAttr = el.getAttribute('g-scope');
@@ -384,10 +437,16 @@ async function processDirectiveElements() {
             if (options.scope) {
                 const parentScope = findParentScope(el);
                 scope = createElementScope(el, parentScope);
-                // Apply assigned values to scope
-                if (options.assign) {
-                    Object.assign(scope, options.assign);
+                // 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) ?? {};

package/dist/directive-utils.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Shared utilities for directive processing (client and server).
+ *
+ * @packageDocumentation
+ */
+/**
+ * Information about an assign conflict.
+ */
+export interface AssignConflict {
+    key: string;
+    directives: string[];
+    priorities: number[];
+}
+/**
+ * Result of resolving assigns from multiple directives.
+ */
+export interface ResolvedAssigns {
+    /** The merged assign values (higher priority wins) */
+    values: Record<string, unknown>;
+    /** Warnings for different-priority conflicts */
+    warnings: string[];
+}
+/**
+ * Resolve assign values from multiple directives on the same element.
+ *
+ * @param directiveNames - Names of directives on the element
+ * @throws Error if same-priority directives conflict on an assign key
+ * @returns Resolved assigns and any warnings
+ */
+export declare function resolveAssigns(directiveNames: string[]): ResolvedAssigns;
+/**
+ * Apply resolved assigns to a scope, logging any warnings.
+ *
+ * @param scope - The scope to apply assigns to
+ * @param directiveNames - Names of directives on the element
+ * @returns The scope with assigns applied
+ */
+export declare function applyAssigns(scope: Record<string, unknown>, directiveNames: string[]): Record<string, unknown>;
+/**
+ * Check if a directive should create/use a scope based on its options.
+ */
+export declare function directiveNeedsScope(name: string): boolean;
+/**
+ * Get directive options with defaults.
+ */
+export declare function getDirectiveOptions(name: string): import("./types.js").DirectiveOptions;
+/**
+ * Get directive priority.
+ */
+export declare function getDirectivePriority(name: string): number;

package/dist/directive-utils.js

@@ -0,0 +1,101 @@
+/**
+ * Shared utilities for directive processing (client and server).
+ *
+ * @packageDocumentation
+ */
+import { getDirective, DirectivePriority } from './types.js';
+/**
+ * Resolve assign values from multiple directives on the same element.
+ *
+ * @param directiveNames - Names of directives on the element
+ * @throws Error if same-priority directives conflict on an assign key
+ * @returns Resolved assigns and any warnings
+ */
+export function resolveAssigns(directiveNames) {
+    const assignsByKey = new Map();
+    // Collect all assigns grouped by key
+    for (const name of directiveNames) {
+        const registration = getDirective(name);
+        if (!registration?.options.assign)
+            continue;
+        const priority = registration.fn?.priority ?? DirectivePriority.NORMAL;
+        for (const [key, value] of Object.entries(registration.options.assign)) {
+            if (!assignsByKey.has(key)) {
+                assignsByKey.set(key, []);
+            }
+            assignsByKey.get(key).push({ directive: name, priority, value });
+        }
+    }
+    const values = {};
+    const warnings = [];
+    // Check for conflicts and resolve
+    for (const [key, sources] of assignsByKey) {
+        if (sources.length === 1) {
+            values[key] = sources[0].value;
+            continue;
+        }
+        // Group by priority
+        const byPriority = new Map();
+        for (const source of sources) {
+            if (!byPriority.has(source.priority)) {
+                byPriority.set(source.priority, []);
+            }
+            byPriority.get(source.priority).push(source);
+        }
+        // Check for same-priority conflicts
+        for (const [priority, group] of byPriority) {
+            if (group.length > 1) {
+                const names = group.map(s => s.directive).join(', ');
+                throw new Error(`Conflicting assign key "${key}" at same priority (${priority}) between directives: ${names}`);
+            }
+        }
+        // Different priorities - highest wins, emit warning
+        const sorted = sources.sort((a, b) => b.priority - a.priority);
+        const winner = sorted[0];
+        const losers = sorted.slice(1);
+        values[key] = winner.value;
+        for (const loser of losers) {
+            warnings.push(`Directive "${winner.directive}" (priority ${winner.priority}) overrides assign key "${key}" from "${loser.directive}" (priority ${loser.priority})`);
+        }
+    }
+    return { values, warnings };
+}
+/**
+ * Apply resolved assigns to a scope, logging any warnings.
+ *
+ * @param scope - The scope to apply assigns to
+ * @param directiveNames - Names of directives on the element
+ * @returns The scope with assigns applied
+ */
+export function applyAssigns(scope, directiveNames) {
+    const { values, warnings } = resolveAssigns(directiveNames);
+    for (const warning of warnings) {
+        console.warn(`[gonia] ${warning}`);
+    }
+    Object.assign(scope, values);
+    return scope;
+}
+/**
+ * Check if a directive should create/use a scope based on its options.
+ */
+export function directiveNeedsScope(name) {
+    const registration = getDirective(name);
+    if (!registration)
+        return false;
+    const { options, fn } = registration;
+    return !!(options.scope || options.assign || fn?.$context?.length);
+}
+/**
+ * Get directive options with defaults.
+ */
+export function getDirectiveOptions(name) {
+    const registration = getDirective(name);
+    return registration?.options ?? {};
+}
+/**
+ * Get directive priority.
+ */
+export function getDirectivePriority(name) {
+    const registration = getDirective(name);
+    return registration?.fn?.priority ?? DirectivePriority.NORMAL;
+}

package/dist/server/render.js

@@ -14,6 +14,7 @@ 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.
  *
@@ -65,6 +66,22 @@ function getSelector(localRegistry) {
     selectors.push('slot');
     // Match g-scope for inline scope initialization (TODO: make prefix configurable)
     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: Can't do wildcard for data-* attributes in CSS, but hasBindAttributes handles them
     return selectors.join(',');
 }
 /**
@@ -189,7 +206,23 @@ 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 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) {
@@ -205,7 +238,7 @@ export async function render(html, state, registry) {
                     }
                     // Handle native <slot> elements
                     if (match.tagName === 'SLOT') {
-                        index.push({
+                        addToIndex({
                             el: match,
                             name: 'slot',
                             directive: null,
@@ -226,7 +259,7 @@ export async function render(html, state, registry) {
                             }
                         }
                         if (!hasDirective) {
-                            index.push({
+                            addToIndex({
                                 el: match,
                                 name: 'scope',
                                 directive: null,
@@ -236,6 +269,27 @@ export async function render(html, state, registry) {
                             });
                         }
                     }
+                    // 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()) {
@@ -246,7 +300,7 @@ export async function render(html, state, registry) {
                         // 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({
+                                addToIndex({
                                     el: match,
                                     name,
                                     directive: fn,
@@ -260,7 +314,7 @@ export async function render(html, state, registry) {
                         // Check if this is an attribute directive
                         const attr = match.getAttribute(name);
                         if (attr !== null) {
-                            index.push({
+                            addToIndex({
                                 el: match,
                                 name,
                                 directive: fn,
@@ -279,7 +333,7 @@ export async function render(html, state, registry) {
                             const fullName = `g-${name}`;
                             if (getDirective(fullName))
                                 continue;
-                            index.push({
+                            addToIndex({
                                 el: match,
                                 name,
                                 directive,
@@ -354,10 +408,13 @@ export async function render(html, state, registry) {
                 }
             }
             // 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 = ctx.eval(decodeHTMLEntities(attr.value));
+                    const value = bindCtx.eval(decodeHTMLEntities(attr.value));
                     if (value === null || value === undefined) {
                         el.removeAttribute(targetAttr);
                     }
@@ -366,6 +423,25 @@ export async function render(html, state, registry) {
                     }
                 }
             }
+            // Collect unique directive names for conflict detection
+            const directiveNameSet = new Set();
+            for (const item of directives) {
+                if (!item.isNativeSlot && item.directive !== null) {
+                    directiveNameSet.add(item.name);
+                }
+            }
+            const directiveNames = [...directiveNameSet];
+            // Check if any directive needs scope - create once if so
+            let elementScope = null;
+            for (const name of directiveNames) {
+                if (directiveNeedsScope(name)) {
+                    const parentScope = findServerScope(el, state);
+                    elementScope = createElementScope(el, parentScope);
+                    // Apply all assigns with conflict detection
+                    applyAssigns(elementScope, directiveNames);
+                    break;
+                }
+            }
             for (const item of directives) {
                 // Check if element was disconnected by a previous directive (e.g., g-for replacing it)
                 if (!item.el.isConnected) {
@@ -382,24 +458,13 @@ export async function render(html, state, registry) {
                     if (!registration)
                         continue;
                     const { fn, options } = registration;
-                    // 1. Create scope if needed
-                    let scopeState;
-                    if (options.scope) {
-                        const parentScope = findServerScope(item.el, state);
-                        scopeState = createElementScope(item.el, parentScope);
-                        // Apply assigned values to scope
-                        if (options.assign) {
-                            Object.assign(scopeState, options.assign);
-                        }
-                    }
-                    else {
-                        scopeState = findServerScope(item.el, state);
-                    }
-                    // 2. Register DI providers if present
+                    // Use pre-created scope or find existing
+                    const scopeState = elementScope ?? findServerScope(item.el, state);
+                    // Register DI providers if present
                     if (options.provide) {
                         registerDIProviders(item.el, options.provide);
                     }
-                    // 3. Call directive function if present (initializes state)
+                    // Call directive function if present (initializes state)
                     if (fn) {
                         const config = createServerResolverConfig(item.el, scopeState, state);
                         const args = resolveInjectables(fn, item.expr, item.el, ctx.eval.bind(ctx), config, options.using);
@@ -409,7 +474,7 @@ export async function render(html, state, registry) {
                             registerProvider(item.el, fn, scopeState);
                         }
                     }
-                    // 4. Render template if present
+                    // Render template if present
                     if (options.template) {
                         const attrs = getTemplateAttrs(item.el);
                         let html;
@@ -428,17 +493,14 @@ export async function render(html, state, registry) {
                     continue;
                 }
                 else {
-                    // Attribute directive
-                    // Determine scope for this directive
-                    let scopeState;
-                    if (item.directive.$context?.length) {
-                        // Directives with $context get their own scope to populate
-                        const parentScope = findServerScope(item.el, state);
-                        scopeState = createElementScope(item.el, parentScope);
-                    }
-                    else {
-                        // Other directives use nearest ancestor scope or root
-                        scopeState = findServerScope(item.el, state);
+                    // Attribute directive - use pre-created scope or find existing
+                    const scopeState = elementScope ?? findServerScope(item.el, state);
+                    // Get registration options
+                    const registration = getDirective(item.name);
+                    const options = registration?.options ?? {};
+                    // Register DI providers if present
+                    if (options.provide) {
+                        registerDIProviders(item.el, options.provide);
                     }
                     const config = createServerResolverConfig(item.el, scopeState, state);
                     const args = resolveInjectables(item.directive, item.expr, item.el, ctx.eval.bind(ctx), config, item.using);

package/package.json

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