@alexgyver/component 1.3.10 → 1.4.1

package/Component.js

@@ -3,7 +3,7 @@ export class EL {
     static context;
 
     /**
-     * Создать компонент и поместить его в переменную $root
+     * Создать элемент и поместить его в переменную $root
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {Boolean} svg SVG
@@ -14,35 +14,22 @@ export class EL {
     }
 
     /**
-     * Создать компонент
+     * Создать элемент
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {Boolean} svg SVG
      * @returns {Node}
-     * @params
-     * 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
      */
     static make(tag, data = {}, svg = false) {
-        if (!tag || typeof data !== 'object') return null;
         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);
     }
+    static makeIn(ctx, tag, data = {}, svg = false) {
+        data.context = ctx;
+        return EL.make(tag, data, svg);
+    }
 
     /**
      * Настроить элемент
@@ -56,67 +43,155 @@ export class EL {
             el.forEach(e => EL.config(e, data, svg));
             return null;
         }
-        if (!(el instanceof Node) || (typeof data !== 'object')) return el;
+        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);
+        if (ctx === undefined) ctx = EL.context;
+        else EL.context = ctx;
+
+        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);
+                }
             }
         }
 
+        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);
+        }
+
         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); continue;   // == - null + undef
+                case 'html': el.innerHTML = (val == null) ? '' : String(val); continue;
                 case 'tag':
                 case 'context':
                 case 'get':
                 case 'also':
+                case 'onConfig':
+                case 'onMount':
                     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, val[ev].bind(ctx)); 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 '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 '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 '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];
+                    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':
+                    getClasses(val).forEach(c => c && el.classList.add(c));
+                    break;
+
+                default: el[key] = val;
                     break;
-                default: el[key] = val; break;
             }
         }
-        if (data.also && ctx) data.also.call(ctx, el);
+
+        if (data.also) ctx ? data.also.call(ctx, el) : data.also(el);
+        if (data.onMount && !el._mounted) mount();
+        if (data.onConfig) data.onConfig(el);
         return el;
     }
+    static configIn(ctx, el, data, svg = false) {
+        data.context = ctx;
+        return EL.config(el, data, svg);
+    }
 
     /**
      * Удалить все child ноды
      * @param {HTMLElement} el 
      */
     static clear(el) {
-        while (el.firstChild) el.removeChild(el.lastChild);
+        while (el.firstChild) el.removeChild(el.firstChild);
     }
 
     /**
-     * Создать массив компонентов из массива объектов конфигурации
+     * Создать массив элементов из массива объектов конфигурации
      * @param {array} arr массив объектов конфигурации
      * @param {Boolean} svg SVG
      * @returns {array} of Elements
@@ -127,7 +202,7 @@ export class EL {
     }
 
     /**
-     * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
+     * Создать теневой элемент от указанного tag, дети подключатся к нему в shadowRoot
      * @param {string|Node} host html tag теневого элемента или Node
      * @param {object} data параметры внешнего элемента
      * @param {string} sheet css стили
@@ -160,6 +235,25 @@ export class EL {
 // 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);
@@ -224,7 +318,7 @@ export class Sheet {
 //#region StyledComponent
 export class StyledComponent extends EL {
     /**
-     * Создать компонент и поместить его в переменную $root
+     * Создать элемент и поместить его в переменную $root
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {string|array} style стили в виде css строки
@@ -237,7 +331,7 @@ export class StyledComponent extends EL {
     }
 
     /**
-     * Создать компонент
+     * Создать элемент
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {string|array} style стили в виде css строки

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:()=>o,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 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,o]of Object.entries(t)){switch(c){case"text":e.textContent=null==o?"":o+"";continue;case"html":e.innerHTML=null==o?"":o+"";continue;case"tag":case"context":case"get":case"also":continue}if(o)switch(c){case"class":(Array.isArray(o)?o:o.split(" ")).map(t=>t&&e.classList.add(t));break;case"push":o.push(e);break;case"$":case"var":n&&(n["$"+o]=e);break;case"events":for(let t in o)e.addEventListener(t,o[t].bind(n));break;case"parent":o.appendChild(e);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"child_r":a.clear(e);case"child":s(o);break;case"children_r":a.clear(e);case"children":for(let e of o)s(e);break;case"style":if("string"==typeof o)e.style.cssText+=o+";";else for(let t in o)o[t]&&(e.style[t]=o[t]);break;default:e[c]=o}}return t.also&&n&&t.also.call(n,e),e}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,o,r={},l={})=>n._make("rect",{...r,x:e,y:t,width:a,height:c,rx:s,ry:o},l);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={},o={})=>n._make("line",{...s,x1:e,y1:t,x2:a,y2:c},o);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 o 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,o=!1){return s.addStyle(c,n,o),a.make(e,t)}}const r=t.uA,l=t.EL,i=t.t4,d=t.cj,h=t.LV;export{r as Component,l as EL,i as SVG,d as Sheet,h as StyledComponent};
+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};

package/README.md

@@ -4,7 +4,36 @@
 > npm i @alexgyver/component
 
 ## Дока
-### Component
+### 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
+- `style`, `style_r` - стили. Принимает:
+  - Строки CSS стилей
+  - Объект вида `{styleName: value}`
+- `class`, `class_r` - установка классов в classList, версия с `_r` - заменить классы. Принимает:
+  - Строки вида `newClass active`
+  - Массивы вида `['newClass', 'active']`, причём можно по условию: `['newClass', isActive && 'active']`
+  - Объекты вида `{newClass: true, active: false}` - true значение добавляет класс
+- `onConfig` - функция, вызовется при настройке через функцию config
+- `onMount` - функция, вызовется при присоединении к DOM
+- Другие значения будут добавлены как свойства
+
 ```js
 /**
  * Создать компонент и поместить его в переменную $root
@@ -18,22 +47,6 @@ EL(tag, data = {}, svg = false);
  * @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 = {});
 
@@ -118,8 +131,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 +157,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 +220,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 +267,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 },
+    onConfig: 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.3.10",
+  "version": "1.4.1",
   "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.98.0",
+    "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1"
   }
 }