amateras 0.5.0 → 0.7.0

package/packages/signal/src/index.ts

@@ -0,0 +1,221 @@
+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/{src → packages/signal/src}/structure/Signal.ts

@@ -1,9 +1,8 @@
-import { _instanceof, forEach, isFunction, isUndefined } from "#lib/native";
+import { _instanceof, forEach, isFunction, isUndefined } from "@amateras/utils";
 
 export class Signal<T> {
     #value: T;
-    subscribers = new Set<(value: T) => void>();
-    static listeners = new Set<(signal: Signal<any>) => void>();
+    #subscribers = new Set<(value: T) => void>();
     constructor(value: T) {
         this.#value = value;
     }
@@ -12,10 +11,7 @@ export class Signal<T> {
     value(newValue: T): this;
     value(callback: (oldValue: T) => T): this;
     value(resolver?: T | ((oldValue: T) => T)) {
-        if (!arguments.length) {
-            forEach(Signal.listeners, fn => fn(this));
-            return this.#value;
-        }
+        if (!arguments.length) return this.#value;
         if (isFunction(resolver)) this.value(resolver(this.#value));
         else if (!isUndefined(resolver)) {
             this.#value = resolver;
@@ -25,17 +21,17 @@ export class Signal<T> {
     }
 
     emit() {
-        forEach(this.subscribers, subs => subs(this.#value))
+        forEach(this.#subscribers, subs => subs(this.#value))
         return this;
     }
 
     subscribe(callback: (value: T) => void) {
-        this.subscribers.add(callback);
+        this.#subscribers.add(callback);
         return this;
     }
 
     unsubscribe(callback: (value: T) => void) {
-        this.subscribers.delete(callback);
+        this.#subscribers.delete(callback);
         return this;
     }
 

package/packages/ssr/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@amateras/ssr",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/utils": "workspace:*",
+      "@amateras/router": "workspace:*",
+      "@amateras/signal": "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"
+    }
+}

package/packages/ssr/src/index.ts

@@ -0,0 +1,38 @@
+import '@amateras/signal';
+import { Page } from "@amateras/router";
+import type { SignalFunction } from "@amateras/signal";
+import { isAsyncFunction, isFunction } from '@amateras/utils';
+import { onclient, onserver } from '@amateras/core/env';
+
+declare global {
+    export var hydrate: Record<string, any>;
+}
+
+declare module '@amateras/router' {
+    export interface Page {
+        data<D>(data: D | (() => OrPromise<D>)): Promise<SignalFunction<D>>
+    }
+}
+
+onclient(() => {
+    if (typeof window.hydrate === 'undefined') window.hydrate = {};
+})
+
+//@ts-expect-error
+onserver(() => global.hydrate = {})
+
+Object.assign(Page.prototype, {
+    async data<D>(this: Page, data: D | (() => OrPromise<D>)) {
+        const hydrateData = hydrate[this.pathId];
+        const d = hydrateData ?? (
+            isFunction(data) 
+            ?   isAsyncFunction(data) 
+                ?   await data() 
+                :   data()
+            : data
+        )
+        const data$ = $.signal(d);
+        onserver(() => $.effect(() => hydrate[this.pathId] = data$()))
+        return data$;
+    }
+})

package/packages/ui/lib/VirtualScroll.ts

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

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

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

@@ -0,0 +1,54 @@
+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);
+        }
+    }
+}

package/packages/ui/node/Modal.ts

@@ -0,0 +1,45 @@
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import { forEach, isNull } from "@amateras/utils";
+const MODAL = 'modal';
+const MODAL_CONTENT = 'modal-content'
+
+forEach([
+    `${MODAL}{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;height:100%;width:100%;background:#00000050}`,
+    `${MODAL_CONTENT}{display:block;}`
+], $.style)
+export class Modal extends $HTMLElement {
+    name?: string;
+    constructor(name?: string) {
+        super(MODAL);
+        this.name = name;
+        if (name) 
+            $(window).on('routeopen', e => {
+                const url = new URL(location.href);
+                const param = url.searchParams.get(name);
+                if (isNull(param)) return this.close();
+                this.open();
+            })
+    }
+
+    open() {
+        $(document.body).insert(this);
+        this.once('click', e => {
+            if ($(e) === $(e.target)) {
+                if (!this.name) this.close();
+                else history.back();
+            }
+        })
+        return this;
+    }
+
+    close() {
+        this.remove();
+        return this;
+    }
+}
+
+export class ModalContent extends $HTMLElement {
+    constructor() {
+        super(MODAL_CONTENT);
+    }
+}

package/packages/ui/node/Table.ts

@@ -0,0 +1,43 @@
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+
+export class Table extends $HTMLElement {
+    constructor() {
+        super('table');
+    }
+}
+
+export class TableHeader extends $HTMLElement {
+    constructor() {
+        super('thead')
+    }
+}
+
+export class TableBody extends $HTMLElement {
+    constructor() {
+        super('tbody')
+    }
+}
+
+export class TableRow extends $HTMLElement {
+    constructor() {
+        super('tr')
+    }
+}
+
+export class TableHead extends $HTMLElement {
+    constructor() {
+        super('th')
+    }
+}
+
+export class TableCell extends $HTMLElement {
+    constructor() {
+        super('td')
+    }
+}
+
+export class TableFooter extends $HTMLElement {
+    constructor() {
+        super('tfoot')
+    }
+}