amateras 0.4.2 → 0.6.0

package/src/global.ts

@@ -1,7 +1,7 @@
 import type { $Element } from '#node/$Element';
 import type { $Node } from '#node/$Node';
 import * as core from '#core';
-import type { Signal } from '#structure/Signal';
+import type { $EventTarget } from '#node/$EventTarget';
 
 declare global {
     export import $ = core.$;
@@ -11,7 +11,14 @@ declare global {
     type OrPromise<T> = T | Promise<T>;
     type OrNullish<T> = T | Nullish;
     type Constructor<T> = { new (...args: any[]): T }
-    type $Parameter<T> = T | undefined | Signal<T> | Signal<T | undefined>
+    type Mutable<T> = {
+        -readonly [P in keyof T]: T[P];
+    }
+    type AsyncFunction<T> = () => Promise<T>;
+    type $Parameter<T> = T | undefined | $.$NodeParameterExtends<T>
+    type Ok<D> = [data: D, err: null];
+    type Err<E> = [data: null, err: E]
+    type Result<D, E> = Ok<D> | Err<E>
     type Repeat<T, N extends number, Acc extends T[] = []> = 
         Acc['length'] extends N 
             ? Acc 
@@ -22,6 +29,9 @@ declare global {
     interface Node {
         readonly $: $Node
     }
+    interface EventTarget {
+        readonly $: $EventTarget
+    }
     interface Element {
         readonly $: $Element
     }

package/src/index.ts

@@ -1,3 +1,2 @@
 import '#core';
-export * from '#core';
-export * from '#structure/Signal';
+export * from '#core';

package/src/lib/assignProperties.ts

@@ -0,0 +1,57 @@
+import type { $EventTarget } from "#node/$EventTarget";
+import { $Node } from "#node/$Node";
+import { _instanceof, _null, _Object_defineProperty, _Object_entries, _Object_getOwnPropertyDescriptors, forEach, isUndefined } from "./native";
+
+const assigner = (target: any, {set, get, fn}: { 
+    set?: string[], 
+    get?: string[], 
+    fn?: string[]
+}) => {
+    const [GET, SET, FN] = ['get', 'set', 'fn'] as const;
+    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => arr?.map(prop => [type, prop]) ?? []
+    const list = [...filterAndMap(GET, get), ...filterAndMap(SET, set), ...filterAndMap(FN, fn)] as [string, string][];
+    forEach(list, ([type, prop]) => 
+        _Object_defineProperty(target.prototype, prop, {
+            ...(type === GET ? {
+                get() { return this.node[prop as any] }
+            } : {
+                writable: true,
+                ...(type === SET ? {
+                    // set
+                    value(this, args: any) {
+                        if (!arguments.length) return this.node[prop];
+                        let set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
+                        for (const setter of $Node.setters) {
+                            const result = setter(args, set);
+                            if (!isUndefined(result)) return set(result), this;
+                        }
+                        set(args)
+                        return this;
+                    }
+                } : {
+                    // fn
+                    value(this, ...args : any[]) {
+                        let result = this.node[prop](...args.map(value => _instanceof(value, $Node) ? value.node : value ?? _null))
+                        return isUndefined(result) ? this : result;
+                    }
+                })
+            }),
+
+        })
+    )
+}
+
+export const assignProperties = (object: Constructor<EventTarget>, target: Constructor<$EventTarget>, tagname?: string) => {
+    const [set, get, fn] = [[], [], []] as [string[], string[], string[]]
+    // assign native object properties to target
+    forEach(_Object_entries(_Object_getOwnPropertyDescriptors(object.prototype)), ([prop, value]) => {
+        if (!(prop in target.prototype)) {
+            if (value.get && !value.set) get.push(prop);
+            else if (value.value) fn.push(prop);
+            else if (value.get && value.set) set.push(prop);
+        }
+    })
+    assigner(target, {set, get, fn})
+    // register tagname
+    if (tagname) $.assign([tagname, target])
+}

package/src/lib/native.ts

@@ -1,5 +1,6 @@
 // Value
 export const _null = null;
+export const _undefined = undefined;
 // Object
 export const _Object_fromEntries = Object.fromEntries;
 export const _Object_entries = Object.entries;
@@ -9,27 +10,48 @@ export const _Object_defineProperty = Object.defineProperty;
 export const _Object_getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors;
 // Array
 export const _Array_from = Array.from;
-export const forEach: forEach = <T>(arr: any, fn: any, thisArgs?: any) => arr.forEach(fn, thisArgs);
+interface forEach {
+    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => Promise<void>): Promise<void>;
+    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => void): void;
+    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => Promise<void>): void;
+    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => void): void;
+    <K, V>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => Promise<void>): void;
+    <K, V>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => void): void;
+    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => Promise<void>): void;
+    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => void): void;
+}
+export const forEach: forEach = async (arr: any, fn: any) => {
+    let i = 0;
+    let isAsync = isAsyncFunction(fn);
+    let handle = async () => { for (let item of arr) { isAsync ? await fn(item, i, arr) : fn(item, i, arr); i++; } }
+    return isAsync ? new _Promise<void>(resolve => handle().then(resolve)) : handle();
+};
+// export const forEach: forEach = (arr: any, fn: any) => arr.forEach(fn);
 // type check
 export const _typeof = (target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') => typeof target === type;
 export const equal = <T, V extends T>(target: T, ...args: V[]): target is V => !!args.find(a => a === target);
 export const isString = (target: any): target is string => _typeof(target, 'string');
-export const isNumber = (target: any): target is number => _typeof(target, 'number')
-export const isObject = (target: any): target is object => _typeof(target, 'object')
-export const isFunction = (target: any): target is Function => _typeof(target, 'function')
+export const isBoolean = (target: any): target is boolean => _typeof(target, 'boolean');
+export const isNumber = (target: any): target is number => _typeof(target, 'number');
+export const isObject = (target: any): target is object => _typeof(target, 'object');
+export const isFunction = (target: any): target is Function => _typeof(target, 'function');
+export const isAsyncFunction = (target: any): target is AsyncFunction<Awaited<ReturnType<typeof target>>> => _instanceof(target, (async () => 0).constructor as any)
 export const isUndefined = (target: any): target is undefined => target === undefined;
 export const isNull = (target: any): target is null => target === _null;
+export const isArray = Array.isArray;
 export const _instanceof = <T extends (abstract new (...args: any[]) => any)[]>(target: any, ...instance: T): target is InstanceType<T[number]> => !!instance.find(i => target instanceof i);
 // JSON
 export const _JSON_stringify = JSON.stringify;
 export const _JSON_parse = JSON.parse;
 // String
 export const startsWith = (target: string, ...str: string[]) => !!str.find(s => target.startsWith(s));
+// String & Array
+interface slice {
+    (target: string, start?: number, end?: number): string;
+    <T>(target: Array<T>, start?: number, end?: number): T[];
+}
+export const slice: slice = (target: any, start?: number, end?: number) => target.slice(start, end);
 // Function
-export const _bind = (target: Function, obj: Object) => target.bind(obj);
-interface forEach {
-    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => any, thisArgs?: any): void;
-    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => any, thisArgs?: any): void;
-    <K, V>(set: Map<K, V>, fn: (value: V, key: K, index: number, map: Map<K, V>) => any, thisArgs?: any): void;
-    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => any, thisArgs?: any): void;
-}
+export const _bind = <T extends Function>(target: T, obj: Object): T => target.bind(obj);
+// Promise
+export const _Promise = Promise;

package/src/lib/sleep.ts

@@ -1 +1,3 @@
-export const sleep = async (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+import { _Promise } from "./native";
+
+export const sleep = async (ms: number) => new _Promise(resolve => setTimeout(resolve, ms));

package/src/lib/toArray.ts

@@ -0,0 +1,9 @@
+import { _instanceof, _Object_assign } from "./native";
+
+export const toArray = <T>(item: OrArray<T>): T[] => _instanceof(item, Array) ? item : [item];
+
+declare module '#core' {
+    export namespace $ {
+        export function toArray<T>(item: OrArray<T>): T[];
+    }
+}

package/src/lib/trycatch.ts

@@ -0,0 +1,17 @@
+import { _instanceof, _JSON_stringify, _null, _Object_assign } from "./native";
+
+export const trycatch = <D>(callback: () => D): Result<D, Error> => {
+    try {
+        return [callback(), _null];
+    } catch (err) {
+        return [_null, _instanceof(err, Error) ? err : new Error(_JSON_stringify(err))];
+    }
+}
+
+_Object_assign($, {trycatch})
+
+declare module '#core' {
+    export namespace $ {
+        export function trycatch <D>(callback: () => D): Result<D, Error>
+    }
+}

package/src/lib/uppercase.ts

@@ -0,0 +1,3 @@
+import { slice } from "./native";
+
+export const uppercase = (str: string, start?: number, end?: number) => `${slice(str, 0, start)}${slice(str, start, end).toUpperCase()}${end ? slice(str, end) : ''}`

package/src/node/$Element.ts

@@ -1,9 +1,8 @@
-import { Signal } from "#structure/Signal";
-import { $Node } from "#node/$Node";
 import { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, isNull, isString, isUndefined } from "#lib/native";
 import { _document } from "#lib/env";
+import { $Node } from "./$Node";
 
-export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node {
+export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> extends $Node<EvMap> {
     declare node: Ele
     constructor(resolver: Ele | string) {
         super(_instanceof(resolver, Element) ? resolver : createNode(resolver) as unknown as Ele)
@@ -13,14 +12,13 @@ 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> | null}): this;
-    attr(resolver?: {[key: string]: string | number | boolean | Signal<any> | null} | string) {
+    attr(obj: {[key: string]: string | number | boolean | null | undefined}): this;
+    attr(resolver?: {[key: string]: string | number | boolean | null | undefined} | 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) && isNull(value) ? this.removeAttribute(key) : this.setAttribute(key, `${value}`)
-            if (_instanceof(value, Signal)) value = value.subscribe(set).value();
-            set(value);
+            if (!isUndefined(value) && isNull(value)) this.removeAttribute(key);
+            else this.setAttribute(key, `${value}`);
         }
         return this;
     }
@@ -39,27 +37,11 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
         return this;
     }
 
-    on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
-        return this.addEventListener(type as string, listener as any, options);
-    }
-
-    off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions) {
-        return this.removeEventListener(type as string, listener as any, options);
-    }
-    
-    once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
-        return this.on(type, listener, {once: true})
-    }
-
     toString() {
         return this.outerHTML();
     }
 }
 
-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
@@ -67,7 +49,7 @@ function createNode(nodeName: string) {
     : _document.createElement(nodeName);
 }
 
-export interface $Element<Ele extends Element, EvMap> {
+export interface $Element<Ele extends Element, EvMap = ElementEventMap> {
     /** {@link Element.attributes} */
     readonly attributes: NamedNodeMap;
     /** {@link Element.clientHeight} */
@@ -207,20 +189,6 @@ export interface $Element<Ele extends Element, EvMap> {
     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;
@@ -383,18 +351,4 @@ export interface $Element<Ele extends Element, EvMap> {
     /** {@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): this;
-    addEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
-    removeEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
-    removeEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): 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/$EventTarget.ts

@@ -0,0 +1,45 @@
+import { isBoolean } from "#lib/native";
+
+export class $EventTarget<EvMap = {}> {
+    node: EventTarget;
+    constructor(node: EventTarget) {
+        this.node = node;
+        if (node !== window) (node as Mutable<EventTarget>).$ = this;
+    }
+    
+    on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
+        return this.addEventListener(type, listener, options);
+    }
+
+    off(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this {
+        return this.removeEventListener(type, listener, options);
+    }
+    
+    once(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
+        return this.on(type, listener, { once: true, ...(isBoolean(options) ? {capture: options} : options ?? {}) })
+    }
+}
+
+export type $Event<E extends $EventTarget, Ev = any> = Ev & {currentTarget: {$: E}};
+export type $EventListener<E extends $EventTarget, Ev> = (event: $Event<E, Ev>) => void;
+export type $EventListenerObject<E extends $EventTarget, Ev> = { handleEvent(object: $Event<E, Ev>): void; }
+
+export interface $EventTarget<EvMap = {}> {
+    /** {@link EventTarget.addEventListener} */
+    addEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+    addEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
+    /** {@link EventTarget.removeEventListener} */
+    removeEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
+    removeEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this;
+    /** {@link EventTarget.dispatchEvent} */
+    dispatchEvent(event: Event): boolean;
+    
+    on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+    on(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
+
+    off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): this;
+    off(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this;
+
+    once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions): this;
+    once(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this;
+}

package/src/node/$Node.ts

@@ -1,14 +1,15 @@
 import { chain } from "#lib/chain";
 import { _document } from "#lib/env";
-import { _Array_from, _instanceof, _JSON_stringify, _null, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
-import { Signal } from "#structure/Signal";
+import { _Array_from, _instanceof, _JSON_stringify, _null, _Promise, forEach, isFunction, isNull, isUndefined } from "#lib/native";
+import { toArray } from "#lib/toArray";
+import { $EventTarget } from "./$EventTarget";
 
-export class $Node {
-    node: Node & ChildNode;
+export class $Node<EvMap = {}> extends $EventTarget<EvMap> {
+    declare node: Node & ChildNode & ParentNode;
+    static processors = new Set<$NodeContentProcessor>();
+    static setters = new Set<$NodeSetterHandler>();
     constructor(node: Node & ChildNode) {
-        this.node = node;
-        //@ts-expect-error
-        this.node.$ = this;
+        super(node);
     }
 
     content(children: $NodeContentResolver<this>) {
@@ -20,7 +21,10 @@ export class $Node {
 
     insert(resolver: $NodeContentResolver<this>, position = -1) {
         // process nodes
-        forEach($.toArray(resolver), resolve_child => forEach($Node.process(this, resolve_child), $node => $Node.append(this, $node, position)));
+        forEach(toArray(resolver), resolve_child => forEach($Node.process(this, resolve_child), $node => {
+            $Node.append(this, $node, position);
+            if (position >= 0) position++;
+        }));
         return this;
     }
 
@@ -33,7 +37,7 @@ export class $Node {
     replace($node: $NodeContentResolver<$Node>) {
         if ($node) 
             this.replaceWith(
-                ...$.toArray($Node.process(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;
     }
@@ -58,37 +62,18 @@ export class $Node {
     }
 
     static process<T extends $Node>($node: T, content: $NodeContentResolver<any>): Array<$Node | undefined | null> {
+        for (const processor of this.processors) {
+            const result = processor($node, content);
+            if (result) return result;
+        }
         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))];
+        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 this.process($node, _content as any);
-                else return $.toArray(_content).map(content => this.process($node, content)).flat();
-            }
+            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();
         }
         // is nested array
         if (_instanceof(content, Array)) return content.map(c => this.process($node, c)).flat();
@@ -109,17 +94,18 @@ export class $Node {
 }
 
 export class $Text extends $Node {
-    signals = new Set<Signal<any>>();
     constructor(textContent?: string) {
         super(new Text(textContent));
     }
 }
 
+export type $NodeSetterHandler = (value: any, set: (value: any) => void) => any;
+export type $NodeContentProcessor = <N extends $Node>($node: N, content: $NodeContentResolver<N>) => Array<$Node | undefined | null> | void | undefined;
 export type $NodeContentHandler<T extends $Node> = ($node: T) => OrPromise<$NodeContentResolver<T>>;
-export type $NodeContentTypes = $Node | string | number | boolean | $.SignalFunction<any> | null | undefined;
+export type $NodeContentTypes = $Node | string | number | boolean | $.$NodeContentTypeExtends | null | undefined;
 export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
 
-export interface $Node {
+export interface $Node<EvMap = {}> extends $EventTarget<EvMap> {
     /** {@link Node.baseURI} */
     readonly baseURI: string;
     /** {@link Node.childNodes} */
@@ -144,13 +130,21 @@ export interface $Node {
     readonly parentNode?: ParentNode | null;
     /** {@link Node.previousSibling} */
     readonly previousSibling?: ChildNode | null;
+    /** {@link ParentNode.childElementCount} */
+    readonly childElementCount: number;
+    /** {@link ParentNode.children} */
+    readonly children: HTMLCollection;
+    /** {@link ParentNode.firstElementChild} */
+    readonly firstElementChild: Element | null;
+    /** {@link ParentNode.lastElementChild} */
+    readonly lastElementChild: Element | 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;
+    compareDocumentPosition(other: $EventTarget | Node): number;
     /** {@link Node.getRootNode} */
     getRootNode(options?: GetRootNodeOptions): Node;
     /** {@link Node.hasChildNodes} */
@@ -160,9 +154,9 @@ export interface $Node {
     /** {@link Node.isDefaultNamespace} */
     isDefaultNamespace(namespace: string | null): boolean;
     /** {@link Node.isEqualNode} */
-    isEqualNode(otherNode: Node | null): boolean;
+    isEqualNode(otherNode: $EventTarget | Node | null): boolean;
     /** {@link Node.isSameNode} */
-    isSameNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: $EventTarget | Node | null): boolean;
     /** {@link Node.lookupNamespaceURI} */
     lookupNamespaceURI(prefix: string | null): string | null;
     /** {@link Node.lookupPrefix} */
@@ -173,20 +167,34 @@ export interface $Node {
     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} */
+    /** {@link Node.contains} */
+    contains(other: $EventTarget | Node | null | undefined): boolean;
+
+    /** {@link ChildNode.after} */
+    after(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ChildNode.before} */
+    before(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ChildNode.remove} */
     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 ChildNode.replaceWith} */
+    replaceWith(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ParentNode.append} */
+    append(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ParentNode.prepend} */
+    prepend(...nodes: ($EventTarget | Node | string)[]): this;
+    /** {@link ParentNode.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;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    /** {@link ParentNode.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]>;
+    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    /** {@link ParentNode.replaceChildren} */
+    replaceChildren(...nodes: ($EventTarget | Node | string)[]): this;
 
     /** {@link Node.nodeValue} */
     nodeValue(nodeValue: $Parameter<string | null>): this;

package/src/node/$Virtual.ts

@@ -0,0 +1,65 @@
+import { chain } from "#lib/chain";
+import { forEach, _Array_from, _instanceof, _null } from "#lib/native";
+import { toArray } from "#lib/toArray";
+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>) {
+        return chain(this, _null, _null, children, children => {
+            this.nodes.clear();
+            forEach(this.childNodes, node => node.remove());
+            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)
+                if (position >= 0) position++;
+            })
+        });
+        return this;
+    }
+
+    hide($node?: $Node | null) {
+        if ($node && this.nodes.has($node)) this.hiddenNodes.add($node);
+        return this;
+    }
+
+    show($node?: $Node | null) {
+        if ($node) this.hiddenNodes.delete($node);
+        return this;
+    }
+
+    render() {
+        // remove hidden node
+        forEach(this.childNodes, node => this.hiddenNodes.has($(node)) && node.remove());
+        // add visible node with position
+        forEach(this.nodes, ($node, i) => {
+            if (
+                !this.hiddenNodes.has($node) // node is not hidden
+                && !$node.inDOM() // node is not in dom tree
+                && $(this.childNodes).at(i) !== $node // node not matched at position
+            ) $Node.append(this, $node, i);
+        })
+        return this;
+    }
+
+    static append($node: $Virtual, child: $Node | undefined | null, position: number) {
+        if (child) {
+            const childList = _Array_from($node.nodes);
+            if (!childList.at(position)) childList.push(child);
+            else childList.splice(position >= 0 ? position : childList.length + 1 + position, 0, child);
+            $node.nodes = new Set(childList);
+        }
+    }
+}

package/src/node.ts

@@ -1,10 +1,11 @@
 import { $HTMLElement } from '#node/$HTMLElement';
-import { assignHelper } from '#lib/assignHelper';
+import { assignProperties } from '#lib/assignProperties';
 import { $Element } from '#node/$Element';
 import { $Node, $Text } from '#node/$Node';
+import { $EventTarget } from '#node/$EventTarget';
 
-assignHelper(EventTarget, $Node);
-assignHelper(Node, $Node);
-assignHelper(Text, $Text);
-assignHelper(Element, $Element);
-assignHelper(HTMLElement, $HTMLElement);
+assignProperties(EventTarget, $EventTarget);
+assignProperties(Node, $Node);
+assignProperties(Text, $Text);
+assignProperties(Element, $Element);
+assignProperties(HTMLElement, $HTMLElement);