@alexgyver/component 1.3.4 → 1.3.6

package/Component.js

@@ -1,5 +1,5 @@
-//#region Component
-export class Component {
+//#region EL
+export class EL {
     static ctx;
 
     /**
@@ -9,8 +9,8 @@ export class Component {
      * @param {Boolean} svg SVG
      */
     constructor(tag, data = {}, svg = false) {
-        Component.ctx = this;
-        this.$root = Component.make(tag, data, svg);
+        EL.ctx = this;
+        this.$root = EL.make(tag, data, svg);
     }
 
     /**
@@ -30,8 +30,8 @@ export class Component {
      * 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); }
@@ -41,7 +41,7 @@ export class Component {
         if (!tag || typeof data !== 'object') return null;
         if (data instanceof Node) return data;
         if (tag == 'svg') svg = true;
-        return Component.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) : document.createElement(tag), data, svg);
     }
 
     /**
@@ -53,22 +53,22 @@ export class Component {
      */
     static config(el, data, svg = false) {
         if (Array.isArray(el)) {
-            el.forEach(e => Component.config(e, data, svg));
+            el.forEach(e => EL.config(e, data, svg));
             return null;
         }
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
 
         let ctx = data.context;
-        Component.ctx = (ctx === null) ? null : (ctx ? ctx : Component.ctx);
-        ctx = Component.ctx;
+        EL.ctx = (ctx === null) ? null : (ctx ? ctx : EL.ctx);
+        ctx = EL.ctx;
 
         let addChild = (obj) => {
             if (!obj) return;
             if (obj instanceof Node) el.appendChild(obj);
-            else if (obj instanceof Component) el.appendChild(obj.$root);
+            else if (obj instanceof EL) el.appendChild(obj.$root);
             else if (typeof obj === 'string') el.innerHTML += obj;
             else if (typeof obj === 'object') {
-                let cmp = Component.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
+                let cmp = EL.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
                 if (cmp) el.appendChild(cmp);
             }
         }
@@ -90,9 +90,9 @@ export class Component {
                 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 Component {
         return el;
     }
 
+    /**
+     * Удалить все child ноды
+     * @param {HTMLElement} el 
+     */
+    static clear(el) {
+        while (el.firstChild) el.removeChild(el.lastChild);
+    }
+
     /**
      * Создать массив компонентов из массива объектов конфигурации
      * @param {array} arr массив объектов конфигурации
@@ -113,7 +121,7 @@ export class Component {
      */
     static makeArray(arr, svg = false) {
         if (!arr || !Array.isArray(arr)) return [];
-        return arr.map(x => Component.make(x.tag, x, svg));
+        return arr.map(x => EL.make(x.tag, x, svg));
     }
 
     /**
@@ -129,7 +137,7 @@ export class Component {
         let $host = (host instanceof Node) ? host : document.createElement(host);
         $host.attachShadow({ mode: 'open' });
 
-        Component.config($host.shadowRoot, {
+        EL.config($host.shadowRoot, {
             context: data.context,
             children: [
                 {
@@ -142,16 +150,19 @@ export class Component {
         });
         delete data.children;
         delete data.child;
-        Component.config($host, data);
+        EL.config($host, data);
         return $host;
     }
 }
 
+// legacy
+export const Component = EL;
+
 //#region SVG
 export class SVG {
-    static make = (tag, data) => Component.make(tag, data, true);
-    static config = (el, data) => Component.config(el, data, true);
-    static makeArray = (arr) => Component.makeArray(arr, true);
+    static make = (tag, data) => EL.make(tag, data, true);
+    static config = (el, data) => EL.config(el, data, true);
+    static makeArray = (arr) => EL.makeArray(arr, true);
 
     static svg = (attrs = {}, props = {}) => SVG._make('svg', attrs, props);
     static rect = (x, y, w, h, rx, ry, attrs = {}, props = {}) => SVG._make('rect', { ...attrs, x: x, y: y, width: w, height: h, rx: rx, ry: ry }, props);
@@ -209,7 +220,7 @@ export class Sheet {
 }
 
 //#region StyledComponent
-export class StyledComponent extends Component {
+export class StyledComponent extends EL {
     /**
      * Создать компонент и поместить его в переменную $root
      * @param {string} tag html tag элемента
@@ -233,6 +244,6 @@ export class StyledComponent extends Component {
      */
     static make(tag, data = {}, style = null, id = null, ext = false) {
         Sheet.addStyle(style, id, ext);
-        return Component.make(tag, data);
+        return EL.make(tag, data);
     }
 }

package/Component.min.js

@@ -0,0 +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};

package/README.md

@@ -1,166 +1,196 @@
-# Component.js
-Библиотека для создания и настройки DOM/SVG элементов как JS объектов
-
-> npm i @alexgyver/component
-
-## Дока
-### Component
-```js
-/**
- * Создать компонент и поместить его в переменную $root
- * @param {string} tag html tag элемента
- * @param {object} data параметры
- */
-Component(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, Component, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
- * child/child_r - {DOM, Component, 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 = {});
-
-/**
- * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
- * @param {string|Node} host html tag теневого элемента или Node
- * @param {object} data параметры внешнего элемента
- * @param {string} sheet css стили
- * @returns {Node} host
- */
-Component.makeShadow(host, data = {}, sheet = null);
-
-/**
- * Настроить элемент
- * @param {Node | Array} el элемент или массив элементов
- * @param {object} data параметры
- * @returns {Node}
- */
-Component.config(el, data);
-
-/**
- * Создать массив компонентов из массива объектов конфигурации
- * @param {array} arr массив объектов конфигурации
- * @returns {array} of Elements
- */
-Component.makeArray(arr);
-```
-
-### SVG
-```js
-SVG.make(tag, data);
-SVG.config(el, data);
-SVG.makeArray(arr);
-SVG.svg(attrs = {}, props = {});
-
-SVG.rect(x, y, w, h, rx, ry, attrs = {}, props = {});
-SVG.circle(x, y, r, attrs = {}, props = {});
-SVG.line(x1, y1, x2, y2, attrs = {}, props = {});
-SVG.polyline(points, attrs = {}, props = {});
-SVG.polygon(points, attrs = {}, props = {});
-SVG.path(d, attrs = {}, props = {});
-SVG.text(text, x, y, attrs = {}, props = {});
-```
-
-### Sheet
-```js
-/**
- * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
- * @param {string|array} style стили в виде css
- * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
- * @param {boolean} ext внешний стиль - может быть удалён по id
- */
-Sheet.addStyle(style, id, ext = false);
-
-/**
- * Удалить ext стиль по его id
- * @param {string} id id стиля
- */
-Sheet.removeStyle(id);
-```
-
-### StyledComponent
-```js
-/**
- * Создать компонент и поместить его в переменную $root
- * @param {string} tag html tag элемента
- * @param {object} data параметры
- * @param {string|array} style стили в виде css строки
- * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
- * @param {boolean} ext внешний стиль - может быть удалён по id
- */
-StyledComponent(tag, data = {}, style = null, id = null, ext = false);
-
-/**
- * Создать компонент
- * @param {string} tag html tag элемента
- * @param {object} data параметры
- * @param {string|array} style стили в виде css строки
- * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
- * @param {boolean} ext внешний стиль - может быть удалён по id
- */
-StyledComponent.make(tag, data = {}, style = null, id = null, ext = false);
-```
-
-## Пример
-Создаст контейнер с двумя вложенными блоками текста и прикрепит к body
-```js
-Component.make('div', {
-    parent: document.body,
-    class: 'my-div',
-    style: {
-        background: 'red',
-    },
-    events: {
-        click: () => console.log('click'),
-    },
-    children: [
-        {
-            tag: 'span',
-            text: 'hello',
-        },
-        {
-            tag: 'span',
-            text: 'world',
-        }
-    ]
-});
-```
-
-Гораздо интереснее использовать в классе и передавать контекст. Параметр `var` создаст переменную с элементом с указанным именем + префикс `$`:
-```js
-class Button {
-    constructor(text) {
-        Component.make('button', {
-            context: this,
-            var: 'button',
-            text: text,
-            class: 'btn',
-            events: {
-                click: console.log(this.$button),
-            },
-        });
-
-        // тут уже существует this.$button
-    }
-}
-
-let btn = new Button('kek');
-btn.$button; // элемент кнопки
-```
+# Component.js
+Библиотека для создания и настройки DOM/SVG элементов как JS объектов
+
+> npm i @alexgyver/component
+
+## Дока
+### Component
+```js
+/**
+ * Создать компонент и поместить его в переменную $root
+ * @param {string} tag html tag элемента
+ * @param {object} data параметры
+ */
+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 = {});
+
+/**
+ * Создать теневой компонент от указанного 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);
+
+/**
+ * Настроить элемент
+ * @param {Node | Array} el элемент или массив элементов
+ * @param {object} data параметры
+ * @returns {Node}
+ */
+EL.config(el, data);
+
+/**
+ * Создать массив компонентов из массива объектов конфигурации
+ * @param {array} arr массив объектов конфигурации
+ * @returns {array} of Elements
+ */
+EL.makeArray(arr);
+```
+
+### SVG
+```js
+SVG.make(tag, data);
+SVG.config(el, data);
+SVG.makeArray(arr);
+
+SVG.svg(attrs = {}, props = {});
+SVG.rect(x, y, w, h, rx, ry, attrs = {}, props = {});
+SVG.circle(x, y, r, attrs = {}, props = {});
+SVG.line(x1, y1, x2, y2, attrs = {}, props = {});
+SVG.polyline(points, attrs = {}, props = {});
+SVG.polygon(points, attrs = {}, props = {});
+SVG.path(d, attrs = {}, props = {});
+SVG.text(text, x, y, attrs = {}, props = {});
+```
+
+### Sheet
+```js
+/**
+ * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
+ * @param {string|array} style стили в виде css
+ * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
+ * @param {boolean} ext внешний стиль - может быть удалён по id
+ */
+Sheet.addStyle(style, id, ext = false);
+
+/**
+ * Удалить ext стиль по его id
+ * @param {string} id id стиля
+ */
+Sheet.removeStyle(id);
+```
+
+### StyledComponent
+```js
+/**
+ * Создать компонент и поместить его в переменную $root
+ * @param {string} tag html tag элемента
+ * @param {object} data параметры
+ * @param {string|array} style стили в виде css строки
+ * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
+ * @param {boolean} ext внешний стиль - может быть удалён по id
+ */
+StyledComponent(tag, data = {}, style = null, id = null, ext = false);
+
+/**
+ * Создать компонент
+ * @param {string} tag html tag элемента
+ * @param {object} data параметры
+ * @param {string|array} style стили в виде css строки
+ * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
+ * @param {boolean} ext внешний стиль - может быть удалён по id
+ */
+StyledComponent.make(tag, data = {}, style = null, id = null, ext = false);
+```
+
+## Пример
+Создаст контейнер с двумя вложенными блоками текста и прикрепит к body
+```js
+EL.make('div', {
+    parent: document.body,
+    class: 'my-div',
+    style: {
+        background: 'red',
+    },
+    events: {
+        click: () => console.log('click'),
+    },
+    children: [
+        {
+            tag: 'span',
+            text: 'hello',
+        },
+        {
+            tag: 'span',
+            text: 'world',
+        }
+    ]
+});
+```
+
+Гораздо интереснее использовать в классе и передавать контекст. Параметр `var` создаст переменную с элементом с указанным именем + префикс `$`:
+
+```js
+class Button {
+    constructor(text) {
+        EL.make('button', {
+            context: this,
+            var: 'button',
+            text: text,
+            class: 'btn',
+            events: {
+                click: console.log(this.$button),
+            },
+        });
+
+        // тут уже существует this.$button
+    }
+}
+
+let btn = new Button('kek');
+btn.$button; // элемент кнопки
+```
+
+Некоторые трюки
+
+```js
+EL.make('div', {
+    context: this,
+    children: [
+        {},   // валидно
+        null, // валидно
+        {
+            // без тега - div
+        },
+        EL.make(...), // контекст будет проброшен сюда автоматически
+        foo && {...}, // добавить компонент если foo - true
+        {
+            tag: 'svg', // автоматически запустится режим SVG
+            children: [
+                // и будет проброшен сюда
+                SVG.circle(10, 10, 5),
+                {
+                    tag: 'line',
+                    attrs: {}
+                },
+            ],
+        },
+    ],
+    class: ['some', 'class', foo && 'plus_me'], // добавить plus_me если foo - true
+});
+```

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "Simple HTML&SVG element builder",
   "main": "./Component.js",
   "module": "./Component.js",
   "types": "./Component.js",
+  "scripts": {
+    "build": "webpack --config ./webpack.config.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/GyverLibs/Component.js.git"
   },
   "author": "AlexGyver <alex@alexgyver.ru>",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1"
+  }
 }

package/{example → test}/script.js

@@ -1,7 +1,7 @@
-import { Component, Sheet, StyledComponent } from "../component.js";
+import { EL, Sheet, StyledComponent } from "https://gyverlibs.github.io/EL.js/EL.min.js";
 
 // кнопка наследует, стили добавляются отдельно
-class Button extends Component {
+class Button extends EL {
     constructor(text, handler) {
 
         super('button', {
@@ -75,7 +75,7 @@ function Checkbox(name) {
 }
 
 function Container(children) {
-    return Component.make('div',
+    return EL.make('div',
         {
             children: children,
         });
@@ -83,7 +83,7 @@ function Container(children) {
 
 class ShadowComponent {
     constructor() {
-        Component.makeShadow('div', {
+        EL.makeShadow('div', {
             context: this,
             parent: document.body,
             events: {
@@ -106,7 +106,7 @@ class ShadowComponent {
 document.addEventListener('kek', () => console.log('kek!'));
 
 document.addEventListener("DOMContentLoaded", () => {
-    Component.make('h1', {
+    EL.make('h1', {
         text: 'Hello!',
         parent: document.body,
     });

package/webpack.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    entry: './Component.js',
+    output: {
+        path: __dirname,
+        filename: 'Component.min.js',
+        library: {
+            type: 'module'
+        }
+    },
+    experiments: {
+        outputModule: true
+    },
+    mode: "production",
+};