amateras 0.2.0 → 0.4.0

package/src/node/$Node.ts

@@ -1,4 +1,5 @@
-import { _Array_from, _instanceof, 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,74 +11,100 @@ export class $Node {
     }
 
     content(children: $NodeContentResolver<this>) {
-        _Array_from(this.node.childNodes).forEach(node => node.remove());
+        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.node.childNodes).filter(node => node.nodeType !== node.TEXT_NODE).at(position);
-            $.orArrayResolver(children).forEach(child => {
-                if (!child) return;
-                if (_instanceof(child, Array)) this.insert(child);
-                else if (!positionChild) this.node.appendChild(child.node);
-                else this.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
-            })
-        }
         // process nodes
-        for (const child of $.orArrayResolver(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;
-    }
-
-    remove() { 
-        return this.node.remove(), 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.remove();
-        const index = _Array_from(this.parentNode!.childNodes).indexOf(this.node) + 1;
-        const parentNode = this.parentNode;
-        this.remove();
-        parentNode?.$.insert($node, index)
+        if (!$node) return this;
+        this.replaceWith(
+            ...$.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.node.textContent;
+        return this.textContent();
+    }
+
+    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;
     }
-}
 
-function processContent<T extends $Node>($node: T, content: OrPromise<$NodeContentTypes | $NodeContentHandler<T>>): 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)) {
-        if (_instanceof((content as $.SignalFunction<any>).signal, Signal)) {
-            const signalFn = content as $.SignalFunction<any>;
-            const $text = document ? new $Text() : $('signal').attr({ type: typeof signalFn.signal.value() });
-            const set = (value: any) => $text.textContent(isObject(value) ? JSON.stringify(value) : value);
-            if (_instanceof($text, $Text)) $text.signals.add(signalFn.signal);
-            signalFn.signal.subscribe(set);
-            set(signalFn());
-            return $text;
-        } else {
-            const _content = content($node) as $NodeContentResolver<$Node>;
-            if (_instanceof(_content, Promise)) return processContent($node, _content as any);
-            else return $.orArrayResolver(_content).map(content => processContent($node, content) as $Node);
+    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];
+                }
+            } 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();
+            }
         }
-    } 
-    // is string | number | boolean
-    return new $Text(`${content}`);
+        // 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);
+    }
 }
 
 export class $Text extends $Node {
@@ -89,14 +116,81 @@ export class $Text extends $Node {
 
 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> = OrArray<OrPromise<$NodeContentTypes | $NodeContentHandler<T>>>;
+export type $NodeContentResolver<T extends $Node> = OrPromise<$NodeContentTypes | $NodeContentHandler<T> | $NodeContentResolver<T>[]>;
 
 export interface $Node {
-    readonly parentNode?: 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 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;
 
-    textContent(content: string | null): 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/$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,11 +1,9 @@
 import { $HTMLElement } from '#node/$HTMLElement';
 import { assignHelper } from '#lib/assignHelper';
 import { $Element } from '#node/$Element';
-import { $Node, $Text } from './$Node';
-
-export * from './$Element';
-export * from './$Node';
+import { $Node, $Text } from '#node/$Node';
 
+assignHelper(EventTarget, $Node);
 assignHelper(Node, $Node);
 assignHelper(Text, $Text);
 assignHelper(Element, $Element);

package/src/structure/Signal.ts

@@ -1,4 +1,4 @@
-import { _instanceof, isUndefined } from "#lib/native";
+import { _instanceof, forEach, isUndefined } from "#lib/native";
 
 export class Signal<T> {
     #value: T;
@@ -13,7 +13,7 @@ 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 (_instanceof(resolver, Function)) this.value(resolver(this.#value));
@@ -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/ext/css/src/structure/$CSSKeyframeRule.ts

@@ -1,14 +0,0 @@
-import { $CSSStyleRule } from "#structure/$CSSStyleRule";
-import { _Array_from } from "../../../../src/lib/native";
-
-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(' ')} }`
-    }
-}