@tempots/dom 5.0.0 → 5.0.2

package/dom-context.js

@@ -0,0 +1,260 @@
+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];
+    }
+    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

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

package/helpers/handle-anchor-click.js

@@ -0,0 +1,43 @@
+function shouldNotApplyCallback(e, checkExtension, checkExternalUrl) {
+    let target = e.target;
+    while ((target != null) && !(target instanceof HTMLAnchorElement)) {
+        target = target.parentElement;
+    }
+    if (target == null)
+        return true;
+    const anchor = target;
+    // Check for modifier keys and non-left-button, which indicate the user wants to control
+    // navigation
+    if (e.button !== 0 || e.ctrlKey || e.metaKey) {
+        return true;
+    }
+    // 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') {
+        return true;
+    }
+    if (anchor.getAttribute('download') != null) {
+        return true; // let the download happen
+    }
+    if (checkExternalUrl) {
+        const { pathname, search, hash } = anchor;
+        const relativeUrl = pathname + search + hash;
+        // don't navigate if external link or has extension
+        if (anchor.getAttribute('href') !== relativeUrl ||
+            (checkExtension && !/\/[^/.]*$/.test(pathname))) {
+            return true;
+        }
+    }
+    return false;
+}
+export const handleAnchorClick = (callback, options = {
+    checkExtension: true,
+    checkExternalUrl: true
+}) => (e) => {
+    const { checkExtension, checkExternalUrl } = options;
+    if (shouldNotApplyCallback(e, checkExtension === true, checkExternalUrl === true)) {
+        return;
+    }
+    if (callback())
+        e.preventDefault();
+};

package/helpers/handle-text-input.d.ts

@@ -0,0 +1 @@
+export declare const handleTextInput: (f: (input: string) => void) => (e: Event) => void;

package/helpers/handle-text-input.js

@@ -0,0 +1,4 @@
+export const handleTextInput = (f) => (e) => {
+    const input = e.target;
+    f(input?.value ?? '');
+};

package/helpers/is-empty-element.d.ts

@@ -0,0 +1,2 @@
+import { type JSX } from '../jsx-runtime';
+export declare function isEmptyElement(element: JSX.DOMNode): boolean;

package/helpers/is-empty-element.js

@@ -0,0 +1,8 @@
+export function isEmptyElement(element) {
+    if (Array.isArray(element)) {
+        if (element.length === 0)
+            return true;
+        return element.every(isEmptyElement);
+    }
+    return element == null || element === '';
+}

package/index.d.ts

@@ -0,0 +1,36 @@
+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 };

package/jsx-dev-runtime.d.ts

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs, jsxDEV, makeRenderable, makeRenderables } from './jsx-runtime';

package/jsx-dev-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs, jsxDEV, makeRenderable, makeRenderables } from './jsx-runtime';

package/jsx-runtime.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from './jsx';
+import { type Renderable } from './renderable';
+export declare function makeRenderables(value: any): Renderable[];
+export declare function makeRenderable(value: any): Renderable;
+declare function makeFragment({ children }: {
+    children: any[];
+}): Renderable;
+declare function makeElement(Name: any, ...args: any[]): Renderable;
+export { makeElement as jsx, makeElement as jsxs, makeElement as jsxDEV, makeFragment as Fragment, type JSX };

package/jsx-runtime.js

@@ -0,0 +1,157 @@
+import { ElImpl } from './components/El';
+import { AttributeImpl } from './components/Attribute';
+import { BooleanAttributeImpl } from './components/BooleanAttribute';
+import { PropertyImpl } from './components/Property';
+import { ClassNameImpl } from './components/ClassName';
+import { Prop, Signal } from './prop';
+import { TextImpl } from './components/Text';
+import { OnImpl } from './components/On';
+import { FragmentImpl } from './components/Fragment';
+const domBooleanAttributes = new Set([
+    'allowfullscreen',
+    'allowpaymentrequest',
+    'async',
+    'autofocus',
+    'autoplay',
+    'capture',
+    'controls',
+    'default',
+    'defer',
+    'disabled',
+    'disablepictureinpicture',
+    'disableremoteplayback',
+    'download',
+    'draggable',
+    'formnovalidate',
+    'hidden',
+    'ismap',
+    'itemscope',
+    'loop',
+    'nomodule',
+    'novalidate',
+    'open',
+    'playsinline',
+    'readonly',
+    'required',
+    'reversed',
+    'scoped',
+    'seamless',
+    'spellcheck',
+    'truespeed'
+]);
+const domProperties = new Set([
+    'checked',
+    'checked',
+    'classList',
+    'className',
+    'contentEditable',
+    'dataset',
+    'innerHTML',
+    'multiple',
+    'muted',
+    'scrollLeft',
+    'scrollTop',
+    'selected',
+    'style',
+    'tabIndex',
+    'textContent',
+    'value'
+]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isPrimitive(value) {
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint' || value instanceof Date;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeRenderables(value) {
+    if (value == null) {
+        return [];
+    }
+    if (Array.isArray(value)) {
+        return value.flatMap(makeRenderables);
+    }
+    if (typeof value === 'string') {
+        return [new TextImpl(new Prop(value))];
+    }
+    if (Signal.isSignal(value)) {
+        return [new TextImpl(value)];
+    }
+    if (typeof value === 'object' && 'appendTo' in value) {
+        return [value];
+    }
+    if (isPrimitive(value)) {
+        return [new TextImpl(new Prop(value).map(String))];
+    }
+    throw new Error(`Unkwown renderable: ${String(value)}`);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeRenderable(value) {
+    const renderables = makeRenderables(value);
+    if (renderables.length === 0) {
+        return new FragmentImpl([]);
+    }
+    if (renderables.length === 1) {
+        return renderables[0];
+    }
+    return new FragmentImpl(renderables);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isNamedConstructor(obj) {
+    return obj.prototype?.constructor?.name != null;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeFragment({ children }) {
+    if (Array.isArray(children)) {
+        return new FragmentImpl(children.flatMap(makeRenderables));
+    }
+    else {
+        return makeRenderable(children);
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeElement(Name, ...args) {
+    if (typeof Name === 'function') {
+        if (isNamedConstructor(Name)) {
+            const el = new Name(...args);
+            return el;
+        }
+        else {
+            const el = Name(...args);
+            return el;
+        }
+    }
+    const { children: untypedChildren, ...rest } = args[0] ?? {};
+    const children = [];
+    if (Array.isArray(untypedChildren)) {
+        children.push(...(untypedChildren.flatMap(makeRenderables)));
+    }
+    else if (untypedChildren !== undefined) {
+        children.push(...makeRenderables(untypedChildren));
+    }
+    for (const [key, value] of Object.entries(rest)) {
+        if (key.startsWith('on')) {
+            const eventName = key.slice(2).toLowerCase();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            children.push(new OnImpl(eventName, value));
+            continue;
+        }
+        if (value == null) {
+            continue;
+        }
+        const prop = isPrimitive(value) ? new Prop(value) : value;
+        if (key === 'class' || key === 'className') {
+            children.push(new ClassNameImpl(prop));
+            continue;
+        }
+        if (domProperties.has(key)) {
+            children.push(new PropertyImpl(key, prop));
+            continue;
+        }
+        if (domBooleanAttributes.has(key)) {
+            children.push(new BooleanAttributeImpl(key, prop));
+            continue;
+        }
+        children.push(new AttributeImpl(key, prop));
+    }
+    return new ElImpl(Name, children);
+}
+export { makeElement as jsx, makeElement as jsxs, makeElement as jsxDEV, makeFragment as Fragment };