amateras 0.13.2 → 0.14.0

package/packages/router/src/global.ts

@@ -1,18 +1,19 @@
 import * as _Link from "#structure/Link";
 import * as _NavLink from "#structure/NavLink";
 import * as _Router from "#structure/Router";
-import type { Router, RouterHandle } from "#structure/RouterConstructor";
+import type { RouterConstructor, RouterHandle } from "#structure/RouterConstructor";
+import type { RouteSlot } from "#structure/RouteSlot";
+import type { Proto } from "@amateras/core";
 
 declare global {
     export var Link: typeof _Link.Link;
     export var NavLink: typeof _NavLink.NavLink;
-    export function $(Router: Router): _Router.RouterProto;
 
     export type Link = _Link.Link;
     export type NavLink = _NavLink.NavLink;
 
     export namespace $ {
-        export function router(handle: RouterHandle): Router;
+        export function router(handle: RouterHandle): RouterConstructor;
 
         export function open(path: string, target?: string): void;
         export function forward(): void;
@@ -20,6 +21,18 @@ declare global {
         export function replace(path: string): void;
         export function scrollRestoration(): void;
 
-        export function title(title: OrPromise<string>): void;
+        export function title(title: OrPromise<string>, parent?: Proto | null): void;
+
+        interface ProtoEventMap<P extends Proto> {
+            pageswitch: [slot: RouteSlot, direction: _Router.RouterDicrection]
+        }
+
+        interface Overload<I> {
+            router: [
+                input: [RouterConstructor],
+                output: [_Router.Router],
+                args: []
+            ]
+        }
     }
 }

package/packages/router/src/index.ts

@@ -4,7 +4,7 @@ import { Page } from '#structure/Page';
 import { Route } from '#structure/Route';
 import { RouteGroup } from '#structure/RouteGroup';
 import { RouteNode } from '#structure/RouteNode';
-import { RouterProto } from '#structure/Router';
+import { Router } from '#structure/Router';
 import { RouterConstructor } from '#structure/RouterConstructor';
 import { symbol_ProtoType } from '@amateras/core';
 import { GlobalState } from '@amateras/core';
@@ -17,25 +17,27 @@ declare module "@amateras/core" {
     export interface GlobalState {
         title: string | null
         router: {
-            routers: Set<RouterProto>;
+            routers: Set<Router>;
             resolve: (path: string) => Promise<void>[];
             href: URL;
             routes: Route[];
             matchPaths: string[];
             navlinks: Set<NavLink>;
+            scrollQueue: Set<Promise<any>>;
+            postScrollRestoration(promise: Promise<any>): void;
         }
     }
 }
 
 let routePlannerPrototype = {
-    route(this: Route | RouterProto, path: string, layout: PageLayout<string>, handle?: (route: Route) => void) {
+    route(this: Route | Router, path: string, layout: PageLayout<string>, handle?: (route: Route) => void) {
         let route = new RouteNode(path, layout);
         this.routes.set(path, route);
         handle?.(route);
         return this;
     },
 
-    group(this: Route | RouterProto, path: string, handle?: (route: Route) => void) {
+    group(this: Route | Router, path: string, handle?: (route: Route) => void) {
         let group = new RouteGroup(path);
         this.routes.set(path, group);
         handle?.(group);
@@ -48,19 +50,24 @@ let routePlannerPrototype = {
 }
 
 _Object_assign(Route.prototype, routePlannerPrototype);
-_Object_assign(RouterProto.prototype, routePlannerPrototype);
-_Object_assign(GlobalState.prototype, {
+_Object_assign(Router.prototype, routePlannerPrototype);
+GlobalState.assign(() => ({
     router: {
-        routers: new Set<RouterProto>(),
+        routers: new Set<Router>(),
         resolve(this, path: string) {
             return map(this.routers, router => router.resolve(path));
         },
         href: new URL('http://localhost'),
         routes: [],
         matchPaths: [],
-        navlinks: new Set()
+        navlinks: new Set(),
+        scrollQueue: new Set<Promise<any>>(),
+        postScrollRestoration(promise: Promise<any>) {
+            promise.finally(() => this.scrollQueue.delete(promise));
+            this.scrollQueue.add(promise);
+        }
     }
-})
+}))
 
 GlobalState.disposers.add(({router}) => {
     router.routers.clear();
@@ -70,15 +77,15 @@ GlobalState.disposers.add(({router}) => {
 })
 
 _Object_assign($, {
-    router: (handle: ($$: RouterProto) => void) => RouterConstructor(handle),
-    open: RouterProto.open,
-    replace: RouterProto.replace,
-    back: RouterProto.back,
-    forward: RouterProto.forward,
-    scrollRestoration: RouterProto.scrollRestoration,
+    router: (handle: ($$: Router) => void) => RouterConstructor(handle),
+    open: Router.open,
+    replace: Router.replace,
+    back: Router.back,
+    forward: Router.forward,
+    scrollRestoration: Router.scrollRestoration,
 
-    title(title: OrPromise<string>) {
-        let page = Proto.proto?.findAbove<Page>(proto => is(proto, Page));
+    title(title: OrPromise<string>, parent: Proto | null = Proto.proto) {
+        let page = parent?.findAbove<Page>(proto => is(proto, Page));
         if (page) {
             page.title = title;
             page.updateTitle();
@@ -92,7 +99,7 @@ globalThis.NavLink = NavLink;
 $.process.craft.add((value) => {
     if (isFunction(value) && value[symbol_ProtoType] === 'Router') {
         let proto = Proto.proto;
-        let router = new value() as RouterProto;
+        let router = new value() as Router;
         proto?.global.router.routers.add(router);
         return router;
     }

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

@@ -87,9 +87,10 @@ export abstract class Route<ParentPath extends RoutePath = any, Path extends Rou
         _Path extends RoutePath,
         _Params extends AliasRequired<Params, PathToParamsMap<_Path>>,
         Required extends keyof _Params extends [never] ? [] : [_Params | (() => _Params)]
-    >(path: _Path, ...required: Required): void;
+    >(path: _Path, ...required: Required): this;
     alias(path: string, required?: RouteParams | (() => RouteParams)) {
         this.paths.set(path, required)
+        return this;
     }
 }
 

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

@@ -1,6 +1,6 @@
-import { Proto, symbol_ProtoType } from "@amateras/core";
+import { onclient, Proto, symbol_ProtoType } from "@amateras/core";
 import { _null, isArray } from "@amateras/utils";
-import type { Widget } from "@amateras/widget";
+import type { WidgetConstructor } from "@amateras/widget";
 import type { AsyncWidget, PageLayout } from "../types";
 import { Page } from "./Page";
 import { Route } from "./Route";
@@ -9,8 +9,8 @@ import type { RouteSlot } from "./RouteSlot";
 export class RouteNode extends Route {
     pages = new Map<string, Page>();
     page: Page | null = _null;
-    #layout: Widget | PageLayout | AsyncWidget;
-    constructor(path: string, layout: Widget | PageLayout | AsyncWidget) {
+    #layout: WidgetConstructor | PageLayout | AsyncWidget;
+    constructor(path: string, layout: WidgetConstructor | PageLayout | AsyncWidget) {
         super(path);
         this.#layout = layout;
     }
@@ -36,12 +36,14 @@ export class RouteNode extends Route {
             let layout = this.#layout;
             let _layout;
             if (isArray(layout)) {
-                let widget = await layout[0]().then(mod => mod.default);
+                let promise = layout[0]()
+                if (onclient()) promise.catch(() => location.reload());
+                let widget = await promise.then(mod => mod.default);
                 _layout = () => $(widget, params, () => $(page!.slot));
             } else {
                 //@ts-ignore
                 _layout = this.#layout[symbol_ProtoType] === 'Widget' // is widget constructor
-                ?   () => $(this.#layout as Widget, params, () => $(page!.slot)) 
+                ?   () => $(this.#layout as WidgetConstructor, params, () => $(page!.slot)) 
                 :   this.#layout as PageLayout;
             }
             $.context(Proto, slot, () => {

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

@@ -2,26 +2,39 @@ import { onclient } from "@amateras/core";
 import { ProxyProto } from "@amateras/core";
 import { _null } from "@amateras/utils";
 import { Page } from "./Page";
+import { Router } from "./Router";
 
 export class RouteSlot extends ProxyProto {
     page: Page | null = _null;
+    prevPage: Page | null = _null;
     constructor() {
         super();
     }
 
     switch(page: Page) {
         if (this.page === page) return;
+        this.prevPage = this.page;
         this.clear();
         this.layout = () => $(page);
         this.append(page);
-        if (this.page !== page) this.page?.removeNode();
         this.page = page;
         if (!page.builded) page.build();
         page.updateTitle();
-        
+
+        if (!this.dispatch('pageswitch', [this, Router.direction], {bubbles: true})) this.render();
+    }
+
+    render() {
         if (onclient()) {
+            this.prevPage?.removeNode();
             let nodes = this.toDOM();
             this.node?.replaceWith(...nodes);
         }
     }
+
+    override dispose(): void {
+        super.dispose();
+        this.page = _null;
+        this.prevPage = _null;
+    }
 }

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

@@ -7,7 +7,7 @@ import type { Route } from "./Route";
 import { RouteSlot } from "./RouteSlot";
 
 type Mode = 1 | 2;
-type RouterDicrection = 'forward' | 'back';
+export type RouterDicrection = 'forward' | 'back';
 
 let index = 0;
 const [PUSH, REPLACE] = [1, 2] as const;
@@ -21,7 +21,7 @@ if (onclient()) history.scrollRestoration = 'manual';
 type ScrollData = {[key: number]: { [id: string]: { x: number, y: number }}};
 
 const scrollRecord = (e?: Event) => {
-    const data = RouterProto.scrollHistory;
+    const data = Router.scrollHistory;
     if (e) {
         let element = e.target as HTMLElement;
         if (element.nodeName === '#document')  {
@@ -34,15 +34,16 @@ const scrollRecord = (e?: Event) => {
     storage?.setItem(SCROLL_KEY, _JSON_stringify(data));
 }
 
-export class RouterProto extends Proto {
-    direction: RouterDicrection = FORWARD;
+export class Router extends Proto {
+    static direction: RouterDicrection = FORWARD;
     prev: URL | null = _null;
+    url: URL | null = _null;
     routes = new Map<string, Route>();
     slot = new RouteSlot();
-    static routers = new Set<RouterProto>();
+    static routers = new Set<Router>();
     constructor() {
         super(() => $(this.slot));
-        if (onclient()) RouterProto.routers.add(this);
+        if (onclient()) Router.routers.add(this);
     }
 
     set href(url: URL) {
@@ -53,8 +54,8 @@ export class RouterProto extends Proto {
         if (onclient()) {
             const resolve = () => {
                 const stateIndex = history.state?.index ?? 0;
-                if (index > stateIndex) this.direction = BACK;
-                if (index < stateIndex) this.direction = FORWARD;
+                if (index > stateIndex) Router.direction = BACK;
+                if (index < stateIndex) Router.direction = FORWARD;
                 index = stateIndex;
                 this.prev = this.href;
                 this.href = toURL(location.href);
@@ -66,7 +67,7 @@ export class RouterProto extends Proto {
                 capture: true,
                 passive: false
             });
-            this.ondispose(() => {
+            this.listen('dispose', () => {
                 _removeEventListener?.('popstate', resolve);
                 _removeEventListener?.('scroll', scrollRecord, {
                     capture: true
@@ -79,6 +80,7 @@ export class RouterProto extends Proto {
     async resolve(path: string | URL) {
         if (!path) return;
         let url = toURL(path);
+        this.global.router.scrollQueue.clear();
         for (let [,route] of this.routes) {
             let routes = await route.resolve(url.pathname, this.slot, {});
             // 一旦有一个 route 解析成功就跳过剩下的 routes
@@ -98,17 +100,21 @@ export class RouterProto extends Proto {
                 break;
             };
         }
+        this.url = url;
         // NavLink 检测匹配
         forEach(this.global.router.navlinks, navlink => navlink.checkActive())
         // location 变更事件触发
-        RouterProto.dispatchEvent();
+        Router.dispatchEvent();
         // restore scroll position
-        RouterProto.scrollRestoration();
+        Promise.all(this.global.router.scrollQueue).then(() => {
+            // make sure after scroll queue promises resolved is still the same page
+            if (url === this.url) Router.scrollRestoration()
+        });
     }
 
     static open(path: string, target: string = '_self') {
         if (toURL(path).origin !== origin) open(path, target);
-        else RouterProto.writeState(path, PUSH, target);
+        else Router.writeState(path, PUSH, target);
     }
 
     static forward() {
@@ -120,7 +126,7 @@ export class RouterProto extends Proto {
     }
 
     static replace(path: string) {
-        RouterProto.writeState(path, REPLACE);
+        Router.writeState(path, REPLACE);
     }
 
     static get scrollData(): ScrollData[number] {
@@ -133,14 +139,17 @@ export class RouterProto extends Proto {
 
     static scrollRestoration() {
         if (onclient()) {
-            let scrollData = RouterProto.scrollData ?? {x: 0, y: 0};
+            let scrollData = Router.scrollData ?? {x: 0, y: 0};
             let scrollDataElements = _Object_entries(scrollData);
             if (scrollDataElements.length)
                 forEach(scrollDataElements, ([id, {x, y}]) => {
                     if (id === '#document') window.scrollTo(x, y);
-                    else document.querySelector(`#${id}`)?.scrollTo(x, y)
+                    else document.getElementById(id)?.scrollTo(x, y)
                 });
-            else window.scrollTo(0, 0)
+            else {
+                document.querySelectorAll('*').forEach(el => el.scrollTo(0, 0))
+                window.scrollTo(0, 0)
+            }
         }
     }
 
@@ -152,7 +161,7 @@ export class RouterProto extends Proto {
         if (mode === PUSH) index++;
         if (onclient()) scrollRecord();
         forEach(this.routers, router => {
-            router.direction = FORWARD;
+            Router.direction = FORWARD;
             if (onclient()) {
                 router.prev = toURL(location.href);
                 history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '', url);
@@ -160,7 +169,7 @@ export class RouterProto extends Proto {
             router.href = url;
             router.resolve(path)
         })
-        RouterProto.dispatchEvent();
+        Router.dispatchEvent();
     }
 
     private static dispatchEvent() {
@@ -175,7 +184,7 @@ declare global {
 }
 
 
-export interface RouterProto {
+export interface Router {
     route<_Path extends RoutePath, Props>(
         path: ValidatePath<_Path, Props, _Path>,
         widget: Widget<Props>,

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

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

package/packages/router/src/types.ts

@@ -1,5 +1,5 @@
 import type { RouteSlot } from "#structure/RouteSlot";
-import type { Widget } from "../../widget/src";
+import type { WidgetConstructor } from "@amateras/widget";
 
 export type RoutePath = string;
 
@@ -7,7 +7,7 @@ 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<Params> }>]
+export type AsyncWidget<Params = any> = [() => Promise<{ default: WidgetConstructor<Params> }>]
 
 export type PathToParamsUnion<T extends RoutePath> =
   T extends `${infer _Start}:${infer Param}/${infer Rest}`

package/packages/signal/README.md

@@ -1,34 +1,12 @@
 # amateras/signal
 
-## Usage
-
+## Import
 ```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('');
@@ -48,21 +26,22 @@ boolean$(); // true
 object$(); // { number: 42 }
 ```
 
-## Use in attribute methods
-
+## Set as Attribute Value
 ```ts
 const src$ = $.signal('/image-1.png');
 
-$(document.body).content([
+$('div', $$ => {
     // you can set signal variable in attribute
-    $('img').src( src$ ),
+    $('img', { src: src$ }),
 
-    $('button').content('Change Image').on('click', () => src$.set('/image-2.png'))
-])
+    $('button', $$ => {
+        $$.on('click', () => src$.set('/image-2.png'))
+        $`Change Image`
+    })
+})
 ```
 
-## Reactive object
-
+## Signal Object
 ```ts
 const user$ = $.signal({
     name: 'Amateras',
@@ -73,21 +52,22 @@ const user$ = $.signal({
     }
 })
 
-$(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'
-        }
-    }))
-])
+user$.name$() // "Amateras"
+user$.age$() // 16
+user$.avatar$.url() // "/amateras/avatar.png"
+```
+
+## Compute and Effect
+```ts
+const count$ = $.signal(0);
+const double$ = $.compute(() => count$() + 1);
+
+$.effect(() => {
+    console.log(`Count is ${count$()}`)
+})
+
+$('button', $$ => {
+    $$.on('click', () => count$.set(value => value + 1))
+    $`You have clicked this button in half of ${double$} times.`
+})
 ```