amateras 0.3.0 → 0.4.0

package/src/node/$Element.ts

@@ -1,6 +1,7 @@
 import { Signal } from "#structure/Signal";
 import { $Node } from "#node/$Node";
-import { _Array_from, _document, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isFunction, isString, isUndefined } from "#lib/native";
+import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isNull, isString, isUndefined } from "#lib/native";
+import { _document } from "#lib/env";
 
 export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node {
     declare node: Ele
@@ -12,12 +13,12 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
 
     attr(): {[key: string]: string};
     attr(key: string): string | null;
-    attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
-    attr(resolver?: {[key: string]: string | number | boolean | Signal<any>} | string) {
+    attr(obj: {[key: string]: string | number | boolean | Signal<any> | null}): this;
+    attr(resolver?: {[key: string]: string | number | boolean | Signal<any> | null} | 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}`)
+            const set = (value: any) => !isUndefined(value) && isNull(value) ? this.removeAttribute(key) : this.setAttribute(key, `${value}`)
             if (_instanceof(value, Signal)) value = value.subscribe(set).value();
             set(value);
         }
@@ -39,28 +40,18 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
         return this;
     }
 
-    use(callback: ($ele: this) => void) {
-        callback(this);
-        return this;
-    }
-
     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);
+        this.addEventListener(type as string, listener as any, options);
         return this;
     }
 
     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);
+        this.removeEventListener(type as string, listener as any, options);
         return this;
     }
     
     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;
+        return this.on(type, listener, {once: true})
     }
 
     toString() {
@@ -68,14 +59,15 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     }
 }
 
-export type EventMap = {[key: string]: Event}
-export type $Event<E extends $Element, Ev = any> = Ev & {target: {$: E}};
+export type $Event<E extends $Element, Ev = any> = Ev & {currentTarget: {$: 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) {
+    return !_document 
     //@ts-expect-error
-    return !_document ? new Node(nodeName) as unknown as Node & ChildNode : _document.createElement(nodeName);
+    ? new Node(nodeName) as unknown as Node & ChildNode 
+    : _document.createElement(nodeName);
 }
 
 export interface $Element<Ele extends Element, EvMap> {
@@ -107,6 +99,20 @@ export interface $Element<Ele extends Element, EvMap> {
     readonly shadowRoot: ShadowRoot | null;
     /** {@link Element.tagName} */
     readonly tagName: string;
+    /** {@link Element.nextElementSibling} */
+    readonly nextElementSibling: Element | null;
+    /** {@link Element.previousElementSibling} */
+    readonly previousElementSibling: Element | null;
+    /** {@link Element.childElementCount} */
+    readonly childElementCount: number;
+    /** {@link Element.children} */
+    readonly children: HTMLCollection;
+    /** {@link Element.firstElementChild} */
+    readonly firstElementChild: Element | null;
+    /** {@link Element.lastElementChild} */
+    readonly lastElementChild: Element | null;
+    /** {@link Element.assignedSlot} */
+    readonly assignedSlot: HTMLSlotElement | null;
 
     /** {@link Element.attachShadow} */
     attachShadow(init: ShadowRootInit): ShadowRoot;
@@ -200,6 +206,24 @@ export interface $Element<Ele extends Element, EvMap> {
     setPointerCapture(pointerId: number): this;
     /** {@link Element.toggleAttribute} */
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+    /** {@link Element.animate} */
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+    /** {@link Element.getAnimations} */
+    getAnimations(options?: GetAnimationsOptions): Animation[];
+    /** {@link Element.append} */
+    append(...nodes: (Node | string)[]): this;
+    /** {@link Element.prepend} */
+    prepend(...nodes: (Node | string)[]): this;
+    /** {@link Element.querySelector} */
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    /** {@link Element.querySelectorAll} */
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    /** {@link Element.replaceChildren} */
+    replaceChildren(...nodes: (Node | string)[]): this;
 
     /** {@link Element.classList} */
     classList(): DOMTokenList;
@@ -228,6 +252,144 @@ export interface $Element<Ele extends Element, EvMap> {
     /** {@link Element.slot} */
     slot(): string;
     slot(slot: $Parameter<string>): this;
+
+    // ARIAMixin
+    /** {@link ARIAMixin.ariaAtomic} */
+    ariaAtomic(): string | null;
+    ariaAtomic(ariaAtomic: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaAutoComplete} */
+    ariaAutoComplete(): string | null;
+    ariaAutoComplete(ariaAutoComplete: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaBrailleLabel} */
+    ariaBrailleLabel(): string | null;
+    ariaBrailleLabel(ariaBrailleLabel: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaBrailleRoleDescription} */
+    ariaBrailleRoleDescription(): string | null;
+    ariaBrailleRoleDescription(ariaBrailleRoleDescription: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaBusy} */
+    ariaBusy(): string | null;
+    ariaBusy(ariaBusy: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaChecked} */
+    ariaChecked(): string | null;
+    ariaChecked(ariaChecked: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColCount} */
+    ariaColCount(): string | null;
+    ariaColCount(ariaColCount: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColIndex} */
+    ariaColIndex(): string | null;
+    ariaColIndex(ariaColIndex: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColIndexText} */
+    ariaColIndexText(): string | null;
+    ariaColIndexText(ariaColIndexText: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaColSpan} */
+    ariaColSpan(): string | null;
+    ariaColSpan(ariaColSpan: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaCurrent} */
+    ariaCurrent(): string | null;
+    ariaCurrent(ariaCurrent: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaDescription} */
+    ariaDescription(): string | null;
+    ariaDescription(ariaDescription: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaDisabled} */
+    ariaDisabled(): string | null;
+    ariaDisabled(ariaDisabled: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaExpanded} */
+    ariaExpanded(): string | null;
+    ariaExpanded(ariaExpanded: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaHasPopup} */
+    ariaHasPopup(): string | null;
+    ariaHasPopup(ariaHasPopup: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaHidden} */
+    ariaHidden(): string | null;
+    ariaHidden(ariaHidden: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaInvalid} */
+    ariaInvalid(): string | null;
+    ariaInvalid(ariaInvalid: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaKeyShortcuts} */
+    ariaKeyShortcuts(): string | null;
+    ariaKeyShortcuts(ariaKeyShortcuts: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaLabel} */
+    ariaLabel(): string | null;
+    ariaLabel(ariaLabel: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaLevel} */
+    ariaLevel(): string | null;
+    ariaLevel(ariaLevel: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaLive} */
+    ariaLive(): string | null;
+    ariaLive(ariaLive: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaModal} */
+    ariaModal(): string | null;
+    ariaModal(ariaModal: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaMultiLine} */
+    ariaMultiLine(): string | null;
+    ariaMultiLine(ariaMultiLine: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaMultiSelectable} */
+    ariaMultiSelectable(): string | null;
+    ariaMultiSelectable(ariaMultiSelectable: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaOrientation} */
+    ariaOrientation(): string | null;
+    ariaOrientation(ariaOrientation: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaPlaceholder} */
+    ariaPlaceholder(): string | null;
+    ariaPlaceholder(ariaPlaceholder: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaPosInSet} */
+    ariaPosInSet(): string | null;
+    ariaPosInSet(ariaPosInSet: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaPressed} */
+    ariaPressed(): string | null;
+    ariaPressed(ariaPressed: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaReadOnly} */
+    ariaReadOnly(): string | null;
+    ariaReadOnly(ariaReadOnly: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRelevant} */
+    ariaRelevant(): string | null;
+    ariaRelevant(ariaRelevant: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRequired} */
+    ariaRequired(): string | null;
+    ariaRequired(ariaRequired: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRoleDescription} */
+    ariaRoleDescription(): string | null;
+    ariaRoleDescription(ariaRoleDescription: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowCount} */
+    ariaRowCount(): string | null;
+    ariaRowCount(ariaRowCount: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowIndex} */
+    ariaRowIndex(): string | null;
+    ariaRowIndex(ariaRowIndex: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowIndexText} */
+    ariaRowIndexText(): string | null;
+    ariaRowIndexText(ariaRowIndexText: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaRowSpan} */
+    ariaRowSpan(): string | null;
+    ariaRowSpan(ariaRowSpan: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaSelected} */
+    ariaSelected(): string | null;
+    ariaSelected(ariaSelected: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaSetSize} */
+    ariaSetSize(): string | null;
+    ariaSetSize(ariaSetSize: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaSort} */
+    ariaSort(): string | null;
+    ariaSort(ariaSort: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueMax} */
+    ariaValueMax(): string | null;
+    ariaValueMax(ariaValueMax: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueMin} */
+    ariaValueMin(): string | null;
+    ariaValueMin(ariaValueMin: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueNow} */
+    ariaValueNow(): string | null;
+    ariaValueNow(ariaValueNow: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.ariaValueText} */
+    ariaValueText(): string | null;
+    ariaValueText(ariaValueText: $Parameter<string | null>): this;
+    /** {@link ARIAMixin.role} */
+    role(): string | null;
+    role(role: $Parameter<string | null>): this;
+    addEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): void;
     
 
     on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;

package/src/node/$HTMLElement.ts

@@ -1,11 +1,24 @@
+import { _Object_entries, forEach } from "#lib/native";
 import { $Element } from "#node/$Element";
 
 export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
     constructor(resolver: string | Ele) {
         super(resolver);
     }
+    
+    style(): CSSStyleDeclaration;
+    style(style: Partial<CSSStyleDeclarationOptions> | undefined): this
+    style(style?: Partial<CSSStyleDeclarationOptions> | undefined) {
+        let _style = this.node.style
+        if (!arguments.length) return _style
+        if (!style) return this;
+        forEach(_Object_entries(style), ([key, value]) => _style[key as any] = value ?? '')
+        return this;
+    }
 }
 
+type CSSStyleDeclarationOptions = Omit<CSSStyleDeclaration, 'parentRule' | 'length' | 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty'>;
+
 export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {
     /** {@link HTMLElement.accessKeyLabel} */
     readonly accessKeyLabel: string;
@@ -19,6 +32,8 @@ export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTM
     readonly offsetTop: number;
     /** {@link HTMLElement.offsetWidth} */
     readonly offsetWidth: number;
+    /** {@link HTMLElement.isContentEditable} */
+    readonly isContentEditable: boolean;
 
     /** {@link HTMLElement.attachInternals} */
     attachInternals(): ElementInternals;
@@ -73,4 +88,13 @@ export interface $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTM
     /** {@link HTMLElement.writingSuggestions} */
     writingSuggestions(): string;
     writingSuggestions(writingSuggestions: $Parameter<string>): this;
+    /** {@link HTMLElement.contentEditable} */
+    contentEditable(): string;
+    contentEditable(contentEditable: $Parameter<string>): this;
+    /** {@link HTMLElement.enterKeyHint} */
+    enterKeyHint(): string;
+    enterKeyHint(enterKeyHint: $Parameter<string>): this;
+    /** {@link HTMLElement.inputMode} */
+    inputMode(): string;
+    inputMode(inputMode: $Parameter<string>): this;
 }

package/src/node/$Node.ts

@@ -1,4 +1,5 @@
-import { _Array_from, _document, _instanceof, _JSON_stringify, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
+import { _document } from "#lib/env";
+import { _Array_from, _instanceof, _JSON_stringify, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
 import { Signal } from "#structure/Signal";
 
 export class $Node {
@@ -10,84 +11,100 @@ export class $Node {
     }
 
     content(children: $NodeContentResolver<this>) {
+        if (isUndefined(children)) return this;
         forEach(_Array_from(this.childNodes), node => node.remove());
         return this.insert(children);
     }
 
     insert(resolver: $NodeContentResolver<this>, position = -1) {
-        // 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))
+        forEach($.toArray(resolver), resolve_child => forEach($Node.process(this, resolve_child), $node => $Node.append(this, $node, position)));
         return this;
     }
 
-    await<T>(promise: Promise<T>, callback: ($node: this, result: T) => void): this {
-        return promise.then(result => callback(this, result)), this;
+    await<T>(promise: OrPromise<T>, callback: ($node: this, result: T) => void): this {
+        if (_instanceof(promise, Promise)) return promise.then(result => callback(this, result)), this;
+        else return callback(this, promise), this;
     }
 
     replace($node: $NodeContentResolver<$Node>) {
         if (!$node) return this;
         this.replaceWith(
-            ...$.toArray(processContent(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
+            ...$.toArray($Node.process(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
         )
         return this;
     }
 
+    inDOM() {
+        return _document.contains(this.node);
+    }
+
     toString() {
         return this.textContent();
     }
-}
 
-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;
+    mounted($parent: $Node) {
+        return this;
+    }
+    
+    use<F extends ($ele: this, ...args: any) => void>(callback: F, ...args: F extends ($ele: this, ...args: infer P) => void ? P : never) {
+        callback(this, ...args);
+        return this;
+    }
+
+    is<T extends (abstract new (...args: any[]) => $Node)>(instance: T): InstanceType<T> | null {
+        return _instanceof(this, instance) ? this : null;
+    }
+
+    static process<T extends $Node>($node: T, content: $NodeContentResolver<any>): Array<$Node | undefined | null> {
+        if (isUndefined(content) || isNull(content) || _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];
                 }
-                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;
+                const _content = content($node) as $NodeContentResolver<$Node>;
+                if (_instanceof(_content, Promise)) return this.process($node, _content as any);
+                else return $.toArray(_content).map(content => this.process($node, content)).flat();
             }
-        } 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 nested array
+        if (_instanceof(content, Array)) return content.map(c => this.process($node, c)).flat();
+        // is string | number | boolean
+        return [new $Text(`${content}`)];
+    }
+
+    /**  */
+    static append($node: $Node, child: $Node | undefined | null, position: number) {
+        // insert each child, child may be an array
+        if (!child) return;
+        // get child node at position
+        let positionChild = _Array_from($node.childNodes).at(position);
+        if (!positionChild) $node.appendChild(child.node);
+        else $node.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
+        child.mounted($node);
     }
-    // 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 class $Text extends $Node {
@@ -163,6 +180,12 @@ export interface $Node {
     remove(): this;
     /** {@link Node.replaceChild} */
     replaceWith(...nodes: (Node | string)[]): this;
+    /** {@link EventTarget.addEventListener} */
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
+    /** {@link EventTarget.removeEventListener} */
+    removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+    /** {@link EventTarget.dispatchEvent} */
+    dispatchEvent(event: Event): boolean;
 
     /** {@link Node.nodeValue} */
     nodeValue(nodeValue: $Parameter<string | null>): this;

package/src/node/$Virtual.ts

@@ -0,0 +1,58 @@
+import { forEach, _Array_from, isUndefined, _instanceof } from "#lib/native";
+import { $HTMLElement } from "#node/$HTMLElement";
+import { $Node, type $NodeContentResolver } from "#node/$Node";
+
+export class $Virtual<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $HTMLElement<Ele, EvMap> {
+    nodes = new Set<$Node>;
+    hiddenNodes = new Set<$Node>;
+    constructor(resolver: string | Ele) {
+        super(resolver);
+    }
+
+    content(children: $NodeContentResolver<this>) {
+        this.nodes.clear();
+        forEach(_Array_from(this.childNodes), node => node.remove());
+        return this.insert(children);
+    }
+
+    insert(resolver: $NodeContentResolver<this>, position = -1) {
+        // process nodes
+        forEach($.toArray(resolver), resolve_child => {
+            forEach($Node.process(this, resolve_child), $node => $Virtual.append(this, $node, position))
+        });
+        this.render();
+        return this;
+    }
+
+    hide($node?: $Node | null) {
+        if (!$node || !this.nodes.has($node)) return this;
+        this.hiddenNodes.add($node);
+        return this;
+    }
+
+    show($node?: $Node | null) {
+        if (!$node) return this;
+        this.hiddenNodes.delete($node);
+        return this;
+    }
+
+    render() {
+        // remove hidden node
+        forEach(_Array_from(this.childNodes), node => this.hiddenNodes.has($(node)) && node.remove());
+        // add visible node with position
+        forEach(_Array_from(this.nodes), ($node, i) => {
+            if (this.hiddenNodes.has($node)) return;
+            if (_Array_from(this.childNodes).at(i) !== $node.node) $Node.append(this, $node, i);
+        })
+        return this;
+    }
+
+    static append($node: $Virtual, child: $Node | undefined | null, position: number) {
+        if (!child) return;
+        const childList = _Array_from($node.nodes);
+        let $positionChild = childList.at(position);
+        if (!$positionChild) childList.push(child);
+        else childList.splice(position >= 0 ? position : childList.length + 1 + position, 0, child);
+        $node.nodes = new Set(childList);
+    }
+}

package/src/{node/node.ts → node.ts}

@@ -1,12 +1,9 @@
 import { $HTMLElement } from '#node/$HTMLElement';
 import { assignHelper } from '#lib/assignHelper';
 import { $Element } from '#node/$Element';
-import { $Node, $Text } from './$Node';
-
-export * from './$Node';
-export * from './$Element';
-export * from './$HTMLElement';
+import { $Node, $Text } from '#node/$Node';
 
+assignHelper(EventTarget, $Node);
 assignHelper(Node, $Node);
 assignHelper(Text, $Text);
 assignHelper(Element, $Element);