@xelqun/forms 0.0.0-stage → 0.1.1

package/resources/js/core/conditions.ts

@@ -0,0 +1,52 @@
+import type { ConditionNode } from '../schema/types';
+import { compare, equals, inList, isFilled } from './values';
+
+export type Getter = (path: string) => unknown;
+
+/**
+ * Evaluate a declarative condition tree in the browser.
+ * Mirrors Xelqun\Forms\Conditions\Condition::evaluateTree().
+ */
+export function evaluateCondition(node: ConditionNode, get: Getter): boolean {
+    switch (node.op) {
+        case 'and':
+            return node.args.every((child) => evaluateCondition(child, get));
+        case 'or':
+            return node.args.some((child) => evaluateCondition(child, get));
+        case 'not':
+            return !evaluateCondition(node.args[0], get);
+    }
+
+    const actual = get(node.path);
+
+    switch (node.op) {
+        case 'filled':
+            return isFilled(actual);
+        case 'blank':
+            return !isFilled(actual);
+    }
+
+    const expected = node.value;
+    const list = Array.isArray(expected) ? expected : [expected];
+
+    switch (node.op) {
+        case 'eq':
+            return equals(actual, expected);
+        case 'neq':
+            return !equals(actual, expected);
+        case 'in':
+            return inList(actual, list);
+        case 'notIn':
+            return !inList(actual, list);
+        case 'gt':
+            return compare(actual, expected) === 1;
+        case 'gte':
+            return [0, 1].includes(compare(actual, expected) as number);
+        case 'lt':
+            return compare(actual, expected) === -1;
+        case 'lte':
+            return [-1, 0].includes(compare(actual, expected) as number);
+    }
+
+    return false;
+}

package/resources/js/core/expressions.ts

@@ -0,0 +1,131 @@
+import type { ExpressionNode } from '../schema/types';
+import type { Getter } from './conditions';
+import { compare, equals, isPlainObject, isTruthy, toNumber } from './values';
+
+/**
+ * Evaluate an expression AST produced by the PHP parser. There is no parser
+ * in the browser, so nothing user-typed is ever executed.
+ * Mirrors Xelqun\Forms\Expressions\ExpressionEvaluator.
+ */
+export function evaluateExpression(node: ExpressionNode, get: Getter): unknown {
+    if ('lit' in node) {
+        return node.lit;
+    }
+
+    if ('ref' in node) {
+        return get(node.ref);
+    }
+
+    if ('fn' in node) {
+        return call(node.fn, node.args, get);
+    }
+
+    const [first, second] = node.args;
+
+    switch (node.op) {
+        case '&&':
+            return (
+                isTruthy(evaluateExpression(first, get)) &&
+                isTruthy(evaluateExpression(second, get))
+            );
+        case '||':
+            return (
+                isTruthy(evaluateExpression(first, get)) ||
+                isTruthy(evaluateExpression(second, get))
+            );
+        case '!':
+            return !isTruthy(evaluateExpression(first, get));
+        case 'neg':
+            return -toNumber(evaluateExpression(first, get)) || 0;
+    }
+
+    const left = evaluateExpression(first, get);
+    const right = evaluateExpression(second, get);
+
+    switch (node.op) {
+        case '==':
+            return equals(left, right);
+        case '!=':
+            return !equals(left, right);
+        case '<':
+            return compare(left, right) === -1;
+        case '<=':
+            return [-1, 0].includes(compare(left, right) as number);
+        case '>':
+            return compare(left, right) === 1;
+        case '>=':
+            return [0, 1].includes(compare(left, right) as number);
+    }
+
+    return arithmetic(node.op, toNumber(left), toNumber(right));
+}
+
+function arithmetic(operator: string, left: number, right: number): number {
+    switch (operator) {
+        case '+':
+            return left + right;
+        case '-':
+            return left - right;
+        case '*':
+            return left * right;
+        case '/':
+            return right === 0 ? 0 : left / right;
+        case '%':
+            return right === 0 ? 0 : left % right;
+    }
+
+    throw new Error(`Unknown operator [${operator}].`);
+}
+
+function call(name: string, args: ExpressionNode[], get: Getter): unknown {
+    if (name === 'if') {
+        const condition = isTruthy(evaluateExpression(args[0], get));
+        const branch = args[condition ? 1 : 2];
+
+        return branch ? evaluateExpression(branch, get) : null;
+    }
+
+    const values = args.map((arg) => evaluateExpression(arg, get));
+
+    if (name === 'round') {
+        const precision = Math.trunc(toNumber(values[1] ?? 0));
+        const number = toNumber(values[0] ?? 0);
+        const factor = 10 ** precision;
+        const sign = number < 0 ? -1 : 1;
+
+        return (sign * Math.floor(Math.abs(number) * factor + 0.5)) / factor;
+    }
+
+    if (name === 'abs') {
+        return Math.abs(toNumber(values[0] ?? 0));
+    }
+
+    const items = values.flatMap((value) => {
+        if (Array.isArray(value)) {
+            return value;
+        }
+
+        return isPlainObject(value) ? Object.values(value) : [value];
+    });
+
+    if (name === 'count') {
+        return items.length;
+    }
+
+    const numbers = items.map(toNumber);
+
+    switch (name) {
+        case 'sum':
+            return numbers.reduce((total, number) => total + number, 0);
+        case 'avg':
+            return numbers.length === 0
+                ? 0
+                : numbers.reduce((total, number) => total + number, 0) / numbers.length;
+        case 'min':
+            return numbers.length === 0 ? 0 : Math.min(...numbers);
+        case 'max':
+            return numbers.length === 0 ? 0 : Math.max(...numbers);
+    }
+
+    throw new Error(`Unknown function [${name}].`);
+}

package/resources/js/core/http.ts

@@ -0,0 +1,101 @@
+import type { UploadResult } from '../schema/types';
+
+export class HttpError extends Error {
+    constructor(
+        public readonly status: number,
+        public readonly body: any,
+    ) {
+        super(body?.message ?? `Request failed with status ${status}.`);
+    }
+
+    get validationErrors(): Record<string, string[]> {
+        return this.body?.errors ?? {};
+    }
+}
+
+function xsrfToken(): string | null {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+
+    const match = document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]*)/);
+
+    return match ? decodeURIComponent(match[1]) : null;
+}
+
+function headers(json: boolean): Record<string, string> {
+    const result: Record<string, string> = {
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+    };
+    const token = xsrfToken();
+
+    if (token) {
+        result['X-XSRF-TOKEN'] = token;
+    }
+
+    if (json) {
+        result['Content-Type'] = 'application/json';
+    }
+
+    return result;
+}
+
+export async function postJson<T>(url: string, body: unknown, signal?: AbortSignal): Promise<T> {
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: headers(true),
+        body: JSON.stringify(body),
+        credentials: 'same-origin',
+        signal,
+    });
+    const payload = await response.json().catch(() => null);
+
+    if (!response.ok) {
+        throw new HttpError(response.status, payload);
+    }
+
+    return payload as T;
+}
+
+/**
+ * Upload with progress events (fetch has no upload progress).
+ */
+export function uploadFile(
+    url: string,
+    fields: Record<string, string | Blob>,
+    onProgress: (percent: number) => void,
+    signal?: AbortSignal,
+): Promise<UploadResult> {
+    return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        const body = new FormData();
+
+        Object.entries(fields).forEach(([key, value]) => body.append(key, value));
+
+        request.open('POST', url);
+        request.withCredentials = true;
+        Object.entries(headers(false)).forEach(([key, value]) =>
+            request.setRequestHeader(key, value),
+        );
+        request.responseType = 'json';
+        request.upload.addEventListener('progress', (event) => {
+            if (event.lengthComputable) {
+                onProgress(Math.round((event.loaded / event.total) * 100));
+            }
+        });
+        request.addEventListener('load', () => {
+            if (request.status >= 200 && request.status < 300) {
+                resolve(request.response as UploadResult);
+            } else {
+                reject(new HttpError(request.status, request.response));
+            }
+        });
+        request.addEventListener('error', () =>
+            reject(new HttpError(0, { message: 'Network error.' })),
+        );
+        request.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')));
+        signal?.addEventListener('abort', () => request.abort());
+        request.send(body);
+    });
+}

package/resources/js/core/log.ts

@@ -0,0 +1,93 @@
+import { reactive } from 'vue';
+import type { UpdatePatch } from '../schema/types';
+
+export type RequestKind = 'update' | 'search' | 'upload';
+
+export interface RequestLogEntry {
+    id: number;
+    kind: RequestKind;
+    /** Sequence number of a live update; null for searches and uploads. */
+    seq: number | null;
+    changed: string[];
+    /** Short extra context, e.g. the search term or the uploaded file name. */
+    detail: string | null;
+    status: 'pending' | 'ok' | 'stale' | 'aborted' | 'error';
+    startedAt: number;
+    ms: number | null;
+    patch: UpdatePatch | null;
+    response: unknown;
+    error: string | null;
+}
+
+/**
+ * A short, newest-first history of every request a form makes to the
+ * server: live updates, searches and uploads. Useful for debugging tools.
+ */
+export class RequestLog {
+    readonly entries = reactive<RequestLogEntry[]>([]);
+
+    private nextId = 0;
+
+    constructor(private readonly limit = 25) {}
+
+    start(
+        kind: RequestKind,
+        changed: string[],
+        detail: string | null = null,
+        seq: number | null = null,
+    ): RequestLogEntry {
+        this.entries.unshift({
+            id: ++this.nextId,
+            kind,
+            seq,
+            changed,
+            detail,
+            status: 'pending',
+            startedAt: Date.now(),
+            ms: null,
+            patch: null,
+            response: null,
+            error: null,
+        });
+        this.entries.splice(this.limit);
+
+        return this.entries[0];
+    }
+
+    /**
+     * Log a request from start to finish and pass its result through.
+     */
+    async track<T>(
+        kind: RequestKind,
+        changed: string[],
+        detail: string | null,
+        request: Promise<T>,
+        signal?: AbortSignal,
+    ): Promise<T> {
+        const entry = this.start(kind, changed, detail);
+
+        try {
+            const response = await request;
+
+            entry.ms = Date.now() - entry.startedAt;
+            entry.response = response;
+            entry.status = 'ok';
+
+            return response;
+        } catch (error) {
+            entry.ms = Date.now() - entry.startedAt;
+            entry.status = signal?.aborted || isAbortError(error) ? 'aborted' : 'error';
+            entry.error = entry.status === 'error' ? errorMessage(error) : null;
+
+            throw error;
+        }
+    }
+}
+
+function isAbortError(error: unknown): boolean {
+    return error instanceof DOMException && error.name === 'AbortError';
+}
+
+function errorMessage(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+}

package/resources/js/core/patch.ts

@@ -0,0 +1,65 @@
+import type { SchemaNode } from '../schema/types';
+import { isPlainObject } from './values';
+
+function isNodeList(value: unknown): value is SchemaNode[] {
+    return (
+        Array.isArray(value) &&
+        value.length > 0 &&
+        value.every((item) => isPlainObject(item) && typeof item.key === 'string')
+    );
+}
+
+/**
+ * Merge a partial node into an existing reactive node in place.
+ *
+ * Objects are merged key by key and node lists are merged by node key, so
+ * existing node objects (and the components rendering them) are reused:
+ * nothing re-mounts and focus and cursor position are kept.
+ */
+export function mergeNode(target: Record<string, any>, patch: Record<string, any>): void {
+    for (const [key, value] of Object.entries(patch)) {
+        const current = target[key];
+
+        if (isNodeList(value) && Array.isArray(current)) {
+            target[key] = mergeNodeList(current, value);
+        } else if (isPlainObject(value) && isPlainObject(current) && !Array.isArray(value)) {
+            mergeNode(current, value);
+        } else {
+            target[key] = value;
+        }
+    }
+}
+
+function mergeNodeList(current: SchemaNode[], incoming: SchemaNode[]): SchemaNode[] {
+    const existing = new Map(current.map((node) => [node.key, node]));
+
+    return incoming.map((node) => {
+        const match = existing.get(node.key);
+
+        if (!match) {
+            return node;
+        }
+
+        mergeNode(match, node);
+
+        return match;
+    });
+}
+
+/**
+ * Visit a node and every node below it, including repeater rows (but not templates).
+ */
+export function eachNode(nodes: SchemaNode[], callback: (node: SchemaNode) => void): void {
+    for (const node of nodes) {
+        callback(node);
+        eachNode(node.children ?? [], callback);
+
+        if (node.type === 'repeater' && isPlainObject(node.props?.rows)) {
+            for (const rowNodes of Object.values(
+                node.props!.rows as Record<string, SchemaNode[]>,
+            )) {
+                eachNode(rowNodes, callback);
+            }
+        }
+    }
+}

package/resources/js/core/paths.ts

@@ -0,0 +1,122 @@
+import { isPlainObject } from './values';
+
+export const ROOT = 'data';
+export const ROW_PLACEHOLDER = '{row}';
+
+/**
+ * Read a value by dot path. Paths containing "*" return a flat list,
+ * matching Xelqun\Forms\Support\StatePath::get().
+ */
+export function getPath(state: unknown, path: string): any {
+    const segments = path.split('.');
+
+    if (!segments.includes('*')) {
+        let current: any = state;
+
+        for (const segment of segments) {
+            if (current === null || typeof current !== 'object') {
+                return undefined;
+            }
+
+            current = current[segment];
+        }
+
+        return current;
+    }
+
+    return collect(state, segments);
+}
+
+function collect(value: unknown, segments: string[]): unknown[] {
+    if (segments.length === 0) {
+        return [value];
+    }
+
+    const [segment, ...rest] = segments;
+
+    if (value === null || typeof value !== 'object') {
+        return [];
+    }
+
+    if (segment === '*') {
+        return Object.values(value as object).flatMap((item) => collect(item, rest));
+    }
+
+    if (!(segment in (value as object))) {
+        return [];
+    }
+
+    return collect((value as Record<string, unknown>)[segment], rest);
+}
+
+/**
+ * Write a value by dot path, creating objects along the way.
+ */
+export function setPath(state: Record<string, any>, path: string, value: unknown): void {
+    const segments = path.split('.');
+    const last = segments.pop()!;
+    let current: any = state;
+
+    for (const segment of segments) {
+        if (current[segment] === null || typeof current[segment] !== 'object') {
+            current[segment] = {};
+        }
+
+        current = current[segment];
+    }
+
+    current[last] = value;
+}
+
+export function deletePath(state: Record<string, any>, path: string): void {
+    const segments = path.split('.');
+    const last = segments.pop()!;
+    const parent = getPath(state, segments.join('.'));
+
+    if (parent !== null && typeof parent === 'object') {
+        delete parent[last];
+    }
+}
+
+/**
+ * Whether two paths touch the same state ("*" and "{row}" match any segment).
+ */
+export function overlaps(first: string, second: string): boolean {
+    const a = first.split('.');
+    const b = second.split('.');
+    const length = Math.min(a.length, b.length);
+
+    for (let index = 0; index < length; index++) {
+        const left = a[index];
+        const right = b[index];
+
+        if (
+            left !== right &&
+            left !== '*' &&
+            right !== '*' &&
+            left !== ROW_PLACEHOLDER &&
+            right !== ROW_PLACEHOLDER
+        ) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export function startsWithPath(path: string, prefix: string): boolean {
+    return path === prefix || path.startsWith(`${prefix}.`);
+}
+
+/**
+ * Deep-copy a value and replace every "{row}" placeholder in its strings.
+ */
+export function replaceRow<T>(value: T, rowKey: string): T {
+    return JSON.parse(JSON.stringify(value).split(ROW_PLACEHOLDER).join(rowKey)) as T;
+}
+
+export function clone<T>(value: T): T {
+    return value === undefined ? value : JSON.parse(JSON.stringify(value));
+}
+
+export { isPlainObject };