@alexgyver/component 1.4.1 → 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);
     }
 
     /**
@@ -22,13 +33,11 @@ export class EL {
      */
     static make(tag, data = {}, svg = false) {
         if (data instanceof Node) return data;
-        if (!tag) tag = 'div';
         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);
     }
 
     /**
@@ -36,57 +45,47 @@ 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 (Array.isArray(el)) {
-            el.forEach(e => EL.config(e, data, svg));
-            return null;
-        }
         if (!(el instanceof Node) || (typeof data !== 'object')) {
             return el;
         }
+        if (Array.isArray(el)) {
+            return el.map(e => EL.config(e, data, svg));
+        }
 
-        let ctx = data.context;
-        if (ctx === undefined) ctx = EL.context;
-        else EL.context = ctx;
+        const ctx = ('context' in data) ? (EL.context = data.context) : EL.context;
 
-        const addChild = (obj) => {
+        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') {
-                    let cmp = EL.make(obj.tag, obj, svg || obj.tag == 'svg');
-                    if (cmp) el.appendChild(cmp);
-                }
+                else if (typeof obj === 'object') EL.make(obj.tag, { ...obj, parent: el }, (svg || obj.tag == 'svg'));
             }
         }
 
-        const getClasses = (cls) => {
-            if (Array.isArray(cls)) return cls;
-            if (typeof cls === 'string') return cls.split(/\s+/);
-            if (typeof cls === 'object') return Object.keys(cls).filter(k => cls[k]);
-            return [];
-        }
-
-        const mount = () => {
-            if (el.isConnected) {
-                el._mounted = true;
-                data.onMount(el);
-            } else requestAnimationFrame(mount);
-        }
+        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) ? '' : String(val); continue;   // == - null + undef
-                case 'html': el.innerHTML = (val == null) ? '' : String(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 'onConfig':
+                case 'parent':
+                case 'context':
                 case 'onMount':
+                case 'onUpdate':
+                case 'onDestroy':
                     continue;
             }
 
@@ -103,18 +102,14 @@ export class EL {
                     break;
 
                 case 'events':
-                    for (let ev in val) el.addEventListener(ev, ctx ? val[ev].bind(ctx) : val[ev]);
+                    for (let ev in val) el.addEventListener(ev, e => val[ev].call(ctx, e, el, ctx));
                     break;
 
                 case 'click':
-                case 'change':
                 case 'input':
+                case 'change':
                 case 'mousewheel':
-                    el.addEventListener(key, ctx ? val.bind(ctx) : val);
-                    break;
-
-                case 'parent':
-                    val.appendChild(el);
+                    el.addEventListener(key, e => val.call(ctx, e, el, ctx));
                     break;
 
                 case 'attrs':
@@ -143,51 +138,93 @@ export class EL {
                     for (let obj of val) addChild(obj);
                     break;
 
-                case 'animate': {
-                    const { duration = 300, easing = 'ease', ...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]; });
-                } 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];
+                    } else {
+                        for (let st in val) if (val[st]) el.style[st] = val[st];
                     }
                     break;
 
                 case 'class_r':
                     el.className = '';
                 // fall
-                case 'class':
-                    getClasses(val).forEach(c => c && el.classList.add(c));
-                    break;
+                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;
             }
         }
 
-        if (data.also) ctx ? data.also.call(ctx, el) : data.also(el);
-        if (data.onMount && !el._mounted) mount();
-        if (data.onConfig) data.onConfig(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.firstChild);
+    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();
     }
 
     /**
@@ -198,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);
     }
 
     /**
@@ -230,6 +270,9 @@ 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

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

@@ -5,43 +5,54 @@
 
 ## Дока
 ### EL
-Параметры для конфига:
-
-- `context` - объект, в контексте которого будут созданы некоторые параметры
-- `$` - текст, добавляет созданный элемент в контекст с именем $значение
-- `events` - объект с событиями вида `{eventName: handlerFunc}`, привязываются к контексту, если указан
-- `click`, `change`, `input`, `mousewheel` - события, указывается обработчик. Короткая форма подключения этих событий
-- `also` - функция, будет вызвана с созданным элементом, в контексте, если он указан
-- `text` - текст, добавится в textContent, нулевые значения - очистить
-- `html` - текст, добавится в innerHTML, нулевые значения - очистить
-- `tag` - HTML тег (для child-объектов)
-- `push` - массив, добавляет созданный элемент в указанный массив
-- `parent` - Node элемент, к которому добавить созданный элемент как child
-- `attrs` - объект с аттрибутами для установки через setAttribute
-- `props` - объект со свойствами, будут добавлены просто как el[prop] = val
-- `data` - объект с датасетами вида `{name: value}`, будут добавлены как аттрибуты data-name = value
-- `child`, `child_r` - объект конфига, добавится как ребёнок к созданному элементу. Нужно указать tag, без указания будет div
-- `children`, `children_r` - массив объектов конфига, добавятся как дети к созданному элементу. Нужно указать tag, без указания будет div
-- `animate` - объект стилей `{styleName: value}`, может содержать параметры анимации duration и easing
+Параметры для конфига `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}`
+  - [Строка] CSS стилей
+  - [Объект] вида `{styleName: value}`
 - `class`, `class_r` - установка классов в classList, версия с `_r` - заменить классы. Принимает:
-  - Строки вида `newClass active`
-  - Массивы вида `['newClass', 'active']`, причём можно по условию: `['newClass', isActive && 'active']`
-  - Объекты вида `{newClass: true, active: false}` - true значение добавляет класс
-- `onConfig` - функция, вызовется при настройке через функцию config
-- `onMount` - функция, вызовется при присоединении к DOM
+  - [Строку] вида `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 элемента
@@ -49,15 +60,7 @@ EL(tag, data = {}, svg = false);
  * @returns {Node}
  */
 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);
 
 /**
  * Настроить элемент
@@ -66,6 +69,7 @@ EL.makeShadow(host, data = {}, sheet = null);
  * @returns {Node}
  */
 EL.config(el, data);
+EL.configIn(ctx, el, data, svg = false);
 
 /**
  * Создать массив компонентов из массива объектов конфигурации
@@ -73,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
@@ -304,7 +331,7 @@ let d = EL.make('div', {
     also: el => state.subscribe(d => el.textContent = d.count),
     style: { width: '100px', height: '50px', background: 'red' },
     animate: { width: '200px', background: 'blue', duration: 500 },
-    onConfig: el => console.log('update'),
+    onUpdate: el => console.log('update'),
     onMount: el => console.log('mount'),
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.4.1",
+  "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!',