@relax.js/core 1.0.0

package/dist/lib/html/TableRenderer.d.ts

@@ -0,0 +1,44 @@
+export declare class TableRenderer {
+    private table;
+    private template;
+    private component;
+    private dataMap;
+    private rowMap;
+    IdColumn: string;
+    constructor(table: HTMLTableElement, template: HTMLTemplateElement, idColumn: string, component: HTMLElement);
+    render(data: Record<string, any>[]): void;
+    private clearRows;
+    private renderRow;
+    private populateRow;
+    private attachEventHandlers;
+    update(data: Record<string, any>): void;
+}
+export declare class SortChangeEvent extends CustomEvent<SortColumn[]> {
+    constructor(sortColumns: SortColumn[]);
+}
+type SortDirection = 'asc' | 'desc';
+export type SortColumn = {
+    column: string;
+    direction: SortDirection;
+};
+export declare class TableSorter {
+    private table;
+    private sortColumns;
+    private component;
+    constructor(table: HTMLTableElement, component: HTMLElement);
+    private setupListeners;
+    private toggle;
+    private emit;
+    private updateSortIndicators;
+    getSortColumns(): SortColumn[];
+    clear(): void;
+}
+declare global {
+    interface HTMLTableElementEventMap extends HTMLElementEventMap {
+        'sortchange': SortChangeEvent;
+    }
+    interface HTMLTableElement {
+        addEventListener<K extends keyof HTMLTableElementEventMap>(type: K, listener: (this: HTMLTableElement, ev: HTMLTableElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    }
+}
+export {};

package/dist/lib/html/TreeBinder.d.ts

@@ -0,0 +1,9 @@
+export declare class Template {
+    private readonly template;
+    private readonly bindings;
+    constructor(html: string);
+    render(data: Record<string, any>): HTMLElement;
+    private collectBindings;
+    private getNodeAtPath;
+    private resolveVariable;
+}

package/dist/lib/html/html.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @module html
+ * HTML template engine with update capabilities.
+ * Creates templates that can be re-rendered with new data without recreating DOM nodes.
+ */
+/**
+ * Result of rendering a template.
+ * Provides the DOM fragment and an update function for re-rendering.
+ */
+export interface RenderTemplate {
+    /** The rendered DOM fragment */
+    fragment: DocumentFragment;
+    /** Updates the DOM with new data without recreating elements */
+    update(context: any): void;
+}
+/**
+ * Creates an updateable HTML template using tagged template literals.
+ * Returns an object with the fragment and an update method for efficient re-rendering.
+ *
+ * Supports:
+ * - Template literal substitutions (`${}`)
+ * - Mustache-style bindings (`{{property}}`)
+ * - Pipe transformations (`{{value|uppercase}}`)
+ * - Event handler binding
+ *
+ * @param templateStrings - The static parts of the template literal
+ * @param substitutions - The dynamic values interpolated into the template
+ * @returns A function that takes context and returns a RenderTemplate
+ *
+ * @example
+ * // Create and render a template
+ * const template = html`
+ *     <div class="user">
+ *         <h2>{{name}}</h2>
+ *         <p>{{email}}</p>
+ *         <span>{{createdAt|daysAgo}}</span>
+ *     </div>
+ * `;
+ *
+ * const result = template({ name: 'John', email: 'john@example.com', createdAt: new Date() });
+ * container.appendChild(result.fragment);
+ *
+ * // Later, update with new data
+ * result.update({ name: 'Jane', email: 'jane@example.com', createdAt: new Date() });
+ *
+ * @example
+ * // With event handlers
+ * const row = html`
+ *     <tr>
+ *         <td>{{name}}</td>
+ *         <td><button onclick=${function() { this.edit(this.id) }}>Edit</button></td>
+ *     </tr>
+ * `;
+ */
+export declare function html(templateStrings: TemplateStringsArray, ...substitutions: any[]): (context: any) => RenderTemplate;

package/dist/lib/html/html2.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @module html2
+ * Enhanced HTML template engine with update capabilities.
+ * Creates templates that can be re-rendered with new data without recreating DOM nodes.
+ */
+/**
+ * Result of rendering a template.
+ * Provides the DOM fragment and an update function for re-rendering.
+ */
+export interface RenderTemplate {
+    /** The rendered DOM fragment */
+    fragment: DocumentFragment;
+    /** Updates the DOM with new data without recreating elements */
+    update(context: any): void;
+}
+/**
+ * Creates an updateable HTML template using tagged template literals.
+ * Unlike `html`, this returns an object with an update method for efficient re-rendering.
+ *
+ * Supports:
+ * - Template literal substitutions (`${}`)
+ * - Mustache-style bindings (`{{property}}`)
+ * - Pipe transformations (`{{value|uppercase}}`)
+ * - Event handler binding
+ *
+ * @param templateStrings - The static parts of the template literal
+ * @param substitutions - The dynamic values interpolated into the template
+ * @returns A function that takes context and returns a RenderTemplate
+ *
+ * @example
+ * // Create and render a template
+ * const template = html2`
+ *     <div class="user">
+ *         <h2>{{name}}</h2>
+ *         <p>{{email}}</p>
+ *         <span>{{createdAt|daysAgo}}</span>
+ *     </div>
+ * `;
+ *
+ * const result = template({ name: 'John', email: 'john@example.com', createdAt: new Date() });
+ * container.appendChild(result.fragment);
+ *
+ * // Later, update with new data
+ * result.update({ name: 'Jane', email: 'jane@example.com', createdAt: new Date() });
+ *
+ * @example
+ * // With event handlers
+ * const row = html2`
+ *     <tr>
+ *         <td>{{name}}</td>
+ *         <td><button onclick=${function() { this.edit(this.id) }}>Edit</button></td>
+ *     </tr>
+ * `;
+ */
+export declare function html2(templateStrings: TemplateStringsArray, ...substitutions: any[]): (context: any) => RenderTemplate;

package/dist/lib/html/index.d.ts

@@ -0,0 +1,5 @@
+export { html, RenderTemplate } from './html';
+export { compileTemplate, EngineConfig, CompiledTemplate } from './template';
+export * from '../templates/NodeTemplate';
+export { TableRenderer, TableSorter, SortChangeEvent } from './TableRenderer';
+export type { SortColumn } from './TableRenderer';

package/dist/lib/html/m.d.ts

@@ -0,0 +1,167 @@
+/**
+ * @module m
+ * DOM-based template engine with reactive rendering capabilities.
+ *
+ * Compiles HTML templates with mustache-style expressions into efficient
+ * render functions that update the DOM when data changes.
+ *
+ * **Features:**
+ * - Text interpolation: `{{name}}`, `{{user.profile.email}}`
+ * - Attribute binding: `<div class="{{className}}">`
+ * - Pipes: `{{price | currency}}`, `{{name | uppercase | truncate:20}}`
+ * - Function calls: `{{formatDate(createdAt)}}`, `{{add(5, 3)}}`
+ * - Array indexing: `{{items[0]}}`, `{{users[1].name}}`
+ * - Conditionals: `<div if="isVisible">`, `<div unless="isHidden">`
+ * - Loops: `<li loop="item in items">{{item.name}}</li>`
+ *
+ * @example
+ * // Basic usage
+ * import { compileTemplate } from './m';
+ *
+ * const { content, render } = compileTemplate(`
+ *     <div class="card">
+ *         <h2>{{title}}</h2>
+ *         <p>{{description}}</p>
+ *     </div>
+ * `);
+ *
+ * render({ title: 'Hello', description: 'World' });
+ * document.body.appendChild(content);
+ *
+ * @example
+ * // With pipes and functions
+ * import { createPipeRegistry } from '../pipes';
+ *
+ * const pipeRegistry = createPipeRegistry();
+ * const { content, render } = compileTemplate(`
+ *     <span>{{user.name | uppercase}}</span>
+ *     <span>{{formatDate(user.createdAt)}}</span>
+ * `, { strict: false, pipeRegistry });
+ *
+ * render(
+ *     { user: { name: 'john', createdAt: new Date() } },
+ *     { formatDate: (d) => d.toLocaleDateString() }
+ * );
+ *
+ * @example
+ * // With loops and conditionals
+ * const { content, render } = compileTemplate(`
+ *     <ul>
+ *         <li loop="item in items" if="item.visible">
+ *             {{item.name}}: {{item.price | currency}}
+ *         </li>
+ *     </ul>
+ * `);
+ *
+ * render({ items: [
+ *     { name: 'Apple', price: 1.5, visible: true },
+ *     { name: 'Hidden', price: 0, visible: false }
+ * ]});
+ */
+import { PipeRegistry } from '../pipes';
+/**
+ * Configuration options for the template engine.
+ *
+ * @example
+ * const config: EngineConfig = {
+ *     strict: true,
+ *     onError: (msg) => console.error(msg),
+ *     pipeRegistry: createPipeRegistry()
+ * };
+ */
+export interface EngineConfig {
+    /** When true, throws errors for missing paths/functions. When false, returns empty string. */
+    strict: boolean;
+    /** Optional callback invoked when errors occur, receives formatted error message. */
+    onError?: (msg: string) => void;
+    /** Custom pipe registry for transformations. Defaults to built-in pipes. */
+    pipeRegistry?: PipeRegistry;
+}
+export type Path = string;
+export type TemplateValue = string | number | boolean | null | undefined;
+/**
+ * Data context object passed to render function.
+ * Contains the data values that expressions resolve against.
+ *
+ * @example
+ * const ctx: Context = {
+ *     user: { name: 'John', age: 30 },
+ *     items: ['a', 'b', 'c'],
+ *     isActive: true
+ * };
+ */
+export interface Context {
+    [key: string]: ContextValue;
+}
+/**
+ * Functions context object passed as second argument to render.
+ * Contains callable functions that can be invoked from templates.
+ *
+ * @example
+ * const fns: FunctionsContext = {
+ *     formatDate: (d) => d.toLocaleDateString(),
+ *     add: (a, b) => a + b,
+ *     greet: (name) => `Hello, ${name}!`
+ * };
+ */
+export interface FunctionsContext {
+    [key: string]: (...args: any[]) => any;
+}
+export type ContextValue = TemplateValue | any[] | Context | ((...args: any[]) => any);
+export type Getter = (ctx: Context, path: Path, debugInfo?: string) => TemplateValue;
+export type Setter = (ctx: Context, fns?: FunctionsContext) => void;
+export type Patcher = (node: Node, get: Getter, config: EngineConfig) => Setter | void;
+export type ExpressionFn = (ctx: Context, fns?: FunctionsContext) => TemplateValue;
+/**
+ * Result of compiling a template.
+ * Contains the DOM content and a render function for updating it with data.
+ */
+export interface CompiledTemplate {
+    /** The compiled DOM element containing the template structure. */
+    content: DocumentFragment | HTMLElement;
+    /**
+     * Updates the DOM with the provided data context.
+     * Memoized: only re-renders when context object reference changes.
+     * @param ctx - Data context with values for template expressions
+     * @param fns - Optional functions context for callable expressions
+     */
+    render: (ctx: Context, fns?: FunctionsContext) => void;
+}
+/**
+ * Compiles an HTML template string into a reusable render function.
+ *
+ * The template supports mustache-style expressions `{{expression}}` for:
+ * - Path resolution: `{{user.name}}`, `{{items[0].title}}`
+ * - Pipes: `{{value | uppercase}}`, `{{price | currency}}`
+ * - Function calls: `{{formatDate(createdAt)}}`, `{{add(a, b)}}`
+ *
+ * Directive attributes for control flow:
+ * - `if="condition"` - Renders element only when condition is truthy
+ * - `unless="condition"` - Renders element only when condition is falsy
+ * - `loop="item in items"` - Repeats element for each array item
+ *
+ * @param templateStr - HTML template string with mustache expressions
+ * @param config - Optional engine configuration
+ * @returns Compiled template with content and render function
+ *
+ * @example
+ * // Simple data binding
+ * const { content, render } = compileTemplate('<h1>{{title}}</h1>');
+ * render({ title: 'Hello World' });
+ * document.body.appendChild(content);
+ *
+ * @example
+ * // Re-rendering with new data
+ * const { content, render } = compileTemplate('<span>Count: {{count}}</span>');
+ * render({ count: 0 });
+ * render({ count: 1 }); // DOM updates automatically
+ *
+ * @example
+ * // With strict mode and error handling
+ * const { render } = compileTemplate('{{missing}}', {
+ *     strict: true,
+ *     onError: (msg) => console.error(msg)
+ * });
+ * render({}); // Throws error for missing path
+ */
+export declare function compileTemplate(templateStr: string, config?: EngineConfig): CompiledTemplate;

package/dist/lib/html/m2.d.ts

@@ -0,0 +1,8 @@
+export type PipeFunction = (value: any) => any;
+export type StrictMode = boolean;
+interface MustacheOptions {
+    strict?: StrictMode;
+}
+export declare function parseTemplate(template: string, options?: MustacheOptions): (data: any, component?: any) => string;
+export declare function parse(template: string, data: any, component?: any, options?: MustacheOptions): string;
+export {};

package/dist/lib/html/template.d.ts

@@ -0,0 +1,167 @@
+/**
+ * @module template
+ * DOM-based template engine with reactive rendering capabilities.
+ *
+ * Compiles HTML templates with mustache-style expressions into efficient
+ * render functions that update the DOM when data changes.
+ *
+ * **Features:**
+ * - Text interpolation: `{{name}}`, `{{user.profile.email}}`
+ * - Attribute binding: `<div class="{{className}}">`
+ * - Pipes: `{{price | currency}}`, `{{name | uppercase | shorten:20}}`
+ * - Function calls: `{{formatDate(createdAt)}}`, `{{add(5, 3)}}`
+ * - Array indexing: `{{items[0]}}`, `{{users[1].name}}`
+ * - Conditionals: `<div if="isVisible">`, `<div unless="isHidden">`
+ * - Loops: `<li loop="item in items">{{item.name}}</li>`
+ *
+ * @example
+ * // Basic usage
+ * import { compileTemplate } from './m';
+ *
+ * const { content, render } = compileTemplate(`
+ *     <div class="card">
+ *         <h2>{{title}}</h2>
+ *         <p>{{description}}</p>
+ *     </div>
+ * `);
+ *
+ * render({ title: 'Hello', description: 'World' });
+ * document.body.appendChild(content);
+ *
+ * @example
+ * // With pipes and functions
+ * import { createPipeRegistry } from '../pipes';
+ *
+ * const pipeRegistry = createPipeRegistry();
+ * const { content, render } = compileTemplate(`
+ *     <span>{{user.name | uppercase}}</span>
+ *     <span>{{formatDate(user.createdAt)}}</span>
+ * `, { strict: false, pipeRegistry });
+ *
+ * render(
+ *     { user: { name: 'john', createdAt: new Date() } },
+ *     { formatDate: (d) => d.toLocaleDateString() }
+ * );
+ *
+ * @example
+ * // With loops and conditionals
+ * const { content, render } = compileTemplate(`
+ *     <ul>
+ *         <li loop="item in items" if="item.visible">
+ *             {{item.name}}: {{item.price | currency}}
+ *         </li>
+ *     </ul>
+ * `);
+ *
+ * render({ items: [
+ *     { name: 'Apple', price: 1.5, visible: true },
+ *     { name: 'Hidden', price: 0, visible: false }
+ * ]});
+ */
+import { PipeRegistry } from '../pipes';
+/**
+ * Configuration options for the template engine.
+ *
+ * @example
+ * const config: EngineConfig = {
+ *     strict: true,
+ *     onError: (msg) => console.error(msg),
+ *     pipeRegistry: createPipeRegistry()
+ * };
+ */
+export interface EngineConfig {
+    /** When true, throws errors for missing paths/functions. When false, returns empty string. */
+    strict: boolean;
+    /** Optional callback invoked when errors occur, receives formatted error message. */
+    onError?: (msg: string) => void;
+    /** Custom pipe registry for transformations. Defaults to built-in pipes. */
+    pipeRegistry?: PipeRegistry;
+}
+export type Path = string;
+export type TemplateValue = string | number | boolean | null | undefined;
+/**
+ * Data context object passed to render function.
+ * Contains the data values that expressions resolve against.
+ *
+ * @example
+ * const ctx: Context = {
+ *     user: { name: 'John', age: 30 },
+ *     items: ['a', 'b', 'c'],
+ *     isActive: true
+ * };
+ */
+export interface Context {
+    [key: string]: ContextValue;
+}
+/**
+ * Functions context object passed as second argument to render.
+ * Contains callable functions that can be invoked from templates.
+ *
+ * @example
+ * const fns: FunctionsContext = {
+ *     formatDate: (d) => d.toLocaleDateString(),
+ *     add: (a, b) => a + b,
+ *     greet: (name) => `Hello, ${name}!`
+ * };
+ */
+export interface FunctionsContext {
+    [key: string]: (...args: any[]) => any;
+}
+export type ContextValue = TemplateValue | any[] | Context | ((...args: any[]) => any);
+export type Getter = (ctx: Context, path: Path, debugInfo?: string) => TemplateValue;
+export type Setter = (ctx: Context, fns?: FunctionsContext) => void;
+export type Patcher = (node: Node, get: Getter, config: EngineConfig) => Setter | void;
+export type ExpressionFn = (ctx: Context, fns?: FunctionsContext) => TemplateValue;
+/**
+ * Result of compiling a template.
+ * Contains the DOM content and a render function for updating it with data.
+ */
+export interface CompiledTemplate {
+    /** The compiled DOM element containing the template structure. */
+    content: DocumentFragment | HTMLElement;
+    /**
+     * Updates the DOM with the provided data context.
+     * Memoized: only re-renders when context object reference changes.
+     * @param ctx - Data context with values for template expressions
+     * @param fns - Optional functions context for callable expressions
+     */
+    render: (ctx: Context, fns?: FunctionsContext) => void;
+}
+/**
+ * Compiles an HTML template string into a reusable render function.
+ *
+ * The template supports mustache-style expressions `{{expression}}` for:
+ * - Path resolution: `{{user.name}}`, `{{items[0].title}}`
+ * - Pipes: `{{value | uppercase}}`, `{{price | currency}}`
+ * - Function calls: `{{formatDate(createdAt)}}`, `{{add(a, b)}}`
+ *
+ * Directive attributes for control flow:
+ * - `if="condition"` - Renders element only when condition is truthy
+ * - `unless="condition"` - Renders element only when condition is falsy
+ * - `loop="item in items"` - Repeats element for each array item
+ *
+ * @param templateStr - HTML template string with mustache expressions
+ * @param config - Optional engine configuration
+ * @returns Compiled template with content and render function
+ *
+ * @example
+ * // Simple data binding
+ * const { content, render } = compileTemplate('<h1>{{title}}</h1>');
+ * render({ title: 'Hello World' });
+ * document.body.appendChild(content);
+ *
+ * @example
+ * // Re-rendering with new data
+ * const { content, render } = compileTemplate('<span>Count: {{count}}</span>');
+ * render({ count: 0 });
+ * render({ count: 1 }); // DOM updates automatically
+ *
+ * @example
+ * // With strict mode and error handling
+ * const { render } = compileTemplate('{{missing}}', {
+ *     strict: true,
+ *     onError: (msg) => console.error(msg)
+ * });
+ * render({}); // Throws error for missing path
+ */
+export declare function compileTemplate(templateStr: string, config?: EngineConfig): CompiledTemplate;

package/dist/lib/http/HttpClient.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @module HttpClient
+ * Type-safe HTTP client built on fetch() with automatic JWT handling.
+ *
+ * @example
+ * const api = new HttpClient({ baseUrl: '/api' });
+ * const response = await api.get('/users');
+ * const users = response.as<User[]>();
+ */
+/**
+ * Configuration options for HttpClient.
+ */
+export interface HttpClientOptions {
+    /**
+     * Root URL to remote endpoint. Used so that each method only have to specify path in requests.
+     */
+    baseUrl?: string;
+    /**
+     * Default content type to use if none is specified in the request method.
+     */
+    contentType?: string;
+    /***
+     * Checks for a JWT token in localStorage to automatically include it in requests.
+     *
+     * Undefined = use "jwt", null = disable.
+     */
+    bearerTokenName?: string;
+}
+/**
+ * HTTP client wrapper around fetch() with convenience features.
+ *
+ * Features:
+ * - Automatic base URL prefixing
+ * - JWT token handling from localStorage
+ * - Type-safe response casting
+ * - Consistent error handling
+ *
+ * @example
+ * // Create client with base URL
+ * const api = new HttpClient({ baseUrl: '/api/v1' });
+ *
+ * // GET request
+ * const users = await api.get('/users');
+ * const data = users.as<User[]>();
+ *
+ * // POST request
+ * const result = await api.post('/users', JSON.stringify({ name: 'John' }));
+ */
+export declare class HttpClient {
+    private options?;
+    /**
+     *
+     * @param urlPrefix Can be used to specify the URL early (to allow only path to be used in all methods).
+     * @param defaultContentType Content type to use if not specified in the constructor
+     */
+    constructor(options?: HttpClientOptions);
+    /**
+     *
+     * @param url URL to make the request against.
+     * @param options Request options.
+     * @returns Response from server.
+     */
+    request(url: string, options?: RequestInit): Promise<HttpResponse>;
+    /**
+     * GET a resource.
+     * @param url URL to get resource from.
+     * @param queryString Optional query string.
+     * @param options Request options.
+     * @returns HTTP response.
+     */
+    get(url: string, queryString?: Record<string, string>, options?: RequestInit): Promise<HttpResponse>;
+    /**
+     * POST a resource.
+     * @param url URL to post to.
+     * @param data Data to post.
+     * @param options Request options.
+     * @returns HTTP response.
+     */
+    post(url: string, data: BodyInit, options?: RequestInit): Promise<HttpResponse>;
+    /**
+     * DELETE a resource.
+     * @param url url to resource.
+     * @param options request options.
+     * @returns response.
+     */
+    put(url: string, data: BodyInit, options?: RequestInit): Promise<HttpResponse>;
+    /**
+     * DELETE a resource.
+     * @param url url to resource.
+     * @param options request options.
+     * @returns response.
+     */
+    delete(url: string, options?: RequestInit): Promise<HttpResponse>;
+}
+/**
+ * Response for request methods in @see HttpClient
+ */
+export interface HttpResponse {
+    /**
+     * Http status code.
+     */
+    statusCode: number;
+    /**
+     * Reason to why the status code was used.
+     */
+    statusReason: string;
+    /**
+     * this is a 2x response.
+     */
+    success: boolean;
+    /**
+     * Content type of response body.
+     */
+    contentType: string | null;
+    /**
+     * Body returned.
+     *
+     * Body has been read and deserialized from json (if the request content type was 'application/json' which is per default is).
+     */
+    body: unknown;
+    /**
+     * Charset used in body.
+     */
+    charset: string | null;
+    /**
+     * Cast body to a type.
+     */
+    as<T>(): T;
+}
+/**
+ * Error thrown when a request fails.
+ */
+export declare class HttpError extends Error {
+    message: string;
+    response: HttpResponse;
+    constructor(response: HttpResponse);
+}
+/**
+ * HTTP request options.
+ */
+export interface RequestOptions {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+    mode?: 'cors' | 'no-cors' | '*cors' | 'same-origin';
+    cache: 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache' | 'only-if-cached';
+    credentials: 'omit' | 'same-origin' | 'include';
+    headers: Map<string, string>;
+    redirect: 'follow' | 'manual' | '*follow' | 'error';
+    referrerPolicy: 'no-referrer' | '*no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+    /**
+     * Will be serialized if the content type is json (and the body is an object).
+     */
+    body: unknown;
+}