gonia 0.0.1

package/dist/expression.js

@@ -0,0 +1,96 @@
+/**
+ * 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
+ */
+const JS_KEYWORDS = new Set([
+    'true', 'false', 'null', 'undefined', 'this',
+    'typeof', 'instanceof', 'new', 'in', 'of',
+    'if', 'else', 'for', 'while', 'do', 'switch',
+    'case', 'break', 'continue', 'return', 'throw',
+    'try', 'catch', 'finally', 'delete', 'void',
+    'var', 'let', 'const', 'function', 'class',
+    'async', 'await', 'yield', 'import', 'export',
+    'default', 'extends', 'super', 'static',
+    'Math', 'Number', 'String', 'Boolean', 'Array', 'Object',
+    'Date', 'JSON', 'console', 'window', 'document'
+]);
+/**
+ * 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 function findRoots(expr) {
+    const cleaned = expr
+        .replace(/'(?:[^'\\]|\\.)*'/g, '""')
+        .replace(/"(?:[^"\\]|\\.)*"/g, '""')
+        .replace(/`(?:[^`\\$]|\\.|\$(?!\{))*`/g, '""');
+    const matches = cleaned.match(/(?<![.\w$])\b[a-zA-Z_$][a-zA-Z0-9_$]*\b/g) || [];
+    const roots = [...new Set(matches.filter(m => !JS_KEYWORDS.has(m)))];
+    return roots;
+}
+/**
+ * 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 function parseInterpolation(template) {
+    const segments = [];
+    const regex = /\{\{\s*(.*?)\s*\}\}/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = regex.exec(template)) !== null) {
+        if (match.index > lastIndex) {
+            segments.push({
+                type: 'static',
+                value: template.slice(lastIndex, match.index)
+            });
+        }
+        segments.push({
+            type: 'expr',
+            value: match[1]
+        });
+        lastIndex = regex.lastIndex;
+    }
+    if (lastIndex < template.length) {
+        segments.push({
+            type: 'static',
+            value: template.slice(lastIndex)
+        });
+    }
+    return segments;
+}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Cubist.js - A modern framework inspired by AngularJS 1.
+ *
+ * @remarks
+ * SSR-first design with HTML attributes as directives.
+ * Fine-grained reactivity without virtual DOM diffing.
+ *
+ * @packageDocumentation
+ */
+export { Mode, Expression, Context, Directive, directive, getDirective, getDirectiveNames, clearDirectives } from './types.js';
+export type { DirectiveMeta } from './types.js';
+export { createContext, createChildContext } from './context.js';
+export { reactive, effect, createScope, createEffectScope } from './reactivity.js';
+export type { EffectScope } from './reactivity.js';
+export { createTemplateRegistry, createMemoryRegistry, createServerRegistry } from './templates.js';
+export type { TemplateRegistry } from './templates.js';
+export { findRoots, parseInterpolation } from './expression.js';
+export { getInjectables } from './inject.js';
+export * as directives from './directives/index.js';

package/dist/index.js

@@ -0,0 +1,16 @@
+/**
+ * Cubist.js - A modern framework inspired by AngularJS 1.
+ *
+ * @remarks
+ * SSR-first design with HTML attributes as directives.
+ * Fine-grained reactivity without virtual DOM diffing.
+ *
+ * @packageDocumentation
+ */
+export { Mode, directive, getDirective, getDirectiveNames, clearDirectives } from './types.js';
+export { createContext, createChildContext } from './context.js';
+export { reactive, effect, createScope, createEffectScope } from './reactivity.js';
+export { createTemplateRegistry, createMemoryRegistry, createServerRegistry } from './templates.js';
+export { findRoots, parseInterpolation } from './expression.js';
+export { getInjectables } from './inject.js';
+export * as directives from './directives/index.js';

package/dist/inject.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Dependency injection utilities.
+ *
+ * @remarks
+ * Supports two patterns:
+ * 1. Explicit `$inject` array (minification-safe, production)
+ * 2. Function parameter parsing (dev convenience, breaks when minified)
+ *
+ * Build tools should auto-generate `$inject` arrays for production builds,
+ * similar to how ngAnnotate worked with AngularJS.
+ *
+ * @packageDocumentation
+ */
+/**
+ * A function with optional `$inject` annotation.
+ */
+interface InjectableFunction extends Function {
+    $inject?: readonly string[];
+}
+/**
+ * Get the list of injectable dependencies for a function.
+ *
+ * @remarks
+ * Checks for explicit `$inject` first, falls back to parsing params.
+ * In production, always use `$inject` to survive minification.
+ *
+ * @param fn - The function to inspect
+ * @returns Array of dependency names
+ *
+ * @example
+ * ```ts
+ * // Development - parsed from params
+ * const myDirective = (expr, ctx, el, http, userService) => {};
+ * getInjectables(myDirective); // ['expr', 'ctx', 'el', 'http', 'userService']
+ *
+ * // Production - explicit annotation
+ * myDirective.$inject = ['http', 'userService'];
+ * getInjectables(myDirective); // ['http', 'userService']
+ * ```
+ */
+export declare function getInjectables(fn: InjectableFunction): string[];
+export {};

package/dist/inject.js

@@ -0,0 +1,63 @@
+/**
+ * Dependency injection utilities.
+ *
+ * @remarks
+ * Supports two patterns:
+ * 1. Explicit `$inject` array (minification-safe, production)
+ * 2. Function parameter parsing (dev convenience, breaks when minified)
+ *
+ * Build tools should auto-generate `$inject` arrays for production builds,
+ * similar to how ngAnnotate worked with AngularJS.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Get the list of injectable dependencies for a function.
+ *
+ * @remarks
+ * Checks for explicit `$inject` first, falls back to parsing params.
+ * In production, always use `$inject` to survive minification.
+ *
+ * @param fn - The function to inspect
+ * @returns Array of dependency names
+ *
+ * @example
+ * ```ts
+ * // Development - parsed from params
+ * const myDirective = (expr, ctx, el, http, userService) => {};
+ * getInjectables(myDirective); // ['expr', 'ctx', 'el', 'http', 'userService']
+ *
+ * // Production - explicit annotation
+ * myDirective.$inject = ['http', 'userService'];
+ * getInjectables(myDirective); // ['http', 'userService']
+ * ```
+ */
+export function getInjectables(fn) {
+    if ('$inject' in fn && Array.isArray(fn.$inject)) {
+        return fn.$inject;
+    }
+    return parseFunctionParams(fn);
+}
+/**
+ * Parse function parameters from function.toString().
+ *
+ * @remarks
+ * Handles regular functions, arrow functions, async functions,
+ * and default parameter values.
+ *
+ * @internal
+ */
+function parseFunctionParams(fn) {
+    const str = fn.toString();
+    const match = str.match(/^[^(]*\(([^)]*)\)/);
+    if (!match)
+        return [];
+    const params = match[1];
+    if (!params.trim())
+        return [];
+    return params
+        .split(',')
+        .map(p => p.trim())
+        .map(p => p.replace(/\s*=.*$/, ''))
+        .filter(Boolean);
+}

package/dist/providers.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Context and DI provider system for sharing state and services across directive descendants.
+ *
+ * @packageDocumentation
+ */
+import { Directive } from './types.js';
+/**
+ * Get or create local state for an element.
+ *
+ * @remarks
+ * Each directive instance gets its own isolated state object.
+ * The state is reactive.
+ *
+ * @param el - The element to get state for
+ * @returns A reactive state object
+ *
+ * @internal
+ */
+export declare function getLocalState(el: Element): Record<string, unknown>;
+/**
+ * Register a context provider for an element.
+ *
+ * @remarks
+ * Called after a directive with `$context` has executed.
+ * Stores the directive and its state so descendants can find it.
+ *
+ * @param el - The element providing context
+ * @param directive - The directive that provides context
+ * @param state - The directive's local state
+ *
+ * @internal
+ */
+export declare function registerProvider(el: Element, directive: Directive, state: Record<string, unknown>): void;
+/**
+ * Register DI providers for an element.
+ *
+ * @remarks
+ * Called when a directive with `provide` option is processed.
+ * Stores the provider map so descendants can resolve from it.
+ *
+ * @param el - The element providing DI overrides
+ * @param provideMap - Map of name to value
+ *
+ * @internal
+ */
+export declare function registerDIProviders(el: Element, provideMap: Record<string, unknown>): void;
+/**
+ * Resolve a DI provider value from ancestor elements.
+ *
+ * @remarks
+ * Walks up the DOM tree to find the nearest ancestor with a
+ * `provide` map containing the requested name.
+ *
+ * @param el - The element requesting the value
+ * @param name - The name to look up
+ * @returns The provided value, or undefined if not found
+ *
+ * @internal
+ */
+export declare function resolveFromDIProviders(el: Element, name: string): unknown | undefined;
+/**
+ * Resolve a context value from ancestor elements.
+ *
+ * @remarks
+ * Walks up the DOM tree to find the nearest ancestor whose
+ * directive declares `$context` containing the requested name.
+ *
+ * @param el - The element requesting the value
+ * @param name - The name to look up
+ * @returns The provider's state, or undefined if not found
+ *
+ * @internal
+ */
+export declare function resolveFromProviders(el: Element, name: string): Record<string, unknown> | undefined;
+/**
+ * Clear local state for an element.
+ *
+ * @remarks
+ * Called when an element is removed or re-rendered.
+ *
+ * @param el - The element to clear state for
+ *
+ * @internal
+ */
+export declare function clearLocalState(el: Element): void;
+/**
+ * Clear providers for an element.
+ *
+ * @remarks
+ * Called when an element is removed or re-rendered.
+ *
+ * @param el - The element to clear providers for
+ *
+ * @internal
+ */
+export declare function clearProvider(el: Element): void;

package/dist/providers.js

@@ -0,0 +1,146 @@
+/**
+ * Context and DI provider system for sharing state and services across directive descendants.
+ *
+ * @packageDocumentation
+ */
+import { reactive } from './reactivity.js';
+/**
+ * Local state stored per element.
+ *
+ * @internal
+ */
+const localStates = new WeakMap();
+const contextProviders = new WeakMap();
+/**
+ * DI provider maps stored per element (provide option).
+ * Maps element -> { name: value }
+ *
+ * @internal
+ */
+const diProviders = new WeakMap();
+/**
+ * Get or create local state for an element.
+ *
+ * @remarks
+ * Each directive instance gets its own isolated state object.
+ * The state is reactive.
+ *
+ * @param el - The element to get state for
+ * @returns A reactive state object
+ *
+ * @internal
+ */
+export function getLocalState(el) {
+    let state = localStates.get(el);
+    if (!state) {
+        state = reactive({});
+        localStates.set(el, state);
+    }
+    return state;
+}
+/**
+ * Register a context provider for an element.
+ *
+ * @remarks
+ * Called after a directive with `$context` has executed.
+ * Stores the directive and its state so descendants can find it.
+ *
+ * @param el - The element providing context
+ * @param directive - The directive that provides context
+ * @param state - The directive's local state
+ *
+ * @internal
+ */
+export function registerProvider(el, directive, state) {
+    contextProviders.set(el, { directive, state });
+}
+/**
+ * Register DI providers for an element.
+ *
+ * @remarks
+ * Called when a directive with `provide` option is processed.
+ * Stores the provider map so descendants can resolve from it.
+ *
+ * @param el - The element providing DI overrides
+ * @param provideMap - Map of name to value
+ *
+ * @internal
+ */
+export function registerDIProviders(el, provideMap) {
+    diProviders.set(el, provideMap);
+}
+/**
+ * Resolve a DI provider value from ancestor elements.
+ *
+ * @remarks
+ * Walks up the DOM tree to find the nearest ancestor with a
+ * `provide` map containing the requested name.
+ *
+ * @param el - The element requesting the value
+ * @param name - The name to look up
+ * @returns The provided value, or undefined if not found
+ *
+ * @internal
+ */
+export function resolveFromDIProviders(el, name) {
+    let current = el.parentElement;
+    while (current) {
+        const provideMap = diProviders.get(current);
+        if (provideMap && name in provideMap) {
+            return provideMap[name];
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+/**
+ * Resolve a context value from ancestor elements.
+ *
+ * @remarks
+ * Walks up the DOM tree to find the nearest ancestor whose
+ * directive declares `$context` containing the requested name.
+ *
+ * @param el - The element requesting the value
+ * @param name - The name to look up
+ * @returns The provider's state, or undefined if not found
+ *
+ * @internal
+ */
+export function resolveFromProviders(el, name) {
+    let current = el.parentElement;
+    while (current) {
+        const info = contextProviders.get(current);
+        if (info?.directive.$context?.includes(name)) {
+            return info.state;
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+/**
+ * Clear local state for an element.
+ *
+ * @remarks
+ * Called when an element is removed or re-rendered.
+ *
+ * @param el - The element to clear state for
+ *
+ * @internal
+ */
+export function clearLocalState(el) {
+    localStates.delete(el);
+}
+/**
+ * Clear providers for an element.
+ *
+ * @remarks
+ * Called when an element is removed or re-rendered.
+ *
+ * @param el - The element to clear providers for
+ *
+ * @internal
+ */
+export function clearProvider(el) {
+    contextProviders.delete(el);
+    diProviders.delete(el);
+}

package/dist/reactivity.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Fine-grained reactivity system using Proxies.
+ *
+ * @remarks
+ * Each directive becomes its own effect, tracking only the state it accesses.
+ * Changes trigger only the affected effects - no component re-renders, no diffing.
+ *
+ * @packageDocumentation
+ */
+type Effect = () => void;
+/**
+ * A scope that groups effects for collective disposal.
+ *
+ * @remarks
+ * Used for cleanup when elements are removed or re-rendered.
+ * All effects created within a scope can be stopped at once.
+ */
+export interface EffectScope {
+    /**
+     * Run a function within this scope.
+     * Any effects created will be tracked by this scope.
+     */
+    run<T>(fn: () => T): T;
+    /**
+     * Stop all effects in this scope.
+     */
+    stop(): void;
+    /**
+     * Whether the scope has been stopped.
+     */
+    active: boolean;
+}
+export declare function createEffectScope(): EffectScope;
+/**
+ * Make an object deeply reactive.
+ *
+ * @remarks
+ * Property access is tracked when inside an effect. Mutations trigger
+ * all effects that depend on the changed property.
+ *
+ * @typeParam T - Object type
+ * @param target - The object to make reactive
+ * @returns A reactive proxy of the object
+ *
+ * @example
+ * ```ts
+ * const state = reactive({ count: 0 });
+ * effect(() => console.log(state.count));
+ * state.count = 1; // logs: 1
+ * ```
+ */
+export declare function reactive<T extends object>(target: T): T;
+/**
+ * Create a reactive effect.
+ *
+ * @remarks
+ * The function runs immediately, tracking dependencies.
+ * It re-runs automatically whenever those dependencies change.
+ *
+ * @param fn - The effect function to run
+ * @returns A cleanup function to stop the effect
+ *
+ * @example
+ * ```ts
+ * const state = reactive({ count: 0 });
+ * const stop = effect(() => {
+ *   console.log('Count:', state.count);
+ * });
+ * state.count = 1; // logs: Count: 1
+ * stop(); // effect no longer runs
+ * ```
+ */
+export declare function effect(fn: Effect): () => void;
+/**
+ * Create a child reactive scope.
+ *
+ * @remarks
+ * Used by structural directives like c-for to create per-item contexts.
+ * The child scope inherits from the parent, with additions taking precedence.
+ *
+ * @typeParam T - Parent object type
+ * @param parent - The parent reactive object
+ * @param additions - Additional properties for this scope
+ * @returns A new reactive scope that inherits from parent
+ *
+ * @example
+ * ```ts
+ * const parent = reactive({ items: [1, 2, 3] });
+ * const child = createScope(parent, { item: 1, index: 0 });
+ * child.item;  // 1
+ * child.items; // [1, 2, 3] (from parent)
+ * ```
+ */
+export declare function createScope<T extends object>(parent: T, additions: Record<string, unknown>): T & Record<string, unknown>;
+export {};