gonia 0.0.1

package/dist/context.js

@@ -0,0 +1,69 @@
+/**
+ * Context creation and management.
+ *
+ * @packageDocumentation
+ */
+import { findRoots } from './expression.js';
+/**
+ * Create an evaluation context for directives.
+ *
+ * @remarks
+ * Uses {@link findRoots} to only access state keys that the expression
+ * actually references, enabling precise dependency tracking with the
+ * reactive system.
+ *
+ * Supports scoped values via `get()` for things like $component, $renderingChain.
+ * Create child contexts with `child()` for nested scopes.
+ *
+ * @param mode - Execution mode (server or client)
+ * @param state - The reactive state object
+ * @param scope - Optional scoped values (for context-specific data)
+ * @returns A new context
+ *
+ * @example
+ * ```ts
+ * const state = reactive({ user: { name: 'Alice' } });
+ * const ctx = createContext(Mode.CLIENT, state);
+ * ctx.eval('user.name' as Expression); // 'Alice'
+ *
+ * const childCtx = ctx.child({ $component: el });
+ * childCtx.get('$component'); // el
+ * ```
+ */
+export function createContext(mode, state, scope = {}) {
+    const ctx = {
+        mode,
+        eval(expr) {
+            const roots = findRoots(expr);
+            const fn = new Function(...roots, `return (${expr})`);
+            const values = roots.map(r => {
+                if (r in scope) {
+                    return scope[r];
+                }
+                return state[r];
+            });
+            return fn(...values);
+        },
+        get(key) {
+            if (key in scope) {
+                return scope[key];
+            }
+            if (key in state) {
+                return state[key];
+            }
+            return undefined;
+        },
+        child(additions) {
+            return createContext(mode, state, { ...scope, ...additions });
+        }
+    };
+    return ctx;
+}
+/**
+ * Create a child context with additional bindings.
+ *
+ * @deprecated Use ctx.child() instead
+ */
+export function createChildContext(parent, additions) {
+    return parent.child(additions);
+}

package/dist/directives/class.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Dynamic class binding directive.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+/**
+ * Bind classes dynamically based on an expression.
+ *
+ * @remarks
+ * Evaluates the expression to get a `{ className: boolean }` object.
+ * Classes with truthy values are added, falsy values are removed.
+ * Static classes from the HTML are preserved.
+ *
+ * @example
+ * ```html
+ * <div c-class="{ active: isActive, 'text-red': hasError }">
+ * <div c-class="{ [dynamicClass]: true }">
+ * ```
+ */
+export declare const cclass: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/class.js

@@ -0,0 +1,42 @@
+/**
+ * Dynamic class binding directive.
+ *
+ * @packageDocumentation
+ */
+import { directive } from '../types.js';
+import { effect } from '../reactivity.js';
+/**
+ * Bind classes dynamically based on an expression.
+ *
+ * @remarks
+ * Evaluates the expression to get a `{ className: boolean }` object.
+ * Classes with truthy values are added, falsy values are removed.
+ * Static classes from the HTML are preserved.
+ *
+ * @example
+ * ```html
+ * <div c-class="{ active: isActive, 'text-red': hasError }">
+ * <div c-class="{ [dynamicClass]: true }">
+ * ```
+ */
+export const cclass = function cclass($expr, $element, $eval) {
+    effect(() => {
+        const classObj = $eval($expr);
+        if (classObj === null || classObj === undefined) {
+            return;
+        }
+        if (typeof classObj !== 'object') {
+            return;
+        }
+        for (const [className, shouldAdd] of Object.entries(classObj)) {
+            if (shouldAdd) {
+                $element.classList.add(className);
+            }
+            else {
+                $element.classList.remove(className);
+            }
+        }
+    });
+};
+cclass.$inject = ['$expr', '$element', '$eval'];
+directive('c-class', cclass);

package/dist/directives/for.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Loop/iteration directive.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+/** Attribute used to mark elements processed by c-for */
+export declare const FOR_PROCESSED_ATTR = "data-c-for-processed";
+/** Attribute used to mark template content that should be skipped during SSR */
+export declare const FOR_TEMPLATE_ATTR = "data-c-for-template";
+/**
+ * Iterate over array or object items.
+ *
+ * @remarks
+ * Creates a copy of the template element for each item in the iterable.
+ * Supports arrays and objects. For arrays, provides item and index.
+ * For objects, provides value and key.
+ *
+ * On server: wraps template in <template> element, renders items after it.
+ * On client: finds <template c-for>, extracts template, sets up reactive loop.
+ *
+ * @example
+ * ```html
+ * <li c-for="item in items" c-text="item.name"></li>
+ * <li c-for="(item, index) in items" c-text="index + ': ' + item.name"></li>
+ * <div c-for="(value, key) in object" c-text="key + ': ' + value"></div>
+ * ```
+ */
+export declare const cfor: Directive<['$expr', '$element', '$eval', '$state', '$mode']>;

package/dist/directives/for.js

@@ -0,0 +1,265 @@
+/**
+ * Loop/iteration directive.
+ *
+ * @packageDocumentation
+ */
+import { directive, DirectivePriority, Mode } from '../types.js';
+import { effect, createEffectScope, createScope } from '../reactivity.js';
+import { createContext } from '../context.js';
+/**
+ * Parse a c-for expression.
+ *
+ * Supports:
+ * - `item in items`
+ * - `(item, index) in items`
+ * - `(value, key) in object`
+ */
+function parseForExpression(expr) {
+    const trimmed = expr.trim();
+    // Match "(item, index) in iterable" or "item in iterable"
+    const match = trimmed.match(/^\(?([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*,\s*([a-zA-Z_$][a-zA-Z0-9_$]*))?\)?\s+in\s+(.+)$/);
+    if (!match) {
+        return null;
+    }
+    return {
+        itemName: match[1],
+        indexName: match[2] || null,
+        iterableName: match[3].trim()
+    };
+}
+/** Attribute used to mark elements processed by c-for */
+export const FOR_PROCESSED_ATTR = 'data-c-for-processed';
+/** Attribute used to mark template content that should be skipped during SSR */
+export const FOR_TEMPLATE_ATTR = 'data-c-for-template';
+/**
+ * Process directives on a cloned element within a child scope.
+ */
+function processClonedElement(el, parentState, scopeAdditions, mode) {
+    // Mark this element as processed by c-for so hydrate skips it
+    el.setAttribute(FOR_PROCESSED_ATTR, '');
+    const childScope = createScope(parentState, scopeAdditions);
+    const childCtx = createContext(mode, childScope);
+    // Process c-text directives
+    const textAttr = el.getAttribute('c-text');
+    if (textAttr) {
+        const value = childCtx.eval(textAttr);
+        el.textContent = String(value ?? '');
+    }
+    // Process c-class directives
+    const classAttr = el.getAttribute('c-class');
+    if (classAttr) {
+        const classObj = childCtx.eval(classAttr);
+        if (classObj && typeof classObj === 'object') {
+            for (const [className, shouldAdd] of Object.entries(classObj)) {
+                if (shouldAdd) {
+                    el.classList.add(className);
+                }
+                else {
+                    el.classList.remove(className);
+                }
+            }
+        }
+    }
+    // Process c-show directives
+    const showAttr = el.getAttribute('c-show');
+    if (showAttr) {
+        const value = childCtx.eval(showAttr);
+        el.style.display = value ? '' : 'none';
+    }
+    // Process c-on directives (format: "event: handler") - client only
+    if (mode === Mode.CLIENT) {
+        const onAttr = el.getAttribute('c-on');
+        if (onAttr) {
+            setupEventHandler(el, onAttr, childCtx, childScope);
+        }
+    }
+    // Process children recursively
+    for (const child of el.children) {
+        processClonedElement(child, childScope, {}, mode);
+    }
+}
+/**
+ * Set up an event handler on an element.
+ * Expression format: "event: handler"
+ */
+function setupEventHandler(el, expr, ctx, state) {
+    const colonIdx = expr.indexOf(':');
+    if (colonIdx === -1) {
+        console.error(`Invalid c-on expression: ${expr}. Expected "event: handler"`);
+        return;
+    }
+    const eventName = expr.slice(0, colonIdx).trim();
+    const handlerExpr = expr.slice(colonIdx + 1).trim();
+    const handler = (event) => {
+        const result = ctx.eval(handlerExpr);
+        if (typeof result === 'function') {
+            result.call(state, event);
+        }
+    };
+    el.addEventListener(eventName, handler);
+}
+/**
+ * Render loop items (used by both server and client).
+ */
+function renderItems(template, parent, insertAfterNode, parsed, $eval, $state, mode) {
+    const { itemName, indexName, iterableName } = parsed;
+    const iterable = $eval(iterableName);
+    const renderedElements = [];
+    if (iterable == null) {
+        return renderedElements;
+    }
+    let items;
+    if (Array.isArray(iterable)) {
+        items = iterable.map((item, index) => [item, index]);
+    }
+    else if (typeof iterable === 'object') {
+        items = Object.entries(iterable).map(([k, v]) => [v, k]);
+    }
+    else {
+        return renderedElements;
+    }
+    let insertAfter = insertAfterNode;
+    const length = items.length;
+    for (let i = 0; i < length; i++) {
+        const [value, key] = items[i];
+        const clone = template.cloneNode(true);
+        // Remove template marker from clone (it's not a template, it's a rendered item)
+        clone.removeAttribute(FOR_TEMPLATE_ATTR);
+        const scopeAdditions = {
+            [itemName]: value,
+            $index: i,
+            $first: i === 0,
+            $last: i === length - 1,
+            $even: i % 2 === 0,
+            $odd: i % 2 === 1
+        };
+        if (indexName) {
+            scopeAdditions[indexName] = key;
+        }
+        processClonedElement(clone, $state, scopeAdditions, mode);
+        if (insertAfter.nextSibling) {
+            parent.insertBefore(clone, insertAfter.nextSibling);
+        }
+        else {
+            parent.appendChild(clone);
+        }
+        renderedElements.push(clone);
+        insertAfter = clone;
+    }
+    return renderedElements;
+}
+/**
+ * Remove SSR-rendered items (siblings with FOR_PROCESSED_ATTR after template).
+ */
+function removeSSRItems(templateEl) {
+    let sibling = templateEl.nextElementSibling;
+    while (sibling && sibling.hasAttribute(FOR_PROCESSED_ATTR)) {
+        const next = sibling.nextElementSibling;
+        sibling.remove();
+        sibling = next;
+    }
+}
+/**
+ * Iterate over array or object items.
+ *
+ * @remarks
+ * Creates a copy of the template element for each item in the iterable.
+ * Supports arrays and objects. For arrays, provides item and index.
+ * For objects, provides value and key.
+ *
+ * On server: wraps template in <template> element, renders items after it.
+ * On client: finds <template c-for>, extracts template, sets up reactive loop.
+ *
+ * @example
+ * ```html
+ * <li c-for="item in items" c-text="item.name"></li>
+ * <li c-for="(item, index) in items" c-text="index + ': ' + item.name"></li>
+ * <div c-for="(value, key) in object" c-text="key + ': ' + value"></div>
+ * ```
+ */
+export const cfor = function cfor($expr, $element, $eval, $state, $mode) {
+    const parsed = parseForExpression($expr);
+    if (!parsed) {
+        console.error(`Invalid c-for expression: ${$expr}`);
+        return;
+    }
+    const parent = $element.parentNode;
+    if (!parent) {
+        return;
+    }
+    const isTemplateElement = $element.tagName === 'TEMPLATE';
+    // Server-side rendering
+    if ($mode === Mode.SERVER) {
+        // Create a <template> element to hold the original
+        const templateWrapper = $element.ownerDocument.createElement('template');
+        templateWrapper.setAttribute('c-for', $expr);
+        // Clone the original element (without c-for attr) into the template
+        const templateContent = $element.cloneNode(true);
+        templateContent.removeAttribute('c-for');
+        // Mark as template content so render loop skips it
+        templateContent.setAttribute(FOR_TEMPLATE_ATTR, '');
+        // Append directly to template element (linkedom doesn't support .content)
+        // Browsers will automatically move this to .content when parsing
+        templateWrapper.appendChild(templateContent);
+        // Replace original with template wrapper
+        parent.replaceChild(templateWrapper, $element);
+        // Render items after the template
+        renderItems(templateContent, parent, templateWrapper, parsed, $eval, $state, $mode);
+        return;
+    }
+    // Client-side: check if hydrating from SSR or fresh render
+    if (isTemplateElement) {
+        // Hydrating from SSR: element is <template c-for="...">
+        const templateWrapper = $element;
+        const templateContent = templateWrapper.content.firstElementChild;
+        if (!templateContent) {
+            console.error('c-for template element has no content');
+            return;
+        }
+        // Remove SSR-rendered items
+        removeSSRItems(templateWrapper);
+        // Set up reactive loop
+        let renderedElements = [];
+        let scope = null;
+        effect(() => {
+            if (scope) {
+                scope.stop();
+            }
+            for (const el of renderedElements) {
+                el.remove();
+            }
+            scope = createEffectScope();
+            scope.run(() => {
+                renderedElements = renderItems(templateContent, parent, templateWrapper, parsed, $eval, $state, Mode.CLIENT);
+            });
+        });
+    }
+    else {
+        // Fresh client render: element has c-for attribute directly
+        // Wrap in template element for consistency
+        const templateWrapper = $element.ownerDocument.createElement('template');
+        templateWrapper.setAttribute('c-for', $expr);
+        const templateContent = $element.cloneNode(true);
+        templateContent.removeAttribute('c-for');
+        templateWrapper.content.appendChild(templateContent);
+        parent.replaceChild(templateWrapper, $element);
+        // Set up reactive loop
+        let renderedElements = [];
+        let scope = null;
+        effect(() => {
+            if (scope) {
+                scope.stop();
+            }
+            for (const el of renderedElements) {
+                el.remove();
+            }
+            scope = createEffectScope();
+            scope.run(() => {
+                renderedElements = renderItems(templateContent, parent, templateWrapper, parsed, $eval, $state, Mode.CLIENT);
+            });
+        });
+    }
+};
+cfor.$inject = ['$expr', '$element', '$eval', '$state', '$mode'];
+cfor.priority = DirectivePriority.STRUCTURAL;
+directive('c-for', cfor);

package/dist/directives/html.d.ts

@@ -0,0 +1,16 @@
+import { Directive } from '../types.js';
+/**
+ * Set element's innerHTML from an expression.
+ *
+ * @remarks
+ * Evaluates the expression and sets the element's `innerHTML`.
+ *
+ * @warning Only use with trusted content. User input can lead to XSS attacks.
+ *
+ * @example
+ * ```html
+ * <div c-html="formattedContent"></div>
+ * <div c-html="'<strong>' + title + '</strong>'"></div>
+ * ```
+ */
+export declare const html: Directive<['$expr', '$element', '$eval']>;

package/dist/directives/html.js

@@ -0,0 +1,19 @@
+import { directive } from '../types.js';
+/**
+ * Set element's innerHTML from an expression.
+ *
+ * @remarks
+ * Evaluates the expression and sets the element's `innerHTML`.
+ *
+ * @warning Only use with trusted content. User input can lead to XSS attacks.
+ *
+ * @example
+ * ```html
+ * <div c-html="formattedContent"></div>
+ * <div c-html="'<strong>' + title + '</strong>'"></div>
+ * ```
+ */
+export const html = function html($expr, $element, $eval) {
+    $element.innerHTML = String($eval($expr) ?? '');
+};
+directive('c-html', html);

package/dist/directives/if.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Conditional rendering directive.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+/** Attribute used to mark elements processed by c-if */
+export declare const IF_PROCESSED_ATTR = "data-c-if-processed";
+/**
+ * Conditionally render an element.
+ *
+ * @remarks
+ * Unlike c-show which uses display:none, c-if completely removes
+ * the element from the DOM when the condition is falsy.
+ *
+ * On server: evaluates once and removes element if false.
+ * On client: sets up reactive effect to toggle element.
+ *
+ * @example
+ * ```html
+ * <div c-if="isLoggedIn">Welcome back!</div>
+ * <div c-if="items.length > 0">Has items</div>
+ * ```
+ */
+export declare const cif: Directive<['$expr', '$element', '$eval', '$state', '$mode']>;

package/dist/directives/if.js

@@ -0,0 +1,133 @@
+/**
+ * Conditional rendering directive.
+ *
+ * @packageDocumentation
+ */
+import { directive, DirectivePriority, Mode } from '../types.js';
+import { effect } from '../reactivity.js';
+import { createContext } from '../context.js';
+import { createScope } from '../reactivity.js';
+/** Attribute used to mark elements processed by c-if */
+export const IF_PROCESSED_ATTR = 'data-c-if-processed';
+/**
+ * Process directives on a conditionally rendered element.
+ */
+function processConditionalElement(el, parentState, mode) {
+    el.setAttribute(IF_PROCESSED_ATTR, '');
+    const childScope = createScope(parentState, {});
+    const childCtx = createContext(mode, childScope);
+    // Process c-text directives
+    const textAttr = el.getAttribute('c-text');
+    if (textAttr) {
+        const value = childCtx.eval(textAttr);
+        el.textContent = String(value ?? '');
+    }
+    // Process c-class directives
+    const classAttr = el.getAttribute('c-class');
+    if (classAttr) {
+        const classObj = childCtx.eval(classAttr);
+        if (classObj && typeof classObj === 'object') {
+            for (const [className, shouldAdd] of Object.entries(classObj)) {
+                if (shouldAdd) {
+                    el.classList.add(className);
+                }
+                else {
+                    el.classList.remove(className);
+                }
+            }
+        }
+    }
+    // Process c-show directives
+    const showAttr = el.getAttribute('c-show');
+    if (showAttr) {
+        const value = childCtx.eval(showAttr);
+        el.style.display = value ? '' : 'none';
+    }
+    // Process c-on directives (format: "event: handler") - client only
+    if (mode === Mode.CLIENT) {
+        const onAttr = el.getAttribute('c-on');
+        if (onAttr) {
+            const colonIdx = onAttr.indexOf(':');
+            if (colonIdx !== -1) {
+                const eventName = onAttr.slice(0, colonIdx).trim();
+                const handlerExpr = onAttr.slice(colonIdx + 1).trim();
+                el.addEventListener(eventName, (event) => {
+                    const result = childCtx.eval(handlerExpr);
+                    if (typeof result === 'function') {
+                        result.call(childScope, event);
+                    }
+                });
+            }
+        }
+    }
+    // Process children recursively
+    for (const child of el.children) {
+        processConditionalElement(child, childScope, mode);
+    }
+}
+/**
+ * Conditionally render an element.
+ *
+ * @remarks
+ * Unlike c-show which uses display:none, c-if completely removes
+ * the element from the DOM when the condition is falsy.
+ *
+ * On server: evaluates once and removes element if false.
+ * On client: sets up reactive effect to toggle element.
+ *
+ * @example
+ * ```html
+ * <div c-if="isLoggedIn">Welcome back!</div>
+ * <div c-if="items.length > 0">Has items</div>
+ * ```
+ */
+export const cif = function cif($expr, $element, $eval, $state, $mode) {
+    const parent = $element.parentNode;
+    if (!parent) {
+        return;
+    }
+    // Server-side: evaluate once and remove if false
+    if ($mode === Mode.SERVER) {
+        const condition = $eval($expr);
+        if (!condition) {
+            $element.remove();
+        }
+        else {
+            // Process child directives
+            $element.removeAttribute('c-if');
+            processConditionalElement($element, $state, $mode);
+        }
+        return;
+    }
+    // Client-side: set up reactive effect
+    const placeholder = $element.ownerDocument.createComment(` c-if: ${$expr} `);
+    parent.insertBefore(placeholder, $element);
+    const template = $element.cloneNode(true);
+    template.removeAttribute('c-if');
+    $element.remove();
+    let renderedElement = null;
+    effect(() => {
+        const condition = $eval($expr);
+        if (condition) {
+            if (!renderedElement) {
+                renderedElement = template.cloneNode(true);
+                processConditionalElement(renderedElement, $state, Mode.CLIENT);
+                if (placeholder.nextSibling) {
+                    parent.insertBefore(renderedElement, placeholder.nextSibling);
+                }
+                else {
+                    parent.appendChild(renderedElement);
+                }
+            }
+        }
+        else {
+            if (renderedElement) {
+                renderedElement.remove();
+                renderedElement = null;
+            }
+        }
+    });
+};
+cif.$inject = ['$expr', '$element', '$eval', '$state', '$mode'];
+cif.priority = DirectivePriority.STRUCTURAL;
+directive('c-if', cif);

package/dist/directives/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Built-in directives.
+ *
+ * @packageDocumentation
+ */
+export { text } from './text.js';
+export { html } from './html.js';
+export { show } from './show.js';
+export { template } from './template.js';
+export { slot, processNativeSlot } from './slot.js';
+export { cclass } from './class.js';
+export { model } from './model.js';
+export { on } from './on.js';
+export { cfor } from './for.js';
+export { cif } from './if.js';

package/dist/directives/index.js

@@ -0,0 +1,15 @@
+/**
+ * Built-in directives.
+ *
+ * @packageDocumentation
+ */
+export { text } from './text.js';
+export { html } from './html.js';
+export { show } from './show.js';
+export { template } from './template.js';
+export { slot, processNativeSlot } from './slot.js';
+export { cclass } from './class.js';
+export { model } from './model.js';
+export { on } from './on.js';
+export { cfor } from './for.js';
+export { cif } from './if.js';

package/dist/directives/model.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Two-way binding directive.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from '../types.js';
+/**
+ * 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 declare const model: Directive<['$expr', '$element', '$eval', '$rootState']>;