flinker-dom 0.0.1

package/LICENSE.md

@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# Install
+```cli
+npm i flinker-dom
+```
+
+# License
+MIT

package/dist/esm/components.js

@@ -0,0 +1,675 @@
+import { RXObservableValue } from 'flinker';
+import { buildClassName } from './core';
+export class UIComponent {
+    constructor(tag) {
+        this.unsubscribeColl = [];
+        this.reactions = [];
+        /*
+         *
+         * Rendering
+         *
+         */
+        this.willDomUpdate = false;
+        this.affectSet = new Set();
+        this.props = {};
+        /*
+         *
+         * Destroing
+         *
+         */
+        this.isDestroyed = false;
+        this.tag = tag;
+        this.dom = document.createElement(tag);
+        UIComponent.activeParent?.addChild(this);
+    }
+    observe(rx, affect1 = 'affectsProps', affect2) {
+        this.unsubscribeColl.push(rx.pipe()
+            .onReceive(() => this.render(affect1, affect2))
+            .subscribe());
+        return this;
+    }
+    propsDidChange(fn) {
+        if (this.onPropsChangeSubscribers)
+            this.onPropsChangeSubscribers.push(fn);
+        else
+            this.onPropsChangeSubscribers = [fn];
+        !this.willDomUpdate && fn(this.props);
+        return this;
+    }
+    map(fn) {
+        if (this.mapStateFn !== fn) {
+            this.mapStateFn = fn;
+            this.render('affectsProps');
+        }
+        return this;
+    }
+    react(fn) {
+        this.reactions.push(fn);
+        this.render('affectsProps');
+        return this;
+    }
+    whenHovered(fn) {
+        this.whenHoveredFn = fn;
+        this.render('affectsProps');
+        return this;
+    }
+    children(fn) {
+        if (this.instantiateChildrenFn !== fn) {
+            this.instantiateChildrenFn = fn;
+            this.render('recreateChildren');
+        }
+        return this;
+    }
+    addChild(c) {
+        if (!this.childrenColl)
+            this.childrenColl = [];
+        this.childrenColl.push(c);
+        this.dom.appendChild(c.dom);
+    }
+    render(affect1, affect2) {
+        this.affectSet.add(affect1);
+        affect2 && this.affectSet.add(affect2);
+        if (!this.willDomUpdate) {
+            this.willDomUpdate = true;
+            setTimeout(() => this.updateDom());
+        }
+    }
+    updateDom() {
+        if (this.isDestroyed)
+            return;
+        if (!this.willDomUpdate)
+            return;
+        this.willDomUpdate = false;
+        if (this.affectSet.has('affectsProps')) {
+            this.updateProps();
+            if (this.props.visible === false) {
+                this.dom.hidden = true;
+                this.dom.className = '';
+            }
+            else {
+                const cn = buildClassName(this.props, 'none');
+                this.dom.className = cn;
+                this.dom.hidden = false;
+            }
+        }
+        if (this.affectSet.has('recreateChildren')) {
+            if (this.childrenColl) {
+                this.childrenColl?.forEach(c => c.destroy());
+                this.childrenColl = undefined;
+            }
+            if (this.instantiateChildrenFn !== undefined) {
+                const p = UIComponent.activeParent;
+                UIComponent.activeParent = this;
+                this.instantiateChildrenFn();
+                UIComponent.activeParent = p;
+            }
+        }
+        if (this.affectSet.has('affectsChildrenProps')) {
+            this.childrenColl?.forEach(c => c.render('affectsChildrenProps'));
+        }
+        if (this.affectSet.size > 0) {
+            this.didDomUpdate();
+            this.affectSet.clear();
+        }
+    }
+    updateProps() {
+        const res = {};
+        this.reactions.forEach(fn => fn(res));
+        if (this.whenHoveredFn) {
+            if (!res.pseudo)
+                res.pseudo = {};
+            const state = {};
+            this.whenHoveredFn(state);
+            res.pseudo['hover'] = state;
+        }
+        if (this.mapStateFn)
+            this.mapStateFn(res);
+        if (this.props.visible === false)
+            this.props = {};
+        this.props = res;
+        if (this.onPropsChangeSubscribers)
+            this.onPropsChangeSubscribers.forEach(fn => fn(this.props));
+    }
+    didDomUpdate() {
+        if (this.props.id)
+            this.dom.id = this.props.id;
+        if (this.props.popUp)
+            this.dom.title = this.props.popUp;
+    }
+    destroy() {
+        if (!this.isDestroyed) {
+            this.isDestroyed = true;
+            this.unsubscribeColl.forEach(f => f());
+            this.unsubscribeColl.length = 0;
+            if (this.childrenColl) {
+                this.childrenColl.forEach(c => c.destroy());
+                this.childrenColl = undefined;
+            }
+            this.dom.remove();
+        }
+    }
+    /*
+     *
+     * Event handlers
+     *
+     */
+    onClick(callback) {
+        this.dom.addEventListener('click', callback);
+        return this;
+    }
+    onDoubleClick(callback) {
+        this.dom.addEventListener('dblclick', callback);
+        return this;
+    }
+    onMouseDown(callback) {
+        this.dom.addEventListener('mousedown', callback);
+        return this;
+    }
+    onKeyUp(callback) {
+        this.dom.addEventListener('keyup', callback);
+        return this;
+    }
+    onKeyDown(callback) {
+        this.dom.addEventListener('keydown', callback);
+        return this;
+    }
+    onBlur(callback) {
+        this.dom.addEventListener('blur', callback);
+        return this;
+    }
+    onFocus(callback) {
+        this.dom.addEventListener('focus', callback);
+        return this;
+    }
+    onInput(callback) {
+        this.dom.addEventListener('input', callback);
+        return this;
+    }
+}
+export const vstackMapper = (s) => {
+    const halign = s.halign ?? 'left';
+    const valign = s.valign ?? 'top';
+    switch (halign) {
+        case 'left':
+            s.alignItems = 'flex-start';
+            break;
+        case 'center':
+            s.alignItems = 'center';
+            break;
+        case 'right':
+            s.alignItems = 'flex-end';
+            break;
+        case 'stretch':
+            s.alignItems = 'stretch';
+            break;
+        default:
+            s.alignItems = 'flex-start';
+    }
+    switch (valign) {
+        case 'top':
+            s.justifyContent = 'flex-start';
+            break;
+        case 'center':
+            s.justifyContent = 'center';
+            break;
+        case 'base':
+            s.alignItems = 'baseline';
+            break;
+        case 'bottom':
+            s.justifyContent = 'flex-end';
+            break;
+        case 'stretch':
+            s.justifyContent = 'space-between';
+            break;
+        default:
+            s.alignItems = 'flex-start';
+    }
+};
+export const vstack = () => {
+    return new UIComponent('div')
+        .react(s => {
+        s.display = 'flex';
+        s.flexDirection = 'column';
+        s.alignItems = 'flex-start';
+        s.justifyContent = 'center';
+        s.width = '100%';
+        s.gap = '10px';
+        s.boxSizing = 'border-box';
+    })
+        .map(vstackMapper);
+};
+export const hstackMapper = (s) => {
+    const halign = s.halign ?? 'left';
+    const valign = s.valign ?? 'top';
+    switch (halign) {
+        case 'left':
+            s.justifyContent = 'flex-start';
+            break;
+        case 'center':
+            s.justifyContent = 'center';
+            break;
+        case 'right':
+            s.justifyContent = 'flex-end';
+            break;
+        case 'stretch':
+            s.justifyContent = 'space-between';
+            break;
+        default:
+            s.alignItems = 'flex-start';
+    }
+    switch (valign) {
+        case 'top':
+            s.alignItems = 'flex-start';
+            break;
+        case 'center':
+            s.alignItems = 'center';
+            break;
+        case 'base':
+            s.alignItems = 'baseline';
+            break;
+        case 'bottom':
+            s.alignItems = 'flex-end';
+            break;
+        case 'stretch':
+            s.alignItems = 'stretch';
+            break;
+        default:
+            s.alignItems = 'flex-start';
+    }
+};
+export const hstack = () => {
+    return new UIComponent('div')
+        .react(s => {
+        s.display = 'flex';
+        s.flexDirection = 'row';
+        s.alignItems = 'flex-start';
+        s.justifyContent = 'center';
+        s.wrap = false;
+        s.boxSizing = 'border-box';
+    })
+        .map(hstackMapper);
+};
+export class Text extends UIComponent {
+    didDomUpdate() {
+        super.didDomUpdate();
+        if (!this.childrenColl)
+            this.dom.textContent = this.props.text ?? null;
+        if (this.props.htmlText !== undefined)
+            this.dom.setHTMLUnsafe(this.props.htmlText);
+    }
+}
+export const div = () => {
+    return new Text('div');
+};
+export const p = () => {
+    return new Text('p');
+};
+export const span = () => {
+    return new Text('span');
+};
+export const h1 = () => {
+    return new Text('h1');
+};
+export const h2 = () => {
+    return new Text('h2');
+};
+export const h3 = () => {
+    return new Text('h3');
+};
+export const h4 = () => {
+    return new Text('h4');
+};
+export const h5 = () => {
+    return new Text('h5');
+};
+export const h6 = () => {
+    return new Text('h6');
+};
+export class Button extends Text {
+    whenSelected(fn) {
+        this.whenSelectedFn = fn;
+        this.render('affectsProps');
+        return this;
+    }
+    whenDisabled(fn) {
+        this.whenDisabledFn = fn;
+        this.render('affectsProps');
+        return this;
+    }
+    updateProps() {
+        const res = {};
+        this.reactions.forEach(fn => fn(res));
+        const isSelected = res.isSelected;
+        const isDisabled = res.isDisabled;
+        if (this.whenSelectedFn && isSelected) {
+            this.whenSelectedFn(res);
+        }
+        if (this.whenDisabledFn && isDisabled) {
+            this.whenDisabledFn(res);
+        }
+        if (!isSelected && !isDisabled && this.whenHoveredFn) {
+            if (!res.pseudo)
+                res.pseudo = {};
+            const state = {};
+            this.whenHoveredFn(state);
+            res.pseudo['hover'] = state;
+        }
+        if (!this.childrenColl)
+            this.dom.textContent = this.props.text ?? null;
+        if (this.mapStateFn)
+            this.mapStateFn(res);
+        this.props = res;
+        if (this.onPropsChangeSubscribers)
+            this.onPropsChangeSubscribers.forEach(fn => fn(this.props));
+    }
+    didDomUpdate() {
+        super.didDomUpdate();
+        this.props.href && this.dom.setAttribute('href', this.props.href);
+    }
+}
+export const btn = () => {
+    return new Button('button')
+        .react(s => {
+        s.textSelectable = false;
+    })
+        .whenDisabled(s => {
+        s.opacity = '0.5';
+        s.cursor = 'not-allowed';
+        s.mouseEnabled = false;
+    });
+};
+export class LinkBtn extends Button {
+    didDomUpdate() {
+        super.didDomUpdate();
+        this.props.href && this.dom.setAttribute('href', this.props.href);
+        this.props.target && this.dom.setAttribute('target', this.props.target);
+    }
+}
+export const link = () => {
+    return new LinkBtn('a')
+        .react(s => {
+        s.cursor = 'pointer';
+    });
+};
+export const switcher = () => {
+    const $sharedState = new RXObservableValue({});
+    return btn()
+        .react(s => {
+        s.trackWidth = 34;
+        s.trackHeight = 22;
+        s.trackColor = '#ffFFff';
+        s.thumbColor = '#000000';
+        s.thumbDiameter = 16;
+        s.minHeight = '0px';
+        s.textSelectable = false;
+        s.cornerRadius = s.trackHeight + 'px';
+        s.animate = 'background-color 300ms';
+    })
+        .whenSelected(s => {
+        s.trackColor = '#aa0000';
+        s.thumbColor = '#ffFFff';
+    })
+        .map(s => {
+        s.bgColor = s.trackColor ?? '#ff0000';
+        s.width = s.trackWidth + 'px';
+        s.height = s.trackHeight + 'px';
+    })
+        .propsDidChange(props => $sharedState.value = props)
+        .children(() => {
+        //thumb
+        div()
+            .observe($sharedState)
+            .react(s => {
+            const ss = $sharedState.value;
+            const thumbDiameter = ss.thumbDiameter ?? 0;
+            const trackWidth = ss.trackWidth ?? 0;
+            const trackHeight = ss.trackHeight ?? 0;
+            const edgeOffset = (trackHeight - thumbDiameter) / 2;
+            s.bgColor = ss.thumbColor;
+            s.width = ss.thumbDiameter + 'px';
+            s.height = ss.thumbDiameter + 'px';
+            s.cornerRadius = ss.thumbDiameter + 'px';
+            s.animateAll = '300ms';
+            s.position = 'relative';
+            s.top = '0';
+            s.left = (ss.isSelected ? trackWidth - thumbDiameter - edgeOffset : edgeOffset) + 'px';
+        });
+    });
+};
+/*
+*
+* Observer
+*
+**/
+class Observer extends UIComponent {
+    constructor() {
+        super('p');
+        this.hiddenElement = this.dom;
+        this.hiddenElement.hidden = true;
+    }
+    observe(rx) {
+        this.unsubscribeColl.push(rx.pipe()
+            .debounce(0)
+            .onReceive((v) => this.replaceDom(v))
+            .subscribe());
+        return this;
+    }
+    onReceive(fn) {
+        this.onReceiveFn = fn;
+    }
+    replaceDom(value) {
+        if (this.isDestroyed)
+            return;
+        const p = UIComponent.activeParent;
+        UIComponent.activeParent = undefined;
+        const u = this.onReceiveFn?.(value);
+        UIComponent.activeParent = p;
+        if (typeof u === 'object' && 'dom' in u) {
+            this.dom.replaceWith(u.dom);
+            this.instance?.destroy();
+            this.instance = u;
+            this.dom = u.dom;
+        }
+        else if (this.dom !== this.hiddenElement) {
+            this.dom.replaceWith(this.hiddenElement);
+            this.instance?.destroy();
+            this.dom = this.hiddenElement;
+        }
+    }
+    didDomUpdate() {
+        super.didDomUpdate();
+        if (this.affectSet.has('affectsChildrenProps')) {
+            if (this.instance && !this.instance.isDestroyed)
+                this.instance.render('affectsProps', 'affectsChildrenProps');
+        }
+    }
+    destroy() {
+        super.destroy();
+        this.instance?.destroy();
+    }
+}
+export const observer = (rx) => {
+    const res = new Observer();
+    res.observe(rx);
+    return res;
+};
+/*
+*
+* List: div
+*
+**/
+export class List extends UIComponent {
+    constructor(tag) {
+        super(tag);
+        this.itemsFn = undefined;
+        this._itemRenderer = (item) => p().react(state => state.text = item);
+        this.equalsFn = (a, b) => a === b;
+        this._items = [];
+        this.childrenColl = [];
+    }
+    items(fn) {
+        this.itemsFn = fn;
+        return this;
+    }
+    itemRenderer(fn) {
+        this._itemRenderer = fn;
+        return this;
+    }
+    equals(fn) {
+        this.equalsFn = fn;
+        return this;
+    }
+    didDomUpdate() {
+        super.didDomUpdate();
+        const actualItems = this.itemsFn ? [...this.itemsFn()] : [];
+        const actualChildren = [];
+        let index = 0;
+        if (!this.childrenColl)
+            this.childrenColl = [];
+        while (index < actualItems.length) {
+            const actualItem = actualItems[index];
+            const oldVN = this.childrenColl[index];
+            if (index < this._items.length) {
+                if (this.equalsFn(this._items[index], actualItem)) {
+                    actualChildren.push(oldVN);
+                }
+                else {
+                    const newVN = this._itemRenderer(actualItem, index);
+                    oldVN.dom.replaceWith(newVN.dom);
+                    oldVN.destroy();
+                    actualChildren.push(newVN);
+                }
+            }
+            else {
+                const newVN = this._itemRenderer(actualItem, index);
+                this.dom.appendChild(newVN.dom);
+                actualChildren.push(newVN);
+            }
+            index++;
+        }
+        if (index < this.childrenColl.length) {
+            this.childrenColl.slice(index).forEach(n => n.destroy());
+        }
+        this.childrenColl = actualChildren;
+        this._items = actualItems;
+    }
+}
+export const vlist = () => {
+    return new List('div')
+        .react(s => {
+        s.display = 'flex';
+        s.flexDirection = 'column';
+        s.alignItems = 'flex-start';
+        s.justifyContent = 'center';
+        s.width = '100%';
+        s.gap = '10px';
+        s.boxSizing = 'border-box';
+    })
+        .map(vstackMapper);
+};
+export const hlist = () => {
+    return new List('div')
+        .react(s => {
+        s.display = 'flex';
+        s.flexDirection = 'row';
+        s.alignItems = 'flex-start';
+        s.justifyContent = 'center';
+        s.wrap = false;
+        s.boxSizing = 'border-box';
+    })
+        .map(hstackMapper);
+};
+export const spacer = () => {
+    return new UIComponent('div')
+        .react(s => {
+        s.flexGrow = 1;
+    })
+        .map(s => {
+        if (s.width?.includes('px')) {
+            s.minWidth = s.width;
+            s.maxWidth = s.width;
+        }
+        if (s.height?.includes('px')) {
+            s.minHeight = s.height;
+            s.maxHeight = s.height;
+        }
+    });
+};
+export class Image extends Button {
+    didDomUpdate() {
+        super.didDomUpdate();
+        this.props.src && this.dom.setAttribute('src', this.props.src);
+        this.props.alt && this.dom.setAttribute('alt', this.props.alt);
+    }
+}
+export const image = () => {
+    return new Image('img');
+};
+export class Input extends UIComponent {
+    bind(rx) {
+        this.unsubscribeColl.push(rx.pipe()
+            .onReceive(v => this.dom.value = v)
+            .subscribe());
+        this.onInput((e) => rx.value = e.target.value);
+        return this;
+    }
+    whenFocused(fn) {
+        this.whenFocusedFn = fn;
+        this.render('affectsProps');
+        return this;
+    }
+    whenPlaceholderShown(fn) {
+        this.whenPlaceholderShownFn = fn;
+        this.render('affectsProps');
+        return this;
+    }
+    updateProps() {
+        const res = {};
+        this.reactions.forEach(fn => fn(res));
+        if (this.whenHoveredFn) {
+            if (!res.pseudo)
+                res.pseudo = {};
+            const state = {};
+            this.whenHoveredFn(state);
+            res.pseudo['hover'] = state;
+        }
+        if (this.whenFocusedFn) {
+            if (!res.pseudo)
+                res.pseudo = {};
+            const state = {};
+            this.whenFocusedFn(state);
+            res.pseudo['focus'] = state;
+        }
+        if (this.whenPlaceholderShownFn) {
+            if (!res.pseudo)
+                res.pseudo = {};
+            const state = {};
+            this.whenPlaceholderShownFn(state);
+            res.pseudo['placeholder'] = state;
+        }
+        if (this.mapStateFn)
+            this.mapStateFn(res);
+        this.props = res;
+        if (this.onPropsChangeSubscribers)
+            this.onPropsChangeSubscribers.forEach(fn => fn(this.props));
+    }
+    didDomUpdate() {
+        super.didDomUpdate();
+        this.props.placeholder && this.dom.setAttribute('placeholder', this.props.placeholder);
+        this.props.autoCorrect && this.dom.setAttribute('autoCorrect', this.props.autoCorrect);
+        this.props.autoComplete && this.dom.setAttribute('autoComplete', this.props.autoComplete);
+        this.props.type && this.dom.setAttribute('type', this.props.type);
+        this.props.inputMode && this.dom.setAttribute('inputMode', this.props.inputMode);
+        this.props.maxLength && this.dom.setAttribute('maxLength', this.props.maxLength);
+        this.props.caretColor && this.dom.setAttribute('caretColor', this.props.caretColor);
+        this.dom.spellcheck = this.props.spellCheck ?? false;
+        if (this.props.autoFocus)
+            this.dom.focus();
+    }
+}
+export const input = (type = 'text') => {
+    return new Input('input').react(s => s.type = type);
+};
+export const textarea = () => {
+    return new Input('textarea').react(s => s.type = 'text');
+};