@alexgyver/component 1.0.25 → 1.0.27

package/{component.js → Component.js}

@@ -9,29 +9,28 @@ export class Component {
         this.$root = Component.make(tag, data);
     }
 
-    /*
-        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 = {}) {
         if (!tag || typeof data !== 'object') return null;
@@ -39,6 +38,36 @@ export class Component {
         return Component.config(document.createElement(tag), data);
     }
 
+    /**
+     * Создать теневой компонент от указанного 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 элемент
@@ -46,7 +75,7 @@ export class Component {
      * @returns {Node}
      */
     static config(el, data) {
-        if (!(el instanceof Node)) return el;
+        if (!(el instanceof Node) || (typeof data !== 'object')) return el;
         const context = data.context;
 
         let addChild = (obj) => {
@@ -63,6 +92,7 @@ export class Component {
         }
 
         for (const [key, val] of Object.entries(data)) {
+            if (!val) continue;
             switch (key) {
                 case 'tag':
                 case 'context':
@@ -74,7 +104,7 @@ export class Component {
                 case 'export': val[0] = 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 Element) val.append(el); 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 'props': for (let prop in val) el[prop] = val[prop]; break;
                 case 'child': addChild(val); break;
@@ -95,6 +125,7 @@ export class Component {
      * @returns {array} of Elements
      */
     static makeArray(arr) {
+        if (!arr || !Array.isArray(arr)) return [];
         return arr.map(x => Component.make(x.tag, x));
     }
 }

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/example/script.js

@@ -87,6 +87,30 @@ function Container(children) {
         });
 }
 
+class ShadowComponent {
+    constructor() {
+        Component.makeShadow('div', {
+            context: this,
+            parent: document.body,
+            events: {
+                click: () => this.$div.dispatchEvent(new Event('kek', { bubbles: true, composed: true })),
+            },
+            children: [
+                {
+                    tag: 'div',
+                    text: 'Hello!',
+                    class: 'myclass',
+                    var: 'div',
+                }
+            ]
+        }, '.myclass{color:red;}'
+        );
+
+    }
+}
+
+document.addEventListener('kek', () => console.log('kek!'));
+
 document.addEventListener("DOMContentLoaded", () => {
     Component.make('h1', {
         text: 'Hello!',

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "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"