gonia 0.0.1

package/dist/directives/model.js

@@ -0,0 +1,134 @@
+/**
+ * Two-way binding directive.
+ *
+ * @packageDocumentation
+ */
+import { directive } from '../types.js';
+import { effect } from '../reactivity.js';
+/**
+ * Parse a property path and return getter/setter functions.
+ *
+ * @param path - Dot-separated property path (e.g., 'user.name')
+ * @param state - The state object to operate on
+ * @returns Object with get and set functions
+ */
+function createAccessor(path, $eval, state) {
+    const parts = path.trim().split('.');
+    return {
+        get: () => $eval(path),
+        set: (value) => {
+            let target = state;
+            for (let i = 0; i < parts.length - 1; i++) {
+                const part = parts[i];
+                if (target[part] === undefined || target[part] === null) {
+                    target[part] = {};
+                }
+                target = target[part];
+            }
+            target[parts[parts.length - 1]] = value;
+        }
+    };
+}
+/**
+ * Get the element type for determining binding behavior.
+ */
+function getInputType(el) {
+    const tagName = el.tagName.toLowerCase();
+    if (tagName === 'select') {
+        return 'select';
+    }
+    if (tagName === 'textarea') {
+        return 'textarea';
+    }
+    if (tagName === 'input') {
+        const type = el.type?.toLowerCase() || 'text';
+        if (type === 'checkbox') {
+            return 'checkbox';
+        }
+        if (type === 'radio') {
+            return 'radio';
+        }
+        if (type === 'number' || type === 'range') {
+            return 'number';
+        }
+    }
+    return 'text';
+}
+/**
+ * Bind form element value to state with two-way data binding.
+ *
+ * @remarks
+ * Updates the element value when state changes, and updates state
+ * when the user modifies the element. Handles different input types:
+ * - text/textarea: binds to value, uses input event
+ * - checkbox: binds to checked, uses change event
+ * - radio: binds to checked, uses change event
+ * - select: binds to value, uses change event
+ * - number: binds to value (as number), uses input event
+ *
+ * @example
+ * ```html
+ * <input c-model="name">
+ * <input type="checkbox" c-model="isActive">
+ * <select c-model="selectedOption">
+ * <textarea c-model="description"></textarea>
+ * ```
+ */
+export const model = function model($expr, $element, $eval, $rootState) {
+    const inputType = getInputType($element);
+    const accessor = createAccessor($expr, $eval, $rootState);
+    const el = $element;
+    if (inputType === 'checkbox') {
+        effect(() => {
+            el.checked = Boolean(accessor.get());
+        });
+        el.addEventListener('change', () => {
+            accessor.set(el.checked);
+        });
+    }
+    else if (inputType === 'radio') {
+        effect(() => {
+            const value = accessor.get();
+            el.checked = el.value === String(value);
+        });
+        el.addEventListener('change', () => {
+            if (el.checked) {
+                accessor.set(el.value);
+            }
+        });
+    }
+    else if (inputType === 'select') {
+        effect(() => {
+            el.value = String(accessor.get() ?? '');
+        });
+        el.addEventListener('change', () => {
+            accessor.set(el.value);
+        });
+    }
+    else if (inputType === 'number') {
+        effect(() => {
+            const value = accessor.get();
+            el.value = value === null || value === undefined ? '' : String(value);
+        });
+        el.addEventListener('input', () => {
+            const value = el.value;
+            if (value === '') {
+                accessor.set(null);
+            }
+            else {
+                const num = Number(value);
+                accessor.set(isNaN(num) ? value : num);
+            }
+        });
+    }
+    else {
+        effect(() => {
+            el.value = String(accessor.get() ?? '');
+        });
+        el.addEventListener('input', () => {
+            accessor.set(el.value);
+        });
+    }
+};
+model.$inject = ['$expr', '$element', '$eval', '$rootState'];
+directive('c-model', model);

package/dist/directives/on.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Event handling directive.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+/**
+ * Bind event handler to element.
+ *
+ * @remarks
+ * The handler receives the event object and can call preventDefault(),
+ * stopPropagation(), etc. as needed.
+ *
+ * @example
+ * ```html
+ * <button c-on="click: handleClick">Click me</button>
+ * <form c-on="submit: save">
+ * <input c-on="keydown: onKey">
+ * ```
+ */
+export declare const on: Directive<['$expr', '$element', '$eval', '$rootState']>;

package/dist/directives/on.js

@@ -0,0 +1,54 @@
+/**
+ * Event handling directive.
+ *
+ * @packageDocumentation
+ */
+import { directive } from '../types.js';
+/**
+ * Parse c-on expression: "event: handler" or "event: handler()"
+ */
+function parseOnExpression(expr) {
+    const colonIdx = expr.indexOf(':');
+    if (colonIdx === -1) {
+        return null;
+    }
+    const event = expr.slice(0, colonIdx).trim();
+    const handler = expr.slice(colonIdx + 1).trim();
+    if (!event || !handler) {
+        return null;
+    }
+    return { event, handler };
+}
+/**
+ * Bind event handler to element.
+ *
+ * @remarks
+ * The handler receives the event object and can call preventDefault(),
+ * stopPropagation(), etc. as needed.
+ *
+ * @example
+ * ```html
+ * <button c-on="click: handleClick">Click me</button>
+ * <form c-on="submit: save">
+ * <input c-on="keydown: onKey">
+ * ```
+ */
+export const on = function on($expr, $element, $eval, $rootState) {
+    const parsed = parseOnExpression($expr);
+    if (!parsed) {
+        console.error(`Invalid c-on expression: ${$expr}. Expected "event: handler"`);
+        return;
+    }
+    const { event: eventName, handler: handlerExpr } = parsed;
+    const handler = (event) => {
+        // Evaluate the expression. If it returns a function (e.g., "addTodo" instead
+        // of "addTodo()"), call it with the state as 'this' context and event as arg.
+        const result = $eval(handlerExpr);
+        if (typeof result === 'function') {
+            result.call($rootState, event);
+        }
+    };
+    $element.addEventListener(eventName, handler);
+};
+on.$inject = ['$expr', '$element', '$eval', '$rootState'];
+directive('c-on', on);

package/dist/directives/show.d.ts

@@ -0,0 +1,15 @@
+import { Directive } from '../types.js';
+/**
+ * Toggle element visibility based on an expression.
+ *
+ * @remarks
+ * Sets `display: none` when the expression is falsy,
+ * removes inline display style when truthy.
+ *
+ * @example
+ * ```html
+ * <div c-show="isVisible">Visible content</div>
+ * <div c-show="items.length > 0">Has items</div>
+ * ```
+ */
+export declare const show: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/show.js

@@ -0,0 +1,19 @@
+import { directive } from '../types.js';
+/**
+ * Toggle element visibility based on an expression.
+ *
+ * @remarks
+ * Sets `display: none` when the expression is falsy,
+ * removes inline display style when truthy.
+ *
+ * @example
+ * ```html
+ * <div c-show="isVisible">Visible content</div>
+ * <div c-show="items.length > 0">Has items</div>
+ * ```
+ */
+export const show = function show($expr, $element, $eval) {
+    const value = $eval($expr);
+    $element.style.display = value ? '' : 'none';
+};
+directive('c-show', show);

package/dist/directives/slot.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Slot directive for content transclusion.
+ *
+ * @remarks
+ * A slot is a placeholder in a template that receives content
+ * from the element using the template. Slots enable composition
+ * by allowing parent content to be projected into child templates.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+/**
+ * Slot directive for content transclusion.
+ *
+ * @remarks
+ * Finds the nearest template ancestor and transcludes the
+ * matching slot content into itself.
+ *
+ * If the slot name is an expression, wraps in an effect
+ * for reactivity.
+ *
+ * @example
+ * Static slot name:
+ * ```html
+ * <slot name="header"></slot>
+ * ```
+ *
+ * Dynamic slot name:
+ * ```html
+ * <slot c-slot="activeTab"></slot>
+ * ```
+ *
+ * Default slot (no name):
+ * ```html
+ * <slot></slot>
+ * ```
+ */
+export declare const slot: Directive<['$expr', '$element', '$eval']>;
+/**
+ * Process native <slot> elements.
+ *
+ * @remarks
+ * This handles native `<slot>` elements in templates,
+ * treating them the same as `c-slot` directives.
+ *
+ * @internal
+ */
+export declare function processNativeSlot(el: Element): void;

package/dist/directives/slot.js

@@ -0,0 +1,99 @@
+/**
+ * Slot directive for content transclusion.
+ *
+ * @remarks
+ * A slot is a placeholder in a template that receives content
+ * from the element using the template. Slots enable composition
+ * by allowing parent content to be projected into child templates.
+ *
+ * @packageDocumentation
+ */
+import { directive } from '../types.js';
+import { effect } from '../reactivity.js';
+import { findTemplateAncestor, getSavedContent } from './template.js';
+/**
+ * Slot directive for content transclusion.
+ *
+ * @remarks
+ * Finds the nearest template ancestor and transcludes the
+ * matching slot content into itself.
+ *
+ * If the slot name is an expression, wraps in an effect
+ * for reactivity.
+ *
+ * @example
+ * Static slot name:
+ * ```html
+ * <slot name="header"></slot>
+ * ```
+ *
+ * Dynamic slot name:
+ * ```html
+ * <slot c-slot="activeTab"></slot>
+ * ```
+ *
+ * Default slot (no name):
+ * ```html
+ * <slot></slot>
+ * ```
+ */
+export const slot = function slot($expr, $element, $eval) {
+    // Determine slot name
+    // If expr is empty, check for name attribute, otherwise use 'default'
+    const getName = () => {
+        if ($expr && String($expr).trim()) {
+            // Dynamic slot name from expression
+            return String($eval($expr));
+        }
+        // Static slot name from attribute or default
+        return $element.getAttribute('name') ?? 'default';
+    };
+    const transclude = () => {
+        const name = getName();
+        const templateEl = findTemplateAncestor($element);
+        if (!templateEl) {
+            // No template ancestor - leave slot as-is or clear it
+            return;
+        }
+        const content = getSavedContent(templateEl);
+        const slotContent = content.slots.get(name);
+        if (slotContent) {
+            $element.innerHTML = slotContent;
+            // MutationObserver will process the new content
+        }
+        else {
+            // No content for this slot - could show fallback
+            // For now, leave any default content in the slot
+        }
+    };
+    // If expression is provided, make it reactive
+    if ($expr && String($expr).trim()) {
+        effect(transclude);
+    }
+    else {
+        // Static slot name - just run once
+        transclude();
+    }
+};
+directive('c-slot', slot);
+/**
+ * Process native <slot> elements.
+ *
+ * @remarks
+ * This handles native `<slot>` elements in templates,
+ * treating them the same as `c-slot` directives.
+ *
+ * @internal
+ */
+export function processNativeSlot(el) {
+    const name = el.getAttribute('name') ?? 'default';
+    const templateEl = findTemplateAncestor(el);
+    if (!templateEl) {
+        return;
+    }
+    const content = getSavedContent(templateEl);
+    const slotContent = content.slots.get(name);
+    if (slotContent) {
+        el.outerHTML = slotContent;
+    }
+}

package/dist/directives/template.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Template directive for rendering reusable templates.
+ *
+ * @remarks
+ * Saves the element's children for slot transclusion,
+ * fetches and renders the template, and sets up context
+ * for nested slots to access the saved content.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+import { EffectScope } from '../reactivity.js';
+/**
+ * Saved slot content for an element.
+ *
+ * @internal
+ */
+export interface SlotContent {
+    /** Content by slot name. 'default' for unnamed content. */
+    slots: Map<string, string>;
+}
+/**
+ * Get saved slot content for an element.
+ *
+ * @internal
+ */
+export declare function getSavedContent(el: Element): SlotContent | undefined;
+/**
+ * Find the nearest ancestor with saved content (the template element).
+ *
+ * @internal
+ */
+export declare function findTemplateAncestor(el: Element): Element | null;
+/**
+ * Template directive for rendering reusable templates.
+ *
+ * @remarks
+ * Fetches a template by name and replaces the element's content.
+ * Children are saved for slot transclusion before replacement.
+ *
+ * @example
+ * ```html
+ * <div c-template="dialog">
+ *   <span slot="header">Title</span>
+ *   <p>Body content</p>
+ * </div>
+ * ```
+ */
+export declare const template: Directive<['$expr', '$element', '$templates']>;
+/**
+ * Get the effect scope for an element.
+ *
+ * @internal
+ */
+export declare function getElementScope(el: Element): EffectScope | undefined;

package/dist/directives/template.js

@@ -0,0 +1,147 @@
+/**
+ * Template directive for rendering reusable templates.
+ *
+ * @remarks
+ * Saves the element's children for slot transclusion,
+ * fetches and renders the template, and sets up context
+ * for nested slots to access the saved content.
+ *
+ * @packageDocumentation
+ */
+import { directive, DirectivePriority } from '../types.js';
+import { createEffectScope } from '../reactivity.js';
+/** WeakMap storing saved children per element. */
+const savedContent = new WeakMap();
+/** WeakMap storing effect scopes per element for cleanup. */
+const elementScopes = new WeakMap();
+/** Set tracking which templates are currently rendering (cycle detection). */
+const renderingChain = new WeakMap();
+/**
+ * Get saved slot content for an element.
+ *
+ * @internal
+ */
+export function getSavedContent(el) {
+    return savedContent.get(el);
+}
+/**
+ * Find the nearest ancestor with saved content (the template element).
+ *
+ * @internal
+ */
+export function findTemplateAncestor(el) {
+    let current = el.parentElement;
+    while (current) {
+        if (savedContent.has(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * Check if a node is an Element.
+ *
+ * @internal
+ */
+function isElement(node) {
+    return node.nodeType === 1;
+}
+/**
+ * Extract slot content from an element's children.
+ *
+ * @internal
+ */
+function extractSlotContent(el) {
+    const slots = new Map();
+    const defaultParts = [];
+    for (const child of Array.from(el.childNodes)) {
+        if (isElement(child) && child.hasAttribute('slot')) {
+            const slotName = child.getAttribute('slot');
+            const existing = slots.get(slotName) ?? '';
+            slots.set(slotName, existing + child.outerHTML);
+        }
+        else if (isElement(child)) {
+            defaultParts.push(child.outerHTML);
+        }
+        else if (child.nodeType === 3) { // TEXT_NODE
+            const text = child.textContent;
+            if (text.trim()) {
+                defaultParts.push(text);
+            }
+        }
+    }
+    if (defaultParts.length > 0) {
+        slots.set('default', defaultParts.join(''));
+    }
+    return slots;
+}
+/**
+ * Template directive for rendering reusable templates.
+ *
+ * @remarks
+ * Fetches a template by name and replaces the element's content.
+ * Children are saved for slot transclusion before replacement.
+ *
+ * @example
+ * ```html
+ * <div c-template="dialog">
+ *   <span slot="header">Title</span>
+ *   <p>Body content</p>
+ * </div>
+ * ```
+ */
+export const template = async function template($expr, $element, $templates) {
+    const templateName = String($expr);
+    // Clean up previous render if re-rendering
+    const prevScope = elementScopes.get($element);
+    if (prevScope) {
+        prevScope.stop();
+        // Clear the element's own chain since we're starting fresh
+        renderingChain.delete($element);
+    }
+    // Cycle detection - only inherit from ancestors
+    let chain;
+    let parent = $element.parentElement;
+    while (parent) {
+        const parentChain = renderingChain.get(parent);
+        if (parentChain) {
+            chain = new Set(parentChain);
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    chain = chain ?? new Set();
+    if (chain.has(templateName)) {
+        console.error(`Cycle detected: template "${templateName}" is already being rendered`);
+        return;
+    }
+    // Save children for slots
+    const slotContent = {
+        slots: extractSlotContent($element)
+    };
+    savedContent.set($element, slotContent);
+    // Track this template in the chain
+    const newChain = new Set(chain);
+    newChain.add(templateName);
+    renderingChain.set($element, newChain);
+    // Create effect scope for this element's descendants
+    const scope = createEffectScope();
+    elementScopes.set($element, scope);
+    // Fetch and render template
+    const html = await $templates.get(templateName);
+    $element.innerHTML = html;
+    // Note: MutationObserver will process the new children
+};
+template.$inject = ['$expr', '$element', '$templates'];
+template.transclude = true;
+template.priority = DirectivePriority.TEMPLATE;
+directive('c-template', template);
+/**
+ * Get the effect scope for an element.
+ *
+ * @internal
+ */
+export function getElementScope(el) {
+    return elementScopes.get(el);
+}

package/dist/directives/text.d.ts

@@ -0,0 +1,15 @@
+import { Directive } from '../types.js';
+/**
+ * Set element's text content from an expression.
+ *
+ * @remarks
+ * Evaluates the expression and sets the element's `textContent`.
+ * Safe from XSS as it doesn't interpret HTML.
+ *
+ * @example
+ * ```html
+ * <span c-text="user.name"></span>
+ * <span c-text="'Hello, ' + user.name + '!'"></span>
+ * ```
+ */
+export declare const text: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/text.js

@@ -0,0 +1,18 @@
+import { directive } from '../types.js';
+/**
+ * Set element's text content from an expression.
+ *
+ * @remarks
+ * Evaluates the expression and sets the element's `textContent`.
+ * Safe from XSS as it doesn't interpret HTML.
+ *
+ * @example
+ * ```html
+ * <span c-text="user.name"></span>
+ * <span c-text="'Hello, ' + user.name + '!'"></span>
+ * ```
+ */
+export const text = function text($expr, $element, $eval) {
+    $element.textContent = String($eval($expr) ?? '');
+};
+directive('c-text', text);

package/dist/expression.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Expression parsing utilities.
+ *
+ * @remarks
+ * Parses expression strings (from HTML attributes) to find root identifiers.
+ * Used for reactive dependency tracking - only access state keys that
+ * the expression actually references.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Find root identifiers in an expression.
+ *
+ * @remarks
+ * These are the top-level variable references that need to come from state.
+ * Used to enable precise reactive dependency tracking.
+ *
+ * @param expr - The expression string to parse
+ * @returns Array of root identifier names
+ *
+ * @example
+ * ```ts
+ * findRoots('user.name')                    // ['user']
+ * findRoots('user.name + item.count')       // ['user', 'item']
+ * findRoots('"hello.world"')                // []
+ * findRoots('items.filter(x => x.active)')  // ['items', 'x']
+ * ```
+ */
+export declare function findRoots(expr: string): string[];
+/**
+ * A segment of parsed interpolation template.
+ */
+export interface Segment {
+    /** Segment type: static text or expression */
+    type: 'static' | 'expr';
+    /** The segment value */
+    value: string;
+}
+/**
+ * Parse interpolation syntax in a string.
+ *
+ * @remarks
+ * Splits a template string with `{{ expr }}` markers into segments
+ * of static text and expressions. Used by directives like c-href
+ * that support inline interpolation.
+ *
+ * @param template - The template string with interpolation markers
+ * @returns Array of segments
+ *
+ * @example
+ * ```ts
+ * parseInterpolation('/users/{{ user.id }}/profile')
+ * // [
+ * //   { type: 'static', value: '/users/' },
+ * //   { type: 'expr', value: 'user.id' },
+ * //   { type: 'static', value: '/profile' }
+ * // ]
+ * ```
+ */
+export declare function parseInterpolation(template: string): Segment[];