amateras 0.10.1 → 0.10.2

package/packages/ui/src/structure/Slideshow.ts

@@ -0,0 +1,99 @@
+import { ElementProto } from "@amateras/core";
+import { _null } from "@amateras/utils";
+import { Slide } from "./Slide";
+
+export interface SlideshowOptions {
+    /**第一个播放的位置 */
+    index?: number;
+    /**Slide 间隔时间，单位为秒 */
+    interval?: number;
+    /**是否自动播放 */
+    autoplay?: boolean;
+    /**动画函数 */
+    animation?: SlideshowAnimationHandle;
+}
+
+export class Slideshow extends ElementProto {
+    declare __child__: Slide;
+    slide: Slide | null = _null;
+    index: number;
+    timer: NodeJS.Timeout | null = _null;
+    interval: number;
+    autoplay: boolean;
+    animation: SlideshowAnimationHandle | null;
+    #passed = 0;
+    constructor({index, interval, autoplay, animation, ...props}: $.Props<SlideshowOptions>, layout?: $.Layout<Slideshow>) {
+        super('slideshow', props, layout);
+        this.index = index ?? 0;
+        this.interval = interval ?? 5;
+        this.autoplay = autoplay ?? false;
+        this.animation = animation ?? _null;
+        this.disposers.add(() => this.pause());
+        this.ondom(() => {
+            if (this.autoplay) this.play();
+        })
+    }
+
+    static {
+        $.style(Slideshow, 'slideshow{display:block;position:relative;overflow:clip}')
+    }
+
+    override build(): this {
+        super.build();
+        this.switch(this.index);
+        return this;
+    }
+
+    override toString(): string {
+        return this.parseHTML({children: this.slide?.toString()});
+    }
+
+    override toDOM(children = true): HTMLElement[] {
+        super.toDOM(false);
+        if (children && this.slide) this.node?.append(...this.slide.toDOM());
+        return [this.node!]
+    }
+
+    play() {
+        this.timer = setInterval(() => {
+            this.#passed++;
+            if (this.#passed >= this.interval * 100) {
+                this.next();
+                this.#passed = 0;
+            }
+        }, 10);
+    }
+
+    pause() {
+        if (this.timer) clearTimeout(this.timer);
+    }
+
+    next() {
+        let size = this.children.length;
+        let nextIndex = this.index + 1;
+        if (nextIndex >= size) nextIndex = 0;
+        this.switch(nextIndex);
+    }
+
+    prev() {
+        let size = this.children.length;
+        let prevIndex = this.index - 1;
+        if (prevIndex <= 0) prevIndex = size - 1;
+        this.switch(prevIndex);
+    }
+
+    switch(index: number) {
+        this.index = index;
+        let slide = this.children.at(index);
+        if (this.slide === slide) return;
+        if (!slide) return;
+        if (this.animation) this.animation(this, slide, this.slide);
+        else {
+            slide.parent = this;
+            this.slide = slide;
+            this.node?.replaceChildren(...slide.toDOM());
+        }
+    }
+}
+
+export type SlideshowAnimationHandle = (slideshow: Slideshow, newSlide: Slide, oldSlide: Slide | null) => void;

package/packages/utils/package.json

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

package/packages/utils/src/global.ts

@@ -0,0 +1,39 @@
+declare global {
+    type Nullish = null | undefined;
+    type OrArray<T> = T | T[];
+    type OrMatrix<T> = T | OrMatrix<T>[];
+    type OrPromise<T> = T | Promise<T>;
+    type OrNullish<T> = T | Nullish;
+    type Constructor<T = any> = abstract new (...args: any[]) => T;
+    type Mutable<T> = {
+        -readonly [P in keyof T]: T[P];
+    }
+    type AsyncFunction<T> = (...args: any[]) => Promise<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 500
+        ?   T[]
+        :   Acc['length'] extends N
+            ? Acc
+            : Repeat<T, N, [...Acc, T]>;
+    type Prettify<T> = {
+        [K in keyof T]: T[K];
+    } & {};
+    type Narrow<T> = T extends boolean ? boolean : T;
+    type ValueOf<T> = T[keyof T];
+    type RequiredKeys<T> = {
+        [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
+    }[keyof T];
+    type RemoveIndexSignature<T> = {
+    [K in keyof T as string extends K 
+        ?   never 
+        :   number extends K 
+            ?   never 
+            :   symbol extends K 
+                ?   never 
+                :   K
+            ]: T[K];
+    };
+}

package/packages/utils/src/index.bun.ts

@@ -0,0 +1,3 @@
+import "#lib/debugger";
+export * from "#lib/utils";
+export * from "#structure/UID";

package/packages/utils/src/index.ts

@@ -0,0 +1,2 @@
+export * from "#lib/utils";
+export * from "#structure/UID";

package/packages/utils/src/lib/debugger.ts

@@ -0,0 +1,14 @@
+
+declare global {
+    export import debug = Debug
+}
+
+export namespace Debug {
+    export const generateHeapsnapshot = async () => {
+        let snapshot = Bun.generateHeapSnapshot('v8');
+        let size = await Bun.write(`./heapsnapshot/${new Date().toISOString()}.heapsnapshot`, snapshot);
+        return size
+    }
+}
+
+global.debug = Debug;

package/packages/utils/src/lib/utils.ts

@@ -0,0 +1,119 @@
+import { onclient } from '@amateras/core';
+import '../global';
+
+// Value
+export const _null = null;
+export const _undefined = undefined;
+// Object
+const _Object = Object;
+export const _Object_fromEntries = _Object.fromEntries;
+export const _Object_entries = _Object.entries;
+export const _Object_assign = _Object.assign;
+export const _Object_values = _Object.values;
+export const _Object_defineProperty = _Object.defineProperty;
+export const _Object_getOwnPropertyDescriptors = _Object.getOwnPropertyDescriptors;
+// Array
+const _Array = Array;
+export const _Array_from = _Array.from;
+interface forEach {
+    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => Promise<void>): Promise<void>;
+    <T>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => void): void;
+    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => Promise<void>): void;
+    <T>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => void): void;
+    <T extends WeakKey>(set: WeakSet<T>, fn: (value: T, index: number, set: WeakSet<T>) => Promise<void>): void;
+    <T extends WeakKey>(set: WeakSet<T>, fn: (value: T, index: number, set: WeakSet<T>) => void): void;
+    <T>(list: Array<T> |  Set<T>, fn: (value: T, index: number, set: Array<T> | Set<T>) => Promise<void>): void;
+    <T>(list: Array<T> | Set<T>, fn: (value: T, index: number, set: Array<T> | Set<T>) => void): void;
+    <K, V>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => Promise<void>): void;
+    <K, V>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => void): void;
+    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => Promise<void>): void;
+    <N extends Node>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => void): void;
+}
+export const forEach: forEach = async (arr: any, fn: any) => {
+    let i = 0;
+    let asyncHandle = async () => { for (let item of arr) { await fn(item, i, arr); i++; } };
+    let handle = () => { for (let item of arr) { fn(item, i, arr); i++; } };
+    return isAsyncFunction(fn) ? asyncHandle() : handle();
+};
+interface map {
+    <T, R>(arr: Array<T>, fn: (value: T, index: number, array: Array<T>) => R): R[];
+    <T, R>(set: Set<T>, fn: (value: T, index: number, set: Set<T>) => R): R[];
+    <T extends WeakKey>(set: WeakSet<T>, fn: (value: T, index: number, set: WeakSet<T>) => Promise<void>): T[];
+    <T extends WeakKey>(set: WeakSet<T>, fn: (value: T, index: number, set: WeakSet<T>) => void): T[];
+    <T, R>(list: Array<T> | Set<T>, fn: (value: T, index: number, set: Array<T> | Set<T>) => R): R[];
+    <K, V, R>(map: Map<K, V>, fn: (value: [K, V], index: number, map: Map<K, V>) => R): R[];
+    <N extends Node, R>(set: NodeListOf<N>, fn: (value: N, index: number, parent: NodeListOf<N>) => R): R[];
+}
+export const map: map = (arr: any, fn: any) => _Array_from(arr).map(fn);
+
+// type check
+export const _typeof = (target: any, type: 'string' | 'number' | 'object' | 'boolean' | 'function' | 'bigint' | 'symbol' | 'undefined') => typeof target === type;
+export const isEqual = <T, V>(target: T, args: V[]): target is V & T => args.includes(target as any);
+export const isString = (target: any): target is string => _typeof(target, 'string');
+export const isBoolean = (target: any): target is boolean => _typeof(target, 'boolean');
+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 isAsyncFunction = (target: any): target is AsyncFunction<Awaited<ReturnType<typeof target>>> => _instanceof(target, (async () => 0).constructor as any)
+export const isUndefined = (target: any): target is undefined => target === undefined;
+export const isNull = (target: any): target is null => target === _null;
+export const isArray = _Array.isArray;
+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);
+export const is = <T extends abstract new (...args: any[]) => any>(target: any, instance: T): InstanceType<T> | null => _instanceof(target, instance) ? target : _null;
+// 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));
+// String & Array
+interface slice {
+    (target: string, start?: number, end?: number): string;
+    <T>(target: Array<T>, start?: number, end?: number): T[];
+}
+export const slice: slice = (target: any, start?: number, end?: number) => target.slice(start, end);
+// Function
+export const _bind = <T extends Function>(target: T, obj: Object): T => target.bind(obj);
+// 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 interface RandomIdOptions {
+    length?: number;
+    lettercase?: 'any' | 'lower' | 'upper';
+}
+export const randomId = (options?: RandomIdOptions): 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) : ''}`
+const _URL = URL;
+export const toURL = (path: string | URL) => {
+    if (_instanceof(path, _URL)) return path;
+    if (startsWith(path, 'http')) return new _URL(path);
+    if (onclient()) return new _URL(startsWith(path, origin) ? path : origin+path);
+    else return new _URL('https://localhost' + path)
+}

package/packages/utils/src/structure/UID.ts

@@ -0,0 +1,18 @@
+import { randomId, type RandomIdOptions } from "#lib/utils";
+import type { Proto } from "@amateras/core";
+
+export class UID {
+    static map = new Map<string, Set<string>>();
+
+    static generate(key: string, options?: RandomIdOptions): string {
+        const set = UID.map.get(key) ?? new Set();
+        const id = randomId(options);
+        if (set.has(id)) return UID.generate(key);
+        return id;
+    }
+
+    static persistInProto(proto: Proto, key: string, options?: RandomIdOptions) {
+        const id = UID.generate(key, options);
+        proto.disposers.add(() => UID.map.get(key)?.delete(id))
+    }
+}

package/packages/widget/README.md

@@ -0,0 +1,29 @@
+# Amateras Widget
+Widget 是组件化需要的重要模块，能够帮助开发者便利地编写组件代码。每个组件能够保存自己的数据仓库（Store），并且能将数据传达到指定的子组件中。
+
+## 使用方式
+使用组件函数 `$.widget` 定义组件原型构造器（Widget Constructor）。
+```ts
+import 'amateras';
+import 'amateras/widget';
+
+// 定义组件构造器
+const App = $.widget((props: {name: string}) => ({
+    // 组建的模板函数
+    layout() {
+        $('h1', () => `Hello ${props.name}!`)
+    }
+}))
+
+// 创建组件
+const $app = $(App, {name: 'Amateras'});
+
+// 构建并渲染组件
+$.render($app, () => document.body);
+
+// 输出：<h1>Hello Amateras!</h1>
+```
+
+## 文档
+1. [组件基础](/docs/Widget.md)
+2. [组件数据仓库](/docs/Widget.md)

package/packages/widget/package.json

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

package/packages/widget/src/index.ts

@@ -0,0 +1,82 @@
+import { Proto } from "@amateras/core";
+import { _Object_assign } from "@amateras/utils";
+import { WidgetConstructor, type Widget } from "./structure/Widget";
+
+export type WidgetChildrenLayout<$$ extends Constructor | null> = (proto: $$ extends Constructor ? InstanceType<$$> : undefined) => void;
+export type WidgetConstructLayout<$$ extends Constructor | null, Store> = (
+    context: {
+        store: Store, 
+        children: (
+            ...args: 
+                $$ extends Constructor 
+                ?   [proto: InstanceType<$$>] 
+                :   []
+        ) => void
+    }
+) => void;
+
+type WidgetInitLayoutStore<ParentStore, Store> = 
+    ParentStore extends Record<string, any>
+    ?   Store extends Record<string, any>
+        ?   Prettify<ParentStore & Store>
+        :   ParentStore
+    :   Store extends Record<string, any>
+        ?   Store
+        :   {}
+
+export type WidgetInit<$$ extends Constructor | null = null, Store = any, Ancestors = Widget[], ParentStore = any> = 
+    | {
+        ancestors?: Ancestors,
+        store?: Store,
+        $$?: $$,
+        layout: WidgetConstructLayout<$$, WidgetInitLayoutStore<ParentStore, Store>>
+    }
+
+type MergeAncestorStore<T extends any[]> = 
+    MergeUnionType<
+        T extends Array<infer W> 
+        ?   W extends Widget<any, any, infer Store> 
+            ?   Store
+            :   never
+        : never
+    >
+
+type MergeUnionType<U> = 
+    (
+        U extends any 
+        ? (k: U) => void 
+        : never
+    ) extends (k: infer I) => void
+        ?   I
+        :   never;
+
+type WidgetCraftArguments<$$ extends Constructor | null, Props> = 
+        RequiredKeys<Props> extends never
+        ?   [children?: WidgetChildrenLayout<$$>] | [props?: $.Props<Props>, children?: WidgetChildrenLayout<$$>]
+        :   [props: $.Props<Props>, children?: WidgetChildrenLayout<$$>]
+
+declare global {
+    export function $<$$ extends Constructor | null, Props = never>(
+            widget: Widget<$$, Props>,
+            ...args: WidgetCraftArguments<$$, Props>
+        ): Proto;
+
+    export namespace $ {
+        export function widget<
+        Props extends $.Props, 
+        Store, 
+        Ancestors, 
+        ParentStore extends MergeAncestorStore<Ancestors extends any[] ? Ancestors : []>,
+        $$ extends Constructor | null = null
+        >(init: (props: Props) => WidgetInit<$$, Store, Ancestors, ParentStore>): Widget<$$, Props, Store>;
+    }
+}
+
+_Object_assign($, {
+    widget(arg1: any) {
+        let Widget = WidgetConstructor(arg1);
+        return Widget;
+    }
+})
+
+export * from "#structure/Widget";

package/packages/widget/src/structure/Widget.ts

@@ -0,0 +1,42 @@
+import { symbol_ProtoType } from "@amateras/core";
+import { Proto } from "@amateras/core";
+import { _Object_assign, forEach } from "@amateras/utils";
+import type { WidgetChildrenLayout, WidgetInit } from "..";
+
+export const WidgetConstructor = <$$ extends Constructor | null, Props, Store>
+(init: (props: Props) => WidgetInit) => {
+    let stores = new WeakMap<Proto, Store>();
+    return class extends Proto {
+        declare static props: Props;
+        declare static store: Store;
+        static override [symbol_ProtoType] = 'Widget';
+        static stores = stores;
+        
+        constructor(...args: Props extends unknown ? [] : [Props, WidgetChildrenLayout<$$>]) {
+            super(() => {
+                let props = args[0] ?? {};
+                let children = args[1];
+                let {store, layout, ancestors} = init(props as Props);
+                if (!store) store = {};
+                if (ancestors) forEach(ancestors, ancestor => {
+                    let ancestorProto = this.findAbove(proto => proto.constructor === ancestor && proto);
+                    if (ancestorProto) {
+                        let ancestorStore = ancestor.stores.get(ancestorProto);
+                        _Object_assign(store, ancestorStore);
+                    }
+                });
+                stores.set(this, store);
+                //@ts-ignore
+                layout({store, children: (proto) => children?.(proto)});
+            });
+        }
+    }
+}
+
+export interface Widget<$$ extends Constructor | null = any, Props = any, Store = any> {
+    new(...args: Props extends unknown ? [] : [Props]): Proto;
+    props: Props;
+    store: Store;
+    stores: WeakMap<Proto, Store>
+    layout: ($$: $$) => void
+}