@alexgyver/component 1.0.24 → 1.0.26

package/component.js

@@ -24,6 +24,7 @@ export class Component {
         parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
         style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
         children - массив DOM, Component, object, html string
+        child - DOM, Component, object, html string
         всё остальное будет добавлено как property
    */
     /**
@@ -38,6 +39,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 элемент
@@ -45,9 +76,24 @@ 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) => {
+            if (!obj) return;
+            if (obj instanceof Node) el.appendChild(obj);
+            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);
+                if (cmp) el.appendChild(cmp);
+            } else if (typeof obj === 'string') {
+                el.innerHTML += obj;
+            }
+        }
+
         for (const [key, val] of Object.entries(data)) {
+            if (!val) continue;
             switch (key) {
                 case 'tag':
                 case 'context':
@@ -59,27 +105,15 @@ 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;
+                case 'children': for (const obj of val) addChild(obj); break;
                 case 'style':
                     if (typeof val === 'string') el.style.cssText += (val + ';');
                     else for (let st in val) el.style[st] = val[st];
                     break;
-                case 'children':
-                    for (const obj of val) {
-                        if (!obj) continue;
-                        if (obj instanceof Node) el.appendChild(obj);
-                        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);
-                            if (cmp) el.appendChild(cmp);
-                        } else if (typeof obj === 'string') {
-                            el.innerHTML += obj;
-                        }
-                    }
-                    break;
                 default: el[key] = val; break;
             }
         }
@@ -92,6 +126,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/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,6 +1,6 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "Simple HTML element builder",
   "main": "./component.js",
   "module": "./component.js",