@alexgyver/component 1.5.0 → 2.0.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.5.0",
-  "description": "Simple HTML&SVG element builder",
-  "main": "./Component.js",
-  "module": "./Component.js",
-  "types": "./Component.js",
+  "version": "2.0.0",
+  "description": "Simple reactive HTML&SVG element builder",
+  "main": "./src/Component.js",
+  "module": "./src/Component.js",
+  "types": "./src/Component.js",
   "scripts": {
-    "build": "webpack --config ./webpack.config.js"
+    "build": "webpack --config ./webpack.config.js",
+    "dev": "webpack serve --config ./webpack.dev.config.js & webpack --config ./webpack.dev.config.js"
   },
   "repository": {
     "type": "git",
@@ -15,7 +16,13 @@
   "author": "AlexGyver <alex@alexgyver.ru>",
   "license": "MIT",
   "devDependencies": {
-    "webpack": "^5.105.0",
-    "webpack-cli": "^6.0.1"
+    "webpack": "^5.105.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.3",
+    "compression-webpack-plugin": "^11.1.0",
+    "ifdef-loader": "^2.3.2",
+    "css-loader": "^7.1.3",
+    "style-loader": "^4.0.0",
+    "mini-css-extract-plugin": "^2.10.0"
   }
-}
+}

package/src/Component.js

@@ -0,0 +1,15 @@
+import { EL } from "./EL";
+export { EL };
+
+/// #if !PICO_COMPONENT
+import { SVG } from "./SVG";
+export { SVG };
+
+import { addCSS, removeCSS, watchMount, watchResize } from "./utils";
+export { addCSS, removeCSS, watchMount, watchResize };
+/// #endif
+
+/// #if !TINY_COMPONENT
+import { State, useState } from "./State";
+export { State, useState };
+/// #endif

package/src/EL.js

@@ -0,0 +1,371 @@
+/// #if !TINY_COMPONENT
+import { watchMount, watchResize } from "./utils";
+/// #endif
+
+export class EL {
+    // Создать элемент и поместить его в переменную $root
+    constructor(tag, cfg = {}, svg = false) {
+        this.$root = EL.make(tag, { ...cfg, ctx: this }, svg);
+    }
+
+    //#region ## make
+
+    // Создать элемент
+    static make(tag, cfg = {}, svg = false) {
+        tag ??= cfg.tag;
+
+        let el = (tag == 'svg' || svg)
+            ? document.createElementNS("http://www.w3.org/2000/svg", tag ?? 'svg')
+            : document.createElement(tag ?? 'div');
+
+        EL.update(el, cfg);
+
+        /// #if !TINY_COMPONENT
+        for (let k of EL_METHODS) {
+            el[k] = (...a) => EL[k](el, ...a);
+        }
+
+        CALLBACKS.forEach(fn => {
+            if (fn in cfg) el['_' + fn] = cfg[fn].bind(el.ctx, { el, ctx: el.ctx });
+        });
+
+        if (el._onResize) watchResize(el, el._onResize);
+        /// #endif
+
+        return el;
+    }
+
+    //#region ## update
+
+    // Обновить элемент
+    static update(el, cfg) {
+        if (!is.node(el) || !is.obj(cfg)) return el;
+
+        el.ctx = cfg.ctx ?? cfg.context ?? el.ctx;
+
+        for (let [param, val] of Object.entries(cfg)) _update(el, param, val);
+
+        /// #if !TINY_COMPONENT
+        if (el._onUpdate) el._onUpdate();
+        /// #endif
+
+        if (cfg.also) cfg.also.call(el.ctx, { el, ctx: el.ctx });
+
+        return el;
+    }
+
+    //#region ## lifecycle
+
+    // Подключить к родителю, null - отключить, вернёт Promise
+    static mount(el, parent, waitRender = false, tries = 100) {
+        if (el) {
+            /// #if !TINY_COMPONENT
+            if (parent == null) {
+                if (el.parentNode) el.parentNode.removeChild(el);
+            } else {
+                /// #endif
+                if (el.parentNode !== parent) parent.appendChild(el);
+                /// #if !TINY_COMPONENT
+                if (tries) return watchMount(el, waitRender, tries);
+            }
+            /// #endif
+        }
+        return Promise.resolve(el);
+    }
+
+    // Удалить всех детей
+    static clear(el, recursive = true) {
+        if (!el) return;
+        while (el.firstChild) {
+            /// #if !TINY_COMPONENT
+            if (recursive) EL.clear(el.firstChild, true);
+            /// #endif
+            EL.remove(el.firstChild, false);
+        }
+    }
+
+    // Удалить элемент
+    static remove(el, recursive = true) {
+        if (!el) return;
+        /// #if !TINY_COMPONENT
+        if (recursive) EL.clear(el, true);
+        EL.release(el);
+        EL.unbind(el);
+        if (el._onDestroy) el._onDestroy();
+        CALLBACKS.forEach(fn => el['_' + fn] = null);
+        /// #endif
+        if (el.parentNode) el.parentNode.removeChild(el); // remove
+    }
+
+    /// #if !TINY_COMPONENT
+
+    // Заменить ребёнка old на нового el, old удалить, у el запустить монтаж с вызовом обработчиков. Вернёт el
+    static replace(old, el, keepContext = false) {
+        if (old) {
+            if (old.parentNode) old.parentNode.replaceChild(el, old);
+            if (keepContext) el.ctx = old.ctx;
+            watchMount(el);
+            old.remove();
+        }
+        return el;
+    }
+
+    // Отключить on-обработчики
+    static release(el) {
+        if (el && el._events) {
+            el._events.forEach(({ ev, fn, options }) => el.removeEventListener(ev, fn, options));
+            el._events = [];
+        }
+    }
+
+    // Отключить state-бинды
+    static unbind(el) {
+        if (el && el._unsub) {
+            Object.values(el._unsub).forEach(f => f());
+            el._unsub = {};
+            // el._unsub.forEach(f => f());
+            // el._unsub = [];
+        }
+    }
+
+    /// #endif
+
+    //#region ## shadow
+
+    /// #if !TINY_COMPONENT
+
+    // Создать теневой элемент от указанного тега/Node host, дети подключатся к нему в shadowRoot, стили запишутся в $style
+    static makeShadow(host, cfg = {}, css = '') {
+        if (!host || !is.obj(cfg)) return null;
+
+        if (!is.node(host)) host = document.createElement(host);
+        host.attachShadow({ mode: 'open' });
+
+        EL.update(host.shadowRoot, {
+            ctx: cfg.context ?? cfg.ctx,
+            child: [{ tag: 'style', $: 'style', text: css }, cfg.child, cfg.children],
+        });
+        delete cfg.child;
+        delete cfg.children;
+        return EL.update(host, cfg);
+    }
+
+    /// #endif
+
+    //#region ## template
+
+    /// #if !TINY_COMPONENT
+
+    // Определить глобальный шаблон, fn - функция, возвращающая cfg-конфиг
+    static setTemplate(name, tag, fn) {
+        EL.templates.set(name, (...args) => EL.make(tag, fn(...args)));
+    }
+
+    // Вызвать шаблон
+    static useTemplate(name, ...args) {
+        const t = EL.templates.get(name);
+        return t ? t(...args) : null;
+    }
+
+    static templates = new Map();
+
+    /// #endif
+
+    // legacy
+    static config = EL.update;
+}
+
+//#region ## private
+
+/// #if !TINY_COMPONENT
+const EL_METHODS = ['update', 'mount', 'clear', 'remove'];
+const CALLBACKS = ['onMount', 'onRender', 'onUpdate', 'onResize', 'onDestroy'];
+/// #endif
+
+const SKIP_PARAM = new Set(['tag', 'get', 'also', 'context', 'ctx',
+    /// #if !TINY_COMPONENT
+    ...CALLBACKS
+    /// #endif
+]);
+
+const PARAM_ALIAS = {
+    children: 'child',
+    children_r: 'child_r',
+    text: 'textContent',
+    html: 'innerHTML',
+};
+
+const PARAM_UPD = {
+    push(el, val) {
+        val.push(el);
+    },
+    $(el, val) {
+        if (el.ctx) el.ctx['$' + val] = el;
+    },
+    attrs(el, val) {
+        _applyP('attrs', el, val, (k, v) => el.setAttribute(k, v), k => el.removeAttribute(k));
+    },
+    data(el, val) {
+        _applyP('data', el, val, (k, v) => el.dataset[k] = v, k => delete el.dataset[k]);
+    },
+    props(el, val) {
+        for (let p in val) {
+            let v = _makeVal(el, p, null, val[p]);
+            el[p] = (
+                ['min', 'max', 'step', 'selectedIndex'].includes(p)
+                || (p == 'value' && ['number', 'range'].includes(el.type)))
+                ? ((v == null || v === '' || Number.isNaN(v)) ? '' : +v)
+                : (v ?? '');
+        }
+    },
+    transition(el, val) {
+        const { duration = 300, easing = 'ease', delay = 0, onEnd = null, ...styles } = val;
+        el.style.transition = Object.keys(styles).map(st => `${st} ${duration}ms ${easing} ${delay}ms`).join(', ');
+        if (onEnd) {
+            PARAM_UPD.events(el, {
+                transitionend: { handler: onEnd, once: true }
+            });
+        }
+        requestAnimationFrame(() => PARAM_UPD.style(el, styles));
+    },
+    events(el, val) {
+        for (let ev in val) {
+            let h = val[ev];
+            let options = {};
+
+            if (is.obj(h)) {
+                options = h;
+                h = h.handler;
+                if (!h) continue;
+            }
+
+            const fn = (evt) => h.call(el.ctx, Object.assign(evt, { el, ctx: el.ctx }));
+            el.addEventListener(ev, fn, options);
+            /// #if !TINY_COMPONENT
+            (el._events ??= []).push({ ev, fn, options });
+            /// #endif
+        }
+    },
+    events_r(el, val) {
+        /// #if !TINY_COMPONENT
+        EL.release(el);
+        /// #endif
+        PARAM_UPD.events(el, val);
+    },
+    child(el, val) {
+        _addChild(el, val);
+    },
+    child_r(el, val) {
+        EL.clear(el);
+        _addChild(el, val);
+    },
+    style(el, val) {
+        _applyObj('style', el, val,
+            r => el.style.cssText += r + ';',
+            (k, v) => {
+                (k.startsWith('--')) ? el.style.setProperty(k, v) : el.style[k] = v;
+            }
+        );
+    },
+    style_r(el, val) {
+        el.style.cssText = '';
+        PARAM_UPD.style(el, val);
+    },
+    class(el, val) {
+        if (is.arr(val)) val = Object.fromEntries(val.filter(Boolean).map(c => [c, true]));
+        _applyObj('class', el, val,
+            r => r.split(/\s+/).forEach(c => c && el.classList.add(c)),
+            (k, v) => v ? el.classList.add(k) : el.classList.remove(k)
+        );
+    },
+    class_r(el, val) {
+        el.className = '';
+        PARAM_UPD.class(el, val);
+    },
+    parent(el, val) {
+        EL.mount(el, val, false, (el._onMount || el._onRender) ? 100 : 0);
+    },
+};
+
+function _applyP(param, el, val, set, del) {
+    for (let p in val) {
+        let v = _makeVal(el, param, p, val[p]);
+        (v == null) ? del(p) : set(p, String(v));
+    }
+}
+
+function _applyObj(param, el, val, raw, add) {
+    if (is.str(val)) {
+        raw(val);
+    } else {
+        for (let k in val) {
+            if (k == '_raw') PARAM_UPD[param](el, val[k]);
+            else add(k, _makeVal(el, param, k, val[k]));
+        }
+    }
+}
+
+function _addChild(el, obj) {
+    if (!obj) return;
+    else if (is.str(obj)) el.insertAdjacentHTML('beforeend', obj);
+    else if (is.arr(obj)) obj.forEach(o => _addChild(el, o));
+    else if (is.node(obj)) EL.mount(obj, el);
+    else if (obj instanceof EL) EL.mount(obj.$root, el);
+    else if (is.obj(obj)) EL.make(null, { ctx: el.ctx, ...obj, parent: el }, el instanceof SVGElement);
+}
+
+function _makeVal(el, param, sub, val) {
+    /// #if !TINY_COMPONENT
+    if (is.func(val)) {
+        return val.call(el.ctx, { el, ctx: el.ctx });
+    }
+
+    if (is.arr(val) && is.state(val[0])) {
+        return val.map(v => _makeVal(el, param, sub, v))[0];
+    }
+
+    if (is.state(val)) {
+        const fn = (name, value) => {
+            value = val.map({ el, ctx: el.ctx, name, value });
+            _update(el, param, sub ? { [sub]: value } : value);
+            if (el._onUpdate) el._onUpdate();
+        }
+        const key = param + '.' + sub + '.' + val.name;
+        if (!el._unsub) el._unsub = {};
+        if (key in el._unsub) el._unsub[key]();
+        el._unsub[key] = val._state.subscribe(val.name, fn);
+        // (el._unsub ??= []).push(val._state.subscribe(val.name, fn));
+        return val.map({ el, ctx: el.ctx, name: val.name, value: val._state[val.name] });
+    }
+    /// #endif
+
+    return val;
+}
+
+function _update(el, param, val) {
+    if (SKIP_PARAM.has(param)) return;
+
+    param = PARAM_ALIAS[param] ?? param;
+
+    if (param.startsWith('on')) {
+        val = { [param.slice(2).toLowerCase()]: val };
+        param = 'events';
+    } else {
+        /// #if !TINY_COMPONENT
+        val = _makeVal(el, param, null, val);
+        /// #endif
+    }
+
+    const fn = PARAM_UPD[param];
+    if (val != null && fn) fn(el, val);
+    else PARAM_UPD.props(el, { [param]: val });
+}
+
+const is = {
+    func: x => typeof x === 'function',
+    str: x => typeof x === 'string',
+    arr: x => Array.isArray(x),
+    node: x => x instanceof Node,
+    obj: x => x !== null && typeof x === 'object',
+    state: x => x && x._state,
+}

package/src/SVG.js

@@ -0,0 +1,18 @@
+import { EL } from "./EL";
+
+export class SVG {
+    static svg = (attrs = {}, cfg = {}) => ({ tag: 'svg', ...cfg, attrs });
+    static rect = (x, y, width, height, rx, ry, attrs = {}, cfg = {}) => ({ tag: 'rect', ...cfg, attrs: { ...attrs, x, y, width, height, rx, ry } });
+    static circle = (cx, cy, r, attrs = {}, cfg = {}) => ({ tag: 'circle', ...cfg, attrs: { ...attrs, cx, cy, r } });
+    static line = (x1, y1, x2, y2, attrs = {}, cfg = {}) => ({ tag: 'line', ...cfg, attrs: { ...attrs, x1, y1, x2, y2 } });
+    static polyline = (points, attrs = {}, cfg = {}) => ({ tag: 'polyline', ...cfg, attrs: { ...attrs, points } });
+    static polygon = (points, attrs = {}, cfg = {}) => ({ tag: 'polygon', ...cfg, attrs: { ...attrs, points } });
+    static path = (d, attrs = {}, cfg = {}) => ({ tag: 'path', ...cfg, attrs: { ...attrs, d } });
+    static text = (text, x, y, attrs = {}, cfg = {}) => ({ tag: 'text', ...cfg, text, attrs: { ...attrs, x, y } });
+
+    static make = (tag, cfg) => EL.make(tag, cfg, true);
+    static update = EL.update;
+    static config = EL.update; // legacy
+}
+
+Object.getOwnPropertyNames(SVG).forEach(name => SVG['make_' + name] = (...args) => SVG.make(null, SVG[name](...args)));

package/src/Sheet.js

@@ -0,0 +1,73 @@
+import { EL } from "./EL";
+
+//#region Sheet
+export class Sheet {
+    /**
+     * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
+     * @param {string|array} style стили в виде css строки
+     * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
+     * @param {boolean} ext внешний стиль - может быть удалён по id
+     */
+    static addStyle(style, id, ext = false) {
+        if (!style || !id) return;
+        if (typeof id === 'object') id = id.constructor.name;
+
+        if (!Sheet.#int.has(id) && !Sheet.#ext.has(id)) {
+            if (ext) {
+                let sheet = document.createElement('style');
+                document.head.appendChild(sheet);
+                sheet.textContent = style;
+                Sheet.#ext.set(id, sheet);
+            } else {
+                if (!Sheet.#sheet) Sheet.#sheet = document.head.appendChild(document.createElement('style'));
+                Sheet.#sheet.textContent += style + '\r\n';
+                Sheet.#int.add(id);
+            }
+        }
+    }
+
+    /**
+     * Удалить ext стиль по его id
+     * @param {string} id id стиля. При передаче this будет именем класса
+     */
+    static removeStyle(id) {
+        if (typeof id === 'object') id = id.constructor.name;
+        if (Sheet.#ext.has(id)) {
+            Sheet.#ext.get(id).remove();
+            Sheet.#ext.delete(id);
+        }
+    }
+
+    static #sheet = null;
+    static #int = new Set();
+    static #ext = new Map();
+}
+
+//#region StyledComponent
+export class StyledComponent extends EL {
+    /**
+     * Создать элемент и поместить его в переменную $root
+     * @param {string} tag html tag элемента
+     * @param {object} data параметры
+     * @param {string|array} style стили в виде css строки
+     * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
+     * @param {boolean} ext внешний стиль - может быть удалён по id
+     */
+    constructor(tag, data = {}, style = null, id = null, ext = false) {
+        super(tag, data);
+        Sheet.addStyle(style, id, ext);
+    }
+
+    /**
+     * Создать элемент
+     * @param {string} tag html tag элемента
+     * @param {object} data параметры
+     * @param {string|array} style стили в виде css строки
+     * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
+     * @param {boolean} ext внешний стиль - может быть удалён по id
+     */
+    static make(tag, data = {}, style = null, id = null, ext = false) {
+        Sheet.addStyle(style, id, ext);
+        return EL.make(tag, data);
+    }
+}

package/src/State.js

@@ -0,0 +1,47 @@
+export class State {
+    constructor(init = {}) {
+        this._data = {};
+        this._subs = new Map();
+        this.addStates(init);
+    }
+
+    // добавить состояния
+    addStates(obj) {
+        for (const name in obj) {
+            if (name in this || name in this._data) continue;
+
+            this._data[name] = obj[name];
+
+            Object.defineProperty(this, name, {
+                get: () => this._data[name],
+                set: (value) => {
+                    if (Object.is(this._data[name], value)) return;
+                    this._data[name] = value;
+                    const subs = this._subs.get(name);
+                    if (subs) subs.forEach(fn => fn(name, value));
+                }
+            });
+        }
+    }
+
+    // имеет состояние
+    hasState(name) {
+        return name in this._data;
+    }
+
+    // подключить состояние
+    bind(name, map = (e) => e.value) {
+        return { _state: this, name, map };
+    }
+
+    // подписаться, функция вида fn(name, val)
+    subscribe(name, fn) {
+        if (!this._subs.has(name)) this._subs.set(name, new Set());
+        this._subs.get(name).add(fn);
+        return () => this._subs.get(name).delete(fn);
+    }
+}
+
+export function useState(init) {
+    return new State(init);
+}

package/src/utils.js

@@ -0,0 +1,94 @@
+//#region CSS
+
+// Добавить стили, уникально. Без ID будет вычислен хэш
+export function addCSS(css, id = '') {
+    if (!id) id = _hash(css);
+    if (cssMap.has(id)) return;
+
+    const style = document.createElement('style');
+    style.textContent = css;
+    document.head.appendChild(style);
+    cssMap.set(id, style);
+    return style;
+}
+
+// Удалить стили. Без ID будет вычислен хэш
+export function removeCSS(css, id = '') {
+    if (!id) id = _hash(css);
+    const style = cssMap.get(id);
+    if (!style) return;
+
+    cssMap.delete(id);
+    style.remove();
+}
+
+function _hash(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash) + str.charCodeAt(i);
+        hash |= 0;
+    }
+    return hash.toString(36);
+}
+
+const cssMap = new Map();   // hash: styleElement
+
+//#region watch
+
+// проверить статус подключения в DOM и рендера
+export function watchMount(el, waitRender = false, tries = 100) {
+    return new Promise(res => {
+        let mounted, rendered;
+        const check = () => {
+            if (el.isConnected) {
+                if (!el._mounted) {
+                    el._mounted = true;
+                    if (el._onMount) el._onMount();
+                }
+                if (!mounted) {
+                    mounted = true;
+                    if (!waitRender) res(el);
+                }
+
+                if (el.clientWidth || el.clientHeight) {
+                    if (!el._rendered) {
+                        el._rendered = true;
+                        if (el._onRender) el._onRender();
+                    }
+                    if (!rendered) {
+                        rendered = true;
+                        if (waitRender) res(el);
+                    }
+                    return;
+                }
+            }
+            if (tries--) {
+                requestAnimationFrame(check);
+            } else {
+                if ((waitRender && !rendered) || (!waitRender && !mounted)) res(null);
+            }
+        };
+
+        check();
+    });
+}
+
+// следить за обновлениями размера элемента
+export function watchResize(el, onResize) {
+    const ro = new ResizeObserver(entries => {
+        for (const entry of entries) {
+            if (entry.target === el) onResize(entry);
+        }
+    });
+
+    ro.observe(el);
+
+    const mo = new MutationObserver(() => {
+        if (!el.isConnected) {
+            ro.disconnect();
+            mo.disconnect();
+        }
+    });
+
+    mo.observe(document.body, { childList: true, subtree: true });
+}

package/test/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <script src="./script.js" type="module"></script>
+</head>
+
+<body>
+</body>
+
+</html>