amateras 0.6.0 → 0.7.1

package/{ext → packages}/ui/node/Table.ts

@@ -1,4 +1,4 @@
-import { $HTMLElement } from "../../../src/node/$HTMLElement";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class Table extends $HTMLElement {
     constructor() {

package/{ext → packages}/ui/node/Tabs.ts

@@ -1,8 +1,23 @@
-import { _Array_from, _instanceof, forEach, isUndefined } from "amateras/lib/native";
-import { $HTMLElement } from "amateras/node/$HTMLElement";
-import type { $Node } from "amateras/node/$Node";
+import { chain } from "@amateras/core/lib/chain";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import type { $Node } from "@amateras/core/node/$Node";
+import { _Array_from, _instanceof, forEach, isUndefined } from "@amateras/utils";
 
-$.style('tabs,tabs-container,tabs-list,tabs-content{display: block}')
+const TAB = 'tab';
+const TAB_CONTENT = 'tab-content';
+const TAB_TRIGGER = 'tab-trigger';
+const TAB_CONTAINER = 'tab-container';
+const TAB_LIST = 'tab-list';
+
+const DISPLAY_BLOCK = 'display:block'
+
+forEach([
+    `${TAB}{${DISPLAY_BLOCK}}`,
+    `${TAB_CONTENT}{${DISPLAY_BLOCK}}`,
+    `${TAB_LIST}{${DISPLAY_BLOCK}}`,
+    `${TAB_CONTAINER}{${DISPLAY_BLOCK}}`,
+    `${TAB_TRIGGER}{cursor:pointer}`
+], $.style)
 
 export class Tabs extends $HTMLElement {
     #value: null | string = null;
@@ -10,7 +25,7 @@ export class Tabs extends $HTMLElement {
     $container: null | TabsContainer = null;
     $list: null | TabsList = null;
     constructor() {
-        super('tabs');
+        super(TAB);
     }
 
     value(): string | null;
@@ -22,13 +37,17 @@ export class Tabs extends $HTMLElement {
             this.$list?.check();
         })
     }
+
+    mounted($parent: $Node): void {
+        this.$list?.check();
+    }
 }
 
 export class TabsContainer extends $HTMLElement {
     $tabs?: Tabs;
     contentMap = new Map<string, TabsContent>();
     constructor($tabs?: Tabs) {
-        super('tabs-container');
+        super(TAB_CONTAINER);
         this.$tabs = $tabs;
     }
 
@@ -46,7 +65,7 @@ export class TabsContent extends $HTMLElement {
     #value: string;
     $container: null | TabsContainer = null;
     constructor(value: string) {
-        super('tabs-content');
+        super(TAB_CONTENT);
         this.#value = value
     }
 
@@ -73,7 +92,7 @@ export class TabsList extends $HTMLElement {
     $tabs?: null | Tabs = null;
     triggers = new Map<string, TabsTrigger>();
     constructor($tabs?: Tabs) {
-        super('tabs-list');
+        super(TAB_LIST);
         this.$tabs = $tabs;
         this.on('click', _ => this.check())
     }
@@ -97,7 +116,7 @@ export class TabsTrigger extends $HTMLElement {
     #value: string;
     $tabs?: null | Tabs = null;
     constructor(value: string) {
-        super('tabs-trigger');
+        super(TAB_TRIGGER);
         this.#value = value;
         this.on('click', _ => this.$tabs?.value(this.#value ?? undefined))
     }
@@ -107,8 +126,4 @@ export class TabsTrigger extends $HTMLElement {
     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 → packages}/ui/node/Toast.ts

@@ -1,5 +1,5 @@
-import { _document } from "../../../src/lib/env";
-import { $HTMLElement } from "../../../src/node/$HTMLElement";
+import { _document } from "@amateras/core/env";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 $.style('toast{position:absolute}')
 

package/packages/ui/node/Waterfall.ts

@@ -0,0 +1,94 @@
+import { onclient, onserver } from "@amateras/core/env";
+import { chain } from "@amateras/core/lib/chain";
+import type { $Element } from "@amateras/core/node/$Element";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import { $Virtual } from "@amateras/core/node/$Virtual";
+import { _Array_from, _instanceof, forEach } from "@amateras/utils";
+
+const getRect = (el: $Element) => el.getBoundingClientRect();
+const px = (value: number) => `${value}px`;
+$.style(`waterfall{display:block;position:relative}`)
+
+export class Waterfall extends $Virtual {
+    #column: number | null = null;
+    #columnWidth: number = 200;
+    #mode: WaterfallMode = 'fill';
+    #gap = 0;
+    #width = 0;
+    constructor() {
+        super('waterfall');
+        onclient(() => {
+            new ResizeObserver(_ => this.inDOM() && this.#width !== getRect(this).width && (this.dispatchEvent(new Event('resize', {cancelable: true})) && this.layout())).observe(this.node);
+        })
+    }
+
+    mode(): WaterfallMode;
+    mode(mode: $Parameter<'fill' | 'fixed'>): this;
+    mode(mode?: $Parameter<'fill' | 'fixed'>) {
+        return chain(this, arguments, () => this.#mode, mode, value => this.#mode = value);
+    }
+
+    column(): number | null;
+    column(column: $Parameter<number | null>): this;
+    column(column?: $Parameter<number | null>) {
+        return chain(this, arguments, () => this.#column, column, value => this.#column = value);
+    }
+
+    columnWidth(): number
+    columnWidth(width: $Parameter<number>): this
+    columnWidth(width?: $Parameter<number>) {
+        return chain(this, arguments, () => this.#columnWidth, width, value => this.#columnWidth = value) 
+    }
+
+    gap(): number;
+    gap(gap: $Parameter<number>): this;
+    gap(gap?: $Parameter<number>) {
+        return chain(this, arguments, () => this.#gap, gap, value => this.#gap = value);
+    }
+
+    layout() {
+        if (onserver()) return;
+        const items = _Array_from(this.nodes).map(item => item);
+        const { width } = getRect(this);
+        this.#width = width;
+        const gap = this.#gap;
+        const columnCount = (() => {
+            if (this.#column) return this.#column;
+            const colCount = Math.floor(width / this.#columnWidth) || 1;
+            return ((colCount - 1) * gap) + this.#columnWidth * colCount > width ? colCount - 1 || 1 : colCount;
+        })()
+        const maxColumnWidth = (width - ((columnCount - 1) * gap)) / columnCount
+        const columnWidth = this.#mode === 'fill' ? maxColumnWidth : this.#columnWidth;
+        const padding = (width - columnWidth * columnCount - gap * (columnCount - 1)) / 2;
+        const columns = _Array_from({length: columnCount}).map((_, i) => ({ i, h: 0, x: i * (columnWidth + gap) + padding }))
+        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;
+            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;
+    }
+}
+
+export type WaterfallMode = 'fill' | 'fixed'

package/packages/ui/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@amateras/ui",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/html": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts",
+      "./waterfall": "./node/Waterfall.ts",
+      "./tabs": "./node/Tabs.ts",
+      "./virtual-scroll": "./lib/VirtualScroll.ts"
+    }
+}

package/packages/utils/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@amateras/utils",
+    "peerDependencies": {
+        "@amateras/core": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts",
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/{src → packages/utils/src}/global.ts

@@ -1,10 +1,4 @@
-import type { $Element } from '#node/$Element';
-import type { $Node } from '#node/$Node';
-import * as core from '#core';
-import type { $EventTarget } from '#node/$EventTarget';
-
 declare global {
-    export import $ = core.$;
     type Nullish = null | undefined;
     type OrArray<T> = T | T[];
     type OrMatrix<T> = T | OrMatrix<T>[];
@@ -15,24 +9,17 @@ declare global {
         -readonly [P in keyof T]: T[P];
     }
     type AsyncFunction<T> = () => Promise<T>;
-    type $Parameter<T> = T | undefined | $.$NodeParameterExtends<T>
     type Ok<D> = [data: D, err: null];
     type Err<E> = [data: null, err: E]
     type Result<D, E> = Ok<D> | Err<E>
     type Repeat<T, N extends number, Acc extends T[] = []> = 
-        Acc['length'] extends N 
-            ? Acc 
+        Acc['length'] extends 500
+        ?   T[]
+        :   Acc['length'] extends N
+            ? Acc
             : Repeat<T, N, [...Acc, T]>;
     type Prettify<T> = {
         [K in keyof T]: T[K];
     } & {};
-    interface Node {
-        readonly $: $Node
-    }
-    interface EventTarget {
-        readonly $: $EventTarget
-    }
-    interface Element {
-        readonly $: $Element
-    }
+    type Narrow<T> = T extends boolean ? boolean : T;
 }

package/{src/lib/native.ts → packages/utils/src/index.ts}

@@ -1,3 +1,5 @@
+import './global';
+
 // Value
 export const _null = null;
 export const _undefined = undefined;
@@ -54,4 +56,35 @@ export const slice: slice = (target: any, start?: number, end?: number) => targe
 // Function
 export const _bind = <T extends Function>(target: T, obj: Object): T => target.bind(obj);
 // Promise
-export const _Promise = Promise;
+export const _Promise = Promise;
+
+// utils function
+export const debounce = () => {
+    let timer: number;
+    return (fn: Function, timeout: number) => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(fn, timeout);
+    }
+}
+
+const LOWER = 'abcdefghijklmnopqrstuvwxyz';
+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) => char[Math.round(Math.random() * char.length)]).join(''); 
+}
+
+export const sleep = async (ms: number) => new _Promise(resolve => setTimeout(resolve, ms));
+
+export const toArray = <T>(item: OrArray<T>): T[] => _instanceof(item, Array) ? item : [item];
+
+export const trycatch = <D>(callback: () => D): Result<D, Error> => {
+    try {
+        return [callback(), _null];
+    } catch (err) {
+        return [_null, _instanceof(err, Error) ? err : new Error(_JSON_stringify(err))];
+    }
+}
+
+export const uppercase = (str: string, start?: number, end?: number) => `${slice(str, 0, start)}${slice(str, start, end).toUpperCase()}${end ? slice(str, end) : ''}`

package/tsconfig.json

@@ -25,5 +25,5 @@
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
   },
-  "exclude": ["dist"]
+  "exclude": ["deprecated"]
 }

package/ext/css/package.json

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

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

@@ -1,12 +0,0 @@
-export class $CSSVariable<V = string> {
-    key: string;
-    value: V;
-    constructor(key: string, value: V) {
-        this.key = key;
-        this.value = value;
-    }
-
-    toString() {
-        return `var(--${this.key})`
-    }
-}

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

@@ -1,16 +0,0 @@
-import { assignProperties } from "#lib/assignProperties";
-import { $HTMLElement } from "#node/$HTMLElement";
-
-export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
-    constructor() {
-        super('canvas')
-    }
-}
-
-export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {}
-
-assignProperties(HTMLCanvasElement, $Canvas, 'canvas');
-
-declare module '#core' {
-    export function $(nodeName: 'canvas'): $Canvas
-}

package/ext/i18n/package.json

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

package/ext/idb/package.json

@@ -1,13 +0,0 @@
-{
-    "name": "@amateras/idb",
-    "peerDependencies": {
-        "amateras": "../../"
-    },
-    "imports": {
-      "#structure/*": "./src/structure/*.ts",
-      "#lib/*": "./src/lib/*.ts"
-    },
-    "exports": {
-      "./core": "./src/core.ts"
-    }
-}

package/ext/markdown/package.json

@@ -1,15 +0,0 @@
-{
-    "name": "@amateras/markdown",
-    "peerDependencies": {
-        "amateras": "../../"
-    },
-    "imports": {
-        "#structure/*": "./src/structure/*.ts",
-        "#lib/*": "./src/lib/*.ts"
-    },
-    "exports": {
-        "./structure/*": "./src/structure/*.ts",
-        "./lib/*": "./src/lib/*.ts",
-        "./syntax/*": "./src/syntax/*.ts"
-    }
-}

package/ext/router/package.json

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

package/ext/signal/package.json

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

package/ext/signal/src/index.ts

@@ -1,128 +0,0 @@
-import { Signal } from "#structure/Signal";
-import { _document } from "amateras/lib/env";
-import { _instanceof, isObject, _JSON_stringify, _Object_assign, forEach, _null, _Object_defineProperty, _Object_entries, isNull, isFunction } from "amateras/lib/native";
-import { $Node, $Text } from "amateras/node/$Node";
-
-// handle $Node content process
-$Node.processors.add((_, content) => {
-    const signal = (content as SignalFunction<any>)?.signal;
-    if (_instanceof(signal, Signal)) {
-        const resolver = (content as SignalFunction<any>)();
-        if (_instanceof(resolver, $Node)) {
-            // handler signal $Node result
-            let node = resolver;
-            const set = (value: any) => {
-                node.replace(value);
-                node = value;
-            }
-            signal.subscribe(set);
-            return [resolver];
-        } else {
-            // handler signal other type result
-            const $text = new $Text()
-            const set = (value: any) => $text.textContent(isObject(value) ? _JSON_stringify(value) : value);
-            signal.subscribe(set);
-            set(resolver);
-            return [$text];
-        }
-    }
-})
-
-// handle $Node native method setter
-$Node.setters.add((value, set) => {
-    const signal = value?.signal
-    if (isFunction(value) && _instanceof(signal, Signal)) {
-        signal.subscribe(set);
-        return value();
-    }
-})
-
-declare module 'amateras/core' {
-    export namespace $ {
-        export function signal<T>(value: T): SignalFunction<T>;
-        export function compute<T>(process: () => T): ComputeFunction<T>; 
-        export function effect(process: () => void): void;
-        export interface $NodeContentMap {
-            signalFn: SignalFunction<any>;
-            computeFn: ComputeFunction<any>;
-        }
-        export interface $NodeParameterMap<T> {
-            signalFn: SignalFunction<T>
-        }
-    }
-}
-
-type SignalObject<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>,
-    value: () => T;
-} & (() => T) & SignalObject<T>;
-export type ComputeFunction<T> = ({(): T}) & { signal: Signal<T> };
-
-const signalComputeListeners = new Set<(signal: Signal<any>) => void>();
-const signalEffectListeners = new Set<(signal: Signal<any>) => void>();
-const signalFnMap = new Map<any, SignalFunction<any> | ComputeFunction<any>>();
-
-// experiment feature
-const nestedComputeFn = (value: any, parentSignalFn: SignalFunction<any> | ComputeFunction<any>) => {
-    if (isObject(value) && !isNull(value)) {
-        forEach(_Object_entries(value), ([key, val]) => {
-            const cachedFn = signalFnMap.get(val);
-            const val$ = cachedFn ?? $.compute(() => parentSignalFn()[key]);
-            if (!cachedFn && isObject(val)) {
-                signalFnMap.set(val, val$);
-                nestedComputeFn(val, val$)
-            }
-            _Object_defineProperty(parentSignalFn, `${key}$`, {value: val$});
-        })
-    }
-}
-
-_Object_assign($, {
-    // signal function
-    signal<T>(value: T): SignalFunction<T> {
-        const signal = new Signal<T>(value);
-        const signalFn = function () { 
-            forEach([...signalComputeListeners, ...signalEffectListeners], fn => fn(signal));
-            return signal.value();
-        } as SignalFunction<T> 
-        nestedComputeFn(value, signalFn);
-        _Object_assign(signalFn, {
-            signal,
-            set: (newValue: T) => (signal.value(newValue), signalFn),
-            value: () => signal.value()
-        })
-        return signalFn
-    },
-
-    // compute function
-    compute<T>(process: () => T): ComputeFunction<T> {
-        let subscribed = false;
-        const signalFn: SignalFunction<any> = $.signal(_null);
-        const computeFn = () => {
-            if (!subscribed) return signalFn.set(subscribe()).value();
-            else return signalFn.set(process()).value();
-        }
-        const subscribe = () => {
-            const signalHandler = (signal: Signal<any>) => 
-                signal.subscribe(() => signalFn.set(process())) 
-            signalComputeListeners.add(signalHandler);
-            const result = process();
-            signalComputeListeners.delete(signalHandler);
-            subscribed = true;
-            return result;
-        }
-        _Object_assign(computeFn, { signal: signalFn.signal });
-        return computeFn as ComputeFunction<T>
-    },
-
-    // effect
-    effect(process: () => void) {
-        const signalHandler = (signal: Signal<any>) => 
-            signal.subscribe(process);
-        signalEffectListeners.add(signalHandler);
-        process();
-        signalEffectListeners.delete(signalHandler);
-    }
-})

package/ext/ssr/env.ts

@@ -1,61 +0,0 @@
-import { NODE } from "esm-env";
-import { _Array_from, _Object_assign, _Object_entries, isNull } from "../../src/lib/native";
-import type { $Node } from "../../src/node/$Node";
-
-if (NODE) {
-    //@ts-expect-error
-    global.window = undefined;
-    //@ts-expect-error
-    global.document = undefined;
-    //@ts-expect-error
-    global.Node = class Node {
-        nodeName: string;
-        attributes = {};
-        childNodes = new Set<Node>();
-        parent?: Node;
-        $!: $Node;
-        constructor(nodeName: string) {
-            this.nodeName = nodeName.toUpperCase();
-        }
-        get textContent() { return _Array_from(this.childNodes.values()).map(node => node.textContent).join() }
-        set textContent(content: string | null) { 
-            this.childNodes.clear();
-            content && this.childNodes.add(new Text(content) as unknown as Node);
-        }
-        appendChild(node: Node) {
-            if (this.childNodes.has(node)) this.childNodes.delete(node);
-            this.childNodes.add(node);
-            node.parent = this;
-        }
-        addEventListener(type: string, cb: () => void) { }
-        setAttribute(key: string, value: string) { _Object_assign(this.attributes, {[key]: value}) }
-        remove() {
-            this.parent?.removeChild(this);
-        }
-        removeChild(node: Node) {
-            this.childNodes.delete(node);
-        }
-
-        get outerHTML() {
-            const attr = _Object_entries(this.attributes).map(([key, value]) => `${key}="${value}"`).join(' ');
-            const tagName = this.nodeName.toLowerCase();
-            const IS_VOID_ELEMENT = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'].includes(tagName);
-            return `<${tagName}${attr ? ` ${attr}` : ''}>${_Array_from(this.childNodes).map(node => `${node.$}`).join('')}${IS_VOID_ELEMENT && !this.childNodes.size ? '' : `</${tagName}>`}`;
-        }
-    }
-    //@ts-expect-error
-    global.Element = class Element {}
-    //@ts-expect-error
-    global.HTMLElement = class HTMLElement {}
-    //@ts-expect-error
-    global.Text = class Text {
-        textContent: string;
-        $: this;
-        constructor(textContent: string) {
-            this.textContent = textContent;
-            this.$ = this;
-        }
-
-        toString() { return this.textContent }
-    }
-}