amateras 0.2.0 → 0.3.0
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.
- package/README.md +19 -3
- package/ext/css/src/index.ts +102 -45
- package/ext/css/src/lib/colorAssign.ts +6 -0
- package/ext/css/src/lib/colors/amber.ts +25 -0
- package/ext/css/src/lib/colors/blackwhite.ts +13 -0
- package/ext/css/src/lib/colors/blue.ts +25 -0
- package/ext/css/src/lib/colors/cyan.ts +25 -0
- package/ext/css/src/lib/colors/emerald.ts +25 -0
- package/ext/css/src/lib/colors/fuchsia.ts +25 -0
- package/ext/css/src/lib/colors/gray.ts +25 -0
- package/ext/css/src/lib/colors/green.ts +25 -0
- package/ext/css/src/lib/colors/indigo.ts +25 -0
- package/ext/css/src/lib/colors/lime.ts +25 -0
- package/ext/css/src/lib/colors/neutral.ts +25 -0
- package/ext/css/src/lib/colors/orange.ts +25 -0
- package/ext/css/src/lib/colors/pink.ts +25 -0
- package/ext/css/src/lib/colors/purple.ts +25 -0
- package/ext/css/src/lib/colors/red.ts +25 -0
- package/ext/css/src/lib/colors/rose.ts +25 -0
- package/ext/css/src/lib/colors/sky.ts +25 -0
- package/ext/css/src/lib/colors/slate.ts +25 -0
- package/ext/css/src/lib/colors/stone.ts +25 -0
- package/ext/css/src/lib/colors/teal.ts +25 -0
- package/ext/css/src/lib/colors/violet.ts +25 -0
- package/ext/css/src/lib/colors/yellow.ts +25 -0
- package/ext/css/src/lib/colors/zinc.ts +25 -0
- package/ext/css/src/lib/colors.ts +23 -0
- package/ext/css/src/structure/$CSSKeyframesRule.ts +1 -5
- package/ext/css/src/structure/$CSSMediaRule.ts +3 -23
- package/ext/css/src/structure/$CSSRule.ts +6 -18
- package/ext/css/src/structure/$CSSStyleRule.ts +10 -12
- package/ext/html/node/$Anchor.ts +31 -1
- package/ext/html/node/$Image.ts +54 -1
- package/ext/html/node/$Input.ts +154 -1
- package/ext/html/node/$OptGroup.ts +8 -1
- package/ext/html/node/$Option.ts +25 -1
- package/ext/html/node/$Select.ts +61 -1
- package/ext/router/index.ts +6 -4
- package/ext/router/node/Route.ts +2 -2
- package/ext/router/node/Router.ts +49 -15
- package/ext/router/node/RouterAnchor.ts +1 -1
- package/ext/ssr/index.ts +4 -4
- package/package.json +3 -1
- package/src/core.ts +19 -15
- package/src/global.ts +4 -0
- package/src/lib/assign.ts +4 -3
- package/src/lib/assignHelper.ts +1 -1
- package/src/lib/native.ts +14 -3
- package/src/node/$Element.ts +128 -24
- package/src/node/$HTMLElement.ts +70 -1
- package/src/node/$Node.ts +101 -30
- package/src/node/node.ts +2 -1
- package/src/structure/Signal.ts +3 -3
- package/ext/css/src/structure/$CSSKeyframeRule.ts +0 -14
package/src/node/$Element.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Signal } from "#structure/Signal";
|
|
2
2
|
import { $Node } from "#node/$Node";
|
|
3
|
-
import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isFunction, isString, isUndefined } from "#lib/native";
|
|
3
|
+
import { _Array_from, _document, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isFunction, isString, isUndefined } from "#lib/native";
|
|
4
4
|
|
|
5
|
-
export class $Element<Ele extends Element = Element> extends $Node {
|
|
5
|
+
export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node {
|
|
6
6
|
declare node: Ele
|
|
7
7
|
constructor(resolver: Ele | string) {
|
|
8
8
|
super(_instanceof(resolver, Element) ? resolver : createNode(resolver) as unknown as Ele)
|
|
@@ -14,28 +14,28 @@ export class $Element<Ele extends Element = Element> extends $Node {
|
|
|
14
14
|
attr(key: string): string | null;
|
|
15
15
|
attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
|
|
16
16
|
attr(resolver?: {[key: string]: string | number | boolean | Signal<any>} | string) {
|
|
17
|
-
if (!arguments.length) return _Object_fromEntries(_Array_from(this.
|
|
18
|
-
if (isString(resolver)) return this.
|
|
17
|
+
if (!arguments.length) return _Object_fromEntries(_Array_from(this.attributes).map(attr => [attr.name, attr.value]));
|
|
18
|
+
if (isString(resolver)) return this.getAttribute(resolver);
|
|
19
19
|
if (resolver) for (let [key, value] of _Object_entries(resolver)) {
|
|
20
|
-
const set = (value: any) => !isUndefined(value) && this.
|
|
20
|
+
const set = (value: any) => !isUndefined(value) && this.setAttribute(key, `${value}`)
|
|
21
21
|
if (_instanceof(value, Signal)) value = value.subscribe(set).value();
|
|
22
22
|
set(value);
|
|
23
23
|
}
|
|
24
24
|
return this;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
class(...token: string[]) {
|
|
28
|
-
this.
|
|
27
|
+
class(...token: (string | null | undefined)[]) {
|
|
28
|
+
this.classList(token.filter(isString).join(' '));
|
|
29
29
|
return this;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
addClass(...token: string[]) {
|
|
33
|
-
this.
|
|
32
|
+
addClass(...token: (string | null | undefined)[]) {
|
|
33
|
+
this.classList().add(...token.filter(isString));
|
|
34
34
|
return this;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
removeClass(...token: string[]) {
|
|
38
|
-
this.
|
|
37
|
+
removeClass(...token: (string | null | undefined)[]) {
|
|
38
|
+
this.classList().remove(...token.filter(isString));
|
|
39
39
|
return this;
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -44,40 +44,41 @@ export class $Element<Ele extends Element = Element> extends $Node {
|
|
|
44
44
|
return this;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
on<K extends keyof
|
|
48
|
-
this.node.addEventListener(type, listener as
|
|
47
|
+
on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
|
|
48
|
+
this.node.addEventListener(type as string, listener as any, options);
|
|
49
49
|
return this;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
off<K extends keyof
|
|
53
|
-
this.node.removeEventListener(type, listener as
|
|
52
|
+
off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions) {
|
|
53
|
+
this.node.removeEventListener(type as string, listener as any, options);
|
|
54
54
|
return this;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
once<K extends keyof
|
|
58
|
-
const handler = (event: Event) => {
|
|
57
|
+
once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
|
|
58
|
+
const handler = (event: $Event<any>) => {
|
|
59
59
|
this.off(type, handler, options);
|
|
60
|
-
isFunction(listener) ? listener(event
|
|
60
|
+
isFunction(listener) ? listener(event) : listener.handleEvent(event);
|
|
61
61
|
}
|
|
62
62
|
this.on(type, handler, options);
|
|
63
63
|
return this;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
toString() {
|
|
67
|
-
return this.
|
|
67
|
+
return this.outerHTML();
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
export type
|
|
72
|
-
export type $
|
|
73
|
-
export type $
|
|
71
|
+
export type EventMap = {[key: string]: Event}
|
|
72
|
+
export type $Event<E extends $Element, Ev = any> = Ev & {target: {$: E}};
|
|
73
|
+
export type $EventListener<E extends $Element, Ev> = (event: $Event<E, Ev>) => void;
|
|
74
|
+
export type $EventListenerObject<E extends $Element, Ev> = { handleEvent(object: $Event<E, Ev>): void; }
|
|
74
75
|
|
|
75
76
|
function createNode(nodeName: string) {
|
|
76
77
|
//@ts-expect-error
|
|
77
|
-
return !
|
|
78
|
+
return !_document ? new Node(nodeName) as unknown as Node & ChildNode : _document.createElement(nodeName);
|
|
78
79
|
}
|
|
79
80
|
|
|
80
|
-
export interface $Element<Ele extends Element> {
|
|
81
|
+
export interface $Element<Ele extends Element, EvMap> {
|
|
81
82
|
/** {@link Element.attributes} */
|
|
82
83
|
readonly attributes: NamedNodeMap;
|
|
83
84
|
/** {@link Element.clientHeight} */
|
|
@@ -107,6 +108,99 @@ export interface $Element<Ele extends Element> {
|
|
|
107
108
|
/** {@link Element.tagName} */
|
|
108
109
|
readonly tagName: string;
|
|
109
110
|
|
|
111
|
+
/** {@link Element.attachShadow} */
|
|
112
|
+
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
113
|
+
/** {@link Element.checkVisibility} */
|
|
114
|
+
checkVisibility(options?: CheckVisibilityOptions): boolean;
|
|
115
|
+
/** {@link Element.closest} */
|
|
116
|
+
closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
|
117
|
+
closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
|
118
|
+
closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
|
119
|
+
closest<E extends Element = Element>(selectors: string): E | null;
|
|
120
|
+
/** {@link Element.computedStyleMap} */
|
|
121
|
+
computedStyleMap(): StylePropertyMapReadOnly;
|
|
122
|
+
/** {@link Element.getAttribute} */
|
|
123
|
+
getAttribute(qualifiedName: string): string | null;
|
|
124
|
+
/** {@link Element.getAttributeNS} */
|
|
125
|
+
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
126
|
+
/** {@link Element.getAttributeNames} */
|
|
127
|
+
getAttributeNames(): string[];
|
|
128
|
+
/** {@link Element.getAttributeNode} */
|
|
129
|
+
getAttributeNode(qualifiedName: string): Attr | null;
|
|
130
|
+
/** {@link Element.getAttributeNodeNS} */
|
|
131
|
+
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
|
132
|
+
/** {@link Element.getBoundingClientRect} */
|
|
133
|
+
getBoundingClientRect(): DOMRect;
|
|
134
|
+
/** {@link Element.getClientRects} */
|
|
135
|
+
getClientRects(): DOMRectList;
|
|
136
|
+
/** {@link Element.getElementsByClassName} */
|
|
137
|
+
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
138
|
+
/** {@link Element.getElementsByTagName} */
|
|
139
|
+
getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
140
|
+
getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
141
|
+
getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
142
|
+
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
143
|
+
/** {@link Element.getElementsByTagNameNS} */
|
|
144
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
145
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
146
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
|
147
|
+
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
148
|
+
/** {@link Element.getHTML} */
|
|
149
|
+
getHTML(options?: GetHTMLOptions): string;
|
|
150
|
+
/** {@link Element.hasAttribute} */
|
|
151
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
152
|
+
/** {@link Element.hasAttributeNS} */
|
|
153
|
+
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
154
|
+
/** {@link Element.hasAttributes} */
|
|
155
|
+
hasAttributes(): boolean;
|
|
156
|
+
/** {@link Element.hasPointerCapture} */
|
|
157
|
+
hasPointerCapture(pointerId: number): boolean;
|
|
158
|
+
/** {@link Element.insertAdjacentElement} */
|
|
159
|
+
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
160
|
+
/** {@link Element.insertAdjacentHTML} */
|
|
161
|
+
insertAdjacentHTML(position: InsertPosition, string: string): this;
|
|
162
|
+
/** {@link Element.insertAdjacentText} */
|
|
163
|
+
insertAdjacentText(where: InsertPosition, data: string): this;
|
|
164
|
+
/** {@link Element.matches} */
|
|
165
|
+
matches(selectors: string): boolean;
|
|
166
|
+
/** {@link Element.releasePointerCapture} */
|
|
167
|
+
releasePointerCapture(pointerId: number): this;
|
|
168
|
+
/** {@link Element.removeAttribute} */
|
|
169
|
+
removeAttribute(qualifiedName: string): this;
|
|
170
|
+
/** {@link Element.removeAttributeNS} */
|
|
171
|
+
removeAttributeNS(namespace: string | null, localName: string): this;
|
|
172
|
+
/** {@link Element.removeAttributeNode} */
|
|
173
|
+
removeAttributeNode(attr: Attr): Attr;
|
|
174
|
+
/** {@link Element.requestFullscreen} */
|
|
175
|
+
requestFullscreen(options?: FullscreenOptions): Promise<this>;
|
|
176
|
+
/** {@link Element.requestPointerLock} */
|
|
177
|
+
requestPointerLock(options?: PointerLockOptions): Promise<this>;
|
|
178
|
+
/** {@link Element.scroll} */
|
|
179
|
+
scroll(options?: ScrollToOptions): this;
|
|
180
|
+
scroll(x: number, y: number): this;
|
|
181
|
+
/** {@link Element.scrollBy} */
|
|
182
|
+
scrollBy(options?: ScrollToOptions): this;
|
|
183
|
+
scrollBy(x: number, y: number): this;
|
|
184
|
+
/** {@link Element.scrollIntoView} */
|
|
185
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): this;
|
|
186
|
+
/** {@link Element.scrollTo} */
|
|
187
|
+
scrollTo(options?: ScrollToOptions): this;
|
|
188
|
+
scrollTo(x: number, y: number): this;
|
|
189
|
+
/** {@link Element.setAttribute} */
|
|
190
|
+
setAttribute(qualifiedName: string, value: string): this;
|
|
191
|
+
/** {@link Element.setAttributeNS} */
|
|
192
|
+
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): this;
|
|
193
|
+
/** {@link Element.setAttributeNode} */
|
|
194
|
+
setAttributeNode(attr: Attr): Attr | null;
|
|
195
|
+
/** {@link Element.setAttributeNodeNS} */
|
|
196
|
+
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
197
|
+
/** {@link Element.setHTMLUnsafe} */
|
|
198
|
+
setHTMLUnsafe(html: string): this;
|
|
199
|
+
/** {@link Element.setPointerCapture} */
|
|
200
|
+
setPointerCapture(pointerId: number): this;
|
|
201
|
+
/** {@link Element.toggleAttribute} */
|
|
202
|
+
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
203
|
+
|
|
110
204
|
/** {@link Element.classList} */
|
|
111
205
|
classList(): DOMTokenList;
|
|
112
206
|
classList(value: $Parameter<string>): this;
|
|
@@ -134,4 +228,14 @@ export interface $Element<Ele extends Element> {
|
|
|
134
228
|
/** {@link Element.slot} */
|
|
135
229
|
slot(): string;
|
|
136
230
|
slot(slot: $Parameter<string>): this;
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
|
|
234
|
+
on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
|
|
235
|
+
|
|
236
|
+
off(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this;
|
|
237
|
+
off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
|
|
238
|
+
|
|
239
|
+
once(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
|
|
240
|
+
once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
|
|
137
241
|
}
|
package/src/node/$HTMLElement.ts
CHANGED
|
@@ -1,7 +1,76 @@
|
|
|
1
1
|
import { $Element } from "#node/$Element";
|
|
2
2
|
|
|
3
|
-
export class $HTMLElement<Ele extends HTMLElement = HTMLElement> extends $Element<Ele> {
|
|
3
|
+
export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
|
|
4
4
|
constructor(resolver: string | Ele) {
|
|
5
5
|
super(resolver);
|
|
6
6
|
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
|
|
10
|
+
/** {@link HTMLElement.accessKeyLabel} */
|
|
11
|
+
readonly accessKeyLabel: string;
|
|
12
|
+
/** {@link HTMLElement.offsetHeight} */
|
|
13
|
+
readonly offsetHeight: number;
|
|
14
|
+
/** {@link HTMLElement.offsetLeft} */
|
|
15
|
+
readonly offsetLeft: number;
|
|
16
|
+
/** {@link HTMLElement.offsetParent} */
|
|
17
|
+
readonly offsetParent: Element | null;
|
|
18
|
+
/** {@link HTMLElement.offsetTop} */
|
|
19
|
+
readonly offsetTop: number;
|
|
20
|
+
/** {@link HTMLElement.offsetWidth} */
|
|
21
|
+
readonly offsetWidth: number;
|
|
22
|
+
|
|
23
|
+
/** {@link HTMLElement.attachInternals} */
|
|
24
|
+
attachInternals(): ElementInternals;
|
|
25
|
+
/** {@link HTMLElement.click} */
|
|
26
|
+
click(): this;
|
|
27
|
+
/** {@link HTMLElement.hidePopover} */
|
|
28
|
+
hidePopover(): this;
|
|
29
|
+
/** {@link HTMLElement.showPopover} */
|
|
30
|
+
showPopover(): this;
|
|
31
|
+
/** {@link HTMLElement.togglePopover} */
|
|
32
|
+
togglePopover(options?: boolean): boolean;
|
|
33
|
+
|
|
34
|
+
/** {@link HTMLElement.accessKey} */
|
|
35
|
+
accessKey(): string;
|
|
36
|
+
accessKey(accessKey: $Parameter<string>): this;
|
|
37
|
+
/** {@link HTMLElement.autocapitalize} */
|
|
38
|
+
autocapitalize(): string;
|
|
39
|
+
autocapitalize(autocapitalize: $Parameter<string>): this;
|
|
40
|
+
/** {@link HTMLElement.dir} */
|
|
41
|
+
dir(): string;
|
|
42
|
+
dir(dir: $Parameter<string>): this;
|
|
43
|
+
/** {@link HTMLElement.draggable} */
|
|
44
|
+
draggable(): boolean;
|
|
45
|
+
draggable(draggable: $Parameter<boolean>): this;
|
|
46
|
+
/** {@link HTMLElement.hidden} */
|
|
47
|
+
hidden(): boolean;
|
|
48
|
+
hidden(hidden: $Parameter<boolean>): this;
|
|
49
|
+
/** {@link HTMLElement.inert} */
|
|
50
|
+
inert(): boolean;
|
|
51
|
+
inert(inert: $Parameter<boolean>): this;
|
|
52
|
+
/** {@link HTMLElement.innerText} */
|
|
53
|
+
innerText(): string;
|
|
54
|
+
innerText(innerText: $Parameter<string>): this;
|
|
55
|
+
/** {@link HTMLElement.lang} */
|
|
56
|
+
lang(): string;
|
|
57
|
+
lang(lang: $Parameter<string>): this;
|
|
58
|
+
/** {@link HTMLElement.outerText} */
|
|
59
|
+
outerText(): string;
|
|
60
|
+
outerText(outerText: $Parameter<string>): this;
|
|
61
|
+
/** {@link HTMLElement.popover} */
|
|
62
|
+
popover(): string | null;
|
|
63
|
+
popover(popover: $Parameter<string | null>): this;
|
|
64
|
+
/** {@link HTMLElement.spellcheck} */
|
|
65
|
+
spellcheck(): boolean;
|
|
66
|
+
spellcheck(spellcheck: $Parameter<boolean>): this;
|
|
67
|
+
/** {@link HTMLElement.title} */
|
|
68
|
+
title(): string;
|
|
69
|
+
title(title: $Parameter<string>): this;
|
|
70
|
+
/** {@link HTMLElement.translate} */
|
|
71
|
+
translate(): string;
|
|
72
|
+
translate(translate: $Parameter<boolean>): this;
|
|
73
|
+
/** {@link HTMLElement.writingSuggestions} */
|
|
74
|
+
writingSuggestions(): string;
|
|
75
|
+
writingSuggestions(writingSuggestions: $Parameter<string>): this;
|
|
7
76
|
}
|
package/src/node/$Node.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _Array_from, _instanceof, isFunction, isNull, isObject, isUndefined } from "#lib/native";
|
|
1
|
+
import { _Array_from, _document, _instanceof, _JSON_stringify, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
|
|
2
2
|
import { Signal } from "#structure/Signal";
|
|
3
3
|
|
|
4
4
|
export class $Node {
|
|
@@ -10,7 +10,7 @@ export class $Node {
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
content(children: $NodeContentResolver<this>) {
|
|
13
|
-
_Array_from(this.
|
|
13
|
+
forEach(_Array_from(this.childNodes), node => node.remove());
|
|
14
14
|
return this.insert(children);
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -18,16 +18,16 @@ export class $Node {
|
|
|
18
18
|
// insert node helper function for depend position
|
|
19
19
|
const appendChild = (children: OrArray<$Node | undefined | null>) => {
|
|
20
20
|
// get child node at position
|
|
21
|
-
const positionChild = _Array_from(this.
|
|
22
|
-
$.
|
|
21
|
+
const positionChild = _Array_from(this.childNodes).filter(node => node.nodeType !== node.TEXT_NODE).at(position);
|
|
22
|
+
forEach($.toArray(children), child => {
|
|
23
23
|
if (!child) return;
|
|
24
24
|
if (_instanceof(child, Array)) this.insert(child);
|
|
25
|
-
else if (!positionChild) this.
|
|
25
|
+
else if (!positionChild) this.appendChild(child.node);
|
|
26
26
|
else this.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
|
|
27
27
|
})
|
|
28
28
|
}
|
|
29
29
|
// process nodes
|
|
30
|
-
for (const child of $.
|
|
30
|
+
for (const child of $.toArray(resolver)) !isUndefined(child) && appendChild(processContent(this, child))
|
|
31
31
|
return this;
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -35,25 +35,20 @@ export class $Node {
|
|
|
35
35
|
return promise.then(result => callback(this, result)), this;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
remove() {
|
|
39
|
-
return this.node.remove(), this
|
|
40
|
-
}
|
|
41
|
-
|
|
42
38
|
replace($node: $NodeContentResolver<$Node>) {
|
|
43
|
-
if (!$node) return this
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
parentNode?.$.insert($node, index)
|
|
39
|
+
if (!$node) return this;
|
|
40
|
+
this.replaceWith(
|
|
41
|
+
...$.toArray(processContent(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
|
|
42
|
+
)
|
|
48
43
|
return this;
|
|
49
44
|
}
|
|
50
45
|
|
|
51
46
|
toString() {
|
|
52
|
-
return this.
|
|
47
|
+
return this.textContent();
|
|
53
48
|
}
|
|
54
49
|
}
|
|
55
50
|
|
|
56
|
-
function processContent<T extends $Node>($node: T, content:
|
|
51
|
+
function processContent<T extends $Node>($node: T, content: $NodeContentResolver<any>): OrArray<$Node | undefined | null> {
|
|
57
52
|
if (isUndefined(content)) return;
|
|
58
53
|
if (isNull(content)) return content;
|
|
59
54
|
// is $Element
|
|
@@ -62,20 +57,35 @@ function processContent<T extends $Node>($node: T, content: OrPromise<$NodeConte
|
|
|
62
57
|
if (_instanceof(content, Promise)) return $('async').await(content, ($async, $child) => $async.replace($child as any));
|
|
63
58
|
// is SignalFunction or ContentHandler
|
|
64
59
|
if (isFunction(content)) {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
60
|
+
const signal = (content as any).signal;
|
|
61
|
+
if (_instanceof(signal, Signal)) {
|
|
62
|
+
const resolver = (content as $.SignalFunction<any>)();
|
|
63
|
+
if (_instanceof(resolver, $Node)) {
|
|
64
|
+
// handler signal $Node result
|
|
65
|
+
let node = resolver;
|
|
66
|
+
const set = (value: any) => {
|
|
67
|
+
node.replace(value);
|
|
68
|
+
node = value;
|
|
69
|
+
}
|
|
70
|
+
signal.subscribe(set);
|
|
71
|
+
return resolver;
|
|
72
|
+
} else {
|
|
73
|
+
// handler signal other type result
|
|
74
|
+
const $text = _document ? new $Text() : $('signal').attr({ type: typeof signal.value() });
|
|
75
|
+
const set = (value: any) => $text.textContent(isObject(value) ? _JSON_stringify(value) : value);
|
|
76
|
+
if (_instanceof($text, $Text)) $text.signals.add(signal);
|
|
77
|
+
signal.subscribe(set);
|
|
78
|
+
set(resolver);
|
|
79
|
+
return $text;
|
|
80
|
+
}
|
|
73
81
|
} else {
|
|
74
82
|
const _content = content($node) as $NodeContentResolver<$Node>;
|
|
75
83
|
if (_instanceof(_content, Promise)) return processContent($node, _content as any);
|
|
76
|
-
else return $.
|
|
84
|
+
else return $.toArray(_content).map(content => processContent($node, content) as $Node);
|
|
77
85
|
}
|
|
78
|
-
}
|
|
86
|
+
}
|
|
87
|
+
// is nested array
|
|
88
|
+
if (_instanceof(content, Array)) return content.map(c => processContent($node, c) as $Node)
|
|
79
89
|
// is string | number | boolean
|
|
80
90
|
return new $Text(`${content}`);
|
|
81
91
|
}
|
|
@@ -89,14 +99,75 @@ export class $Text extends $Node {
|
|
|
89
99
|
|
|
90
100
|
export type $NodeContentHandler<T extends $Node> = ($node: T) => OrPromise<$NodeContentResolver<T>>;
|
|
91
101
|
export type $NodeContentTypes = $Node | string | number | boolean | $.SignalFunction<any> | null | undefined;
|
|
92
|
-
export type $NodeContentResolver<T extends $Node> =
|
|
102
|
+
export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
|
|
93
103
|
|
|
94
104
|
export interface $Node {
|
|
95
|
-
|
|
105
|
+
/** {@link Node.baseURI} */
|
|
106
|
+
readonly baseURI: string;
|
|
107
|
+
/** {@link Node.childNodes} */
|
|
96
108
|
readonly childNodes: NodeListOf<ChildNode>;
|
|
109
|
+
/** {@link Node.firstChild} */
|
|
110
|
+
readonly firstChild: ChildNode | null;
|
|
111
|
+
/** {@link Node.isConnected} */
|
|
112
|
+
readonly isConnected: boolean;
|
|
113
|
+
/** {@link Node.lastChild} */
|
|
114
|
+
readonly lastChild: ChildNode | null;
|
|
115
|
+
/** {@link Node.nextSibling} */
|
|
116
|
+
readonly nextSibling: ChildNode | null;
|
|
117
|
+
/** {@link Node.nodeName} */
|
|
118
|
+
readonly nodeName: string;
|
|
119
|
+
/** {@link Node.nodeType} */
|
|
120
|
+
readonly nodeType: number;
|
|
121
|
+
/** {@link Node.ownerDocument} */
|
|
122
|
+
readonly ownerDocument: Document | null;
|
|
123
|
+
/** {@link Node.parentElement} */
|
|
124
|
+
readonly parentElement?: HTMLElement | null;
|
|
125
|
+
/** {@link Node.parentNode} */
|
|
126
|
+
readonly parentNode?: ParentNode | null;
|
|
127
|
+
/** {@link Node.previousSibling} */
|
|
128
|
+
readonly previousSibling?: ChildNode | null;
|
|
129
|
+
|
|
130
|
+
/** {@link Node.appendChild} */
|
|
97
131
|
appendChild<T extends Node>(node: T): T;
|
|
132
|
+
/** {@link Node.cloneNode} */
|
|
133
|
+
cloneNode(subtree?: boolean): Node;
|
|
134
|
+
/** {@link Node.compareDocumentPosition} */
|
|
135
|
+
compareDocumentPosition(other: Node): number;
|
|
136
|
+
/** {@link Node.getRootNode} */
|
|
137
|
+
getRootNode(options?: GetRootNodeOptions): Node;
|
|
138
|
+
/** {@link Node.hasChildNodes} */
|
|
139
|
+
hasChildNodes(): boolean;
|
|
140
|
+
/** {@link Node.insertBefore} */
|
|
98
141
|
insertBefore<T extends Node>(node: T, child: Node | null): T;
|
|
142
|
+
/** {@link Node.isDefaultNamespace} */
|
|
143
|
+
isDefaultNamespace(namespace: string | null): boolean;
|
|
144
|
+
/** {@link Node.isEqualNode} */
|
|
145
|
+
isEqualNode(otherNode: Node | null): boolean;
|
|
146
|
+
/** {@link Node.isSameNode} */
|
|
147
|
+
isSameNode(otherNode: Node | null): boolean;
|
|
148
|
+
/** {@link Node.lookupNamespaceURI} */
|
|
149
|
+
lookupNamespaceURI(prefix: string | null): string | null;
|
|
150
|
+
/** {@link Node.lookupPrefix} */
|
|
151
|
+
lookupPrefix(namespace: string | null): string | null;
|
|
152
|
+
/** {@link Node.normalize} */
|
|
153
|
+
normalize(): this;
|
|
154
|
+
/** {@link Node.removeChild} */
|
|
155
|
+
removeChild<T extends Node>(child: T): T;
|
|
156
|
+
/** {@link Node.replaceChild} */
|
|
157
|
+
replaceChild<T extends Node>(node: Node, child: T): T;
|
|
158
|
+
/** {@link Node.replaceChild} */
|
|
159
|
+
after(...nodes: (Node | string)[]): this;
|
|
160
|
+
/** {@link Node.replaceChild} */
|
|
161
|
+
before(...nodes: (Node | string)[]): this;
|
|
162
|
+
/** {@link Node.replaceChild} */
|
|
163
|
+
remove(): this;
|
|
164
|
+
/** {@link Node.replaceChild} */
|
|
165
|
+
replaceWith(...nodes: (Node | string)[]): this;
|
|
99
166
|
|
|
100
|
-
|
|
167
|
+
/** {@link Node.nodeValue} */
|
|
168
|
+
nodeValue(nodeValue: $Parameter<string | null>): this;
|
|
169
|
+
nodeValue(): string | null;
|
|
170
|
+
/** {@link Node.textContent} */
|
|
171
|
+
textContent(textContent: $Parameter<string | null>): this;
|
|
101
172
|
textContent(): string | null;
|
|
102
173
|
}
|
package/src/node/node.ts
CHANGED
|
@@ -3,8 +3,9 @@ import { assignHelper } from '#lib/assignHelper';
|
|
|
3
3
|
import { $Element } from '#node/$Element';
|
|
4
4
|
import { $Node, $Text } from './$Node';
|
|
5
5
|
|
|
6
|
-
export * from './$Element';
|
|
7
6
|
export * from './$Node';
|
|
7
|
+
export * from './$Element';
|
|
8
|
+
export * from './$HTMLElement';
|
|
8
9
|
|
|
9
10
|
assignHelper(Node, $Node);
|
|
10
11
|
assignHelper(Text, $Text);
|
package/src/structure/Signal.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _instanceof, isUndefined } from "#lib/native";
|
|
1
|
+
import { _instanceof, forEach, isUndefined } from "#lib/native";
|
|
2
2
|
|
|
3
3
|
export class Signal<T> {
|
|
4
4
|
#value: T;
|
|
@@ -13,7 +13,7 @@ export class Signal<T> {
|
|
|
13
13
|
value(callback: (oldValue: T) => T): this;
|
|
14
14
|
value(resolver?: T | ((oldValue: T) => T)) {
|
|
15
15
|
if (!arguments.length) {
|
|
16
|
-
Signal.listeners
|
|
16
|
+
forEach(Signal.listeners, fn => fn(this));
|
|
17
17
|
return this.#value;
|
|
18
18
|
}
|
|
19
19
|
if (_instanceof(resolver, Function)) this.value(resolver(this.#value));
|
|
@@ -25,7 +25,7 @@ export class Signal<T> {
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
emit() {
|
|
28
|
-
this.subscribers
|
|
28
|
+
forEach(this.subscribers, subs => subs(this.#value))
|
|
29
29
|
return this;
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { $CSSStyleRule } from "#structure/$CSSStyleRule";
|
|
2
|
-
import { _Array_from } from "../../../../src/lib/native";
|
|
3
|
-
|
|
4
|
-
export class $CSSKeyframeRule extends $CSSStyleRule {
|
|
5
|
-
keyframe: string
|
|
6
|
-
constructor(keyframe: string) {
|
|
7
|
-
super();
|
|
8
|
-
this.keyframe = keyframe;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
get css(): string {
|
|
12
|
-
return `${this.keyframe} { ${_Array_from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
|
|
13
|
-
}
|
|
14
|
-
}
|