@alexgyver/component 1.2.8 → 1.2.9

package/Component.js

@@ -16,7 +16,6 @@ export class Component {
      * @returns {Node}
      * @params
      * tag {string} - тег html элемента (для указания в children например)
-     * svg {boolean} - создавать как SVG элемент
      * context {object} - контекст для параметра 'var' и вызовов 'also'
      * text {string} - добавить в textContent
      * html {string} - добавить в innerHTML
@@ -24,7 +23,6 @@ export class Component {
      * props {object} - добавить свойства
      * class {string} - добавить в className
      * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
-     * export {array} - положить в 0 ячейку указанного массива
      * push {array} - добавить к массиву
      * var {string} - создаёт переменную $имя в указанном контексте
      * events {object} - добавляет addEventListener'ы {event: handler}
@@ -32,7 +30,7 @@ export class Component {
      * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
      * children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
      * child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
-     * onrender - функция вызовется с компонентом когда он отрендерится
+     * get - функция, в которую будет отправлен элемент
      * всё остальное будет добавлено как property
      */
     static make(tag, data = {}, svg = false) {
@@ -59,16 +57,15 @@ export class Component {
         }
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
 
-        const context = data.context;
-        if ('svg' in data) svg = data.svg;
+        const ctx = 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 ?? 'div', obj, svg || ('svg' in obj) || obj.tag == 'svg');
+                if (!obj.context) obj.context = ctx;
+                let cmp = Component.make(obj.tag ?? 'div', obj, svg || obj.tag == 'svg');
                 if (cmp) el.appendChild(cmp);
             } else if (typeof obj === 'string') {
                 el.innerHTML += obj;
@@ -80,24 +77,21 @@ export class Component {
             switch (key) {
                 case 'tag':
                 case 'context':
-                case 'svg':
+                case 'get':
                     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 'also': if (ctx) val.call(ctx, 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 'var': if (ctx) ctx['$' + val] = el; break;
+                case 'events': for (let ev in val) el.addEventListener(ev, val[ev].bind(ctx)); break;
                 case 'parent': if (val) val.appendChild(el); break;
-                case 'attrs': for (let attr in val) svg ? el.setAttributeNS(null, attr, val[attr]) : el.setAttribute(attr, val[attr]); 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_r': el.replaceChildren();
+                case 'child_r': case 'children_r': el.replaceChildren();
                 case 'child': addChild(val); break;
-                case 'children_r': el.replaceChildren();
                 case 'children': for (const obj of val) addChild(obj); break;
-                case 'onrender': waitRender(el, val); break;
                 case 'style':
                     if (typeof val === 'string') el.style.cssText += (val + ';');
                     else for (let st in val) el.style[st] = val[st];
@@ -105,6 +99,7 @@ export class Component {
                 default: el[key] = val; break;
             }
         }
+        if (data.get && ctx) data.get.call(ctx, el);
         return el;
     }
 
@@ -237,7 +232,7 @@ export async function waitRender(elm, cb = null, ctx = window) {
         }
         const obs = new MutationObserver((mut) => {
             if (mut[0].addedNodes.length === 0) return;
-            if (Array.prototype.indexOf.call(mut[0].addedNodes, elm) === -1) return;
+            if (Array.prototype.indexOf.call(mut[0].addedNodes, e) === -1) return;
             obs.disconnect();
             if (cb) cb(elm);
             res(elm);

package/README.md

@@ -19,7 +19,6 @@ Component(tag, data = {}, svg = false);
  * @param {object} data параметры
  * @returns {Node}
  * tag {string} - тег html элемента (для указания в children например)
- * svg {boolean} - создавать как SVG элемент
  * context {object} - контекст для параметра 'var' и вызовов 'also'
  * text {string} - добавить в textContent
  * html {string} - добавить в innerHTML
@@ -27,7 +26,6 @@ Component(tag, data = {}, svg = false);
  * props {object} - добавить свойства
  * class {string} - добавить в className
  * also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
- * export {array} - положить в 0 ячейку указанного массива
  * push {array} - добавить к массиву
  * var {string} - создаёт переменную $имя в указанном контексте
  * events {object} - добавляет addEventListener'ы {event: handler}
@@ -35,7 +33,7 @@ Component(tag, data = {}, svg = false);
  * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
  * children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
  * child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся. Без тега tag будет div
- * onrender - функция вызовется с компонентом когда он отрендерится
+ * get - функция, в которую будет отправлен элемент
  * всё остальное будет добавлено как property
  */
 Component.make(tag, data = {});

package/package.json

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