@alexgyver/component 1.3.5 → 1.3.7

package/Component.js

@@ -74,7 +74,7 @@ export class EL {
         }
 
         for (const [key, val] of Object.entries(data)) {
-            if (!val) continue;
+            if (val === undefined || val === null) continue;
             switch (key) {
                 case 'tag':
                 case 'context':
@@ -90,9 +90,9 @@ export class EL {
                 case 'parent': if (val) 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.replaceChildren(); // fall
+                case 'child_r': EL.clear(el); // fall
                 case 'child': addChild(val); break;
-                case 'children_r': el.replaceChildren(); // fall
+                case 'children_r': EL.clear(el); // fall
                 case 'children': for (const obj of val) addChild(obj); break;
                 case 'style':
                     if (typeof val === 'string') el.style.cssText += (val + ';');
@@ -105,6 +105,14 @@ export class EL {
         return el;
     }
 
+    /**
+     * Удалить все child ноды
+     * @param {HTMLElement} el 
+     */
+    static clear(el) {
+        while (el.firstChild) el.removeChild(el.lastChild);
+    }
+
     /**
      * Создать массив компонентов из массива объектов конфигурации
      * @param {array} arr массив объектов конфигурации

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 ctx;constructor(e,t={},c=!1){a.ctx=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.ctx=null===n?null:n||a.ctx,n=a.ctx;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[a,c]of Object.entries(t))if(c)switch(a){case"tag":case"context":case"get":case"also":continue;case"text":e.textContent=c+"";break;case"html":e.innerHTML=c;break;case"class":(Array.isArray(c)?c:c.split(" ")).map((t=>t&&e.classList.add(t)));break;case"push":c.push(e);break;case"var":n&&(n["$"+c]=e);break;case"events":for(let t in c)e.addEventListener(t,c[t].bind(n));break;case"parent":c&&c.appendChild(e);break;case"attrs":for(let t in c)e.setAttribute(t,c[t]);break;case"props":for(let t in c)e[t]=c[t];break;case"child_r":e.replaceChildren();case"child":s(c);break;case"children_r":e.replaceChildren();case"children":for(const e of c)s(e);break;case"style":if("string"==typeof c)e.style.cssText+=c+";";else for(let t in c)e.style[t]=c[t];break;default:e[a]=c}return t.also&&n&&t.also.call(n,e),e}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)}}var o=t.uA,i=t.EL,l=t.t4,d=t.cj,p=t.LV;export{o as Component,i as EL,l as SVG,d as Sheet,p 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:()=>n,t4:()=>s,uA:()=>c});class a{static ctx;constructor(e,t={},c=!1){a.ctx=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 s=t.context;a.ctx=null===s?null:s||a.ctx,s=a.ctx;let n=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 s=a.make(t.tag??"div",t,c||"svg"==t.tag);s&&e.appendChild(s)}};for(const[c,r]of Object.entries(t))if(null!=r)switch(c){case"tag":case"context":case"get":case"also":continue;case"text":e.textContent=r+"";break;case"html":e.innerHTML=r;break;case"class":(Array.isArray(r)?r:r.split(" ")).map((t=>t&&e.classList.add(t)));break;case"push":r.push(e);break;case"var":s&&(s["$"+r]=e);break;case"events":for(let t in r)e.addEventListener(t,r[t].bind(s));break;case"parent":r&&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":n(r);break;case"children_r":a.clear(e);case"children":for(const e of r)n(e);break;case"style":if("string"==typeof r)e.style.cssText+=r+";";else for(let t in r)e.style[t]=r[t];break;default:e[c]=r}return t.also&&s&&t.also.call(s,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 s=e instanceof Node?e:document.createElement(e);return s.attachShadow({mode:"open"}),a.config(s.shadowRoot,{context:t.context,children:[{tag:"style",textContent:c??""},t.child??{},...t.children??[]]}),delete t.children,delete t.child,a.config(s,t),s}}const c=a;class s{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={})=>s._make("svg",e,t);static rect=(e,t,a,c,n,r,o={},l={})=>s._make("rect",{...o,x:e,y:t,width:a,height:c,rx:n,ry:r},l);static circle=(e,t,a,c={},n={})=>s._make("circle",{...c,cx:e,cy:t,r:a},n);static line=(e,t,a,c,n={},r={})=>s._make("line",{...n,x1:e,y1:t,x2:a,y2:c},r);static polyline=(e,t={},a={})=>s._make("polyline",{...t,points:e},a);static polygon=(e,t={},a={})=>s._make("polygon",{...t,points:e},a);static path=(e,t={},a={})=>s._make("path",{...t,d:e},a);static text=(e,t,a,c={},n={})=>s._make("text",{...c,x:t,y:a},{...n,text:e});static _make=(e,t={},a={})=>s.make(e,{attrs:{...t},...a})}class n{static addStyle(e,t,a=!1){if(e&&t&&("object"==typeof t&&(t=t.constructor.name),!n.#e.has(t)&&!n.#t.has(t)))if(a){let a=document.createElement("style");document.head.appendChild(a),a.textContent=e,n.#t.set(t,a)}else n.#a||(n.#a=document.head.appendChild(document.createElement("style"))),n.#a.textContent+=e+"\r\n",n.#e.add(t)}static removeStyle(e){"object"==typeof e&&(e=e.constructor.name),n.#t.has(e)&&(n.#t.get(e).remove(),n.#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,s=!1){super(e,t),n.addStyle(a,c,s)}static make(e,t={},c=null,s=null,r=!1){return n.addStyle(c,s,r),a.make(e,t)}}const o=t.uA,l=t.EL,i=t.t4,d=t.cj,p=t.LV;export{o as Component,l as EL,i as SVG,d as Sheet,p as StyledComponent};

package/README.md

@@ -11,7 +11,7 @@
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  */
-Component(tag, data = {}, svg = false);
+EL(tag, data = {}, svg = false);
 
 /**
  * Создать компонент
@@ -28,14 +28,14 @@ Component(tag, data = {}, svg = false);
  * push {array} - добавить к указанному массиву
  * var {string} - создаёт переменную $имя в указанном контексте
  * events {object} - добавляет addEventListener'ы {event: e => {}}
- * children/children_r - массив {DOM, Component, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
- * child/child_r - {DOM, Component, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
+ * 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
  */
-Component.make(tag, data = {});
+EL.make(tag, data = {});
 
 /**
  * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
@@ -44,7 +44,7 @@ Component.make(tag, data = {});
  * @param {string} sheet css стили
  * @returns {Node} host
  */
-Component.makeShadow(host, data = {}, sheet = null);
+EL.makeShadow(host, data = {}, sheet = null);
 
 /**
  * Настроить элемент
@@ -52,14 +52,14 @@ Component.makeShadow(host, data = {}, sheet = null);
  * @param {object} data параметры
  * @returns {Node}
  */
-Component.config(el, data);
+EL.config(el, data);
 
 /**
  * Создать массив компонентов из массива объектов конфигурации
  * @param {array} arr массив объектов конфигурации
  * @returns {array} of Elements
  */
-Component.makeArray(arr);
+EL.makeArray(arr);
 ```
 
 ### SVG
@@ -121,7 +121,7 @@ StyledComponent.make(tag, data = {}, style = null, id = null, ext = false);
 ## Пример
 Создаст контейнер с двумя вложенными блоками текста и прикрепит к body
 ```js
-Component.make('div', {
+EL.make('div', {
     parent: document.body,
     class: 'my-div',
     style: {
@@ -148,7 +148,7 @@ Component.make('div', {
 ```js
 class Button {
     constructor(text) {
-        Component.make('button', {
+        EL.make('button', {
             context: this,
             var: 'button',
             text: text,
@@ -169,7 +169,7 @@ btn.$button; // элемент кнопки
 Некоторые трюки
 
 ```js
-Component.make('div', {
+EL.make('div', {
     context: this,
     children: [
         {},   // валидно
@@ -177,7 +177,7 @@ Component.make('div', {
         {
             // без тега - div
         },
-        Component.make(...), // контекст будет проброшен сюда автоматически
+        EL.make(...), // контекст будет проброшен сюда автоматически
         foo && {...}, // добавить компонент если foo - true
         {
             tag: 'svg', // автоматически запустится режим SVG

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "Simple HTML&SVG element builder",
   "main": "./Component.js",
   "module": "./Component.js",