@tempots/dom 5.0.0 → 5.0.2

package/components/OneOf.js

@@ -0,0 +1,45 @@
+import { Prop } from '../prop';
+import { makeRenderable } from '../jsx-runtime';
+export class OneOfImpl {
+    match;
+    cases;
+    constructor(match, cases) {
+        this.match = match;
+        this.cases = cases;
+    }
+    appendTo = (ctx) => {
+        const pair = this.match.get();
+        let key = pair[0];
+        const value = pair[1];
+        const stableCtx = ctx.makeReference();
+        let prop = new Prop(value);
+        let newCtx = stableCtx.makeReference();
+        let clear = makeRenderable(this.cases[key](prop)).appendTo(newCtx);
+        const cancel = this.match.subscribe(([newKey, newValue]) => {
+            if (newKey !== key) {
+                newCtx.requestClear(true, () => {
+                    newCtx = stableCtx.makeReference();
+                    key = newKey;
+                    prop.clean();
+                    prop = new Prop(newValue);
+                    clear(true);
+                    clear = makeRenderable(this.cases[key](prop)).appendTo(newCtx);
+                });
+            }
+            else {
+                prop.set(newValue);
+            }
+        });
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                cancel();
+                prop.clean();
+                stableCtx.requestClear(removeTree, () => { });
+            });
+        };
+    };
+}
+// <OneOf match={counter.map(v => v % 2 == 0 ? [1, "odd"] : [2, "even"])} 1={t => <b>{t}</b>} 2={t => <i>{t}</i>} /
+export function OneOf(props) {
+    return new OneOfImpl(props.match, props);
+}

package/components/Portal.d.ts

@@ -0,0 +1,15 @@
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+import { type JSX } from '../jsx';
+export declare class PortalImpl implements Renderable {
+    private readonly selector;
+    private readonly children;
+    constructor(selector: string, children: JSX.DOMNode);
+    appendTo(ctx: DOMContext): Clear;
+}
+export interface PortalProps {
+    selector: string;
+    children?: JSX.DOMNode;
+}
+export declare function Portal(props: PortalProps): JSX.DOMNode;

package/components/Portal.js

@@ -0,0 +1,20 @@
+import { render } from '../render';
+import { makeRenderable } from '../jsx-runtime';
+export class PortalImpl {
+    selector;
+    children;
+    constructor(selector, children) {
+        this.selector = selector;
+        this.children = children;
+    }
+    appendTo(ctx) {
+        const element = ctx.getDocument().querySelector(this.selector);
+        if (element === null) {
+            throw new Error(`Cannot find element by selector: ${this.selector}`);
+        }
+        return render(makeRenderable(this.children), element);
+    }
+}
+export function Portal(props) {
+    return new PortalImpl(props.selector, props.children);
+}

package/components/Property.d.ts

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

package/components/Property.js

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

package/components/Provider.d.ts

@@ -0,0 +1,28 @@
+import { type Clear } from '../clean';
+import { type DOMContext, type ProviderMark } from '../dom-context';
+import { type Renderable } from '../renderable';
+import { type JSX } from '../jsx';
+export declare class ProviderImpl<T> implements Renderable {
+    private readonly mark;
+    private readonly provider;
+    private readonly children;
+    constructor(mark: ProviderMark<T>, provider: T, children: JSX.DOMNode);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface ProviderProps<T> {
+    mark: ProviderMark<T>;
+    value: T;
+    children?: JSX.DOMNode;
+}
+export declare function Provider<T>({ mark, value, children }: ProviderProps<T>): JSX.DOMNode;
+export declare class ConsumerImpl<T> implements Renderable {
+    private readonly mark;
+    private readonly children;
+    constructor(mark: ProviderMark<T>, children: (provider: T) => JSX.DOMNode);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface ConsumerProps<T> {
+    mark: ProviderMark<T>;
+    children?: (provider: T) => JSX.DOMNode;
+}
+export declare function Consumer<T>({ mark, children }: ConsumerProps<T>): JSX.DOMNode;

package/components/Provider.js

@@ -0,0 +1,44 @@
+import { makeRenderable } from '../jsx-runtime';
+export class ProviderImpl {
+    mark;
+    provider;
+    children;
+    constructor(mark, provider, children) {
+        this.mark = mark;
+        this.provider = provider;
+        this.children = children;
+    }
+    appendTo = (ctx) => {
+        const newCtx = ctx.withProvider(this.mark, this.provider);
+        const clear = makeRenderable(this.children).appendTo(newCtx);
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                clear(removeTree);
+            });
+        };
+    };
+}
+export function Provider({ mark, value, children }) {
+    return new ProviderImpl(mark, value, children);
+}
+export class ConsumerImpl {
+    mark;
+    children;
+    constructor(mark, children) {
+        this.mark = mark;
+        this.children = children;
+    }
+    appendTo = (ctx) => {
+        const provider = ctx.getProvider(this.mark);
+        if (provider == null) {
+            throw new Error('No provider found for mark');
+        }
+        const clear = makeRenderable(this.children(provider)).appendTo(ctx);
+        return (removeTree) => {
+            clear(removeTree);
+        };
+    };
+}
+export function Consumer({ mark, children }) {
+    return new ConsumerImpl(mark, children ?? (() => []));
+}

package/components/Repeat.d.ts

@@ -0,0 +1,15 @@
+import { type Signal } from '../prop';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+export declare class RepeatImpl implements Renderable {
+    private readonly times;
+    private readonly children;
+    constructor(times: Signal<number>, children: (index: number) => Renderable);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface RepeatProps {
+    times: Signal<number>;
+    children?: (index: number) => Renderable;
+}
+export declare function Repeat(props: RepeatProps): Renderable;

package/components/Repeat.js

@@ -0,0 +1,33 @@
+import { Fragment } from './Fragment';
+export class RepeatImpl {
+    times;
+    children;
+    constructor(times, children) {
+        this.times = times;
+        this.children = children;
+    }
+    appendTo = (ctx) => {
+        const newCtx = ctx.makeReference();
+        const count = this.times.get();
+        const clears = new Array(count);
+        for (let i = 0; i < count; i++) {
+            clears[i] = this.children(i).appendTo(newCtx);
+        }
+        const cancel = this.times.subscribe((newCount) => {
+            while (newCount < clears.length) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                clears.pop()(true);
+            }
+            for (let i = clears.length; i < newCount; i++) {
+                clears[i] = this.children(i).appendTo(newCtx);
+            }
+        });
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                cancel();
+                clears.forEach(clear => { clear(removeTree); });
+            });
+        };
+    };
+}
+export function Repeat(props) { return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] }))); }

package/components/Shadow.js

@@ -0,0 +1 @@
+"use strict";

package/components/Show.d.ts

@@ -0,0 +1,20 @@
+/** @jsxImportSource .. */
+import { type Signal } from '../prop';
+import { type Renderable } from '../renderable';
+import { type JSX } from '../jsx';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+export type Condition<T> = Signal<T | null | undefined> | Signal<T | undefined> | Signal<T | null> | Signal<T>;
+export declare class ShowImpl<T> implements Renderable {
+    private readonly on;
+    private readonly otherwise;
+    private readonly children;
+    constructor(on: Condition<T>, otherwise: JSX.DOMNode, children: (value: Signal<NonNullable<T>>) => JSX.DOMNode);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface ShowProps<T> {
+    when: Condition<T>;
+    otherwise?: JSX.DOMNode;
+    children?: (value: Signal<NonNullable<T>>) => JSX.DOMNode;
+}
+export declare function Show<T>({ when, children, otherwise }: ShowProps<T>): ShowImpl<T>;

package/components/Show.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment } from "../jsx-runtime";
+import { If } from './If';
+import { makeRenderable } from '../jsx-runtime';
+export class ShowImpl {
+    on;
+    otherwise;
+    children;
+    constructor(on, otherwise, children) {
+        this.on = on;
+        this.otherwise = otherwise;
+        this.children = children;
+    }
+    appendTo = (ctx) => {
+        const condition = this.on.map(v => v != null);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const el = makeRenderable(_jsx(If, { is: condition, then: this.children(this.on), otherwise: this.otherwise }));
+        return el.appendTo(ctx);
+    };
+}
+export function Show({ when, children, otherwise }) {
+    return new ShowImpl(when, otherwise, children ?? (() => _jsx(_Fragment, {})));
+}

package/components/Text.d.ts

@@ -0,0 +1,15 @@
+import { Signal } from '../prop';
+import { type Renderable } from '../renderable';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+export declare function subscribeToSignal<T>(prop: Signal<T>, listener: (value: T) => void, clear: Clear): Clear;
+export declare class TextImpl implements Renderable {
+    private readonly text;
+    constructor(text: Signal<string>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export type Primitive = string | number | boolean | Date;
+export interface TextProps {
+    children?: Signal<Primitive | undefined> | Signal<Primitive> | Primitive;
+}
+export declare function Text({ children }: TextProps): Renderable;

package/components/Text.js

@@ -0,0 +1,33 @@
+import { Signal } from '../prop';
+export function subscribeToSignal(prop, listener, clear) {
+    const unsubscribe = prop.subscribe(listener);
+    return (removeTree) => {
+        unsubscribe();
+        clear(removeTree);
+    };
+}
+export class TextImpl {
+    text;
+    constructor(text) {
+        this.text = text;
+    }
+    appendTo = (ctx) => {
+        const [set, clear] = ctx.createText(this.text.get());
+        return subscribeToSignal(this.text, set, clear);
+    };
+}
+function propFromChildren(children) {
+    if (children instanceof Signal) {
+        return children.map((child) => {
+            if (child == null) {
+                return '';
+            }
+            return String(child);
+        });
+    }
+    return new Signal(String(children));
+}
+export function Text({ children }) {
+    const prop = propFromChildren(children);
+    return new TextImpl(prop);
+}

package/components/TextContent.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 TextContentImpl implements Renderable {
+    private readonly value;
+    constructor(value: Signal<string> | Signal<string | undefined>);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+}
+export interface TextContentProps {
+    value: Signal<string> | Signal<string | undefined>;
+}
+export declare function TextContent({ value }: TextContentProps): TextContentImpl;

package/components/TextContent.js

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

package/components/Tween.d.ts

@@ -0,0 +1,75 @@
+/** @jsxImportSource .. */
+import { type Renderable } from '../types/renderable';
+import { type Clear } from '../types/clean';
+import { type DOMContext } from '../dom-context';
+export interface Animatable {
+    width?: number;
+    maxWidth?: number;
+    minWidth?: number;
+    height?: number;
+    maxHeight?: number;
+    minHeight?: number;
+    lineHeight?: number;
+    opacity?: number;
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+    padding?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    margin?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    fontSize?: number;
+    letterSpacing?: number;
+    borderWidth?: number;
+    borderRadius?: number;
+    translateX?: number;
+    translateY?: number;
+    translateZ?: number;
+    rotateX?: number;
+    rotateY?: number;
+    rotateZ?: number;
+    scaleX?: number;
+    scaleY?: number;
+    scaleZ?: number;
+    skewX?: number;
+    skewY?: number;
+    grayScale?: number;
+    sepia?: number;
+    saturate?: number;
+    hueRotate?: number;
+    invert?: number;
+    brightness?: number;
+    contrast?: number;
+    blur?: number;
+}
+export interface TweenAnimation {
+    style: Animatable;
+    duration?: number;
+    delay?: number;
+}
+export interface TweenProps {
+    enter?: TweenAnimation[];
+    exit?: TweenAnimation[];
+    style?: Animatable;
+}
+export declare function getComputedStyleValue(styles: CSSStyleDeclaration, key: keyof Animatable): Animatable[typeof key];
+export declare function getCurrentStyleValues(el: HTMLElement, styles: Animatable): Animatable;
+export declare function applyStyle(el: HTMLElement, key: keyof Animatable, value: Animatable[typeof key]): void;
+export declare function applyInterpolatedStyle(el: HTMLElement, key: keyof Animatable, from: Animatable[typeof key], to: Animatable[typeof key], progress: number): void;
+export declare function applyInterpolatedStyles(el: HTMLElement, from: Animatable, to: Animatable, progress: number): void;
+export declare function applyStyles(el: HTMLElement, styles: Animatable): void;
+export declare class TweenImpl implements Renderable {
+    private readonly enter;
+    private readonly exit;
+    private readonly style?;
+    constructor(enter?: TweenAnimation[], exit?: TweenAnimation[], style?: Animatable | undefined);
+    appendTo(ctx: DOMContext): Clear;
+}
+export declare function Tween({ enter, exit, style }: TweenProps): TweenImpl;