amateras 0.10.1 → 0.11.0

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

@@ -0,0 +1,192 @@
+import { onclient } from "@amateras/core";
+import { Proto } from "@amateras/core";
+import { _JSON_parse, _JSON_stringify, _null, _Object_entries, forEach, map, toURL } from "@amateras/utils";
+import type { Widget } from "@amateras/widget";
+import type { AsyncWidget, PageLayout, PathToParamsMap, RoutePath, ValidatePath } from "../types";
+import type { Route } from "./Route";
+import { RouteSlot } from "./RouteSlot";
+
+type Mode = 1 | 2;
+type RouterDicrection = 'forward' | 'back';
+
+let index = 0;
+const [PUSH, REPLACE] = [1, 2] as const;
+const [FORWARD, BACK] = ['forward', 'back'] as const;
+const SCROLL_KEY = '__scroll_history__';
+const storage = onclient() ? sessionStorage : _null;
+const _addEventListener = onclient() ? window.addEventListener : _null;
+const _removeEventListener = onclient() ? window.removeEventListener : _null;
+if (onclient()) history.scrollRestoration = 'manual';
+
+type ScrollData = {[key: number]: { [id: string]: { x: number, y: number }}};
+
+const scrollRecord = (e?: Event) => {
+    const data = RouterProto.scrollHistory;
+    if (e) {
+        let element = e.target as HTMLElement;
+        if (element.id === '') return;
+        data[index] = { [element.id]: { x: element.scrollLeft, y: element.scrollTop } };
+    } else {
+        forEach(_Object_entries(data), ([i]) => +i >= index && delete data[+i]);
+    }
+    storage?.setItem(SCROLL_KEY, _JSON_stringify(data));
+}
+
+export class RouterProto extends Proto {
+    direction: RouterDicrection = FORWARD;
+    prev: URL | null = _null;
+    routes = new Map<string, Route>();
+    slot = new RouteSlot();
+    static routers = new Set<RouterProto>();
+    constructor() {
+        super(() => $(this.slot));
+        if (onclient()) RouterProto.routers.add(this);
+    }
+
+    set href(url: URL) {
+        this.global.router.href = url;
+    }
+
+    override build() {
+        if (onclient()) {
+            const resolve = () => {
+                const stateIndex = history.state?.index ?? 0;
+                if (index > stateIndex) this.direction = BACK;
+                if (index < stateIndex) this.direction = FORWARD;
+                index = stateIndex;
+                this.prev = this.href;
+                this.href = toURL(location.href);
+                this.resolve(location.href);
+            }
+            resolve();
+            _addEventListener?.('popstate', resolve);
+            _addEventListener?.('scroll', scrollRecord, {
+                capture: true,
+                passive: false
+            });
+            this.disposers.add(() => {
+                _removeEventListener?.('popstate', resolve);
+                _removeEventListener?.('scroll', scrollRecord, {
+                    capture: true
+                })
+            })
+        }
+        return super.build();
+    }
+
+    async resolve(path: string | URL) {
+        if (!path) return;
+        let url = toURL(path);
+        for (let [,route] of this.routes) {
+            let routes = await route.resolve(url.pathname, this.slot, {});
+            // 一旦有一个 route 解析成功就跳过剩下的 routes
+            if (routes) {
+                // 实现 NavLink 自动检测 href 匹配当前 location
+                this.global.router.routes = routes;
+                let parentPaths: string[] = [''];
+                let paths: string[] = [];
+                forEach(routes, route => {
+                    parentPaths = map(route.validPaths, validPath => 
+                        map(parentPaths, path => path + validPath)
+                    ).flat()
+                    paths.push(...parentPaths);
+                    return parentPaths
+                })
+                this.global.router.matchPaths = paths;
+                break;
+            };
+        }
+        // NavLink 检测匹配
+        forEach(this.global.router.navlinks, navlink => navlink.checkActive())
+        // location 变更事件触发
+        RouterProto.dispatchEvent();
+        // restore scroll position
+        RouterProto.scrollRestoration();
+    }
+
+    static open(path: string, target?: string) {
+        RouterProto.writeState(path, PUSH, target);
+    }
+
+    static forward() {
+        history.forward();
+    }
+
+    static back() {
+        history.back();
+    }
+
+    static replace(path: string) {
+        RouterProto.writeState(path, REPLACE);
+    }
+
+    static get scrollData(): ScrollData[number] {
+        return this.scrollHistory[index] ?? {}
+    }
+
+    static get scrollHistory(): ScrollData {
+        return _JSON_parse(storage?.getItem(SCROLL_KEY) ?? '{}')
+    }
+
+    static scrollRestoration() {
+        if (onclient()) {
+            let scrollData = RouterProto.scrollData ?? {x: 0, y: 0};
+            forEach(_Object_entries(scrollData), ([id, {x, y}]) => document.querySelector(`#${id}`)?.scrollTo(x, y));
+        }
+    }
+
+    private static writeState(path: string | URL | Nullish, mode: Mode, target?: string) {
+        if (!path) return;
+        let url = toURL(path);
+        if (onclient() && url.href === location.href) return;
+        if (target && target !== '_self') return open(url, target);
+        if (mode === PUSH) index++;
+        if (onclient()) scrollRecord();
+        forEach(this.routers, router => {
+            router.direction = FORWARD;
+            if (onclient()) {
+                router.prev = toURL(location.href);
+                history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '', url);
+            }
+            router.href = url;
+            router.resolve(path)
+        })
+        RouterProto.dispatchEvent();
+    }
+
+    private static dispatchEvent() {
+        if (onclient()) window.dispatchEvent(new Event('pathchange'));
+    }
+}
+
+declare global {
+    export interface GlobalEventHandlersEventMap {
+        pathchange: Event
+    }
+}
+
+
+export interface RouterProto {
+    route<_Path extends RoutePath, Props>(
+        path: ValidatePath<_Path, Props, _Path>,
+        widget: Widget<any, Props>,
+        handle?: (route: Route<'', _Path, PathToParamsMap<_Path>>) => void): void
+
+    route<_Path extends RoutePath, Props>(
+        path: ValidatePath<_Path, Props, _Path>,
+        widget: AsyncWidget<Props>,
+        handle?: (route: Route<'', _Path, PathToParamsMap<_Path>>) => void): void
+
+    route<
+        Path extends RoutePath,
+        Layout extends PageLayout<Path>
+    >(path: Path, layout: Layout, handle?: (route: Route<'', Path, PathToParamsMap<Path>>) => void): void
+
+
+    group<
+        Path extends RoutePath
+    >(path: Path, handle: (route: Route<'', Path, PathToParamsMap<Path>>) => void): void;
+
+    notFound(layout: Widget): void;
+    notFound(layout: PageLayout): void;
+}

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

@@ -0,0 +1,18 @@
+import { symbol_ProtoType } from "@amateras/core";
+import { RouterProto } from "./Router";
+
+export type RouterHandle = ($$: RouterProto) => void;
+
+export interface Router {
+    new(): RouterProto;
+}
+
+export const RouterConstructor = (handle: RouterHandle) => {
+    return class extends RouterProto {
+        static override [symbol_ProtoType] = 'Router';
+        constructor() {
+            super();
+            handle(this);
+        }
+    }
+}

package/packages/router/src/types.ts

@@ -0,0 +1,41 @@
+import type { RouteSlot } from "#structure/RouteSlot";
+import type { Widget } from "@amateras/widget";
+
+export type RoutePath = string;
+
+export type RouteParams = { [key: string]: string }
+
+export type PageLayout<Path extends RoutePath = any> = (context: { params: PathToParamsMap<Path>, slot: RouteSlot }) => void;
+
+export type AsyncWidget<Params = any> = [() => Promise<{ default: Widget<any, Params> }>]
+
+export type PathToParamsUnion<T extends RoutePath> =
+  T extends `${infer _Start}:${infer Param}/${infer Rest}`
+    ? Param | PathToParamsUnion<Rest>
+    : T extends `${infer _Start}:${infer Param}`
+      ? Param
+      : never;
+
+export type ParamsArrayToParamsMap<ParamArray extends string[]> = ParamsUnionToMap<ParamArray[number]>
+// type Test_ParamsArrayToParamsMap = ParamsArrayToParamsMap<['test1' | 'test2' | 'test3?' | 'test4']>
+
+export type ParamsUnionToMap<T extends string> = Prettify<{
+    [P in T extends `${string}?` ? never : T]: string;
+} & {
+    [P in T extends `${infer Key}?` ? Key : never]?: string;
+}>
+// type Test_ParamRequired = ParamsUnionToMap<'test1' | 'test2' | 'test3?' | 'test4'>
+
+export type PathToParamsMap<Path extends RoutePath> = {
+    [P in PathToParamsUnion<Path>]: string
+}
+// type Test_PathToParamsMap = PathToParamsMap<'/path/:test1/path/@:test2/:test3/:test4'>
+
+export type PathConcat<A extends string, B extends string, C extends string = ''> = `${A}${B}${C}`;
+
+export type AliasRequired<Params, AliasParams> = Omit<Params, keyof AliasParams>;
+
+export type ValidatePath<Path extends string, Props, FullPath extends string> = 
+    RequiredKeys<Props> extends PathToParamsUnion<FullPath>
+        ?   Path
+        :   `Error: (${FullPath}) Missing keys: ${Exclude<RequiredKeys<Props>, PathToParamsUnion<FullPath>> & string}`;

package/packages/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/packages/signal/package.json

@@ -0,0 +1,15 @@
+{
+    "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"
+    }
+}

package/packages/signal/src/index.ts

@@ -0,0 +1,97 @@
+import { track, trackSet, untrack, type UntrackFunction } from "#lib/track";
+import { Signal } from "#structure/Signal";
+import { Proto } from "@amateras/core";
+import { TextProto } from "@amateras/core";
+import { _instanceof, _Object_assign, isEqual, forEach, isBoolean } from "@amateras/utils";
+
+declare global {
+    export function $<T>(signal: Signal<T>): Signal<T>;
+
+    export namespace $ {
+        export function signal<T>(value: T): Signal<T>;
+        export function effect(callback: (untrack: UntrackFunction) => void): void;
+        export function compute<T>(callback: (untrack: UntrackFunction) => T): Signal<T>;
+    }
+}
+
+_Object_assign($, {
+    signal(value: any) {
+        return new Signal(value);
+    },
+
+    effect(
+        callback: (
+            untrack: UntrackFunction
+        ) => void
+    ) {
+        track(callback);
+        forEach(trackSet, signal => signal.subscribe(_ => callback(untrack)));
+        trackSet.clear();
+    },
+    
+    compute<T>(
+        callback: (
+            untrack: UntrackFunction
+        ) => T
+    ) {
+        let result = track(callback);
+        let compute = new Signal(result);
+        forEach(trackSet, signal => signal.subscribe(_ => compute.set(callback(untrack))));
+        trackSet.clear();
+        return compute
+    }
+})
+
+let toTextProto = (signal: Signal) => {
+    if (_instanceof(signal, Signal)) {
+        let proto = new TextProto(`${signal}`);
+        proto.ondom(node => {
+            let fn = (value: any) => node.textContent = `${value}`;
+            signal.subscribe(fn);
+            proto.disposers.add(() => signal.unsubscribe(fn));
+        })
+
+        let fn = (value: any) => proto.content = `${value}`;
+        signal.subscribe(fn);
+        fn(signal.value);
+
+        proto.parent = Proto.proto;
+        return proto;
+    }
+}
+
+let setAttr = (name: string, node: HTMLElement, signal: Signal) => {
+    //@ts-ignore
+    if (name in node) node[name] = signal.value;
+    else node.setAttribute(name, `${signal}`)
+}
+
+$.process.text.add(toTextProto)
+$.process.craft.add(toTextProto)
+$.process.attr.add((name, signal, proto) => {
+    if (_instanceof(signal, Signal)) {
+        if (proto.tagname === 'input') {
+            if (isEqual(name, ['value', 'checked'] as const)) {
+                proto.on('input', e => signal.set((e.currentTarget as HTMLInputElement)[name]));
+                let value = signal.value;
+                if (isBoolean(value)) value && proto.attr(name, '');
+                else proto.attr(name, `${value}`)
+            }
+        } 
+        else
+            proto.ondom(node => {
+                let setNodeAttr = () => setAttr(name, node, signal);
+                signal.subscribe(setNodeAttr);
+                setNodeAttr();
+                proto.disposers.add(() => signal.unsubscribe(setNodeAttr))
+            })
+
+            let setProtoAttr = () => {
+                
+            }
+        
+        return true;
+    }
+})
+
+export * from "#structure/Signal";

package/packages/signal/src/lib/track.ts

@@ -0,0 +1,18 @@
+import type { Signal } from "#structure/Signal";
+
+export type UntrackFunction = (fn: () => unknown) => ReturnType<typeof fn>
+
+export let ontrack = false;
+export let trackSet = new Set<Signal>();
+export let untrack: UntrackFunction = fn => {
+    ontrack = false;
+    let result = fn();
+    ontrack = true
+    return result;
+}
+export let track = (callback: (untrack: UntrackFunction) => any) => {
+    ontrack = true;
+    let result = callback(untrack);
+    ontrack = false;
+    return result;
+}

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

@@ -0,0 +1,59 @@
+import { forEach, isFunction, isUndefined } from "@amateras/utils";
+import { ontrack, trackSet } from "#lib/track";
+
+let signalValueMap = new WeakMap<Signal, {value: any, subs: Set<(value: any) => void>}>();
+let get = (signal: Signal) => signalValueMap.get(signal)!;
+
+export interface Signal<T> {
+    (): T;
+}
+export class Signal<T = any> {
+    key: this;
+    constructor(value: T) {
+        const $state = () => {
+            if (ontrack) trackSet.add(this);
+            return get($state as this).value;
+        }
+        Object.setPrototypeOf($state, this);
+        signalValueMap.set($state as this, {value, subs: new Set()})
+        this.key = $state as this;
+        return $state as this
+    }
+    
+    get value(): T {
+        return get(this.key).value;
+    }
+
+    get subs(): Set<(value: T) => void> {
+        return get(this.key).subs;
+    }
+
+    set(resolver: T | ((oldValue: T) => T)) {
+        if (isFunction(resolver)) this.set(resolver(this.value));
+        else if (this.value !== resolver) {
+            get(this).value = resolver;
+            this.emit();
+        }
+    }
+
+    modify(callback: (value: T) => void) {
+        callback(this.value);
+        this.emit();
+    }
+    
+    emit() {
+        forEach(get(this).subs, subs => subs(this.value));
+    }
+
+    subscribe(callback: (value: T) => void) {
+        this.subs.add(callback);
+    }
+
+    unsubscribe(callback: (value: T) => void) {
+        this.subs.delete(callback);
+    }
+
+    toString(): string {
+        return `${this.value}`
+    }
+}

package/packages/ui/package.json

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

package/packages/ui/src/index.ts

@@ -0,0 +1,4 @@
+export * from "#lib/slideshowAnimations";
+export * from "#structure/Slide";
+export * from "#structure/Slideshow";
+export * from "#structure/Radio";

package/packages/ui/src/lib/slideshowAnimations.ts

@@ -0,0 +1,39 @@
+import type { SlideshowAnimationHandle } from "#structure/Slideshow";
+import { onclient } from "@amateras/core";
+
+export const slideInOut = (
+    options?: {
+        duration?: number,
+        easing?: string,
+        direction?: 'left' | 'right' | 'up' | 'down'
+    }
+): SlideshowAnimationHandle => 
+    (slideshow, newSlide, oldSlide) => {
+        slideshow.slide = newSlide;
+        if (!onclient()) return;
+        let newNodes = newSlide.toDOM();
+        slideshow.node?.append(...newNodes);
+
+        let animationOptions = {
+            duration: options?.duration ?? 500,
+            easing: options?.easing ?? 'ease'
+        }
+
+        let translate = $.match(options?.direction, $$ => $$
+            .case('up', () => [['0 100%', '0 0'], ['0 0', '0 -100%']])
+            .case('down', () => [['0 -100%', '0 0'], ['0 0', '0 100%']])
+            .case('left', () => [['100% 0', '0 0'], ['0 0', '-100% 0']])
+            .case('right', () => [['-100% 0', '0 0'], ['0 0', '100% 0']])
+            .default(() => [['100% 0', '0 0'], ['0 0', '-100% 0']])
+        )
+
+        newSlide.node?.animate({
+            translate: translate[0]
+        }, animationOptions)
+        
+        const animation = oldSlide?.node?.animate({
+            translate: translate[1]
+        }, animationOptions)
+
+        if (animation) animation.onfinish = () => oldSlide?.node?.remove();
+    }

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

@@ -0,0 +1,77 @@
+import { ElementProto } from "@amateras/core";
+import { _null, is } from "@amateras/utils";
+import { UID } from "@amateras/utils";
+
+export interface RadioGroupProps {
+    value?: any;
+    name?: string;
+}
+
+export class RadioGroup extends ElementProto {
+    value: any;
+    constructor({value, ...props}: $.Props<RadioGroupProps>, layout?: $.Layout<RadioGroup>) {
+        super('radio-group', props, layout);
+        this.value = value;
+        this.on('input', e => {
+            this.value = is(e.target, HTMLInputElement)?.value
+        })
+    }
+
+    static {
+        $.style(RadioGroup, 'radio-group{display:block}')
+    }
+}
+
+export interface RadioItemProps {
+    inputId?: string;
+    name?: string;
+    value: any;
+}
+
+export class RadioItem<T> extends ElementProto {
+    inputId: string;
+    name: string | null;
+    value: T;
+    constructor({inputId, name, value, ...props}: $.Props<RadioItemProps>, layout?: $.Layout<RadioItem<T>>) {
+        super('radio-item', props, layout);
+        this.inputId = inputId ?? `input-${UID.persistInProto(this, 'radio-item')}`;
+        this.name = name ?? _null;
+        this.value = value;
+    }
+
+    static {
+        $.style(RadioItem, 'radio-item{display:block}')
+    }
+}
+
+export class Radio extends ElementProto {
+    constructor(props: $.Props, layout?: $.Layout<Radio>) {
+        super('input', {type: 'radio', ...props}, layout);
+    }
+
+    override build(children?: boolean): this {
+        let selector = this.findAbove(proto => is(proto, RadioItem));
+        if (selector) {
+            this.attr('id', selector.inputId);
+            this.attr('name', selector.name);
+        }
+        return super.build(children);
+    }
+}
+
+export class Label extends ElementProto {
+    constructor(props: $.Props, layout?: $.Layout<Label>) {
+        super('label', props, layout);
+    }
+
+    override build(children?: boolean): this {
+        let selector = this.findAbove(proto => is(proto, RadioItem));
+        if (selector) this.attr('for', selector.inputId)
+        return super.build(children);
+    }
+}
+
+const randomIdMap = new Map<string, Set<string>>();
+function randomIdUnique() {
+
+}

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

@@ -0,0 +1,11 @@
+import { ElementProto } from "@amateras/core";
+
+export class Slide extends ElementProto {
+    constructor(props: $.Props, layout?: $.Layout<Slide>) {
+        super('slide', props, layout);
+    }
+    
+    static {
+        $.style(Slide, 'slide{display:block;height:100%;width:100%;position:absolute}')
+    }
+}