10000 upd · GyverLibs/Component.js@e841706 · GitHub
[go: up one dir, main page]
Skip to content

Commit e841706

Browse files
GyverLibsGyverLibs
committed
upd
1 parent 3f8ce0e commit e841706

File tree

4 files changed

+97
-111
lines changed

4 files changed

+97
-111
lines changed

‎Component.js

Lines changed: 64 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,23 @@ export class Component {
1515
* @param {object} data параметры
1616
* @returns {Node}
1717
* @params
18-
* tag {string} тег html элемента (для указания в children например)
19-
* context {object} контекст для параметра 'var' и вызовов 'also'
20-
* text {string} добавить в textContent
21-
* html {string} добавить в innerHTML
22-
* attrs {object} добавить аттрибуты
23-
* props {object} добавить свойства
24-
* class {string} добавить в className
18+
* tag {string} - тег html элемента (для указания в children например)
19+
* svg {boolean} - создавать как SVG элемент
20+
* context {object} - контекст для параметра 'var' и вызовов 'also'
21+
* text {string} - добавить в textContent
22+
* html {string} - добавить в innerHTML
23+
* attrs {object} - добавить аттрибуты
24+
* props {object} - добавить свойства
25+
* class {string} - добавить в className
2526
* also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
2627
* export {array} - положить в 0 ячейку указанного массива
27-
* var {string} создаёт переменную $имя в указанном контексте
28-
* events {object} добавляет addEventListener'ы {event: handler}
28+
* push {array} - добавить к массиву
29+
* var {string} - создаёт переменную $имя в указанном контексте
30+
* events {object} - добавляет addEventListener'ы {event: handler}
2931
* parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
30-
* style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
31-
* children - массив DOM, Component, object, html string
32-
* child - DOM, Component, object, html string
32+
* style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
33+
* children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся
34+
* child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся
3335
* всё остальное будет добавлено как property
3436
*/
3537
static make(tag, data = {}, svg = false) {
@@ -42,36 +44,6 @@ export class Component {
4244
return Component.make(tag, data, true);
4345
}
4446

45-
/**
46-
* Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
47-
* @param {string|Node} host html tag теневого элемента или Node
48-
* @param {object} data параметры внешнего элемента
49-
* @param {string} sheet css стили
50-
* @returns {Node} host
51-
*/
52-
static makeShadow(host, data = {}, sheet = null) {
53-
if (!host || typeof data !== 'object') return null;
54-
55-
let $host = (host instanceof Node) ? host : document.createElement(host);
56-
$host.attachShadow({ mode: 'open' });
57-
58-
Component.config($host.shadowRoot, {
59-
context: data.context,
60-
children: [
61-
{
62-
tag: 'style',
63-
textContent: sheet ?? '',
64-
},
65-
data.child ?? {},
66-
...(data.children ?? []),
67-
]
68-
});
69-
delete data.children;
70-
delete data.child;
71-
Component.config($host, data);
72-
return $host;
73-
}
74-
7547
/**
7648
* Настроить элемент
7749
* @param {Node} el элемент
@@ -109,15 +81,16 @@ export class Component {
10981
case 'context':
11082
case 'svg':
11183
continue;
112-
case 'text': el.textContent = val; break;
84+
case 'text': el.textContent = val + ''; break;
11385
case 'html': el.innerHTML = val; break;
11486
case 'class': el.classList.add(...val.split(' ')); break;
11587
case 'also': if (context) val.call(context, el); break;
11688
case 'export': val[0] = el; break;
89+
case 'push': val.push(el); break;
11790
case 'var': if (context) context['$' + val] = el; break;
11891
case 'events': for (let ev in val) if (val[ev]) el.addEventListener(ev, val[ev].bind(context)); break;
11992
case 'parent': if (val instanceof Node || val instanceof DocumentFragment) val.append(el); break;
120-
case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
93+
case 'attrs': for (let attr in val) svg ? el.setAttributeNS(null, attr, val[attr]) : el.setAttribute(attr, val[attr]); break;
12194
case 'props': for (let prop in val) el[prop] = val[prop]; break;
12295
case 'child_r': el.replaceChildren();
12396
case 'child': addChild(val); break;
@@ -150,72 +123,86 @@ export class Component {
150123
static makeArraySVG(arr) {
151124
return Component.makeArray(arr, true);
152125
}
126+
127+
/**
128+
* Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
129+
* @param {string|Node} host html tag теневого элемента или Node
130+
* @param {object} data параметры внешнего элемента
131+
* @param {string} sheet css стили
132+
* @returns {Node} host
133+
*/
134+
static makeShadow(host, data = {}, sheet = null) {
135+
if (!host || typeof data !== 'object') return null;
136+
137+
let $host = (host instanceof Node) ? host : document.createElement(host);
138+
$host.attachShadow({ mode: 'open' });
139+
140+
Component.config($host.shadowRoot, {
141+
context: data.context,
142+
children: [
143+
{
144+
tag: 'style',
145+
textContent: sheet ?? '',
146+
},
147+
data.child ?? {},
148+
...(data.children ?? []),
149+
]
150+
});
151+
delete data.children;
152+
delete data.child;
153+
Component.config($host, data);
154+
return $host;
155+
}
153156
}
154157

155158
export class Sheet {
156159
/**
157160
* Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
158-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
161+
* @param {string|array} style стили в виде css строки
159162
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
160163
* @param {boolean} ext внешний стиль - может быть удалён по id
161164
*/
162165
static addStyle(style, id, ext = false) {
163166
if (!style || !id) return;
164167
if (typeof id === 'object') id = id.constructor.name;
165168

166-
if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
167-
if (typeof style === 'object') {
168-
let str = '';
169-
let f = 0;
170-
for (const v of style) {
171-
if (f = !f) {
172-
str += v;
173-
} else {
174-
str += '{';
175-
for (const rule of v) str += rule + ';';
176-
str += '}';
177-
}
178-
}
179-
style = str;
180-
}
181-
169+
if (!Sheet.#int.has(id) && !Sheet.#ext.has(id)) {
182170
if (ext) {
183171
let sheet = document.createElement('style');
184172
document.head.appendChild(sheet);
185-
sheet.sheet.insertRule(style);
186-
Sheet.#external.set(id, sheet);
173+
sheet.textContent = style;
174+
Sheet.#ext.set(id, sheet);
187175
} else {
188-
if (!Sheet.#sheet) {
189-
Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
190-
}
191-
Sheet.#sheet.insertRule(style);
192-
Sheet.#internal.add(id);
176+
if (!Sheet.#sheet) Sheet.#sheet = document.head.appendChild(document.createElement('style'));
177+
Sheet.#sheet.textContent += style + '\r\n';
178+
Sheet.#int.add(id);
193179
}
194180
}
195181
}
196182

197183
/**
198184
* Удалить ext стиль по его id
199-
* @param {string} id id стиля
185+
* @param {string} id id стиля. При передаче this будет именем класса
200186
*/
201187
static removeStyle(id) {
202-
if (Sheet.#external.has(id)) {
203-
Sheet.#external.get(id).remove();
204-
Sheet.#external.delete(id);
188+
if (typeof id === 'object') id = id.constructor.name;
189+
if (Sheet.#ext.has(id)) {
190+
Sheet.#ext.get(id).remove();
191+
Sheet.#ext.delete(id);
205192
}
206193
}
207194

208-
static #sheet;
209-
static #internal = new Set();
210-
static #external = new Map();
195+
static #sheet = null;
196+
static #int = new Set();
197+
static #ext = new Map();
211198
}
212199

213200
export class StyledComponent extends Component {
214201
/**
215202
* Создать компонент и поместить его в переменную $root
216203
* @param {string} tag html tag элемента
217204
* @param {object} data параметры
218-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
205+
* @param {string|array} style стили в виде css строки
219206
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
220207
* @param {boolean} ext внешний стиль - может быть удалён по id
221208
*/
@@ -228,7 +215,7 @@ export class StyledComponent extends Component {
228215
* Создать компонент
229216
* @param {string} tag html tag элемента
230217
* @param {object} data параметры
231-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
218+
* @param {string|array} style стили в виде css строки
232219
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
233220
* @param {boolean} ext внешний стиль - может быть удалён по id
234221
*/

‎README.md

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,34 @@
1111
* @param {string} tag html tag элемента
1212
* @param {object} data параметры
1313
*/
14-
Component(tag, data = {});
14+
Component(tag, data = {}, svg = false);
1515

1616
/**
1717
* Создать компонент
1818
* @param {string} tag html tag элемента
1919
* @param {object} data параметры
2020
* @returns {Node}
21-
* tag {string} тег html элемента (для указания в children например)
22-
* context {object} контекст для параметра 'var' и вызовов 'also'
23-
* text {string} добавить в textContent
24-
* html {string} добавить в innerHTML
25-
* attrs {object} добавить аттрибуты
26-
* props {object} добавить свойства
27-
* class {string} добавить в className
21+
* tag {string} - тег html элемента (для указания в children например)
22+
* svg {boolean} - создавать как SVG элемент
23+
* context {object} - контекст для параметра 'var' и вызовов 'also'
24+
* text {string} - добавить в textContent
25+
* html {string} - добавить в innerHTML
26+
* attrs {object} - добавить аттрибуты
27+
* props {object} - добавить свойства
28+
* class {string} - добавить в className
2829
* also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
2930
* export {array} - положить в 0 ячейку указанного массива
30-
* var {string} создаёт переменную $имя в указанном контексте
31-
* events {object} добавляет addEventListener'ы {event: handler}
31+
* push {array} - добавить к массиву
32+
* var {string} - создаёт переменную $имя в указанном контексте
33+
* events {object} - добавляет addEventListener'ы {event: handler}
3234
* parent - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
33-
* style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
34-
* children - массив DOM, Component, object, html string
35-
* child - DOM, Component, object, html string
35+
* style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
36+
* children/children_r - массив DOM, Component, object, html string. _r - заменить имеющиеся
37+
* child/child_r - DOM, Component, object, html string. _r - заменить имеющиеся
3638
* всё остальное будет добавлено как property
3739
*/
3840
Component.make(tag, data = {});
41+
Component.makeSVG(tag, data = {});
3942

4043
/**
4144
* Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
@@ -53,20 +56,22 @@ Component.makeShadow(host, data = {}, sheet = null);
5356
* @returns {Node}
5457
*/
5558
Component.config(el, data);
59+
Component.configSVG(el, data);
5660

5761
/**
5862
* Создать массив компонентов из массива объектов конфигурации
5963
* @param {array} arr массив объектов конфигурации
6064
* @returns {array} of Elements
6165
*/
6266
Component.makeArray(arr);
67+
Component.makeArraySVG(arr);
6368
```
6469

6570
### Sheet
6671
```js
6772
/**
6873
* Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
69-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
74+
* @param {string|array} style стили в виде css
7075
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
7176
* @param {boolean} ext внешний стиль - может быть удалён по id
7277
*/
@@ -85,7 +90,7 @@ Sheet.removeStyle(id);
8590
* Создать компонент и поместить его в переменную $root
8691
* @param {string} tag html tag элемента
8792
* @param {object} data параметры
88-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
93+
* @param {string|array} style стили в виде css строки
8994
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
9095
* @param {boolean} ext внешний стиль - может быть удалён по id
9196
*/
@@ -95,7 +100,7 @@ StyledComponent(tag, data = {}, style = null, id = null, ext = false);
95100
* Создать компонент
96101
* @param {string} tag html tag элемента
97102
* @param {object} data параметры
98-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
103+
* @param {string|array} style стили в виде css строки
99104
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
100105
* @param {boolean} ext внешний стиль - может быть удалён по id
101106
*/

‎example/script.js

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,15 @@ class Button extends Component {
1616
}
1717
});
1818

19-
Sheet.addStyle([
20-
'.btn', [
21-
'background: red',
22-
'color: white'
23-
]
24-
], this, true); // this превратится в Button
19+
Sheet.addStyle(`
20+
.btn {
21+
background: red;
22+
}
23+
.btn {
24+
color: white
25+
}
26+
`,
27+
this, true); // this превратится в Button
2528
}
2629
}
2730

@@ -34,11 +37,7 @@ class Input extends StyledComponent {
3437
value: text,
3538
class: 'inp',
3639
},
37-
[
38-
'.inp', [
39-
'background: blue'
40-
]
41-
],
40+
'.inp {background: blue}',
4241
'Input'
4342
);
4443
}
@@ -52,12 +51,7 @@ class Num {
5251
value: text,
5352
class: 'num',
5453
},
55-
[
56-
'.num', [
57-
'background: green',
58-
'margin-left: 10px',
59-
]
60-
],
54+
'.num {background: green;margin-left: 10px}',
6155
'Num'
6256
);
6357
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@alexgyver/component",
3-
"version": "1.1.3",
3+
"version": "1.2.2",
44
"description": "Simple HTML element builder",
55
"main": "./Component.js",
66
"module": "./Component.js",

0 commit comments

Comments
 (0)
0