amateras 0.5.0 → 0.6.0

package/ext/ui/node/Tabs.ts

@@ -0,0 +1,114 @@
+import { _Array_from, _instanceof, forEach, isUndefined } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import type { $Node } from "amateras/node/$Node";
+
+$.style('tabs,tabs-container,tabs-list,tabs-content{display: block}')
+
+export class Tabs extends $HTMLElement {
+    #value: null | string = null;
+    currentContent: null | TabsContent = null;
+    $container: null | TabsContainer = null;
+    $list: null | TabsList = null;
+    constructor() {
+        super('tabs');
+    }
+
+    value(): string | null;
+    value(value: string | undefined): this;
+    value(value?: string) {
+        return chain(this, arguments, () => this.#value, value, value => {
+            this.#value = value;
+            this.$container?.content(this.$container.contentMap.get(value));
+            this.$list?.check();
+        })
+    }
+}
+
+export class TabsContainer extends $HTMLElement {
+    $tabs?: Tabs;
+    contentMap = new Map<string, TabsContent>();
+    constructor($tabs?: Tabs) {
+        super('tabs-container');
+        this.$tabs = $tabs;
+    }
+
+    mounted($parent: $Node) {
+        if (_instanceof($parent, Tabs)) this.$tabs = $parent;
+        if (this.$tabs) {
+            this.$tabs.$container = this;
+            this.content(this.contentMap.get(this.$tabs.value() ?? ''))
+        }
+        return this;
+    }
+}
+
+export class TabsContent extends $HTMLElement {
+    #value: string;
+    $container: null | TabsContainer = null;
+    constructor(value: string) {
+        super('tabs-content');
+        this.#value = value
+    }
+
+    value(): string;
+    value(value: string): this;
+    value(value?: string) {
+        return chain(this, arguments, () => this.#value, value, value => {
+            this.#value = value; 
+            this.$container?.contentMap.set(value, this).delete(this.#value ?? '')
+        })
+    }
+
+    mounted($parent: $Node) {
+        if (!_instanceof($parent, TabsContainer)) return this;
+        if ($parent && this.#value) {
+            this.$container = $parent;
+            $parent.contentMap.set(this.#value, this);
+        }
+        return this;
+    }
+}
+
+export class TabsList extends $HTMLElement {
+    $tabs?: null | Tabs = null;
+    triggers = new Map<string, TabsTrigger>();
+    constructor($tabs?: Tabs) {
+        super('tabs-list');
+        this.$tabs = $tabs;
+        this.on('click', _ => this.check())
+    }
+
+    check() {
+        this.triggers.forEach($trigger => $trigger.attr({selected: $trigger.value() === this.$tabs?.value() ? '' : null}))
+        return this;
+    }
+
+    mounted($parent: $Node): this {
+        if (_instanceof($parent, Tabs)) this.$tabs = $parent, $parent.$list = this;
+        if (this.$tabs) forEach(_Array_from(this.childNodes), child => $(child).is(TabsTrigger)?.use($child => {
+            this.triggers.set($child.value(), $child);
+            $child.$tabs = this.$tabs;
+        }));
+        return this;
+    }
+}
+
+export class TabsTrigger extends $HTMLElement {
+    #value: string;
+    $tabs?: null | Tabs = null;
+    constructor(value: string) {
+        super('tabs-trigger');
+        this.#value = value;
+        this.on('click', _ => this.$tabs?.value(this.#value ?? undefined))
+    }
+
+    value(): string;
+    value(value: string): this;
+    value(value?: string) {
+        return chain(this, arguments, () => this.#value, value, value => this.#value = value)
+    }
+}
+
+function chain<T, R, V>(_this: T, args: IArguments, get: () => R, value: V, set: (value: Exclude<V, undefined>) => any) {
+    return !args.length ? get() : isUndefined(value) ? _this : (set(value as any), _this);
+}

package/ext/ui/node/Toast.ts

@@ -0,0 +1,16 @@
+import { _document } from "../../../src/lib/env";
+import { $HTMLElement } from "../../../src/node/$HTMLElement";
+
+$.style('toast{position:absolute}')
+
+export class Toast extends $HTMLElement {
+    constructor() {
+        super('toast');
+    }
+
+    popup(duration = 3000) {
+        $(_document.body).insert(this);
+        setTimeout(() => this.remove(), duration)
+        return this;
+    }
+}

package/ext/ui/node/Waterfall.ts

@@ -0,0 +1,72 @@
+import { _Array_from, _instanceof, equal, forEach, isNumber } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { $Element } from "amateras/node/$Element";
+import { $Virtual } from "amateras/node/$Virtual";
+
+const getRect = (el: $Element) => el.getBoundingClientRect();
+const px = (value: number) => `${value}px`;
+$.style(`waterfall { display: block; position: relative }`)
+
+export class Waterfall extends $Virtual {
+    #column = 1;
+    #gap = 0;
+    #width = 0;
+    constructor() {
+        super('waterfall');
+        new ResizeObserver(_ => this.inDOM() && this.#width !== getRect(this).width && (this.dispatchEvent(new Event('resize', {cancelable: true})) && this.layout())).observe(this.node);
+    }
+
+    column(): number;
+    column(column: $Parameter<number>): this;
+    column(column?: $Parameter<number>) {
+        if (!arguments.length) return this.#column;
+        if (isNumber(column)) this.#column = column;
+        return this;
+    }
+
+    gap(): number;
+    gap(gap: $Parameter<number>): this;
+    gap(gap?: $Parameter<number>) {
+        if (!arguments.length) return this.#gap;
+        if (isNumber(gap)) this.#gap = gap;
+        return this;
+    }
+
+    layout() {
+        const items = _Array_from(this.nodes).map(item => item);
+        const { width } = getRect(this);
+        this.#width = width;
+        const columnCount = this.#column;
+        const gap = this.#gap;
+        const columnWidth = ((width - ((columnCount - 1) * gap)) / columnCount);
+        const columns = _Array_from({length: columnCount}).map((_, i) => ({ i, h: 0, x: i * (columnWidth + gap) }))
+        const getColumnByHeight = (i: number) => columns.sort((a, b) => a.h - b.h ? a.h - b.h : a.i - b.i).at(i) as typeof columns[number];
+        forEach(items, item => {
+            if (!_instanceof(item, $HTMLElement)) return;
+            item.attr();
+            const { height, width } = item.attr();
+            const shortestSection = getColumnByHeight(0);
+            item.style({
+                position: 'absolute',
+                top: px(shortestSection.h), 
+                left: px(shortestSection.x), 
+                width: px(columnWidth),
+            });
+            if (width && height) {
+                // get ratio from attributes and calculate item's height
+                let itemHeight = columnWidth / (+width / +height);
+                item.style({ height: px(itemHeight) })
+                shortestSection.h += +itemHeight + gap;
+            } else {
+                item.style({ visibility: 'hidden', height: '' })
+                if (this.hiddenNodes.has(item)) this.show(item).render().hide(item);
+                let itemHeight = getRect(item).height;
+                item.style({visibility: '', height: px(itemHeight)})
+                shortestSection.h += +itemHeight + gap;
+            }
+        })
+        this.style({ height: px(getColumnByHeight(-1).h) });
+        this.dispatchEvent(new Event('layout'))
+        return this;
+    }
+}

package/ext/ui/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@amateras/ui",
+    "peerDependencies": {
+        "amateras": "../../"
+    },
+    "exports": {
+        "./waterfall": "./node/Waterfall.ts",
+        "./tabs": "./node/Tabs.ts",
+        "./virtual-scroll": "./lib/VirtualScroll.ts"
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -33,12 +33,15 @@
     "./css": "./ext/css/src/index.ts",
     "./css/colors": "./ext/css/src/lib/colors.ts",
     "./css/color/*": "./ext/css/src/lib/colors/*.ts",
-    "./router": "./ext/router/index.ts",
+    "./router": "./ext/router/src/index.ts",
     "./ssr": "./ext/ssr/index.ts",
     "./i18n": "./ext/i18n/src/index.ts",
     "./idb": "./ext/idb/src/index.ts",
     "./idb/core": "./ext/idb/src/core.ts",
-    "./markdown": "./ext/markdown/index.ts"
+    "./markdown": "./ext/markdown/src/index.ts",
+    "./markdown/syntax/*": "./ext/markdown/src/syntax/*.ts",
+    "./signal": "./ext/signal/src/index.ts",
+    "./ui/*": "./ext/ui/*.ts"
   },
   "workspaces": [
     "./ext/*"

package/src/core.ts

@@ -1,20 +1,23 @@
 import './global';
 import './node';
-import { Signal } from "#structure/Signal";
-import { $Element, type $Event } from "#node/$Element";
+import { $Element } from "#node/$Element";
 import { $Node, type $NodeContentResolver, type $NodeContentTypes } from '#node/$Node';
 import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, isUndefined, _bind, _null } from '#lib/native';
 import { $HTMLElement } from '#node/$HTMLElement';
 import { _document } from '#lib/env';
-import { toArray } from '#lib/toArray';
+import { $EventTarget, type $Event } from '#node/$EventTarget';
 
-const nodeNameMap: {[key: string]: Constructor<$Node>} = {}
+const nodeNameMap: {[key: string]: Constructor<$EventTarget>} = {}
 const _stylesheet = new CSSStyleSheet();
 
-export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>, N extends number>(number: N, fn: F, ...args: Parameters<F>): Repeat<ReturnType<F>, N>;
+export function $<K extends keyof $.$NodeMap, T extends $.$NodeMap[K]>(tagname: K, ...args: ConstructorParameters<T>): InstanceType<T>;
+export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
+export function $(tagname: string): $HTMLElement<HTMLElement>
 export function $<F extends (...args: any[]) => $NodeContentResolver<$Node>>(fn: F, ...args: Parameters<F>): ReturnType<F>;
 export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>, N extends number>(number: N, construct: T, ...args: P): Repeat<InstanceType<T>, N>;
 export function $<T extends Constructor<$Node>, P extends ConstructorParameters<T>>(construct: T, ...args: P): InstanceType<T>;
+export function $(nodes: NodeListOf<HTMLElement>): $HTMLElement[];
+export function $(nodes: NodeListOf<Element>): $Element[];
 export function $(nodes: NodeListOf<Node | ChildNode>): $Node[];
 export function $<N extends $Node>($node: N, ...args: any[]): N;
 export function $<N extends $Node>($node: N | null | undefined, ...args: any[]): N | null | undefined;
@@ -22,14 +25,17 @@ export function $<H extends HTMLElement>(element: H, ...args: any[]): $HTMLEleme
 export function $<H extends HTMLElement>(element: H | null | undefined, ...args: any[]): $HTMLElement<H> | null | undefined;
 export function $<E extends Element>(element: E, ...args: any[]): $Element<E>;
 export function $<E extends Element>(element: E | null | undefined, ...args: any[]): $Element<E> | null | undefined;
-export function $<N extends Node | EventTarget>(node: N, ...args: any[]): $Node;
-export function $<N extends Node | EventTarget>(node: N | null | undefined, ...args: any[]): $Node | null | undefined;
+export function $<D extends Document>(node: D): $Node<DocumentEventMap>;
+export function $<N extends Node>(node: N, ...args: any[]): $Node;
+export function $<N extends Node>(node: N | null | undefined, ...args: any[]): $Node | null | undefined;
+export function $<W extends Window>(node: W): $EventTarget<WindowEventMap>;
+export function $<E extends EventTarget>(node: E, ...args: any[]): $EventTarget;
+export function $<E extends EventTarget>(node: E | null | undefined, ...args: any[]): $EventTarget | null | undefined;
 export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
-export function $<K extends keyof HTMLElementTagNameMap, N extends number>(number: N, tagname: K): Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
-export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
 export function $<Ev extends $Event<$Element, Event>>(event: Ev): Ev['currentTarget']['$'];
 export function $<N extends number>(number: N, tagname: string): Repeat<$HTMLElement<HTMLElement>, N>;
-export function $(tagname: string): $HTMLElement<HTMLElement>
+export function $<N extends number, K extends keyof HTMLElementTagNameMap>(number: N, tagname: K): Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
+export function $<N extends number, F extends (...args: any[]) => $NodeContentResolver<$Node>>(number: N, fn: F, ...args: Parameters<F>): Repeat<ReturnType<F>, N>;
 export function $(resolver: string | number | null | undefined | Element | HTMLElement | $Node | Function | TemplateStringsArray | Event | NodeListOf<Node | ChildNode>, ...args: any[]) {
     if (isNull(resolver) || isUndefined(resolver)) return null;
     if (_instanceof(resolver, $Node)) return resolver;
@@ -47,62 +53,27 @@ export function $(resolver: string | number | null | undefined | Element | HTMLE
     if (_instanceof(resolver, HTMLElement)) return new $HTMLElement(resolver);
     if (_instanceof(resolver, Element)) return new $Element(resolver);
     if (_instanceof(resolver, Node)) return new $Node(resolver as any);
-    if (_instanceof(resolver, NodeList)) return _Array_from(resolver).map($)
+    if (_instanceof(resolver, EventTarget)) return new $EventTarget(resolver as any);
+    if (_instanceof(resolver, NodeList)) return _Array_from(resolver).map($);
     return new $HTMLElement(resolver);
 }
 
 export namespace $ {
+    // css
     export const stylesheet = _stylesheet;
     _document.adoptedStyleSheets.push(_stylesheet);
     export const style = _bind(_stylesheet.insertRule, _stylesheet);
-    type SignalProcess<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
-    export type SignalFunction<T> = {signal: Signal<T>, set: (newValue: T | ((oldValue: T) => T)) => SignalFunction<T>} & (() => T) & SignalProcess<T>;
-    export const signal = <T>(value: T): SignalFunction<T> => {
-        const signal = new Signal<T>(value);
-        const signalFn = function () { return signal.value(); }
-        _Object_assign(signalFn, {
-            signal,
-            set(newValue: T) { return signal.value(newValue), signalFn; }
-        })
-        if (isObject(value) && !isNull(value)) {
-            for (const [key, val] of _Object_entries(value)) {
-                const val$ = $.signal(val);
-                val$.signal.subscribe(newValue => { value[key as keyof typeof value] = newValue; signal.emit() });
-                _Object_defineProperty(signalFn, `${key}$`, {value: val$});
-            }
-        }
-        return signalFn as unknown as SignalFunction<T>
-    }
-
-    export type ComputeFunction<T> = ({(): T}) & { signal: Signal<T> };
-    export const compute = <T>(process: () => T): ComputeFunction<T> => {
-        let subscribed = false;
-        const signalFn: SignalFunction<any> = signal(_null);
-        const computeFn = () => {
-            if (!subscribed) return signalFn.set(subscribe())();
-            else return signalFn.set(process())();
-        }
-        const subscribe = () => {
-            const signalHandler = (signal: Signal<any>) => { 
-                signal.subscribe(() => signalFn.set(process())) 
-            }
-            Signal.listeners.add(signalHandler);
-            const result = process();
-            Signal.listeners.delete(signalHandler);
-            subscribed = true;
-            return result;
-        }
-        _Object_assign(computeFn, { signal: signalFn.signal });
-        return computeFn as ComputeFunction<T>
-    }
+    // node map
+    export interface $NodeMap {}
+    // node content amp
+    export interface $NodeContentMap {}
+    export type $NodeContentTypeExtends = $NodeContentMap[keyof $NodeContentMap]
+    // attr value map
+    export interface $NodeParameterMap<T> {}
+    export type $NodeParameterExtends<T> = $NodeParameterMap<T>[keyof $NodeParameterMap<T>]
 
-    type assign = {
-        (resolver: [nodeName: string, $node: Constructor<$Node>][]): $;
-        (nodeName: string, $node: Constructor<$Node>): $;
-    }
-    export const assign: assign = (resolver: string | [nodeName: string, $node: Constructor<$Node>][], $node?: Constructor<$Node>) => {
-        if (isString(resolver)) $node && (nodeNameMap[resolver] = $node);
-        else forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
+    export const assign = (...resolver: [nodeName: string, $node: Constructor<$EventTarget>][]) => {
+        forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
         return $;
     }
 
@@ -110,5 +81,4 @@ export namespace $ {
 }
 
 export type $ = typeof $;
-globalThis.$ = $;
-_Object_assign($, {toArray})
+globalThis.$ = $;

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,11 @@ 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>
@@ -25,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

@@ -10,7 +10,23 @@ 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);
@@ -19,6 +35,7 @@ export const isBoolean = (target: any): target is boolean => _typeof(target, 'bo
 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;
@@ -28,13 +45,13 @@ 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));
-// 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;
+// 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 = <T extends Function>(target: T, obj: Object): T => target.bind(obj);
 // Promise
 export const _Promise = Promise;

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 | undefined}): this;
-    attr(resolver?: {[key: string]: string | number | boolean | Signal<any> | null | undefined} | 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;
     }
@@ -44,10 +42,6 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     }
 }
 
-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
@@ -55,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} */
@@ -195,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;
@@ -371,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;
 }