gonia 0.3.1 → 0.3.3

package/dist/client/hydrate.js

@@ -228,11 +228,15 @@ function processElement(el, registry) {
     // Check if any directive needs a scope
     let scope = findParentScope(el, true) ?? {};
     let directiveCreatedScope = false;
-    // Collect full directive names for conflict detection
-    const directiveFullNames = [];
+    // Collect unique directive names for conflict detection
+    const directiveNameSet = new Set();
     for (const { name } of directives) {
         const fullName = `g-${name}`;
-        directiveFullNames.push(fullName);
+        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
@@ -246,7 +250,7 @@ function processElement(el, registry) {
     }
     // Apply assigns with conflict detection
     if (directiveCreatedScope) {
-        applyAssigns(scope, directiveFullNames);
+        applyAssigns(scope, [...directiveNameSet]);
     }
     const ctx = createContext(Mode.CLIENT, scope);
     contextCache.set(el, ctx);
@@ -433,16 +437,16 @@ async function processDirectiveElements() {
             if (options.scope) {
                 const parentScope = findParentScope(el);
                 scope = createElementScope(el, parentScope);
-                // Collect all directive names on this element for conflict detection
-                const directiveNames = [name];
+                // 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) {
-                        directiveNames.push(attr.name);
+                        directiveNameSet.add(attr.name);
                     }
                 }
                 // Apply assigns with conflict detection
-                applyAssigns(scope, directiveNames);
+                applyAssigns(scope, [...directiveNameSet]);
             }
             else {
                 scope = findParentScope(el, true) ?? {};

package/dist/server/render.js

@@ -66,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(',');
 }
 /**
@@ -190,15 +206,41 @@ 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) => {
+        // Collect all direct addedNodes first to avoid processing them as descendants
+        const directNodes = new Set();
+        for (const mutation of mutations) {
+            for (const node of mutation.addedNodes) {
+                if (node.nodeType === 1) {
+                    directNodes.add(node);
+                }
+            }
+        }
         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)];
+                // Filter out descendants that will be processed as direct addedNodes
+                const descendants = [...el.querySelectorAll(selector)].filter(desc => !directNodes.has(desc));
                 for (const match of [...matches, ...descendants]) {
                     // Skip elements inside template content (used as placeholders)
                     if (match.closest('template')) {
@@ -206,7 +248,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,
@@ -227,7 +269,7 @@ export async function render(html, state, registry) {
                             }
                         }
                         if (!hasDirective) {
-                            index.push({
+                            addToIndex({
                                 el: match,
                                 name: 'scope',
                                 directive: null,
@@ -237,6 +279,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()) {
@@ -247,7 +310,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,
@@ -261,7 +324,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,
@@ -280,7 +343,7 @@ export async function render(html, state, registry) {
                             const fullName = `g-${name}`;
                             if (getDirective(fullName))
                                 continue;
-                            index.push({
+                            addToIndex({
                                 el: match,
                                 name,
                                 directive,
@@ -370,13 +433,14 @@ export async function render(html, state, registry) {
                     }
                 }
             }
-            // Collect all directive names for conflict detection
-            const directiveNames = [];
+            // Collect unique directive names for conflict detection
+            const directiveNameSet = new Set();
             for (const item of directives) {
                 if (!item.isNativeSlot && item.directive !== null) {
-                    directiveNames.push(item.name);
+                    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) {

package/package.json

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