amateras 0.3.0 → 0.4.1

package/ext/css/src/lib/colorAssign.ts

@@ -1,6 +1,6 @@
 import { _Object_assign } from "../../../../src/lib/native";
 
-export function colorAssign(key: string, colors: {[key: number]: string}) {
+export const colorAssign = (key: string, colors: {[key: number]: string}) => {
     if (!$.color) _Object_assign($, {color: {}});
     _Object_assign($.color, {[key]: colors})
 }

package/ext/css/src/structure/$CSSContainerRule.ts

@@ -0,0 +1,13 @@
+import { _Array_from, _instanceof } from "amateras/lib/native";
+import { $CSSRule } from "#structure/$CSSRule";
+
+export class $CSSContainerRule extends $CSSRule {
+    condition: string;
+    name: string;
+    constructor(selector: string) {
+        super(selector);
+        const [_, name, condition] = selector.match(/@container (.+?) (.+)/) as [string, string, string]
+        this.name = name;
+        this.condition = condition;
+    }
+}

package/ext/css/src/structure/$CSSRule.ts

@@ -8,6 +8,6 @@ export abstract class $CSSRule {
     }
 
     get options(): {[key: string]: any} {
-        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule]))
+        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule.options]))
     }
 }

package/ext/css/src/structure/$CSSStyleRule.ts

@@ -8,13 +8,6 @@ export class $CSSStyleRule extends $CSSRule {
         super(selector);
     }
 
-    clone(selector: string) {
-        const rule = new $CSSStyleRule(selector)
-        rule.declarations = this.declarations;
-        rule.rules = this.rules;
-        return rule
-    }
-
     get options(): {[key: string]: any} {
         return {..._Object_fromEntries(_Array_from(this.declarations).map(([_, dec]) => [dec.key, dec])), ...super.options}
     }

package/ext/css/src/structure/$CSSVariable.ts

@@ -1,7 +1,7 @@
-export class $CSSVariable {
+export class $CSSVariable<V = string> {
     key: string;
-    value: string;
-    constructor(key: string, value: string) {
+    value: V;
+    constructor(key: string, value: V) {
         this.key = key;
         this.value = value;
     }

package/ext/html/html.ts

@@ -10,16 +10,4 @@ import './node/$Media';
 import './node/$OptGroup';
 import './node/$Option';
 import './node/$Select';
-import './node/$TextArea';
-export * from './node/$Anchor';
-export * from './node/$Canvas';
-export * from './node/$Dialog';
-export * from './node/$Form';
-export * from './node/$Image';
-export * from './node/$Input';
-export * from './node/$Label';
-export * from './node/$Media';
-export * from './node/$OptGroup';
-export * from './node/$Option';
-export * from './node/$Select';
-export * from './node/$TextArea';
+import './node/$TextArea';

package/ext/i18n/README.md

@@ -0,0 +1,53 @@
+# amateras/i18n
+
+## Usage
+```ts
+import 'amateras';
+import 'amateras/i18n';
+
+const $t = $.i18n()
+// add 'en' locale dictionary context
+.add('en', {
+    homepage: {
+        _: 'Home',
+        hello: 'Hello, $name$!',
+    }
+})
+// set 'en' as locale language
+.locale('en')
+
+$(document.body).content([
+    $('h1').content( $t('homepage') )
+    // <h1><text>Home</text></h1>
+    $t('homepage.hello', {name: 'Amateras'}) 
+    // <text>Hello, Amateras!</text>
+])
+```
+
+## Change Language
+```ts
+$t.locale('zh')
+// all translation text will be updated
+```
+
+## Import Dictionary Context
+
+```ts
+// ./i18n/en.ts
+export default {
+    hello: 'Hello, $name$!'
+}
+
+// ./i18n/zh.ts
+export default {
+    hello: '您好，$name$！'
+}
+
+// ./entry_file.ts
+const $t = $.i18n()
+.add('en', () => import('./i18n/en.ts'))
+.add('zh', () => import('./i18n/zh.ts'))
+// set 'zh' as locale language
+// and fetch file automatically from path
+.locale('zh');
+```

package/ext/i18n/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "@amateras/i18n",
+    "peerDependencies": {
+        "amateras": "../../"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#node/*": "./src/node/*.ts"
+    }
+}

package/ext/i18n/src/index.ts

@@ -0,0 +1,54 @@
+import { _Array_from, _instanceof, _Object_assign } from "amateras/lib/native"
+import { $ } from "amateras/core"
+import { I18n } from "#structure/I18n"
+import type { I18nText as _I18nText, I18nTextOptions } from "#node/I18nText";
+import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
+
+_Object_assign($, {
+    i18n(defaultLocale: string) {
+        const i18n = new I18n(defaultLocale);
+        const i18nFn = (key: string, options?: I18nTextOptions) => i18n.translate(key, options);
+        _Object_assign(i18nFn, { 
+            i18n,
+            locale(locale: string) {
+                if (!arguments.length) return i18n.locale();
+                i18n.locale(locale);
+                return this;
+            },
+            add(lang: string, context: I18nDictionaryContext | I18nDictionaryContextImporter) {
+                i18n.map.set(lang, new I18nDictionary(context));
+                return this;
+            },
+            delete(lang: string) {
+                i18n.map.delete(lang);
+                return this;
+            }
+        })
+        return i18nFn
+    }
+})
+
+type ResolvedAsyncDictionary<F extends I18nDictionaryContextImporter> = Awaited<ReturnType<F>>['default'];
+
+type DeepKeys<T> = T extends I18nDictionaryContext
+  ? {
+      [K in keyof T]: K extends string
+        ? K extends '_' ? never : `${K}` | `${K}.${DeepKeys<T[K]>}`
+        : never;
+    }[keyof T]
+  : never;
+
+declare module "amateras/core" {
+    export namespace $ {
+        export interface I18nFunction<D extends I18nDictionaryContext = {}> {
+            (path: DeepKeys<D>, ...args: any[]): I18nText;
+            i18n: I18n;
+            locale(): string;
+            locale(lang?: $Parameter<string>): this;
+            add<F extends I18nDictionaryContext | I18nDictionaryContextImporter>(lang: string, dictionary: F): I18nFunction<D | (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>;
+            delete(lang: string): this;
+        }
+        export function i18n(defaultLocale: string): I18nFunction;
+        export type I18nText = _I18nText;
+    }
+}

package/ext/i18n/src/node/I18nText.ts

@@ -0,0 +1,35 @@
+import { _Array_from, isUndefined } from "amateras/lib/native";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import type { I18n } from "#structure/I18n";
+
+export class I18nText extends $HTMLElement<HTMLElement, { i18nupdate: Event }> {
+    i18n: I18n;
+    key: string;
+    options: I18nTextOptions | undefined;
+    constructor(i18n: I18n, key: string, options?: I18nTextOptions) {
+        super('text');
+        this.i18n = i18n;
+        this.key = key;
+        this.options = options;
+        i18n.locale$.signal.subscribe(() => this.update())
+        this.update();
+    }
+    
+    async update() {
+        update: {
+            const {key, i18n} = this;
+            const dictionary = i18n.dictionary();
+            if (!dictionary) {this.content(key); break update}
+            const target = await dictionary.find(key);
+            if (isUndefined(target)) break update;
+            const snippets = target.split(/\$[a-zA-Z0-9_]+\$/);
+            if (snippets.length === 1 || !this.options) {this.content(target); break update}
+            const matches = target.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
+            this.content(snippets.map(text => [text, this.options?.[matches.next().value?.at(2)!] ?? null]));
+        }
+        this.dispatchEvent(new Event('i18nupdate'));
+        return this;
+    }
+}
+
+export type I18nTextOptions = {[key: string]: any}

package/ext/i18n/src/structure/I18n.ts

@@ -0,0 +1,40 @@
+import { _instanceof } from "amateras/lib/native";
+import { I18nText, type I18nTextOptions } from "#node/I18nText";
+import { I18nDictionary } from "#structure/I18nDictionary";
+
+export class I18n {
+    locale$ = $.signal<string>('');
+    map = new Map<string, I18nDictionary>();
+    #defaultLocale: string;
+    constructor(defaultLocale: string) {
+        this.#defaultLocale = defaultLocale;
+        this.locale$.set(defaultLocale);
+    }
+
+    defaultLocale(): string;
+    defaultLocale(locale: string): this;
+    defaultLocale(locale?: string) {
+        if (!arguments.length) return this.#defaultLocale;
+        if (locale) this.locale$.set(locale);
+        return this;
+    }
+
+    locale(): string;
+    locale(locale: string): this;
+    locale(locale?: string) {
+        if (!arguments.length) return this.locale$();
+        if (locale) this.locale$.set(locale)
+        return this;
+    }
+
+    dictionary(locale = this.locale$()) {
+        if (!locale) return null;
+        const dictionary = this.map.get(locale);
+        return dictionary;
+    }
+
+    translate(key: string, options?: I18nTextOptions) {
+        return new I18nText(this, key, options);
+    }
+}
+

package/ext/i18n/src/structure/I18nDictionary.ts

@@ -0,0 +1,31 @@
+import { _instanceof, isObject } from "amateras/lib/native";
+
+export class I18nDictionary {
+    #context: I18nDictionaryContext | Promise<I18nDictionaryContext> | null = null;
+    #fetch: I18nDictionaryContextImporter | null = null;
+    constructor(resolver: I18nDictionaryContext | I18nDictionaryContextImporter) {
+        if (_instanceof(resolver, Function)) this.#fetch = resolver;
+        else this.#context = resolver;
+    }
+
+    async context(): Promise<I18nDictionaryContext> {
+        if (this.#context) return await this.#context;
+        if (!this.#fetch) throw 'I18n Context Fetch Error';
+        return this.#context = this.#fetch().then((module) => module.default);
+    }
+
+    async find(path: string, context?: I18nDictionaryContext): Promise<string | undefined> {
+        if (!context) context = await this.context();
+        const [snippet, ...rest] = path.split('.') as [string, ...string[]];
+        const target = context[snippet];
+        if (isObject(target)) {
+            if (rest.length) return this.find(rest.join('.'), target);
+            else return target['_'] as string;
+        } 
+        if (rest.length) return path;
+        else return target;
+    }
+}
+
+export type I18nDictionaryContext = {[key: string]: string | I18nDictionaryContext}
+export type I18nDictionaryContextImporter = () => Promise<{default: I18nDictionaryContext}>

package/ext/router/index.ts

@@ -1,5 +1,5 @@
 import type { AnchorTarget } from "#html/$Anchor";
-import { _Object_assign, forEach } from "#lib/native";
+import { _bind, _Object_assign, forEach } from "#lib/native";
 import type { $NodeContentResolver } from "#node/$Node";
 import type { Page } from "./node/Page";
 import { Route } from "./node/Route";
@@ -21,18 +21,25 @@ declare module 'amateras/core' {
         export function forward(): typeof Router;
     }
 }
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'routeopen': Event;
+    }
+}
+
 // assign methods
 _Object_assign($, {
-    open: Router.open.bind(Router),
-    replace: Router.replace.bind(Router),
-    back: Router.back.bind(Router),
-    forward: Router.forward.bind(Router)
+    open: _bind(Router.open, Router),
+    replace: _bind(Router.replace, Router),
+    back: _bind(Router.back, Router),
+    forward: _bind(Router.forward, Router)
 });
 // define styles
 forEach([
     `router{display:block}`,
     `page{display:block}`
-], rule => $.stylesheet.insertRule(rule));
+], $.style);
 // assign nodes
 $.assign([
     ['router', Router],

package/ext/router/node/Page.ts

@@ -1,3 +1,4 @@
+import { chain } from "#lib/chain";
 import { isUndefined } from "#lib/native";
 import { $HTMLElement } from "#node/$HTMLElement";
 import type { RouteData } from "..";
@@ -9,6 +10,7 @@ export class Page<R extends Route<any> = any, Data extends RouteData = any> exte
     params: Data['params'];
     query: Data['query'];
     #pageTitle: null | string = null;
+    initial = false;
     constructor(route: R, data?: {params: any, query: any}) {
         super('page');
         this.route = route;
@@ -20,8 +22,6 @@ export class Page<R extends Route<any> = any, Data extends RouteData = any> exte
     pageTitle(): string | null;
     pageTitle(title: string | null): this;
     pageTitle(title?: string | null) {
-        if (!arguments.length) return this.#pageTitle;
-        if (!isUndefined(title)) this.#pageTitle = title;
-        return this;
+        return chain(this, arguments, () => this.#pageTitle, title, title => this.#pageTitle = title)
     }
 }

package/ext/router/node/Route.ts

@@ -1,5 +1,5 @@
 import { _instanceof, _Object_fromEntries, _Array_from } from "#lib/native";
-import { $Element } from "#node/node";
+import { $Element } from "#node/$Element";
 import type { AsyncRoute, RouteBuilder, RouteDataResolver } from "..";
 import { Page } from "./Page";
 
@@ -37,6 +37,7 @@ export class Route<Path extends string = string> extends BaseRouteNode<Path> {
     async build(data: {params: any, query: any} = {params: {}, query: {}}, page?: Page) {
         page = page ?? new Page(this, data);
         page.params = data.params;
+        page.initial = true;
         let resolver: any = this.builder(page);
         if (_instanceof(resolver, Promise)) {
             const result = await resolver as any;

package/ext/router/node/Router.ts

@@ -1,24 +1,32 @@
 import type { AnchorTarget } from "#html/$Anchor";
-import { _Array_from, _document, _instanceof, _Object_fromEntries, forEach } from "#lib/native";
+import { _document } from "#lib/env";
+import { _Array_from, _instanceof, _JSON_parse, _JSON_stringify, _Object_entries, _Object_fromEntries, forEach, startsWith } from "#lib/native";
 import { Page } from "./Page";
 import { BaseRouteNode, Route } from "./Route";
 
 // history index
 let index = 0;
+const _addEventListener = addEventListener;
 const _location = location;
 const {origin} = _location;
 const _history = history;
+const _sessionStorage = sessionStorage;
 const documentElement = _document.documentElement;
 const [PUSH, REPLACE] = [1, 2] as const;
 const [FORWARD, BACK] = ['forward', 'back'] as const;
-
-// disable browser scroll restoration
-_history.scrollRestoration = 'manual';
-
+const scrollStorageKey = '__scroll__';
 /** convert path string to URL object */
 const toURL = (path: string | URL) => 
-    _instanceof(path, URL) ? path : path.startsWith('http') ? new URL(path) : new URL(path.startsWith(origin) ? path : origin + path);
+    _instanceof(path, URL) ? path : startsWith(path, 'http') ? new URL(path) : new URL(startsWith(path, origin) ? path : origin + path);
 
+type ScrollData = {[key: number]: {x: number, y: number}};
+const scrollRecord = (e?: Event) => {
+    const data = _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}') as ScrollData;
+    data[index] = { x: documentElement.scrollLeft, y: documentElement.scrollTop };
+    // e is Event when called from scroll or beforeload
+    if (!e) forEach(_Object_entries(data), ([i]) => +i > index && delete data[+i])
+    _sessionStorage.setItem(scrollStorageKey, _JSON_stringify(data));
+}
 /** handle history state with push and replace state. */
 const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?: AnchorTarget) => {
     if (!path) return;
@@ -26,16 +34,14 @@ const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?
     if (url.href === _location.href) return;
     if (target && target !== '_self') return open(url, target);
     if (url.origin !== origin) return open(url, target);
-    _history.replaceState({
-        index: index,
-        x: documentElement.scrollLeft,
-        y: documentElement.scrollTop
-    }, '', _location.href);
+    scrollRecord();
     if (mode === PUSH) index += 1;
     Router.direction = FORWARD;
-    history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url)
-    for (let router of Router.routers) router.routes.size && await router.resolve(path)
+    _history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url);
+    for (let router of Router.routers) router.routes.size && await router.resolve(path);
 }
+// disable browser scroll restoration
+_history.scrollRestoration = 'manual';
 
 export class Router extends BaseRouteNode<''> {
     static pageRouters = new Map<Page, Router>();
@@ -88,7 +94,7 @@ export class Router extends BaseRouteNode<''> {
                     if (routeSnippet.includes(':')) {
                         if (targetSnippet === '/') continue routeLoop;
                         const [prefix, paramName] = routeSnippet.split(':') as [string, string];
-                        if (!targetSnippet.startsWith(prefix)) continue routeLoop;
+                        if (!startsWith(targetSnippet, prefix)) continue routeLoop;
                         routeData.params[paramName] = targetSnippet.replace(`${prefix}`, '');
                         pass();
                         continue splitLoop;
@@ -105,21 +111,20 @@ export class Router extends BaseRouteNode<''> {
         const targetRoutes = determineRoute(this, pathname + '/', hash);
         // build pages
         let prevPage: null | Page = null, prevRoute: BaseRouteNode<any> = this;
+        const appendPage = (prevRouter: Router | undefined, page: Page) => page.parentNode !== prevRouter?.node && prevRouter?.content(page);
+
         for (const [route, pathId] of targetRoutes) {
             const page = this.pageMap.get(pathId) ?? new Page(route ?? prevRoute.routes.get('404') ?? new Route('404', () => null), routeData);
-            await route?.build(routeData, page);
+            if (!page.initial) await route?.build(routeData, page);
             _document && (_document.title = page.pageTitle() ?? _document.title);
             this.pageMap.set(pathId, page);
-
-            if (href === _location.href) {
-                if (prevPage) Router.pageRouters.get(prevPage)?.content(page);
-                else this.content(page);
-            }
+            if (href === _location.href) appendPage(prevPage ? Router.pageRouters.get(prevPage) : this, page);
             prevPage = page;
             if (route) prevRoute = route;
         }
-        let { x, y } = _history.state ?? {x: 0, y: 0};
+        let { x, y } = Router.scroll ?? {x: 0, y: 0};
         scrollTo(x, y);
+        this.dispatchEvent(new Event('routeopen', {bubbles: true}));
         return this;
     }
 
@@ -131,8 +136,14 @@ export class Router extends BaseRouteNode<''> {
             index = stateIndex;
             this.resolve(_location.href);
         }
-        addEventListener('popstate', resolve);
+        _addEventListener('popstate', resolve);
+        _addEventListener('beforeunload', scrollRecord);
+        _addEventListener('scroll', scrollRecord, false);
         resolve();
         return this;
     }
+
+    static get scroll(): ScrollData[number] {
+        return _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}')[index] ?? {x: 0, y: 0}
+    }
 }

package/ext/ssr/index.ts

@@ -1,8 +1,10 @@
 import './env';
 import 'amateras';
-import { _Array_from, _document, _instanceof, _Object_assign, _Object_defineProperty, forEach } from "amateras/lib/native";
-import { $Element, $Node, $Text } from "amateras/node";
+import { _Array_from, _instanceof, _Object_assign, _Object_defineProperty, forEach } from "amateras/lib/native";
+import { $Element } from 'amateras/node/$Element';
 import { BROWSER, NODE } from 'esm-env';
+import { $Node, $Text } from 'amateras/node/$Node';
+import { _document } from '../../src/lib/env';
 
 declare module 'amateras/core' {
     export namespace $ {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",
@@ -25,7 +25,6 @@
   "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",
@@ -35,12 +34,10 @@
     "./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"
+    "./ssr": "./ext/ssr/index.ts",
+    "./i18n": "./ext/i18n/src/index.ts"
   },
   "workspaces": [
     "./ext/*"
-  ],
-  "peerDependencies": {
-    "@amateras/css": "./ext/css"
-  }
+  ]
 }

package/src/core.ts

@@ -1,27 +1,36 @@
 import './global';
+import './node';
 import { Signal } from "#structure/Signal";
 import { $Element, type $Event } from "#node/$Element";
 import { $Node, type $NodeContentResolver, type $NodeContentTypes } from '#node/$Node';
-import '#node/node';
-import { _instanceof, isString, isFunction, _Object_assign, isObject, isNull, _Object_entries, _Object_defineProperty, forEach, isNumber, _Array_from, _document } from '#lib/native';
-import type { $HTMLElement } from '#node/$HTMLElement';
+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';
 
 const nodeNameMap: {[key: string]: Constructor<$Node>} = {}
+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 $<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<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;
 export function $<H extends HTMLElement>(element: H, ...args: any[]): $HTMLElement<H>;
+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 $<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['target']['$'];
+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 $(resolver: string | number | Element | $Node | Function | TemplateStringsArray | Event, ...args: any[]) {
+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;
     if (isString(resolver) && nodeNameMap[resolver]) return new nodeNameMap[resolver](...args);
     if (isFunction(resolver)) 
@@ -34,16 +43,19 @@ export function $(resolver: string | number | Element | $Node | Function | Templ
     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)));
-    return new $Element(resolver);
+    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($)
+    return new $HTMLElement(resolver);
 }
 
 export namespace $ {
-    export const stylesheet = new CSSStyleSheet();
-    _document.adoptedStyleSheets.push(stylesheet);
+    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 function signal<T>(value: T): SignalFunction<T>
-    export function signal<T>(value: T) {
+    export const signal = <T>(value: T): SignalFunction<T> => {
         const signal = new Signal<T>(value);
         const signalFn = function () { return signal.value(); }
         _Object_assign(signalFn, {
@@ -61,14 +73,14 @@ export namespace $ {
     }
 
     export type ComputeFunction<T> = ({(): T}) & { signal: Signal<T> };
-    export function compute<T>(process: () => T) {
+    export const compute = <T>(process: () => T): ComputeFunction<T> => {
         let subscribed = false;
-        const signalFn: SignalFunction<any> = signal(null);
-        function computeFn() {
+        const signalFn: SignalFunction<any> = signal(_null);
+        const computeFn = () => {
             if (!subscribed) return signalFn.set(subscribe())();
             else return signalFn.set(process())();
         }
-        function subscribe () {
+        const subscribe = () => {
             const signalHandler = (signal: Signal<any>) => { 
                 signal.subscribe(() => signalFn.set(process())) 
             }
@@ -82,21 +94,19 @@ export namespace $ {
         return computeFn as ComputeFunction<T>
     }
 
-    export function assign(resolver: [nodeName: string, $node: Constructor<$Node>][]): void;
-    export function assign(nodeName: string, $node: Constructor<$Node>): void;
-    export function assign(resolver: string | [nodeName: string, $node: Constructor<$Node>][], $node?: Constructor<$Node>) {
+    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);
         return $;
     }
 
-    export function toArray<T>(item: OrArray<T>): T[] {
-        return _instanceof(item, Array) ? item : [item];
-    }
+    export const toArray = <T>(item: OrArray<T>): T[] => _instanceof(item, Array) ? item : [item];
 
-    export function span(content: string) {
-        return $('span').content(content);
-    }
+    export const span = (content: string) => $('span').content(content);
 }
 export type $ = typeof $;
 globalThis.$ = $;