gonia 0.2.5 → 0.3.0

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,10 +4,10 @@
  * @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';
@@ -30,24 +30,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 +97,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 +219,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 +236,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
                             });
                         }
                     }
@@ -307,11 +374,61 @@ 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;
+                    // 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
+                    if (options.provide) {
+                        registerDIProviders(item.el, options.provide);
+                    }
+                    // 3. 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);
+                        }
+                    }
+                    // 4. 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 {
+                    // Attribute directive
                     // Determine scope for this directive
                     let scopeState;
                     if (item.directive.$context?.length) {

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.
  */
@@ -216,6 +261,35 @@ function generateImports(directives, customDirectives, currentFile, rootDir, dir
     }
     return statements.length > 0 ? statements.join('\n') + '\n' : '';
 }
+/**
+ * Split function parameters, respecting nested angle brackets in generics.
+ */
+function splitParams(paramsStr) {
+    const params = [];
+    let current = '';
+    let depth = 0;
+    for (const char of paramsStr) {
+        if (char === '<') {
+            depth++;
+            current += char;
+        }
+        else if (char === '>') {
+            depth--;
+            current += char;
+        }
+        else if (char === ',' && depth === 0) {
+            params.push(current.trim());
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim()) {
+        params.push(current.trim());
+    }
+    return params;
+}
 /**
  * Transform source code to add $inject arrays to directive functions.
  */
@@ -244,9 +318,7 @@ function transformInject(code) {
         const paramsStr = fnMatch[1] || fnMatch[2];
         if (!paramsStr)
             continue;
-        const params = paramsStr
-            .split(',')
-            .map(p => p.trim())
+        const params = splitParams(paramsStr)
             .map(p => p.replace(/\s*:.*$/, ''))
             .map(p => p.replace(/\s*=.*$/, ''))
             .filter(Boolean);
@@ -307,26 +379,36 @@ 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)`);
                 }
             }
         },
         transform(code, id) {
             // Skip node_modules (except for $inject transform in gonia itself)
-            const isGoniaInternal = id.includes('gonia') && id.includes('node_modules');
+            const isGoniaInternal = id.includes('/gonia/') && (id.includes('node_modules') || id.includes('/dist/'));
             if (id.includes('node_modules') && !isGoniaInternal)
                 return null;
             if (!/\.(ts|js|tsx|jsx|html)$/.test(id))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gonia",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "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"
   }
 }