@alexgyver/component 1.1.4 → 1.2.0

package/Component.js

@@ -30,8 +30,8 @@ export class Component {
      * events {object} - добавляет addEventListener'ы {event: handler}
      * parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
      * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
-     * children - массив DOM, Component, object, html string
-     * child - DOM, Component, object, html string
+     * children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся
+     * child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся
      * всё остальное будет добавлено как property
      */
     static make(tag, data = {}, svg = false) {
@@ -44,36 +44,6 @@ export class Component {
         return Component.make(tag, data, true);
     }
 
-    /**
-     * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
-     * @param {string|Node} host html tag теневого элемента или Node
-     * @param {object} data параметры внешнего элемента
-     * @param {string} sheet css стили
-     * @returns {Node} host
-     */
-    static makeShadow(host, data = {}, sheet = null) {
-        if (!host || typeof data !== 'object') return null;
-
-        let $host = (host instanceof Node) ? host : document.createElement(host);
-        $host.attachShadow({ mode: 'open' });
-
-        Component.config($host.shadowRoot, {
-            context: data.context,
-            children: [
-                {
-                    tag: 'style',
-                    textContent: sheet ?? '',
-                },
-                data.child ?? {},
-                ...(data.children ?? []),
-            ]
-        });
-        delete data.children;
-        delete data.child;
-        Component.config($host, data);
-        return $host;
-    }
-
     /**
      * Настроить элемент
      * @param {Node} el элемент
@@ -120,7 +90,7 @@ export class Component {
                 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;
-                case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
+                case 'attrs': for (let attr in val) svg ? el.setAttributeNS(null, attr, val[attr]) : el.setAttribute(attr, val[attr]); break;
                 case 'props': for (let prop in val) el[prop] = val[prop]; break;
                 case 'child_r': el.replaceChildren();
                 case 'child': addChild(val); break;
@@ -153,12 +123,42 @@ export class Component {
     static makeArraySVG(arr) {
         return Component.makeArray(arr, true);
     }
+
+    /**
+     * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
+     * @param {string|Node} host html tag теневого элемента или Node
+     * @param {object} data параметры внешнего элемента
+     * @param {string} sheet css стили
+     * @returns {Node} host
+     */
+    static makeShadow(host, data = {}, sheet = null) {
+        if (!host || typeof data !== 'object') return null;
+
+        let $host = (host instanceof Node) ? host : document.createElement(host);
+        $host.attachShadow({ mode: 'open' });
+
+        Component.config($host.shadowRoot, {
+            context: data.context,
+            children: [
+                {
+                    tag: 'style',
+                    textContent: sheet ?? '',
+                },
+                data.child ?? {},
+                ...(data.children ?? []),
+            ]
+        });
+        delete data.children;
+        delete data.child;
+        Component.config($host, data);
+        return $host;
+    }
 }
 
 export class Sheet {
     /**
      * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
-     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+     * @param {string|array} style стили в виде css строки
      * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
      * @param {boolean} ext внешний стиль - может быть удалён по id
      */
@@ -166,51 +166,52 @@ export class Sheet {
         if (!style || !id) return;
         if (typeof id === 'object') id = id.constructor.name;
 
-        if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
-            if (typeof style === 'object') {
-                let str = '';
-                let f = 0;
-                for (const v of style) {
-                    if (f = !f) {
-                        str += v;
-                    } else {
-                        str += '{';
-                        for (const rule of v) str += rule + ';';
-                        str += '}';
-                    }
-                }
-                style = str;
-            }
+        if (!Sheet.#int.has(id) && !Sheet.#ext.has(id)) {
+            // if (typeof style === 'object') {
+            //     let str = '';
+            //     let f = 0;
+            //     for (const v of style) {
+            //         if (f = !f) {
+            //             str += v;
+            //         } else {
+            //             str += '{';
+            //             for (const rule of v) str += rule + ';';
+            //             str += '}';
+            //         }
+            //     }
+            //     style = str;
+            // }
 
             if (ext) {
                 let sheet = document.createElement('style');
                 document.head.appendChild(sheet);
                 sheet.sheet.insertRule(style);
-                Sheet.#external.set(id, sheet);
+                Sheet.#ext.set(id, sheet);
             } else {
                 if (!Sheet.#sheet) {
                     Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
                 }
                 Sheet.#sheet.insertRule(style);
-                Sheet.#internal.add(id);
+                Sheet.#int.add(id);
             }
         }
     }
 
     /**
      * Удалить ext стиль по его id
-     * @param {string} id id стиля
+     * @param {string} id id стиля. При передаче this будет именем класса
      */
     static removeStyle(id) {
-        if (Sheet.#external.has(id)) {
-            Sheet.#external.get(id).remove();
-            Sheet.#external.delete(id);
+        if (typeof id === 'object') id = id.constructor.name;
+        if (Sheet.#ext.has(id)) {
+            Sheet.#ext.get(id).remove();
+            Sheet.#ext.delete(id);
         }
     }
 
-    static #sheet;
-    static #internal = new Set();
-    static #external = new Map();
+    static #sheet = null;
+    static #int = new Set();
+    static #ext = new Map();
 }
 
 export class StyledComponent extends Component {
@@ -218,7 +219,7 @@ export class StyledComponent extends Component {
      * Создать компонент и поместить его в переменную $root
      * @param {string} tag html tag элемента
      * @param {object} data параметры
-     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+     * @param {string|array} style стили в виде css строки
      * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
      * @param {boolean} ext внешний стиль - может быть удалён по id
      */
@@ -231,7 +232,7 @@ export class StyledComponent extends Component {
      * Создать компонент
      * @param {string} tag html tag элемента
      * @param {object} data параметры
-     * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+     * @param {string|array} style стили в виде css строки
      * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
      * @param {boolean} ext внешний стиль - может быть удалён по id
      */

package/README.md

@@ -11,31 +11,34 @@
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  */
-Component(tag, data = {});
+Component(tag, data = {}, svg = false);
 
 /**
  * Создать компонент
  * @param {string} tag html tag элемента
  * @param {object} data параметры
  * @returns {Node}
- * 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 стилей
- * children - массив DOM, Component, object, html string
- * child - DOM, Component, object, html string
+ * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
+ * children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся
+ * child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся
  * всё остальное будет добавлено как property
  */
 Component.make(tag, data = {});
+Component.makeSVG(tag, data = {});
 
 /**
  * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
@@ -53,6 +56,7 @@ Component.makeShadow(host, data = {}, sheet = null);
  * @returns {Node}
  */
 Component.config(el, data);
+Component.configSVG(el, data);
 
 /**
  * Создать массив компонентов из массива объектов конфигурации
@@ -60,13 +64,14 @@ Component.config(el, data);
  * @returns {array} of Elements
  */
 Component.makeArray(arr);
+Component.makeArraySVG(arr);
 ```
 
 ### Sheet
 ```js
 /**
  * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
- * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+ * @param {string|array} style стили в виде css
  * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
  * @param {boolean} ext внешний стиль - может быть удалён по id
  */
@@ -85,7 +90,7 @@ Sheet.removeStyle(id);
  * Создать компонент и поместить его в переменную $root
  * @param {string} tag html tag элемента
  * @param {object} data параметры
- * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+ * @param {string|array} style стили в виде css строки
  * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
  * @param {boolean} ext внешний стиль - может быть удалён по id
  */
@@ -95,7 +100,7 @@ StyledComponent(tag, data = {}, style = null, id = null, ext = false);
  * Создать компонент
  * @param {string} tag html tag элемента
  * @param {object} data параметры
- * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+ * @param {string|array} style стили в виде css строки
  * @param {string|this} id уникальный id стиля. При передаче this будет именем класса
  * @param {boolean} ext внешний стиль - может быть удалён по id
  */

package/example/script.js

@@ -16,12 +16,7 @@ class Button extends Component {
             }
         });
 
-        Sheet.addStyle([
-            '.btn', [
-                'background: red',
-                'color: white'
-            ]
-        ], this, true);   // this превратится в Button
+        Sheet.addStyle('.btn {background: red;color: white}', this, true);   // this превратится в Button
     }
 }
 
@@ -34,11 +29,7 @@ class Input extends StyledComponent {
                 value: text,
                 class: 'inp',
             },
-            [
-                '.inp', [
-                    'background: blue'
-                ]
-            ],
+            '.inp {background: blue}',
             'Input'
         );
     }
@@ -52,12 +43,7 @@ class Num {
                 value: text,
                 class: 'num',
             },
-            [
-                '.num', [
-                    'background: green',
-                    'margin-left: 10px',
-                ]
-            ],
+            '.num {background: green;margin-left: 10px}',
             'Num'
         );
     }

package/package.json

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