amateras 0.0.1

package/README.md

@@ -0,0 +1,83 @@
+# Amateras
+Amateras is a DOM Utility library.
+
+## Build DOM tree in JS
+```ts
+import 'amateras';
+
+$(document.body).content([
+    $('h1').attr({ class: 'title' }).content('Hello, World')
+])
+```
+
+## Style in JS
+```ts
+import 'amateras';
+import 'amateras/css';
+
+const paragraphStyle = $.css({
+    border: '2px solid black',
+    padding: '0.4rem',
+    textAlign: 'center'
+})
+
+$('p').css(paragraphStyle).content([
+    'Amateras is a ', 
+    $('span').css({ color: 'blue', fontWeight: 700 }).content('DOM Utility Library.')
+])
+```
+
+## DOM Operating
+```ts
+import 'amateras';
+
+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.`)
+])
+```
+
+## State Management
+```ts
+import 'amateras'
+
+const count$ = $.signal(0);
+const doubleCount$ = $.compute(() => count() * 2);
+
+setInterval(() => count$(oldValue => oldValue + 1), 1000);
+
+$(document.body).content([
+    $('p').content($`Count: ${count$}`),
+    $('p').content($`Double: ${doubleCount$}`)
+])
+```
+
+## Custom Components
+```ts
+import 'amateras';
+import 'amateras/html';
+
+function NameCard(name: string, avatarURL: string) {
+    return $('div')
+    .css({ 
+        borderRadius: '1rem', 
+        background: '#1e1e1e', 
+        display: 'flex', 
+        overflow: 'hidden'
+    })
+    .content([
+        $('img').src(avatarURL),
+        $('div').css({ padding: '1rem' }).content([
+            $('h2').css({ color: '#e1e1e1' }).content(name)
+        ])
+    ])
+}
+
+$(document.body).content([
+    $(NameCard, 'The dancing man', 'https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif')
+])
+```

package/ext/css/$CSSDeclaration.ts

@@ -0,0 +1,12 @@
+export class $CSSDeclaration {
+    key: string;
+    value: string;
+    constructor(key: string, value: string) {
+        this.key = key;
+        this.value = value;
+    }
+
+    get property() {
+        return this.key.replaceAll(/([A-Z])/g, (_, s1) => `-${s1}`).toLowerCase();
+    }
+}

package/ext/css/$CSSMediaRule.ts

@@ -0,0 +1,13 @@
+import { $CSSRule } from "#css/$CSSRule";
+
+export class $CSSMediaRule extends $CSSRule {
+    condition: string;
+    constructor(condition: string) {
+        super();
+        this.condition = condition;
+    }
+
+    toString() {
+        return `@media ${this.condition} { ${[...this.rules.values()].map(rule => rule.toString()).join('\n')} }`
+    }
+}

package/ext/css/$CSSRule.ts

@@ -0,0 +1,7 @@
+export abstract class $CSSRule {
+    rules = new Set<$CSSRule>();
+    constructor() {
+    }
+
+    abstract toString(): string;
+}

package/ext/css/$CSSStyleRule.ts

@@ -0,0 +1,20 @@
+import type { $CSSDeclaration } from "#css/$CSSDeclaration";
+import { $CSSRule } from "#css/$CSSRule";
+
+export class $CSSStyleRule extends $CSSRule {
+    context: string[] = [];
+    declarations = new Map<string, $CSSDeclaration>();
+    className: string = '';
+    constructor(context: string[] = []) {
+        super();
+        this.context = context;
+    }
+
+    toString() {
+        return `${this.selector} { ${[...this.declarations.values()].map(dec => `${dec.property}: ${dec.value};`).join('\n')} }`
+    }
+
+    get selector() {
+        return this.context.join(' ');
+    }
+}

package/ext/css/css.ts

@@ -0,0 +1,101 @@
+import { $CSSDeclaration } from "#css/$CSSDeclaration";
+import { $CSSMediaRule } from "#css/$CSSMediaRule";
+import { $CSSRule } from "#css/$CSSRule";
+import { $CSSStyleRule } from "#css/$CSSStyleRule";
+import { randomId } from "#lib/randomId";
+import { $Element } from "#node/$Element";
+
+declare module '#core' {
+    export namespace $ {
+        export function css(options: $CSSOptions): $CSSStyleRule
+        export function CSS(options: $CSSSelector | $CSSMediaSelector): void
+    }
+}
+
+declare module '#node/$Element' {
+    export interface $Element {
+        css(...options: $CSSOptions[]): this;
+    }
+}
+
+Object.defineProperty($, 'css', {
+    value: function (options: $CSSOptions) {
+        if (options instanceof $CSSRule) return options;
+        const className = $CSS.generateClassName();
+        const rule = $CSS.createStyleRule(options, [className]);
+        rule.className = className;
+        return $CSS.insertRule( rule );
+    }
+})
+
+Object.defineProperty($, 'CSS', {
+    value: function (options: $CSSSelector | $CSSMediaRule) {
+        return Object.entries(options).map(([selector, declarations]) => {
+            return $CSS.insertRule( $CSS.createRule(selector, declarations) );
+        })
+    }
+})
+
+Object.defineProperty($Element.prototype, 'css', {
+    value: function (this: $Element, ...options: $CSSOptions[]) {
+        options.forEach(options => {
+            const rule = $.css(options);
+            this.addClass(rule.context[0]?.slice(1) as string);
+        })
+        return this;
+    }
+})
+
+export namespace $CSS {
+    export const stylesheet = new CSSStyleSheet();
+    const generatedIds = new Set<string>();
+    document.adoptedStyleSheets.push($CSS.stylesheet);
+    export function generateClassName(): string { 
+        const id = randomId();
+        if (generatedIds.has(id)) return generateClassName();
+        generatedIds.add(id);
+        return `.${id}`;
+    }
+
+    export function createStyleRule<T extends $CSSRule>(options: T, context?: string[]): T;
+    export function createStyleRule<T extends $CSSOptions>(options: T, context?: string[]): $CSSStyleRule;
+    export function createStyleRule<T extends $CSSOptions>(options: T, context: string[] = []) {
+        if (options instanceof $CSSRule) return options;
+        const rule = new $CSSStyleRule(context);
+        for (const [key, value] of Object.entries(options)) {
+            if (value === undefined) continue;
+            if (value instanceof Object) rule.rules.add( createRule(key, value, context) )
+                 else {
+                const declaration = new $CSSDeclaration(key, value);
+                rule.declarations.set(declaration.key, declaration);
+            }
+        }
+        return rule;
+    }
+
+    export function createRule(selector: string, options: $CSSOptions, context: string[] = []) {
+        if (selector.startsWith('@media')) return createMediaRule(selector.replace('@media ', ''), options, context);
+        else return createStyleRule(options, [...context, selector],);
+    }
+
+    export function createMediaRule(key: string, options: $CSSOptions, context: string[] = []) {
+        const rule = new $CSSMediaRule(key);
+        rule.rules.add(createStyleRule(options, context));
+        return rule;
+    }
+    
+    export function insertRule(rule: $CSSRule) {
+        if (rule instanceof $CSSStyleRule && !CSS.supports(`selector(${rule.selector})`)) return rule;
+        $CSS.stylesheet.insertRule(rule.toString(), $CSS.stylesheet.cssRules.length);
+        if (rule instanceof $CSSMediaRule) return;
+        rule.rules.forEach(rule => insertRule(rule))
+        return rule;
+    }
+}
+
+type $CSSOptions = $CSSDeclarations | $CSSSelector | $CSSRule | $CSSMediaSelector;
+type $CSSDeclarations = { [key in keyof CSSStyleDeclaration]?: string | number }
+type $CSSSelector = { [key: string & {}]: $CSSOptions }
+type $CSSMediaSelector = { [key: `@${string}`]: $CSSOptions }
+
+console.debug(document.adoptedStyleSheets[0])

package/ext/html/html.ts

@@ -0,0 +1,59 @@
+import '#core';
+import { $Node } from '#node/$Node';
+import { $HTMLElement } from './node/$HTMLElement';
+import './node/type';
+import { assignHelper } from '#lib/assignHelper';
+export * from './node/type';
+export * from './node/$HTMLElement';
+
+// create element classes
+export const [
+    $Input,
+    $Anchor,
+    $Image,
+    $Canvas,
+    $Dialog,
+    $Form,
+    $Label,
+    $Media,
+    $Select,
+    $Option,
+    $OptGroup,
+    $TextArea,
+] = [
+    $HTMLElementBuilder<HTMLInputElement>('input'),
+    $HTMLElementBuilder<HTMLAnchorElement>('a'),
+    $HTMLElementBuilder<HTMLImageElement>('img'),
+    $HTMLElementBuilder<HTMLCanvasElement>('canvas'),
+    $HTMLElementBuilder<HTMLDialogElement>('dialog'),
+    $HTMLElementBuilder<HTMLFormElement>('form'),
+    $HTMLElementBuilder<HTMLLabelElement>('label'),
+    $HTMLElementBuilder<HTMLMediaElement>('media'),
+    $HTMLElementBuilder<HTMLSelectElement>('select'),
+    $HTMLElementBuilder<HTMLOptionElement>('option'),
+    $HTMLElementBuilder<HTMLOptGroupElement>('optgroup'),
+    $HTMLElementBuilder<HTMLTextAreaElement>('textarea'),
+]
+
+const targets: [object: Constructor<Node>, target: Constructor<$Node>, tagname?: string][] = [
+    [HTMLElement, $HTMLElement],
+    [HTMLInputElement, $Input, 'input'],
+    [HTMLAnchorElement, $Anchor, 'a'],
+    [HTMLImageElement, $Image, 'img'],
+    [HTMLCanvasElement, $Canvas, 'canvas'],
+    [HTMLDialogElement, $Dialog, 'dialog'],
+    [HTMLFormElement, $Form, 'form'],
+    [HTMLLabelElement, $Label, 'label'],
+    [HTMLMediaElement, $Media, 'media'],
+    [HTMLSelectElement, $Select, 'select'],
+    [HTMLOptionElement, $Option, 'option'],
+    [HTMLOptGroupElement, $OptGroup, 'optgroup'],
+    [HTMLTextAreaElement, $TextArea, 'textarea'],
+];
+assignHelper(targets);
+
+function $HTMLElementBuilder<Ele extends HTMLElement>(tagName: string) {
+    return class extends $HTMLElement<Ele> {
+        constructor() { super(tagName) }
+    } 
+}

package/ext/html/node/$HTMLElement.ts

@@ -0,0 +1,7 @@
+import { $Element } from "#node/$Element";
+
+export class $HTMLElement<Ele extends HTMLElement = HTMLElement> extends $Element<Ele> {
+    constructor(resolver: string | Ele) {
+        super(resolver);
+    }
+}

package/ext/html/node/type.ts

@@ -0,0 +1,96 @@
+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
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "amateras",
+  "version": "0.0.1",
+  "description": "Amateras is a DOM Utility library.",
+  "module": "index.ts",
+  "type": "module",
+  "author": {
+    "name": "defaultkavy",
+    "email": "defaultkavy@gmail.com",
+    "url": "https://github.com/defaultkavy"
+  },
+  "bugs": {
+    "url": "https://github.com/defaultkavy/amateras/issues"
+  },
+  "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",
+    "#css": "./ext/css/css.ts",
+    "#css/*": "./ext/css/*.ts"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./core": "./src/core.ts",
+    "./node": "./src/node/node.ts",
+    "./node/*": "./src/node/*.ts",
+    "./lib/*": "./src/lib/*.ts",
+    "./structure/*": "./src/structure/*.ts",
+    "./html": "./ext/html/html.ts",
+    "./css": "./ext/css/css.ts",
+    "./css/*": "./ext/css/*.ts"
+  }
+}

package/src/core.ts

@@ -0,0 +1,84 @@
+import './global';
+import { Signal } from "#structure/Signal";
+import { $Element } from "#node/$Element";
+import { $Node, type $NodeContentTypes } from '#node/$Node';
+import '#node/node';
+
+const tagNameMap: {[key: string]: Constructor<$Node>} = {}
+export function $<K extends (...args: any[]) => $Node>(fn: K, ...args: Parameters<K>): ReturnType<K>;
+export function $<K extends $NodeContentTypes | undefined | void, F extends () => K, P extends Parameters<F>>(fn: F, ...args: any[]): K;
+export function $<K extends $Node, T extends Constructor<K>, P extends ConstructorParameters<T>>(construct: T, ...args: P): K;
+export function $<K extends TemplateStringsArray>(string: K, ...values: any[]): $NodeContentTypes[];
+export function $<K extends $Node>($node: K): K;
+export function $<K extends Element>(element: K): $Element<K>;
+export function $<K extends keyof HTMLElementTagNameMap>(tagname: K): $Element<HTMLElementTagNameMap[K]>
+export function $(tagname: string): $Element<HTMLElement>
+export function $(resolver: string | HTMLElement | $Node | Function | TemplateStringsArray, ...args: any[]) {
+    if (resolver instanceof $Node) return resolver;
+    if (typeof resolver === 'string' && tagNameMap[resolver]) return new tagNameMap[resolver]();
+    if (typeof resolver === 'function') 
+        if (resolver.prototype?.constructor) return 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 (resolver instanceof Node && resolver.$ instanceof $Node) return resolver.$;
+    return new $Element(resolver);
+}
+
+export namespace $ {
+    type SignalProcess<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
+    export type SignalFunction<T> = ({(value: ((newValue: T) => T) | T): SignalFunction<T>, (): T}) & { signal: Signal<T> } & SignalProcess<T>;
+    export function signal<T>(value: T): SignalFunction<T>
+    export function signal<T>(value: T) {
+        const signal = new Signal<T>(value);
+        const signalFn = function (newValue?: T) {
+            if (!arguments.length) return signal.value();
+            if (newValue !== undefined) signal.value(newValue);
+            return signalFn;
+        }
+        Object.defineProperty(signalFn, 'signal', { value: signal });
+        if (value instanceof Object) {
+            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 function compute<T>(process: () => T) {
+        let subscribed = false;
+        const signalFn: SignalFunction<any> = $.signal(null);
+        function computeFn() {
+            if (!subscribed) return signalFn(subscribe())();
+            else return signalFn(process())();
+        }
+        function subscribe () {
+            const signalHandler = (signal: Signal<any>) => { 
+                signal.subscribe(() => signalFn(process())) 
+            }
+            Signal.listeners.add(signalHandler);
+            const result = process();
+            Signal.listeners.delete(signalHandler);
+            subscribed = true;
+            return result;
+        }
+        Object.defineProperty(computeFn, 'signal', { value: signalFn.signal });
+        return computeFn as ComputeFunction<T>
+    }
+
+    export function registerTagName(tagname: string, $node: Constructor<$Node>) {
+        tagNameMap[tagname] = $node;
+        return $;
+    }
+
+    export function orArrayResolver<T>(item: OrArray<T>): T[] {
+        return item instanceof Array ? item : [item];
+    }
+}
+export type $ = typeof $;
+globalThis.$ = $;

package/src/global.ts

@@ -0,0 +1,22 @@
+import type { $Element } from '#node/$Element';
+import type { $Node } from '#node/$Node';
+import * as core from '#core';
+
+declare global {
+    export import $ = core.$;
+    type Nullish = null | undefined;
+    type OrArray<T> = T | T[];
+    type OrMatrix<T> = T | OrMatrix<T>[];
+    type OrPromise<T> = T | Promise<T>;
+    type OrNullish<T> = T | Nullish;
+    type Constructor<T> = { new (...args: any[]): T }
+    type Prettify<T> = {
+        [K in keyof T]: T[K];
+    } & {};
+    interface Node {
+        readonly $: $Node
+    }
+    interface Element {
+        readonly $: $Element
+    }
+}

package/src/index.ts

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

package/src/lib/assign.ts

@@ -0,0 +1,37 @@
+import { Signal } from "../structure/Signal";
+
+export function assign(target: any, {set, get, fn}: { 
+    set?: string[], 
+    get?: string[], 
+    fn?: string[]
+}) {
+    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => {
+        return arr?.map(prop => [type, prop]) ?? []
+    }
+    const list = [...filterAndMap('get', get), ...filterAndMap('set', set), ...filterAndMap('fn', fn)] as [string, string][];
+    for (const [type, prop] of list) {
+        Object.defineProperty(target.prototype, prop, {
+            ...(type === 'get' ? {
+                get() { return this.node[prop as any] }
+            } : {
+                writable: true,
+                ...(type === 'set' ? {
+                    // set
+                    value: function (this, args: any) {
+                        if (!arguments.length) return this.node[prop];
+                        const set = (value: any) => value !== undefined && (this.node[prop] = value);
+                        if (args instanceof Signal) args = args.subscribe(set).value();
+                        set(args)
+                        return this;
+                    }
+                } : {
+                    // fn
+                    value: function (this, ...args : any[]) {
+                        return this.node[prop](...args) ?? this;
+                    }
+                })
+            }),
+
+        })
+    }
+}

package/src/lib/assignHelper.ts

@@ -0,0 +1,18 @@
+import type { $Node } from "#node/$Node";
+import { assign } from "./assign";
+
+export function assignHelper(targets: [object: Constructor<Node>, target: Constructor<$Node>, tagname?: string][]) {
+    for (const [object, target, tagname] of targets) {
+        const {set, get, fn} = { set: [] as string[], get: [] as string[], fn: [] as string[] }
+        // assign native object properties to target
+        for (const [prop, value] of Object.entries(Object.getOwnPropertyDescriptors(object.prototype))) {
+            if (prop in target.prototype) continue;
+            if (value.get && !value.set) get.push(prop);
+            else if (value.value) fn.push(prop);
+            else if (value.get && value.set) set.push(prop);
+        }
+        assign(target, {set, get, fn})
+        // register tagname
+        if (tagname) $.registerTagName(tagname, target)
+    }
+}

package/src/lib/randomId.ts

@@ -0,0 +1,9 @@
+const LOWER = 'abcdefghijklmnopqrstuvwxyz';
+const UPPER = LOWER.toUpperCase();
+export function randomId(options?: {length?: number, case?: 'any' | 'lower' | 'upper'}): string { 
+    options = {length: 5, case: 'any', ...options};
+    const char = options.case === 'any' ? LOWER + UPPER : options.case === 'lower' ? LOWER : UPPER;
+    return Array.from({length: options.length as number}, (_, i) => { 
+        const rand = Math.round(Math.random() * char.length); return char[rand] 
+    }).join(''); 
+}

package/src/lib/sleep.ts

@@ -0,0 +1,3 @@
+export async function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}

package/src/node/$Element.ts

@@ -0,0 +1,59 @@
+import { Signal } from "#structure/Signal";
+import { $Node } from "#node/$Node";
+
+export class $Element<Ele extends Element = Element> extends $Node {
+    listeners = new Map<Function, (event: Event) => void>;
+    declare node: Ele
+    constructor(resolver: Ele | string) {
+        super(resolver instanceof Element ? resolver : document.createElement(resolver) as unknown as Ele)
+        //@ts-expect-error
+        this.node.$ = this;
+    }
+
+    attr(): {[key: string]: string};
+    attr(obj: {[key: string]: string | number | boolean | Signal<any>}): this;
+    attr(obj?: {[key: string]: string | number | boolean | Signal<any>}) {
+        if (!arguments.length) return Object.fromEntries(Array.from(this.node.attributes).map(attr => [attr.name, attr.value]));
+        if (obj) for (let [key, value] of Object.entries(obj)) {
+            const set = (value: any) => value !== undefined && this.node.setAttribute(key, `${value}`)
+            if (value instanceof Signal) value = value.subscribe(set).value();
+            set(value);
+        }
+        return this;
+    }
+
+    class(...token: string[]) {
+        this.node.classList = token.join(' ');
+        return this;
+    }
+
+    addClass(...token: string[]) {
+        this.node.classList.add(...token);
+        return this;
+    }
+    
+    removeClass(...token: string[]) {
+        this.node.classList.remove(...token);
+        return this;
+    }
+
+    use(callback: ($ele: this) => void) {
+        callback(this);
+        return this;
+    }
+
+    on<K extends keyof HTMLElementEventMap>(type: K, listener: ($node: this, event: Event) => void, options?: boolean | AddEventListenerOptions) {
+        const handler = (event: Event) => listener(this, event);
+        this.listeners.set(listener, handler);
+        this.node.addEventListener(type, handler, options);
+        return this;
+    }
+
+    off<K extends keyof HTMLElementEventMap>(type: K, listener: ($node: this, event: Event) => void, options?: boolean | EventListenerOptions) {
+        const handler = this.listeners.get(listener);
+        if (handler) this.node.removeEventListener(type, handler, options);
+        this.listeners.delete(listener);
+        return this;
+    }
+    once() {}
+}

package/src/node/$Node.ts

@@ -0,0 +1,80 @@
+import { Signal } from "#structure/Signal";
+
+export class $Node {
+    node: Node;
+    constructor(node: Node) {
+        this.node = node;
+        //@ts-expect-error
+        this.node.$ = this;
+    }
+
+    content(children: $NodeContentResolver<this>) {
+        this.node.childNodes.forEach(node => node.remove());
+        return this.insert(children);
+    }
+
+    insert(resolver: $NodeContentResolver<this>, position = -1) {
+        if (resolver instanceof Function) {
+            const content = resolver(this);
+            if (content instanceof Promise) content.then(content => $Node.insertChild(this.node, content, position))
+            else $Node.insertChild(this.node, content, position);
+        } else $Node.insertChild(this.node, resolver, position);
+        return this;
+    }
+
+    await<T>(promise: Promise<T>, callback: ($node: this, result: T) => void): this {
+        promise.then(result => callback(this, result));
+        return this;
+    }
+
+    replace($node: $NodeContentTypes | undefined | null) {
+        if (!$node) return this;
+        this.node.parentNode?.replaceChild($Node.processContent($node), this.node);
+        return 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) if (child !== undefined) append($Node.processContent(child))
+    }
+
+    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 (content === undefined) return undefined;
+        if (content === null) return null;
+        // is $Element
+        if (content instanceof $Node) return content.node;
+        // is Promise
+        if (content instanceof Promise) {
+            const async = $('async').await(content, ($async, $child) => $async.replace($child));
+            return async.node;
+        }
+        // is SignalFunction
+        if (content instanceof Function && (content as $.SignalFunction<any>).signal instanceof Signal) {
+            const text = new Text();
+            const set = (value: any) => text.textContent = value instanceof Object ? JSON.stringify(value) : value;
+            (content as $.SignalFunction<any>).signal.subscribe(set);
+            set((content as $.SignalFunction<any>)());
+            return text;
+        }
+        // is string | number | boolean
+        return new Text(`${content}`);
+    }
+}
+
+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>>

package/src/node/node.ts

@@ -0,0 +1,11 @@
+import { assignHelper } from '#lib/assignHelper';
+import { $Element } from '#node/$Element';
+import { $Node } from './$Node';
+
+export * from './$Element';
+export * from './$Node';
+
+assignHelper([
+    [Node, $Node], 
+    [Element, $Element],
+])

package/src/structure/Signal.ts

@@ -0,0 +1,40 @@
+export class Signal<T> {
+    #value: T;
+    subscribers = new Set<(value: T) => void>();
+    static listeners = new Set<(signal: Signal<any>) => void>();
+    constructor(value: T) {
+        this.#value = value;
+    }
+
+    value(): T;
+    value(newValue: T): this;
+    value(callback: (oldValue: T) => T): this;
+    value(resolver?: T | ((oldValue: T) => T)) {
+        if (!arguments.length) {
+            Signal.listeners.forEach(fn => fn(this));
+            return this.#value;
+        }
+        if (resolver instanceof Function) this.value(resolver(this.#value));
+        else if (resolver !== undefined) {
+            this.#value = resolver;
+            this.emit();
+        }
+        return this;
+    }
+
+    emit() {
+        this.subscribers.forEach(subs => subs(this.#value))
+        return this;
+    }
+
+    subscribe(callback: (value: T) => void) {
+        this.subscribers.add(callback);
+        return this;
+    }
+
+    unsubscribe(callback: (value: T) => void) {
+        this.subscribers.delete(callback);
+        return this;
+    }
+
+}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+  "exclude": ["dist"]
+}