amateras 0.5.0 → 0.6.0

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

@@ -0,0 +1,105 @@
+import type { Page } from "#node/Page";
+import { _instanceof, _null, isUndefined } from "../../../../src/lib/native";
+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/ext/signal/README.md

@@ -0,0 +1,93 @@
+# 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/ext/signal/package.json

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

package/ext/signal/src/index.ts

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

@@ -1,9 +1,8 @@
-import { _instanceof, forEach, isFunction, isUndefined } from "#lib/native";
+import { _instanceof, forEach, isFunction, isUndefined } from "amateras/lib/native";
 
 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/ext/ssr/index.ts

@@ -32,10 +32,10 @@ _Object_assign($, {
         node.replaceWith($node.node);
     
         function getData(node: Node, $node: $Node) {
-            if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
-                const type = $(node).attr()['type'];
-                return forEach($node.signals, signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
-            }
+            // if (node.nodeName === 'SIGNAL' && _instanceof(node, Element) && _instanceof($node, $Text)) {
+            //     const type = $(node).attr()['type'];
+            //     return forEach($node.signals, signal => signal.value(type === 'number' ? Number(node.textContent) : type === 'boolean' ? node.textContent == 'true' ? true : false : node.textContent));
+            // }
             if (_instanceof(node, Text)) return $node.textContent(node.textContent);
             if (_instanceof(node, Element) && _instanceof($node, $Element)) $node.attr($(node).attr());
             const arr = _Array_from($node.childNodes);

package/ext/ui/lib/VirtualScroll.ts

@@ -0,0 +1,25 @@
+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 "amateras/lib/env";
+import type { $Node } from "amateras/node/$Node";
+
+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/ext/ui/node/Accordian.ts

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

@@ -0,0 +1,53 @@
+import { $Form } from 'amateras/html/$Form';
+import { $HTMLElement } from 'amateras/node/$HTMLElement';
+import { $Label } from 'amateras/html/$Label';
+import { $Input } from 'amateras/html/$Input';
+import type { $Node } from '../../../src/node/$Node';
+import { _instanceof, _undefined } from '../../../src/lib/native';
+
+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/ext/ui/node/Table.ts

@@ -0,0 +1,43 @@
+import { $HTMLElement } from "../../../src/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')
+    }
+}