rask-ui 0.20.5 → 0.21.0

package/dist/jsx.d.ts

@@ -1,257 +1,11 @@
 // JSX type definitions
-// Note: This is JSXInternal, which gets renamed to JSX on export from jsx-runtime
-import type { Ref } from "./state";
-
-export namespace JSXInternal {
-  export type Element = any;
-
-  export interface ElementAttributesProperty {
-    props: {};
-  }
-
-  export interface ElementChildrenAttribute {
-    children: {};
-  }
-
-  export interface IntrinsicAttributes {
-    key?: any;
-  }
-
-  // CSS Properties
-  export type CSSProperties = {
-    [key: string]: string | number | undefined;
-  };
-
-  // Common HTML Attributes
-  export interface HTMLAttributes<T = HTMLElement> {
-    ref?: Ref<T> | ((element: T | null) => void);
-    id?: string;
-    class?: string | Record<string, boolean>;
-    style?: string | CSSProperties;
-    title?: string;
-    role?: string;
-    tabIndex?: number;
-
-    onClick?: (event: MouseEvent) => void;
-    onDblClick?: (event: MouseEvent) => void;
-    onChange?: (event: Event) => void;
-    onInput?: (event: Event) => void;
-    onSubmit?: (event: Event) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-    onKeyDown?: (event: KeyboardEvent) => void;
-    onKeyUp?: (event: KeyboardEvent) => void;
-    onKeyPress?: (event: KeyboardEvent) => void;
-    onMouseDown?: (event: MouseEvent) => void;
-    onMouseUp?: (event: MouseEvent) => void;
-    onMouseEnter?: (event: MouseEvent) => void;
-    onMouseLeave?: (event: MouseEvent) => void;
-    onMouseMove?: (event: MouseEvent) => void;
-    onMouseOver?: (event: MouseEvent) => void;
-    onMouseOut?: (event: MouseEvent) => void;
-    onWheel?: (event: WheelEvent) => void;
-    onScroll?: (event: Event) => void;
-    onTouchStart?: (event: TouchEvent) => void;
-    onTouchEnd?: (event: TouchEvent) => void;
-    onTouchMove?: (event: TouchEvent) => void;
-    onTouchCancel?: (event: TouchEvent) => void;
-
-    [key: `aria-${string}`]: string | boolean | number | undefined;
-    [key: `data-${string}`]: string | boolean | number | undefined;
-
-    children?: any;
-  }
-
-  export interface AnchorHTMLAttributes<T = HTMLAnchorElement>
-    extends HTMLAttributes<T> {
-    href?: string;
-    target?: "_blank" | "_self" | "_parent" | "_top";
-    rel?: string;
-    download?: string;
-  }
-
-  export interface ButtonHTMLAttributes<T = HTMLButtonElement>
-    extends HTMLAttributes<T> {
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    name?: string;
-    value?: string;
-  }
-
-  export interface FormHTMLAttributes<T = HTMLFormElement>
-    extends HTMLAttributes<T> {
-    action?: string;
-    method?: "get" | "post";
-    enctype?: string;
-    target?: string;
-    noValidate?: boolean;
-  }
-
-  export interface InputHTMLAttributes<T = HTMLInputElement>
-    extends HTMLAttributes<T> {
-    type?:
-      | "button"
-      | "checkbox"
-      | "color"
-      | "date"
-      | "datetime-local"
-      | "email"
-      | "file"
-      | "hidden"
-      | "image"
-      | "month"
-      | "number"
-      | "password"
-      | "radio"
-      | "range"
-      | "reset"
-      | "search"
-      | "submit"
-      | "tel"
-      | "text"
-      | "time"
-      | "url"
-      | "week";
-    value?: string | number;
-    defaultValue?: string | number;
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-    readOnly?: boolean;
-    name?: string;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    min?: string | number;
-    max?: string | number;
-    step?: string | number;
-    pattern?: string;
-    accept?: string;
-    multiple?: boolean;
-    autoComplete?: string;
-    autoFocus?: boolean;
-  }
-
-  export interface LabelHTMLAttributes<T = HTMLLabelElement>
-    extends HTMLAttributes<T> {
-    htmlFor?: string;
-    for?: string;
-  }
-
-  export interface SelectHTMLAttributes<T = HTMLSelectElement>
-    extends HTMLAttributes<T> {
-    value?: string | string[];
-    defaultValue?: string | string[];
-    disabled?: boolean;
-    required?: boolean;
-    name?: string;
-    multiple?: boolean;
-    size?: number;
-  }
-
-  export interface OptionHTMLAttributes<T = HTMLOptionElement>
-    extends HTMLAttributes<T> {
-    value?: string | number;
-    selected?: boolean;
-    disabled?: boolean;
-    label?: string;
-  }
-
-  export interface TextareaHTMLAttributes<T = HTMLTextAreaElement>
-    extends HTMLAttributes<T> {
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-    readOnly?: boolean;
-    name?: string;
-    rows?: number;
-    cols?: number;
-    maxLength?: number;
-    wrap?: "soft" | "hard";
-  }
-
-  export interface FieldsetHTMLAttributes<T = HTMLFieldSetElement>
-    extends HTMLAttributes<T> {
-    disabled?: boolean;
-    name?: string;
-  }
-
-  export interface ImgHTMLAttributes<T = HTMLImageElement>
-    extends HTMLAttributes<T> {
-    src?: string;
-    alt?: string;
-    width?: number | string;
-    height?: number | string;
-    loading?: "eager" | "lazy";
-    crossOrigin?: "anonymous" | "use-credentials";
-  }
-
-  export interface SVGAttributes<T = SVGElement> extends HTMLAttributes<T> {
-    xmlns?: string;
-    viewBox?: string;
-    width?: number | string;
-    height?: number | string;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number | string;
-  }
-
-  // Intrinsic Elements
-  export interface IntrinsicElements {
-    a: AnchorHTMLAttributes<HTMLAnchorElement>;
-    abbr: HTMLAttributes<HTMLElement>;
-    address: HTMLAttributes<HTMLElement>;
-    article: HTMLAttributes<HTMLElement>;
-    aside: HTMLAttributes<HTMLElement>;
-    b: HTMLAttributes<HTMLElement>;
-    blockquote: HTMLAttributes<HTMLQuoteElement>;
-    body: HTMLAttributes<HTMLBodyElement>;
-    br: HTMLAttributes<HTMLBRElement>;
-    button: ButtonHTMLAttributes<HTMLButtonElement>;
-    canvas: HTMLAttributes<HTMLCanvasElement>;
-    code: HTMLAttributes<HTMLElement>;
-    div: HTMLAttributes<HTMLDivElement>;
-    em: HTMLAttributes<HTMLElement>;
-    fieldset: FieldsetHTMLAttributes<HTMLFieldSetElement>;
-    footer: HTMLAttributes<HTMLElement>;
-    form: FormHTMLAttributes<HTMLFormElement>;
-    h1: HTMLAttributes<HTMLHeadingElement>;
-    h2: HTMLAttributes<HTMLHeadingElement>;
-    h3: HTMLAttributes<HTMLHeadingElement>;
-    h4: HTMLAttributes<HTMLHeadingElement>;
-    h5: HTMLAttributes<HTMLHeadingElement>;
-    h6: HTMLAttributes<HTMLHeadingElement>;
-    head: HTMLAttributes<HTMLHeadElement>;
-    header: HTMLAttributes<HTMLElement>;
-    hr: HTMLAttributes<HTMLHRElement>;
-    html: HTMLAttributes<HTMLHtmlElement>;
-    i: HTMLAttributes<HTMLElement>;
-    img: ImgHTMLAttributes<HTMLImageElement>;
-    input: InputHTMLAttributes<HTMLInputElement>;
-    label: LabelHTMLAttributes<HTMLLabelElement>;
-    legend: HTMLAttributes<HTMLLegendElement>;
-    li: HTMLAttributes<HTMLLIElement>;
-    main: HTMLAttributes<HTMLElement>;
-    nav: HTMLAttributes<HTMLElement>;
-    ol: HTMLAttributes<HTMLOListElement>;
-    option: OptionHTMLAttributes<HTMLOptionElement>;
-    p: HTMLAttributes<HTMLParagraphElement>;
-    pre: HTMLAttributes<HTMLPreElement>;
-    section: HTMLAttributes<HTMLElement>;
-    select: SelectHTMLAttributes<HTMLSelectElement>;
-    small: HTMLAttributes<HTMLElement>;
-    span: HTMLAttributes<HTMLSpanElement>;
-    strong: HTMLAttributes<HTMLElement>;
-    style: HTMLAttributes<HTMLStyleElement>;
-    textarea: TextareaHTMLAttributes<HTMLTextAreaElement>;
-    ul: HTMLAttributes<HTMLUListElement>;
-
-    // SVG
-    svg: SVGAttributes<SVGSVGElement>;
-    circle: SVGAttributes<SVGCircleElement>;
-    line: SVGAttributes<SVGLineElement>;
-    path: SVGAttributes<SVGPathElement>;
-    rect: SVGAttributes<SVGRectElement>;
-  }
-}
+// Re-export Inferno's comprehensive JSX types
+import 'inferno';
+
+// Re-export useful Inferno types for convenience
+export type {
+  InfernoNode,
+  InfernoChild,
+  Component,
+  ComponentType,
+} from 'inferno';

package/dist/patchInferno.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Temporarily patches document.addEventListener during render to capture
+ * and wrap Inferno's delegated event listeners with syncBatch
+ */
+export declare function patchInfernoEventHandling(renderFn: () => void): void;
+//# sourceMappingURL=patchInferno.d.ts.map

package/dist/patchInferno.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchInferno.d.ts","sourceRoot":"","sources":["../src/patchInferno.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,MAAM,IAAI,QA0D7D"}

package/dist/patchInferno.js

@@ -0,0 +1,53 @@
+import { syncBatch } from "./batch";
+/**
+ * Temporarily patches document.addEventListener during render to capture
+ * and wrap Inferno's delegated event listeners with syncBatch
+ */
+export function patchInfernoEventHandling(renderFn) {
+    const originalAddEventListener = document.addEventListener.bind(document);
+    const patchedEvents = new Set();
+    // Inferno's delegated events
+    const INFERNO_EVENTS = [
+        "click",
+        "dblclick",
+        "focusin",
+        "focusout",
+        "keydown",
+        "keypress",
+        "keyup",
+        "mousedown",
+        "mousemove",
+        "mouseup",
+        "touchend",
+        "touchmove",
+        "touchstart",
+        "change",
+        "input",
+        "submit",
+    ];
+    // Temporarily replace addEventListener
+    document.addEventListener = function (type, listener, options) {
+        // Only wrap Inferno's delegated event listeners
+        if (INFERNO_EVENTS.includes(type) &&
+            typeof listener === "function" &&
+            !patchedEvents.has(type)) {
+            patchedEvents.add(type);
+            const wrappedListener = function (event) {
+                syncBatch(() => {
+                    listener.call(this, event);
+                });
+            };
+            return originalAddEventListener(type, wrappedListener, options);
+        }
+        // @ts-ignore
+        return originalAddEventListener(type, listener, options);
+    };
+    try {
+        // Call render - Inferno will synchronously attach its listeners
+        renderFn();
+    }
+    finally {
+        // Restore original addEventListener
+        document.addEventListener = originalAddEventListener;
+    }
+}

package/dist/scheduler.d.ts

@@ -0,0 +1,4 @@
+export declare function markDirty(): void;
+export declare function enqueueUpdateFromSetter(): void;
+export declare function installGlobalBatching(target?: EventTarget): () => void;
+//# sourceMappingURL=scheduler.d.ts.map

package/dist/scheduler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"AAIA,wBAAgB,SAAS,SAExB;AAeD,wBAAgB,uBAAuB,SAWtC;AAmED,wBAAgB,qBAAqB,CAAC,MAAM,GAAE,WAAoB,cAoBjE"}

package/dist/scheduler.js

@@ -0,0 +1,107 @@
+let depth = 0; // batching scope nesting
+let dirty = false; // has any state update been enqueued?
+let scheduled = false; // async flush scheduled?
+export function markDirty() {
+    dirty = true;
+}
+function performWork() {
+    // TODO: call your Inferno render/commit once.
+    // infernoRender(vnode, container);
+}
+function flushNow() {
+    scheduled = false;
+    if (!dirty)
+        return;
+    dirty = false;
+    performWork();
+}
+// Called by setters after enqueueing their state change
+export function enqueueUpdateFromSetter() {
+    dirty = true;
+    if (depth > 0) {
+        // We're inside a batched input event; we'll flush on exit (same frame).
+        return;
+    }
+    if (!scheduled) {
+        scheduled = true;
+        queueMicrotask(flushNow); // one flush per task
+    }
+}
+// Batch-scope control used by the global capture listeners
+function enter() {
+    depth++;
+}
+function exit() {
+    if (--depth === 0) {
+        // End of the event propagation; commit now (before next paint).
+        flushNow();
+    }
+}
+// eventBatching.ts
+const INTERACTIVE_EVENTS = [
+    // Pointer + mouse
+    "click",
+    "dblclick",
+    "contextmenu",
+    "mousedown",
+    "mouseup",
+    "mousemove",
+    "pointerdown",
+    "pointerup",
+    "pointermove",
+    "touchstart",
+    "touchmove",
+    "touchend",
+    "touchcancel",
+    "dragstart",
+    "drag",
+    "dragend",
+    "dragenter",
+    "dragleave",
+    "dragover",
+    "drop",
+    "wheel",
+    // Keyboard
+    "keydown",
+    "keypress",
+    "keyup",
+    // Focus & input
+    "focus",
+    "blur",
+    "focusin",
+    "focusout",
+    "input",
+    "beforeinput",
+    "change",
+    "compositionstart",
+    "compositionupdate",
+    "compositionend",
+    // Forms
+    "submit",
+    "reset",
+    // Selection / clipboard
+    "select",
+    "selectionchange",
+    "copy",
+    "cut",
+    "paste",
+];
+export function installGlobalBatching(target = window) {
+    const handlers = [];
+    INTERACTIVE_EVENTS.forEach((type) => {
+        const onCapture = () => {
+            enter();
+            // Close the scope after all handlers (capture→target→bubble) have run.
+            queueMicrotask(exit);
+        };
+        target.addEventListener(type, onCapture, { capture: true });
+        handlers.push([onCapture, { capture: true }]);
+    });
+    // Return a disposer so you can remove on unmount
+    return () => {
+        INTERACTIVE_EVENTS.forEach((type, i) => {
+            const [fn, opts] = handlers[i];
+            target.removeEventListener(type, fn, opts);
+        });
+    };
+}

package/dist/tests/batch.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=batch.test.d.ts.map

package/dist/tests/batch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"batch.test.d.ts","sourceRoot":"","sources":["../../src/tests/batch.test.ts"],"names":[],"mappings":""}

package/dist/tests/batch.test.js

@@ -0,0 +1,244 @@
+import { describe, it, expect } from "vitest";
+import { syncBatch } from "../batch";
+import { createState } from "../createState";
+import { Observer } from "../observation";
+describe("syncBatch", () => {
+    it("should batch multiple state changes into a single notification", () => {
+        const state = createState({ count: 0, name: "Alice" });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track count
+        state.name; // Track name
+        dispose();
+        // Make multiple changes in a batch
+        syncBatch(() => {
+            state.count = 1;
+            state.name = "Bob";
+            state.count = 2;
+        });
+        // Should only notify once despite multiple changes, and synchronously
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(2);
+        expect(state.name).toBe("Bob");
+        observer.dispose();
+    });
+    it("should handle nested batches correctly", () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        syncBatch(() => {
+            state.count = 1;
+            syncBatch(() => {
+                state.count = 2;
+            });
+            state.count = 3;
+        });
+        // Should still only notify once for nested batches
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(3);
+        observer.dispose();
+    });
+    it("should handle multiple observers with syncBatch", () => {
+        const state = createState({ count: 0 });
+        let notifyCount1 = 0;
+        let notifyCount2 = 0;
+        const observer1 = new Observer(() => {
+            notifyCount1++;
+        });
+        const observer2 = new Observer(() => {
+            notifyCount2++;
+        });
+        const dispose1 = observer1.observe();
+        state.count; // Track in observer1
+        dispose1();
+        const dispose2 = observer2.observe();
+        state.count; // Track in observer2
+        dispose2();
+        syncBatch(() => {
+            state.count = 1;
+            state.count = 2;
+            state.count = 3;
+        });
+        // Both observers should be notified exactly once
+        expect(notifyCount1).toBe(1);
+        expect(notifyCount2).toBe(1);
+        observer1.dispose();
+        observer2.dispose();
+    });
+    it("should maintain correct state values after syncBatch", () => {
+        const state = createState({
+            count: 0,
+            name: "Alice",
+            items: [1, 2, 3],
+        });
+        syncBatch(() => {
+            state.count = 10;
+            state.name = "Bob";
+            state.items.push(4);
+            state.items[0] = 100;
+        });
+        expect(state.count).toBe(10);
+        expect(state.name).toBe("Bob");
+        expect(state.items).toEqual([100, 2, 3, 4]);
+    });
+    it("should not flush if exception thrown within syncBatch", () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        try {
+            syncBatch(() => {
+                state.count = 1;
+                throw new Error("Test error");
+            });
+        }
+        catch (e) {
+            // Expected error
+        }
+        // Should NOT have flushed since the batch was interrupted
+        expect(notifyCount).toBe(0);
+        // But state change still occurred
+        expect(state.count).toBe(1);
+        observer.dispose();
+    });
+    it("should deduplicate notifications for the same observer", () => {
+        const state = createState({ count: 0, name: "Alice" });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        state.name; // Track
+        dispose();
+        syncBatch(() => {
+            state.count = 1; // Triggers observer
+            state.name = "Bob"; // Triggers same observer again
+            state.count = 2; // Triggers observer yet again
+        });
+        // Should deduplicate and only notify once
+        expect(notifyCount).toBe(1);
+        observer.dispose();
+    });
+});
+describe("queue (async batching)", () => {
+    it("should queue updates and flush on microtask", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count; // Track
+        dispose();
+        // Make changes that will be queued
+        state.count = 1;
+        state.count = 2;
+        state.count = 3;
+        // Not yet notified (queued)
+        expect(notifyCount).toBe(0);
+        // Wait for microtask flush
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Should have notified once after flush
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(3);
+        observer.dispose();
+    });
+    it("should batch multiple async updates into one notification", async () => {
+        const state = createState({ count: 0, name: "Alice" });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        state.name;
+        dispose();
+        state.count = 1;
+        state.name = "Bob";
+        state.count = 2;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Should batch all updates into single notification
+        expect(notifyCount).toBe(1);
+        observer.dispose();
+    });
+    it("should handle separate async batches", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        dispose();
+        state.count = 1;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        const afterFirst = notifyCount;
+        state.count = 2;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        const afterSecond = notifyCount;
+        expect(afterFirst).toBe(1);
+        expect(afterSecond).toBe(2);
+        observer.dispose();
+    });
+});
+describe("syncBatch with nested async updates", () => {
+    it("should handle syncBatch inside async context", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        dispose();
+        // Async update
+        state.count = 1;
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        expect(notifyCount).toBe(1);
+        // Sync batch after async
+        syncBatch(() => {
+            state.count = 2;
+            state.count = 3;
+        });
+        expect(notifyCount).toBe(2); // +1 from sync batch
+        observer.dispose();
+    });
+    it("should handle async updates inside syncBatch callback", async () => {
+        const state = createState({ count: 0 });
+        let notifyCount = 0;
+        const observer = new Observer(() => {
+            notifyCount++;
+        });
+        const dispose = observer.observe();
+        state.count;
+        dispose();
+        syncBatch(() => {
+            state.count = 1;
+            // Trigger an async update from within syncBatch
+            setTimeout(() => {
+                state.count = 2;
+            }, 0);
+        });
+        // Sync batch should flush immediately
+        expect(notifyCount).toBe(1);
+        expect(state.count).toBe(1);
+        // Wait for async update
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        expect(notifyCount).toBe(2);
+        expect(state.count).toBe(2);
+        observer.dispose();
+    });
+});