@tempots/dom 9.0.2 → 10.0.1

package/components/Text.d.ts

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

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

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

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

@@ -1,283 +0,0 @@
-export function parseColorChannels(color) {
-    let match = color.match(/rgba?\((\d+), (\d+), (\d+)(, (\d+))?\)/);
-    if (match != null) {
-        return [
-            Number(match[1]),
-            Number(match[2]),
-            Number(match[3]),
-            match[4] != null ? Number(match[5]) : 1,
-            'rgba'
-        ];
-    }
-    else {
-        match = color.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/);
-        if (match != null) {
-            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 != null) {
-                return [
-                    Number(match[1]),
-                    Number(match[2]),
-                    Number(match[3]),
-                    match[4] != null ? 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 == null) {
-        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 != null ? parseInt(blur, 10) : 0;
-    const parsedSpread = spread != null ? 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] = 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;
-    }
-    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 getComputedAnimatable(el, styles) {
-    const result = {};
-    const computedStyles = getComputedStyle(el);
-    for (const [key, value] of Object.entries(styles)) {
-        const k = key;
-        if (value != null) {
-            result[k] = getComputedAnimatableProp(computedStyles, k);
-        }
-    }
-    return result;
-}
-export function applyAnimatableProp(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));
-}
-const interpolationCache = new Map();
-function getInterpolate(from, to, type) {
-    if (interpolationCache.has(type + ':' + from + to)) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        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) {
-        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) {
-    el.style.transform = '';
-    el.style.filter = '';
-    for (const [key, value] of Object.entries(to)) {
-        const k = key;
-        applyInterpolatedAnimatableProp(el, k, from[k], value, progress);
-    }
-}
-export function applyAnimatable(el, styles) {
-    el.style.transform = '';
-    el.style.filter = '';
-    for (const [key, value] of Object.entries(styles)) {
-        if (value != null) {
-            applyAnimatableProp(el, key, value);
-        }
-    }
-}

package/dom-context.d.ts

@@ -1,39 +0,0 @@
-import { type Clear } from './clean';
-export type ProviderMark<T> = symbol;
-export declare function makeProviderMark<T>(): ProviderMark<T>;
-export type Providers = Record<ProviderMark<unknown>, unknown>;
-export declare class DOMContext {
-    private readonly document;
-    private readonly element;
-    private readonly reference;
-    private readonly ns;
-    private readonly providers;
-    static of(element: HTMLElement): DOMContext;
-    constructor(document: Document, element: HTMLElement, reference: Text | undefined, ns: string | undefined, providers: Providers);
-    append(node: Node): void;
-    getElement(): HTMLElement;
-    getDocument(): Document;
-    makeReference(): DOMContext;
-    makeElement(tagName: string): DOMContext;
-    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: (event: T) => void): Clear;
-    private readonly suspendedClears;
-    delayClear(f: (removeTree: boolean, clear: () => void) => void): (removeTree: boolean) => void;
-    requestClear(removeTree: boolean, willClear: () => void): void;
-    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

@@ -1,263 +0,0 @@
-function extractClassNames(cls) {
-    return (cls ?? '').split(/\s+/g).filter((className) => className.length > 0);
-}
-function createIntegerSet(x) {
-    const integerSet = new Set();
-    for (let i = 0; i < x; i++) {
-        integerSet.add(i);
-    }
-    return integerSet;
-}
-export function makeProviderMark() {
-    return Symbol('providerMark');
-}
-export class DOMContext {
-    document;
-    element;
-    reference;
-    ns;
-    providers;
-    static of(element) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return new DOMContext(element.ownerDocument, element, undefined, undefined, {});
-    }
-    constructor(document, element, reference, ns, providers) {
-        this.document = document;
-        this.element = element;
-        this.reference = reference;
-        this.ns = ns;
-        this.providers = providers;
-    }
-    append(node) {
-        if (this.reference !== undefined) {
-            try {
-                // There are components (TextContent, InnerHTML) that can mess up with the internal state of an element
-                this.element.insertBefore(node, this.reference);
-            }
-            catch (_) {
-                this.element.appendChild(node);
-            }
-        }
-        else {
-            this.element.appendChild(node);
-        }
-    }
-    getElement() {
-        return this.element;
-    }
-    getDocument() {
-        return this.document;
-    }
-    makeReference() {
-        const textNode = this.document.createTextNode('');
-        this.append(textNode);
-        return new DOMContext(this.document, this.element, textNode, this.ns, this.providers);
-    }
-    makeElement(tagName) {
-        if (this.ns !== undefined || tagName === 'svg') {
-            const ns = this.ns ?? 'http://www.w3.org/2000/svg';
-            const element = this.document.createElementNS(ns, tagName);
-            this.append(element);
-            return new DOMContext(this.document, element, undefined, ns, this.providers);
-        }
-        else {
-            const element = this.document.createElement(tagName);
-            this.append(element);
-            return new DOMContext(this.document, element, undefined, this.ns, this.providers);
-        }
-    }
-    getBooleanAttribute(name) {
-        return this.element.hasAttribute(name);
-    }
-    setBooleanAttribute(name, value) {
-        if (value) {
-            this.element.setAttribute(name, '');
-        }
-        else {
-            this.element.removeAttribute(name);
-        }
-    }
-    createBooleanAttribute(name, value) {
-        const current = this.element.hasAttribute(name);
-        this.setBooleanAttribute(name, value);
-        return [
-            (newValue) => {
-                this.setBooleanAttribute(name, newValue);
-            },
-            (removeTree) => {
-                if (removeTree) {
-                    this.setBooleanAttribute(name, current);
-                }
-            }
-        ];
-    }
-    getAttribute(name) {
-        return this.element.getAttribute(name);
-    }
-    setAttribute(name, value) {
-        if (value == null) {
-            this.element.removeAttribute(name);
-        }
-        else {
-            this.element.setAttribute(name, value);
-        }
-    }
-    createAttribute(name, value) {
-        const current = this.element.getAttribute(name);
-        this.setAttribute(name, value);
-        return [
-            (newValue) => {
-                this.setAttribute(name, newValue);
-            },
-            (removeTree) => {
-                if (removeTree) {
-                    this.setAttribute(name, current);
-                }
-            }
-        ];
-    }
-    getProperty(name) {
-        return Reflect.get(this.element, name);
-    }
-    setProperty(name, value) {
-        if (value == null) {
-            Reflect.deleteProperty(this.element, name);
-        }
-        else {
-            Reflect.set(this.element, name, value);
-        }
-    }
-    createProperty(name, value) {
-        const current = this.getProperty(name);
-        this.setProperty(name, value);
-        return [
-            (newValue) => {
-                this.setProperty(name, newValue);
-            },
-            (removeTree) => {
-                if (removeTree) {
-                    this.setProperty(name, current);
-                }
-            }
-        ];
-    }
-    createText(text) {
-        const textNode = this.document.createTextNode(text);
-        this.append(textNode);
-        return [
-            (newText) => {
-                textNode.nodeValue = newText;
-            },
-            (removeTree) => {
-                if (removeTree) {
-                    textNode.remove();
-                }
-            }
-        ];
-    }
-    createClass(cls) {
-        let current = extractClassNames(cls);
-        current.forEach((className) => {
-            this.element.classList.add(className);
-        });
-        return [
-            (newClass) => {
-                current.forEach((className) => {
-                    this.element.classList.remove(className);
-                });
-                current = extractClassNames(newClass);
-                current.forEach((className) => {
-                    this.element.classList.add(className);
-                });
-            },
-            (removeTree) => {
-                if (removeTree) {
-                    current.forEach((className) => {
-                        this.element.classList.remove(className);
-                        if (this.element.classList.length === 0) {
-                            this.element.removeAttribute('class');
-                        }
-                    });
-                }
-            }
-        ];
-    }
-    createHandler(name, handler) {
-        this.element.addEventListener(name, handler);
-        return (removeTree) => {
-            if (removeTree) {
-                this.element.removeEventListener(name, handler);
-            }
-        };
-    }
-    suspendedClears = [];
-    delayClear(f) {
-        this.suspendedClears.push(f);
-        return (removeTree) => {
-            // TODO nothing happens?
-        };
-    }
-    requestClear(removeTree, willClear) {
-        if (this.suspendedClears.length === 0) {
-            willClear();
-            this.clear(removeTree);
-        }
-        else {
-            const set = createIntegerSet(this.suspendedClears.length);
-            const clearSuspended = (index) => {
-                set.delete(index);
-                if (set.size === 0) {
-                    willClear();
-                    this.clear(removeTree);
-                }
-            };
-            this.suspendedClears.forEach((f, i) => { f(removeTree, () => { clearSuspended(i); }); });
-            this.suspendedClears.length = 0;
-        }
-    }
-    clear(removeTree) {
-        if (removeTree) {
-            if (this.reference !== undefined) {
-                this.reference.parentElement?.removeChild(this.reference);
-            }
-            else {
-                this.element.onblur = null;
-                this.element.parentElement?.removeChild(this.element);
-            }
-        }
-    }
-    withProvider(mark, provider) {
-        return new DOMContext(this.document, this.element, this.reference, this.ns, {
-            ...this.providers,
-            [mark]: provider
-        });
-    }
-    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);
-        }
-        else {
-            this.element.style.setProperty(name, value);
-        }
-    }
-    createStyle(name, value) {
-        const current = this.element.style.getPropertyValue(name);
-        this.setStyle(name, value);
-        return [
-            (newValue) => {
-                this.setStyle(name, newValue);
-            },
-            (removeTree) => {
-                if (removeTree) {
-                    this.setStyle(name, current);
-                }
-            }
-        ];
-    }
-}

package/helpers/handle-anchor-click.d.ts

@@ -1,4 +0,0 @@
-export declare const handleAnchorClick: (callback: () => boolean, options?: {
-    checkExtension?: boolean;
-    checkExternalUrl?: boolean;
-}) => (e: MouseEvent) => void;