@alexgyver/component 1.1.2 → 1.1.4

package/Component.js

@@ -4,9 +4,9 @@ export class Component {
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      */
-    constructor(tag, data = {}, ns = false) {
+    constructor(tag, data = {}, svg = false) {
         data.context = this;
-        this.$root = Component.make(tag, data, ns);
+        this.$root = Component.make(tag, data, svg);
     }
 
     /**
@@ -15,30 +15,32 @@ export class Component {
      * @param {object} data параметры
      * @returns {Node}
      * @params
-     * tag {string} тег html элемента (для указания в children например)
-     * context {object} контекст для параметра 'var' и вызовов 'also'
-     * text {string} добавить в textContent
-     * html {string} добавить в innerHTML
-     * attrs {object} добавить аттрибуты
-     * props {object} добавить свойства
-     * class {string} добавить в className
+     * tag {string} - тег html элемента (для указания в children например)
+     * svg {boolean} - создавать как SVG элемент
+     * context {object} - контекст для параметра 'var' и вызовов 'also'
+     * text {string} - добавить в textContent
+     * html {string} - добавить в innerHTML
+     * attrs {object} - добавить аттрибуты
+     * props {object} - добавить свойства
+     * class {string} - добавить в className
      * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
      * export {array} - положить в 0 ячейку указанного массива
-     * var {string} создаёт переменную $имя в указанном контексте
-     * events {object} добавляет addEventListener'ы {event: handler}
+     * push {array} - добавить к массиву
+     * var {string} - создаёт переменную $имя в указанном контексте
+     * events {object} - добавляет addEventListener'ы {event: handler}
      * parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
-     * style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
+     * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
      * children - массив DOM, Component, object, html string
      * child - DOM, Component, object, html string
      * всё остальное будет добавлено как property
      */
-    static make(tag, data = {}, ns = false) {
+    static make(tag, data = {}, svg = false) {
         if (!tag || typeof data !== 'object') return null;
         if (data instanceof Node) return data;
-        return Component.config(ns ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, ns);
+        return Component.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
     }
 
-    static makeNS(tag, data = {}) {
+    static makeSVG(tag, data = {}) {
         return Component.make(tag, data, true);
     }
 
@@ -76,16 +78,18 @@ export class Component {
      * Настроить элемент
      * @param {Node} el элемент
      * @param {object} data параметры
-     * @param {object} ns NS
+     * @param {object} svg SVG
      * @returns {Node}
      */
-    static config(el, data, ns = false) {
+    static config(el, data, svg = false) {
         if (Array.isArray(el)) {
-            el.forEach(e => Component.config(e, data, ns));
+            el.forEach(e => Component.config(e, data, svg));
             return;
         }
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
+
         const context = data.context;
+        if ('svg' in data) svg = data.svg;
 
         let addChild = (obj) => {
             if (!obj) return;
@@ -93,7 +97,7 @@ export class Component {
             else if (obj instanceof Component) el.appendChild(obj.$root);
             else if (typeof obj === 'object') {
                 if (!obj.context) obj.context = context;
-                let cmp = Component.make(obj.tag, obj, ns);
+                let cmp = Component.make(obj.tag, obj, svg);
                 if (cmp) el.appendChild(cmp);
             } else if (typeof obj === 'string') {
                 el.innerHTML += obj;
@@ -105,12 +109,14 @@ export class Component {
             switch (key) {
                 case 'tag':
                 case 'context':
+                case 'svg':
                     continue;
                 case 'text': el.textContent = val; break;
                 case 'html': el.innerHTML = val; break;
                 case 'class': el.classList.add(...val.split(' ')); break;
                 case 'also': if (context) val.call(context, el); break;
                 case 'export': val[0] = el; break;
+                case 'push': val.push(el); break;
                 case 'var': if (context) context['$' + val] = el; break;
                 case 'events': for (let ev in val) if (val[ev]) el.addEventListener(ev, val[ev].bind(context)); break;
                 case 'parent': if (val instanceof Node || val instanceof DocumentFragment) val.append(el); break;
@@ -130,7 +136,7 @@ export class Component {
         return el;
     }
 
-    static configNS(el, data) {
+    static configSVG(el, data) {
         return Component.config(el, data, true);
     }
 
@@ -139,12 +145,12 @@ export class Component {
      * @param {array} arr массив объектов конфигурации
      * @returns {array} of Elements
      */
-    static makeArray(arr, ns = false) {
+    static makeArray(arr, svg = false) {
         if (!arr || !Array.isArray(arr)) return [];
-        return arr.map(x => Component.make(x.tag, x, ns));
+        return arr.map(x => Component.make(x.tag, x, svg));
     }
 
-    static makeArrayNS(arr) {
+    static makeArraySVG(arr) {
         return Component.makeArray(arr, true);
     }
 }

package/package.json

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