@tempots/dom 5.0.0 → 5.0.2

package/README.md

@@ -0,0 +1 @@
+# @tempots/dom

package/clean.d.ts

@@ -0,0 +1,2 @@
+export type Clear = (removeTree: boolean) => void;
+export type Clean = () => void;

package/clean.js

@@ -0,0 +1 @@
+export {};

package/components/Attribute.d.ts

@@ -0,0 +1,15 @@
+import { type DOMContext } from '../dom-context';
+import { type Signal } from '../prop';
+import { type Clear } from '../clean';
+import { type Renderable } from '../renderable';
+export declare class AttributeImpl implements Renderable {
+    private readonly name;
+    private readonly value;
+    constructor(name: string, value: Signal<string>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface AttributeProps {
+    name: string;
+    value: Signal<string>;
+}
+export declare function Attribute({ name, value }: AttributeProps): Renderable;

package/components/Attribute.js

@@ -0,0 +1,16 @@
+import { subscribeToSignal } from './Text';
+export class AttributeImpl {
+    name;
+    value;
+    constructor(name, value) {
+        this.name = name;
+        this.value = value;
+    }
+    appendTo = (ctx) => {
+        const [set, clear] = ctx.createAttribute(this.name, this.value.get());
+        return subscribeToSignal(this.value, set, clear);
+    };
+}
+export function Attribute({ name, value }) {
+    return new AttributeImpl(name, value);
+}

package/components/BooleanAttribute.d.ts

@@ -0,0 +1,15 @@
+import { type DOMContext } from '../dom-context';
+import { type Signal } from '../prop';
+import { type Clear } from '../clean';
+import { type Renderable } from '../renderable';
+export declare class BooleanAttributeImpl implements Renderable {
+    private readonly name;
+    private readonly value;
+    constructor(name: string, value: Signal<boolean>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface BooleanAttributeProps {
+    name: string;
+    value: Signal<boolean>;
+}
+export declare function BooleanAttribute({ name, value }: BooleanAttributeProps): Renderable;

package/components/BooleanAttribute.js

@@ -0,0 +1,16 @@
+import { subscribeToSignal } from './Text';
+export class BooleanAttributeImpl {
+    name;
+    value;
+    constructor(name, value) {
+        this.name = name;
+        this.value = value;
+    }
+    appendTo = (ctx) => {
+        const [set, clear] = ctx.createBooleanAttribute(this.name, this.value.get());
+        return subscribeToSignal(this.value, set, clear);
+    };
+}
+export function BooleanAttribute({ name, value }) {
+    return new BooleanAttributeImpl(name, value);
+}

package/components/ClassName.d.ts

@@ -0,0 +1,13 @@
+import { type Signal } from '../prop';
+import { type Renderable } from '../renderable';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+export declare class ClassNameImpl implements Renderable {
+    private readonly cls;
+    constructor(cls: Signal<string> | Signal<string | undefined>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface ClassNameProps {
+    value: Signal<string> | Signal<string | undefined>;
+}
+export declare function ClassName({ value }: ClassNameProps): Renderable;

package/components/ClassName.js

@@ -0,0 +1,14 @@
+import { subscribeToSignal } from './Text';
+export class ClassNameImpl {
+    cls;
+    constructor(cls) {
+        this.cls = cls;
+    }
+    appendTo = (ctx) => {
+        const [set, clear] = ctx.createClass(this.cls.get() ?? '');
+        return subscribeToSignal(this.cls.map(v => v ?? ''), set, clear);
+    };
+}
+export function ClassName({ value }) {
+    return new ClassNameImpl(value);
+}

package/components/El.d.ts

@@ -0,0 +1,15 @@
+import { type DOMContext } from '../dom-context';
+import { type Clear } from '../clean';
+import { type Renderable } from '../renderable';
+import { type JSX } from '../jsx';
+export declare class ElImpl implements Renderable {
+    private readonly tagName;
+    private readonly children;
+    constructor(tagName: string, children: Renderable[]);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface ElProps {
+    tagName: string;
+    children?: JSX.DOMNode;
+}
+export declare function El({ tagName, children }: ElProps): Renderable;

package/components/El.js

@@ -0,0 +1,21 @@
+import { makeRenderables } from '../jsx-runtime';
+export class ElImpl {
+    tagName;
+    children;
+    constructor(tagName, children) {
+        this.tagName = tagName;
+        this.children = children;
+    }
+    appendTo = (ctx) => {
+        const newCtx = ctx.makeElement(this.tagName);
+        const clears = this.children.map(child => child.appendTo(newCtx));
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                clears.forEach(clear => { clear(false); });
+            });
+        };
+    };
+}
+export function El({ tagName, children }) {
+    return new ElImpl(tagName, makeRenderables(children));
+}

package/components/FadeIn.d.ts

@@ -0,0 +1,18 @@
+import { Clear } from "../clean";
+import { DOMContext } from "../dom-context";
+import { Renderable } from "../renderable";
+import { Animatable } from "./animatable";
+export declare class FadeInImpl implements Renderable {
+    private readonly end;
+    private readonly start;
+    private readonly duration;
+    private readonly delay;
+    constructor(end: Animatable, start: Animatable | undefined, duration: number, delay: number);
+    appendTo(ctx: DOMContext): Clear;
+}
+export interface FadeInProps extends Animatable {
+    start?: Animatable;
+    duration?: number;
+    delay?: number;
+}
+export declare function FadeIn(props: FadeInProps): Renderable;

package/components/FadeIn.js

@@ -0,0 +1,52 @@
+import { getComputedAnimatable, applyInterpolatedAnimatable, applyAnimatable } from "./animatable";
+export class FadeInImpl {
+    end;
+    start;
+    duration;
+    delay;
+    constructor(end, start, duration, delay) {
+        this.end = end;
+        this.start = start;
+        this.duration = duration;
+        this.delay = delay;
+    }
+    appendTo(ctx) {
+        const el = ctx.getElement();
+        const start = (() => {
+            if (this.start != null) {
+                applyAnimatable(el, this.start);
+                return this.start;
+            }
+            else {
+                return getComputedAnimatable(el, this.end);
+            }
+        })();
+        const startTime = Date.now() + this.delay;
+        const { duration, end } = this;
+        let nextFrameId = null;
+        function frame() {
+            const now = Date.now();
+            if (now < startTime) {
+                nextFrameId = requestAnimationFrame(frame);
+                return;
+            }
+            const progress = Math.min((now - startTime) / duration, 1);
+            applyInterpolatedAnimatable(el, start, end, progress);
+            if (progress < 1) {
+                nextFrameId = requestAnimationFrame(frame);
+            }
+            else {
+                nextFrameId = null;
+            }
+        }
+        frame();
+        return (_) => {
+            if (nextFrameId != null)
+                cancelAnimationFrame(nextFrameId);
+        };
+    }
+}
+export function FadeIn(props) {
+    const { start, duration, delay, ...end } = props;
+    return new FadeInImpl(end, start, duration ?? 200, delay ?? 0);
+}

package/components/FadeOut.d.ts

@@ -0,0 +1,16 @@
+import { Clear } from "../clean";
+import { DOMContext } from "../dom-context";
+import { Renderable } from "../renderable";
+import { Animatable } from "./animatable";
+export declare class FadeOutImpl implements Renderable {
+    private readonly end;
+    private readonly duration;
+    private readonly delay;
+    constructor(end: Animatable, duration: number, delay: number);
+    appendTo(ctx: DOMContext): Clear;
+}
+export interface FadeOutProps extends Animatable {
+    duration?: number;
+    delay?: number;
+}
+export declare function FadeOut(props: FadeOutProps): Renderable;

package/components/FadeOut.js

@@ -0,0 +1,39 @@
+import { getComputedAnimatable, applyInterpolatedAnimatable } from "./animatable";
+export class FadeOutImpl {
+    end;
+    duration;
+    delay;
+    constructor(end, duration, delay) {
+        this.end = end;
+        this.duration = duration;
+        this.delay = delay;
+    }
+    appendTo(ctx) {
+        const el = ctx.getElement();
+        const { duration, end } = this;
+        return ctx.delayClear((removeTree, clear) => {
+            const start = getComputedAnimatable(el, this.end);
+            const startTime = Date.now() + this.delay;
+            function frame() {
+                const now = Date.now();
+                if (now < startTime) {
+                    requestAnimationFrame(frame);
+                    return;
+                }
+                const progress = Math.min((now - startTime) / duration, 1);
+                applyInterpolatedAnimatable(el, start, end, progress);
+                if (progress < 1) {
+                    requestAnimationFrame(frame);
+                }
+                else {
+                    clear();
+                }
+            }
+            requestAnimationFrame(frame);
+        });
+    }
+}
+export function FadeOut(props) {
+    const { duration, delay, ...end } = props;
+    return new FadeOutImpl(end, duration ?? 200, delay ?? 0);
+}

package/components/For.d.ts

@@ -0,0 +1,7 @@
+import { type Signal } from '../prop';
+import { type JSX } from '../jsx-runtime';
+export interface ForProps<T> {
+    of: Signal<T[]>;
+    children?: (value: Signal<T>, index: number) => JSX.DOMNode;
+}
+export declare function For<T>({ of, children: render }: ForProps<T>): JSX.DOMNode;

package/components/For.js

@@ -0,0 +1,15 @@
+import { RepeatImpl } from './Repeat';
+import { makeRenderable } from '../jsx-runtime';
+import { FragmentImpl } from './Fragment';
+import { OnRemoveImpl } from './OnRemove';
+// <For of={values}>{(value) => <span>{value}</span>}</For>
+export function For({ of, children: render }) {
+    const times = of.map(v => v.length);
+    return new RepeatImpl(times, (index) => {
+        const value = of.at(index);
+        return new FragmentImpl([
+            makeRenderable(render?.(value, index)),
+            new OnRemoveImpl(value.clean)
+        ]);
+    });
+}

package/components/Fragment.d.ts

@@ -0,0 +1,12 @@
+import { type Renderable } from '../renderable';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type JSX } from '../jsx';
+export declare class FragmentImpl implements Renderable {
+    private readonly children;
+    constructor(children: Renderable[]);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export declare function Fragment({ children }: {
+    children: JSX.DOMNode;
+}): Renderable;

package/components/Fragment.js

@@ -0,0 +1,16 @@
+import { makeRenderables } from '../jsx-runtime';
+export class FragmentImpl {
+    children;
+    constructor(children) {
+        this.children = children;
+    }
+    appendTo = (ctx) => {
+        const clears = this.children.map(child => child.appendTo(ctx));
+        return (removeTree) => {
+            clears.forEach(clear => { clear(removeTree); });
+        };
+    };
+}
+export function Fragment({ children }) {
+    return new FragmentImpl(makeRenderables(children));
+}

package/components/HiddenWhenEmpty.d.ts

@@ -0,0 +1,7 @@
+import { type Renderable } from '../renderable';
+import { type DOMContext } from '../dom-context';
+import { type Clear } from '../clean';
+export declare class HiddenWhenEmptyImpl implements Renderable {
+    appendTo(ctx: DOMContext): Clear;
+}
+export declare function HiddenWhenEmpty(): HiddenWhenEmptyImpl;

package/components/HiddenWhenEmpty.js

@@ -0,0 +1,12 @@
+export class HiddenWhenEmptyImpl {
+    appendTo(ctx) {
+        ctx.setStyle(':empty', 'display: none');
+        return (removeTree) => {
+            if (removeTree)
+                ctx.setStyle(':empty', null);
+        };
+    }
+}
+export function HiddenWhenEmpty() {
+    return new HiddenWhenEmptyImpl();
+}

package/components/If.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from '../jsx';
+import { type Signal } from '../prop';
+export interface IfProps {
+    is: Signal<boolean>;
+    then?: JSX.DOMNode;
+    otherwise?: JSX.DOMNode;
+}
+export declare function If({ is, then, otherwise }: IfProps): JSX.DOMNode;
+export interface WhenProps {
+    is: Signal<boolean>;
+    children?: JSX.DOMNode;
+}
+export declare function When({ is, children }: WhenProps): JSX.DOMNode;
+export declare function Unless({ is, children }: WhenProps): JSX.DOMNode;

package/components/If.js

@@ -0,0 +1,19 @@
+import { OneOfImpl } from './OneOf';
+export function If({ is, then, otherwise }) {
+    return new OneOfImpl(is.map(v => v ? [1, true] : [2, false]), {
+        1: () => then,
+        2: () => otherwise
+    });
+}
+export function When({ is, children }) {
+    return new OneOfImpl(is.map(v => v ? [1, true] : [2, false]), {
+        1: () => children,
+        2: () => null
+    });
+}
+export function Unless({ is, children }) {
+    return new OneOfImpl(is.map(v => v ? [1, true] : [2, false]), {
+        1: () => null,
+        2: () => children
+    });
+}

package/components/InnerHTML.d.ts

@@ -0,0 +1,13 @@
+import { type Signal } from '../prop';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+export declare class InnerHTMLImpl implements Renderable {
+    private readonly html;
+    constructor(html: Signal<string> | Signal<string | undefined>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface InnerHTMLProps {
+    html: Signal<string> | Signal<string | undefined>;
+}
+export declare function InnerHTML({ html }: InnerHTMLProps): InnerHTMLImpl;

package/components/InnerHTML.js

@@ -0,0 +1,23 @@
+export class InnerHTMLImpl {
+    html;
+    constructor(html) {
+        this.html = html;
+    }
+    appendTo = (ctx) => {
+        const el = ctx.getElement();
+        const previous = el.innerHTML;
+        el.innerHTML = this.html.get() ?? '';
+        const cancel = this.html.subscribe(value => {
+            el.innerHTML = value ?? '';
+        });
+        return (removeTree) => {
+            cancel();
+            if (removeTree) {
+                el.innerHTML = previous;
+            }
+        };
+    };
+}
+export function InnerHTML({ html }) {
+    return new InnerHTMLImpl(html);
+}

package/components/Lifecycle.d.ts

@@ -0,0 +1,14 @@
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+export declare class LifecycleImpl implements Renderable {
+    private readonly onMount;
+    private readonly onUnmount;
+    constructor(onMount: (el: HTMLElement) => void, onUnmount: (el: HTMLElement) => void);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface LifecycleProps {
+    onMount?: (el: HTMLElement) => void;
+    onUnmount?: (el: HTMLElement) => void;
+}
+export declare function Lifecycle({ onMount, onUnmount }: LifecycleProps): Renderable;

package/components/Lifecycle.js

@@ -0,0 +1,18 @@
+export class LifecycleImpl {
+    onMount;
+    onUnmount;
+    constructor(onMount, onUnmount) {
+        this.onMount = onMount;
+        this.onUnmount = onUnmount;
+    }
+    appendTo = (ctx) => {
+        this.onMount(ctx.getElement());
+        return () => {
+            this.onUnmount(ctx.getElement());
+        };
+    };
+}
+export function Lifecycle({ onMount, onUnmount }) {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return new LifecycleImpl(onMount ?? (() => { }), onUnmount ?? (() => { }));
+}

package/components/Match.d.ts

@@ -0,0 +1,33 @@
+import { type Signal } from '../prop';
+import { type DOMContext } from '../dom-context';
+import { type AnyKey } from './OneOf';
+import { type JSX } from '../jsx-runtime';
+import { type Clear } from '../clean';
+export declare class MatchImpl<T extends {
+    [_ in K]: any;
+}, K extends keyof T> {
+    private readonly on;
+    private readonly using;
+    private readonly matches;
+    constructor(on: Signal<T>, using: K, matches: {
+        [KIND in T[K]]: (_: Signal<T & {
+            [KK in K]: KIND extends T[KK] ? KIND : never;
+        }>) => JSX.DOMNode;
+    });
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export type MatchProps<T extends {
+    [_ in K]: AnyKey;
+}, K extends keyof T> = {
+    on: Signal<T>;
+    using: K;
+} & {
+    matches: {
+        [KIND in T[K]]: (_: Signal<T & {
+            [KK in K]: KIND extends T[KK] ? KIND : never;
+        }>) => JSX.DOMNode;
+    };
+};
+export declare function Match<T extends {
+    [_ in K]: AnyKey;
+}, K extends keyof T>({ on, using, matches }: MatchProps<T, K>): JSX.DOMNode;

package/components/Match.js

@@ -0,0 +1,44 @@
+import { makeRenderable } from '../jsx-runtime';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class MatchImpl {
+    on;
+    using;
+    matches;
+    constructor(on, using, matches) {
+        this.on = on;
+        this.using = using;
+        this.matches = matches;
+    }
+    appendTo = (ctx) => {
+        let newCtx = ctx.makeReference();
+        const value = this.on.get();
+        let key = value[this.using];
+        let derived = this.on.map(v => v);
+        let renderable = makeRenderable(this.matches[key](derived));
+        let clear = renderable.appendTo(newCtx);
+        const cancel = this.on.subscribe(newValue => {
+            const newKey = newValue[this.using];
+            if (newKey === key)
+                return;
+            newCtx.requestClear(true, () => {
+                clear(true);
+                derived.clean();
+                key = newKey;
+                derived = this.on.map(v => v);
+                newCtx = newCtx.makeReference();
+                renderable = makeRenderable(this.matches[key](derived));
+                clear = renderable.appendTo(newCtx);
+            });
+        });
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                cancel();
+                derived.clean();
+                clear(removeTree);
+            });
+        };
+    };
+}
+export function Match({ on, using, matches }) {
+    return new MatchImpl(on, using, matches);
+}

package/components/NotEmpty.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource .. */
+import { type Signal } from '../prop';
+import { type AnyKey } from './OneOf';
+import { type JSX } from '../jsx-runtime';
+export interface NotEmptyProps<T> {
+    on: Signal<T>;
+    whenEmpty?: JSX.DOMNode;
+    display: JSX.DOMNode;
+}
+export declare function NotEmpty<T extends unknown[] | Record<AnyKey, unknown>>({ on, display, whenEmpty }: NotEmptyProps<T>): JSX.DOMNode;

package/components/NotEmpty.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "../jsx-runtime";
+import { If } from './If';
+function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+}
+// <NotEmpty on={maybevalue} whenEmpty={<span>nothing to show</span>}}>{value => value.toText()}</NotEmpty>
+export function NotEmpty({ on, display, whenEmpty }) {
+    return (_jsx(If, { is: on.map((v) => 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Array.isArray(v) ? v.length > 0 : v != null && !isEmpty(v)), then: display, otherwise: whenEmpty }));
+}

package/components/On.d.ts

@@ -0,0 +1,15 @@
+import { type Renderable } from '../renderable';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+export type OnFn<T> = (value: T) => void;
+export declare class OnImpl<T> implements Renderable {
+    private readonly name;
+    private readonly handler;
+    constructor(name: string, handler: OnFn<T>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface OnProps<T> {
+    name: string;
+    handler: OnFn<T>;
+}
+export declare function On<T>({ name, handler }: OnProps<T>): Renderable;

package/components/On.js

@@ -0,0 +1,14 @@
+export class OnImpl {
+    name;
+    handler;
+    constructor(name, handler) {
+        this.name = name;
+        this.handler = handler;
+    }
+    appendTo = (ctx) => {
+        return ctx.createHandler(this.name, this.handler);
+    };
+}
+export function On({ name, handler }) {
+    return new OnImpl(name, handler);
+}

package/components/OnRemove.d.ts

@@ -0,0 +1,11 @@
+import { type Clear } from '../clean';
+import { type Renderable } from '../renderable';
+export declare class OnRemoveImpl implements Renderable {
+    private readonly clear;
+    constructor(clear: Clear);
+    readonly appendTo: () => Clear;
+}
+export interface OnRemoveProps {
+    clear: Clear;
+}
+export declare function OnRemove(props: OnRemoveProps): OnRemoveImpl;

package/components/OnRemove.js

@@ -0,0 +1,14 @@
+export class OnRemoveImpl {
+    clear;
+    constructor(clear) {
+        this.clear = clear;
+    }
+    appendTo = () => {
+        return (removeTree) => {
+            this.clear(removeTree);
+        };
+    };
+}
+export function OnRemove(props) {
+    return new OnRemoveImpl(props.clear);
+}

package/components/OneOf.d.ts

@@ -0,0 +1,20 @@
+import { type Signal } from '../prop';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+import { type JSX } from '../jsx';
+export type AnyKey = string | number | symbol;
+export declare class OneOfImpl<T extends [AnyKey, unknown]> implements Renderable {
+    private readonly match;
+    private readonly cases;
+    constructor(match: Signal<T>, cases: {
+        [KK in T[0]]: (value: Signal<T[1]>) => JSX.DOMNode;
+    });
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export type OneOfProps<T extends [AnyKey, unknown]> = {
+    match: Signal<T>;
+} & {
+    [KK in T[0]]: (value: Signal<T[1]>) => JSX.DOMNode;
+};
+export declare function OneOf<T extends [AnyKey, unknown]>(props: OneOfProps<T>): JSX.DOMNode;