gonia 0.1.2 → 0.1.3

package/dist/client/hydrate.js

@@ -9,7 +9,8 @@ import { processNativeSlot } from '../directives/slot.js';
 import { getLocalState, registerProvider, resolveFromProviders, registerDIProviders, resolveFromDIProviders } from '../providers.js';
 import { FOR_PROCESSED_ATTR } from '../directives/for.js';
 import { findParentScope, createElementScope, getElementScope } from '../scope.js';
-import { getInjectables } from '../inject.js';
+import { resolveDependencies as resolveInjectables } from '../inject.js';
+import { resolveContext } from '../context-registry.js';
 // Built-in directives
 import { text } from '../directives/text.js';
 import { show } from '../directives/show.js';
@@ -73,7 +74,14 @@ function getDirectivesForElement(el, registry) {
     for (const [name, directive] of registry) {
         const attr = el.getAttribute(`g-${name}`);
         if (attr !== null) {
-            directives.push({ name, directive, expr: attr });
+            // Look up options from the global directive registry
+            const registration = getDirective(`g-${name}`);
+            directives.push({
+                name,
+                directive,
+                expr: attr,
+                using: registration?.options.using
+            });
         }
     }
     // Sort by priority (higher first)
@@ -124,48 +132,28 @@ export function setElementContext(el, ctx) {
     contextCache.set(el, ctx);
 }
 /**
- * Resolve dependencies for a directive based on its $inject array.
+ * Create resolver config for client-side dependency resolution.
  *
  * @internal
  */
-function resolveDependencies(directive, expr, el, ctx) {
-    const inject = getInjectables(directive);
-    return inject.map(name => {
-        switch (name) {
-            case '$expr':
-                return expr;
-            case '$element':
-                return el;
-            case '$eval':
-                return ctx.eval.bind(ctx);
-            case '$state':
-                // Find nearest ancestor scope (including self)
-                return findParentScope(el, true) ?? getLocalState(el);
-            case '$rootState':
-                // Deprecated: same as $state now (scoped state)
-                return findParentScope(el, true) ?? getLocalState(el);
-            case '$mode':
-                return Mode.CLIENT;
-            default: {
-                // Look up in ancestor DI providers first (provide option)
-                const diProvided = resolveFromDIProviders(el, name);
-                if (diProvided !== undefined) {
-                    return diProvided;
-                }
-                // Look up in global services registry
-                const service = services.get(name);
-                if (service !== undefined) {
-                    return service;
-                }
-                // Look up in ancestor context providers ($context)
-                const contextProvided = resolveFromProviders(el, name);
-                if (contextProvided !== undefined) {
-                    return contextProvided;
-                }
-                throw new Error(`Unknown injectable: ${name}`);
-            }
-        }
-    });
+function createClientResolverConfig(el, ctx) {
+    return {
+        resolveContext: (key) => resolveContext(el, key),
+        resolveState: () => findParentScope(el, true) ?? getLocalState(el),
+        resolveCustom: (name) => {
+            // Look up in ancestor DI providers first (provide option)
+            const diProvided = resolveFromDIProviders(el, name);
+            if (diProvided !== undefined)
+                return diProvided;
+            // Look up in global services registry
+            const service = services.get(name);
+            if (service !== undefined)
+                return service;
+            // Look up in ancestor context providers ($context)
+            return resolveFromProviders(el, name);
+        },
+        mode: 'client'
+    };
 }
 /**
  * Process directives on a single element.
@@ -190,9 +178,10 @@ function processElement(el, registry) {
     const ctx = getContextForElement(el);
     // Process directives sequentially, handling async ones properly
     let chain;
-    for (const { directive, expr } of directives) {
+    for (const { directive, expr, using } of directives) {
         const processDirective = () => {
-            const args = resolveDependencies(directive, expr, el, ctx);
+            const config = createClientResolverConfig(el, ctx);
+            const args = resolveInjectables(directive, expr, el, ctx.eval.bind(ctx), config, using);
             const result = directive(...args);
             // Register as provider if directive declares $context
             if (directive.$context?.length) {
@@ -330,8 +319,8 @@ async function processDirectiveElements() {
         }
         const { fn, options } = registration;
         // Only process directives with templates (web components),
-        // scope: true, or provide (DI overrides)
-        if (!options.template && !options.scope && !options.provide) {
+        // scope: true, provide (DI overrides), or using (context dependencies)
+        if (!options.template && !options.scope && !options.provide && !options.using) {
             continue;
         }
         // Find all elements matching this directive's tag name
@@ -357,19 +346,12 @@ async function processDirectiveElements() {
             // 3. Call directive function if present (initializes state)
             if (fn) {
                 const ctx = createContext(Mode.CLIENT, scope);
-                const inject = getInjectables(fn);
-                const args = inject.map((dep) => {
-                    switch (dep) {
-                        case '$element':
-                            return el;
-                        case '$state':
-                            return scope;
-                        case '$eval':
-                            return ctx.eval.bind(ctx);
-                        default:
-                            return undefined;
-                    }
-                });
+                const config = {
+                    resolveContext: (key) => resolveContext(el, key),
+                    resolveState: () => scope,
+                    mode: 'client'
+                };
+                const args = resolveInjectables(fn, '', el, ctx.eval.bind(ctx), config, options.using);
                 const result = fn(...args);
                 if (result instanceof Promise) {
                     await result;

package/dist/context-registry.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Type-safe context registry for sharing data across DOM ancestors/descendants.
+ *
+ * @remarks
+ * Provides a unified system for registering and resolving typed context values
+ * on DOM elements. Similar to React's Context or Vue's provide/inject but with
+ * full type safety through branded context keys.
+ *
+ * @packageDocumentation
+ */
+/**
+ * A branded context key that provides type safety for context values.
+ *
+ * @typeParam T - The type of value this context holds
+ *
+ * @remarks
+ * The `__type` property is a phantom type - it doesn't exist at runtime
+ * but provides compile-time type checking when registering and resolving.
+ */
+export interface ContextKey<T> {
+    /** Unique identifier for this context */
+    readonly id: symbol;
+    /** Debug name for error messages */
+    readonly name: string;
+    /** Phantom type for TypeScript inference */
+    readonly __type?: T;
+}
+/**
+ * Create a typed context key.
+ *
+ * @typeParam T - The type of value this context will hold
+ * @param name - Debug name for the context (used in error messages)
+ * @returns A unique context key
+ *
+ * @example
+ * ```ts
+ * interface UserData {
+ *   name: string;
+ *   email: string;
+ * }
+ *
+ * const UserContext = createContextKey<UserData>('User');
+ *
+ * // Register on an element
+ * registerContext(el, UserContext, { name: 'Alice', email: 'alice@example.com' });
+ *
+ * // Resolve from a descendant - fully typed!
+ * const user = resolveContext(childEl, UserContext);
+ * // user is UserData | undefined
+ * ```
+ */
+export declare function createContextKey<T>(name: string): ContextKey<T>;
+/**
+ * Register a context value on an element.
+ *
+ * @typeParam T - The context value type (inferred from key)
+ * @param el - The element to register the context on
+ * @param key - The context key
+ * @param value - The value to store
+ *
+ * @remarks
+ * Descendants can resolve this context using `resolveContext`.
+ * If a context with the same key is already registered on this element,
+ * it will be overwritten.
+ *
+ * @example
+ * ```ts
+ * const ThemeContext = createContextKey<{ mode: 'light' | 'dark' }>('Theme');
+ *
+ * registerContext(rootEl, ThemeContext, { mode: 'dark' });
+ * ```
+ */
+export declare function registerContext<T>(el: Element, key: ContextKey<T>, value: T): void;
+/**
+ * Resolve a context value from an ancestor element.
+ *
+ * @typeParam T - The context value type (inferred from key)
+ * @param el - The element to start searching from
+ * @param key - The context key to look for
+ * @param includeSelf - Whether to check the element itself (default: false)
+ * @returns The context value, or undefined if not found
+ *
+ * @remarks
+ * Walks up the DOM tree from the element's parent (or the element itself
+ * if `includeSelf` is true), looking for an ancestor with the specified
+ * context registered.
+ *
+ * @example
+ * ```ts
+ * const ThemeContext = createContextKey<{ mode: 'light' | 'dark' }>('Theme');
+ *
+ * // Somewhere up the tree, ThemeContext was registered
+ * const theme = resolveContext(el, ThemeContext);
+ * if (theme) {
+ *   console.log(theme.mode); // 'light' or 'dark'
+ * }
+ * ```
+ */
+export declare function resolveContext<T>(el: Element, key: ContextKey<T>, includeSelf?: boolean): T | undefined;
+/**
+ * Check if a context is registered on an element.
+ *
+ * @param el - The element to check
+ * @param key - The context key
+ * @returns True if the context is registered on this specific element
+ *
+ * @remarks
+ * This only checks the element itself, not ancestors.
+ * Use `resolveContext` to search up the tree.
+ */
+export declare function hasContext<T>(el: Element, key: ContextKey<T>): boolean;
+/**
+ * Remove a context from an element.
+ *
+ * @param el - The element to remove the context from
+ * @param key - The context key to remove
+ *
+ * @remarks
+ * Does nothing if the context wasn't registered.
+ */
+export declare function removeContext<T>(el: Element, key: ContextKey<T>): void;
+/**
+ * Clear all contexts from an element.
+ *
+ * @param el - The element to clear
+ *
+ * @remarks
+ * Called during element cleanup/removal.
+ */
+export declare function clearContexts(el: Element): void;

package/dist/context-registry.js

@@ -0,0 +1,153 @@
+/**
+ * Type-safe context registry for sharing data across DOM ancestors/descendants.
+ *
+ * @remarks
+ * Provides a unified system for registering and resolving typed context values
+ * on DOM elements. Similar to React's Context or Vue's provide/inject but with
+ * full type safety through branded context keys.
+ *
+ * @packageDocumentation
+ */
+import { findAncestor } from './dom.js';
+/**
+ * Storage for all contexts per element.
+ *
+ * @internal
+ */
+const contexts = new WeakMap();
+/**
+ * Create a typed context key.
+ *
+ * @typeParam T - The type of value this context will hold
+ * @param name - Debug name for the context (used in error messages)
+ * @returns A unique context key
+ *
+ * @example
+ * ```ts
+ * interface UserData {
+ *   name: string;
+ *   email: string;
+ * }
+ *
+ * const UserContext = createContextKey<UserData>('User');
+ *
+ * // Register on an element
+ * registerContext(el, UserContext, { name: 'Alice', email: 'alice@example.com' });
+ *
+ * // Resolve from a descendant - fully typed!
+ * const user = resolveContext(childEl, UserContext);
+ * // user is UserData | undefined
+ * ```
+ */
+export function createContextKey(name) {
+    return {
+        id: Symbol(name),
+        name,
+    };
+}
+/**
+ * Register a context value on an element.
+ *
+ * @typeParam T - The context value type (inferred from key)
+ * @param el - The element to register the context on
+ * @param key - The context key
+ * @param value - The value to store
+ *
+ * @remarks
+ * Descendants can resolve this context using `resolveContext`.
+ * If a context with the same key is already registered on this element,
+ * it will be overwritten.
+ *
+ * @example
+ * ```ts
+ * const ThemeContext = createContextKey<{ mode: 'light' | 'dark' }>('Theme');
+ *
+ * registerContext(rootEl, ThemeContext, { mode: 'dark' });
+ * ```
+ */
+export function registerContext(el, key, value) {
+    let map = contexts.get(el);
+    if (!map) {
+        map = new Map();
+        contexts.set(el, map);
+    }
+    map.set(key.id, value);
+}
+/**
+ * Resolve a context value from an ancestor element.
+ *
+ * @typeParam T - The context value type (inferred from key)
+ * @param el - The element to start searching from
+ * @param key - The context key to look for
+ * @param includeSelf - Whether to check the element itself (default: false)
+ * @returns The context value, or undefined if not found
+ *
+ * @remarks
+ * Walks up the DOM tree from the element's parent (or the element itself
+ * if `includeSelf` is true), looking for an ancestor with the specified
+ * context registered.
+ *
+ * @example
+ * ```ts
+ * const ThemeContext = createContextKey<{ mode: 'light' | 'dark' }>('Theme');
+ *
+ * // Somewhere up the tree, ThemeContext was registered
+ * const theme = resolveContext(el, ThemeContext);
+ * if (theme) {
+ *   console.log(theme.mode); // 'light' or 'dark'
+ * }
+ * ```
+ */
+export function resolveContext(el, key, includeSelf = false) {
+    return findAncestor(el, (e) => {
+        const map = contexts.get(e);
+        if (map?.has(key.id)) {
+            return map.get(key.id);
+        }
+        return undefined;
+    }, includeSelf);
+}
+/**
+ * Check if a context is registered on an element.
+ *
+ * @param el - The element to check
+ * @param key - The context key
+ * @returns True if the context is registered on this specific element
+ *
+ * @remarks
+ * This only checks the element itself, not ancestors.
+ * Use `resolveContext` to search up the tree.
+ */
+export function hasContext(el, key) {
+    const map = contexts.get(el);
+    return map?.has(key.id) ?? false;
+}
+/**
+ * Remove a context from an element.
+ *
+ * @param el - The element to remove the context from
+ * @param key - The context key to remove
+ *
+ * @remarks
+ * Does nothing if the context wasn't registered.
+ */
+export function removeContext(el, key) {
+    const map = contexts.get(el);
+    if (map) {
+        map.delete(key.id);
+        if (map.size === 0) {
+            contexts.delete(el);
+        }
+    }
+}
+/**
+ * Clear all contexts from an element.
+ *
+ * @param el - The element to clear
+ *
+ * @remarks
+ * Called during element cleanup/removal.
+ */
+export function clearContexts(el) {
+    contexts.delete(el);
+}

package/dist/directives/slot.d.ts

@@ -9,12 +9,14 @@
  * @packageDocumentation
  */
 import { Directive } from '../types.js';
+import { SlotContentContext } from './template.js';
 /**
  * Slot directive for content transclusion.
  *
  * @remarks
  * Finds the nearest template ancestor and transcludes the
- * matching slot content into itself.
+ * matching slot content into itself. The SlotContentContext
+ * is automatically injected via DI.
  *
  * If the slot name is an expression, wraps in an effect
  * for reactivity.
@@ -35,7 +37,7 @@ import { Directive } from '../types.js';
  * <slot></slot>
  * ```
  */
-export declare const slot: Directive<['$expr', '$element', '$eval']>;
+export declare const slot: Directive<['$expr', '$element', '$eval', typeof SlotContentContext]>;
 /**
  * Process native <slot> elements.
  *

package/dist/directives/slot.js

@@ -10,13 +10,15 @@
  */
 import { directive } from '../types.js';
 import { effect } from '../reactivity.js';
-import { findTemplateAncestor, getSavedContent } from './template.js';
+import { resolveContext } from '../context-registry.js';
+import { SlotContentContext } from './template.js';
 /**
  * Slot directive for content transclusion.
  *
  * @remarks
  * Finds the nearest template ancestor and transcludes the
- * matching slot content into itself.
+ * matching slot content into itself. The SlotContentContext
+ * is automatically injected via DI.
  *
  * If the slot name is an expression, wraps in an effect
  * for reactivity.
@@ -37,7 +39,7 @@ import { findTemplateAncestor, getSavedContent } from './template.js';
  * <slot></slot>
  * ```
  */
-export const slot = function slot($expr, $element, $eval) {
+export const slot = function slot($expr, $element, $eval, $slotContent) {
     // Determine slot name
     // If expr is empty, check for name attribute, otherwise use 'default'
     const getName = () => {
@@ -50,16 +52,11 @@ export const slot = function slot($expr, $element, $eval) {
     };
     const transclude = () => {
         const name = getName();
-        const templateEl = findTemplateAncestor($element);
-        if (!templateEl) {
-            // No template ancestor - leave slot as-is or clear it
+        // SlotContentContext is injected via DI
+        if (!$slotContent) {
             return;
         }
-        const content = getSavedContent(templateEl);
-        if (!content) {
-            return;
-        }
-        const slotContent = content.slots.get(name);
+        const slotContent = $slotContent.slots.get(name);
         if (slotContent) {
             $element.innerHTML = slotContent;
         }
@@ -73,6 +70,7 @@ export const slot = function slot($expr, $element, $eval) {
         transclude();
     }
 };
+slot.$inject = ['$expr', '$element', '$eval', SlotContentContext];
 directive('g-slot', slot);
 /**
  * Process native <slot> elements.
@@ -85,11 +83,8 @@ directive('g-slot', slot);
  */
 export function processNativeSlot(el) {
     const name = el.getAttribute('name') ?? 'default';
-    const templateEl = findTemplateAncestor(el);
-    if (!templateEl) {
-        return;
-    }
-    const content = getSavedContent(templateEl);
+    // Resolve slot content from nearest template ancestor
+    const content = resolveContext(el, SlotContentContext);
     if (!content) {
         return;
     }

package/dist/directives/template.d.ts

@@ -10,15 +10,22 @@
  */
 import { Directive } from '../types.js';
 import { EffectScope } from '../reactivity.js';
+import { ContextKey } from '../context-registry.js';
 /**
  * Saved slot content for an element.
- *
- * @internal
  */
 export interface SlotContent {
     /** Content by slot name. 'default' for unnamed content. */
     slots: Map<string, string>;
 }
+/**
+ * Context key for slot content.
+ *
+ * @remarks
+ * Templates register their slot content using this context, and
+ * slot directives resolve it to find their content.
+ */
+export declare const SlotContentContext: ContextKey<SlotContent>;
 /**
  * Get saved slot content for an element.
  *

package/dist/directives/template.js

@@ -10,8 +10,16 @@
  */
 import { directive, DirectivePriority } from '../types.js';
 import { createEffectScope } from '../reactivity.js';
-/** WeakMap storing saved children per element. */
-const savedContent = new WeakMap();
+import { findAncestor } from '../dom.js';
+import { createContextKey, registerContext, resolveContext, hasContext } from '../context-registry.js';
+/**
+ * Context key for slot content.
+ *
+ * @remarks
+ * Templates register their slot content using this context, and
+ * slot directives resolve it to find their content.
+ */
+export const SlotContentContext = createContextKey('SlotContent');
 /** WeakMap storing effect scopes per element for cleanup. */
 const elementScopes = new WeakMap();
 /** Set tracking which templates are currently rendering (cycle detection). */
@@ -22,7 +30,7 @@ const renderingChain = new WeakMap();
  * @internal
  */
 export function getSavedContent(el) {
-    return savedContent.get(el);
+    return resolveContext(el, SlotContentContext, true);
 }
 /**
  * Find the nearest ancestor with saved content (the template element).
@@ -30,14 +38,7 @@ export function getSavedContent(el) {
  * @internal
  */
 export function findTemplateAncestor(el) {
-    let current = el.parentElement;
-    while (current) {
-        if (savedContent.has(current)) {
-            return current;
-        }
-        current = current.parentElement;
-    }
-    return null;
+    return findAncestor(el, (e) => hasContext(e, SlotContentContext) ? e : undefined) ?? null;
 }
 /**
  * Check if a node is an Element.
@@ -116,11 +117,11 @@ export const template = async function template($expr, $element, $templates) {
         console.error(`Cycle detected: template "${templateName}" is already being rendered`);
         return;
     }
-    // Save children for slots
+    // Save children for slots using typed context
     const slotContent = {
         slots: extractSlotContent($element)
     };
-    savedContent.set($element, slotContent);
+    registerContext($element, SlotContentContext, slotContent);
     // Track this template in the chain
     const newChain = new Set(chain);
     newChain.add(templateName);

package/dist/dom.d.ts

@@ -0,0 +1,29 @@
+/**
+ * DOM traversal utilities.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Find an ancestor element matching a predicate.
+ *
+ * @remarks
+ * Walks up the DOM tree starting from the element's parent (or the element
+ * itself if `includeSelf` is true), calling the predicate on each ancestor.
+ * Returns the first non-undefined result from the predicate.
+ *
+ * @typeParam T - The type returned by the predicate
+ * @param el - The element to start from
+ * @param predicate - Function called on each ancestor, returns a value or undefined
+ * @param includeSelf - Whether to check the element itself (default: false)
+ * @returns The first non-undefined result from the predicate, or undefined
+ *
+ * @example
+ * ```ts
+ * // Find ancestor with a specific attribute
+ * const ancestor = findAncestor(el, (e) => e.hasAttribute('data-scope') ? e : undefined);
+ *
+ * // Find value from a WeakMap on an ancestor
+ * const value = findAncestor(el, (e) => myWeakMap.get(e));
+ * ```
+ */
+export declare function findAncestor<T>(el: Element, predicate: (el: Element) => T | undefined, includeSelf?: boolean): T | undefined;

package/dist/dom.js

@@ -0,0 +1,39 @@
+/**
+ * DOM traversal utilities.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Find an ancestor element matching a predicate.
+ *
+ * @remarks
+ * Walks up the DOM tree starting from the element's parent (or the element
+ * itself if `includeSelf` is true), calling the predicate on each ancestor.
+ * Returns the first non-undefined result from the predicate.
+ *
+ * @typeParam T - The type returned by the predicate
+ * @param el - The element to start from
+ * @param predicate - Function called on each ancestor, returns a value or undefined
+ * @param includeSelf - Whether to check the element itself (default: false)
+ * @returns The first non-undefined result from the predicate, or undefined
+ *
+ * @example
+ * ```ts
+ * // Find ancestor with a specific attribute
+ * const ancestor = findAncestor(el, (e) => e.hasAttribute('data-scope') ? e : undefined);
+ *
+ * // Find value from a WeakMap on an ancestor
+ * const value = findAncestor(el, (e) => myWeakMap.get(e));
+ * ```
+ */
+export function findAncestor(el, predicate, includeSelf = false) {
+    let current = includeSelf ? el : el.parentElement;
+    while (current) {
+        const result = predicate(current);
+        if (result !== undefined) {
+            return result;
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}