@tempots/dom 5.0.2 → 6.0.0

package/components/FadeIn.d.ts

@@ -5,14 +5,16 @@ import { Animatable } from "./animatable";
 export declare class FadeInImpl implements Renderable {
     private readonly end;
     private readonly start;
+    private readonly easing;
     private readonly duration;
     private readonly delay;
-    constructor(end: Animatable, start: Animatable | undefined, duration: number, delay: number);
+    constructor(end: Animatable, start: Animatable | undefined, easing: (t: number) => number, duration: number, delay: number);
     appendTo(ctx: DOMContext): Clear;
 }
 export interface FadeInProps extends Animatable {
     start?: Animatable;
     duration?: number;
+    easing?: (t: number) => number;
     delay?: number;
 }
 export declare function FadeIn(props: FadeInProps): Renderable;

package/components/FadeIn.js

@@ -2,11 +2,13 @@ import { getComputedAnimatable, applyInterpolatedAnimatable, applyAnimatable } f
 export class FadeInImpl {
     end;
     start;
+    easing;
     duration;
     delay;
-    constructor(end, start, duration, delay) {
+    constructor(end, start, easing, duration, delay) {
         this.end = end;
         this.start = start;
+        this.easing = easing;
         this.duration = duration;
         this.delay = delay;
     }
@@ -22,7 +24,7 @@ export class FadeInImpl {
             }
         })();
         const startTime = Date.now() + this.delay;
-        const { duration, end } = this;
+        const { duration, end, easing } = this;
         let nextFrameId = null;
         function frame() {
             const now = Date.now();
@@ -31,7 +33,7 @@ export class FadeInImpl {
                 return;
             }
             const progress = Math.min((now - startTime) / duration, 1);
-            applyInterpolatedAnimatable(el, start, end, progress);
+            applyInterpolatedAnimatable(el, start, end, easing(progress));
             if (progress < 1) {
                 nextFrameId = requestAnimationFrame(frame);
             }
@@ -47,6 +49,6 @@ export class FadeInImpl {
     }
 }
 export function FadeIn(props) {
-    const { start, duration, delay, ...end } = props;
-    return new FadeInImpl(end, start, duration ?? 200, delay ?? 0);
+    const { start, duration, easing, delay, ...end } = props;
+    return new FadeInImpl(end, start, easing ?? (v => v), duration ?? 200, delay ?? 0);
 }

package/components/For.d.ts

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

package/components/For.js

@@ -1,15 +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 }) {
+import { OnRemove } from './OnRemove';
+// <For of={values} separator={() => ", "}>{(value) => <span>{value}</span>}</For>
+export function For({ of, children: render, separator }) {
     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)
+            OnRemove({ clear: value.clean })
         ]);
-    });
+    }, separator);
 }

package/components/HiddenWhenEmpty.js

@@ -1,9 +1,10 @@
 export class HiddenWhenEmptyImpl {
     appendTo(ctx) {
+        const initial = ctx.getStyle(':empty');
         ctx.setStyle(':empty', 'display: none');
         return (removeTree) => {
             if (removeTree)
-                ctx.setStyle(':empty', null);
+                ctx.setStyle(':empty', initial);
         };
     }
 }

package/components/If.js

@@ -1,18 +1,18 @@
 import { OneOfImpl } from './OneOf';
 export function If({ is, then, otherwise }) {
-    return new OneOfImpl(is.map(v => v ? [1, true] : [2, false]), {
+    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]), {
+    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]), {
+    return new OneOfImpl(is.map(v => v ? { 1: true } : { 2: false }), {
         1: () => null,
         2: () => children
     });

package/components/Lifecycle.d.ts

@@ -4,11 +4,11 @@ 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);
+    constructor(onMount: (el: HTMLElement) => void, onUnmount: (el: HTMLElement, removeTree: boolean) => void);
     readonly appendTo: (ctx: DOMContext) => Clear;
 }
 export interface LifecycleProps {
     onMount?: (el: HTMLElement) => void;
-    onUnmount?: (el: HTMLElement) => void;
+    onUnmount?: (el: HTMLElement, removeTree: boolean) => void;
 }
 export declare function Lifecycle({ onMount, onUnmount }: LifecycleProps): Renderable;

package/components/Lifecycle.js

@@ -7,8 +7,8 @@ export class LifecycleImpl {
     }
     appendTo = (ctx) => {
         this.onMount(ctx.getElement());
-        return () => {
-            this.onUnmount(ctx.getElement());
+        return (removeTree) => {
+            this.onUnmount(ctx.getElement(), removeTree);
         };
     };
 }

package/components/NotEmpty.d.ts

@@ -1,10 +1,9 @@
 /** @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;
+export declare function NotEmpty<T extends unknown[] | Record<any, unknown>>({ on, display, whenEmpty }: NotEmptyProps<T>): JSX.DOMNode;

package/components/OnRemove.d.ts

@@ -1,11 +1,6 @@
 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;
-}
+import { LifecycleImpl } from './Lifecycle';
 export interface OnRemoveProps {
     clear: Clear;
 }
-export declare function OnRemove(props: OnRemoveProps): OnRemoveImpl;
+export declare function OnRemove(props: OnRemoveProps): LifecycleImpl;

package/components/OnRemove.js

@@ -1,14 +1,4 @@
-export class OnRemoveImpl {
-    clear;
-    constructor(clear) {
-        this.clear = clear;
-    }
-    appendTo = () => {
-        return (removeTree) => {
-            this.clear(removeTree);
-        };
-    };
-}
+import { LifecycleImpl } from './Lifecycle';
 export function OnRemove(props) {
-    return new OnRemoveImpl(props.clear);
+    return new LifecycleImpl(() => { }, (_, removeTree) => props.clear(removeTree));
 }

package/components/OneOf.d.ts

@@ -3,18 +3,60 @@ 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 {
+export declare class OneOfImpl<T extends Record<string, unknown>> implements Renderable {
     private readonly match;
     private readonly cases;
     constructor(match: Signal<T>, cases: {
-        [KK in T[0]]: (value: Signal<T[1]>) => JSX.DOMNode;
+        [KK in keyof T]: (value: Signal<T[KK]>) => JSX.DOMNode;
     });
     readonly appendTo: (ctx: DOMContext) => Clear;
 }
-export type OneOfProps<T extends [AnyKey, unknown]> = {
+export type OneOfProps<T extends Record<string, unknown>> = {
     match: Signal<T>;
 } & {
-    [KK in T[0]]: (value: Signal<T[1]>) => JSX.DOMNode;
+    [KK in keyof T]: (value: Signal<T[KK]>) => JSX.DOMNode;
 };
-export declare function OneOf<T extends [AnyKey, unknown]>(props: OneOfProps<T>): JSX.DOMNode;
+export declare function OneOf<T extends Record<string, unknown>>(props: OneOfProps<T>): JSX.DOMNode;
+export type OneOfLiteralProps<K extends string> = {
+    match: Signal<K>;
+} & {
+    [KK in K]: JSX.DOMNode;
+};
+export declare function OneOfLiteral<K extends string>(props: OneOfLiteralProps<K>): JSX.DOMNode;
+export type OneOfUnionProps<T extends {
+    [_ in K]: string;
+}, K extends string> = {
+    match: Signal<T>;
+    using: K;
+} & {
+    [KK in T[K]]: (value: Signal<T extends {
+        [_ in K]: KK;
+    } ? T : never>) => JSX.DOMNode;
+};
+export declare function OneOfUnion<T extends {
+    [_ in K]: string;
+}, K extends string>(props: OneOfUnionProps<T, K>): JSX.DOMNode;
+export type OneOfUnionTypeProps<T extends {
+    [_ in "type"]: string;
+}> = {
+    match: Signal<T>;
+} & {
+    [KK in T["type"]]: (value: Signal<T extends {
+        [_ in "type"]: KK;
+    } ? T : never>) => JSX.DOMNode;
+};
+export declare function OneOfUnionType<T extends {
+    type: string;
+}>(props: OneOfUnionTypeProps<T>): JSX.DOMNode;
+export type OneOfUnionKindProps<T extends {
+    [_ in "kind"]: string;
+}> = {
+    match: Signal<T>;
+} & {
+    [KK in T["kind"]]: (value: Signal<T extends {
+        [_ in "kind"]: KK;
+    } ? T : never>) => JSX.DOMNode;
+};
+export declare function OneOfUnionKind<T extends {
+    kind: string;
+}>(props: OneOfUnionKindProps<T>): JSX.DOMNode;

package/components/OneOf.js

@@ -9,16 +9,17 @@ export class OneOfImpl {
     }
     appendTo = (ctx) => {
         const pair = this.match.get();
-        let key = pair[0];
-        const value = pair[1];
-        const stableCtx = ctx.makeReference();
+        let key = Object.keys(pair)[0];
+        const value = pair[key];
         let prop = new Prop(value);
-        let newCtx = stableCtx.makeReference();
+        let newCtx = ctx.makeReference();
         let clear = makeRenderable(this.cases[key](prop)).appendTo(newCtx);
-        const cancel = this.match.subscribe(([newKey, newValue]) => {
+        const cancel = this.match.subscribe((newPair) => {
+            const newKey = Object.keys(newPair)[0];
+            const newValue = newPair[newKey];
             if (newKey !== key) {
                 newCtx.requestClear(true, () => {
-                    newCtx = stableCtx.makeReference();
+                    newCtx = newCtx.makeReference();
                     key = newKey;
                     prop.clean();
                     prop = new Prop(newValue);
@@ -32,14 +33,33 @@ export class OneOfImpl {
         });
         return (removeTree) => {
             newCtx.requestClear(removeTree, () => {
+                clear(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>} /
+// <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);
 }
+export function OneOfLiteral(props) {
+    const { match, ...cases } = props;
+    const keys = Object.keys(cases);
+    const obj = keys.reduce((acc, k) => {
+        acc[k] = () => cases[k];
+        return acc;
+    }, {});
+    return new OneOfImpl(match.map(k => ({ [k]: null })), obj);
+}
+export function OneOfUnion(props) {
+    const { match, using, ...cases } = props;
+    return new OneOfImpl(match.map(t => ({ [t[using]]: t })), cases);
+}
+export function OneOfUnionType(props) {
+    return OneOfUnion({ ...props, using: "type" });
+}
+export function OneOfUnionKind(props) {
+    return OneOfUnion({ ...props, using: "kind" });
+}

package/components/Repeat.d.ts

@@ -1,15 +1,26 @@
-import { type Signal } from '../prop';
+import { Signal } from '../prop';
 import { type Clear } from '../clean';
 import { type DOMContext } from '../dom-context';
 import { type Renderable } from '../renderable';
+import { JSX } from '../jsx';
+export interface SeparatorProps {
+    first: boolean;
+    last: boolean;
+    index: number;
+}
 export declare class RepeatImpl implements Renderable {
     private readonly times;
     private readonly children;
-    constructor(times: Signal<number>, children: (index: number) => Renderable);
+    private readonly separator?;
+    constructor(times: Signal<number>, children: (index: number) => JSX.DOMNode, separator?: ((sep: Signal<SeparatorProps>) => JSX.DOMNode) | undefined);
     readonly appendTo: (ctx: DOMContext) => Clear;
+    readonly appendToWithoutSeparator: (ctx: DOMContext) => Clear;
+    readonly appendToWithSeparator: (ctx: DOMContext, separator: (sep: Signal<SeparatorProps>) => JSX.DOMNode) => Clear;
 }
 export interface RepeatProps {
     times: Signal<number>;
-    children?: (index: number) => Renderable;
+    children?: (index: number) => JSX.DOMNode;
+    separator?: (sep: Signal<SeparatorProps>) => JSX.DOMNode;
 }
 export declare function Repeat(props: RepeatProps): Renderable;
+export declare function conjuctions(other: JSX.DOMNode, lastConjunction?: JSX.DOMNode, firstConjunction?: JSX.DOMNode): (sep: Signal<SeparatorProps>) => JSX.DOMNode;

package/components/Repeat.js

@@ -1,33 +1,118 @@
+import { Prop } from '../prop';
 import { Fragment } from './Fragment';
+import { makeRenderable } from '../jsx-runtime';
 export class RepeatImpl {
     times;
     children;
-    constructor(times, children) {
+    separator;
+    constructor(times, children, separator) {
         this.times = times;
         this.children = children;
+        this.separator = separator;
     }
     appendTo = (ctx) => {
+        if (!this.separator) {
+            return this.appendToWithoutSeparator(ctx);
+        }
+        else {
+            return this.appendToWithSeparator(ctx, this.separator);
+        }
+    };
+    appendToWithoutSeparator = (ctx) => {
+        const newCtx = ctx.makeReference();
+        const count = this.times.get();
+        const clears = new Array(count);
+        for (let i = 0; i < count; i++) {
+            clears[i] = makeRenderable(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] = makeRenderable(this.children(i)).appendTo(newCtx);
+            }
+        });
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                cancel();
+                clears.forEach(clear => { clear(removeTree); });
+            });
+        };
+    };
+    appendToWithSeparator = (ctx, separator) => {
         const newCtx = ctx.makeReference();
         const count = this.times.get();
+        const separatorProps = new Array(Math.max(0, count - 1));
+        const separatorClears = new Array(Math.max(0, count - 1));
         const clears = new Array(count);
         for (let i = 0; i < count; i++) {
-            clears[i] = this.children(i).appendTo(newCtx);
+            clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+            if (i < count - 1) {
+                separatorProps[i] = Prop.of({
+                    first: i === 0,
+                    last: i === count - 2,
+                    index: i
+                });
+                separatorClears[i] = makeRenderable(separator(separatorProps[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);
+                if (separatorClears.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    separatorClears.pop()(true);
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    separatorProps.pop().clean();
+                }
+            }
+            for (let i = 0; i < separatorProps.length; i++) {
+                separatorProps[i].set({
+                    first: i === 0,
+                    last: i === newCount - 2,
+                    index: i
+                });
             }
             for (let i = clears.length; i < newCount; i++) {
-                clears[i] = this.children(i).appendTo(newCtx);
+                clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+                if (i < newCount - 1) {
+                    separatorProps[i] = Prop.of({
+                        first: i === 0,
+                        last: i === newCount - 2,
+                        index: i
+                    });
+                    separatorClears[i] = makeRenderable(separator(separatorProps[i])).appendTo(newCtx);
+                }
             }
         });
         return (removeTree) => {
             newCtx.requestClear(removeTree, () => {
                 cancel();
                 clears.forEach(clear => { clear(removeTree); });
+                separatorClears.forEach(clear => { clear(removeTree); });
+                separatorProps.forEach(signal => { signal.clean(); });
             });
         };
     };
 }
-export function Repeat(props) { return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] }))); }
+export function Repeat(props) {
+    return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] })), props.separator);
+}
+export function conjuctions(other, lastConjunction, firstConjunction) {
+    return (sep) => {
+        return sep.map(({ first, last }) => {
+            if (last) {
+                return lastConjunction ?? other;
+            }
+            else if (first) {
+                return firstConjunction ?? other;
+            }
+            else {
+                return other;
+            }
+        });
+    };
+}

package/components/animatable.d.ts

@@ -23,8 +23,15 @@ export interface Animatable {
     marginRight?: number;
     fontSize?: number;
     letterSpacing?: number;
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
     borderWidth?: number;
     borderRadius?: number;
+    boxShadow?: string;
+    textShadow?: string;
+    outlineWidth?: number;
+    outlineColor?: string;
     translateX?: number;
     translateY?: number;
     translateZ?: number;
@@ -45,6 +52,19 @@ export interface Animatable {
     contrast?: number;
     blur?: number;
 }
+export type ColorChannels = [number, number, number, number, 'rgba' | 'hex' | 'hsla'];
+export declare function parseColorChannels(color: string): ColorChannels;
+export interface BoxShadow {
+    inset: boolean;
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: string;
+}
+export declare function colorChannelsToString(channels: ColorChannels): string;
+export declare function interpolateColor(startColor: string, endColor: string): (t: number) => string;
+export declare function interpolateShadow(startShadow: string, endShadow: string): (t: number) => string;
 export declare function getComputedAnimatableProp(styles: CSSStyleDeclaration, key: keyof Animatable): Animatable[typeof key];
 export declare function getComputedAnimatable(el: HTMLElement, styles: Animatable): Animatable;
 export declare function applyAnimatableProp(el: HTMLElement, key: keyof Animatable, value: Animatable[typeof key]): void;

package/components/animatable.js

@@ -1,3 +1,104 @@
+export function parseColorChannels(color) {
+    let match = color.match(/rgba?\((\d+), (\d+), (\d+)(, (\d+))?\)/);
+    if (match) {
+        return [
+            Number(match[1]),
+            Number(match[2]),
+            Number(match[3]),
+            match[4] ? Number(match[5]) : 1,
+            'rgba'
+        ];
+    }
+    else {
+        match = color.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/);
+        if (match) {
+            return [
+                parseInt(match[1], 16),
+                parseInt(match[2], 16),
+                parseInt(match[3], 16),
+                1,
+                'hex'
+            ];
+        }
+        else {
+            match = color.match(/hsla?\((\d+), (\d+)%?, (\d+)%?(, (\d+))?\)/);
+            if (match) {
+                return [
+                    Number(match[1]),
+                    Number(match[2]),
+                    Number(match[3]),
+                    match[4] ? Number(match[5]) : 1,
+                    'hsla'
+                ];
+            }
+        }
+    }
+    return [0, 0, 0, 1, 'rgba'];
+}
+function parseBoxShadow(cssString) {
+    const boxShadowRegex = /^(inset\s)?(-?\d+)([a-zA-Z]*)(\s+)(-?\d+)([a-zA-Z]*)(?:\s+(-?\d+)([a-zA-Z]*))?(?:\s+(-?\d+)([a-zA-Z]*))?(?:\s+(-?\d+)([a-zA-Z]*))?(?:\s+)([a-zA-Z0-9(),.]+)$/i;
+    const match = cssString.match(boxShadowRegex);
+    if (!match) {
+        return {
+            inset: false,
+            x: 0,
+            y: 0,
+            blur: 0,
+            spread: 0,
+            color: 'rgba(0, 0, 0, 0)'
+        };
+    }
+    const [, inset, x, , , y, , blur, , spread, , color] = match;
+    const parsedBlur = blur ? parseInt(blur, 10) : 0;
+    const parsedSpread = spread ? parseInt(spread, 10) : 0;
+    return {
+        inset: !!inset,
+        x: parseInt(x, 10),
+        y: parseInt(y, 10),
+        blur: parsedBlur,
+        spread: parsedSpread,
+        color
+    };
+}
+function boxShadowToString(shadow) {
+    const { inset, x, y, blur, spread, color } = shadow;
+    return `${inset ? 'inset ' : ''}${x}px ${y}px ${blur}px ${spread}px ${color}`;
+}
+export function colorChannelsToString(channels) {
+    if (channels[4] === 'rgba') {
+        return `rgba(${channels[0]}, ${channels[1]}, ${channels[2]}, ${channels[3]})`;
+    }
+    else if (channels[4] === 'hex') {
+        return `#${channels[0].toString(16).padStart(2, '0')}${channels[1].toString(16).padStart(2, '0')}${channels[2].toString(16).padStart(2, '0')}`;
+    }
+    else if (channels[4] === 'hsla') {
+        return `hsla(${channels[0]}, ${channels[1]}%, ${channels[2]}%, ${channels[3]})`;
+    }
+    return '';
+}
+export function interpolateColor(startColor, endColor) {
+    const [startR, startG, startB, startA, startType] = parseColorChannels(startColor);
+    const [endR, endG, endB, endA, endType] = parseColorChannels(endColor);
+    return (t) => {
+        const r = startR + (endR - startR) * t;
+        const g = startG + (endG - startG) * t;
+        const b = startB + (endB - startB) * t;
+        const a = startA + (endA - startA) * t;
+        return colorChannelsToString([r, g, b, a, startType]);
+    };
+}
+export function interpolateShadow(startShadow, endShadow) {
+    const start = parseBoxShadow(startShadow);
+    const end = parseBoxShadow(endShadow);
+    return (t) => {
+        const x = start.x + (end.x - start.x) * t;
+        const y = start.y + (end.y - start.y) * t;
+        const blur = start.blur + (end.blur - start.blur) * t;
+        const spread = start.spread + (end.spread - start.spread) * t;
+        const color = getColorInterpolation(start.color, end.color)(t);
+        return boxShadowToString({ inset: start.inset, x, y, blur, spread, color });
+    };
+}
 export function getComputedAnimatableProp(styles, key) {
     if (key === 'translateX') {
         return new WebKitCSSMatrix(styles.transform).m41;
@@ -131,10 +232,35 @@ export function applyAnimatableProp(el, key, value) {
     }
     el.style.setProperty(key, String(value));
 }
+const interpolationCache = new Map();
+function getInterpolate(from, to, type) {
+    if (interpolationCache.has(type + ":" + from + to)) {
+        return interpolationCache.get(from + to);
+    }
+    const f = interpolateColor(from, to);
+    interpolationCache.set(type + ":" + from + to, f);
+    return f;
+}
+function getColorInterpolation(from, to) {
+    return getInterpolate(from, to, 'c');
+}
+function getShadowInterpolation(from, to) {
+    return getInterpolate(from, to, 's');
+}
 export function applyInterpolatedAnimatableProp(el, key, from, to, progress) {
     if (from != null && to != null) {
-        const value = from + (to - from) * progress;
-        applyAnimatableProp(el, key, value);
+        if (typeof from === 'number' && typeof to === 'number') {
+            const value = from + (to - from) * progress;
+            applyAnimatableProp(el, key, value);
+        }
+        else if (key === 'boxShadow' || key === 'textShadow') {
+            const value = getShadowInterpolation(from, to)(progress);
+            applyAnimatableProp(el, key, value);
+        }
+        else if (key === 'color' || key === 'backgroundColor' || key === 'borderColor' || key === 'outlineColor') {
+            const value = getColorInterpolation(from, to)(progress);
+            applyAnimatableProp(el, key, value);
+        }
     }
 }
 export function applyInterpolatedAnimatable(el, from, to, progress) {

package/dom-context.d.ts

@@ -33,6 +33,7 @@ export declare class DOMContext {
     private clear;
     withProvider<T>(mark: ProviderMark<T>, provider: T): DOMContext;
     getProvider<T>(mark: ProviderMark<T>): T;
+    getStyle(name: string): string | undefined | null;
     setStyle(name: string, value: string | undefined | null): void;
     createStyle(name: string, value: string | undefined | null): [(newValue: string) => void, Clear];
 }

package/dom-context.js

@@ -235,6 +235,9 @@ export class DOMContext {
     getProvider(mark) {
         return this.providers[mark];
     }
+    getStyle(name) {
+        return this.element.style.getPropertyValue(name);
+    }
     setStyle(name, value) {
         if (value == null) {
             this.element.style.removeProperty(name);

package/index.d.ts

@@ -1,36 +1,33 @@
-import { type Clear, type Clean } from './clean';
-import { makeProviderMark, DOMContext, type ProviderMark } from './dom-context';
-import { Prop, Signal } from './prop';
-import { render } from './render';
-import { type Renderable } from './renderable';
-import { isEmptyElement } from './helpers/is-empty-element';
-import { handleTextInput } from './helpers/handle-text-input';
-import { handleAnchorClick } from './helpers/handle-anchor-click';
-import { Animatable, applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable } from './components/animatable';
-import { AttributeImpl, Attribute, type AttributeProps } from './components/Attribute';
-import { BooleanAttributeImpl, BooleanAttribute, type BooleanAttributeProps } from './components/BooleanAttribute';
-import { ClassNameImpl, ClassName, type ClassNameProps } from './components/ClassName';
-import { ConsumerImpl, Consumer, type ConsumerProps, ProviderImpl, Provider, type ProviderProps } from './components/Provider';
-import { ElImpl, El, type ElProps } from './components/El';
-import { FadeIn, FadeInImpl, FadeInProps } from './components/FadeIn';
-import { FadeOut, FadeOutImpl, FadeOutProps } from './components/FadeOut';
-import { For, type ForProps } from './components/For';
-import { FragmentImpl, Fragment } from './components/Fragment';
-import { HiddenWhenEmptyImpl, HiddenWhenEmpty } from './components/HiddenWhenEmpty';
-import { If, type IfProps, Unless, When, type WhenProps } from './components/If';
-import { InnerHTMLImpl, InnerHTML, type InnerHTMLProps } from './components/InnerHTML';
-import { Lifecycle, LifecycleImpl, type LifecycleProps } from './components/Lifecycle';
-import { MatchImpl, Match, type MatchProps } from './components/Match';
-import { NotEmpty, type NotEmptyProps } from './components/NotEmpty';
-import { OnImpl, On, type OnProps } from './components/On';
-import { OnRemoveImpl, OnRemove, type OnRemoveProps } from './components/OnRemove';
-import { OneOfImpl, OneOf, type OneOfProps } from './components/OneOf';
-import { PortalImpl, Portal, type PortalProps } from './components/Portal';
-import { PropertyImpl, Property, type PropertyProps } from './components/Property';
-import { RepeatImpl, Repeat, type RepeatProps } from './components/Repeat';
-import { ShowImpl, Show, type ShowProps } from './components/Show';
-import { TextImpl, Text, type TextProps } from './components/Text';
-import { TextContentImpl, TextContent, type TextContentProps } from './components/TextContent';
-import type { JSX } from './jsx-runtime';
-export { applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable, AttributeImpl, Attribute, BooleanAttributeImpl, BooleanAttribute, ClassNameImpl, ClassName, ConsumerImpl, Consumer, DOMContext, ElImpl, El, FadeIn, FadeInImpl, FadeOut, FadeOutImpl, For, FragmentImpl, Fragment, handleTextInput, handleAnchorClick, HiddenWhenEmptyImpl, HiddenWhenEmpty, If, InnerHTMLImpl, InnerHTML, isEmptyElement, Lifecycle, LifecycleImpl, makeProviderMark, MatchImpl, Match, NotEmpty, OnImpl, On, OnRemoveImpl, OnRemove, OneOfImpl, OneOf, PortalImpl, Portal, Prop, PropertyImpl, Property, ProviderImpl, Provider, render, RepeatImpl, Repeat, ShowImpl, Show, Signal, TextImpl, Text, TextContentImpl, TextContent, Unless, When };
-export type { AttributeProps, BooleanAttributeProps, ClassNameProps, Clean, Clear, ConsumerProps, ElProps, FadeInProps, FadeOutProps, ForProps, InnerHTMLProps, IfProps, JSX, LifecycleProps, MatchProps, NotEmptyProps, OnProps, OnRemoveProps, OneOfProps, PortalProps, PropertyProps, ProviderMark, ProviderProps, Renderable, RepeatProps, ShowProps, TextProps, TextContentProps, Animatable, WhenProps };
+export { type Clear, type Clean } from './clean';
+export { makeProviderMark, DOMContext, type ProviderMark } from './dom-context';
+export { Prop, Signal } from './prop';
+export { render } from './render';
+export { type Renderable } from './renderable';
+export { isEmptyElement } from './helpers/is-empty-element';
+export { handleTextInput } from './helpers/handle-text-input';
+export { handleAnchorClick } from './helpers/handle-anchor-click';
+export { type Animatable, applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable } from './components/animatable';
+export { AttributeImpl, Attribute, type AttributeProps } from './components/Attribute';
+export { BooleanAttributeImpl, BooleanAttribute, type BooleanAttributeProps } from './components/BooleanAttribute';
+export { ClassNameImpl, ClassName, type ClassNameProps } from './components/ClassName';
+export { ConsumerImpl, Consumer, type ConsumerProps, ProviderImpl, Provider, type ProviderProps } from './components/Provider';
+export { ElImpl, El, type ElProps } from './components/El';
+export { FadeIn, FadeInImpl, type FadeInProps } from './components/FadeIn';
+export { FadeOut, FadeOutImpl, type FadeOutProps } from './components/FadeOut';
+export { For, type ForProps } from './components/For';
+export { FragmentImpl, Fragment } from './components/Fragment';
+export { HiddenWhenEmptyImpl, HiddenWhenEmpty } from './components/HiddenWhenEmpty';
+export { If, type IfProps, Unless, When, type WhenProps } from './components/If';
+export { InnerHTMLImpl, InnerHTML, type InnerHTMLProps } from './components/InnerHTML';
+export { Lifecycle, LifecycleImpl, type LifecycleProps } from './components/Lifecycle';
+export { NotEmpty, type NotEmptyProps } from './components/NotEmpty';
+export { OnImpl, On, type OnProps } from './components/On';
+export { OnRemove, type OnRemoveProps } from './components/OnRemove';
+export { OneOfImpl, OneOf, type OneOfProps, OneOfLiteral, type OneOfLiteralProps, OneOfUnion, type OneOfUnionProps, OneOfUnionKind, type OneOfUnionKindProps, OneOfUnionType, type OneOfUnionTypeProps } from './components/OneOf';
+export { PortalImpl, Portal, type PortalProps } from './components/Portal';
+export { PropertyImpl, Property, type PropertyProps } from './components/Property';
+export { RepeatImpl, Repeat, type RepeatProps, conjuctions } from './components/Repeat';
+export { ShowImpl, Show, type ShowProps } from './components/Show';
+export { TextImpl, Text, type TextProps } from './components/Text';
+export { TextContentImpl, TextContent, type TextContentProps } from './components/TextContent';
+export type { JSX } from './jsx-runtime';

package/index.js

@@ -1,32 +1,30 @@
-import { makeProviderMark, DOMContext } from './dom-context';
-import { Prop, Signal } from './prop';
-import { render } from './render';
-import { isEmptyElement } from './helpers/is-empty-element';
-import { handleTextInput } from './helpers/handle-text-input';
-import { handleAnchorClick } from './helpers/handle-anchor-click';
-import { applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable } from './components/animatable';
-import { AttributeImpl, Attribute } from './components/Attribute';
-import { BooleanAttributeImpl, BooleanAttribute } from './components/BooleanAttribute';
-import { ClassNameImpl, ClassName } from './components/ClassName';
-import { ConsumerImpl, Consumer, ProviderImpl, Provider } from './components/Provider';
-import { ElImpl, El } from './components/El';
-import { FadeIn, FadeInImpl } from './components/FadeIn';
-import { FadeOut, FadeOutImpl } from './components/FadeOut';
-import { For } from './components/For';
-import { FragmentImpl, Fragment } from './components/Fragment';
-import { HiddenWhenEmptyImpl, HiddenWhenEmpty } from './components/HiddenWhenEmpty';
-import { If, Unless, When } from './components/If';
-import { InnerHTMLImpl, InnerHTML } from './components/InnerHTML';
-import { Lifecycle, LifecycleImpl } from './components/Lifecycle';
-import { MatchImpl, Match } from './components/Match';
-import { NotEmpty } from './components/NotEmpty';
-import { OnImpl, On } from './components/On';
-import { OnRemoveImpl, OnRemove } from './components/OnRemove';
-import { OneOfImpl, OneOf } from './components/OneOf';
-import { PortalImpl, Portal } from './components/Portal';
-import { PropertyImpl, Property } from './components/Property';
-import { RepeatImpl, Repeat } from './components/Repeat';
-import { ShowImpl, Show } from './components/Show';
-import { TextImpl, Text } from './components/Text';
-import { TextContentImpl, TextContent } from './components/TextContent';
-export { applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable, AttributeImpl, Attribute, BooleanAttributeImpl, BooleanAttribute, ClassNameImpl, ClassName, ConsumerImpl, Consumer, DOMContext, ElImpl, El, FadeIn, FadeInImpl, FadeOut, FadeOutImpl, For, FragmentImpl, Fragment, handleTextInput, handleAnchorClick, HiddenWhenEmptyImpl, HiddenWhenEmpty, If, InnerHTMLImpl, InnerHTML, isEmptyElement, Lifecycle, LifecycleImpl, makeProviderMark, MatchImpl, Match, NotEmpty, OnImpl, On, OnRemoveImpl, OnRemove, OneOfImpl, OneOf, PortalImpl, Portal, Prop, PropertyImpl, Property, ProviderImpl, Provider, render, RepeatImpl, Repeat, ShowImpl, Show, Signal, TextImpl, Text, TextContentImpl, TextContent, Unless, When };
+export { makeProviderMark, DOMContext } from './dom-context';
+export { Prop, Signal } from './prop';
+export { render } from './render';
+export { isEmptyElement } from './helpers/is-empty-element';
+export { handleTextInput } from './helpers/handle-text-input';
+export { handleAnchorClick } from './helpers/handle-anchor-click';
+export { applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable } from './components/animatable';
+export { AttributeImpl, Attribute } from './components/Attribute';
+export { BooleanAttributeImpl, BooleanAttribute } from './components/BooleanAttribute';
+export { ClassNameImpl, ClassName } from './components/ClassName';
+export { ConsumerImpl, Consumer, ProviderImpl, Provider } from './components/Provider';
+export { ElImpl, El } from './components/El';
+export { FadeIn, FadeInImpl } from './components/FadeIn';
+export { FadeOut, FadeOutImpl } from './components/FadeOut';
+export { For } from './components/For';
+export { FragmentImpl, Fragment } from './components/Fragment';
+export { HiddenWhenEmptyImpl, HiddenWhenEmpty } from './components/HiddenWhenEmpty';
+export { If, Unless, When } from './components/If';
+export { InnerHTMLImpl, InnerHTML } from './components/InnerHTML';
+export { Lifecycle, LifecycleImpl } from './components/Lifecycle';
+export { NotEmpty } from './components/NotEmpty';
+export { OnImpl, On } from './components/On';
+export { OnRemove } from './components/OnRemove';
+export { OneOfImpl, OneOf, OneOfLiteral, OneOfUnion, OneOfUnionKind, OneOfUnionType } from './components/OneOf';
+export { PortalImpl, Portal } from './components/Portal';
+export { PropertyImpl, Property } from './components/Property';
+export { RepeatImpl, Repeat, conjuctions } from './components/Repeat';
+export { ShowImpl, Show } from './components/Show';
+export { TextImpl, Text } from './components/Text';
+export { TextContentImpl, TextContent } from './components/TextContent';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tempots/dom",
-  "version": "5.0.2",
   "main": "index.js",
   "types": "index.d.ts",
+  "version": "6.0.0",
   "scripts": {
     "watch": "tsc --watch",
     "build": "tsc",

package/prop.d.ts

@@ -29,6 +29,8 @@ export declare class Signal<T> {
     readonly feed: (prop: Prop<T>) => Prop<T>;
     readonly deriveProp: () => Prop<T>;
     readonly clean: () => void;
+    readonly count: () => Signal<number>;
+    readonly animate: (duration: number, interpolate: (start: T, end: T, delta: number) => T, initialValue?: T | null, easing?: (t: number) => number) => Signal<T>;
 }
 export declare class Prop<T> extends Signal<T> {
     static isProp<T = unknown>(x: unknown): x is Prop<T>;

package/prop.js

@@ -137,6 +137,47 @@ export class Signal {
     clean = () => {
         this._listeners.length = 0;
     };
+    count = () => {
+        let count = 0;
+        return this.map(() => ++count);
+    };
+    animate = (duration, interpolate, initialValue = null, easing = t => t) => {
+        let startValue = initialValue ?? this.get();
+        let endValue = this.get();
+        const prop = new Prop(startValue);
+        let startTime = 0;
+        let endTime = 0;
+        let animationFrame = null;
+        const animate = (time) => {
+            if (this._listeners.length === 0) {
+                animationFrame = null;
+                return;
+            }
+            if (time < endTime) {
+                const delta = (time - startTime) / (endTime - startTime);
+                prop.set(interpolate(startValue, endValue, easing(delta)));
+                animationFrame = requestAnimationFrame(animate);
+            }
+            else {
+                prop.set(endValue);
+                animationFrame = null;
+            }
+        };
+        this.subscribe(value => {
+            if (animationFrame != null)
+                cancelAnimationFrame(animationFrame);
+            if (this._listeners.length === 0) {
+                animationFrame = null;
+                return;
+            }
+            startValue = prop.get();
+            endValue = value;
+            startTime = performance.now();
+            endTime = startTime + duration;
+            animationFrame = requestAnimationFrame(animate);
+        });
+        return prop;
+    };
 }
 export class Prop extends Signal {
     static isProp(x) {