amateras 0.1.0 → 0.2.0

package/src/node/$Node.ts

@@ -2,8 +2,8 @@ import { _Array_from, _instanceof, isFunction, isNull, isObject, isUndefined } f
 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;
@@ -15,67 +15,88 @@ export class $Node {
     }
 
     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.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))
         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) {
-        if (!$node) return this;
-        this.node.parentNode?.replaceChild($Node.processContent($node), this.node);
-        return this; 
+    remove() { 
+        return this.node.remove(), 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))
+    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)
+        return this;
     }
 
-    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;
+    toString() {
+        return this.node.textContent;
+    }
+}
+
+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);
         }
-        // is string | number | boolean
-        return new Text(`${content}`);
+    } 
+    // is string | number | boolean
+    return new $Text(`${content}`);
+}
+
+export class $Text extends $Node {
+    signals = new Set<Signal<any>>();
+    constructor(textContent?: string) {
+        super(new Text(textContent));
     }
 }
 
-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 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 interface $Node {
+    readonly parentNode?: Node;
+    readonly childNodes: NodeListOf<ChildNode>;
+    appendChild<T extends Node>(node: T): T;
+    insertBefore<T extends Node>(node: T, child: Node | null): T;
+
+    textContent(content: string | null): this;
+    textContent(): string | null;
+}

package/src/node/node.ts

@@ -1,11 +1,12 @@
+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';
 
-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, isUndefined } from "#lib/native";
 
 export class Signal<T> {
     #value: T;
@@ -16,7 +16,7 @@ export class Signal<T> {
             Signal.listeners.forEach(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();

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/html/node/type.ts

@@ -1,96 +0,0 @@
-import type { $HTMLElement } from "./$HTMLElement";
-import type { Signal } from "#structure/Signal";
-
-type $Parameter<T> = T | undefined | Signal<T> | Signal<T | undefined>
-
-declare module '#node/$Element' {
-    export interface $Element<Ele extends Element> {
-        /** {@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.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;
-    }
-}
-
-export interface $Input extends $HTMLElement<HTMLInputElement> {}
-export interface $Anchor extends $HTMLElement<HTMLAnchorElement> {}
-export interface $Image extends $HTMLElement<HTMLImageElement> {
-    src(src: string): this;
-    src(): string;
-}
-export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {}
-export interface $Dialog extends $HTMLElement<HTMLDialogElement> {}
-export interface $Form extends $HTMLElement<HTMLFormElement> {}
-export interface $Label extends $HTMLElement<HTMLLabelElement> {}
-export interface $Media extends $HTMLElement<HTMLMediaElement> {}
-export interface $Select extends $HTMLElement<HTMLSelectElement> {}
-export interface $Option extends $HTMLElement<HTMLOptionElement> {}
-export interface $OptGroup extends $HTMLElement<HTMLOptGroupElement> {}
-export interface $TextArea extends $HTMLElement<HTMLTextAreaElement> {}
-
-declare module '#core' {
-    export function $(tagname: 'input'): $Input
-    export function $(tagname: 'anchor'): $Anchor
-    export function $(tagname: 'img'): $Image
-    export function $(tagname: 'dialog'): $Dialog
-    export function $(tagname: 'form'): $Form
-    export function $(tagname: 'label'): $Label
-    export function $(tagname: 'media'): $Media
-    export function $(tagname: 'select'): $Select
-    export function $(tagname: 'option'): $Option
-    export function $(tagname: 'otpgroup'): $OptGroup
-    export function $(tagname: 'textarea'): $TextArea
-    export function $(tagname: string): $HTMLElement
-}