1- //#region Component
2- export class Component {
1+ //#region EL
2+ export class EL {
33 static ctx ;
44
55 /**
@@ -9,8 +9,8 @@ export class Component {
99 * @param {Boolean } svg SVG
1010 */
1111 constructor ( tag , data = { } , svg = false ) {
12- Component . ctx = this ;
13- this . $root = Component . make ( tag , data , svg ) ;
12+ EL . ctx = this ;
13+ this . $root = EL . make ( tag , data , svg ) ;
1414 }
1515
1616 /**
@@ -30,8 +30,8 @@ export class Component {
3030 * push {array} - добавить к указанному массиву
3131 * var {string} - создаёт переменную $имя в указанном контексте
3232 * events {object} - добавляет addEventListener'ы {event: e => {}}
33- * children/children_r - массив {DOM, Component , object, html string}. _r - заменить имеющиеся. Без тега tag будет div
34- * child/child_r - {DOM, Component , object, html string}. _r - заменить имеющиеся. Без тега tag будет div
33+ * children/children_r - массив {DOM, EL , object, html string}. _r - заменить имеющиеся. Без тега tag будет div
34+ * child/child_r - {DOM, EL , object, html string}. _r - заменить имеющиеся. Без тега tag будет div
3535 * attrs {object} - добавить аттрибуты (через setAttribute)
3636 * props {object} - добавить свойства (как el[prop])
3737 * also {function} - вызвать с текущим компонентом: also(el) { console.log(el); }
@@ -41,7 +41,7 @@ export class Component {
4141 if ( ! tag || typeof data !== 'object' ) return null ;
4242 if ( data instanceof Node ) return data ;
4343 if ( tag == 'svg' ) svg = true ;
44- return Component . config ( svg ? document . createElementNS ( "http://www.w3.org/2000/svg" , tag ) : document . createElement ( tag ) , data , svg ) ;
44+ return EL . config ( svg ? document . createElementNS ( "http://www.w3.org/2000/svg" , tag ) : document . createElement ( tag ) , data , svg ) ;
4545 }
4646
4747 /**
@@ -53,22 +53,22 @@ export class Component {
5353 */
5454 static config ( el , data , svg = false ) {
5555 if ( Array . isArray ( el ) ) {
56- el . forEach ( e => Component . config ( e , data , svg ) ) ;
56+ el . forEach ( e => EL . config ( e , data , svg ) ) ;
5757 return null ;
5858 }
5959 if ( ! ( el instanceof Node ) || ( typeof data !== 'object' ) ) return el ;
6060
6161 let ctx = data . context ;
62- Component . ctx = ( ctx === null ) ? null : ( ctx ? ctx : Component . ctx ) ;
63- ctx = Component . ctx ;
62+ EL . ctx = ( ctx === null ) ? null : ( ctx ? ctx : EL . ctx ) ;
63+ ctx = EL . ctx ;
6464
6565 let addChild = ( obj ) => {
6666 if ( ! obj ) return ;
6767 if ( obj instanceof Node ) el . appendChild ( obj ) ;
68- else if ( obj instanceof Component ) el . appendChild ( obj . $root ) ;
68+ else if ( obj instanceof EL ) el . appendChild ( obj . $root ) ;
6969 else if ( typeof obj === 'string' ) el . innerHTML += obj ;
7070 else if ( typeof obj === 'object' ) {
71- let cmp = Component . make ( obj . tag ?? 'div' , obj , svg || obj . tag == 'svg' ) ;
71+ let cmp = EL . make ( obj . tag ?? 'div' , obj , svg || obj . tag == 'svg' ) ;
7272 if ( cmp ) el . appendChild ( cmp ) ;
7373 }
7474 }
@@ -113,7 +113,7 @@ export class Component {
113113 */
114114 static makeArray ( arr , svg = false ) {
115115 if ( ! arr || ! Array . isArray ( arr ) ) return [ ] ;
116- return arr . map ( x => Component . make ( x . tag , x , svg ) ) ;
116+ return arr . map ( x => EL . make ( x . tag , x , svg ) ) ;
117117 }
118118
119119 /**
@@ -129,7 +129,7 @@ export class Component {
129129 let $host = ( host instanceof Node ) ? host : document . createElement ( host ) ;
130130 $host . attachShadow ( { mode : 'open' } ) ;
131131
132- Component . config ( $host . shadowRoot , {
132+ EL . config ( $host . shadowRoot , {
133133 context : data . context ,
134134 children : [
135135 {
@@ -142,16 +142,19 @@ export class Component {
142142 } ) ;
143143 delete data . children ;
144144 delete data . child ;
145- Component . config ( $host , data ) ;
145+ EL . config ( $host , data ) ;
146146 return $host ;
147147 }
148148}
149149
150+ // legacy
151+ export const Component = EL ;
152+
150153//#region SVG
151154export class SVG {
152- static make = ( tag , data ) => Component . make ( tag , data , true ) ;
153- static config = ( el , data ) => Component . config ( el , data , true ) ;
154- static makeArray = ( arr ) => Component . makeArray ( arr , true ) ;
155+ static make = ( tag , data ) => EL . make ( tag , data , true ) ;
156+ static config = ( el , data ) => EL . config ( el , data , true ) ;
157+ static makeArray = ( arr ) => EL . makeArray ( arr , true ) ;
155158
156159 static svg = ( attrs = { } , props = { } ) => SVG . _make ( 'svg' , attrs , props ) ;
157160 static rect = ( x , y , w , h , rx , ry , attrs = { } , props = { } ) => SVG . _make ( 'rect' , { ...attrs , x : x , y : y , width : w , height : h , rx : rx , ry : ry } , props ) ;
@@ -209,7 +212,7 @@ export class Sheet {
209212}
210213
211214//#region StyledComponent
212- export class StyledComponent extends Component {
215+ export class StyledComponent extends EL {
213216 /**
214217 * Создать компонент и поместить его в переменную $root
215218 * @param {string } tag html tag элемента
@@ -233,6 +236,6 @@ export class StyledComponent extends Component {
233236 */
234237 static make ( tag , data = { } , style = null , id = null , ext = false ) {
235238 Sheet . addStyle ( style , id , ext ) ;
236- return Component . make ( tag , data ) ;
239+ return EL . make ( tag , data ) ;
237240 }
238241}
0 commit comments