amateras 0.7.4 → 0.10.0

package/packages/markdown/src/syntax/text.ts

@@ -1,19 +0,0 @@
-import { EMPTY_LINE, TEXT, TEXT_LINE } from "#lib/type";
-import { htmltag, setProcessor } from "#lib/util";
-import type { MarkdownParser } from "#structure/MarkdownParser";
-
-export const textProcessor = (parser: MarkdownParser) => setProcessor(parser, TEXT, token => token.text!);
-
-export const textLineProcessor = (parser: MarkdownParser) => setProcessor(parser, TEXT_LINE, (_, tokens) => {
-    let html = '';
-    let i = 0;
-    for (const token of tokens) {
-        if (token.type === EMPTY_LINE) break;
-        html += parser.parse(token.content!);
-        i++;
-    }
-    return {
-        html: htmltag('p', html),
-        skipTokens: i
-    };
-})

package/packages/router/README.md

@@ -1,175 +0,0 @@
-# amateras/router
-
-## Usage
-```ts
-import 'amateras';
-import 'amateras/router';
-```
-
-## Create Route Map
-```ts
-// create home page route
-const HomePage = $.route(page => page
-    .pageTitle('Home | My Site') // set window title
-    .content([
-        $('h1').content('Home')
-    ])
-)
-// append router and mapping home page route into router
-$(document.body).content([
-    $('router')
-    .route('/', HomePage)
-    .route('/hello', page => 'Hello!')
-    .listen() // start to listen path change
-])
-```
-
-> [!NOTE]
-> Don't forget to `.listen()` the path change!
-
-## Router Anchor
-Use `RouterAnchor` to prevent load page when open link by default `HTMLAnchorElement` element.
-```ts
-$('ra').content('Contact').href('/contact');
-```
-
-## Common Methods
-- `$.open(url)`: Open page without load page.
-- `$.replace(url)`: Replace history state with url and open page.
-- `$.forward()`: Forward page.
-- `$.back()`: Back page.
-
-## Async Route
-```ts
-// ./page/home_page.ts
-export default $.route(page => {
-    return page
-    .content([
-        $('h1').content('Home Page')
-    ])
-})
-
-// ./router.ts
-$('router')
-.route('/about', () => import('./page/home_page'))
-```
-
-## Path Parameter
-TypeScript will parse the parameter in the path, parameter always start with `:`, after the colon comes the name of the parameter. You can access theses parameter using `Page.params`.
-
-```ts
-$('router')
-.route('/user/@:username', page => {
-    console.log(page.params.username);
-    return page;
-})
-.listen()
-// simulate page open
-.resolve('/user/@amateras') // 'amateras'
-```
-
-If you want separate router and route builder to different file, use generic parameter to define parameter name on `$.route` method. 
-
-```ts
-// greating_page.ts
-export default $.route<['name']>(page => {
-    return page
-    .content(`Hello, ${name}`)
-})
-
-// router.ts
-$('router')
-.route('/greating', () => import('./greating_page'))
-// ^ typescript wiil report an error, the route builder required 'name' parameter
-
-.route('/greating/:name', () => import('./greating_page'))
-// ^ pass
-```
-
-### Optional Parameter
-Sometime we parameter can be optional, you can define the optional parameter by add `?` sign after the name of the parameter.
-
-```ts
-const userPage = $.route<'photoId', 'postId?'>(page => {
-    return page
-    .content([
-        `Photo ID: ${page.params.photoId}`, // photoId: string
-        `Post ID: ${page.params.postId}` // postId: string | undefined 
-    ])
-})
-
-$('router')
-.route('/photos/:photoId', userPage)
-// ^ pass
-.route('/posts/:postId/photos/:photoId', userPage)
-// ^ pass
-```
-
-## Nesting Route
-`Router` element is the container of `Page` element, we can archieve nesting route by create `Router` and append it inside `Page`.
-```ts
-const ContactPage = $.route(page => page
-    .pageTitle('Home')
-    .content([
-        $('h1').content('Contact'),
-        $('router', page) 
-        // here is the magic happened,
-        // pass the Page into router arguments
-    ])
-)
-```
-
-Then, we need to declare the router map like this: 
-
-```ts
-$('router')
-.route('/', HomePage)
-.route('/contact', ContactPage, route => route
-    // we can define more child routes inside this '/contact' route!
-    .route('/', () => 'My name is Amateras.')
-    .route('/phone', () => '0123456789')
-)
-```
-
-### Alias Path
-
-Sometime, the page doesn't have just one path. We can declare the alias paths to one route!
-
-```ts
-$('router')
-.route('/', HomePage, route => route
-    .alias('/home')
-    .alias('/the/another/way/to/home')
-    // ... more alias path
-)
-```
-
-What if the main path included parameters? Here is how to deal with it:
-
-```ts
-$('router')
-.route('/users/:username', UserPage, route = route
-    .alias('/u/:username')
-    .alias('/profile')
-    // ^ typescript will report an error
-
-    .alias('/profile', { username: 'amateras' })
-    // ^ pass, the params required is fulfilled
-
-    .alias('/profile', () => { return { username: getUsername() } })
-    // ^ even you can pass an arrow function!
-)
-```
-
-### Group Path
-
-There have a lot of paths got same prefix? We provide the solution:
-
-```ts
-$('router')
-.route('/', HomePage)
-.group('/search', route => route
-    .route('/', SearchPage)
-    .route('/users', SearchUserPage)
-)
-```

package/packages/router/package.json

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

package/packages/router/src/index.ts

@@ -1,68 +0,0 @@
-import type { Page } from "#node/Page";
-import { Router } from "#node/Router";
-import { PageBuilder } from "#structure/PageBuilder";
-import { Route, type RouteBuilder, type RouteParams } from "#structure/Route";
-import { _Object_assign, _bind, forEach } from "@amateras/utils";
-import type { AnchorTarget } from "../../html/src/node/$Anchor";
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export function route<Params extends RouteParams = []>(builder: (page: Page<Params>) => OrPromise<Page<Params>>): PageBuilder<Params>;
-        export function open(url: string | URL | Nullish, target?: AnchorTarget): typeof Router;
-        export function replace(url: string | URL | Nullish): typeof Router;
-        export function back(): typeof Router;
-        export function forward(): typeof Router;
-        export interface $NodeMap {
-            'router': typeof Router;
-        }
-    }
-}
-
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'routeopen': Event;
-    }
-}
-
-let prototype = {
-    route(this: { routes: Map<string, Route> }, path: string, builder: RouteBuilder, handle?: (route: Route) => Route) {
-        const route = new Route<any>(path, builder);
-        handle?.(route);
-        this.routes.set(path, route);
-        return this;
-    },
-
-    group(this: { routes: Map<string, Route> }, path: string, handle: (route: Route) => Route) {
-        this.routes.set(path, handle(new Route<any>(path)))
-        return this;
-    },
-
-    notFound(this: { routes: Map<string, Route> }, builder: RouteBuilder) {
-        this.routes.set('notfound', new Route('notfound', builder));
-        return this;
-    }
-}
-
-// assign methods
-_Object_assign(Router.prototype, prototype)
-_Object_assign(Route.prototype, prototype)
-_Object_assign($, {
-    route: (builder: (page: Page) => Page) => new PageBuilder(builder),
-    open: _bind(Router.open, Router),
-    replace: _bind(Router.replace, Router),
-    back: _bind(Router.back, Router),
-    forward: _bind(Router.forward, Router)
-})
-// assign node
-$.assign(['router', Router])
-// use style
-forEach([
-    `router{display:block}`,
-    `page{display:block}`
-], $.style);
-
-export * from '#node/Page';
-export * from '#node/Router';
-export * from '#node/RouterAnchor';
-export * from '#structure/PageBuilder';
-export * from '#structure/Route';

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

@@ -1,38 +0,0 @@
-import type { RouteParams } from "#structure/Route";
-import { chain } from "@amateras/core/lib/chain";
-import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
-import { _null } from "@amateras/utils";
-import type { Router } from "./Router";
-
-
-export class Page<Params extends RouteParams = []> extends $HTMLElement {
-    params: PageParamsResolver<Params>;
-    router: null | Router = _null
-    #pageTitle: string | null = _null;
-    built = false;
-    pathId: string;
-    constructor(pathId: string, params: PageParamsResolver<Params>) {
-        super('page');
-        this.params = params;
-        this.pathId = pathId;
-    }
-
-    pageTitle(): string | null;
-    pageTitle(title: string | null): this;
-    pageTitle(title?: string | null) {
-        return chain(this, arguments, () => this.#pageTitle, title, title => this.#pageTitle = title)
-    }
-
-}
-
-export type PageParams = { [key: string]: string }
-export type PageParamsResolver<Params extends string[]> = 
-    Prettify<
-        Params extends [`${infer String}`, ...infer Rest]
-        ?   Rest extends string[]
-            ?   String extends `${infer Key}?`
-                ?   { [key in Key]?: string } & PageParamsResolver<Rest>
-                :   { [key in String]: string } & PageParamsResolver<Rest>
-            :   never
-        :   {}
-    >

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

@@ -1,212 +0,0 @@
-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/packages/router/src/node/RouterAnchor.ts

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

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