amateras 0.4.0 → 0.4.2

package/README.md

@@ -102,7 +102,7 @@ $(document.body).content([
 The packages size result using Vite 7.0 with default bundle settings, polyfills code size included.
 | Package name | Size | Size(gzip) | Description |
 | --- | --- | --- | --- |
-| amateras | 5.71 kB | 2.48 kB | Core |
+| amateras | 5.64 kB | 2.48 kB | Core |
 | amateras/html | 0.97 kB | 0.25 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.74 kB | 1.69 kB | Amateras Router |

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";
@@ -30,10 +30,10 @@ declare global {
 
 // 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([

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 "..";
@@ -21,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Amateras is a DOM Utility library.",
   "module": "index.ts",
   "type": "module",

package/src/core.ts

@@ -3,7 +3,7 @@ import './node';
 import { Signal } from "#structure/Signal";
 import { $Element, type $Event } 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 } from '#lib/native';
+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';
 
@@ -52,11 +52,10 @@ export function $(resolver: string | number | null | undefined | Element | HTMLE
 export namespace $ {
     export const stylesheet = _stylesheet;
     _document.adoptedStyleSheets.push(_stylesheet);
-    export const style = _stylesheet.insertRule.bind(_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, {
@@ -74,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())) 
             }
@@ -95,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.$ = $;

package/src/lib/assign.ts

@@ -1,5 +1,5 @@
 import { Signal } from "../structure/Signal";
-import { _instanceof, _Object_defineProperty, isUndefined } from "./native";
+import { _instanceof, _Object_defineProperty, forEach, isUndefined } from "./native";
 
 export const assign = (target: any, {set, get, fn}: { 
     set?: string[], 
@@ -9,7 +9,7 @@ export const assign = (target: any, {set, get, fn}: {
     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][];
-    for (const [type, prop] of list) {
+    forEach(list, ([type, prop]) => 
         _Object_defineProperty(target.prototype, prop, {
             ...(type === GET ? {
                 get() { return this.node[prop as any] }
@@ -34,5 +34,5 @@ export const assign = (target: any, {set, get, fn}: {
             }),
 
         })
-    }
+    )
 }

package/src/lib/assignHelper.ts

@@ -1,16 +1,17 @@
 import type { $Node } from "#node/$Node";
 import { assign } from "./assign";
-import { _Object_entries, _Object_getOwnPropertyDescriptors } from "./native";
+import { _Object_entries, _Object_getOwnPropertyDescriptors, forEach } from "./native";
 
 export const assignHelper = (object: Constructor<EventTarget>, target: Constructor<$Node>, tagname?: string) => {
     const [set, get, fn] = [[], [], []] as [string[], string[], 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);
-    }
+    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);
+        }
+    })
     assign(target, {set, get, fn})
     // register tagname
     if (tagname) $.assign(tagname, target)

package/src/lib/chain.ts

@@ -1,3 +1,13 @@
 import { isUndefined } from "./native";
 
-export const chain = <T, R, V>(_this: T, args: IArguments, get: () => R, value: V, set: (value: Exclude<V, undefined>) => any) => !args.length ? get() : isUndefined(value) ? _this : (set(value as any), _this);
+export const chain: chain = <T, R, V>(_this: T, args: IArguments | null, get: (() => R) | null, value: V, set: (value: Exclude<V, undefined>) => any) => 
+    args && get && !args.length 
+    ? get()
+    : isUndefined(value) 
+        ? _this 
+        : (set(value as any), _this);
+
+interface chain {
+    <T, V>(_this: T, args: null, get: null, value: V, set: (value: Exclude<V, undefined>) => any): T
+    <T, R, V>(_this: T, args: IArguments, get: (() => R), value: V, set: (value: Exclude<V, undefined>) => any): T | R
+}

package/src/lib/native.ts

@@ -1,3 +1,5 @@
+// Value
+export const _null = null;
 // Object
 export const _Object_fromEntries = Object.fromEntries;
 export const _Object_entries = Object.entries;
@@ -15,15 +17,16 @@ export const isString = (target: any): target is string => _typeof(target, 'stri
 export const isNumber = (target: any): target is number => _typeof(target, 'number')
 export const isObject = (target: any): target is object => _typeof(target, 'object')
 export const isFunction = (target: any): target is Function => _typeof(target, 'function')
-export const isUndefined = (target: any): target is undefined => _typeof(target, 'undefined')
-export const isNull = (target: any): target is null => target === null;
+export const isUndefined = (target: any): target is undefined => target === undefined;
+export const isNull = (target: any): target is null => target === _null;
 export const _instanceof = <T extends (abstract new (...args: any[]) => any)[]>(target: any, ...instance: T): target is InstanceType<T[number]> => !!instance.find(i => target instanceof i);
 // JSON
 export const _JSON_stringify = JSON.stringify;
 export const _JSON_parse = JSON.parse;
 // String
 export const startsWith = (target: string, ...str: string[]) => !!str.find(s => target.startsWith(s));
-
+// Function
+export const _bind = (target: Function, obj: Object) => target.bind(obj);
 interface forEach {
     <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => any, thisArgs?: any): void;
     <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => any, thisArgs?: any): void;

package/src/lib/randomId.ts

@@ -5,7 +5,5 @@ const UPPER = LOWER.toUpperCase();
 export const randomId = (options?: {length?: number, lettercase?: 'any' | 'lower' | 'upper'}): string => { 
     options = {length: 5, lettercase: 'any', ...options};
     const char = options.lettercase === 'any' ? LOWER + UPPER : options.lettercase === 'lower' ? LOWER : UPPER;
-    return _Array_from({length: options.length as number}, (_, i) => { 
-        const rand = Math.round(Math.random() * char.length); return char[rand] 
-    }).join(''); 
+    return _Array_from({length: options.length as number}, (_, i) => char[Math.round(Math.random() * char.length)]).join(''); 
 }

package/src/lib/sleep.ts

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

package/src/node/$Element.ts

@@ -26,8 +26,7 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     }
 
     class(...token: (string | null | undefined)[]) {
-        this.classList(token.filter(isString).join(' '));
-        return this;
+        return this.classList(token.filter(isString).join(' '));
     }
 
     addClass(...token: (string | null | undefined)[]) {
@@ -41,13 +40,11 @@ export class $Element<Ele extends Element = Element, EvMap = ElementEventMap> ex
     }
 
     on<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
-        this.addEventListener(type as string, listener as any, options);
-        return this;
+        return this.addEventListener(type as string, listener as any, options);
     }
 
     off<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions) {
-        this.removeEventListener(type as string, listener as any, options);
-        return this;
+        return this.removeEventListener(type as string, listener as any, options);
     }
     
     once<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | AddEventListenerOptions) {
@@ -386,10 +383,10 @@ 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): void;
-    addEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener<K extends keyof EvMap, Ev extends EvMap[K]>(type: K, listener: $EventListener<this, Ev> | $EventListenerObject<this, Ev>, options?: boolean | EventListenerOptions): void;
-    removeEventListener(type: string, listener: $EventListener<this, Event> | $EventListenerObject<this, Event>, options?: boolean | EventListenerOptions): void;
+    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;

package/src/node/$HTMLElement.ts

@@ -11,8 +11,7 @@ export class $HTMLElement<Ele extends HTMLElement = HTMLElement, EvMap = HTMLEle
     style(style?: Partial<CSSStyleDeclarationOptions> | undefined) {
         let _style = this.node.style
         if (!arguments.length) return _style
-        if (!style) return this;
-        forEach(_Object_entries(style), ([key, value]) => _style[key as any] = value ?? '')
+        if (style) forEach(_Object_entries(style), ([key, value]) => _style[key as any] = value ?? '');
         return this;
     }
 }

package/src/node/$Node.ts

@@ -1,5 +1,6 @@
+import { chain } from "#lib/chain";
 import { _document } from "#lib/env";
-import { _Array_from, _instanceof, _JSON_stringify, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
+import { _Array_from, _instanceof, _JSON_stringify, _null, forEach, isFunction, isNull, isObject, isUndefined } from "#lib/native";
 import { Signal } from "#structure/Signal";
 
 export class $Node {
@@ -11,9 +12,10 @@ export class $Node {
     }
 
     content(children: $NodeContentResolver<this>) {
-        if (isUndefined(children)) return this;
-        forEach(_Array_from(this.childNodes), node => node.remove());
-        return this.insert(children);
+        return chain(this, _null, _null, children, children => {
+            forEach(_Array_from(this.childNodes), node => node.remove());
+            this.insert(children);
+        })
     }
 
     insert(resolver: $NodeContentResolver<this>, position = -1) {
@@ -23,15 +25,16 @@ export class $Node {
     }
 
     await<T>(promise: OrPromise<T>, callback: ($node: this, result: T) => void): this {
-        if (_instanceof(promise, Promise)) return promise.then(result => callback(this, result)), this;
-        else return callback(this, promise), this;
+        if (_instanceof(promise, Promise)) promise.then(result => callback(this, result));
+        else callback(this, promise);
+        return this;
     }
 
     replace($node: $NodeContentResolver<$Node>) {
-        if (!$node) return this;
-        this.replaceWith(
-            ...$.toArray($Node.process(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
-        )
+        if ($node) 
+            this.replaceWith(
+                ...$.toArray($Node.process(this, $node)).filter($node => $node).map($node => $node?.node) as Node[]
+            )
         return this;
     }
 
@@ -43,9 +46,7 @@ export class $Node {
         return this.textContent();
     }
 
-    mounted($parent: $Node) {
-        return this;
-    }
+    mounted($parent: $Node) {}
     
     use<F extends ($ele: this, ...args: any) => void>(callback: F, ...args: F extends ($ele: this, ...args: infer P) => void ? P : never) {
         callback(this, ...args);
@@ -97,13 +98,13 @@ export class $Node {
 
     /**  */
     static append($node: $Node, child: $Node | undefined | null, position: number) {
-        // insert each child, child may be an array
-        if (!child) return;
-        // get child node at position
-        let positionChild = _Array_from($node.childNodes).at(position);
-        if (!positionChild) $node.appendChild(child.node);
-        else $node.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
-        child.mounted($node);
+        if (child) {
+            // get child node at position
+            let positionChild = _Array_from($node.childNodes).at(position);
+            if (!positionChild) $node.appendChild(child.node);
+            else $node.insertBefore(child.node, position < 0 ? positionChild.nextSibling : positionChild);
+            child.mounted($node);
+        }
     }
 }
 

package/ext/markdown/index.ts

@@ -1,123 +0,0 @@
-import { _Array_from, forEach } from "#lib/native";
-
-const blockProcesses = new Set<MarkdownBlockProcessOptions>();
-const inlineProcesses = new Set<MarkdownProcessFunction>();
-
-export class Markdown {
-    blockProcessSet = new Set(blockProcesses);
-    inlineProcessSet = new Set(inlineProcesses);
-    constructor() {}
-
-    blockProcess(options: MarkdownBlockProcessOptions) {
-        this.blockProcessSet.add(options);
-        return this;
-    }
-
-    inlineProcess(handle: MarkdownProcessFunction) {
-        this.inlineProcessSet.add(handle);
-        return this;
-    }
-
-    toHTML(text: string) {
-        const blocks = _Array_from(text.matchAll(/(?:.+?\n?)+/gm));
-        return blocks.map(block => {
-            let matched, blockText = block[0]
-            for (const blockProcess of blockProcesses) {
-                matched = blockText.match(blockProcess.regexp);
-                if (!matched) continue;
-                blockText = blockProcess.handle(blockText);
-                const removeHTML = blockText.replaceAll(/<.+>[^<]+?<\/.+>/gm, '');
-                if (!removeHTML) break;
-            }
-            if (!matched) blockText = paragraph(blockText);
-            inlineProcesses.forEach(fn => blockText = fn(blockText))
-            return blockText;
-        }).join('')
-    }
-
-    toDOM(text: string) {
-        return $('article').innerHTML(this.toHTML(text))
-    }
-}
-
-export type MarkdownProcessFunction = (text: string) => string;
-export interface MarkdownBlockProcessOptions {
-    regexp: RegExp,
-    handle: (text: string) => string;
-}
-
-const blockProcess = (options: MarkdownBlockProcessOptions) => blockProcesses.add(options);
-const inlineProcess = (handle: MarkdownProcessFunction) => inlineProcesses.add(handle);
-const replaceAll = (str: string, searchValue: string | RegExp, replacer: ((substring: string, ...args: any[]) => string) | string): string => str.replaceAll(searchValue, replacer as any);
-const trim = (str: string) => str.trim();
-const paragraph = (str: string) => {
-    return replaceAll(str, /(?:.+?\n?)+/gm, $0 => `<p>${trim($0)}</p>`)
-}
-// Headings
-blockProcess({
-    regexp: /^(#+) (.+)/gm,
-    handle: text => replaceAll(text, /^(#+) (.+)/gm, (_, $1: string, $2) => `<h${$1.length}>${$2}</h${$1.length}>`)
-});
-blockProcess({
-    regexp: /^(.+)\n==+$/gm,
-    handle: text => replaceAll(text, /^(.+)\n==+$/gm, (_, $1) => `<h1>${$1}</h1>`)
-});
-blockProcess({
-    regexp: /^(.+)\n--+$/gm,
-    handle: text => replaceAll(text, /^(.+)\n--+$/gm, (_, $1) => `<h2>${$1}</h2>`)
-});
-// Blockquote
-blockProcess({
-    regexp: /(?:^> ?.*(?:\n|$))+/gm,
-    handle: text => {
-        const fn = (str: string) => {
-            const blocks = _Array_from(str.matchAll(/(?:^> ?.*(?:\n|$))+/gm));
-            forEach(blocks, block => {
-                const blocked = fn(replaceAll(block[0], /^> ?/gm, ''));
-                str = str.replace(block[0], `<blockquote>\n${paragraph(blocked)}\n</blockquote>`);
-            })
-            return str;
-        }
-        return fn(text);
-    }
-});
-// List
-blockProcess({
-    regexp: /(?:^(?:\t|(?:  )+)?(?:-|[0-9]+\.) (?:.+\n?))+/gm,
-    handle: text => {
-        const fn = (str: string) => {
-            const blocks = _Array_from(str.matchAll(/(?:^(?:\t|(?:  )+)?(?:-|[0-9]+\.) (?:.+\n?))+/gm));
-            forEach(blocks, block => {
-                let haveList = false // check this loop have list
-                const type = block[0].match(/^(-|[0-9]+\.) /)?.[1] === '-' ? 'ul' : 'ol';
-                const listed = replaceAll(block[0], /^(?:-|[0-9]+\.) (.+)/gm, (_, $1: string) => (haveList = true, `<li>\n${trim($1)}\n</li>`));
-                const clearTabbed = replaceAll(listed, /^(?:\t|(?:  ))/gm, '');
-                const convertedList = fn(clearTabbed);
-                str = str.replace(block[0], haveList ? `<${type}>\n${trim(convertedList)}\n</${type}>` : convertedList);
-            })
-            return str;
-        }
-        return fn(text);
-    }
-})
-// Codeblock
-blockProcess({
-    regexp: /^```([^`\n]+)\n([^`]+)?```/gm,
-    handle: text => replaceAll(text, /^```([^`\n]+)\n([^`]+)?```/gm, (_, $1, $2: string) => `<pre><code>\n${trim($2)}\n</code></pre>`)
-})
-// Horizontal Rule
-blockProcess({
-    regexp: /^(?:---|\*\*\*|___)(\s+)?$/gm,
-    handle: text => replaceAll(text, /^(?:---|\*\*\*|___)(\s+)?$/gm, _ => `<hr>`)
-})
-// Bold
-inlineProcess(text => replaceAll(text, /\*\*([^*]+?)\*\*/g, (_, $1) => `<b>${$1}</b>`));
-// Italic
-inlineProcess(text => replaceAll(text, /\*([^*]+?)\*/g, (_, $1) => `<i>${$1}</i>`));
-// Image
-inlineProcess(text => replaceAll(text, /!\[(.+?)\]\((.+?)(?: "(.+?)?")?\)/g, (_, alt, src, title) => `<img src="${src}" alt="${alt}"${title ? ` title="${title}"` : ''}>`));
-// Link
-inlineProcess(text => replaceAll(text, /\[(.+?)\]\((?:(\w\w+?:[^\s]+?)(?: "(.+?)?")?)\)/g, (_, content, href, title) => `<a href="${href}"${title ? ` title="${title}"` : ''}>${content}</a>`));
-inlineProcess(text => replaceAll(text, /\[(.+?)\]\((?:(\w+?@(?:\w|\.\w)+?)(?: "(.+)?")?)\)/g, (_, content, mail, title) => `<a href="mailto:${mail}"${title ? ` title="${title}"` : ''}>${content}</a>`));
-inlineProcess(text => replaceAll(text, /<(\w\w+?:[^\s]+?)>/g, (_, href) => `<a href="${href}">${href}</a>`));
-inlineProcess(text => replaceAll(text, /<(\w+?@(?:\w|\.\w)+?)>/g, (_, mail) => `<a href="mailto:${mail}">${mail}</a>`));

package/ext/ui/lib/VirtualScroll.ts

@@ -1,24 +0,0 @@
-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 "../../../src/lib/env";
-
-export function VirtualScroll($parent: $Virtual, scroller: Node = _document) {
-    scroller.addEventListener('scroll', render, true);
-    $parent.on('layout', render);
-    function render() {
-        const getRect = ($node: $HTMLElement) => $node.getBoundingClientRect();
-        const number = (str: string) => parseInt(str);
-        const parentRect = getRect($parent);
-        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 > innerHeight) $parent.hide($child);
-            else $parent.show($child);
-        })
-        $parent.render();
-    }
-}

package/ext/ui/node/Accordian.ts

@@ -1,97 +0,0 @@
-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/Tabs.ts

@@ -1,114 +0,0 @@
-import { _instanceof, 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) this.childNodes.forEach(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

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

@@ -1,73 +0,0 @@
-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.render();
-        this.style({ height: px(getColumnByHeight(-1).h) });
-        this.dispatchEvent(new Event('layout'))
-        return this;
-    }
-}

package/ext/ui/package.json

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

package/src/node/$Virtual.ts

@@ -1,58 +0,0 @@
-import { forEach, _Array_from, isUndefined, _instanceof } from "#lib/native";
-import { $HTMLElement } from "#node/$HTMLElement";
-import { $Node, type $NodeContentResolver } from "#node/$Node";
-
-export class $Virtual<Ele extends HTMLElement = HTMLElement, EvMap = HTMLElementEventMap> extends $HTMLElement<Ele, EvMap> {
-    nodes = new Set<$Node>;
-    hiddenNodes = new Set<$Node>;
-    constructor(resolver: string | Ele) {
-        super(resolver);
-    }
-
-    content(children: $NodeContentResolver<this>) {
-        this.nodes.clear();
-        forEach(_Array_from(this.childNodes), node => node.remove());
-        return this.insert(children);
-    }
-
-    insert(resolver: $NodeContentResolver<this>, position = -1) {
-        // process nodes
-        forEach($.toArray(resolver), resolve_child => {
-            forEach($Node.process(this, resolve_child), $node => $Virtual.append(this, $node, position))
-        });
-        this.render();
-        return this;
-    }
-
-    hide($node?: $Node | null) {
-        if (!$node || !this.nodes.has($node)) return this;
-        this.hiddenNodes.add($node);
-        return this;
-    }
-
-    show($node?: $Node | null) {
-        if (!$node) return this;
-        this.hiddenNodes.delete($node);
-        return this;
-    }
-
-    render() {
-        // remove hidden node
-        forEach(_Array_from(this.childNodes), node => this.hiddenNodes.has($(node)) && node.remove());
-        // add visible node with position
-        forEach(_Array_from(this.nodes), ($node, i) => {
-            if (this.hiddenNodes.has($node)) return;
-            if (_Array_from(this.childNodes).at(i) !== $node.node) $Node.append(this, $node, i);
-        })
-        return this;
-    }
-
-    static append($node: $Virtual, child: $Node | undefined | null, position: number) {
-        if (!child) return;
-        const childList = _Array_from($node.nodes);
-        let $positionChild = childList.at(position);
-        if (!$positionChild) childList.push(child);
-        else childList.splice(position >= 0 ? position : childList.length + 1 + position, 0, child);
-        $node.nodes = new Set(childList);
-    }
-}