@alexgyver/component 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/component.js +42 -22
  2. package/package.json +19 -19
package/component.js CHANGED
@@ -1,6 +1,9 @@
1
1
  export class Sheet {
2
2
  /**
3
3
  * @abstract Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
4
+ * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
5
+ * @param {string} id уникальный id стиля
6
+ * @param {boolean} ext внешний стиль - может быть удалён по id
4
7
  */
5
8
  static addStyle(style, id, ext = false) {
6
9
  if (!style || !id) return;
@@ -28,7 +31,9 @@ export class Sheet {
28
31
  sheet.sheet.insertRule(style);
29
32
  Sheet.#external.set(id, sheet);
30
33
  } else {
31
- if (!Sheet.#sheet) Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
34
+ if (!Sheet.#sheet) {
35
+ Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
36
+ }
32
37
  Sheet.#sheet.insertRule(style);
33
38
  Sheet.#internal.add(id);
34
39
  }
@@ -37,6 +42,7 @@ export class Sheet {
37
42
 
38
43
  /**
39
44
  * @abstract Удалить ext стиль по его id
45
+ * @param {string} id id стиля
40
46
  */
41
47
  static removeStyle(id) {
42
48
  if (Sheet.#external.has(id)) {
@@ -65,15 +71,20 @@ export class Component {
65
71
  }
66
72
 
67
73
  /*
68
- context - контекст для параметра 'make' и вызовов 'also'
69
- also - вызвать с текущим компонентом: { ... , also(el) { console.log('123'); }, }
70
- makevar - создаёт переменную $name в указанном контексте
71
- style - object: { padding: '0px', ... }
72
- events - object
73
- children - DOM, Component или параметры как object
74
+ tag {string} тег html элемента (для указания в children например)
75
+ context {object} контекст для параметра 'var' и вызовов 'also'
76
+ text {string} добавить в textContent
77
+ html {string} добавить в innerHTML
78
+ class {string} добавить в className
79
+ also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
80
+ var {string} создаёт переменную $имя в указанном контексте
81
+ events {object} добавляет addEventListener'ы {event: handler}
82
+ append - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
83
+ style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
84
+ children - массив DOM, Component, object, html string
74
85
  */
75
86
  /**
76
- * @abstract Создать компонент и поместить его в переменную $root
87
+ * @abstract Создать компонент
77
88
  * @param {string} tag html tag элемента
78
89
  * @param {object} data параметры
79
90
  * @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
@@ -83,32 +94,41 @@ export class Component {
83
94
  static make(tag, data = {}, style = null, id = null, ext = false) {
84
95
  Sheet.addStyle(style, id, ext);
85
96
  if (!tag || typeof data !== 'object') return null;
97
+ if (data instanceof Node) return data;
86
98
 
87
99
  const context = data.context;
88
100
  const $el = document.createElement(tag);
89
101
 
90
- for (const [key, value] of Object.entries(data)) {
102
+ for (const [key, val] of Object.entries(data)) {
91
103
  switch (key) {
92
- case 'context': case 'tag': continue;
93
- case 'text': $el.textContent = value; break;
94
- case 'html': $el.innerHTML = value; break;
95
- case 'class': $el.className = value; break;
96
- case 'also': if (context) value.call(context, $el); break;
97
- case 'makevar': if (context) context['$' + value] = $el; break;
98
- case 'style': for (const [skey, sval] of Object.entries(value)) $el.style[skey] = sval; break;
99
- case 'events': for (const [ev, handler] of Object.entries(value)) $el.addEventListener(ev, handler.bind(context)); break;
104
+ case 'tag':
105
+ case 'context':
106
+ continue;
107
+ case 'text': $el.textContent = val; break;
108
+ case 'html': $el.innerHTML = val; break;
109
+ case 'class': $el.className = val; break;
110
+ case 'also': if (context) val.call(context, $el); break;
111
+ case 'var': if (context) context['$' + val] = $el; break;
112
+ case 'events': for (const [ev, handler] of Object.entries(val)) $el.addEventListener(ev, handler.bind(context)); break;
113
+ case 'append': if (val instanceof Element) val.append($el); break;
114
+ case 'style':
115
+ if (typeof val === 'string') $el.style = val + ';';
116
+ else for (const [skey, sval] of Object.entries(val)) $el.style[skey] = sval;
117
+ break;
100
118
  case 'children':
101
- for (const obj of value) {
102
- if (obj instanceof Element || obj instanceof HTMLDocument) $el.appendChild(obj);
119
+ for (const obj of val) {
120
+ if (obj instanceof Node) $el.appendChild(obj);
103
121
  else if (obj instanceof Component) $el.appendChild(obj.$root);
104
122
  else if (typeof obj === 'object') {
105
123
  if (!obj.context) obj.context = context;
106
- let comp = Component.make(obj.tag, obj);
107
- if (comp) $el.appendChild(comp);
124
+ let cmp = Component.make(obj.tag, obj);
125
+ if (cmp) $el.appendChild(cmp);
126
+ } else if (typeof obj === 'string') {
127
+ $el.innerHTML += obj;
108
128
  }
109
129
  }
110
130
  break;
111
- default: $el[key] = value; break;
131
+ default: $el[key] = val; break;
112
132
  }
113
133
  }
114
134
  return $el;
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
- {
2
- "name": "@alexgyver/component",
3
- "version": "1.0.1",
4
- "description": "Simple HTML element builder",
5
- "main": "component.js",
6
- "type": "module",
7
- "scripts": {
8
- "test": "echo \"Error: no test specified\" && exit 1"
9
- },
10
- "repository": {
11
- "type": "git",
12
- "url": "git+https://github.com/GyverLibs/Component.js.git"
13
- },
14
- "author": "AlexGyver <alex@alexgyver.ru>",
15
- "license": "MIT",
16
- "bugs": {
17
- "url": "https://github.com/GyverLibs/Component.js/issues"
18
- },
19
- "homepage": "https://github.com/GyverLibs/Component.js#readme"
1
+ {
2
+ "name": "@alexgyver/component",
3
+ "version": "1.0.3",
4
+ "description": "Simple HTML element builder",
5
+ "main": "component.js",
6
+ "type": "module",
7
+ "scripts": {
8
+ "test": "echo \"Error: no test specified\" && exit 1"
9
+ },
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/GyverLibs/Component.js.git"
13
+ },
14
+ "author": "AlexGyver <alex@alexgyver.ru>",
15
+ "license": "MIT",
16
+ "bugs": {
17
+ "url": "https://github.com/GyverLibs/Component.js/issues"
18
+ },
19
+ "homepage": "https://github.com/GyverLibs/Component.js#readme"
20
20
  }