@alexgyver/component 1.3.2 → 1.3.4

package/Component.js

@@ -1,11 +1,15 @@
+//#region Component
 export class Component {
+    static ctx;
+
     /**
      * Создать компонент и поместить его в переменную $root
      * @param {string} tag html tag элемента
      * @param {object} data параметры
+     * @param {Boolean} svg SVG
      */
     constructor(tag, data = {}, svg = false) {
-        data.context = this;
+        Component.ctx = this;
         this.$root = Component.make(tag, data, svg);
     }
 
@@ -13,62 +17,59 @@ export class Component {
      * Создать компонент
      * @param {string} tag html tag элемента
      * @param {object} data параметры
+     * @param {Boolean} svg SVG
      * @returns {Node}
      * @params
-     * tag {string} - тег html элемента (для указания в children например)
-     * context {object} - контекст для параметра 'var' и вызовов 'also'
+     * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
+     * context {object} - контекст для параметра 'var' и вызовов, прокидывается в детей. Если указан явно как null - прерывает проброс
+     * parent - {Element} добавляет компонент к указанному элементу
      * text {string} - добавить в textContent
      * html {string} - добавить в innerHTML
-     * attrs {object} - добавить аттрибуты
-     * props {object} - добавить свойства
-     * class {string} - добавить в className
-     * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
-     * push {array} - добавить к массиву
-     * var {string} - создаёт переменную $имя в указанном контексте
-     * events {object} - добавляет addEventListener'ы {event: handler}
-     * parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
+     * class {string | Array} - добавить в className
      * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
-     * children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
-     * child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
-     * get - функция, в которую будет отправлен элемент
+     * 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
      */
     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 Component.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
     }
 
-    static makeSVG(tag, data = {}) {
-        return Component.make(tag, data, true);
-    }
-
     /**
      * Настроить элемент
      * @param {Node | Array} el элемент или массив элементов
      * @param {object} data параметры
-     * @param {object} svg SVG
+     * @param {Boolean} svg SVG
      * @returns {Node}
      */
     static config(el, data, svg = false) {
         if (Array.isArray(el)) {
             el.forEach(e => Component.config(e, data, svg));
-            return;
+            return null;
         }
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
 
-        Component.ctx = (data.context === null) ? null : (data.context ? data.context : Component.ctx);
-        const ctx = Component.ctx;
+        let ctx = data.context;
+        Component.ctx = (ctx === null) ? null : (ctx ? ctx : Component.ctx);
+        ctx = Component.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 (typeof obj === 'string') el.innerHTML += obj;
             else if (typeof obj === 'object') {
                 let cmp = Component.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
                 if (cmp) el.appendChild(cmp);
-            } else if (typeof obj === 'string') {
-                el.innerHTML += obj;
             }
         }
 
@@ -78,11 +79,11 @@ export class Component {
                 case 'tag':
                 case 'context':
                 case 'get':
+                case 'also':
                     continue;
                 case 'text': el.textContent = val + ''; break;
                 case 'html': el.innerHTML = val; break;
-                case 'class': el.classList.add(...val.split(' ')); break;
-                case 'also': if (ctx) val.call(ctx, el); break;
+                case 'class': (Array.isArray(val) ? val : val.split(' ')).map(c => c && el.classList.add(c)); break;
                 case 'push': val.push(el); break;
                 case 'var': if (ctx) ctx['$' + val] = el; break;
                 case 'events': for (let ev in val) el.addEventListener(ev, val[ev].bind(ctx)); break;
@@ -100,17 +101,14 @@ export class Component {
                 default: el[key] = val; break;
             }
         }
-        if (data.get && ctx) data.get.call(ctx, el);
+        if (data.also && ctx) data.also.call(ctx, el);
         return el;
     }
 
-    static configSVG(el, data) {
-        return Component.config(el, data, true);
-    }
-
     /**
      * Создать массив компонентов из массива объектов конфигурации
      * @param {array} arr массив объектов конфигурации
+     * @param {Boolean} svg SVG
      * @returns {array} of Elements
      */
     static makeArray(arr, svg = false) {
@@ -118,10 +116,6 @@ export class Component {
         return arr.map(x => Component.make(x.tag, x, svg));
     }
 
-    static makeArraySVG(arr) {
-        return Component.makeArray(arr, true);
-    }
-
     /**
      * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
      * @param {string|Node} host html tag теневого элемента или Node
@@ -151,10 +145,27 @@ export class Component {
         Component.config($host, data);
         return $host;
     }
+}
 
-    static ctx;
+//#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 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);
+    static circle = (x, y, r, attrs = {}, props = {}) => SVG._make('circle', { ...attrs, cx: x, cy: y, r: r }, props);
+    static line = (x1, y1, x2, y2, attrs = {}, props = {}) => SVG._make('line', { ...attrs, x1: x1, y1: y1, x2: x2, y2: y2 }, props);
+    static polyline = (points, attrs = {}, props = {}) => SVG._make('polyline', { ...attrs, points: points }, props);
+    static polygon = (points, attrs = {}, props = {}) => SVG._make('polygon', { ...attrs, points: points }, props);
+    static path = (d, attrs = {}, props = {}) => SVG._make('path', { ...attrs, d: d }, props);
+    static text = (text, x, y, attrs = {}, props = {}) => SVG._make('text', { ...attrs, x: x, y: y }, { ...props, text: text });
+
+    static _make = (tag, attrs = {}, props = {}) => SVG.make(tag, { attrs: { ...attrs }, ...props });
 }
 
+//#region Sheet
 export class Sheet {
     /**
      * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
@@ -197,6 +208,7 @@ export class Sheet {
     static #ext = new Map();
 }
 
+//#region StyledComponent
 export class StyledComponent extends Component {
     /**
      * Создать компонент и поместить его в переменную $root
@@ -223,17 +235,4 @@ export class StyledComponent extends Component {
         Sheet.addStyle(style, id, ext);
         return Component.make(tag, data);
     }
-}
-
-export class SVG {
-    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);
-    static circle = (x, y, r, attrs = {}, props = {}) => SVG._make('circle', { ...attrs, cx: x, cy: y, r: r }, props);
-    static line = (x1, y1, x2, y2, attrs = {}, props = {}) => SVG._make('line', { ...attrs, x1: x1, y1: y1, x2: x2, y2: y2 }, props);
-    static polyline = (points, attrs = {}, props = {}) => SVG._make('polyline', { ...attrs, points: points }, props);
-    static polygon = (points, attrs = {}, props = {}) => SVG._make('polygon', { ...attrs, points: points }, props);
-    static path = (d, attrs = {}, props = {}) => SVG._make('path', { ...attrs, d: d }, props);
-    static text = (text, x, y, attrs = {}, props = {}) => SVG._make('text', { ...attrs, x: x, y: y }, { ...props, text: text });
-
-    static _make = (tag, attrs = {}, props = {}) => Component.makeSVG(tag, { attrs: { ...attrs }, ...props });
 }

package/README.md

@@ -18,26 +18,24 @@ Component(tag, data = {}, svg = false);
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  * @returns {Node}
- * tag {string} - тег html элемента (для указания в children например)
- * context {object} - контекст для параметра 'var' и вызовов 'also'
+ * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
+ * context {object} - контекст для параметра 'var' и вызовов, прокидывается в детей. Если указан явно как null - прерывает проброс
+ * parent - {Element} добавляет компонент к указанному элементу
  * text {string} - добавить в textContent
  * html {string} - добавить в innerHTML
- * attrs {object} - добавить аттрибуты
- * props {object} - добавить свойства
- * class {string} - добавить в className
- * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
- * push {array} - добавить к массиву
- * var {string} - создаёт переменную $имя в указанном контексте
- * events {object} - добавляет addEventListener'ы {event: handler}
- * parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
+ * class {string | Array} - добавить в className
  * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
- * children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
- * child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
- * get - функция, в которую будет отправлен элемент
+ * 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 = {});
-Component.makeSVG(tag, data = {});
 
 /**
  * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
@@ -55,7 +53,6 @@ Component.makeShadow(host, data = {}, sheet = null);
  * @returns {Node}
  */
 Component.config(el, data);
-Component.configSVG(el, data);
 
 /**
  * Создать массив компонентов из массива объектов конфигурации
@@ -63,12 +60,15 @@ Component.configSVG(el, data);
  * @returns {array} of Elements
  */
 Component.makeArray(arr);
-Component.makeArraySVG(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 = {});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.3.2",
-  "description": "Simple HTML element builder",
+  "version": "1.3.4",
+  "description": "Simple HTML&SVG element builder",
   "main": "./Component.js",
   "module": "./Component.js",
   "types": "./Component.js",