amateras 0.5.0 → 0.7.0

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

@@ -0,0 +1,11 @@
+import { HORIZONTAL_RULE } from "#lib/type";
+import { setBlockTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const horizontalRuleProcessor = (parser: MarkdownParser) => setProcessor(parser, HORIZONTAL_RULE, _ => `<hr>`)
+
+export const horizontalRuleTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, HORIZONTAL_RULE, {
+    regex: /^---/,
+    handle: _ => ({ content: [] })
+})

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

@@ -0,0 +1,23 @@
+import { IMAGE } from "#lib/type";
+import { setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const imageProcessor = (parser: MarkdownParser) => setProcessor(parser, IMAGE, token => {
+    const { url, title } = token.data!;
+    return `<img alt="${parser.parse(token.content!)}" src="${url}"${title ? ` title="${title}"` : ''}>`
+})
+
+export const imageTokenizer = (lexer: MarkdownLexer) => setInlineTokenizer(lexer, IMAGE, {
+    regex: /^!\[(.+?)\]\((.+?)\)/,
+    handle: matches => {
+        const [_, alt, detail] = matches as [string, string, string];
+        const [__, url, title] = detail.match(/(\w\w+?:\/\/[^\s]+)(?: "(.+?)")?/) as [string, string, string];
+        return {
+            content: lexer.inlineTokenize(alt),
+            data: {
+                url, title
+            }
+        }
+    }
+})

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

@@ -0,0 +1,11 @@
+import { ITALIC } from "#lib/type";
+import { setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const italicProcessor = (parser: MarkdownParser) => setProcessor(parser, ITALIC, token => `<i>${parser.parse(token.content!)}</i>`)
+
+export const italicTokenizer = (lexer: MarkdownLexer) => setInlineTokenizer(lexer, ITALIC, {
+    regex: /\*(.+?)\*/,
+    handle: matches => ({ content: lexer.inlineTokenize(matches[1]!) })
+})

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

@@ -0,0 +1,46 @@
+import { LINK, QUICK_LINK } from "#lib/type";
+import { setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer, Token } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+import { isUndefined } from "@amateras/utils";
+
+export const linkProcessor = (parser: MarkdownParser) => {
+    const linkProcessor = (token: Token) => {
+        const {href, email, title} = token.data!;
+        return `<a href="${isUndefined(href) ? `mailto:${email}` : href}"${title ? ` title="${title}"` : ''}>${token.text ?? parser.parse(token.content!)}</a>`
+    }
+    setProcessor(parser, QUICK_LINK, linkProcessor)
+    setProcessor(parser, LINK, linkProcessor)
+}
+
+export const linkTokenizer = (lexer: MarkdownLexer) => {
+
+    setInlineTokenizer(lexer, LINK, {
+        regex: /\[(.+?)\]\(((?:\w+?@(?:\w|\.\w)+)|(?:\w\w+?:[^\s)]+))(?: "(.+)?")?\)/,
+        handle: matches => {
+            const [_, alt, detail, title] = matches as [string, string, string, string];
+            const match = detail.match(/(?:\w+?@(?:\w|\.\w)+)|(?:\w\w+?:\/\/[^\s]+)/);
+            const [resolver] = match!;
+            const email_or_href = resolver.includes('@') ? { email: resolver }: { href: resolver };
+            return {
+                content: lexer.inlineTokenize(alt),
+                data: {
+                    title, ...email_or_href
+                }
+            }
+        }
+    })
+    setInlineTokenizer(lexer, QUICK_LINK, {
+        regex: /<((?:\w+?@(?:\w|\.\w)+)|(?:\w\w+?:[^\s>]+))>/,
+        handle: matches => {
+            const [_, detail] = matches as [string, string];
+            const match = detail.match(/(?:\w+?@(?:\w|\.\w)+)|(?:\w\w+?:\/\/[^\s]+)/);
+            const [resolver] = match!;
+            const email_or_href = resolver.includes('@') ? { email: resolver }: { href: resolver };
+            return {
+                content: resolver,
+                data: email_or_href
+            }
+        }
+    })
+}

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

@@ -0,0 +1,121 @@
+import { EMPTY_LINE, ORDERED_LIST_ITEM, TEXT_LINE, UNORDERED_LIST_ITEM } from "#lib/type";
+import { htmltag, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer, Token } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+import { equal, isString } from "@amateras/utils";
+
+export const listProcessor = (parser: MarkdownParser) => {
+    const listType = (type: string) => type === ORDERED_LIST_ITEM ? 'ol' : 'ul'
+    const listProcessor = (token: Token, tokens: Token[]) => {
+        let i = 0;
+        // cache the list by deep number
+        const deepListMap = new Map<number, List>();
+
+        const listGenerator = (type: string, deep: number) => {
+            const getList = deepListMap.get(deep)
+            const list = getList && listType(type) === getList.tagname ? getList : List(listType(type), []);
+            deepListMap.set(deep, list);
+
+            while (i < tokens.length) {
+                const token = tokens[i]!;
+                const tokenType = token.type;
+                // if token type not equal list item / empty line / text line, then finish loop
+                if (!equal(tokenType, ORDERED_LIST_ITEM, UNORDERED_LIST_ITEM, EMPTY_LINE, TEXT_LINE)) { i--; break};
+                // if token type equal text line
+                if (tokenType === TEXT_LINE) {
+                    const text = token.content![0]?.text;
+                    // if text start with double space
+                    if (text?.match(/^\s\s/)) {
+                        const match = text.match(/^(\s+)(.+)?/)!;
+                        // if no content, then next token
+                        if (!match[2]) { i++; continue }
+                        token.data = { deep: Math.trunc(match[1]!.length / 2) - 1 }
+                    }
+                    // if text start with tab
+                    else if (text?.match(/^\t/)) {
+                        const match = text.match(/^(\t+)(.+)?/)!;
+                        // if no content, then next token
+                        if (!match[2]) { i++; continue }
+                        token.data = { deep: match[1]!.length - 1 }
+                    }
+                    // else break 
+                    else {i--; break};
+                }
+                // if token type equal empty line, jump to next token
+                if (tokenType === EMPTY_LINE) i++;
+                // if token deep number not equal latest deep of list
+                else if (token.data!.deep !== deep) {
+                    // if bigger, push deeper list into current list item
+                    if (token.data!.deep > deep) deepListMap.get(deep)?.items.at(-1)?.content.push(listGenerator(tokenType, token.data!.deep))
+                    // else delete current deep cache and return to upper list
+                    else { deepListMap.delete(deep); break; }
+                }
+                // if token type equal text line, convert this list to paragraph mode
+                else if (tokenType === TEXT_LINE) {
+                    list.paragraph = true;
+                    list.items.at(-1)?.content.push(parser.parse(token.content!))
+                    i++
+                }
+                // if list type not equal, then finish loop
+                else if (tokenType !== type) {
+                    deepListMap.delete(deep);
+                    break;
+                }
+                // push list item
+                else {
+                    list.items.push(ListItem([parser.parse(token.content!)]));
+                    i++
+                }
+            }
+            return list;
+        }
+
+        return {
+            html: `${listGenerator(token.type, token.data!.deep)}`,
+            skipTokens: i
+        }
+    }
+
+    interface ListItem { content: (string | List)[], toString(): string }
+    const ListItem = (content: (string | List)[]): ListItem => ({
+        content: content,
+        toString() { return htmltag('li', this.content.join('')) }
+    })
+
+    interface List { tagname: string, items: ListItem[], paragraph: boolean, toString(): string }
+    const List = (tagname: 'ul' | 'ol', items: ListItem[]): List => ({
+        tagname: tagname,
+        items: items,
+        paragraph: false,
+        toString() {
+            if (this.paragraph) this.items.forEach(item => item.content.forEach((text, i) => isString(text) && (item.content[i] = htmltag('p', text))))
+            return htmltag(this.tagname, this.items.join(''))
+        }
+    })
+
+    setProcessor(parser, UNORDERED_LIST_ITEM, listProcessor);
+    setProcessor(parser, ORDERED_LIST_ITEM, listProcessor);
+}
+
+export const listTokenizer = (lexer: MarkdownLexer) => {
+    const listHandle = (matches: RegExpMatchArray) => {
+        const prefix = matches[0].split(/[-*]/)[0]!;
+        const spaces = prefix.match(/\s/)?.length ?? 0;
+        const tabs = prefix.match(/\t/)?.length ?? 0;
+        return ({
+        content: lexer.inlineTokenize(matches[1]!),
+        data: {
+            deep: Math.trunc(tabs + spaces / 2)
+        }
+    })
+    }
+    setBlockTokenizer(lexer, UNORDERED_LIST_ITEM, {
+        regex: /^(?:[\s\t]+)?[-*] (.+)/,
+        handle: listHandle
+    })
+
+    setBlockTokenizer(lexer, ORDERED_LIST_ITEM, {
+        regex: /^(?:[\s\t]+)?\d+\. (.+)/,
+        handle: listHandle
+    })
+}

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

@@ -0,0 +1,67 @@
+import { BLOCK, TABLE, TABLE_COLUMN, TABLE_ROW } from "#lib/type";
+import { htmltag, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { BlockToken, MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+import { _Array_from } from "@amateras/utils";
+
+export const tableProcessor = (parser: MarkdownParser) => setProcessor(parser, TABLE, (token) => {
+        let thead = '';
+        let tbody = '';
+        let rowIndex = 0;
+        for (const row of token.content!) {
+            let rowHTML = '';
+            for (let i = 0; i < row.content!.length; i++) {
+                const col = row.content![i]!;
+                const align = token.data!.align[i];
+                const tagname = rowIndex === 0 ? 'th' : 'td';
+                rowHTML += `<${tagname} align="${align ?? 'left'}">${parser.parse(col.content!)}</${tagname}>`
+            }
+            if (rowIndex === 0) thead += htmltag('thead', htmltag('tr', rowHTML));
+            else tbody += htmltag('tr', rowHTML);
+            rowIndex++
+        }
+        tbody = htmltag('tbody', tbody);
+        return htmltag('table', thead + tbody)
+    })
+
+export const tableTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, TABLE, {
+        regex: /\|(?:.+\|)+/,
+        handle(_, position, lines) {
+            const tokens: BlockToken[] = [];
+            const align = []
+            while (position < lines.length) {
+                const row: BlockToken = {
+                    type: TABLE_ROW,
+                    layout: BLOCK,
+                    content: []
+                }
+                const line = lines[position]!;
+                const matches = _Array_from(line.matchAll(/\| ([^|]+)/g));
+                if (!matches.length) break;
+                for (const match of matches) {
+                    const text = match[1]!;
+                    const separator = text.match(/(:)?---+(:)?/);
+                    if (separator) {
+                        const [_, LEFT, RIGHT] = separator;
+                        align.push(RIGHT ? LEFT ? 'center' : 'right' : 'left');
+                        continue;
+                    }
+                    row.content.push({
+                        type: TABLE_COLUMN,
+                        content: lexer.inlineTokenize(text.trim()),
+                        layout: BLOCK
+                    })
+                }
+                if (row.content.length) tokens.push(row);
+                position++
+            }
+            return {
+                content: tokens,
+                data: { align },
+                multiLine: {
+                    skip: position,
+                    tokens: []
+                }
+            }
+        },
+    })

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

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

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

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

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

@@ -0,0 +1,38 @@
+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
+        :   {}
+    >