@alexgyver/component 1.0.26 → 1.1.0

package/{component.js → Component.js}

@@ -4,39 +4,42 @@ export class Component {
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      */
-    constructor(tag, data = {}) {
+    constructor(tag, data = {}, ns = false) {
         data.context = this;
-        this.$root = Component.make(tag, data);
+        this.$root = Component.make(tag, data, ns);
     }
 
-    /*
-        tag {string} тег html элемента (для указания в children например)
-        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}
-        parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
-        style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
-        children - массив DOM, Component, object, html string
-        child - DOM, Component, object, html string
-        всё остальное будет добавлено как property
-   */
     /**
      * Создать компонент
      * @param {string} tag html tag элемента
      * @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
+     * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
+     * export {array} - положить в 0 ячейку указанного массива
+     * 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
+     * всё остальное будет добавлено как property
      */
-    static make(tag, data = {}) {
+    static make(tag, data = {}, ns = false) {
         if (!tag || typeof data !== 'object') return null;
         if (data instanceof Node) return data;
-        return Component.config(document.createElement(tag), data);
+        return Component.config(ns ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, ns);
+    }
+
+    static makeNS(tag, data = {}) {
+        return Component.make(tag, data, true);
     }
 
     /**
@@ -73,9 +76,10 @@ export class Component {
      * Настроить элемент
      * @param {Node} el элемент
      * @param {object} data параметры
+     * @param {object} ns NS
      * @returns {Node}
      */
-    static config(el, data) {
+    static config(el, data, ns = false) {
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
         const context = data.context;
 
@@ -85,7 +89,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);
+                let cmp = Component.make(obj.tag, obj, ns);
                 if (cmp) el.appendChild(cmp);
             } else if (typeof obj === 'string') {
                 el.innerHTML += obj;
@@ -120,14 +124,22 @@ export class Component {
         return el;
     }
 
+    static configNS(el, data) {
+        return Component.config(el, data, true);
+    }
+
     /**
      * Создать массив компонентов из массива объектов конфигурации
      * @param {array} arr массив объектов конфигурации
      * @returns {array} of Elements
      */
-    static makeArray(arr) {
+    static makeArray(arr, ns = false) {
         if (!arr || !Array.isArray(arr)) return [];
-        return arr.map(x => Component.make(x.tag, x));
+        return arr.map(x => Component.make(x.tag, x, ns));
+    }
+
+    static makeArrayNS(arr) {
+        return Component.makeArray(arr, true);
     }
 }
 

package/README.md

@@ -1,3 +1,150 @@
 # Component.js
- 
-> npm i @alexgyver/component
+Библиотека для создания и настройки DOM элементов как JS объектов
+
+> npm i @alexgyver/component
+
+## Дока
+### Component
+```js
+/**
+ * Создать компонент и поместить его в переменную $root
+ * @param {string} tag html tag элемента
+ * @param {object} data параметры
+ */
+Component(tag, data = {});
+
+/**
+ * Создать компонент
+ * @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
+ * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
+ * export {array} - положить в 0 ячейку указанного массива
+ * 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
+ * всё остальное будет добавлено как 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} el элемент
+ * @param {object} data параметры
+ * @returns {Node}
+ */
+Component.config(el, data);
+
+/**
+ * Создать массив компонентов из массива объектов конфигурации
+ * @param {array} arr массив объектов конфигурации
+ * @returns {array} of Elements
+ */
+Component.makeArray(arr);
+```
+
+### Sheet
+```js
+/**
+ * Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
+ * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+ * @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 строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+ * @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 строки или [ 'class', ['color: red', 'padding: 0'], ... ]
+ * @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; // элемент кнопки
+```

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "Simple HTML element builder",
-  "main": "./component.js",
-  "module": "./component.js",
-  "types": "./component.js",
+  "main": "./Component.js",
+  "module": "./Component.js",
+  "types": "./Component.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/GyverLibs/Component.js.git"