amateras 0.1.1 → 0.3.0

package/src/node/$Element.ts

@@ -1,40 +1,41 @@
 import { Signal } from "#structure/Signal";
 import { $Node } from "#node/$Node";
-import { _Array_from, _instanceof, _Object_entries, _Object_fromEntries, isUndefined } from "#lib/native";
+import { _Array_from, _document, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isFunction, isString, isUndefined } from "#lib/native";
 
-export class $Element<Ele extends Element = Element> extends $Node {
-    listeners = new Map<Function, (event: Event) => void>;
+export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node {
     declare node: Ele
     constructor(resolver: Ele | string) {
-        super(_instanceof(resolver, Element) ? resolver : document.createElement(resolver) as unknown as Ele)
+        super(_instanceof(resolver, Element) ? resolver : createNode(resolver) as unknown as Ele)
         //@ts-expect-error
         this.node.$ = this;
     }
 
     attr(): {[key: string]: string};
+    attr(key: string): string | null;
     attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
-    attr(obj?: {[key: string]: string | number | boolean | Signal<any>}) {
-        if (!arguments.length) return _Object_fromEntries(_Array_from(this.node.attributes).map(attr => [attr.name, attr.value]));
-        if (obj) for (let [key, value] of _Object_entries(obj)) {
-            const set = (value: any) => isUndefined(value) && this.node.setAttribute(key, `${value}`)
+    attr(resolver?: {[key: string]: string | number | boolean | Signal<any>} | string) {
+        if (!arguments.length) return _Object_fromEntries(_Array_from(this.attributes).map(attr => [attr.name, attr.value]));
+        if (isString(resolver)) return this.getAttribute(resolver);
+        if (resolver) for (let [key, value] of _Object_entries(resolver)) {
+            const set = (value: any) => !isUndefined(value) && this.setAttribute(key, `${value}`)
             if (_instanceof(value, Signal)) value = value.subscribe(set).value();
             set(value);
         }
         return this;
     }
 
-    class(...token: string[]) {
-        this.node.classList = token.join(' ');
+    class(...token: (string | null | undefined)[]) {
+        this.classList(token.filter(isString).join(' '));
         return this;
     }
 
-    addClass(...token: string[]) {
-        this.node.classList.add(...token);
+    addClass(...token: (string | null | undefined)[]) {
+        this.classList().add(...token.filter(isString));
         return this;
     }
     
-    removeClass(...token: string[]) {
-        this.node.classList.remove(...token);
+    removeClass(...token: (string | null | undefined)[]) {
+        this.classList().remove(...token.filter(isString));
         return this;
     }
 
@@ -43,18 +44,198 @@ export class $Element<Ele extends Element = Element> extends $Node {
         return this;
     }
 
-    on<K extends keyof HTMLElementEventMap>(type: K, listener: ($node: this, event: Event) => void, options?: boolean | AddEventListenerOptions) {
-        const handler = (event: Event) => listener(this, event);
-        this.listeners.set(listener, handler);
-        this.node.addEventListener(type, handler, options);
+    on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
+        this.node.addEventListener(type as string, listener as any, options);
         return this;
     }
 
-    off<K extends keyof HTMLElementEventMap>(type: K, listener: ($node: this, event: Event) => void, options?: boolean | EventListenerOptions) {
-        const handler = this.listeners.get(listener);
-        if (handler) this.node.removeEventListener(type, handler, options);
-        this.listeners.delete(listener);
+    off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions) {
+        this.node.removeEventListener(type as string, listener as any, options);
         return this;
     }
-    once() {}
+    
+    once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
+        const handler = (event: $Event<any>) => {
+            this.off(type, handler, options);
+            isFunction(listener) ? listener(event) : listener.handleEvent(event);
+        }
+        this.on(type, handler, options);
+        return this;
+    }
+
+    toString() {
+        return this.outerHTML();
+    }
+}
+
+export type EventMap = {[key: string]: Event}
+export type $Event<E extends $Element, Ev = any> = Ev & {target: {$: E}};
+export type $EventListener<E extends $Element, Ev> = (event: $Event<E, Ev>) => void;
+export type $EventListenerObject<E extends $Element, Ev> = { handleEvent(object: $Event<E, Ev>): void; }
+
+function createNode(nodeName: string) {
+    //@ts-expect-error
+    return !_document ? new Node(nodeName) as unknown as Node & ChildNode : _document.createElement(nodeName);
+}
+
+export interface $Element<Ele extends Element, EvMap> {
+    /** {@link Element.attributes} */
+    readonly attributes: NamedNodeMap;
+    /** {@link Element.clientHeight} */
+    readonly clientHeight: number;
+    /** {@link Element.clientLeft} */
+    readonly clientLeft: number;
+    /** {@link Element.clientTop} */
+    readonly clientTop: number;
+    /** {@link Element.clientWidth} */
+    readonly clientWidth: number;
+    /** {@link Element.currentCSSZoom} */
+    readonly currentCSSZoom: number;
+    /** {@link Element.localName} */
+    readonly localName: string;
+    /** {@link Element.namespaceURI} */
+    readonly namespaceURI: string | null;
+    /** {@link Element.prefix} */
+    readonly prefix: string | null;
+    /** {@link Element.ownerDocument} */
+    readonly ownerDocument: Document;
+    /** {@link Element.scrollHeight} */
+    readonly scrollHeight: number;
+    /** {@link Element.scrollWidth} */
+    readonly scrollWidth: number;
+    /** {@link Element.shadowRoot} */
+    readonly shadowRoot: ShadowRoot | null;
+    /** {@link Element.tagName} */
+    readonly tagName: string;
+
+    /** {@link Element.attachShadow} */
+    attachShadow(init: ShadowRootInit): ShadowRoot;
+    /** {@link Element.checkVisibility} */
+    checkVisibility(options?: CheckVisibilityOptions): boolean;
+    /** {@link Element.closest} */
+    closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+    closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+    closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>(selectors: string): E | null;
+    /** {@link Element.computedStyleMap} */
+    computedStyleMap(): StylePropertyMapReadOnly;
+    /** {@link Element.getAttribute} */
+    getAttribute(qualifiedName: string): string | null;
+    /** {@link Element.getAttributeNS} */
+    getAttributeNS(namespace: string | null, localName: string): string | null;
+    /** {@link Element.getAttributeNames} */
+    getAttributeNames(): string[];
+    /** {@link Element.getAttributeNode} */
+    getAttributeNode(qualifiedName: string): Attr | null;
+    /** {@link Element.getAttributeNodeNS} */
+    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+    /** {@link Element.getBoundingClientRect} */
+    getBoundingClientRect(): DOMRect;
+    /** {@link Element.getClientRects} */
+    getClientRects(): DOMRectList;
+    /** {@link Element.getElementsByClassName} */
+    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    /** {@link Element.getElementsByTagName} */
+    getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+    getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+    /** {@link Element.getElementsByTagNameNS} */
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+    getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    /** {@link Element.getHTML} */
+    getHTML(options?: GetHTMLOptions): string;
+    /** {@link Element.hasAttribute} */
+    hasAttribute(qualifiedName: string): boolean;
+    /** {@link Element.hasAttributeNS} */
+    hasAttributeNS(namespace: string | null, localName: string): boolean;
+    /** {@link Element.hasAttributes} */
+    hasAttributes(): boolean;
+    /** {@link Element.hasPointerCapture} */
+    hasPointerCapture(pointerId: number): boolean;
+    /** {@link Element.insertAdjacentElement} */
+    insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+    /** {@link Element.insertAdjacentHTML} */
+    insertAdjacentHTML(position: InsertPosition, string: string): this;
+    /** {@link Element.insertAdjacentText} */
+    insertAdjacentText(where: InsertPosition, data: string): this;
+    /** {@link Element.matches} */
+    matches(selectors: string): boolean;
+    /** {@link Element.releasePointerCapture} */
+    releasePointerCapture(pointerId: number): this;
+    /** {@link Element.removeAttribute} */
+    removeAttribute(qualifiedName: string): this;
+    /** {@link Element.removeAttributeNS} */
+    removeAttributeNS(namespace: string | null, localName: string): this;
+    /** {@link Element.removeAttributeNode} */
+    removeAttributeNode(attr: Attr): Attr;
+    /** {@link Element.requestFullscreen} */
+    requestFullscreen(options?: FullscreenOptions): Promise<this>;
+    /** {@link Element.requestPointerLock} */
+    requestPointerLock(options?: PointerLockOptions): Promise<this>;
+    /** {@link Element.scroll} */
+    scroll(options?: ScrollToOptions): this;
+    scroll(x: number, y: number): this;
+    /** {@link Element.scrollBy} */
+    scrollBy(options?: ScrollToOptions): this;
+    scrollBy(x: number, y: number): this;
+    /** {@link Element.scrollIntoView} */
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): this;
+    /** {@link Element.scrollTo} */
+    scrollTo(options?: ScrollToOptions): this;
+    scrollTo(x: number, y: number): this;
+    /** {@link Element.setAttribute} */
+    setAttribute(qualifiedName: string, value: string): this;
+    /** {@link Element.setAttributeNS} */
+    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): this;
+    /** {@link Element.setAttributeNode} */
+    setAttributeNode(attr: Attr): Attr | null;
+    /** {@link Element.setAttributeNodeNS} */
+    setAttributeNodeNS(attr: Attr): Attr | null;
+    /** {@link Element.setHTMLUnsafe} */
+    setHTMLUnsafe(html: string): this;
+    /** {@link Element.setPointerCapture} */
+    setPointerCapture(pointerId: number): this;
+    /** {@link Element.toggleAttribute} */
+    toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+
+    /** {@link Element.classList} */
+    classList(): DOMTokenList;
+    classList(value: $Parameter<string>): this;
+    /** {@link Element.className} */
+    className(): string;
+    className(value: $Parameter<string>): this;
+    /** {@link Element.id} */
+    id(): string;
+    id(id: $Parameter<string>): this;
+    /** {@link Element.innerHTML} */
+    innerHTML(): string;
+    innerHTML(innerHTML: $Parameter<string>): this;
+    /** {@link Element.outerHTML} */
+    outerHTML(): string;
+    outerHTML(outerHTML: $Parameter<string>): this;
+    /** {@link Element.part} */
+    part(): DOMTokenList;
+    part(part: $Parameter<string>): this;
+    /** {@link Element.scrollLeft} */
+    scrollLeft(): number;
+    scrollLeft(scrollLeft: $Parameter<number>): this;
+    /** {@link Element.scrollTop} */
+    scrollTop(): number;
+    scrollTop(scrollTop: $Parameter<number>): this;
+    /** {@link Element.slot} */
+    slot(): string;
+    slot(slot: $Parameter<string>): this;
+    
+
+    on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
+    on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+
+    off(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this;
+    off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
+
+    once(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
+    once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
 }

package/src/node/$HTMLElement.ts

@@ -0,0 +1,76 @@
+import { $Element } from "#node/$Element";
+
+export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
+    constructor(resolver: string | Ele) {
+        super(resolver);
+    }
+}
+
+export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
+    /** {@link HTMLElement.accessKeyLabel} */
+    readonly accessKeyLabel: string;
+    /** {@link HTMLElement.offsetHeight} */
+    readonly offsetHeight: number;
+    /** {@link HTMLElement.offsetLeft} */
+    readonly offsetLeft: number;
+    /** {@link HTMLElement.offsetParent} */
+    readonly offsetParent: Element | null;
+    /** {@link HTMLElement.offsetTop} */
+    readonly offsetTop: number;
+    /** {@link HTMLElement.offsetWidth} */
+    readonly offsetWidth: number;
+
+    /** {@link HTMLElement.attachInternals} */
+    attachInternals(): ElementInternals;
+    /** {@link HTMLElement.click} */
+    click(): this;
+    /** {@link HTMLElement.hidePopover} */
+    hidePopover(): this;
+    /** {@link HTMLElement.showPopover} */
+    showPopover(): this;
+    /** {@link HTMLElement.togglePopover} */
+    togglePopover(options?: boolean): boolean;
+
+    /** {@link HTMLElement.accessKey} */
+    accessKey(): string;
+    accessKey(accessKey: $Parameter<string>): this;
+    /** {@link HTMLElement.autocapitalize} */
+    autocapitalize(): string;
+    autocapitalize(autocapitalize: $Parameter<string>): this;
+    /** {@link HTMLElement.dir} */
+    dir(): string;
+    dir(dir: $Parameter<string>): this;
+    /** {@link HTMLElement.draggable} */
+    draggable(): boolean;
+    draggable(draggable: $Parameter<boolean>): this;
+    /** {@link HTMLElement.hidden} */
+    hidden(): boolean;
+    hidden(hidden: $Parameter<boolean>): this;
+    /** {@link HTMLElement.inert} */
+    inert(): boolean;
+    inert(inert: $Parameter<boolean>): this;
+    /** {@link HTMLElement.innerText} */
+    innerText(): string;
+    innerText(innerText: $Parameter<string>): this;
+    /** {@link HTMLElement.lang} */
+    lang(): string;
+    lang(lang: $Parameter<string>): this;
+    /** {@link HTMLElement.outerText} */
+    outerText(): string;
+    outerText(outerText: $Parameter<string>): this;
+    /** {@link HTMLElement.popover} */
+    popover(): string | null;
+    popover(popover: $Parameter<string | null>): this;
+    /** {@link HTMLElement.spellcheck} */
+    spellcheck(): boolean;
+    spellcheck(spellcheck: $Parameter<boolean>): this;
+    /** {@link HTMLElement.title} */
+    title(): string;
+    title(title: $Parameter<string>): this;
+    /** {@link HTMLElement.translate} */
+    translate(): string;
+    translate(translate: $Parameter<boolean>): this;
+    /** {@link HTMLElement.writingSuggestions} */
+    writingSuggestions(): string;
+    writingSuggestions(writingSuggestions: $Parameter<string>): this;
+}

package/src/node/$Node.ts

@@ -1,81 +1,173 @@
-import { _Array_from, _instanceof, isFunction, isNull, isObject, isUndefined } from "#lib/native";
+import { _Array_from, _document, _instanceof, _JSON_stringify, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
 import { Signal } from "#structure/Signal";
 
 export class $Node {
-    node: Node;
-    constructor(node: Node) {
+    node: Node & ChildNode;
+    constructor(node: Node & ChildNode) {
         this.node = node;
         //@ts-expect-error
         this.node.$ = this;
     }
 
     content(children: $NodeContentResolver<this>) {
-        _Array_from(this.node.childNodes).forEach(node => node.remove());
+        forEach(_Array_from(this.childNodes), node => node.remove());
         return this.insert(children);
     }
 
     insert(resolver: $NodeContentResolver<this>, position = -1) {
-        if (isFunction(resolver)) {
-            const content = resolver(this);
-            if (_instanceof(content, Promise)) content.then(content => $Node.insertChild(this.node, content, position))
-            else $Node.insertChild(this.node, content, position);
-        } else $Node.insertChild(this.node, resolver, position);
+        // insert node helper function for depend position
+        const appendChild = (children: OrArray<$Node | undefined | null>) => {
+            // get child node at position
+            const positionChild = _Array_from(this.childNodes).filter(node => node.nodeType !== node.TEXT_NODE).at(position);
+            forEach($.toArray(children), child => {
+                if (!child) return;
+                if (_instanceof(child, Array)) this.insert(child);
+                else if (!positionChild) this.appendChild(child.node);
+                else this.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
+            })
+        }
+        // process nodes
+        for (const child of $.toArray(resolver)) !isUndefined(child) && appendChild(processContent(this, child))
         return this;
     }
 
     await<T>(promise: Promise<T>, callback: ($node: this, result: T) => void): this {
-        promise.then(result => callback(this, result));
-        return this;
+        return promise.then(result => callback(this, result)), this;
     }
 
-    replace($node: $NodeContentTypes | undefined | null) {
+    replace($node: $NodeContentResolver<$Node>) {
         if (!$node) return this;
-        this.node.parentNode?.replaceChild($Node.processContent($node), this.node);
-        return this; 
+        this.replaceWith(
+            ...$.toArray(processContent(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
+        )
+        return this;
     }
 
-    static insertChild(node: Node, children: OrArray<OrPromise<$NodeContentTypes>>, position = -1) {
-        children = $.orArrayResolver(children);
-        // get child node at position
-        const positionChild = _Array_from(node.childNodes).filter(node => node.nodeType !== node.TEXT_NODE).at(position);
-        // insert node helper function for depend position
-        const append = (child: Node | undefined | null) => {
-            if (!child) return;
-            if (!positionChild) node.appendChild(child);
-            else node.insertBefore(child, position < 0 ? positionChild.nextSibling : positionChild);
-        }
-        // process nodes
-        for (const child of children) !isUndefined(child) && append($Node.processContent(child))
+    toString() {
+        return this.textContent();
     }
+}
 
-    static processContent(content: $NodeContentTypes): Node;
-    static processContent(content: undefined | null): undefined | null;
-    static processContent(content: OrPromise<undefined | null>): undefined | null;
-    static processContent(content: OrPromise<$NodeContentTypes>): Node;
-    static processContent(content: OrPromise<$NodeContentTypes | undefined | null>): Node | undefined | null
-    static processContent(content: OrPromise<$NodeContentTypes | undefined | null>) {
-        if (isUndefined(content)) return;
-        if (isNull(content)) return content;
-        // is $Element
-        if (_instanceof(content, $Node)) return content.node;
-        // is Promise
-        if (_instanceof(content, Promise)) {
-            const async = $('async').await(content, ($async, $child) => $async.replace($child));
-            return async.node;
-        }
-        // is SignalFunction
-        if (isFunction(content) && _instanceof((content as $.SignalFunction<any>).signal ,Signal)) {
-            const text = new Text();
-            const set = (value: any) => text.textContent = isObject(value) ? JSON.stringify(value) : value;
-            (content as $.SignalFunction<any>).signal.subscribe(set);
-            set((content as $.SignalFunction<any>)());
-            return text;
+function processContent<T extends $Node>($node: T, content: $NodeContentResolver<any>): OrArray<$Node | undefined | null> {
+    if (isUndefined(content)) return;
+    if (isNull(content)) return content;
+    // is $Element
+    if (_instanceof(content, $Node)) return content;
+    // is Promise
+    if (_instanceof(content, Promise)) return $('async').await(content, ($async, $child) => $async.replace($child as any));
+    // is SignalFunction or ContentHandler
+    if (isFunction(content)) {
+        const signal = (content as any).signal;
+        if (_instanceof(signal, Signal)) {
+            const resolver = (content as $.SignalFunction<any>)();
+            if (_instanceof(resolver, $Node)) {
+                // handler signal $Node result
+                let node = resolver;
+                const set = (value: any) => {
+                    node.replace(value);
+                    node = value;
+                }
+                signal.subscribe(set);
+                return resolver;
+            } else {
+                // handler signal other type result
+                const $text = _document ? new $Text() : $('signal').attr({ type: typeof signal.value() });
+                const set = (value: any) => $text.textContent(isObject(value) ? _JSON_stringify(value) : value);
+                if (_instanceof($text, $Text)) $text.signals.add(signal);
+                signal.subscribe(set);
+                set(resolver);
+                return $text;
+            }
+        } else {
+            const _content = content($node) as $NodeContentResolver<$Node>;
+            if (_instanceof(_content, Promise)) return processContent($node, _content as any);
+            else return $.toArray(_content).map(content => processContent($node, content) as $Node);
         }
-        // is string | number | boolean
-        return new Text(`${content}`);
     }
+    // is nested array
+    if (_instanceof(content, Array)) return content.map(c => processContent($node, c) as $Node)
+    // is string | number | boolean
+    return new $Text(`${content}`);
 }
 
-export type $NodeContentTypes = $Node | string | number | boolean | $.SignalFunction<any>;
-export type $NodeContentHandler<T extends $Node> = ($node: T) => OrPromise<OrArray<$NodeContentTypes>>;
-export type $NodeContentResolver<T extends $Node> = $NodeContentHandler<T> | OrArray<OrPromise<$NodeContentTypes>>
+export class $Text extends $Node {
+    signals = new Set<Signal<any>>();
+    constructor(textContent?: string) {
+        super(new Text(textContent));
+    }
+}
+
+export type $NodeContentHandler<T extends $Node> = ($node: T) => OrPromise<$NodeContentResolver<T>>;
+export type $NodeContentTypes = $Node | string | number | boolean | $.SignalFunction<any> | null | undefined;
+export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
+
+export interface $Node {
+    /** {@link Node.baseURI} */
+    readonly baseURI: string;
+    /** {@link Node.childNodes} */
+    readonly childNodes: NodeListOf<ChildNode>;
+    /** {@link Node.firstChild} */
+    readonly firstChild: ChildNode | null;
+    /** {@link Node.isConnected} */
+    readonly isConnected: boolean;
+    /** {@link Node.lastChild} */
+    readonly lastChild: ChildNode | null;
+    /** {@link Node.nextSibling} */
+    readonly nextSibling: ChildNode | null;
+    /** {@link Node.nodeName} */
+    readonly nodeName: string;
+    /** {@link Node.nodeType} */
+    readonly nodeType: number;
+    /** {@link Node.ownerDocument} */
+    readonly ownerDocument: Document | null;
+    /** {@link Node.parentElement} */
+    readonly parentElement?: HTMLElement | null;
+    /** {@link Node.parentNode} */
+    readonly parentNode?: ParentNode | null;
+    /** {@link Node.previousSibling} */
+    readonly previousSibling?: ChildNode | null;
+    
+    /** {@link Node.appendChild} */
+    appendChild<T extends Node>(node: T): T;
+    /** {@link Node.cloneNode} */
+    cloneNode(subtree?: boolean): Node;
+    /** {@link Node.compareDocumentPosition} */
+    compareDocumentPosition(other: Node): number;
+    /** {@link Node.getRootNode} */
+    getRootNode(options?: GetRootNodeOptions): Node;
+    /** {@link Node.hasChildNodes} */
+    hasChildNodes(): boolean;
+    /** {@link Node.insertBefore} */
+    insertBefore<T extends Node>(node: T, child: Node | null): T;
+    /** {@link Node.isDefaultNamespace} */
+    isDefaultNamespace(namespace: string | null): boolean;
+    /** {@link Node.isEqualNode} */
+    isEqualNode(otherNode: Node | null): boolean;
+    /** {@link Node.isSameNode} */
+    isSameNode(otherNode: Node | null): boolean;
+    /** {@link Node.lookupNamespaceURI} */
+    lookupNamespaceURI(prefix: string | null): string | null;
+    /** {@link Node.lookupPrefix} */
+    lookupPrefix(namespace: string | null): string | null;
+    /** {@link Node.normalize} */
+    normalize(): this;
+    /** {@link Node.removeChild} */
+    removeChild<T extends Node>(child: T): T;
+    /** {@link Node.replaceChild} */
+    replaceChild<T extends Node>(node: Node, child: T): T;
+    /** {@link Node.replaceChild} */
+    after(...nodes: (Node | string)[]): this;
+    /** {@link Node.replaceChild} */
+    before(...nodes: (Node | string)[]): this;
+    /** {@link Node.replaceChild} */
+    remove(): this;
+    /** {@link Node.replaceChild} */
+    replaceWith(...nodes: (Node | string)[]): this;
+
+    /** {@link Node.nodeValue} */
+    nodeValue(nodeValue: $Parameter<string | null>): this;
+    nodeValue(): string | null;
+    /** {@link Node.textContent} */
+    textContent(textContent: $Parameter<string | null>): this;
+    textContent(): string | null;
+}

package/src/node/node.ts

@@ -1,11 +1,13 @@
+import { $HTMLElement } from '#node/$HTMLElement';
 import { assignHelper } from '#lib/assignHelper';
 import { $Element } from '#node/$Element';
-import { $Node } from './$Node';
+import { $Node, $Text } from './$Node';
 
-export * from './$Element';
 export * from './$Node';
+export * from './$Element';
+export * from './$HTMLElement';
 
-assignHelper([
-    [Node, $Node], 
-    [Element, $Element],
-])
+assignHelper(Node, $Node);
+assignHelper(Text, $Text);
+assignHelper(Element, $Element);
+assignHelper(HTMLElement, $HTMLElement);

package/src/structure/Signal.ts

@@ -1,4 +1,4 @@
-import { isUndefined } from "#lib/native";
+import { _instanceof, forEach, isUndefined } from "#lib/native";
 
 export class Signal<T> {
     #value: T;
@@ -13,10 +13,10 @@ export class Signal<T> {
     value(callback: (oldValue: T) => T): this;
     value(resolver?: T | ((oldValue: T) => T)) {
         if (!arguments.length) {
-            Signal.listeners.forEach(fn => fn(this));
+            forEach(Signal.listeners, fn => fn(this));
             return this.#value;
         }
-        if (resolver instanceof Function) this.value(resolver(this.#value));
+        if (_instanceof(resolver, Function)) this.value(resolver(this.#value));
         else if (!isUndefined(resolver)) {
             this.#value = resolver;
             this.emit();
@@ -25,7 +25,7 @@ export class Signal<T> {
     }
 
     emit() {
-        this.subscribers.forEach(subs => subs(this.#value))
+        forEach(this.subscribers, subs => subs(this.#value))
         return this;
     }
 

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     // Environment setup & latest features
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "target": "ESNext",
     "module": "ESNext",
     "moduleDetection": "force",

package/ext/css/src/structure/$CSSKeyframeRule.ts

@@ -1,13 +0,0 @@
-import { $CSSStyleRule } from "#structure/$CSSStyleRule";
-
-export class $CSSKeyframeRule extends $CSSStyleRule {
-    keyframe: string
-    constructor(keyframe: string) {
-        super();
-        this.keyframe = keyframe;
-    }
-
-    get css(): string {
-        return `${this.keyframe} { ${Array.from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
-    }
-}

package/ext/html/node/$HTMLElement.ts

@@ -1,7 +0,0 @@
-import { $Element } from "#node/$Element";
-
-export class $HTMLElement<Ele extends HTMLElement = HTMLElement> extends $Element<Ele> {
-    constructor(resolver: string | Ele) {
-        super(resolver);
-    }
-}