gonia 0.2.6 → 0.3.1

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,31 @@ 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 full directive names for conflict detection
+    const directiveFullNames = [];
+    for (const { name } of directives) {
+        const fullName = `g-${name}`;
+        directiveFullNames.push(fullName);
+        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, directiveFullNames);
+    }
+    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 +433,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 all directive names on this element for conflict detection
+                const directiveNames = [name];
+                for (const attr of el.attributes) {
+                    const attrReg = getDirective(attr.name);
+                    if (attrReg) {
+                        directiveNames.push(attr.name);
+                    }
                 }
+                // Apply assigns with conflict detection
+                applyAssigns(scope, directiveNames);
             }
             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.d.ts

@@ -15,12 +15,11 @@ export type ServiceRegistry = Map<string, unknown>;
 /**
  * Register a directive in the registry.
  *
- * @remarks
- * Invalidates the cached selector so it will be rebuilt on next render.
- *
  * @param registry - The directive registry
- * @param name - Directive name (without g- prefix)
+ * @param name - Directive name
  * @param fn - The directive function
+ *
+ * @deprecated Use `directive()` from 'gonia' instead to register directives globally.
  */
 export declare function registerDirective(registry: DirectiveRegistry, name: string, fn: Directive): void;
 /**

package/dist/server/render.js

@@ -4,16 +4,17 @@
  * @packageDocumentation
  */
 import { Window } from 'happy-dom';
-import { Mode, DirectivePriority, getDirective } from '../types.js';
+import { Mode, DirectivePriority, getDirective, getDirectiveNames } from '../types.js';
 import { createContext } from '../context.js';
 import { processNativeSlot } from '../directives/slot.js';
-import { registerProvider, resolveFromProviders, resolveFromDIProviders } from '../providers.js';
+import { registerProvider, resolveFromProviders, registerDIProviders, resolveFromDIProviders } 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.
  *
@@ -30,24 +31,56 @@ function decodeHTMLEntities(str) {
 }
 /** Registered services */
 let services = new Map();
-const selectorCache = new WeakMap();
 /**
  * Build a CSS selector for all registered directives.
+ * Uses the global directive registry to support any prefix (g-, l-, v-, etc.).
+ * Also includes local registry entries with g- prefix for backward compatibility.
  *
  * @internal
  */
-function getSelector(registry) {
-    let selector = selectorCache.get(registry);
-    if (!selector) {
-        const directiveSelectors = [...registry.keys()].map(n => `[g-${n}]`);
-        // Also match native <slot> elements
-        directiveSelectors.push('slot');
-        // Match g-scope for inline scope initialization
-        directiveSelectors.push('[g-scope]');
-        selector = directiveSelectors.join(',');
-        selectorCache.set(registry, selector);
+function getSelector(localRegistry) {
+    const selectors = [];
+    for (const name of getDirectiveNames()) {
+        const registration = getDirective(name);
+        if (!registration)
+            continue;
+        const { options } = registration;
+        // Custom element directives - match by tag name
+        if (options.template || options.scope || options.provide || options.using) {
+            selectors.push(name);
+        }
+        // All directives can be used as attributes
+        selectors.push(`[${name}]`);
+    }
+    // Add local registry entries with g- prefix (backward compatibility)
+    if (localRegistry) {
+        for (const name of localRegistry.keys()) {
+            const fullName = `g-${name}`;
+            // Skip if already in global registry
+            if (!getDirective(fullName)) {
+                selectors.push(`[${fullName}]`);
+            }
+        }
     }
-    return selector;
+    // Also match native <slot> elements
+    selectors.push('slot');
+    // Match g-scope for inline scope initialization (TODO: make prefix configurable)
+    selectors.push('[g-scope]');
+    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.
@@ -65,16 +98,14 @@ function hasBindAttributes(el) {
 /**
  * Register a directive in the registry.
  *
- * @remarks
- * Invalidates the cached selector so it will be rebuilt on next render.
- *
  * @param registry - The directive registry
- * @param name - Directive name (without g- prefix)
+ * @param name - Directive name
  * @param fn - The directive function
+ *
+ * @deprecated Use `directive()` from 'gonia' instead to register directives globally.
  */
 export function registerDirective(registry, name, fn) {
     registry.set(name, fn);
-    selectorCache.delete(registry);
 }
 /**
  * Register a service for dependency injection.
@@ -189,8 +220,8 @@ export async function render(html, state, registry) {
                     // Add a placeholder entry so they get processed
                     if (match.hasAttribute('g-scope')) {
                         let hasDirective = false;
-                        for (const [name] of registry) {
-                            if (match.hasAttribute(`g-${name}`)) {
+                        for (const name of getDirectiveNames()) {
+                            if (match.hasAttribute(name)) {
                                 hasDirective = true;
                                 break;
                             }
@@ -206,18 +237,55 @@ export async function render(html, state, registry) {
                             });
                         }
                     }
+                    // 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,
+                                    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) {
+                            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
+                    // Local registry uses short names with g- prefix
                     for (const [name, directive] of registry) {
                         const attr = match.getAttribute(`g-${name}`);
                         if (attr !== null) {
-                            // Look up options from the global directive registry
-                            const registration = getDirective(`g-${name}`);
+                            // 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,
-                                using: registration?.options.using
+                                priority: directive.priority ?? DirectivePriority.NORMAL
                             });
                         }
                     }
@@ -287,10 +355,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);
                     }
@@ -299,6 +370,24 @@ export async function render(html, state, registry) {
                     }
                 }
             }
+            // Collect all directive names for conflict detection
+            const directiveNames = [];
+            for (const item of directives) {
+                if (!item.isNativeSlot && item.directive !== null) {
+                    directiveNames.push(item.name);
+                }
+            }
+            // 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) {
@@ -307,21 +396,57 @@ export async function render(html, state, registry) {
                 if (item.isNativeSlot) {
                     processNativeSlot(item.el);
                 }
+                else if (item.isCustomElement) {
+                    // Custom element directive - must check before directive === null
+                    // because custom elements can have fn: null (template-only)
+                    // Custom element directive - process template, scope, etc.
+                    const registration = getDirective(item.name);
+                    if (!registration)
+                        continue;
+                    const { fn, options } = registration;
+                    // 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);
+                    }
+                    // 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);
+                        await fn(...args);
+                        // Register as context provider if directive declares $context
+                        if (fn.$context?.length) {
+                            registerProvider(item.el, fn, scopeState);
+                        }
+                    }
+                    // Render template if present
+                    if (options.template) {
+                        const attrs = getTemplateAttrs(item.el);
+                        let html;
+                        if (typeof options.template === 'string') {
+                            html = options.template;
+                        }
+                        else {
+                            const result = options.template(attrs, item.el);
+                            html = result instanceof Promise ? await result : result;
+                        }
+                        item.el.innerHTML = html;
+                    }
+                }
                 else if (item.directive === null) {
                     // Placeholder for g-scope - already processed above
                     continue;
                 }
                 else {
-                    // 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/dist/ts-plugin/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * TypeScript Language Service Plugin for Gonia.
+ *
+ * Provides type inference and validation for directive templates.
+ * Analyzes g-model, g-text, etc. in templates and infers $scope types.
+ *
+ * @packageDocumentation
+ */
+import type tslib from 'typescript/lib/tsserverlibrary';
+declare function init(modules: {
+    typescript: typeof tslib;
+}): {
+    create: (info: tslib.server.PluginCreateInfo) => tslib.LanguageService;
+};
+export = init;

package/dist/ts-plugin/index.js

@@ -0,0 +1,518 @@
+"use strict";
+/**
+ * TypeScript Language Service Plugin for Gonia.
+ *
+ * Provides type inference and validation for directive templates.
+ * Analyzes g-model, g-text, etc. in templates and infers $scope types.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Infer types from HTML template based on element context.
+ */
+function inferTypesFromTemplate(template) {
+    const types = [];
+    // Match g-model on various input types
+    const inputModelRegex = /<input[^>]*type=["'](\w+)["'][^>]*g-model=["']([^"']+)["'][^>]*>/gi;
+    const inputModelRegex2 = /<input[^>]*g-model=["']([^"']+)["'][^>]*type=["'](\w+)["'][^>]*>/gi;
+    const genericModelRegex = /<input[^>]*g-model=["']([^"']+)["'][^>]*>/gi;
+    const textareaModelRegex = /<textarea[^>]*g-model=["']([^"']+)["'][^>]*>/gi;
+    const selectModelRegex = /<select[^>]*g-model=["']([^"']+)["'][^>]*>/gi;
+    let match;
+    // input with type before g-model
+    while ((match = inputModelRegex.exec(template)) !== null) {
+        const inputType = match[1].toLowerCase();
+        const property = match[2];
+        types.push({
+            property,
+            type: inferTypeFromInputType(inputType),
+            source: `<input type="${inputType}"> g-model`
+        });
+    }
+    // input with g-model before type
+    while ((match = inputModelRegex2.exec(template)) !== null) {
+        const property = match[1];
+        const inputType = match[2].toLowerCase();
+        types.push({
+            property,
+            type: inferTypeFromInputType(inputType),
+            source: `<input type="${inputType}"> g-model`
+        });
+    }
+    // input without explicit type (defaults to text)
+    while ((match = genericModelRegex.exec(template)) !== null) {
+        const property = match[1];
+        // Skip if already captured by type-specific regex
+        if (!types.some(t => t.property === property)) {
+            types.push({
+                property,
+                type: 'string',
+                source: '<input> g-model (default text)'
+            });
+        }
+    }
+    // textarea
+    while ((match = textareaModelRegex.exec(template)) !== null) {
+        types.push({
+            property: match[1],
+            type: 'string',
+            source: '<textarea> g-model'
+        });
+    }
+    // select
+    while ((match = selectModelRegex.exec(template)) !== null) {
+        types.push({
+            property: match[1],
+            type: 'string',
+            source: '<select> g-model'
+        });
+    }
+    // g-scope attributes - extract using balanced brace matching
+    const gScopeValues = extractGScopeValues(template);
+    for (const scopeValue of gScopeValues) {
+        const scopeTypes = parseGScopeTypes(scopeValue);
+        for (const scopeType of scopeTypes) {
+            // Don't override g-model inferences (they're more specific)
+            if (!types.some(t => t.property === scopeType.property)) {
+                types.push(scopeType);
+            }
+        }
+    }
+    return types;
+}
+function inferTypeFromInputType(inputType) {
+    switch (inputType) {
+        case 'checkbox':
+        case 'radio':
+            return 'boolean';
+        case 'number':
+        case 'range':
+            return 'number';
+        default:
+            return 'string';
+    }
+}
+/**
+ * Extract g-scope attribute values from template, handling nested quotes and braces.
+ */
+function extractGScopeValues(template) {
+    const results = [];
+    // Find g-scope=" or g-scope='
+    let i = 0;
+    while (i < template.length) {
+        const gScopeMatch = template.slice(i).match(/g-scope=(["'])/);
+        if (!gScopeMatch)
+            break;
+        const quoteChar = gScopeMatch[1];
+        const startPos = i + gScopeMatch.index + gScopeMatch[0].length;
+        // Now extract until the matching closing quote, respecting nested braces and quotes
+        let depth = 0;
+        let inString = null;
+        let j = startPos;
+        let content = '';
+        while (j < template.length) {
+            const char = template[j];
+            if (inString) {
+                content += char;
+                if (char === inString && template[j - 1] !== '\\') {
+                    inString = null;
+                }
+            }
+            else if (char === quoteChar && depth === 0) {
+                // End of attribute value
+                break;
+            }
+            else if (char === '"' || char === "'" || char === '`') {
+                inString = char;
+                content += char;
+            }
+            else if (char === '{') {
+                depth++;
+                content += char;
+            }
+            else if (char === '}') {
+                depth--;
+                content += char;
+            }
+            else {
+                content += char;
+            }
+            j++;
+        }
+        if (content.trim()) {
+            results.push(content.trim());
+        }
+        i = j + 1;
+    }
+    return results;
+}
+/**
+ * Infer type from a JavaScript literal value.
+ */
+function inferTypeFromLiteral(value) {
+    const trimmed = value.trim();
+    // Boolean literals
+    if (trimmed === 'true' || trimmed === 'false') {
+        return 'boolean';
+    }
+    // Null literal
+    if (trimmed === 'null') {
+        return 'null';
+    }
+    // Number literals (including negative, decimal, scientific notation)
+    if (/^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(trimmed)) {
+        return 'number';
+    }
+    // String literals (single or double quoted)
+    if (/^['"].*['"]$/.test(trimmed)) {
+        return 'string';
+    }
+    // Template literals
+    if (/^`.*`$/.test(trimmed)) {
+        return 'string';
+    }
+    // Array literals
+    if (trimmed.startsWith('[')) {
+        return 'array';
+    }
+    // Object literals
+    if (trimmed.startsWith('{')) {
+        return 'object';
+    }
+    return 'unknown';
+}
+/**
+ * Parse g-scope attribute to extract property types.
+ * Handles: g-scope="{ count: 0, name: 'Alice', enabled: true }"
+ */
+function parseGScopeTypes(scopeExpr) {
+    const types = [];
+    // Remove outer braces if present
+    let expr = scopeExpr.trim();
+    if (expr.startsWith('{') && expr.endsWith('}')) {
+        expr = expr.slice(1, -1).trim();
+    }
+    if (!expr)
+        return types;
+    // Parse property: value pairs, respecting nesting
+    let depth = 0;
+    let current = '';
+    const pairs = [];
+    for (const char of expr) {
+        if (char === '{' || char === '[' || char === '(') {
+            depth++;
+            current += char;
+        }
+        else if (char === '}' || char === ']' || char === ')') {
+            depth--;
+            current += char;
+        }
+        else if (char === ',' && depth === 0) {
+            pairs.push(current.trim());
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        pairs.push(current.trim());
+    }
+    // Extract property name and value from each pair
+    for (const pair of pairs) {
+        // Match: property: value or 'property': value or "property": value
+        const match = pair.match(/^(['"]?)(\w+)\1\s*:\s*(.+)$/);
+        if (match) {
+            const property = match[2];
+            const value = match[3];
+            const type = inferTypeFromLiteral(value);
+            types.push({
+                property,
+                type,
+                source: 'g-scope literal'
+            });
+        }
+    }
+    return types;
+}
+/**
+ * Extract the string value from a template literal or string literal node.
+ */
+function getStringValue(node, ts) {
+    if (ts.isStringLiteral(node)) {
+        return node.text;
+    }
+    if (ts.isNoSubstitutionTemplateLiteral(node)) {
+        return node.text;
+    }
+    if (ts.isTemplateExpression(node)) {
+        // For template expressions with substitutions, just get the head for now
+        // This is a simplification - full support would need to evaluate the template
+        return node.head.text;
+    }
+    return null;
+}
+/**
+ * Find directive() calls and extract template + function info.
+ */
+function findDirectiveCalls(sourceFile, ts) {
+    const results = [];
+    function visit(node) {
+        if (ts.isCallExpression(node)) {
+            const expr = node.expression;
+            // Check if it's a call to 'directive'
+            if (ts.isIdentifier(expr) && expr.text === 'directive') {
+                const args = node.arguments;
+                // directive(name, fn, options?) or directive(name, options)
+                if (args.length >= 2) {
+                    let fnArg = null;
+                    let optionsArg = null;
+                    if (args.length === 2) {
+                        // Could be directive(name, fn) or directive(name, options)
+                        const second = args[1];
+                        if (ts.isObjectLiteralExpression(second)) {
+                            optionsArg = second;
+                        }
+                        else {
+                            fnArg = second;
+                        }
+                    }
+                    else if (args.length >= 3) {
+                        fnArg = args[1];
+                        optionsArg = args[2];
+                    }
+                    // Extract template from options
+                    let template = null;
+                    if (optionsArg && ts.isObjectLiteralExpression(optionsArg)) {
+                        for (const prop of optionsArg.properties) {
+                            if (ts.isPropertyAssignment(prop) &&
+                                ts.isIdentifier(prop.name) &&
+                                prop.name.text === 'template') {
+                                template = getStringValue(prop.initializer, ts);
+                                break;
+                            }
+                        }
+                    }
+                    if (template && fnArg) {
+                        let functionName = '';
+                        let functionNode = null;
+                        if (ts.isIdentifier(fnArg)) {
+                            functionName = fnArg.text;
+                            // Try to find the function declaration
+                            // This is simplified - a full implementation would use the type checker
+                        }
+                        else if (ts.isFunctionExpression(fnArg) || ts.isArrowFunction(fnArg)) {
+                            functionName = '<inline>';
+                            functionNode = fnArg;
+                        }
+                        results.push({
+                            functionName,
+                            functionNode,
+                            template,
+                            callNode: node
+                        });
+                    }
+                }
+            }
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(sourceFile);
+    return results;
+}
+/**
+ * Get the type of $scope parameter from a function.
+ */
+function getScopeParamType(checker, fn, ts) {
+    if (!ts.isFunctionExpression(fn) && !ts.isArrowFunction(fn) && !ts.isFunctionDeclaration(fn)) {
+        return null;
+    }
+    const funcType = checker.getTypeAtLocation(fn);
+    const signatures = funcType.getCallSignatures();
+    if (signatures.length === 0)
+        return null;
+    const params = signatures[0].getParameters();
+    // Look for $scope parameter
+    for (const param of params) {
+        if (param.name === '$scope') {
+            const paramDecl = param.valueDeclaration;
+            if (paramDecl) {
+                return checker.getTypeAtLocation(paramDecl);
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Check if a type is compatible with the expected type.
+ */
+function isTypeCompatible(checker, actualType, propertyName, expectedType, ts) {
+    const prop = actualType.getProperty(propertyName);
+    if (!prop) {
+        // Property not found - might be using index signature or any
+        return { compatible: true, actualTypeName: 'unknown' };
+    }
+    const propDecl = prop.valueDeclaration;
+    if (!propDecl) {
+        return { compatible: true, actualTypeName: 'unknown' };
+    }
+    const propType = checker.getTypeAtLocation(propDecl);
+    const propTypeName = checker.typeToString(propType);
+    if (expectedType === 'unknown') {
+        return { compatible: true, actualTypeName: propTypeName };
+    }
+    // Check type compatibility
+    const typeFlags = propType.flags;
+    let isExpectedType = false;
+    switch (expectedType) {
+        case 'boolean':
+            isExpectedType = !!(typeFlags & ts.TypeFlags.BooleanLike);
+            break;
+        case 'string':
+            isExpectedType = !!(typeFlags & ts.TypeFlags.StringLike);
+            break;
+        case 'number':
+            isExpectedType = !!(typeFlags & ts.TypeFlags.NumberLike);
+            break;
+        case 'null':
+            isExpectedType = !!(typeFlags & ts.TypeFlags.Null);
+            break;
+        case 'array':
+            // Check if it's an array type
+            isExpectedType = checker.isArrayType(propType) ||
+                checker.isTupleType(propType) ||
+                propTypeName.endsWith('[]') ||
+                propTypeName.startsWith('Array<');
+            break;
+        case 'object':
+            // Object is compatible with most non-primitive types
+            isExpectedType = !!(typeFlags & ts.TypeFlags.Object) &&
+                !checker.isArrayType(propType);
+            break;
+    }
+    // Also check if it's a union that includes the expected type
+    if (!isExpectedType && propType.isUnion()) {
+        for (const unionType of propType.types) {
+            const unionTypeName = checker.typeToString(unionType);
+            switch (expectedType) {
+                case 'boolean':
+                    if (unionType.flags & ts.TypeFlags.BooleanLike)
+                        isExpectedType = true;
+                    break;
+                case 'string':
+                    if (unionType.flags & ts.TypeFlags.StringLike)
+                        isExpectedType = true;
+                    break;
+                case 'number':
+                    if (unionType.flags & ts.TypeFlags.NumberLike)
+                        isExpectedType = true;
+                    break;
+                case 'null':
+                    if (unionType.flags & ts.TypeFlags.Null)
+                        isExpectedType = true;
+                    break;
+                case 'array':
+                    if (checker.isArrayType(unionType) ||
+                        checker.isTupleType(unionType) ||
+                        unionTypeName.endsWith('[]') ||
+                        unionTypeName.startsWith('Array<')) {
+                        isExpectedType = true;
+                    }
+                    break;
+                case 'object':
+                    if ((unionType.flags & ts.TypeFlags.Object) && !checker.isArrayType(unionType)) {
+                        isExpectedType = true;
+                    }
+                    break;
+            }
+        }
+    }
+    return { compatible: isExpectedType, actualTypeName: propTypeName };
+}
+function init(modules) {
+    const ts = modules.typescript;
+    function create(info) {
+        const log = (msg) => {
+            info.project.projectService.logger.info(`[gonia] ${msg}`);
+        };
+        log('Gonia TypeScript plugin initialized');
+        // Create proxy for language service
+        const proxy = Object.create(null);
+        const oldLS = info.languageService;
+        // Copy all methods
+        for (const k in oldLS) {
+            const key = k;
+            proxy[k] = function (...args) {
+                return oldLS[key].apply(oldLS, args);
+            };
+        }
+        // Override getSemanticDiagnostics
+        proxy.getSemanticDiagnostics = (fileName) => {
+            const prior = oldLS.getSemanticDiagnostics(fileName);
+            const program = oldLS.getProgram();
+            if (!program)
+                return prior;
+            const sourceFile = program.getSourceFile(fileName);
+            if (!sourceFile)
+                return prior;
+            // Only check .ts/.tsx files
+            if (!fileName.endsWith('.ts') && !fileName.endsWith('.tsx')) {
+                return prior;
+            }
+            const checker = program.getTypeChecker();
+            const customDiagnostics = [];
+            // Find directive() calls
+            const directiveCalls = findDirectiveCalls(sourceFile, ts);
+            for (const call of directiveCalls) {
+                // Infer types from template
+                const templateTypes = inferTypesFromTemplate(call.template);
+                if (templateTypes.length === 0)
+                    continue;
+                // Get the function node
+                let fnNode = call.functionNode;
+                if (!fnNode && call.functionName && call.functionName !== '<inline>') {
+                    // Find the function by name in the file
+                    ts.forEachChild(sourceFile, (node) => {
+                        if (ts.isVariableStatement(node)) {
+                            for (const decl of node.declarationList.declarations) {
+                                if (ts.isIdentifier(decl.name) && decl.name.text === call.functionName) {
+                                    if (decl.initializer) {
+                                        fnNode = decl.initializer;
+                                    }
+                                }
+                            }
+                        }
+                        else if (ts.isFunctionDeclaration(node) && node.name?.text === call.functionName) {
+                            fnNode = node;
+                        }
+                    });
+                }
+                if (!fnNode)
+                    continue;
+                // Get $scope type
+                const scopeType = getScopeParamType(checker, fnNode, ts);
+                if (!scopeType)
+                    continue;
+                // Check each template-inferred type
+                for (const templateType of templateTypes) {
+                    const { compatible, actualTypeName } = isTypeCompatible(checker, scopeType, templateType.property, templateType.type, ts);
+                    if (!compatible) {
+                        customDiagnostics.push({
+                            file: sourceFile,
+                            start: call.callNode.getStart(),
+                            length: call.callNode.getWidth(),
+                            messageText: `Template expects '$scope.${templateType.property}' to be ${templateType.type} (from ${templateType.source}), but directive declares it as ${actualTypeName}`,
+                            category: ts.DiagnosticCategory.Error,
+                            code: 90001,
+                            source: 'gonia'
+                        });
+                    }
+                }
+            }
+            return [...prior, ...customDiagnostics];
+        };
+        return proxy;
+    }
+    return { create };
+}
+module.exports = init;

package/dist/vite/plugin.js

@@ -11,7 +11,52 @@
  */
 import { readFileSync } from 'fs';
 import { glob } from 'tinyglobby';
-import { relative } from 'path';
+import { relative, join } from 'path';
+/**
+ * Scan dependencies for packages that export gonia directives.
+ * Looks for `gonia` field in each dependency's package.json.
+ */
+function discoverLibraryDirectives(rootDir) {
+    const directives = new Map();
+    try {
+        const pkgPath = join(rootDir, 'package.json');
+        const pkgContent = readFileSync(pkgPath, 'utf-8');
+        const pkg = JSON.parse(pkgContent);
+        const allDeps = {
+            ...pkg.dependencies,
+            ...pkg.devDependencies,
+        };
+        for (const depName of Object.keys(allDeps)) {
+            try {
+                // Find the dependency's package.json
+                const depPkgPath = join(rootDir, 'node_modules', depName, 'package.json');
+                const depPkgContent = readFileSync(depPkgPath, 'utf-8');
+                const depPkg = JSON.parse(depPkgContent);
+                const goniaConfig = depPkg.gonia;
+                if (!goniaConfig?.directives)
+                    continue;
+                // Register each directive from this package
+                for (const [directiveName, relativePath] of Object.entries(goniaConfig.directives)) {
+                    // Resolve the module path
+                    const modulePath = `${depName}/${relativePath.replace(/^\.\//, '')}`;
+                    directives.set(directiveName, {
+                        name: directiveName,
+                        exportName: null, // Will be imported as default or named based on convention
+                        module: modulePath,
+                        isBuiltin: false,
+                    });
+                }
+            }
+            catch {
+                // Dependency doesn't have gonia config or couldn't be read - skip
+            }
+        }
+    }
+    catch {
+        // Could not read root package.json - skip library discovery
+    }
+    return directives;
+}
 /**
  * Map of built-in directive names to their export names from gonia.
  */
@@ -334,20 +379,30 @@ export function gonia(options = {}) {
             rootDir = config.root;
         },
         async buildStart() {
-            // Scan directive sources to discover custom directives
+            // First, discover directives from installed libraries (lowest priority)
+            const libraryDirectives = discoverLibraryDirectives(rootDir);
+            for (const [name, info] of libraryDirectives) {
+                customDirectives.set(name, info);
+            }
+            if (isDev && libraryDirectives.size > 0) {
+                console.log(`[gonia] Discovered ${libraryDirectives.size} directive(s) from libraries`);
+            }
+            // Then scan local directive sources (higher priority - will override library)
             if (directiveSources.length > 0) {
                 const files = await glob(directiveSources, {
                     cwd: rootDir,
                     absolute: true,
                 });
+                let localCount = 0;
                 for (const file of files) {
                     const directives = scanFileForDirectives(file);
                     for (const [name, info] of directives) {
                         customDirectives.set(name, info);
+                        localCount++;
                     }
                 }
-                if (isDev && customDirectives.size > 0) {
-                    console.log(`[gonia] Discovered ${customDirectives.size} custom directive(s)`);
+                if (isDev && localCount > 0) {
+                    console.log(`[gonia] Discovered ${localCount} local directive(s)`);
                 }
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gonia",
-  "version": "0.2.6",
+  "version": "0.3.1",
   "description": "A lightweight, SSR-first reactive UI library with declarative directives",
   "type": "module",
   "license": "MIT",
@@ -43,10 +43,14 @@
     "./vite": {
       "types": "./dist/vite/index.d.ts",
       "import": "./dist/vite/index.js"
+    },
+    "./ts-plugin": {
+      "types": "./dist/ts-plugin/index.d.ts",
+      "require": "./dist/ts-plugin/index.js"
     }
   },
   "dependencies": {
-    "happy-dom": "^17.4.4",
+    "happy-dom": "^20.3.9",
     "tinyglobby": "^0.2.15"
   },
   "peerDependencies": {
@@ -60,17 +64,14 @@
   "devDependencies": {
     "@types/node": "^25.0.10",
     "@vitest/coverage-v8": "^4.0.17",
-    "conventional-changelog-cli": "^5.0.0",
     "jsdom": "^27.4.0",
     "typescript": "^5.7.0",
     "vite": "^6.4.0",
     "vitest": "^4.0.17"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && tsc -p src/ts-plugin/tsconfig.json",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "changelog:all": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+    "test:watch": "vitest"
   }
 }