amateras 0.4.2 → 0.6.0

package/{src → ext/signal/src}/structure/Signal.ts

@@ -1,9 +1,8 @@
-import { _instanceof, forEach, isUndefined } from "#lib/native";
+import { _instanceof, forEach, isFunction, isUndefined } from "amateras/lib/native";
 
 export class Signal<T> {
     #value: T;
-    subscribers = new Set<(value: T) => void>();
-    static listeners = new Set<(signal: Signal<any>) => void>();
+    #subscribers = new Set<(value: T) => void>();
     constructor(value: T) {
         this.#value = value;
     }
@@ -12,11 +11,8 @@ export class Signal<T> {
     value(newValue: T): this;
     value(callback: (oldValue: T) => T): this;
     value(resolver?: T | ((oldValue: T) => T)) {
-        if (!arguments.length) {
-            forEach(Signal.listeners, fn => fn(this));
-            return this.#value;
-        }
-        if (_instanceof(resolver, Function)) this.value(resolver(this.#value));
+        if (!arguments.length) return this.#value;
+        if (isFunction(resolver)) this.value(resolver(this.#value));
         else if (!isUndefined(resolver)) {
             this.#value = resolver;
             this.emit();
@@ -25,17 +21,17 @@ export class Signal<T> {
     }
 
     emit() {
-        forEach(this.subscribers, subs => subs(this.#value))
+        forEach(this.#subscribers, subs => subs(this.#value))
         return this;
     }
 
     subscribe(callback: (value: T) => void) {
-        this.subscribers.add(callback);
+        this.#subscribers.add(callback);
         return this;
     }
 
     unsubscribe(callback: (value: T) => void) {
-        this.subscribers.delete(callback);
+        this.#subscribers.delete(callback);
         return this;
     }
 

package/ext/ssr/index.ts

@@ -32,10 +32,10 @@ _Object_assign($, {
         node.replaceWith($node.node);
     
         function getData(node: Node, $node: $Node) {
-            if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
-                const type = $(node).attr()['type'];
-                return forEach($node.signals, signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
-            }
+            // if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
+            //     const type = $(node).attr()['type'];
+            //     return forEach($node.signals, signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
+            // }
             if (_instanceof(node, Text)) return $node.textContent(node.textContent);
             if (_instanceof(node, Element) && _instanceof($node, $Element)) $node.attr($(node).attr());
             const arr = _Array_from($node.childNodes);

package/ext/ui/lib/VirtualScroll.ts

@@ -0,0 +1,25 @@
+import { _Array_from, _instanceof, forEach } from "amateras/lib/native";
+import type { $Virtual } from "amateras/node/$Virtual";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { _document } from "amateras/lib/env";
+import type { $Node } from "amateras/node/$Node";
+
+export const VirtualScroll = ($parent: $Virtual, scroller: $Node = $(_document)) => {
+    scroller.on('scroll', () => render($parent), true);
+    $parent.on('layout', () => render($parent));
+}
+
+const render = ($parent: $Virtual) => {
+    const number = parseInt;
+    const parentRect = $parent.getBoundingClientRect();
+    const children = _Array_from($parent.nodes);
+    forEach(children, $child => {
+        if (!_instanceof($child, $HTMLElement)) return;
+        const { top, height } = $child.style();
+        const topPos = parentRect.top + number(top);
+        const bottomPos = topPos + number(height);
+        if (bottomPos < 0 || topPos > outerHeight + 200) $parent.hide($child);
+        else $parent.show($child);
+    })
+    $parent.render();
+}

package/ext/ui/node/Accordian.ts

@@ -0,0 +1,97 @@
+import { _Array_from, _instanceof, forEach, isNull } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import type { $Node, $NodeContentResolver } from "amateras/node/$Node";
+import { chain } from "../../../src/lib/chain";
+
+const [ACCORDIAN, ACCORDIAN_ITEM, ACCORDIAN_TRIGGER, ACCORDIAN_CONTENT, ACCORDIAN_CONTAINER] = ['accordian', 'accordian-item', 'accordian-trigger', 'accordian-content', 'accordian-container'] as const;
+forEach([
+    `${ACCORDIAN},${ACCORDIAN_ITEM},${ACCORDIAN_TRIGGER}{display:block}`,
+    `${ACCORDIAN_CONTENT}{display:grid;grid-template-rows:0fr}`,
+    `${ACCORDIAN_CONTENT}[opened]{grid-template-rows:1fr}`,
+    `${ACCORDIAN_CONTAINER}{overflow:hidden}`,
+], $.style)
+
+export class Accordian extends $HTMLElement {
+    #autoclose = false;
+    constructor() {
+        super(ACCORDIAN);
+    }
+
+    autoclose(): boolean;
+    autoclose(autoclose: boolean): this;
+    autoclose(autoclose?: boolean) {
+        return chain(this, arguments, () => this.#autoclose, autoclose, autoclose => this.#autoclose = autoclose);
+    }
+
+    get items() {
+        return _Array_from($(this.childNodes)).filter($child => _instanceof($child, AccordianItem))
+    }
+}
+
+export class AccordianItem extends $HTMLElement {
+    $content: null | AccordianContent = null;
+    $trigger: null | AccordianTrigger = null;
+    $root: null | Accordian = null;
+    constructor() {
+        super(ACCORDIAN_ITEM);
+    }
+
+    mounted($parent: $Node): this {
+        if (_instanceof($parent, Accordian)) this.$root = $parent;
+        forEach($(this.childNodes), $c => {
+            if (_instanceof($c, AccordianTrigger)) this.$trigger = $c;
+            if (_instanceof($c, AccordianContent)) this.$content = $c;
+        })
+        return this;
+    }
+}
+
+export class AccordianTrigger extends $HTMLElement {
+    $item: null | AccordianItem = null;
+    constructor() {
+        super(ACCORDIAN_TRIGGER);
+        this.on('click', _ => {
+            const $item = this.$item;
+            const $root = $item?.$root;
+            this.$item?.$content?.use($content => isNull($content.attr('opened')) ? $content.open() : $content.close());
+            $root?.autoclose() && $root.items.forEach($i => $i !== $item && $i.$content?.close())
+        })
+    }
+
+    mounted($parent: $Node): this {
+        if (_instanceof($parent, AccordianItem)) this.$item = $parent;
+        return this;
+    }
+}
+
+export class AccordianContent extends $HTMLElement {
+    $container = $(AccordianContainer);
+    constructor() {
+        super(ACCORDIAN_CONTENT);
+        super.insert(this.$container);
+    }
+
+    content(children: $NodeContentResolver<AccordianContainer>): this {
+        this.$container.content(children);
+        return this;
+    }
+
+    insert(resolver: $NodeContentResolver<AccordianContainer>, position?: number): this {
+        this.$container.insert(resolver, position);
+        return this;
+    }
+
+    open() {
+        return this.attr({opened: ''})
+    }
+
+    close() {
+        return this.attr({opened: null});
+    }
+}
+
+export class AccordianContainer extends $HTMLElement {
+    constructor() {
+        super(ACCORDIAN_CONTAINER);
+    }
+}

package/ext/ui/node/Form.ts

@@ -0,0 +1,53 @@
+import { $Form } from 'amateras/html/$Form';
+import { $HTMLElement } from 'amateras/node/$HTMLElement';
+import { $Label } from 'amateras/html/$Label';
+import { $Input } from 'amateras/html/$Input';
+import type { $Node } from '../../../src/node/$Node';
+import { _instanceof, _undefined } from '../../../src/lib/native';
+
+export class Form extends $Form {
+    constructor() {
+        super();
+    }
+
+    get data() {
+        return Object.fromEntries(new FormData(this.node).entries());
+    }
+}
+
+export class FormField extends $HTMLElement {
+    constructor() {
+        super('form-field');
+    }
+}
+
+export class FormItem extends $HTMLElement {
+    constructor(name?: string) {
+        super('form-item');
+        this.attr({ name });
+    }
+}
+
+export class Label extends $Label {
+    constructor() {
+        super();
+    }
+
+    mounted($parent: $Node): void {
+        if (_instanceof($parent, FormItem)) 
+            this.htmlFor($parent.attr('name') ?? _undefined);
+    }
+}
+
+export class Input extends $Input {
+    constructor() {
+        super();
+    }
+
+    mounted($parent: $Node): void {
+        if (_instanceof($parent, FormItem)) {
+            const name = $parent.attr('name') ?? _undefined;
+            this.id(name).name(name);
+        }
+    }
+}

package/ext/ui/node/Table.ts

@@ -0,0 +1,43 @@
+import { $HTMLElement } from "../../../src/node/$HTMLElement";
+
+export class Table extends $HTMLElement {
+    constructor() {
+        super('table');
+    }
+}
+
+export class TableHeader extends $HTMLElement {
+    constructor() {
+        super('thead')
+    }
+}
+
+export class TableBody extends $HTMLElement {
+    constructor() {
+        super('tbody')
+    }
+}
+
+export class TableRow extends $HTMLElement {
+    constructor() {
+        super('tr')
+    }
+}
+
+export class TableHead extends $HTMLElement {
+    constructor() {
+        super('th')
+    }
+}
+
+export class TableCell extends $HTMLElement {
+    constructor() {
+        super('td')
+    }
+}
+
+export class TableFooter extends $HTMLElement {
+    constructor() {
+        super('tfoot')
+    }
+}

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.4.2",
+  "version": "0.6.0",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -33,9 +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"
+    "./i18n": "./ext/i18n/src/index.ts",
+    "./idb": "./ext/idb/src/index.ts",
+    "./idb/core": "./ext/idb/src/core.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,19 +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 { $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;
@@ -21,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;
@@ -45,68 +52,33 @@ export function $(resolver: string | number | null | undefined | Element | HTMLE
     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, NodeList)) return _Array_from(resolver).map($)
+    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
     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>
-    }
+    // 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 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>
-    }
-
-    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 $;
     }
 
-    export const toArray = <T>(item: OrArray<T>): T[] => _instanceof(item, Array) ? item : [item];
-
     export const span = (content: string) => $('span').content(content);
 }
+
 export type $ = typeof $;
 globalThis.$ = $;