@alexgyver/component 1.4.0 → 1.5.0

package/Component.js

@@ -9,8 +9,19 @@ export class EL {
      * @param {Boolean} svg SVG
      */
     constructor(tag, data = {}, svg = false) {
-        EL.context = this;
-        this.$root = EL.make(tag, data, svg);
+        this.$root = EL.makeIn(this, tag, data, svg);
+    }
+    make(tag, data = {}, svg = false) {
+        return EL.makeIn(this, tag, data, svg);
+    }
+    makeArray(arr, svg = false) {
+        return EL.makeArrayIn(this, arr, svg);
+    }
+    config(el, data, svg = false) {
+        return EL.configIn(this, el, data, svg);
+    }
+    makeShadow(host, data = {}, sheet = null) {
+        return EL.makeShadowIn(this, host, data, sheet);
     }
 
     /**
@@ -19,34 +30,14 @@ export class EL {
      * @param {object} data параметры
      * @param {Boolean} svg SVG
      * @returns {Node}
-     * @params
-     * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
-     * context {object} - объект для параметра '$', прокидывается в детей
-     * parent - {Element} добавить созданный элемент к указанному элементу
-     * text {string} - добавить в textContent
-     * html {string} - добавить в innerHTML
-     * class {string | Array} - добавить в className
-     * style/style_r {string | object} - объект в виде { padding: '0px', ... } или строка css стилей. _r - заменить имеющиеся
-     * push {array} - добавить к указанному массиву
-     * $ {string} - создать переменную $имя в указанном объекте
-     * events {object} - добавить addEventListener'ы {event: e => {}}
-     * click, change, input, mousewheel - добавление события без events
-     * children/children_r - дети, массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
-     * child/child_r - ребенок {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
-     * attrs {object} - добавить аттрибуты (как setAttribute())
-     * props {object} - добавить свойства (как el[prop])
-     * also {function} - вызвать с текущим элементом: also(el) { console.log(el); }
-     * всё остальное будет добавлено как property
      */
     static make(tag, data = {}, svg = false) {
-        if (!tag || typeof data !== 'object') return null;
         if (data instanceof Node) return data;
         if (tag == 'svg') svg = true;
-        return EL.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
+        return EL.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag ?? 'svg') : document.createElement(tag ?? 'div'), data, svg);
     }
     static makeIn(ctx, tag, data = {}, svg = false) {
-        data.context = ctx;
-        return EL.make(tag, data, svg);
+        return EL.make(tag, { ...data, context: ctx }, svg);
     }
 
     /**
@@ -54,77 +45,186 @@ export class EL {
      * @param {Node | Array} el элемент или массив элементов
      * @param {object} data параметры
      * @param {Boolean} svg SVG
-     * @returns {Node}
+     * @returns {Node | Array}
      */
     static config(el, data, svg = false) {
+        if (!(el instanceof Node) || (typeof data !== 'object')) {
+            return el;
+        }
         if (Array.isArray(el)) {
-            el.forEach(e => EL.config(e, data, svg));
-            return null;
+            return el.map(e => EL.config(e, data, svg));
         }
-        if (!(el instanceof Node) || (typeof data !== 'object')) return el;
-
-        let ctx = data.context;
-        EL.context = (ctx === null) ? null : (ctx ? ctx : EL.context);
-        ctx = EL.context;
-
-        let addChild = (obj) => {
-            if (!obj) return;
-            if (obj instanceof Node) el.appendChild(obj);
-            else if (obj instanceof EL) el.appendChild(obj.$root);
-            else if (typeof obj === 'string') el.innerHTML += obj;
-            else if (typeof obj === 'object') {
-                let cmp = EL.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
-                if (cmp) el.appendChild(cmp);
+
+        const ctx = ('context' in data) ? (EL.context = data.context) : EL.context;
+
+        const addChild = obj => {
+            if (obj) {
+                if (obj instanceof Node) el.appendChild(obj);
+                else if (obj instanceof EL) el.appendChild(obj.$root);
+                else if (typeof obj === 'string') el.insertAdjacentHTML('beforeend', obj);
+                else if (typeof obj === 'object') EL.make(obj.tag, { ...obj, parent: el }, (svg || obj.tag == 'svg'));
             }
         }
 
+        const call = fn => { if (fn) fn.call(ctx, el, ctx) }
+
         for (const [key, val] of Object.entries(data)) {
             switch (key) {
-                case 'text': el.textContent = (val == null) ? '' : (val + ''); continue;
-                case 'html': el.innerHTML = (val == null) ? '' : (val + ''); continue;
+                case 'text':
+                    el.textContent = (val == null) ? '' : String(val);  // == - null + undef
+                    continue;
+
+                case 'html':
+                    el.innerHTML = (val == null) ? '' : String(val);
+                    continue;
+
                 case 'tag':
-                case 'context':
                 case 'get':
                 case 'also':
+                case 'parent':
+                case 'context':
+                case 'onMount':
+                case 'onUpdate':
+                case 'onDestroy':
                     continue;
             }
-            if (!val) continue;
+
+            if (val === undefined || val === null) continue;
 
             switch (key) {
-                case 'class': (Array.isArray(val) ? val : val.split(' ')).map(c => c && el.classList.add(c)); break;
-                case 'push': val.push(el); break;
-                case '$': case 'var': if (ctx) ctx['$' + val] = el; break;
-                case 'events': for (let ev in val) el.addEventListener(ev, ctx ? val[ev].bind(ctx) : val[ev]); break;
-                case 'click': case 'change': case 'input': case 'mousewheel': el.addEventListener(key, ctx ? val.bind(ctx) : val); break;
-                case 'parent': val.appendChild(el); break;
-                case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
-                case 'props': for (let prop in val) el[prop] = val[prop]; break;
-                case 'child_r': EL.clear(el); // fall
-                case 'child': addChild(val); break;
-                case 'children_r': EL.clear(el); // fall
-                case 'children': for (let obj of val) addChild(obj); break;
-                case 'style_r': el.style.cssText = ''; // fall
+                case 'push':
+                    val.push(el);
+                    break;
+
+                case '$':
+                case 'var':
+                    if (ctx) ctx['$' + val] = el;
+                    break;
+
+                case 'events':
+                    for (let ev in val) el.addEventListener(ev, e => val[ev].call(ctx, e, el, ctx));
+                    break;
+
+                case 'click':
+                case 'input':
+                case 'change':
+                case 'mousewheel':
+                    el.addEventListener(key, e => val.call(ctx, e, el, ctx));
+                    break;
+
+                case 'attrs':
+                    for (let attr in val) el.setAttribute(attr, val[attr]);
+                    break;
+
+                case 'props':
+                    for (let prop in val) el[prop] = val[prop];
+                    break;
+
+                case 'data':
+                    for (let key in val) el.dataset[key] = val[key];
+                    break;
+
+                case 'child_r':
+                    EL.clear(el);
+                // fall
+                case 'child':
+                    addChild(val);
+                    break;
+
+                case 'children_r':
+                    EL.clear(el);
+                // fall
+                case 'children':
+                    for (let obj of val) addChild(obj);
+                    break;
+
+                case 'style_r':
+                    el.style.cssText = '';
+                // fall
                 case 'style':
-                    if (typeof val === 'string') el.style.cssText += val + ';';
-                    else for (let st in val) if (val[st]) el.style[st] = val[st];
+                    if (typeof val === 'string') {
+                        el.style.cssText += val + ';';
+                    } else {
+                        for (let st in val) if (val[st]) el.style[st] = val[st];
+                    }
+                    break;
+
+                case 'class_r':
+                    el.className = '';
+                // fall
+                case 'class': {
+                    const getClasses = (cls) => {
+                        if (Array.isArray(cls)) return Object.fromEntries(cls.filter(Boolean).map(c => [c, true]));
+                        if (typeof cls === 'string') return getClasses(cls.split(/\s+/));
+                        return cls;
+                    }
+                    for (const [cls, state] of Object.entries(getClasses(val))) {
+                        state ? el.classList.add(cls) : el.classList.remove(cls);
+                    }
+                } break;
+
+                case 'animate': {
+                    const { duration = 300, easing = 'ease', onEnd = null, ...styles } = val;
+                    el.style.transition = Object.keys(styles).map(st => `${st} ${duration}ms ${easing}`).join(', ');
+                    requestAnimationFrame(() => { for (let st in styles) el.style[st] = styles[st]; });
+
+                    const onEndHandler = () => {
+                        el.removeEventListener('transitionend', onEndHandler);
+                        call(onEnd);
+                    };
+                    el.addEventListener('transitionend', onEndHandler);
+                } break;
+
+                default: el[key] = val;
                     break;
-                default: el[key] = val; break;
             }
         }
-        if (data.also && ctx) data.also.call(ctx, el);
+
+        if (data.parent) data.parent.appendChild(el);
+
+        let tries = 50;
+        const mount = () => {
+            if (!el._mounted) {
+                if (el.isConnected) {
+                    el._mounted = true;
+                    call(data.onMount);
+                } else if (--tries) {
+                    requestAnimationFrame(mount);
+                }
+            }
+        }
+        mount();
+
+        if (data.onDestroy) el._onDestroy = data.onDestroy.bind(ctx, el, ctx);
+        if (data.onUpdate) el._onUpdate = data.onUpdate.bind(ctx, el, ctx);
+        if (el._onUpdate) el._onUpdate();
+        call(data.also);
+
         return el;
     }
     static configIn(ctx, el, data, svg = false) {
-        data.context = ctx;
-        return EL.config(el, data, svg);
+        return EL.config(el, { ...data, context: ctx }, svg);
     }
 
     /**
      * Удалить все child ноды
      * @param {HTMLElement} el 
      */
-    static clear(el) {
-        while (el.firstChild) el.removeChild(el.lastChild);
+    static clear(el, recursive = true) {
+        while (el.firstChild) {
+            if (recursive) EL.clear(el.firstChild, true);
+            EL.remove(el.firstChild, false);
+        }
+    }
+
+    /**
+     * Удалить элемент
+     * @param {HTMLElement} el 
+     */
+    static remove(el, recursive = true) {
+        if (recursive) EL.clear(el);
+        if (el._onDestroy) el._onDestroy();
+        el.remove();
     }
 
     /**
@@ -135,7 +235,10 @@ export class EL {
      */
     static makeArray(arr, svg = false) {
         if (!arr || !Array.isArray(arr)) return [];
-        return arr.map(x => EL.make(x.tag, x, svg));
+        return arr.map(data => EL.make(data.tag, data, svg));
+    }
+    static makeArrayIn(ctx, arr, svg) {
+        return EL.makeArray(arr.map(data => ({ ...data, context: ctx })), svg);
     }
 
     /**
@@ -167,11 +270,33 @@ export class EL {
         EL.config($host, data);
         return $host;
     }
+    static makeShadowIn(ctx, host, data = {}, sheet = null) {
+        return EL.makeShadow(host, { ...data, context: ctx }, sheet);
+    }
 }
 
 // legacy
 export const Component = EL;
 
+//#region State
+export class State {
+    constructor(init = {}) {
+        this.data = init;
+        this.subs = new Set();
+    }
+    set(key, value) {
+        this.data[key] = value;
+        this.subs.forEach(fn => fn(this.data));
+    }
+    get(key) {
+        return this.data[key];
+    }
+    subscribe(fn) {
+        this.subs.add(fn);
+        return () => this.subs.delete(fn);
+    }
+}
+
 //#region SVG
 export class SVG {
     static make = (tag, data) => EL.make(tag, data, true);

package/Component.min.js

@@ -1 +1 @@
-var e={d:(t,a)=>{for(var c in a)e.o(a,c)&&!e.o(t,c)&&Object.defineProperty(t,c,{enumerable:!0,get:a[c]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{EL:()=>a,LV:()=>r,cj:()=>s,t4:()=>n,uA:()=>c});class a{static context;constructor(e,t={},c=!1){a.context=this,this.$root=a.make(e,t,c)}static make(e,t={},c=!1){return e&&"object"==typeof t?t instanceof Node?t:("svg"==e&&(c=!0),a.config(c?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),t,c)):null}static makeIn(e,t,c={},n=!1){return c.context=e,a.make(t,c,n)}static config(e,t,c=!1){if(Array.isArray(e))return e.forEach(e=>a.config(e,t,c)),null;if(!(e instanceof Node)||"object"!=typeof t)return e;let n=t.context;a.context=null===n?null:n||a.context,n=a.context;let s=t=>{if(t)if(t instanceof Node)e.appendChild(t);else if(t instanceof a)e.appendChild(t.$root);else if("string"==typeof t)e.innerHTML+=t;else if("object"==typeof t){let n=a.make(t.tag??"div",t,c||"svg"==t.tag);n&&e.appendChild(n)}};for(const[c,r]of Object.entries(t)){switch(c){case"text":e.textContent=null==r?"":r+"";continue;case"html":e.innerHTML=null==r?"":r+"";continue;case"tag":case"context":case"get":case"also":continue}if(r)switch(c){case"class":(Array.isArray(r)?r:r.split(" ")).map(t=>t&&e.classList.add(t));break;case"push":r.push(e);break;case"$":case"var":n&&(n["$"+r]=e);break;case"events":for(let t in r)e.addEventListener(t,n?r[t].bind(n):r[t]);break;case"click":case"change":case"input":case"mousewheel":e.addEventListener(c,n?r.bind(n):r);break;case"parent":r.appendChild(e);break;case"attrs":for(let t in r)e.setAttribute(t,r[t]);break;case"props":for(let t in r)e[t]=r[t];break;case"child_r":a.clear(e);case"child":s(r);break;case"children_r":a.clear(e);case"children":for(let e of r)s(e);break;case"style_r":e.style.cssText="";case"style":if("string"==typeof r)e.style.cssText+=r+";";else for(let t in r)r[t]&&(e.style[t]=r[t]);break;default:e[c]=r}}return t.also&&n&&t.also.call(n,e),e}static configIn(e,t,c,n=!1){return c.context=e,a.config(t,c,n)}static clear(e){for(;e.firstChild;)e.removeChild(e.lastChild)}static makeArray(e,t=!1){return e&&Array.isArray(e)?e.map(e=>a.make(e.tag,e,t)):[]}static makeShadow(e,t={},c=null){if(!e||"object"!=typeof t)return null;let n=e instanceof Node?e:document.createElement(e);return n.attachShadow({mode:"open"}),a.config(n.shadowRoot,{context:t.context,children:[{tag:"style",textContent:c??""},t.child??{},...t.children??[]]}),delete t.children,delete t.child,a.config(n,t),n}}const c=a;class n{static make=(e,t)=>a.make(e,t,!0);static config=(e,t)=>a.config(e,t,!0);static makeArray=e=>a.makeArray(e,!0);static svg=(e={},t={})=>n._make("svg",e,t);static rect=(e,t,a,c,s,r,o={},i={})=>n._make("rect",{...o,x:e,y:t,width:a,height:c,rx:s,ry:r},i);static circle=(e,t,a,c={},s={})=>n._make("circle",{...c,cx:e,cy:t,r:a},s);static line=(e,t,a,c,s={},r={})=>n._make("line",{...s,x1:e,y1:t,x2:a,y2:c},r);static polyline=(e,t={},a={})=>n._make("polyline",{...t,points:e},a);static polygon=(e,t={},a={})=>n._make("polygon",{...t,points:e},a);static path=(e,t={},a={})=>n._make("path",{...t,d:e},a);static text=(e,t,a,c={},s={})=>n._make("text",{...c,x:t,y:a},{...s,text:e});static _make=(e,t={},a={})=>n.make(e,{attrs:{...t},...a})}class s{static addStyle(e,t,a=!1){if(e&&t&&("object"==typeof t&&(t=t.constructor.name),!s.#e.has(t)&&!s.#t.has(t)))if(a){let a=document.createElement("style");document.head.appendChild(a),a.textContent=e,s.#t.set(t,a)}else s.#a||(s.#a=document.head.appendChild(document.createElement("style"))),s.#a.textContent+=e+"\r\n",s.#e.add(t)}static removeStyle(e){"object"==typeof e&&(e=e.constructor.name),s.#t.has(e)&&(s.#t.get(e).remove(),s.#t.delete(e))}static#a=null;static#e=new Set;static#t=new Map}class r extends a{constructor(e,t={},a=null,c=null,n=!1){super(e,t),s.addStyle(a,c,n)}static make(e,t={},c=null,n=null,r=!1){return s.addStyle(c,n,r),a.make(e,t)}}const o=t.uA,i=t.EL,l=t.t4,d=t.cj,h=t.LV;export{o as Component,i as EL,l as SVG,d as Sheet,h as StyledComponent};
+var e={d:(t,a)=>{for(var n in a)e.o(a,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:a[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{EL:()=>a,LV:()=>o,Uw:()=>s,cj:()=>c,t4:()=>r,uA:()=>n});class a{static context;constructor(e,t={},n=!1){this.$root=a.makeIn(this,e,t,n)}make(e,t={},n=!1){return a.makeIn(this,e,t,n)}makeArray(e,t=!1){return a.makeArrayIn(this,e,t)}config(e,t,n=!1){return a.configIn(this,e,t,n)}makeShadow(e,t={},n=null){return a.makeShadowIn(this,e,t,n)}static make(e,t={},n=!1){return t instanceof Node?t:("svg"==e&&(n=!0),a.config(n?document.createElementNS("http://www.w3.org/2000/svg",e??"svg"):document.createElement(e??"div"),t,n))}static makeIn(e,t,n={},s=!1){return a.make(t,{...n,context:e},s)}static config(e,t,n=!1){if(!(e instanceof Node)||"object"!=typeof t)return e;if(Array.isArray(e))return e.map(e=>a.config(e,t,n));const s="context"in t?a.context=t.context:a.context,r=t=>{t&&(t instanceof Node?e.appendChild(t):t instanceof a?e.appendChild(t.$root):"string"==typeof t?e.insertAdjacentHTML("beforeend",t):"object"==typeof t&&a.make(t.tag,{...t,parent:e},n||"svg"==t.tag))},c=t=>{t&&t.call(s,e,s)};for(const[n,o]of Object.entries(t)){switch(n){case"text":e.textContent=null==o?"":String(o);continue;case"html":e.innerHTML=null==o?"":String(o);continue;case"tag":case"get":case"also":case"parent":case"context":case"onMount":case"onUpdate":case"onDestroy":continue}if(null!=o)switch(n){case"push":o.push(e);break;case"$":case"var":s&&(s["$"+o]=e);break;case"events":for(let t in o)e.addEventListener(t,a=>o[t].call(s,a,e,s));break;case"click":case"input":case"change":case"mousewheel":e.addEventListener(n,t=>o.call(s,t,e,s));break;case"attrs":for(let t in o)e.setAttribute(t,o[t]);break;case"props":for(let t in o)e[t]=o[t];break;case"data":for(let t in o)e.dataset[t]=o[t];break;case"child_r":a.clear(e);case"child":r(o);break;case"children_r":a.clear(e);case"children":for(let e of o)r(e);break;case"style_r":e.style.cssText="";case"style":if("string"==typeof o)e.style.cssText+=o+";";else for(let t in o)o[t]&&(e.style[t]=o[t]);break;case"class_r":e.className="";case"class":{const t=e=>Array.isArray(e)?Object.fromEntries(e.filter(Boolean).map(e=>[e,!0])):"string"==typeof e?t(e.split(/\s+/)):e;for(const[a,n]of Object.entries(t(o)))n?e.classList.add(a):e.classList.remove(a)}break;case"animate":{const{duration:t=300,easing:a="ease",onEnd:n=null,...s}=o;e.style.transition=Object.keys(s).map(e=>`${e} ${t}ms ${a}`).join(", "),requestAnimationFrame(()=>{for(let t in s)e.style[t]=s[t]});const r=()=>{e.removeEventListener("transitionend",r),c(n)};e.addEventListener("transitionend",r)}break;default:e[n]=o}}t.parent&&t.parent.appendChild(e);let o=50;const i=()=>{e._mounted||(e.isConnected?(e._mounted=!0,c(t.onMount)):--o&&requestAnimationFrame(i))};return i(),t.onDestroy&&(e._onDestroy=t.onDestroy.bind(s,e,s)),t.onUpdate&&(e._onUpdate=t.onUpdate.bind(s,e,s)),e._onUpdate&&e._onUpdate(),c(t.also),e}static configIn(e,t,n,s=!1){return a.config(t,{...n,context:e},s)}static clear(e,t=!0){for(;e.firstChild;)t&&a.clear(e.firstChild,!0),a.remove(e.firstChild,!1)}static remove(e,t=!0){t&&a.clear(e),e._onDestroy&&e._onDestroy(),e.remove()}static makeArray(e,t=!1){return e&&Array.isArray(e)?e.map(e=>a.make(e.tag,e,t)):[]}static makeArrayIn(e,t,n){return a.makeArray(t.map(t=>({...t,context:e})),n)}static makeShadow(e,t={},n=null){if(!e||"object"!=typeof t)return null;let s=e instanceof Node?e:document.createElement(e);return s.attachShadow({mode:"open"}),a.config(s.shadowRoot,{context:t.context,children:[{tag:"style",textContent:n??""},t.child??{},...t.children??[]]}),delete t.children,delete t.child,a.config(s,t),s}static makeShadowIn(e,t,n={},s=null){return a.makeShadow(t,{...n,context:e},s)}}const n=a;class s{constructor(e={}){this.data=e,this.subs=new Set}set(e,t){this.data[e]=t,this.subs.forEach(e=>e(this.data))}get(e){return this.data[e]}subscribe(e){return this.subs.add(e),()=>this.subs.delete(e)}}class r{static make=(e,t)=>a.make(e,t,!0);static config=(e,t)=>a.config(e,t,!0);static makeArray=e=>a.makeArray(e,!0);static svg=(e={},t={})=>r._make("svg",e,t);static rect=(e,t,a,n,s,c,o={},i={})=>r._make("rect",{...o,x:e,y:t,width:a,height:n,rx:s,ry:c},i);static circle=(e,t,a,n={},s={})=>r._make("circle",{...n,cx:e,cy:t,r:a},s);static line=(e,t,a,n,s={},c={})=>r._make("line",{...s,x1:e,y1:t,x2:a,y2:n},c);static polyline=(e,t={},a={})=>r._make("polyline",{...t,points:e},a);static polygon=(e,t={},a={})=>r._make("polygon",{...t,points:e},a);static path=(e,t={},a={})=>r._make("path",{...t,d:e},a);static text=(e,t,a,n={},s={})=>r._make("text",{...n,x:t,y:a},{...s,text:e});static _make=(e,t={},a={})=>r.make(e,{attrs:{...t},...a})}class c{static addStyle(e,t,a=!1){if(e&&t&&("object"==typeof t&&(t=t.constructor.name),!c.#e.has(t)&&!c.#t.has(t)))if(a){let a=document.createElement("style");document.head.appendChild(a),a.textContent=e,c.#t.set(t,a)}else c.#a||(c.#a=document.head.appendChild(document.createElement("style"))),c.#a.textContent+=e+"\r\n",c.#e.add(t)}static removeStyle(e){"object"==typeof e&&(e=e.constructor.name),c.#t.has(e)&&(c.#t.get(e).remove(),c.#t.delete(e))}static#a=null;static#e=new Set;static#t=new Map}class o extends a{constructor(e,t={},a=null,n=null,s=!1){super(e,t),c.addStyle(a,n,s)}static make(e,t={},n=null,s=null,r=!1){return c.addStyle(n,s,r),a.make(e,t)}}const i=t.uA,l=t.EL,d=t.t4,m=t.cj,u=t.Uw,h=t.LV;export{i as Component,l as EL,d as SVG,m as Sheet,u as State,h as StyledComponent};

package/README.md

@@ -4,47 +4,63 @@
 > npm i @alexgyver/component
 
 ## Дока
-### Component
+### EL
+Параметры для конфига `data`:
+
+- `context` [объект] - привязывает контекст для других параметров (см ниже), пробрасывается в детей и не сбрасывается между вызовами make/config
+- `$` [текст] - добавляет созданный элемент в context с именем `$значение`
+- `events` [объект] - подключает события `{ eventName: handlerFunc(event, element, context) }`, в this тоже прокидывается context
+- `click`, `change`, `input`, `mousewheel` [функция] - подключает эти события как `handlerFunc(event, element, context)`, в this тоже прокидывается context
+- `also` [функция] - вызывает указанную функцию вида `handlerFunc(element, context)`, в this тоже прокидывается context
+- `text` [текст] - добавится в textContent, nullish значения - очистить
+- `html` [текст] - добавится в innerHTML, nullish значения - очистить
+- `tag` [текст] - HTML тег для child-объектов
+- `push` [массив] - добавляет созданный элемент в указанный массив
+- `parent` [Node] - добавит к нему созданный элемент как child
+- `attrs` [объект] - аттрибуты будут установлены через setAttribute
+- `props` [объект] - свойства будут установлены как el[prop] = val
+- `data` [объект] - датасеты будут добавлены как аттрибуты data-name = value
+- `child`, `child_r` [объект] конфиг, добавится как ребёнок к созданному элементу. Без указания tag будет добавлен div. `_r` - заменить ребёнка
+- `children`, `children_r` [массив] объектов конфига, добавятся как дети к созданному элементу. Без указания tag будет добавлен div. `_r` - заменить всех детей на новых
+- `animate` [объект] - добавить CSS анимаций, может содержать параметры анимации `duration` и `easing`, обработчик окончания анимации `onEnd(element, context)`, в this тоже прокидывается context
+- `style`, `style_r` - стили. Принимает:
+  - [Строка] CSS стилей
+  - [Объект] вида `{styleName: value}`
+- `class`, `class_r` - установка классов в classList, версия с `_r` - заменить классы. Принимает:
+  - [Строку] вида `newClass active foo bar`
+  - [Массив] вида `['newClass', 'active']`, причём можно по условию: `['newClass', isActive && 'active']`
+  - [Объект] вида `{newClass: true, active: false}` - true значение добавляет класс, false не добавляет
+- `onUpdate` [функция] вида `handlerFunc(element, context)`, вызовется при настройке через функцию config, в this тоже прокидывается context
+- `onMount` [функция] вида `handlerFunc(element, context)`, вызовется при присоединении к DOM, в this тоже прокидывается context
+- `onDestroy` [функция] вида `handlerFunc(element, context)`, вызовется при удалении через EL.remove(el) или EL.clear(el), в this тоже прокидывается context
+- Другие значения будут добавлены как свойства
+
+#### Класс
 ```js
 /**
- * Создать компонент и поместить его в переменную $root
+ * Создать компонент и поместить его в переменную this.$root
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  */
 EL(tag, data = {}, svg = false);
 
+// аналоги с авто-this контекстом для вызова внутри класса
+make(tag, data = {}, svg = false);
+makeArray(arr, svg = false);
+config(el, data, svg = false);
+makeShadow(host, data = {}, sheet = null);
+```
+
+#### Static
+```js
 /**
  * Создать компонент
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  * @returns {Node}
- * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
- * context {object} - контекст для параметра 'var' и вызовов, прокидывается в детей. Если указан явно как null - прерывает проброс
- * parent - {Element} добавляет компонент к указанному элементу
- * text {string} - добавить в textContent
- * html {string} - добавить в innerHTML
- * class {string | Array} - добавить в className
- * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
- * push {array} - добавить к указанному массиву
- * var | $ {string} - создаёт переменную $имя в указанном контексте
- * events {object} - добавляет addEventListener'ы {event: e => {}}
- * children/children_r - массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
- * child/child_r - {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
- * attrs {object} - добавить аттрибуты (через setAttribute)
- * props {object} - добавить свойства (как el[prop])
- * also {function} - вызвать с текущим компонентом: also(el) { console.log(el); }
- * всё остальное будет добавлено как property
  */
 EL.make(tag, data = {});
-
-/**
- * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
- * @param {string|Node} host html tag теневого элемента или Node
- * @param {object} data параметры внешнего элемента
- * @param {string} sheet css стили
- * @returns {Node} host
- */
-EL.makeShadow(host, data = {}, sheet = null);
+EL.makeIn(ctx, tag, data = {}, svg = false);
 
 /**
  * Настроить элемент
@@ -53,6 +69,7 @@ EL.makeShadow(host, data = {}, sheet = null);
  * @returns {Node}
  */
 EL.config(el, data);
+EL.configIn(ctx, el, data, svg = false);
 
 /**
  * Создать массив компонентов из массива объектов конфигурации
@@ -60,6 +77,29 @@ EL.config(el, data);
  * @returns {array} of Elements
  */
 EL.makeArray(arr);
+EL.makeArrayIn(ctx, arr, svg);
+
+/**
+ * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
+ * @param {string|Node} host html tag теневого элемента или Node
+ * @param {object} data параметры внешнего элемента
+ * @param {string} sheet css стили
+ * @returns {Node} host
+ */
+EL.makeShadow(host, data = {}, sheet = null);
+EL.makeShadowIn(ctx, host, data = {}, sheet = null);
+
+/**
+ * Удалить все child ноды
+ * @param {HTMLElement} el 
+ */
+EL.clear(el, recursive = true);
+
+/**
+ * Удалить элемент
+ * @param {HTMLElement} el 
+ */
+EL.remove(el, recursive = true);
 ```
 
 ### SVG
@@ -118,8 +158,9 @@ StyledComponent(tag, data = {}, style = null, id = null, ext = false);
 StyledComponent.make(tag, data = {}, style = null, id = null, ext = false);
 ```
 
-## Пример
+## Примеры
 Создаст контейнер с двумя вложенными блоками текста и прикрепит к body
+
 ```js
 EL.make('div', {
     parent: document.body,
@@ -143,6 +184,46 @@ EL.make('div', {
 });
 ```
 
+Простой элемент с текстом и классами
+
+```js
+const box = new EL('div', {
+    text: 'Привет, мир!',
+    class: ['box', 'highlight'],
+    style: { padding: '10px', color: 'white', backgroundColor: 'blue' },
+    click() { console.log('Box кликнут!'); },
+    $: 'myBox'  // создаёт ctx.$myBox
+});
+
+document.body.appendChild(box.$root);
+console.log(box.$root);         // сам DOM-элемент
+console.log(EL.context.$myBox); // доступ через контекст
+```
+
+Полная замена классов и стилей
+
+```js
+EL.config(someElement, {
+    text: 'Обновлённый блок',
+    class_r: ['newClass', 'active'], // полностью заменяет классы
+    style_r: { color: 'red', fontWeight: 'bold' } // сброс и новые стили
+});
+```
+
+Вложенные дети и массив children
+
+```cpp
+EL.make('div', {
+    parent: document.body,
+    class: 'parent',
+    children: [
+        { tag: 'p', text: 'Первый ребёнок', class: 'child' },
+        { tag: 'p', text: 'Второй ребёнок', class: ['child', 'second'] },
+        'Просто текстовый узел'
+    ]
+});
+```
+
 Гораздо интереснее использовать в классе и передавать контекст. Параметр `$` создаст переменную с элементом с указанным именем + префикс `$`:
 
 ```js
@@ -166,6 +247,25 @@ let btn = new Button('kek');
 btn.$button; // элемент кнопки
 ```
 
+Использование контекста для $ и событий
+
+```js
+class MyComponent extends EL {
+    constructor() {
+        super('div', {
+            class: 'comp',
+            $: 'root',
+            children: [
+                { tag: 'button', text: 'Нажми меня', click() { console.log(this.$root); } }
+            ]
+        });
+    }
+}
+
+const comp = new MyComponent();
+document.body.appendChild(comp.$root);
+```
+
 Некоторые трюки
 
 ```js
@@ -194,3 +294,47 @@ EL.make('div', {
     class: ['some', 'class', foo && 'plus_me'], // добавить plus_me если foo - true
 });
 ```
+
+
+Создание SVG
+
+```js
+const svg = SVG.svg({ width: 200, height: 200 }, {
+    children: [
+        SVG.rect(10, 10, 50, 50, 5, 5, { fill: 'green' }),
+        SVG.circle(100, 100, 40, { fill: 'red' }),
+        SVG.line(0, 0, 200, 200, { stroke: 'blue', 'stroke-width': 2 })
+    ]
+});
+```
+
+Shadow DOM со стилями
+
+```js
+const shadowHost = EL.makeShadow('div', {
+    child: { tag: 'p', text: 'Текст внутри Shadow DOM', class: 'shadow-text' }
+}, `
+    .shadow-text { color: purple; font-weight: bold; }
+`);
+
+document.body.appendChild(shadowHost);
+```
+
+
+Прочее
+
+```js
+const state = new State({ count: 0 });
+
+let d = EL.make('div', {
+    text: state.get('count'),
+    also: el => state.subscribe(d => el.textContent = d.count),
+    style: { width: '100px', height: '50px', background: 'red' },
+    animate: { width: '200px', background: 'blue', duration: 500 },
+    onUpdate: el => console.log('update'),
+    onMount: el => console.log('mount'),
+});
+
+setInterval(() => state.set('count', state.get('count') + 1), 1000);
+setTimeout(() => { document.body.appendChild(d) }, 2000);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Simple HTML&SVG element builder",
   "main": "./Component.js",
   "module": "./Component.js",
@@ -15,7 +15,7 @@
   "author": "AlexGyver <alex@alexgyver.ru>",
   "license": "MIT",
   "devDependencies": {
-    "webpack": "^5.101.3",
+    "webpack": "^5.105.0",
     "webpack-cli": "^6.0.1"
   }
 }

package/test/script.js

@@ -1,4 +1,5 @@
-import { EL, Sheet, StyledComponent } from "https://gyverlibs.github.io/EL.js/EL.min.js";
+// import { EL, Sheet, StyledComponent } from "https://gyverlibs.github.io/Component.js/Component.min.js";
+import { EL, Sheet, StyledComponent } from "../Component.js";
 
 // кнопка наследует, стили добавляются отдельно
 class Button extends EL {
@@ -105,6 +106,29 @@ class ShadowComponent {
 
 document.addEventListener('kek', () => console.log('kek!'));
 
+let context = { ctx: 'ctx' };
+
+let d = EL.make('div', {
+    context: context,
+    parent: document.body,
+    text: 'test',
+    style: { width: '100px', height: '50px', background: 'red' },
+    animate: { width: '200px', background: 'blue', duration: 500, onEnd: function (el) { console.log('anim', this, el) } },
+    events: {
+        mouseleave: function (e, el) { console.log('leave', this, e, el) },
+    },
+    click: (e, el, ctx) => console.log('click', this, e, el, ctx),
+    also: function (el) { console.log('also', this, el) },
+    onUpdate: (el, ctx) => console.log('update', this, el, ctx),
+    onDestroy: (el, ctx) => console.log('destroy', this, el, ctx),
+    // onMount: el => console.log('mount', this),
+    onMount: function (el) { console.log('mount', this, el) },
+});
+
+// setTimeout(() => { document.body.appendChild(d) }, 2000);
+setTimeout(() => { EL.config(d, { text: 123 }) }, 2000);
+setTimeout(() => { EL.remove(d) }, 4000);
+
 document.addEventListener("DOMContentLoaded", () => {
     EL.make('h1', {
         text: 'Hello!',