@alexgyver/component 1.3.8 → 1.3.10

package/Component.js

@@ -1,6 +1,6 @@
 //#region EL
 export class EL {
-    static ctx;
+    static context;
 
     /**
      * Создать компонент и поместить его в переменную $root
@@ -9,7 +9,7 @@ export class EL {
      * @param {Boolean} svg SVG
      */
     constructor(tag, data = {}, svg = false) {
-        EL.ctx = this;
+        EL.context = this;
         this.$root = EL.make(tag, data, svg);
     }
 
@@ -28,7 +28,7 @@ export class EL {
      * class {string | Array} - добавить в className
      * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
      * push {array} - добавить к указанному массиву
-     * var {string} - создаёт переменную $имя в указанном контексте
+     * var | $ {string} - создаёт переменную $имя в указанном контексте
      * events {object} - добавляет addEventListener'ы {event: e => {}}
      * children/children_r - массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
      * child/child_r - {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
@@ -59,8 +59,8 @@ export class EL {
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
 
         let ctx = data.context;
-        EL.ctx = (ctx === null) ? null : (ctx ? ctx : EL.ctx);
-        ctx = EL.ctx;
+        EL.context = (ctx === null) ? null : (ctx ? ctx : EL.context);
+        ctx = EL.context;
 
         let addChild = (obj) => {
             if (!obj) return;
@@ -87,7 +87,7 @@ export class EL {
             switch (key) {
                 case 'class': (Array.isArray(val) ? val : val.split(' ')).map(c => c && el.classList.add(c)); break;
                 case 'push': val.push(el); break;
-                case 'var': if (ctx) ctx['$' + val] = el; break;
+                case '$': 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': val.appendChild(el); break;
                 case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;

package/Component.min.js

@@ -1 +1 @@
-var e={d:(t,a)=>{for(var c in a)e.o(a,c)&&!e.o(t,c)&&Object.defineProperty(t,c,{enumerable:!0,get:a[c]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{EL:()=>a,LV:()=>r,cj:()=>s,t4:()=>n,uA:()=>c});class a{static ctx;constructor(e,t={},c=!1){a.ctx=this,this.$root=a.make(e,t,c)}static make(e,t={},c=!1){return e&&"object"==typeof t?t instanceof Node?t:("svg"==e&&(c=!0),a.config(c?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),t,c)):null}static config(e,t,c=!1){if(Array.isArray(e))return e.forEach((e=>a.config(e,t,c))),null;if(!(e instanceof Node)||"object"!=typeof t)return e;let n=t.context;a.ctx=null===n?null:n||a.ctx,n=a.ctx;let s=t=>{if(t)if(t instanceof Node)e.appendChild(t);else if(t instanceof a)e.appendChild(t.$root);else if("string"==typeof t)e.innerHTML+=t;else if("object"==typeof t){let n=a.make(t.tag??"div",t,c||"svg"==t.tag);n&&e.appendChild(n)}};for(const[c,r]of Object.entries(t)){switch(c){case"text":e.textContent=null==r?"":r+"";continue;case"html":e.innerHTML=null==r?"":r+"";continue;case"tag":case"context":case"get":case"also":continue}if(r)switch(c){case"class":(Array.isArray(r)?r:r.split(" ")).map((t=>t&&e.classList.add(t)));break;case"push":r.push(e);break;case"var":n&&(n["$"+r]=e);break;case"events":for(let t in r)e.addEventListener(t,r[t].bind(n));break;case"parent":r.appendChild(e);break;case"attrs":for(let t in r)e.setAttribute(t,r[t]);break;case"props":for(let t in r)e[t]=r[t];break;case"child_r":a.clear(e);case"child":s(r);break;case"children_r":a.clear(e);case"children":for(let e of r)s(e);break;case"style":if("string"==typeof r)e.style.cssText+=r+";";else for(let t in r)r[t]&&(e.style[t]=r[t]);break;default:e[c]=r}}return t.also&&n&&t.also.call(n,e),e}static clear(e){for(;e.firstChild;)e.removeChild(e.lastChild)}static makeArray(e,t=!1){return e&&Array.isArray(e)?e.map((e=>a.make(e.tag,e,t))):[]}static makeShadow(e,t={},c=null){if(!e||"object"!=typeof t)return null;let n=e instanceof Node?e:document.createElement(e);return n.attachShadow({mode:"open"}),a.config(n.shadowRoot,{context:t.context,children:[{tag:"style",textContent:c??""},t.child??{},...t.children??[]]}),delete t.children,delete t.child,a.config(n,t),n}}const c=a;class n{static make=(e,t)=>a.make(e,t,!0);static config=(e,t)=>a.config(e,t,!0);static makeArray=e=>a.makeArray(e,!0);static svg=(e={},t={})=>n._make("svg",e,t);static rect=(e,t,a,c,s,r,l={},o={})=>n._make("rect",{...l,x:e,y:t,width:a,height:c,rx:s,ry:r},o);static circle=(e,t,a,c={},s={})=>n._make("circle",{...c,cx:e,cy:t,r:a},s);static line=(e,t,a,c,s={},r={})=>n._make("line",{...s,x1:e,y1:t,x2:a,y2:c},r);static polyline=(e,t={},a={})=>n._make("polyline",{...t,points:e},a);static polygon=(e,t={},a={})=>n._make("polygon",{...t,points:e},a);static path=(e,t={},a={})=>n._make("path",{...t,d:e},a);static text=(e,t,a,c={},s={})=>n._make("text",{...c,x:t,y:a},{...s,text:e});static _make=(e,t={},a={})=>n.make(e,{attrs:{...t},...a})}class s{static addStyle(e,t,a=!1){if(e&&t&&("object"==typeof t&&(t=t.constructor.name),!s.#e.has(t)&&!s.#t.has(t)))if(a){let a=document.createElement("style");document.head.appendChild(a),a.textContent=e,s.#t.set(t,a)}else s.#a||(s.#a=document.head.appendChild(document.createElement("style"))),s.#a.textContent+=e+"\r\n",s.#e.add(t)}static removeStyle(e){"object"==typeof e&&(e=e.constructor.name),s.#t.has(e)&&(s.#t.get(e).remove(),s.#t.delete(e))}static#a=null;static#e=new Set;static#t=new Map}class r extends a{constructor(e,t={},a=null,c=null,n=!1){super(e,t),s.addStyle(a,c,n)}static make(e,t={},c=null,n=null,r=!1){return s.addStyle(c,n,r),a.make(e,t)}}const l=t.uA,o=t.EL,i=t.t4,d=t.cj,h=t.LV;export{l as Component,o as EL,i as SVG,d as Sheet,h as StyledComponent};
+var e={d:(t,a)=>{for(var c in a)e.o(a,c)&&!e.o(t,c)&&Object.defineProperty(t,c,{enumerable:!0,get:a[c]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{EL:()=>a,LV:()=>o,cj:()=>s,t4:()=>n,uA:()=>c});class a{static context;constructor(e,t={},c=!1){a.context=this,this.$root=a.make(e,t,c)}static make(e,t={},c=!1){return e&&"object"==typeof t?t instanceof Node?t:("svg"==e&&(c=!0),a.config(c?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),t,c)):null}static config(e,t,c=!1){if(Array.isArray(e))return e.forEach(e=>a.config(e,t,c)),null;if(!(e instanceof Node)||"object"!=typeof t)return e;let n=t.context;a.context=null===n?null:n||a.context,n=a.context;let s=t=>{if(t)if(t instanceof Node)e.appendChild(t);else if(t instanceof a)e.appendChild(t.$root);else if("string"==typeof t)e.innerHTML+=t;else if("object"==typeof t){let n=a.make(t.tag??"div",t,c||"svg"==t.tag);n&&e.appendChild(n)}};for(const[c,o]of Object.entries(t)){switch(c){case"text":e.textContent=null==o?"":o+"";continue;case"html":e.innerHTML=null==o?"":o+"";continue;case"tag":case"context":case"get":case"also":continue}if(o)switch(c){case"class":(Array.isArray(o)?o:o.split(" ")).map(t=>t&&e.classList.add(t));break;case"push":o.push(e);break;case"$":case"var":n&&(n["$"+o]=e);break;case"events":for(let t in o)e.addEventListener(t,o[t].bind(n));break;case"parent":o.appendChild(e);break;case"attrs":for(let t in o)e.setAttribute(t,o[t]);break;case"props":for(let t in o)e[t]=o[t];break;case"child_r":a.clear(e);case"child":s(o);break;case"children_r":a.clear(e);case"children":for(let e of o)s(e);break;case"style":if("string"==typeof o)e.style.cssText+=o+";";else for(let t in o)o[t]&&(e.style[t]=o[t]);break;default:e[c]=o}}return t.also&&n&&t.also.call(n,e),e}static clear(e){for(;e.firstChild;)e.removeChild(e.lastChild)}static makeArray(e,t=!1){return e&&Array.isArray(e)?e.map(e=>a.make(e.tag,e,t)):[]}static makeShadow(e,t={},c=null){if(!e||"object"!=typeof t)return null;let n=e instanceof Node?e:document.createElement(e);return n.attachShadow({mode:"open"}),a.config(n.shadowRoot,{context:t.context,children:[{tag:"style",textContent:c??""},t.child??{},...t.children??[]]}),delete t.children,delete t.child,a.config(n,t),n}}const c=a;class n{static make=(e,t)=>a.make(e,t,!0);static config=(e,t)=>a.config(e,t,!0);static makeArray=e=>a.makeArray(e,!0);static svg=(e={},t={})=>n._make("svg",e,t);static rect=(e,t,a,c,s,o,r={},l={})=>n._make("rect",{...r,x:e,y:t,width:a,height:c,rx:s,ry:o},l);static circle=(e,t,a,c={},s={})=>n._make("circle",{...c,cx:e,cy:t,r:a},s);static line=(e,t,a,c,s={},o={})=>n._make("line",{...s,x1:e,y1:t,x2:a,y2:c},o);static polyline=(e,t={},a={})=>n._make("polyline",{...t,points:e},a);static polygon=(e,t={},a={})=>n._make("polygon",{...t,points:e},a);static path=(e,t={},a={})=>n._make("path",{...t,d:e},a);static text=(e,t,a,c={},s={})=>n._make("text",{...c,x:t,y:a},{...s,text:e});static _make=(e,t={},a={})=>n.make(e,{attrs:{...t},...a})}class s{static addStyle(e,t,a=!1){if(e&&t&&("object"==typeof t&&(t=t.constructor.name),!s.#e.has(t)&&!s.#t.has(t)))if(a){let a=document.createElement("style");document.head.appendChild(a),a.textContent=e,s.#t.set(t,a)}else s.#a||(s.#a=document.head.appendChild(document.createElement("style"))),s.#a.textContent+=e+"\r\n",s.#e.add(t)}static removeStyle(e){"object"==typeof e&&(e=e.constructor.name),s.#t.has(e)&&(s.#t.get(e).remove(),s.#t.delete(e))}static#a=null;static#e=new Set;static#t=new Map}class o extends a{constructor(e,t={},a=null,c=null,n=!1){super(e,t),s.addStyle(a,c,n)}static make(e,t={},c=null,n=null,o=!1){return s.addStyle(c,n,o),a.make(e,t)}}const r=t.uA,l=t.EL,i=t.t4,d=t.cj,h=t.LV;export{r as Component,l as EL,i as SVG,d as Sheet,h as StyledComponent};

package/README.md

@@ -26,7 +26,7 @@ EL(tag, data = {}, svg = false);
  * class {string | Array} - добавить в className
  * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
  * push {array} - добавить к указанному массиву
- * var {string} - создаёт переменную $имя в указанном контексте
+ * var | $ {string} - создаёт переменную $имя в указанном контексте
  * events {object} - добавляет addEventListener'ы {event: e => {}}
  * children/children_r - массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
  * child/child_r - {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
@@ -143,14 +143,14 @@ EL.make('div', {
 });
 ```
 
-Гораздо интереснее использовать в классе и передавать контекст. Параметр `var` создаст переменную с элементом с указанным именем + префикс `$`:
+Гораздо интереснее использовать в классе и передавать контекст. Параметр `$` создаст переменную с элементом с указанным именем + префикс `$`:
 
 ```js
 class Button {
     constructor(text) {
         EL.make('button', {
             context: this,
-            var: 'button',
+            $: 'button',
             text: text,
             class: 'btn',
             events: {

package/package.json

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