amateras 0.5.0 → 0.7.0

package/README.md

@@ -29,37 +29,33 @@ $('p').css(paragraphStyle).content([
 ])
 ```
 
-## DOM Operating
+## State Management
 ```ts
 import 'amateras';
+import 'amateras/signal';
 
+// define a signal with value 0
 const count$ = $.signal(0);
 
-$(document.body).content([
-    $('button')
-        .content('Click me')
-        .class('class1', 'class2')
-        .on('click', () => count$(oldValue => oldValue + 1)),
-    $('p').content($`Clicked ${count$} times.`)
-])
-```
+// this variable will be auto recalculate when count$ changes
+const doubleCount$ = $.compute(() => count$() * 2);
 
-## State Management
-```ts
-import 'amateras';
+// the console message will fired when count$ changes
+$.effect(() => console.log( count$() ))
 
-const count$ = $.signal(0);
-const doubleCount$ = $.compute(() => count() * 2);
+$(document.body).content([
+    // Display Counts
+    $('p').content( $`Counts: ${count$}` ),
 
-setInterval(() => count$(oldValue => oldValue + 1), 1000);
+    // Display Double Counts
+    $('p').content( $`Double Counts: ${doubleCount$}` ),
 
-$(document.body).content([
-    $('p').content($`Count: ${count$}`),
-    $('p').content($`Double: ${doubleCount$}`)
+    // Create a button that make counts plus 1 on click
+    $('button').content('Add Count').on('click', () => count$.set(value => value + 1))
 ])
 ```
 
-## HTMLElement Methods Import
+## HTMLElement Native Methods Import
 ```ts
 import 'amateras';
 import 'amateras/html';
@@ -102,10 +98,11 @@ $(document.body).content([
 The packages size result using Vite 7.0 with default bundle settings, polyfills code included.
 | Package name | Size | Size(gzip) | Description |
 | --- | --- | --- | --- |
-| amateras | 5.67 kB | 2.52 kB | Core |
-| amateras/html | 0.99 kB | 0.26 kB | Import HTMLElement types and methods |
-| [amateras/css](./ext/css/README.md) | 3.65 kB | 1.41 kB | Style in JS |
-| [amateras/router](./ext/router/README.md) | 3.79 kB | 1.71 kB | Amateras Router |
-| [amateras/i18n](./ext/i18n/README.md) | 1.48 kB | 0.58 kB | I18n translations |
-| [amateras/idb](./ext/idb/README.md) | 5.35 kB | 2.03 kB | IndexedDB Builder and API Wrapper |
-| amateras/markdown | 1.89 kB | 0.67 kB | Markdown Converter |
+| amateras | 4.79 kB | 2.20 kB | Core |
+| amateras/html | 0.98 kB | 0.26 kB | Import HTMLElement types and methods |
+| [amateras/signal](./ext/signal/README.md) | 1.26 kB | 0.49 kB | Reactive data |
+| [amateras/css](./ext/css/README.md) | 3.70 kB | 1.44 kB | Style in JS |
+| [amateras/router](./ext/router/README.md) | 3.70 kB | 1.64 kB | Amateras Router |
+| [amateras/i18n](./ext/i18n/README.md) | 3.02 kB | 1.13 kB | I18n translations |
+| [amateras/idb](./ext/idb/README.md) | 5.39 kB | 2.06 kB | IndexedDB Builder and API Wrapper |
+| [amateras/markdown](./ext/markdown/README.md) | 6.81 kB | 2.68 kB | Markdown Converter |

package/index.ts

@@ -0,0 +1 @@
+import '@amateras/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -14,33 +14,38 @@
   },
   "homepage": "https://github.com/defaultkavy/amateras",
   "license": "MIT",
-  "imports": {
-    "#core": "./src/core.ts",
-    "#node/*": "./src/node/*.ts",
-    "#lib/*": "./src/lib/*.ts",
-    "#structure/*": "./src/structure/*.ts",
-    "#html": "./ext/html/html.ts",
-    "#html/*": "./ext/html/node/*.ts"
-  },
   "exports": {
-    ".": "./src/index.ts",
-    "./core": "./src/core.ts",
-    "./node/*": "./src/node/*.ts",
-    "./lib/*": "./src/lib/*.ts",
+    ".": "./index.ts",
+    "./env": {
+      "browser": "./packages/core/src/env.browser.ts",
+      "node": "./packages/core/src/env.node.ts",
+      "default": "./packages/core/src/env.browser.ts"
+    },
+    "./node/*": "./packages/core/src/node/*.ts",
+    "./lib/*": "./packages/core/src/lib/*.ts",
     "./structure/*": "./src/structure/*.ts",
-    "./html": "./ext/html/html.ts",
-    "./html/*": "./ext/html/node/*.ts",
-    "./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",
-    "./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"
+    "./core": "./packages/core/src/index.ts",
+    "./utils": "./packages/utils/src/index.ts",
+    "./html": "./packages/html/src/index.ts",
+    "./html/*": "./packages/html/node/*.ts",
+    "./css": "./packages/css/src/index.ts",
+    "./css/*": "./packages/css/src/ext/*.ts",
+    "./router": "./packages/router/src/index.ts",
+    "./ssr": "./packages/ssr/src/index.ts",
+    "./i18n": "./packages/i18n/src/index.ts",
+    "./idb": "./packages/idb/src/index.ts",
+    "./idb/core": "./packages/idb/src/core.ts",
+    "./markdown": "./packages/markdown/src/index.ts",
+    "./markdown/syntax/*": "./packages/markdown/src/syntax/*.ts",
+    "./signal": "./packages/signal/src/index.ts",
+    "./ui/*": "./packages/ui/*.ts"
+  },
+  "dependencies": {
+    "@amateras/core": "workspace:*"
   },
-  "workspaces": [
-    "./ext/*"
-  ]
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  }
 }

package/packages/core/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "@amateras/core",
+    "dependencies": {
+      "@amateras/utils": "workspace:*",
+      "@amateras/dom": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts",
+      "#env": {
+        "browser": "./src/env.browser.ts",
+        "node": "./src/env.node.ts",
+        "default": "./src/env.browser.ts"
+      }
+    },
+    "exports": {
+      ".": {
+        "browser": "./src/index.ts",
+        "node": "./src/main.ts",
+        "default": "./src/index.ts"
+      },
+      "./env": {
+        "browser": "./src/env.browser.ts",
+        "node": "./src/env.node.ts",
+        "default": "./src/env.browser.ts"
+      },
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/packages/core/src/env.browser.ts

@@ -0,0 +1,21 @@
+// window and document
+export const _window = window;
+export const _document = document;
+
+interface onclient {
+    (): boolean;
+    (fn: Function): void
+}
+
+interface onserver {
+    (): boolean;
+    (fn: Function): void
+}
+
+export const onclient: onclient = (fn?: Function) => { 
+    if (fn) return fn();
+    return true
+}
+export const onserver: onserver = (fn?: Function) => {
+    return false;
+}

package/packages/core/src/env.node.ts

@@ -0,0 +1,21 @@
+// window and document
+export const _window = window;
+export const _document = document;
+
+interface onclient {
+    (): boolean;
+    (fn: Function): void
+}
+
+interface onserver {
+    (): boolean;
+    (fn: Function): void
+}
+
+export const onclient: onclient = (fn?: Function) => { 
+    return false;
+}
+export const onserver: onserver = (fn?: Function) => {
+    if (fn) return fn();
+    return true
+}

package/packages/core/src/global.ts

@@ -0,0 +1,18 @@
+import type { $Element } from '#node/$Element';
+import type { $Node } from '#node/$Node';
+import * as core from './index';
+import type { $EventTarget } from '#node/$EventTarget';
+
+declare global {
+    export import $ = core.$;
+    type $Parameter<T> = T | undefined | $.$NodeParameterExtends<T>
+    interface Node {
+        readonly $: $Node
+    }
+    interface EventTarget {
+        readonly $: $EventTarget
+    }
+    interface Element {
+        readonly $: $Element
+    }
+}

package/packages/core/src/index.ts

@@ -0,0 +1,96 @@
+import './global';
+import './lib/assignNodeProperties';
+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 '@amateras/utils';
+import { $HTMLElement } from '#node/$HTMLElement';
+import { _document } from '#env';
+import { $EventTarget, type $Event } from '#node/$EventTarget';
+
+const nodeNameMap: {[key: string]: Constructor<$EventTarget>} = {}
+
+type $NodeBuilder = (...args: any[]) => $NodeContentResolver<$Node>
+type BuilderResultResolver<F> = F extends Constructor<$Node> ? InstanceType<F> : F extends $NodeBuilder ? ReturnType<F> : never;
+type BuilderParameterResolver<F> = F extends Constructor<$Node> ? ConstructorParameters<F> : F extends $NodeBuilder ? Parameters<F> : never;
+
+type $Type<T extends EventTarget> = T extends HTMLElement ? $HTMLElement : T extends Element ? $Element : T extends (Node | ChildNode) ? $Node : T extends EventTarget ? $EventTarget : never;
+
+/** Builder function */
+export function $<F extends $NodeBuilder | Constructor<$Node> | number, T extends $NodeBuilder | Constructor<$Node>>(
+    resolver: F, 
+    ...args: F extends number ? [T, ...BuilderParameterResolver<T>] : BuilderParameterResolver<F>
+): F extends number 
+    ?   number extends F 
+        ?   BuilderResultResolver<T>[]
+        :   Repeat<BuilderResultResolver<T>, F>
+    :   BuilderResultResolver<F>;
+/** Get {@link $Node} from {@link NodeList} */
+export function $<T extends HTMLElement | Element | Node | ChildNode>(nodes: NodeListOf<T>): $Type<T>[];
+/** Get self */
+export function $<E extends $EventTarget | null | undefined>($node: E, ...args: any[]): E extends $EventTarget ? E : null;
+/** Convert {@link Window} to {@link $EventTarget} */
+export function $<W extends Window>(node: W): $EventTarget<WindowEventMap>;
+/** Convert {@link Document} to {@link $Node} */
+export function $<D extends Document>(node: D): $Node<DocumentEventMap>;
+/** Convert {@link EventTarget} base to {@link $EventTarget} base*/
+export function $<H extends EventTarget | null | undefined>(target: H, ...args: any[]): H extends EventTarget ? $Type<H> : null;
+export function $<E extends Record<string, Event>>(target: EventTarget, ...args: any[]): $EventTarget<E>;
+/** Convert string and variables to {@link $NodeContentTypes} array */
+export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
+/** Get {@link Event.currentTarget} in {@link $EventTarget} type from {@link Event} */
+export function $<Ev extends $Event<$Element, Event>>(event: Ev): Ev['currentTarget']['$'];
+/** Create {@link $Node} base object from extensions */
+export function $<K extends keyof $.$NodeMap, T extends $.$NodeMap[K]>(tagname: K, ...args: ConstructorParameters<T>): InstanceType<T>;
+/** Create {@link $HTMLElement} by tagname */
+export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $HTMLElement<HTMLElementTagNameMap[K]>;
+/** Create {@link $HTMLElement} by custom tagname */
+export function $(tagname: string): $HTMLElement<HTMLElement>
+/** Create multiple {@link $HTMLElement} objects by tagname */
+export function $<N extends number, K extends keyof HTMLElementTagNameMap>(number: N, tagname: K): number extends N ? $HTMLElement<HTMLElementTagNameMap[K]>[] : Repeat<$HTMLElement<HTMLElementTagNameMap[K]>, N>;
+/** Create multiple {@link $HTMLElement} objects by custom tagname */
+export function $<N extends number>(number: N, tagname: string): number extends N ? $HTMLElement<HTMLElement>[] : Repeat<$HTMLElement<HTMLElement>, N>;
+export function $(resolver: string | number | null | undefined | Element | HTMLElement | $Node | Function | TemplateStringsArray | Event | NodeListOf<Node | ChildNode> | EventTarget, ...args: any[]) {
+    if (isNull(resolver) || isUndefined(resolver)) return null;
+    if (_instanceof(resolver, $Node)) return resolver;
+    if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
+    if (isFunction(resolver)) 
+        if (resolver.prototype?.constructor) return new resolver.prototype.constructor(...args); 
+        else return resolver(...args);
+    if (resolver instanceof Array) {
+        const iterate = args.values();
+        return resolver.map(str => [str ?? undefined, iterate.next().value]).flat().filter(item => item);
+    }
+    if (_instanceof(resolver, Node) && _instanceof(resolver.$, $Node)) return resolver.$;
+    if (_instanceof(resolver, Event)) return $(resolver.currentTarget as Element);
+    if (isNumber(resolver)) return _Array_from({length: resolver}).map(_ => $(args[0], ...args.slice(1)));
+    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, EventTarget)) return new $EventTarget(resolver as any);
+    if (_instanceof(resolver, NodeList)) return _Array_from(resolver).map($);
+    return new $HTMLElement(resolver);
+}
+
+export namespace $ {
+    // css
+    const _stylesheet = new CSSStyleSheet();
+    export const stylesheet = _stylesheet;
+    _document.adoptedStyleSheets.push(_stylesheet);
+    export const style = _bind(_stylesheet.insertRule, _stylesheet);
+    // 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>]
+
+    export const assign = (...resolver: [nodeName: string, $node: Constructor<$EventTarget>][]) => {
+        forEach(resolver, ([nodeName, $node]) => nodeNameMap[nodeName] = $node);
+        return $;
+    }
+}
+
+export type $ = typeof $;
+globalThis.$ = $;

package/packages/core/src/lib/assignNodeProperties.ts

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

package/packages/core/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 "@amateras/utils";
+
+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/packages/core/src/lib/chain.ts

@@ -0,0 +1,17 @@
+import { $Node } from "#node/$Node";
+import { isUndefined } from "@amateras/utils";
+
+export const chain: chain = <T, R, V>(_this: T, args: IArguments | null, get: (() => R) | null, value: V, set: (value: Exclude<V, undefined>) => any) => {
+    if (args && get && !args.length) return get();
+    if (isUndefined(value)) return _this;
+    for (const setter of $Node.setters) {
+        const result = setter(value, set);
+        if (!isUndefined(result)) return set(result), _this;
+    }
+    return set(value as any), _this;
+}
+
+interface chain {
+    <T, V>(_this: T, args: null, get: null, value: V, set: (value: Exclude<V, undefined | $.$NodeParameterExtends<V>>) => any): T
+    <T, R, V>(_this: T, args: IArguments, get: (() => R), value: V, set: (value: Exclude<V, undefined | $.$NodeParameterExtends<V>>) => any): T | R
+}

package/packages/core/src/lib/dom.ts

@@ -0,0 +1,20 @@
+import { _Object_assign } from "@amateras/utils";
+import "@amateras/dom/structure/NodeList";
+import '@amateras/dom/structure/Node';
+import '@amateras/dom/structure/Text';
+import '@amateras/dom/structure/Document';
+import '@amateras/dom/structure/Element';
+import '@amateras/dom/structure/HTMLElement';
+import '@amateras/dom/structure/CSSStyleSheet';
+import '@amateras/dom/structure/CSS';
+
+import '@amateras/dom/structure/html/HTMLAnchorElement';
+
+import { Window } from "@amateras/dom/structure/Window";
+
+const window = new Window();
+
+_Object_assign(globalThis, {
+    window,
+    ...window,
+})

package/packages/core/src/main.ts

@@ -0,0 +1,4 @@
+// This is server environment entry file
+
+import '#lib/dom';
+import './index';

package/{src → packages/core/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 { _Array_from, _instanceof, _Object_assign, _Object_entries, _Object_fromEntries, forEach, isNull, isNumber, isString, isUndefined } from "@amateras/utils";
+import { _document } from "#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,15 +12,22 @@ 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]: $Parameter<any| null>}): this;
+    attr(resolver?: {[key: string]: $Parameter<any | null>} | string) {
         if (!arguments.length) return _Object_fromEntries(_Array_from(this.attributes).map(attr => [attr.name, attr.value]));
         if (isString(resolver)) return this.getAttribute(resolver);
-        if (resolver) for (let [key, value] of _Object_entries(resolver)) {
-            const set = (value: any) => !isUndefined(value) && isNull(value) ? this.removeAttribute(key) : this.setAttribute(key, `${value}`)
-            if (_instanceof(value, Signal)) value = value.subscribe(set).value();
-            set(value);
-        }
+        if (resolver) 
+            keyIterate: for (let [key, value] of _Object_entries(resolver)) {
+                const set = (value: string | number | boolean | null | undefined) => {
+                    if (!isUndefined(value) && isNull(value)) this.removeAttribute(key);
+                    else this.setAttribute(key, `${value}`);
+                }
+                for (const setter of $Node.setters) {
+                    const result = setter(value, set);
+                    if (!isUndefined(result)) { set(result); continue keyIterate; }
+                }
+                set(value as any);
+            }
         return this;
     }
 
@@ -42,11 +48,13 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     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; }
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions & { callback?: (animation: Animation) => void }) {
+        const animation = this.node.animate(keyframes, options);
+        if (!isNumber(options)) options?.callback?.(animation);
+        return this;
+    }
+}
 
 function createNode(nodeName: string) {
     return !_document 
@@ -55,7 +63,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} */
@@ -191,24 +199,8 @@ export interface $Element<Ele extends Element, EvMap> {
     setPointerCapture(pointerId: number): this;
     /** {@link Element.toggleAttribute} */
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
-    /** {@link Element.animate} */
-    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
     /** {@link Element.getAnimations} */
     getAnimations(options?: GetAnimationsOptions): Animation[];
-    /** {@link Element.append} */
-    append(...nodes: (Node | string)[]): this;
-    /** {@link Element.prepend} */
-    prepend(...nodes: (Node | string)[]): this;
-    /** {@link Element.querySelector} */
-    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
-    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
-    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
-    /** {@link Element.querySelectorAll} */
-    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
-    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
-    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
-    /** {@link Element.replaceChildren} */
-    replaceChildren(...nodes: (Node | string)[]): this;
 
     /** {@link Element.classList} */
     classList(): DOMTokenList;
@@ -371,18 +363,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/packages/core/src/node/$EventTarget.ts

@@ -0,0 +1,48 @@
+import { forEach, isBoolean, toArray } from "@amateras/utils";
+
+export class $EventTarget<EvMap = {}> {
+    node: EventTarget;
+    constructor(node: EventTarget) {
+        this.node = node;
+        if (node !== window) (node as Mutable<EventTarget>).$ = this;
+    }
+    
+    on(type: string | string[], listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
+        forEach(toArray(type), type => this.addEventListener(type, listener, options));
+        return this;
+    }
+
+    off(type: string | string[], listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): this {
+        forEach(toArray(type), type => this.removeEventListener(type, listener, options));
+        return this
+    }
+    
+    once(type: string | string[], listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): this {
+        forEach(toArray(type), type => this.on(type, listener, { once: true, ...(isBoolean(options) ? { capture: options } : options ?? {}) }));
+        return this
+    }
+}
+
+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 | 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 | 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 | 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 → packages/core/src}/node/$HTMLElement.ts

@@ -1,4 +1,4 @@
-import { _Object_entries, forEach } from "#lib/native";
+import { _Object_entries, forEach } from "@amateras/utils";
 import { $Element } from "#node/$Element";
 
 export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $Element<Ele, EvMap> {