rask-ui 0.2.5 → 0.2.7

package/dist/observation.test.js

@@ -1,113 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { Signal, Observer, getCurrentObserver } from "./observation";
-describe("Signal", () => {
-  it("should allow subscribing to notifications", () => {
-    const signal = new Signal();
-    const callback = vi.fn();
-    signal.subscribe(callback);
-    signal.notify();
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-  it("should return a disposer function", () => {
-    const signal = new Signal();
-    const callback = vi.fn();
-    const dispose = signal.subscribe(callback);
-    dispose();
-    signal.notify();
-    expect(callback).not.toHaveBeenCalled();
-  });
-  it("should handle multiple subscribers", () => {
-    const signal = new Signal();
-    const callback1 = vi.fn();
-    const callback2 = vi.fn();
-    signal.subscribe(callback1);
-    signal.subscribe(callback2);
-    signal.notify();
-    expect(callback1).toHaveBeenCalledTimes(1);
-    expect(callback2).toHaveBeenCalledTimes(1);
-  });
-  it("should allow unsubscribing individual callbacks", () => {
-    const signal = new Signal();
-    const callback1 = vi.fn();
-    const callback2 = vi.fn();
-    const dispose1 = signal.subscribe(callback1);
-    signal.subscribe(callback2);
-    dispose1();
-    signal.notify();
-    expect(callback1).not.toHaveBeenCalled();
-    expect(callback2).toHaveBeenCalledTimes(1);
-  });
-});
-describe("Observer", () => {
-  it("should track signals during observation", () => {
-    const callback = vi.fn();
-    const observer = new Observer(callback);
-    const signal = new Signal();
-    const dispose = observer.observe();
-    observer.subscribeSignal(signal);
-    dispose();
-    signal.notify();
-    return new Promise((resolve) => {
-      queueMicrotask(() => {
-        expect(callback).toHaveBeenCalledTimes(1);
-        resolve(undefined);
-      });
-    });
-  });
-  it("should clear signals when observing again", async () => {
-    let callCount = 0;
-    const observer = new Observer(() => {
-      callCount++;
-    });
-    const signal1 = new Signal();
-    const signal2 = new Signal();
-    // First observation
-    let dispose = observer.observe();
-    observer.subscribeSignal(signal1);
-    dispose();
-    // Second observation - should clear previous signals
-    dispose = observer.observe();
-    observer.subscribeSignal(signal2);
-    dispose();
-    // Notify first signal - should not trigger observer
-    signal1.notify();
-    await new Promise((resolve) => queueMicrotask(() => resolve()));
-    expect(callCount).toBe(0);
-    // Notify second signal - should trigger observer
-    signal2.notify();
-    await new Promise((resolve) => queueMicrotask(() => resolve()));
-    expect(callCount).toBe(1);
-  });
-  it("should dispose of all signal subscriptions", async () => {
-    const callback = vi.fn();
-    const observer = new Observer(callback);
-    const signal = new Signal();
-    const dispose = observer.observe();
-    observer.subscribeSignal(signal);
-    dispose();
-    observer.dispose();
-    signal.notify();
-    await new Promise((resolve) => queueMicrotask(() => resolve()));
-    expect(callback).not.toHaveBeenCalled();
-  });
-  it("should set current observer during observation", () => {
-    const observer = new Observer(() => {});
-    expect(getCurrentObserver()).toBeUndefined();
-    const dispose = observer.observe();
-    expect(getCurrentObserver()).toBe(observer);
-    dispose();
-    expect(getCurrentObserver()).toBeUndefined();
-  });
-  it("should handle nested observations with stack", () => {
-    const observer1 = new Observer(() => {});
-    const observer2 = new Observer(() => {});
-    const dispose1 = observer1.observe();
-    expect(getCurrentObserver()).toBe(observer1);
-    const dispose2 = observer2.observe();
-    expect(getCurrentObserver()).toBe(observer2);
-    dispose2();
-    expect(getCurrentObserver()).toBe(observer1);
-    dispose1();
-    expect(getCurrentObserver()).toBeUndefined();
-  });
-});

package/dist/render-test.d.ts

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

package/dist/render-test.d.ts.map

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

package/dist/render-test.js

@@ -1,21 +0,0 @@
-// Quick test to understand Snabbdom's behavior
-import { patch } from './render';
-import { h } from 'snabbdom';
-import { JSDOM } from 'jsdom';
-const dom = new JSDOM('<!DOCTYPE html><html><body><div id="app"></div></body></html>');
-global.window = dom.window;
-global.document = dom.window.document;
-const container = document.getElementById('app');
-const parent = container.parentElement;
-console.log('Before patch:');
-console.log('Container id:', container.id);
-console.log('Parent children:', parent.children.length);
-console.log('Parent innerHTML:', parent.innerHTML);
-const vnode = h('div', { props: { id: 'app' } }, [h('span', {}, 'Hello')]);
-const result = patch(container, vnode);
-console.log('\nAfter patch:');
-console.log('Result:', result);
-console.log('Result.elm:', result.elm);
-console.log('Parent children:', parent.children.length);
-console.log('Parent innerHTML:', parent.innerHTML);
-console.log('Container still in DOM?:', document.getElementById('app'));

package/dist/render.d.ts

@@ -1,7 +0,0 @@
-import { type VNode } from "snabbdom";
-import { type Component } from "./component";
-export declare const patch: (oldVnode: VNode | Element | DocumentFragment, vnode: VNode) => VNode;
-export type ChildNode = VNode | string | null | number;
-export declare function render(vnode: VNode, container: HTMLElement): VNode;
-export declare function jsx(type: string | Component<any>, props: Record<string, unknown>, children: ChildNode[]): VNode;
-//# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,KAAK,EAEX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAE9D,eAAO,MAAM,KAAK,uEAOhB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,SAK1D;AAED,wBAAgB,GAAG,CACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,QAAQ,EAAE,SAAS,EAAE,SAyEtB"}

package/dist/render.js

@@ -1,77 +0,0 @@
-import { init, classModule, propsModule, styleModule, eventListenersModule, attributesModule, h, } from "snabbdom";
-import { createComponent } from "./component";
-export const patch = init([
-    // Init patch function with chosen modules
-    classModule, // makes it easy to toggle classes
-    propsModule, // for setting properties on DOM elements
-    styleModule, // handles styling on elements with support for animations
-    eventListenersModule, // attaches event listeners
-    attributesModule,
-]);
-export function render(vnode, container) {
-    const style = document.createElement("style");
-    style.innerHTML = "component { display: contents; }";
-    document.head.appendChild(style);
-    return patch(container, vnode);
-}
-export function jsx(type, props, children) {
-    let flatChildren = children.flat();
-    if (typeof type === "string") {
-        const data = {};
-        for (const key in props) {
-            if (key === "key") {
-                data[key] = props[key];
-                continue;
-            }
-            if (key === "hook") {
-                data[key] = props[key];
-                continue;
-            }
-            if (key === "style") {
-                data.style = props[key];
-                continue;
-            }
-            if (key === "class") {
-                // Snabbdom's classModule expects an object like { 'class-name': true }
-                // If it's a string, convert it to the object format
-                const classValue = props[key];
-                if (typeof classValue === 'string') {
-                    data.class = { [classValue]: true };
-                }
-                else {
-                    data.class = classValue;
-                }
-                continue;
-            }
-            if (key === "ref") {
-                data.hook = data.hook || {};
-                const existingInsertHook = data.hook?.insert;
-                data.hook.insert = (vnode) => {
-                    existingInsertHook?.(vnode);
-                    props.ref(vnode.elm || null);
-                };
-                continue;
-            }
-            if (key.startsWith("on")) {
-                data.on = data.on || {};
-                data.on[key.substring(2).toLocaleLowerCase()] = props[key];
-                continue;
-            }
-            if (key.startsWith("data-") || key.startsWith("aria-")) {
-                data.attrs = data.attrs || {};
-                data.attrs[key] = props[key];
-                continue;
-            }
-            if (type === "svg") {
-                data.attrs = data.attrs || {};
-                data.attrs[key] = props[key];
-                continue;
-            }
-            data.props = data.props || {};
-            data.props[key] = props[key];
-        }
-        return h(type, data, flatChildren);
-    }
-    const maybeSingleChild = flatChildren.length === 1 ? flatChildren[0] : flatChildren;
-    return createComponent(type, props, maybeSingleChild);
-}

package/dist/suspense.d.ts

@@ -1,25 +0,0 @@
-import { VNode } from "snabbdom";
-export declare function createSuspense<T extends Record<string, Promise<any>>>(promises: T): {
-    [K in keyof T]: Awaited<T[K]>;
-};
-export declare function Suspense(props: {
-    fallback: VNode;
-    children: VNode | VNode[];
-}): () => VNode | VNode[];
-type SuspensePromiseState<T> = {
-    status: "pending";
-    value: null;
-    error: null;
-} | {
-    status: "resolved";
-    value: T;
-    error: null;
-} | {
-    status: "rejected";
-    value: null;
-    error: string;
-};
-export type SuspensePromise<T> = Promise<T> & SuspensePromiseState<T>;
-export declare function createSuspensePromise<T>(promise: Promise<T>): SuspensePromise<T>;
-export {};
-//# sourceMappingURL=suspense.d.ts.map

package/dist/suspense.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"suspense.d.ts","sourceRoot":"","sources":["../src/suspense.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,EACnE,QAAQ,EAAE,CAAC,GACV;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC9B,CAuBA;AAQD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,QAAQ,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;CAC3B,yBAmBA;AAED,KAAK,oBAAoB,CAAC,CAAC,IACvB;IACE,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAEtE,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAClB,eAAe,CAAC,CAAC,CAAC,CAgEpB"}

package/dist/suspense.js

@@ -1,97 +0,0 @@
-import { getCurrentComponent } from "./component";
-import { createState } from "./createState";
-import { getCurrentObserver, Signal } from "./observation";
-export function createSuspense(promises) {
-    let currentComponent = getCurrentComponent();
-    if (!currentComponent) {
-        throw new Error("createSuspense must be used in the setup of a component");
-    }
-    const proxy = {};
-    for (const key in promises) {
-        const promise = promises[key];
-        const suspensePromise = isSuspensePromise(promise)
-            ? promise
-            : createSuspensePromise(promise);
-        currentComponent.notifyAsync(suspensePromise);
-        Object.defineProperty(proxy, key, {
-            get() {
-                return suspensePromise.value;
-            },
-        });
-    }
-    return proxy;
-}
-function isSuspensePromise(promise) {
-    return "status" in promise;
-}
-export function Suspense(props) {
-    const currentComponent = getCurrentComponent();
-    const state = createState({
-        suspendingPromises: [],
-    });
-    currentComponent.onAsync((promise) => {
-        state.suspendingPromises = state.suspendingPromises.concat(promise);
-    });
-    return () => {
-        const isAllResolved = state.suspendingPromises.every((promise) => promise.status === "resolved");
-        console.log(isAllResolved);
-        return isAllResolved ? props.children : props.fallback;
-    };
-}
-export function createSuspensePromise(promise) {
-    const signal = new Signal();
-    const state = {
-        error: null,
-        status: "pending",
-        value: null,
-    };
-    Object.defineProperty(promise, "value", {
-        get() {
-            const observer = getCurrentObserver();
-            if (observer) {
-                observer.subscribeSignal(signal);
-            }
-            return state.value;
-        },
-        set(newValue) {
-            state.value = newValue;
-            signal.notify();
-        },
-    });
-    Object.defineProperty(promise, "error", {
-        get() {
-            const observer = getCurrentObserver();
-            if (observer) {
-                observer.subscribeSignal(signal);
-            }
-            return state.error;
-        },
-    });
-    Object.defineProperty(promise, "status", {
-        get() {
-            const observer = getCurrentObserver();
-            if (observer) {
-                observer.subscribeSignal(signal);
-            }
-            return state.status;
-        },
-    });
-    promise
-        .then((value) => {
-        Object.assign(state, {
-            value,
-            error: null,
-            status: "resolved",
-        });
-        signal.notify();
-    })
-        .catch((error) => {
-        Object.assign(state, {
-            value: null,
-            error: String(error),
-            status: "rejected",
-        });
-        signal.notify();
-    });
-    return promise;
-}

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

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

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

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

package/dist/tests/class.test.js

@@ -1,185 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { jsx, render } from "../vdom";
-import { createState } from "../createState";
-describe("Class Property Support", () => {
-    it("should map string class to className", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: "test-class" }), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("test-class");
-    });
-    it("should handle multiple classes as string", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: "class-1 class-2 class-3" }), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("class-1 class-2 class-3");
-    });
-    it("should handle object notation with true values", () => {
-        const container = document.createElement("div");
-        render(jsx("div", {
-            class: {
-                active: true,
-                visible: true,
-                hidden: false,
-            },
-        }), container);
-        const div = container.querySelector("div");
-        expect(div?.classList.contains("active")).toBe(true);
-        expect(div?.classList.contains("visible")).toBe(true);
-        expect(div?.classList.contains("hidden")).toBe(false);
-    });
-    it("should handle mixed object notation", () => {
-        const container = document.createElement("div");
-        render(jsx("div", {
-            class: {
-                "class-1": true,
-                "class-2": false,
-                "class-3": true,
-                "class-4": false,
-            },
-        }), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("class-1 class-3");
-    });
-    it("should handle empty object notation", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: {} }), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("");
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should handle all false object notation", () => {
-        const container = document.createElement("div");
-        render(jsx("div", {
-            class: {
-                "class-1": false,
-                "class-2": false,
-            },
-        }), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("");
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should update classes when object notation changes", async () => {
-        const container = document.createElement("div");
-        let stateFn;
-        const App = () => {
-            const state = createState({ isActive: true, isVisible: false });
-            stateFn = state;
-            return () => jsx("div", {
-                class: {
-                    active: state.isActive,
-                    visible: state.isVisible,
-                },
-            });
-        };
-        render(jsx(App, {}), container);
-        const div = container.querySelector("div");
-        expect(div?.classList.contains("active")).toBe(true);
-        expect(div?.classList.contains("visible")).toBe(false);
-        stateFn.isActive = false;
-        stateFn.isVisible = true;
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(div?.classList.contains("active")).toBe(false);
-        expect(div?.classList.contains("visible")).toBe(true);
-    });
-    it("should handle hyphenated class names in object notation", () => {
-        const container = document.createElement("div");
-        render(jsx("div", {
-            class: {
-                "my-custom-class": true,
-                "another-class-name": true,
-                "disabled-class": false,
-            },
-        }), container);
-        const div = container.querySelector("div");
-        expect(div?.classList.contains("my-custom-class")).toBe(true);
-        expect(div?.classList.contains("another-class-name")).toBe(true);
-        expect(div?.classList.contains("disabled-class")).toBe(false);
-    });
-    it("should prefer class over className when both provided", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: "from-class", className: "from-className" }), container);
-        const div = container.querySelector("div");
-        // class should take precedence
-        expect(div?.className).toBe("from-class");
-    });
-    it("should work with nested components", () => {
-        const container = document.createElement("div");
-        const Child = () => {
-            return () => jsx("span", { class: "child-class" });
-        };
-        const Parent = () => {
-            return () => jsx("div", {
-                class: "parent-class",
-                children: jsx(Child, {}),
-            });
-        };
-        render(jsx(Parent, {}), container);
-        const parentDiv = container.querySelector("div");
-        const childSpan = container.querySelector("span");
-        expect(parentDiv?.className).toBe("parent-class");
-        expect(childSpan?.className).toBe("child-class");
-    });
-    it("should handle undefined and null class values", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: undefined }), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("");
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should remove class attribute when empty string is provided", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: "" }), container);
-        const div = container.querySelector("div");
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should remove class attribute when null is provided", () => {
-        const container = document.createElement("div");
-        render(jsx("div", { class: null }), container);
-        const div = container.querySelector("div");
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should remove class attribute when object notation results in empty string", () => {
-        const container = document.createElement("div");
-        render(jsx("div", {
-            class: {
-                active: false,
-                visible: false,
-            },
-        }), container);
-        const div = container.querySelector("div");
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should remove class attribute when updating from non-empty to empty string", async () => {
-        const container = document.createElement("div");
-        let stateFn;
-        const App = () => {
-            const state = createState({ className: "initial" });
-            stateFn = state;
-            return () => jsx("div", { class: state.className });
-        };
-        render(jsx(App, {}), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("initial");
-        expect(div?.hasAttribute("class")).toBe(true);
-        stateFn.className = "";
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(div?.hasAttribute("class")).toBe(false);
-    });
-    it("should handle dynamic string class updates", async () => {
-        const container = document.createElement("div");
-        let stateFn;
-        const App = () => {
-            const state = createState({ className: "initial" });
-            stateFn = state;
-            return () => jsx("div", { class: state.className });
-        };
-        render(jsx(App, {}), container);
-        const div = container.querySelector("div");
-        expect(div?.className).toBe("initial");
-        stateFn.className = "updated";
-        await new Promise((resolve) => setTimeout(resolve, 0));
-        expect(div?.className).toBe("updated");
-    });
-});

package/dist/tests/complex-rendering.test.d.ts

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

package/dist/tests/complex-rendering.test.d.ts.map

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