amateras 0.5.0 → 0.7.0

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

@@ -0,0 +1,212 @@
+import { Route, type RouteBuilder, type RoutePath, type RouteParamsResolver, type RouteParams, type RouteParamsStrings, type AsyncPageBuilder } from "../structure/Route";
+import type { AnchorTarget } from "../../../html/src/node/$Anchor";
+import { Page, type PageParams } from "./Page";
+import type { PageBuilder, PageBuilderFunction } from "#structure/PageBuilder";
+import { _document } from "@amateras/core/env";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+import { _instanceof, startsWith, _JSON_parse, forEach, _Object_entries, _JSON_stringify, isFunction } from "@amateras/utils";
+// history index
+let index = 0;
+const _addEventListener = addEventListener;
+const _location = location;
+const {origin} = _location;
+const _history = history;
+const _sessionStorage = sessionStorage;
+const documentElement = _document.documentElement;
+const [PUSH, REPLACE] = [1, 2] as const;
+const [FORWARD, BACK] = ['forward', 'back'] as const;
+const scrollStorageKey = '__scroll__';
+/** convert path string to URL object */
+const toURL = (path: string | URL) => 
+    _instanceof(path, URL) ? path : startsWith(path, 'http') ? new URL(path) : new URL(startsWith(path, origin) ? path : origin + path);
+
+type ScrollData = {[key: number]: {x: number, y: number}};
+const scrollRecord = (e?: Event) => {
+    const data = _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}') as ScrollData;
+    data[index] = { x: documentElement.scrollLeft, y: documentElement.scrollTop };
+    // e is Event when called from scroll or beforeload
+    if (!e) forEach(_Object_entries(data), ([i]) => +i > index && delete data[+i])
+    _sessionStorage.setItem(scrollStorageKey, _JSON_stringify(data));
+}
+/** handle history state with push and replace state. */
+const historyHandler = async (path: string | URL | Nullish, mode: 1 | 2, target?: AnchorTarget) => {
+    if (!path) return;
+    const url = toURL(path);
+    if (url.href === _location.href) return;
+    if (target && target !== '_self') return open(url, target);
+    if (url.origin !== origin) return open(url, target);
+    scrollRecord();
+    if (mode === PUSH) index += 1;
+    Router.direction = FORWARD;
+    Router.prevUrl = toURL(_location.href);
+    _history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url);
+    Router.url = url;
+    forEach(Router.routers, router => router.resolve(path))
+}
+// disable browser scroll restoration
+_history.scrollRestoration = 'manual';
+
+type RouteData = { route: Route, params: PageParams, pathId: string }
+export class Router extends $HTMLElement {
+    static direction: 'back' | 'forward' = FORWARD;
+    static routers = new Set<Router>();
+    static url: URL = toURL(_location.href);
+    static prevUrl: URL | null = null;
+    routes = new Map<RoutePath, Route>();
+    pages = new Map<string, Page>();
+    constructor(page?: Page) {
+        super('router');
+        if (page) page.router = this;
+        else Router.routers.add(this);
+    }
+    
+    static open(path: string | URL | Nullish, target?: AnchorTarget) {
+        historyHandler(path, PUSH, target);
+        return this;
+    }
+
+    static back() {
+        _history.back();
+        return this;
+    }
+
+    static forward() {
+        _history.forward();
+        return this;
+    }
+
+    static replace(path: string | URL | Nullish) {
+        historyHandler(path, REPLACE);
+        return this;
+    }
+
+    static get scroll(): ScrollData[number] {
+        return _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}')[index] ?? {x: 0, y: 0}
+    }
+    
+    listen() {
+        const resolve = () => {
+            const stateIndex = _history.state?.index ?? 0;
+            if (index > stateIndex) Router.direction = BACK;
+            if (index < stateIndex) Router.direction = FORWARD;
+            index = stateIndex;
+            Router.prevUrl = Router.url;
+            Router.url = toURL(_location.href);
+            this.resolve(_location.href);
+        }
+        _addEventListener('popstate', resolve);
+        _addEventListener('beforeunload', scrollRecord);
+        _addEventListener('scroll', scrollRecord, false);
+        resolve();
+        return this;
+    }
+
+    async resolve(path: string | URL, force = false): Promise<this> {
+        const {pathname, href} = toURL(path);
+        const routes = this.getRoutes(this.routes, pathname);
+        const routerPageMap = new Map<Router, Page>();
+        let prevRouter: Router | null = this;
+        let pathIdStr = '';
+        let paramsData = {}
+        await forEach(routes, async ({route, params, pathId}) => {
+            pathIdStr += pathId;
+            paramsData = {...paramsData, ...params}
+            // skip route group
+            const builderResolver = route.builder;
+            if (!builderResolver) return;
+            // get page from cache or create new page
+            const page = route.pages.get(pathId) ?? new Page(pathIdStr, paramsData);
+            // resolve builder
+            if (!page.built) await builderResolver.build(page);
+            page.built = true;
+            // set router to page map
+            if (prevRouter) routerPageMap.set(prevRouter, page)
+            // set cache
+            if (!force) route.pages.set(pathId, page);
+            prevRouter = page.router;
+        })
+
+        forEach(routerPageMap, ([router, page]) => {
+            // set title
+            _document && (_document.title = page.pageTitle() ?? _document.title ?? '');
+            // check location is still same, page parent is not router before insert page
+            if (force || (href === _location.href && page.parentNode !== router.node)) router.content(page);
+        })
+        // handle scroll restoration
+        let { x, y } = Router.scroll ?? {x: 0, y: 0};
+        scrollTo(x, y);
+        // event
+        this.dispatchEvent(new Event('routeopen', {bubbles: true}));
+        return this;
+    }
+
+    protected getRoutes(routes: typeof this.routes, targetPath: string): RouteData[] {
+        const split = (p: string) => p.replaceAll(/\/+/g, '/').replace(/^\//, '').split('/').map(path => `/${path}`);
+        let targetPathSplit = split(targetPath);
+        if (!routes.size) return [];
+        // check each route
+        for (const [_, route] of routes) {
+            // check each path pass
+            routePathLoop: for (const [path, paramsHandle] of route.paths) {
+                let routePathSplit = split(path);
+                let targetPathNodePosition = 0;
+                let params: { [key: string]: string } = isFunction(paramsHandle) ? paramsHandle() : paramsHandle ?? {};
+                let pathId = '';
+                // check each path node
+                pathNodeLoop: for (let i = 0; i < routePathSplit.length; i++) {
+                    // reset target path node position
+                    targetPathNodePosition = i;
+                    const routeNode = routePathSplit[i];
+                    const targetNode = targetPathSplit[i];
+                    // path node undefined, break path loop
+                    if (!routeNode || !targetNode) continue routePathLoop;
+                    // path node is params node
+                    if (routeNode.includes(':')) {
+                        // target not matched
+                        if (targetNode === '/') continue routePathLoop;
+                        const [prefix, paramName] = routeNode.split(':') as [string, string];
+                        if (!startsWith(targetNode, prefix)) continue routePathLoop;
+                        params[paramName] = targetNode.replace(`${prefix}`, '');
+                        pathId += targetNode;
+                        continue pathNodeLoop;
+                    }
+                    // path node not matched, next path
+                    if (routeNode !== targetNode) continue routePathLoop;
+                    pathId += targetNode;
+                }
+                // target path node longer than route, next route
+                if (targetPathSplit[targetPathNodePosition + 1] && !route.routes.size) continue routePathLoop;
+                // all path node passed, route found
+                return [{route, params, pathId}, ...this.getRoutes(route.routes, targetPathSplit.slice(targetPathNodePosition + 1).join('/'))]
+            }
+        }
+        // no route passed
+        const notfound = routes.get('notfound');
+        if (notfound) return [{route: notfound, params: {}, pathId: 'notfound'}]
+        return [];
+    }
+
+    protected getPage() {
+
+    }
+}
+
+export interface Router {
+    route<
+        P extends RoutePath, 
+        B extends PageBuilder
+    >(path: P, builder: B, handle?: (route: Route<P, B['params']>) => Route<P>): Router
+    route<
+        K extends RoutePath, 
+        P extends RouteParamsStrings<K>, 
+        F extends PageBuilderFunction<P>
+    >(path: K, builder: F, handle?: (route: Route<K, P>) => Route<K, P>): this
+    route<
+        K extends RoutePath, 
+        P extends RouteParamsStrings<K>, 
+        F extends AsyncPageBuilder<P>
+    >(path: K, builder: F, handle?: (route: Route<K, P>) => Route<K, P>): this
+    route<P extends RoutePath>(path: P, builder: RouteBuilder<RouteParamsResolver<P>>, handle?: (route: Route<P>) => Route<P>): Router
+    group<P extends RoutePath>(path: P, handle: <R extends Route<P>>(route: R) => R): this;
+    notFound(builder: RouteBuilder<RouteParamsResolver<RoutePath>>): this;
+}

package/{ext/router → packages/router/src}/node/RouterAnchor.ts

@@ -1,13 +1,24 @@
-import { $Anchor } from "#html/$Anchor";
+import { $Anchor } from "@amateras/html/node/$Anchor";
 
 export class RouterAnchor extends $Anchor {
     constructor() {
         super();
         this.on('click', e => { 
+            if (e.shiftKey || e.ctrlKey) return;
             e.preventDefault();
             this.target() === '_replace' 
             ?   $.replace(this.href()) 
             :   $.open(this.href(), this.target())
         })
     }
-}
+}
+
+declare module '@amateras/core' {
+    export namespace $ {
+        export interface $NodeMap {
+            'ra': typeof RouterAnchor;
+        }
+    }
+}
+
+$.assign(['ra', RouterAnchor]);

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

@@ -0,0 +1,24 @@
+import { Page } from "#node/Page";
+import type { $NodeContentResolver } from "@amateras/core/node/$Node";
+import { _instanceof, _Promise } from "@amateras/utils";
+import type { AsyncPageBuilder, RouteParams } from "./Route";
+
+export class PageBuilder<Params extends RouteParams = any> {
+    params!: Params
+    #builder: PageBuilderFunction<Params> | AsyncPageBuilder<Params>;
+    constructor(builder: PageBuilderFunction<Params>) {
+        this.#builder = builder;
+    }
+
+    async build(page: Page<Params>): Promise<Page<Params>> {
+        const resolver = this.#builder(page)
+        const handle = async (result: any) => {
+            if (_instanceof(result, Page)) return result;
+            else if (result[Symbol.toStringTag] === 'Module') return await result.default.build(page);
+            else return page.content(result);
+        }
+        return handle(_instanceof(resolver, _Promise) ? await resolver : resolver);
+    }
+}
+
+export type PageBuilderFunction<Params extends RouteParams> = (page: Page<Params>) => OrPromise<Page<Params> | $NodeContentResolver<Page<Params>>>

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

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

@@ -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,18 @@
+{
+    "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"
+    }
+}