@tempots/dom 7.1.3 → 9.0.0

package/components/Autofocus.d.ts

@@ -0,0 +1,2 @@
+import { Renderable } from "../renderable";
+export declare function Autofocus(): Renderable;

package/components/Autofocus.js

@@ -0,0 +1,4 @@
+import { Lifecycle } from "./Lifecycle";
+export function Autofocus() {
+    return Lifecycle({ onMount: (el) => setTimeout(() => el && el.focus(), 10) });
+}

package/components/If.d.ts

@@ -1,14 +1,14 @@
-import { type JSX } from '../jsx';
+import { type JSX } from '../jsx-runtime';
 import { type Signal } from '../prop';
 export interface IfProps {
     is: Signal<boolean>;
-    then?: JSX.DOMNode;
-    otherwise?: JSX.DOMNode;
+    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;
+    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

@@ -1,19 +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
+    return new OneOfImpl(is.map(v => v ? { then: true } : { otherwise: false }), {
+        then: then || (() => null),
+        otherwise: otherwise || (() => null)
     });
 }
 export function When({ is, children }) {
-    return new OneOfImpl(is.map(v => v ? { 1: true } : { 2: false }), {
-        1: () => children,
-        2: () => null
+    return new OneOfImpl(is.map(v => v ? { then: true } : { otherwise: false }), {
+        then: children,
+        otherwise: (() => null)
     });
 }
 export function Unless({ is, children }) {
-    return new OneOfImpl(is.map(v => v ? { 1: true } : { 2: false }), {
-        1: () => null,
-        2: () => children
+    return new OneOfImpl(is.map(v => v ? { then: true } : { otherwise: false }), {
+        then: (() => null),
+        otherwise: children
     });
 }

package/components/NotEmpty.d.ts

@@ -3,7 +3,7 @@ import { type Signal } from '../prop';
 import { type JSX } from '../jsx-runtime';
 export interface NotEmptyProps<T> {
     on: Signal<T>;
-    whenEmpty?: JSX.DOMNode;
-    display: JSX.DOMNode;
+    whenEmpty?: () => JSX.DOMNode;
+    display: () => JSX.DOMNode;
 }
 export declare function NotEmpty<T extends unknown[] | Record<any, unknown>>({ on, display, whenEmpty }: NotEmptyProps<T>): JSX.DOMNode;

package/components/Repeat.js

@@ -101,7 +101,7 @@ export class RepeatImpl {
                     index: i
                 });
             }
-            for (let i = clears.length - 1; i < newCount; i++) {
+            for (let i = clears.length; i < newCount; i++) {
                 positions[i] = new Prop(makePosition(i, count));
                 clears[i] = makeRenderable(this.children(positions[i])).appendTo(newCtx);
                 if (i < newCount - 1) {

package/components/Show.d.ts

@@ -1,20 +1,15 @@
 /** @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';
+import { OneOfImpl } from './OneOf';
 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;
+    otherwise?: () => JSX.DOMNode;
     children?: (value: Signal<NonNullable<T>>) => JSX.DOMNode;
 }
-export declare function Show<T>({ when, children, otherwise }: ShowProps<T>): ShowImpl<T>;
+export declare function Show<T>({ when, children, otherwise }: ShowProps<T>): OneOfImpl<{
+    then: NonNullable<T>;
+} | {
+    otherwise: false;
+}>;

package/components/Show.js

@@ -1,22 +1,8 @@
-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);
-    };
-}
+import { Fragment as _Fragment, jsx as _jsx } from "../jsx-runtime";
+import { OneOfImpl } from './OneOf';
 export function Show({ when, children, otherwise }) {
-    return new ShowImpl(when, otherwise, children ?? (() => _jsx(_Fragment, {})));
+    return new OneOfImpl(when.map(v => (v != null ? { then: v } : { otherwise: false })), {
+        then: (v) => ((children && children(v)) || _jsx(_Fragment, {})),
+        otherwise: otherwise || (() => _jsx(_Fragment, {}))
+    });
 }

package/helpers/handle-anchor-click.js

@@ -13,7 +13,7 @@ function shouldNotApplyCallback(e, checkExtension, checkExternalUrl) {
     }
     // If there is a target and it is not `_self` then we take this
     // as a signal that it doesn't want to be intercepted.
-    if (anchor.target !== '_self') {
+    if (anchor.target !== '_self' && anchor.target !== '') {
         return true;
     }
     if (anchor.getAttribute('download') != null) {

package/index.d.ts

@@ -8,6 +8,7 @@ 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 { Autofocus } from './components/Autofocus';
 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';
@@ -27,7 +28,7 @@ export { OneOfImpl, OneOf, type OneOfProps, OneOfLiteral, type OneOfLiteralProps
 export { PortalImpl, Portal, type PortalProps } from './components/Portal';
 export { PropertyImpl, Property, type PropertyProps } from './components/Property';
 export { RepeatImpl, Repeat, type RepeatProps, conjuctions, type PositionProps } from './components/Repeat';
-export { ShowImpl, Show, type ShowProps } from './components/Show';
+export { 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

@@ -6,6 +6,7 @@ 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 { Autofocus } from './components/Autofocus';
 export { BooleanAttributeImpl, BooleanAttribute } from './components/BooleanAttribute';
 export { ClassNameImpl, ClassName } from './components/ClassName';
 export { ConsumerImpl, Consumer, ProviderImpl, Provider } from './components/Provider';
@@ -25,6 +26,6 @@ export { OneOfImpl, OneOf, OneOfLiteral, OneOfUnion, OneOfUnionKind, OneOfUnionT
 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 { Show } from './components/Show';
 export { TextImpl, Text } from './components/Text';
 export { TextContentImpl, TextContent } from './components/TextContent';

package/package.json

@@ -2,32 +2,7 @@
   "name": "@tempots/dom",
   "main": "index.js",
   "types": "index.d.ts",
-  "version": "7.1.3",
-  "scripts": {
-    "watch": "tsc --watch",
-    "build": "tsc",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "coverage": "jest --coverage",
-    "npm:prep": "yarn build && cp README.md package.json dist",
-    "npm:publish": "yarn npm:prep && (cd dist && yarn publish --access public)"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@happy-dom/jest-environment": "^9.1.7",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.11",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "eslint": "^8.0.1",
-    "eslint-config-standard-with-typescript": "^34.0.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    "happy-dom": "^9.1.0",
-    "jest": "^29.5.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.0.3"
-  },
+  "version": "9.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fponticelli/tempots-dom.git"

package/prop.d.ts

@@ -8,10 +8,11 @@ export declare class Signal<T> {
     static ofValue<T>(value: Value<T> | null | undefined): Signal<T> | undefined;
     static wrap<T>(value: T | Signal<T>): Signal<T>;
     static isSignal<T = unknown>(x: unknown): x is Signal<T>;
+    static unwrap<T>(value: Value<T>): T;
     /**
      * Combines many into one using a merging function
      */
-    static combine<Args extends [...unknown[]], Out>(others: ArgsToSignals<Args>, f: (...args: Args) => Out): Signal<Out>;
+    static combine<Args extends [...unknown[]], Out>(signals: ArgsToSignals<Args>, f: (...args: Args) => Out): Signal<Out>;
     readonly [$isSignal] = true;
     protected readonly _listeners: Array<(value: T) => void>;
     constructor(_value: T);
@@ -19,6 +20,7 @@ export declare class Signal<T> {
     readonly subscribe: (listener: (value: T) => void) => () => void;
     readonly map: <V>(f: (value: T) => V) => Signal<V>;
     readonly flatMap: <V>(f: (value: T) => Signal<V>) => Signal<V>;
+    readonly flatMapProp: <V>(f: (value: T) => Prop<V>) => Prop<V>;
     readonly tap: (f: (value: T) => void) => this;
     readonly at: <K extends keyof T>(key: K) => Signal<T[K]>;
     readonly filter: (predicate: (value: T) => boolean) => Signal<T>;
@@ -26,11 +28,16 @@ export declare class Signal<T> {
     readonly mapAsync: <V>(f: (value: T) => Promise<V>, alt: V) => Signal<V>;
     readonly mapMaybe: <V>(f: (value: T) => V | null | undefined, alt: V) => Signal<V>;
     readonly combine: <V, Z>(other: Signal<V>, f: (a: T, b: V) => Z) => Signal<Z>;
-    readonly feed: (prop: Prop<T>) => Prop<T>;
+    readonly feed: (prop: Prop<T>) => () => void;
     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>;
+    readonly equals: (other: Signal<T>, equality?: ((a: T, b: T) => boolean) | undefined) => Signal<boolean>;
+    readonly isNull: () => Signal<boolean>;
+    readonly isNotNull: () => Signal<boolean>;
+    readonly isEmpty: () => Signal<boolean>;
+    readonly isNotEmpty: () => Signal<boolean>;
 }
 export declare class Prop<T> extends Signal<T> {
     static isProp<T = unknown>(x: unknown): x is Prop<T>;

package/prop.js

@@ -15,17 +15,20 @@ export class Signal {
         const s = x;
         return s != null && typeof s.get === 'function' && typeof s.subscribe === 'function';
     }
+    static unwrap(value) {
+        return (Signal.isSignal(value) ? value.get() : value);
+    }
     /**
      * Combines many into one using a merging function
      */
-    static combine(others, f) {
+    static combine(signals, f) {
         function getValues(others) {
             return others.map(other => other.get());
         }
-        const prop = new Prop(f(...getValues(others)));
-        others.forEach((other) => {
+        const prop = new Prop(f(...getValues(signals)));
+        signals.forEach((other) => {
             other.subscribe(() => {
-                prop.set(f(...getValues(others)));
+                prop.set(f(...getValues(signals)));
             });
         });
         return prop;
@@ -62,6 +65,18 @@ export class Signal {
         });
         return prop;
     };
+    flatMapProp = (f) => {
+        let tprop = f(this._value);
+        const prop = Prop.of(tprop.get());
+        let cancel = prop.feed(tprop);
+        this.subscribe(value => {
+            cancel();
+            tprop = f(value);
+            prop.set(tprop.get());
+            cancel = prop.feed(tprop);
+        });
+        return prop;
+    };
     tap = (f) => {
         f(this._value);
         this.subscribe(f);
@@ -128,11 +143,12 @@ export class Signal {
         return prop;
     };
     feed = (prop) => {
-        this.subscribe(value => { prop.set(value); });
-        return prop;
+        return this.subscribe(value => { prop.set(value); });
     };
     deriveProp = () => {
-        return new Prop(this._value);
+        const prop = new Prop(this._value);
+        this.feed(prop);
+        return prop;
     };
     clean = () => {
         this._listeners.length = 0;
@@ -178,6 +194,17 @@ export class Signal {
         });
         return prop;
     };
+    equals = (other, equality) => {
+        return this.combine(other, (a, b) => {
+            if (equality != null)
+                return equality(a, b);
+            return a === b;
+        });
+    };
+    isNull = () => this.map(value => value == null);
+    isNotNull = () => this.map(value => value != null);
+    isEmpty = () => this.map(value => value == null || (Reflect.has(value, 'length') && Reflect.get(value, 'length') === 0));
+    isNotEmpty = () => this.map(value => value != null && (!Reflect.has(value, 'length') || Reflect.get(value, 'length') !== 0));
 }
 export class Prop extends Signal {
     static isProp(x) {

package/components/Match.d.ts

@@ -1,33 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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/Shadow.js

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

package/components/Tween.d.ts

@@ -1,75 +0,0 @@
-/** @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;

package/components/Tween.js

@@ -1,242 +0,0 @@
-export function getComputedStyleValue(styles, key) {
-    if (key === 'translateX') {
-        return new WebKitCSSMatrix(styles.transform).m41;
-    }
-    else if (key === 'translateY') {
-        return new WebKitCSSMatrix(styles.transform).m42;
-    }
-    else if (key === 'translateZ') {
-        return new WebKitCSSMatrix(styles.transform).m43;
-    }
-    else if (key === 'rotateX') {
-        return new WebKitCSSMatrix(styles.transform).m12;
-    }
-    else if (key === 'rotateY') {
-        return new WebKitCSSMatrix(styles.transform).m21;
-    }
-    else if (key === 'rotateZ') {
-        return new WebKitCSSMatrix(styles.transform).m31;
-    }
-    else if (key === 'scaleX') {
-        return new WebKitCSSMatrix(styles.transform).m11;
-    }
-    else if (key === 'scaleY') {
-        return new WebKitCSSMatrix(styles.transform).m22;
-    }
-    else if (key === 'scaleZ') {
-        return new WebKitCSSMatrix(styles.transform).m33;
-    }
-    else if (key === 'skewX') {
-        return new WebKitCSSMatrix(styles.transform).m13;
-    }
-    else if (key === 'skewY') {
-        return new WebKitCSSMatrix(styles.transform).m23;
-    }
-    else if (key === 'grayScale') {
-        return Number(styles.filter.match(/grayscale\((\d+)%\)/)?.[1]);
-    }
-    else if (key === 'sepia') {
-        return Number(styles.filter.match(/sepia\((\d+)%\)/)?.[1]);
-    }
-    else if (key === 'saturate') {
-        return Number(styles.filter.match(/saturate\((\d+)%\)/)?.[1]);
-    }
-    else if (key === 'hueRotate') {
-        return Number(styles.filter.match(/hue-rotate\((\d+)deg\)/)?.[1]);
-    }
-    else if (key === 'invert') {
-        return Number(styles.filter.match(/invert\((\d+)%\)/)?.[1]);
-    }
-    else if (key === 'brightness') {
-        return Number(styles.filter.match(/brightness\((\d+)%\)/)?.[1]);
-    }
-    else if (key === 'contrast') {
-        return Number(styles.filter.match(/contrast\((\d+)%\)/)?.[1]);
-    }
-    else if (key === 'blur') {
-        return Number(styles.filter.match(/blur\((\d+)px\)/)?.[1]);
-    }
-    return Number(styles.getPropertyValue(key));
-}
-export function getCurrentStyleValues(el, styles) {
-    const result = {};
-    const computedStyles = getComputedStyle(el);
-    for (const [key, value] of Object.entries(styles)) {
-        const k = key;
-        if (value != null) {
-            result[k] = getComputedStyleValue(computedStyles, k);
-        }
-    }
-    return result;
-}
-export function applyStyle(el, key, value) {
-    if (value == null)
-        return;
-    if (key === 'translateX') {
-        el.style.transform += ` translateX(${value}px)`;
-    }
-    else if (key === 'translateY') {
-        el.style.transform += ` translateY(${value}px)`;
-    }
-    else if (key === 'translateZ') {
-        el.style.transform += ` translateZ(${value}px)`;
-    }
-    else if (key === 'rotateX') {
-        el.style.transform += ` rotateX(${value}deg)`;
-    }
-    else if (key === 'rotateY') {
-        el.style.transform += ` rotateY(${value}deg)`;
-    }
-    else if (key === 'rotateZ') {
-        el.style.transform += ` rotateZ(${value}deg)`;
-    }
-    else if (key === 'scaleX') {
-        el.style.transform += ` scaleX(${value})`;
-    }
-    else if (key === 'scaleY') {
-        el.style.transform += ` scaleY(${value})`;
-    }
-    else if (key === 'scaleZ') {
-        el.style.transform += ` scaleZ(${value})`;
-    }
-    else if (key === 'skewX') {
-        el.style.transform += ` skewX(${value}deg)`;
-    }
-    else if (key === 'skewY') {
-        el.style.transform += ` skewY(${value}deg)`;
-    }
-    else if (key === 'grayScale') {
-        el.style.filter += ` grayscale(${value}%)`;
-    }
-    else if (key === 'sepia') {
-        el.style.filter += ` sepia(${value}%)`;
-    }
-    else if (key === 'saturate') {
-        el.style.filter += ` saturate(${value}%)`;
-    }
-    else if (key === 'hueRotate') {
-        el.style.filter += ` hue-rotate(${value}deg)`;
-    }
-    else if (key === 'invert') {
-        el.style.filter += ` invert(${value}%)`;
-    }
-    else if (key === 'brightness') {
-        el.style.filter += ` brightness(${value}%)`;
-    }
-    else if (key === 'contrast') {
-        el.style.filter += ` contrast(${value}%)`;
-    }
-    else if (key === 'blur') {
-        el.style.filter += ` blur(${value}px)`;
-    }
-    el.style.setProperty(key, String(value));
-}
-export function applyInterpolatedStyle(el, key, from, to, progress) {
-    if (from != null && to != null) {
-        const value = from + (to - from) * progress;
-        applyStyle(el, key, value);
-    }
-}
-export function applyInterpolatedStyles(el, from, to, progress) {
-    el.style.transform = '';
-    el.style.filter = '';
-    for (const [key, value] of Object.entries(to)) {
-        const k = key;
-        applyInterpolatedStyle(el, k, from[k], value, progress);
-    }
-}
-export function applyStyles(el, styles) {
-    el.style.transform = '';
-    el.style.filter = '';
-    for (const [key, value] of Object.entries(styles)) {
-        if (value != null) {
-            applyStyle(el, key, value);
-        }
-    }
-}
-export class TweenImpl {
-    enter;
-    exit;
-    style;
-    constructor(enter = [], exit = [], style) {
-        this.enter = enter;
-        this.exit = exit;
-        this.style = style;
-    }
-    appendTo(ctx) {
-        const element = ctx.getElement();
-        let currentAnimation = 0;
-        let startTime = 0;
-        let animation = null;
-        let from = null;
-        let willClear = null;
-        // let unmounted = false
-        let animations = this.enter;
-        const { exit, style } = this;
-        function frame() {
-            // if (unmounted) return
-            if (animation == null || from == null)
-                return;
-            const now = Date.now();
-            const elapsed = now - startTime;
-            const { duration = 250, delay = 0 } = animation;
-            if (elapsed < delay)
-                return;
-            const progress = Math.min(1, (elapsed - delay) / duration);
-            applyInterpolatedStyles(element, from, animation.style, progress);
-            // console.log(
-            //   element.style.opacity,
-            //   // getComputedStyleValue(getComputedStyle(element), 'translateY')
-            // )
-            if (progress >= 1) {
-                if (exit === animations) {
-                    console.log('exit');
-                    willClear?.();
-                }
-                else {
-                    console.log('play next');
-                    playNextAnimation();
-                }
-            }
-            else {
-                requestAnimationFrame(frame);
-            }
-        }
-        function playNextAnimation() {
-            if (currentAnimation >= animations.length)
-                return;
-            startTime = Date.now();
-            animation = animations[currentAnimation];
-            if (currentAnimation === 0 && style != null && animations !== exit) {
-                applyStyles(element, style);
-                from = style;
-                console.log('playNextAnimation from style', currentAnimation, from, animation.style);
-            }
-            else {
-                from = getCurrentStyleValues(element, animation.style);
-                console.log('playNextAnimation from empty', currentAnimation, from, animation.style);
-            }
-            requestAnimationFrame(frame);
-            currentAnimation++;
-        }
-        playNextAnimation();
-        return (clearTree) => {
-            console.log('onUnmount');
-            animations = exit;
-            // unmounted = true
-            currentAnimation = 0;
-            ctx.delayClear(clearTree, (clear) => {
-                console.log('perform clear');
-                willClear = () => {
-                    console.log('finalize clear');
-                    animations = [];
-                    clear();
-                };
-                playNextAnimation();
-            });
-        };
-    }
-}
-export function Tween({ enter, exit, style }) {
-    return new TweenImpl(enter, exit, style);
-}

package/types/clean.d.ts

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

package/types/clean.js

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

package/types/idom-context.d.ts

@@ -1,27 +0,0 @@
-import { type Clear } from './clean';
-export type ProviderMark<T> = symbol;
-export declare function makeProviderMark<T>(): ProviderMark<T>;
-export interface IDOMContext {
-    makeReference: () => IDOMContext;
-    makeElement: (tagName: string) => IDOMContext;
-    getBooleanAttribute: (name: string) => boolean;
-    setBooleanAttribute: (name: string, value: boolean) => void;
-    createBooleanAttribute: (name: string, value: boolean) => [(newValue: boolean) => void, Clear];
-    getAttribute: (name: string) => string | null;
-    setAttribute: (name: string, value: string | null) => void;
-    createAttribute: (name: string, value: string) => [(newValue: string) => void, Clear];
-    getProperty: <T>(name: string) => T;
-    setProperty: <T>(name: string, value: T) => void;
-    createProperty: <T>(name: string, value: T) => [(newValue: T) => void, Clear];
-    createText: (text: string) => [(newText: string) => void, Clear];
-    createClass: (cls: string) => [(newClass: string) => void, Clear];
-    createHandler: <T>(name: string, handler: (value: T) => void) => Clear;
-    delayClear: (removeTree: boolean, f: (finalize: () => void) => void) => void;
-    requestClear: (removeTree: boolean, willClear: () => void) => void;
-    getElement: () => HTMLElement;
-    getDocument: () => Document;
-    withProvider: <T>(mark: ProviderMark<T>, provider: T) => IDOMContext;
-    getProvider: <T>(mark: ProviderMark<T>) => T;
-    setStyle: (name: string, value: string | undefined | null) => void;
-    createStyle: (name: string, value: string | undefined | null) => [(newValue: string) => void, Clear];
-}

package/types/idom-context.js

@@ -1,3 +0,0 @@
-export function makeProviderMark() {
-    return Symbol('providerMark');
-}

package/types/renderable.d.ts

@@ -1,5 +0,0 @@
-import { type DOMContext } from '../dom-context';
-import { type Clear } from './clean';
-export interface Renderable {
-    appendTo: (ctx: DOMContext) => Clear;
-}

package/types/renderable.js

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