-
Notifications
You must be signed in to change notification settings - Fork 1
/
createDOM.ts
119 lines (116 loc) · 3.56 KB
/
createDOM.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { isEmpty } from '../typeis';
import { createElement } from './createElement';
interface DOMTree {
tag: keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
className?: string;
attributes?: Record<string, any>;
variable?:Record<`--${string}`,number|string>
style?: Partial<CSSStyleDeclaration>;
children?: DOMTree[] | string | number;
}
type Func = (...args: any[]) => void;
type Hook = (cb: Func) => void;
type ReturnHooks = {
onMounted: Hook;
onMountedBefore: Hook;
onMountedAfter: Hook;
onAttributesLoadBefore: Hook;
onAttributesLoaded: Hook;
};
const useHooks = () => {
const emits: Record<keyof ReturnHooks, Func[]> = {
onMounted: [],
onAttributesLoaded: [],
onMountedAfter: [],
onMountedBefore: [],
onAttributesLoadBefore: [],
};
const onMounted = (cb: Func) => {
emits['onMounted'].push(cb);
};
const onMountedBefore = (cb: Func) => {
emits['onMountedBefore'].push(cb);
};
const onMountedAfter = (cb: Func) => {
emits['onMountedAfter'].push(cb);
};
const onAttributesLoadBefore = (cb: Func) => {
emits['onAttributesLoadBefore'].push(cb);
};
const onAttributesLoaded = (cb: Func) => {
emits['onAttributesLoaded'].push(cb);
};
const excuteEmits = (event: keyof typeof emits, ...args: any[]) => {
for (let i = 0; i < emits[event].length; i++) {
emits[event][i](...args);
}
};
return {
onMounted,
onMountedBefore,
onMountedAfter,
onAttributesLoadBefore,
onAttributesLoaded,
excuteEmits,
};
};
const hook = useHooks();
/**
* @DOM
* @param {DOMTree }} config [description]
*/
export function createDOM(config: { root: HTMLElement; tree: DOMTree }): [HTMLElement, ReturnHooks];
/**
* @DOM
* @param {DOMTree }} config [description]
*/
export function createDOM(root: HTMLElement, tree: DOMTree): [HTMLElement, ReturnHooks];
/**
* /**
* @DOM
* @param {any[]} ...args [description]
*/
export function createDOM(...args: any[]) {
const tree: DOMTree = args.length === 1 ? args[0].tree : args[1];
const root: HTMLElement = args.length === 1 ? args[0].root : args[0];
const style: CSSStyleDeclaration = args.length === 1 ? args[0].style : args[1].style;
const { tag, className = '', children = '', attributes = {}, variable = {} } = tree;
let ele: HTMLElement;
hook.excuteEmits('onAttributesLoadBefore', attributes, undefined);
if (className !== '') {
ele = createElement(tag, {
class: className,
...attributes,
});
} else {
ele = createElement(tag, {
...attributes,
});
}
hook.excuteEmits('onAttributesLoaded', attributes, ele);
if (!isEmpty(style)) {
for (const key in style) {
ele.style[key] = style[key];
}
}
if(!isEmpty(variable)){
for(const preperty in variable){
ele.style.setProperty(preperty,`${variable[preperty as keyof DOMTree['variable']]}`)
}
}
if (typeof children === 'string' || typeof children === 'number') {
const text = document.createTextNode(`${children}`);
ele.appendChild(text);
} else {
children.forEach(tree => createDOM(ele, tree));
}
hook.excuteEmits('onMountedBefore', ele);
root.appendChild(ele);
hook.excuteEmits('onMounted', ele);
return [root, {}];
}
export const onMounted = hook.onMounted;
export const onMountedBefore = hook.onMountedBefore;
export const onMountedAfter = hook.onMountedAfter;
export const onAttributesLoadBefore = hook.onAttributesLoadBefore;
export const onAttributesLoaded = hook.onAttributesLoaded;