amateras 0.7.3 → 0.10.0

package/packages/router/src/structure/Route.ts

@@ -1,105 +0,0 @@
-import type { Page } from "#node/Page";
-import { _null, _instanceof, isUndefined } from "@amateras/utils";
-import { PageBuilder, type PageBuilderFunction } from "./PageBuilder";
-
-export class Route<Path extends RoutePath = RoutePath, Params extends RouteParams = []> {
-    readonly routes = new Map<RoutePath, Route>();
-    readonly path: Path;
-    readonly builder: PageBuilder<any> | undefined;
-    readonly paths = new Map<string, RouteAliasParams<RoutePath, Params> | null>()
-    readonly pages = new Map<string, Page>();
-    redirectURL: string | null = null
-    constructor(path: Path, builder?: RouteBuilder<Params>) {
-        this.path = path;
-        this.paths.set(path, _null);
-        this.builder = _instanceof(builder, PageBuilder<any>) || isUndefined(builder) ? builder : new PageBuilder(builder as any);
-    }
-    
-
-    alias<K extends string, P extends RouteAliasParams<K, Params>>(path: K, ...params: RequireKeys<P> extends never ? [] : [Prettify<P>]): this
-    alias(path: string, params: RouteAliasParams<RoutePath, Params> | null = _null) {
-        this.paths.set(path, params);
-        return this;
-    }
-}
-
-export interface Route<Path extends RoutePath = RoutePath, Params extends RouteParams = []> {
-    route<
-        P extends RoutePath, 
-        B extends PageBuilder
-    >(path: P, builder: B, handle?: (route: Route<`${Path}${P}`, B['params']>) => Route<`${Path}${P}`, B['params']>): this
-    route<
-        K extends RoutePath, 
-        P extends [...Params, ...RouteParamsStrings<K>], 
-        F extends PageBuilderFunction<P>
-    >(path: K, builder: F, handle?: (route: Route<`${Path}${K}`, P>) => Route<`${Path}${K}`, P>): this
-    route<
-        K extends RoutePath, 
-        P extends [...Params, ...RouteParamsStrings<K>], 
-        F extends AsyncPageBuilder<P>
-    >(path: K, builder: F, handle?: (route: Route<`${Path}${K}`, P>) => Route<`${Path}${K}`, P>): this
-    route<P extends RoutePath>(path: P, builder: RouteBuilder<RouteParamsResolver<`${Path}${P}`>>, handle?: <R extends Route<`${Path}${P}`>>(route: R) => R): this;
-    group<P extends RoutePath>(path: P, handle: <R extends Route<`${Path}${P}`>>(route: R) => R): this;
-    notFound(builder: RouteBuilder<RouteParamsResolver<`${Path}`>>): this;
-}
-
-export type RouteBuilder<Params extends RouteParams = []> = PageBuilder<Params | `${string}?`[]> | AsyncPageBuilder<Params | `${string}?`[]> | PageBuilderFunction<Params>;
-export type RoutePath = string;
-export type RouteParams = string[]
-export type AsyncPageBuilder<Params extends RouteParams = any> = () => Promise<{default: PageBuilder<Params>}>
-
-export type RouteParamsResolver<Path extends RoutePath> = RouteParamsOptional<RouteParamsStrings<Path>>
-
-/** Convert route path to literals array */
-export type RouteParamsStrings<Path extends string> = 
-    Path extends `${infer Segment}/${infer Rest}`
-        ? Segment extends `${string}:${infer Param}` 
-            ? [Param, ...RouteParamsStrings<Rest>]
-            : [...RouteParamsStrings<Rest>]
-        : Path extends `${string}:${infer Param}?${infer Query}`
-            ? [Param]
-        : Path extends `${string}:${infer Param}` 
-            ? [Param] 
-            : []
-/** Convert route path to object structure */
-export type RouteParamsConfig<Path extends string> =
-    Path extends `${infer Segment}/${infer Rest}`
-        ? Segment extends `${string}:${infer Param}` 
-            ? { [key in Param]: string } & RouteParamsConfig<Rest>
-            : RouteParamsConfig<Rest>
-        : Path extends `${string}:${infer Param}?${infer Query}`
-            ? { [key in Param]: string }
-        : Path extends `${string}:${infer Param}` 
-            ? { [key in Param]: string }
-            : {}
-/** Convert literals array to optional literals arrays */
-export type RouteParamsOptional<Params extends string[]> =
-    Params extends [infer A, ...infer Rest]
-    ?   Rest extends string[]
-        ?   A extends string
-            ?   [A | `${A}?`, ...RouteParamsOptional<Rest>] | RouteParamsOptional<Rest>
-            :   never
-        :   never
-    :   []
-
-export type RouteAliasPath<Path extends string, RoutePath extends string> = RouteParamsStrings<RoutePath> extends RouteParamsStrings<Path> ? Route<RoutePath> : never
-
-type RouteParamsConfigByArrayString<RouteParams extends string[]> =
-    RouteParams extends [`${infer A}`, ...infer Rest]
-    ?   Rest extends string[]
-        ?   A extends `${infer P}?`
-            ?   { [key in P]?: string } & RouteParamsConfigByArrayString<Rest>
-            :   { [key in A]: string } & RouteParamsConfigByArrayString<Rest>
-        :   never
-    : {}
-
-
-type RouteAliasParams<Path extends string, Params extends RouteParams> = Omit<RouteParamsConfigByArrayString<Params>, keyof RouteParamsConfig<Path>>
-
-type a<T> = T[keyof T] extends (string | undefined) ? true : false
-
-type b = RequireKeys<{t: string, a?: string, b?: string}> & {}
-
-type RequireKeys<T> = {
-    [K in keyof T]: {} extends Pick<T, K> ? never : K 
-}[keyof T]; 

package/packages/signal/README.md

@@ -1,93 +0,0 @@
-# amateras/signal
-
-## Usage
-
-```ts
-import 'amateras';
-import 'amateras/signal';
-
-// define a signal with value 0
-const count$ = $.signal(0);
-
-// this variable will be auto recalculate when count$ changes
-const doubleCount$ = $.compute(() => count$() * 2);
-
-// the console message will fired when count$ changes
-$.effect(() => console.log( count$() ))
-
-$(document.body).content([
-    // Display Counts
-    $('p').content( $`Counts: ${count$}` ),
-
-    // Display Double Counts
-    $('p').content( $`Double Counts: ${doubleCount$}` ),
-
-    // Create a button that make counts plus 1 on click
-    $('button').content('Add Count').on('click', () => count$.set(value => value + 1))
-])
-```
-
-## Read and Write
-
-```ts
-const number$ = $.signal(0);
-const string$ = $.singal('');
-const boolean$ = $.signal(false);
-const object$ = $.signal({ number: 1 });
-
-// write value
-number$.set(42);
-string$.set('New Content');
-boolean$.set(true);
-object$.set({ number: 42 });
-
-// read value
-number$(); // 42
-string$(); // 'New Content'
-boolean$(); // true
-object$(); // { number: 42 }
-```
-
-## Use in attribute methods
-
-```ts
-const src$ = $.signal('/image-1.png');
-
-$(document.body).content([
-    // you can set signal variable in attribute
-    $('img').src( src$ ),
-
-    $('button').content('Change Image').on('click', () => src$.set('/image-2.png'))
-])
-```
-
-## Reactive object
-
-```ts
-const user$ = $.signal({
-    name: 'Amateras',
-    age: 16,
-    avatar: {
-        url: '/amateras/avatar.png',
-        size: '350x350'
-    }
-})
-
-$(document.body).content([
-    // Display name and age
-    $('h1').content( $`${user$.name$} (${user$.age$})` ),
-    // Display avatar image
-    $('img').src( user$.avatar$.url$ ),
-    // Change the user$ when button is clicked
-    $('button')
-    .content('Change User')
-    .on('click', () => user$.set({
-        name: 'Tsukimi',
-        age: 10,
-        avatar: {
-            url: '/tsukimi/avatar.png',
-            size: '350x350'
-        }
-    }))
-])
-```

package/packages/signal/package.json

@@ -1,18 +0,0 @@
-{
-    "name": "@amateras/signal",
-    "peerDependencies": {
-      "@amateras/core": "workspace:*",
-      "@amateras/utils": "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/packages/signal/src/index.ts

@@ -1,221 +0,0 @@
-import { Signal } from "#structure/Signal";
-import { $Node, $Text, type $NodeContentResolver } from "@amateras/core/node/$Node";
-import { _instanceof, isObject, _JSON_stringify, _Object_assign, forEach, _null, _Object_defineProperty, _Object_entries, isNull, isFunction, _Promise, toArray } from "@amateras/utils";
-
-// handle $Node content process
-$Node.processors.add((_, content) => {
-    const signal = (content as SignalFunction<any>)?.signal;
-    if (_instanceof(signal, Signal)) {
-        const signalValue = (content as SignalFunction<any>)();
-        const signalHandler = (resolver: any): $NodeContentResolver<any> => {
-            if (_instanceof(resolver, _Promise)) {
-                return resolver.then(signalHandler) as any;
-            }
-            else 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];
-            }
-        }
-        return signalHandler(signalValue);
-    }
-})
-
-// 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: (untrack: UntrackHandler) => T): ComputeFunction<T>; 
-        export function effect(process: (untrack: UntrackHandler) => void): void;
-        export function await<K, O extends SignalAwaitOptions<K, unknown>>(signalFn: SignalFunction<OrPromise<K>> | ComputeFunction<OrPromise<K>>, options: O): O[keyof O];
-        export interface $NodeContentMap {
-            signalFn: SignalFunction<any>;
-            computeFn: ComputeFunction<any>;
-        }
-        export interface $NodeParameterMap<T> {
-            // Distribute T type
-            signalFn: T extends any ? SignalFunction<Narrow<T>> : never;
-            computeFn: T extends any ? ComputeFunction<Narrow<T>> : never;
-        }
-    }
-}
-
-type SignalObject<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
-type SignalValue<T> = T extends Promise<infer R> ? T | R : T;
-export type SignalPromiseState = 'await' | 'then' | 'catch';
-export type SignalAwaitOptions<T, R> = {
-    await: R | (() => R);
-    then: R | ((value: T) => R);
-    catch: R | ((error: any) => R);
-}
-
-export type SignalFunction<T> = {
-    (): T;
-    signal: Signal<T>;
-    set: (newValue: SignalValue<T> | ((oldValue: T) => SignalValue<T>)) => SignalFunction<T>;
-    value: () => T;
-    state: SignalPromiseState;
-    await: <R>(resolver: R) => AwaitFunction<T, R>
-} & SignalObject<T>;
-
-export type ComputeFunction<T> = { 
-    (): T;
-    signal: Signal<T>;
-    state: SignalPromiseState;
-};
-
-export type AwaitFunction<T, R> = {
-    (): R;
-    then<D>(resolver: (value: Awaited<T>) => D): AwaitFunction<T, R | D>;
-    then<D>(resolver: D): AwaitFunction<T, R | D>;
-    catch<D>(resolver: (error: any) => D): AwaitFunction<T, R | D>;
-    catch<D>(resolver: D): AwaitFunction<T, R | D>;
-} & ComputeFunction<T>
-
-export type SignalListener = (signal: Signal<any>) => void;
-export type UntrackHandler = <T>(fn: () => T) => T
-
-const signalComputeListeners = new Set<SignalListener>();
-const signalEffectListeners = new Set<SignalListener>();
-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$});
-        })
-    }
-}
-
-const AWAIT = 'await';
-const THEN = 'then';
-const CATCH = 'catch';
-
-_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);
-        if (_instanceof(value, _Promise)) {
-            value.catch(err => {
-                signalFn.state = CATCH; 
-                signal.value(err);
-            }).then(v => {
-                signalFn.state = THEN;
-                signal.value(v as any);
-            })
-        }
-        _Object_assign(signalFn, {
-            signal,
-            set: (newValue: T) => (signal.value(newValue), signalFn),
-            value: () => signal.value(),
-            state: _instanceof(value, _Promise) ? AWAIT : THEN,
-
-            await(awaitResolver: any) {
-                let thenResolver: any = _null
-                let catchResolver: any = _null
-                const awaitFn = $.compute(untrack => {
-                    const value = signalFn();
-                    return untrack(() => {
-                        switch (signalFn.state) {
-                            case AWAIT: return isFunction(awaitResolver) ? awaitResolver() : awaitResolver;
-                            case THEN: return isFunction(thenResolver) ? thenResolver(value as any) : thenResolver;
-                            case CATCH: return isFunction(catchResolver) ? catchResolver(value) : catchResolver;
-                        }
-                    })
-                })
-
-                _Object_assign(awaitFn, {
-                    then(resolver: any) {
-                        thenResolver = resolver;
-                        return awaitFn;
-                    },
-                    catch(resolver: any) {
-                        catchResolver = resolver;
-                        return awaitFn;
-                    }
-                })
-
-                return awaitFn;
-            }
-        })
-        return signalFn
-    },
-
-    // compute function
-    compute<T>(process: (untrack: UntrackHandler) => 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(untrack)).value();
-        }
-        const untrack = <T>(fn: () => T) => {
-            if (subscribed) return fn();
-            signalComputeListeners.delete(signalListener);
-            const result = fn();
-            signalComputeListeners.add(signalListener);
-            return result;
-        }
-        const signalListener = (signal: Signal<any>) => 
-            signal.subscribe(() => signalFn.set(process(untrack))) 
-        const subscribe = () => {
-            signalComputeListeners.add(signalListener);
-            const result = process(untrack);
-            signalComputeListeners.delete(signalListener);
-            subscribed = true;
-            return result;
-        }
-        _Object_assign(computeFn, { signal: signalFn.signal });
-        return computeFn as ComputeFunction<T>
-    },
-
-    // effect
-    effect(process: (untrack: UntrackHandler) => void) {
-        let subscribed = false;
-        const signalListener = (signal: Signal<any>) => 
-            signal.subscribe(_ => process(untrack));
-        const untrack = <T>(fn: () => T) => {
-            if (subscribed) return fn();
-            signalEffectListeners.delete(signalListener);
-            const result = fn();
-            signalEffectListeners.add(signalListener);
-            return result;
-        }
-        signalEffectListeners.add(signalListener);
-        process(untrack);
-        signalEffectListeners.delete(signalListener);
-        subscribed = true;
-    },
-})

package/packages/signal/src/structure/Signal.ts

@@ -1,38 +0,0 @@
-import { _instanceof, forEach, isFunction, isUndefined } from "@amateras/utils";
-
-export class Signal<T> {
-    #value: T;
-    #subscribers = new Set<(value: T) => void>();
-    constructor(value: T) {
-        this.#value = value;
-    }
-
-    value(): T;
-    value(newValue: T): this;
-    value(callback: (oldValue: T) => T): this;
-    value(resolver?: T | ((oldValue: T) => T)) {
-        if (!arguments.length) return this.#value;
-        if (isFunction(resolver)) this.value(resolver(this.#value));
-        else if (!isUndefined(resolver)) {
-            this.#value = resolver;
-            this.emit();
-        }
-        return this;
-    }
-
-    emit() {
-        forEach(this.#subscribers, subs => subs(this.#value))
-        return this;
-    }
-
-    subscribe(callback: (value: T) => void) {
-        this.#subscribers.add(callback);
-        return this;
-    }
-
-    unsubscribe(callback: (value: T) => void) {
-        this.#subscribers.delete(callback);
-        return this;
-    }
-
-}

package/packages/ui/lib/VirtualScroll.ts

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

package/packages/ui/node/Accordian.ts

@@ -1,97 +0,0 @@
-import { chain } from "@amateras/core/lib/chain";
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-import type { $Node, $NodeContentResolver } from "@amateras/core/node/$Node";
-import { _Array_from, _instanceof, forEach, isNull } from "@amateras/utils";
-
-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/packages/ui/node/Carousel.ts

@@ -1,20 +0,0 @@
-import { chain } from "@amateras/core/lib/chain";
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-
-const CAROUSEL = 'carousel';
-const CAROUSEL_ITEM = 'carousel-item';
-
-export class Carousel extends $HTMLElement {
-    constructor() {
-        super(CAROUSEL);
-    }
-
-}
-
-export class CarouselItem extends $HTMLElement {
-    constructor() {
-        super(CAROUSEL_ITEM)
-    }
-}
-
-export type CarouselDirection = 'horizontal' | 'vertical';

package/packages/ui/node/Form.ts

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