amateras 0.4.2 → 0.6.0

package/ext/markdown/src/syntax/alert.ts

@@ -0,0 +1,46 @@
+import { ALERT, ALERT_LINE, BLOCK } from "#lib/type";
+import { setBlockTokenizer, setProcessor } from "#lib/util";
+import type { BlockToken, MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+import { uppercase } from "amateras/lib/uppercase";
+
+export const alertProcessor = (parser: MarkdownParser) => setProcessor(parser, ALERT, (token, tokens) => {
+    let html = '';
+    let i = 1;
+    while (i < tokens.length) {
+        const token = tokens[i]!;
+        if (token.type !== ALERT_LINE) break;
+        html += parser.parse(token.content![0]!.content!);
+        i++;
+    }
+    const alertType = token.data?.alertType as string;
+    return {
+        html: `<blockquote class="alert alert-${alertType}"><p class="alert-title">${uppercase(alertType, 0, 1)}</p>${html}</blockquote>`,
+        skipTokens: i
+    }
+})
+
+export const alertTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, ALERT, {
+    regex: /^> ?\[!(?:(?:NOTE)|(?:TIP)|(?:IMPORTANT)|(?:WARNING)|(?:CAUTION))\]/,
+    handle(_, position, lines) {
+        const tokens: BlockToken[] = [];
+        const match = lines[position]!.match(/> ?\[!(.+?)\]/);
+        const alertType = match?.[1]?.toLowerCase();
+        position++
+        while (position < lines.length) {
+            const line = lines[position]!;
+            const match = line.match(/^> ?(.+)/);
+            if (match) tokens.push({ layout: BLOCK, type: ALERT_LINE, content: lexer.blockTokenize(match[1]!) });
+            else break;
+            position++;
+        }
+        return {
+            content: [],
+            data: { alertType },
+            multiLine: {
+                skip: position,
+                tokens
+            }
+        }
+    },
+})

package/ext/markdown/src/syntax/blockquote.ts

@@ -0,0 +1,35 @@
+import { BLOCKQUOTE } from "#lib/type";
+import { htmltag, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const blockquoteProcessor = (parser: MarkdownParser) => setProcessor(parser, BLOCKQUOTE, (token, tokens) => {
+        let i = 0;
+        const blockquote = (deep: number) => {
+            let html = '';
+            while (i < tokens.length) {
+                const {type, content, data} = tokens[i]!;
+                if (type !== BLOCKQUOTE) break;
+                if (data!.deep > deep) html += blockquote(data!.deep);
+                else if (data!.deep < deep) break;
+                else { html += parser.parse(content!); i++ }
+            }
+            return htmltag('blockquote', html)
+        }
+        return {
+            html: blockquote(token.data!.deep),
+            skipTokens: i
+        }
+    })
+
+export const blockquoteTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, BLOCKQUOTE, {
+        regex: /^(>+) ?(.+)?/,
+        handle(matches) {
+            return {
+                content: lexer.blockTokenize(matches[2] ?? ''),
+                data: {
+                    deep: (matches[1]!.length - 1)
+                }
+            }
+        }
+    })

package/ext/markdown/src/syntax/bold.ts

@@ -0,0 +1,11 @@
+import { BOLD } from "#lib/type";
+import { htmltag, setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const boldProcessor = (parser: MarkdownParser) => setProcessor(parser, BOLD, token => htmltag('b', parser.parse(token.content!)))
+
+export const boldTokenizer = (lexer: MarkdownLexer) => setInlineTokenizer(lexer, BOLD, {
+        regex: /\*\*(.+?\*?)\*\*/,
+        handle: matches => ({ content: lexer.inlineTokenize(matches[1]!) })
+    })

package/ext/markdown/src/syntax/code.ts

@@ -0,0 +1,11 @@
+import { CODE } from "#lib/type";
+import { htmlEscapeChar, htmltag, setInlineTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const codeProcessor = (parser: MarkdownParser) => setProcessor(parser, CODE, token => htmltag('code', htmlEscapeChar(token.text!)))
+
+export const codeTokenizer = (lexer: MarkdownLexer) => setInlineTokenizer(lexer, CODE, {
+    regex: /`(.+?)`/,
+    handle: matches => ({ content: matches[1]! })
+})

package/ext/markdown/src/syntax/codeblock.ts

@@ -0,0 +1,44 @@
+import { BLOCK, CODE_END, CODE_LINE, CODE_START } from "#lib/type";
+import { htmlEscapeChar, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { BlockToken, MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const codeblockProcessor = (parser: MarkdownParser) => setProcessor(parser, CODE_START, (token, tokens) => {
+        let html = '';
+        let i = 1;
+        while (i < tokens.length) {
+            const token = tokens[i]!;
+            if (token.type === CODE_END) break;
+            html += token.content![0]!.text;
+            i++;
+        }
+        return {
+            html: `<pre><code${token.data?.lang ? ` lang="${token.data.lang}"` : ''}>${htmlEscapeChar(html)}</code></pre>`,
+            skipTokens: i
+        }
+    })
+
+export const codeblockTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, CODE_START, {
+    regex: /^```(\w+)/,
+    handle: (matches, position, lines) => {
+        const tokens: BlockToken[] = [];
+        position++;
+        while (position < lines.length) {
+            const line = lines[position]!;
+            position++;
+            if (line.includes('```')) {
+                tokens.push({ layout: BLOCK, type: CODE_END, content: [] })
+                break;
+            }
+            tokens.push({ layout: BLOCK, type: CODE_LINE, content: [{ layout: "INLINE_TEXT", type: 'CODE_TEXT', text: `${line}\n` }] });
+        }
+        return {
+            content: [],
+            data: { lang: matches[1] },
+            multiLine: {
+                skip: position,
+                tokens
+            }
+        }
+    }
+})

package/ext/markdown/src/syntax/heading.ts

@@ -0,0 +1,14 @@
+import { HEADING } from "#lib/type";
+import { htmltag, setBlockTokenizer, setProcessor } from "#lib/util";
+import type { MarkdownLexer } from "#structure/MarkdownLexer";
+import type { MarkdownParser } from "#structure/MarkdownParser";
+
+export const headingProcessor = (parser: MarkdownParser) => setProcessor(parser, HEADING, token => {
+    const tagname = `h${token.data!.level}`;
+    return htmltag(tagname, parser.parse(token.content!))
+})
+
+export const headingTokenizer = (lexer: MarkdownLexer) => setBlockTokenizer(lexer, HEADING, {
+    regex: /^(#+) (.+)/,
+    handle: matches => ({ content: lexer.inlineTokenize(matches[2]!), data: { level: matches[1]!.length } })
+})

package/ext/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/ext/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/ext/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/ext/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/lib/native";
+
+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}"` : ''}>${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/ext/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/lib/native";
+
+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/ext/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/lib/native";
+
+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/ext/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/ext/router/README.md

@@ -9,8 +9,8 @@ import 'amateras/router';
 ## Create Route Map
 ```ts
 // create home page route
-const HomePage = $('route', '/', page => page
-    .pageTitle('Home')
+const HomePage = $.route(page => page
+    .pageTitle('Home | My Site') // set window title
     .content([
         $('h1').content('Home')
     ])
@@ -24,6 +24,9 @@ $(document.body).content([
 ])
 ```
 
+> [!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
@@ -36,46 +39,137 @@ $('ra').content('Contact').href('/contact');
 - `$.forward()`: Forward page.
 - `$.back()`: Back page.
 
-## Path Parameter and Query
+## 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)
+    console.log(page.params.username);
+    return page;
 })
-.route('/posts?search'), page => {
-    console.log(page.query)
-}
 .listen()
 // simulate page open
-.resolve('/user/@amateras') // { username: 'amateras' }
-.resolve('/posts"') // { }
-.resolve('/posts?search=tsukimi&user') // { search: 'tsukimi', user: '' }
+.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', '/contact', page => page
+const ContactPage = $.route(page => page
     .pageTitle('Home')
     .content([
         $('h1').content('Contact'),
-        // append router with page, nested routes will show in this router
-        $('router', page)
+        $('router', page) 
+        // here is the magic happened,
+        // pass the Page into router arguments
     ])
 )
+```
 
-const ContactEmailPage = $('route', '/contact/email', () => 'amateras@example.com')
+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')
-    .route('/email', ContactEmailPage)
 )
 ```
 
-## Async Route
+### Alias Path
+
+Sometime, the page doesn't have just one path. We can declare the alias paths to one route!
+
 ```ts
 $('router')
-.route('/about', () => import('./pages/about.ts'))
+.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/ext/router/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "@amateras/router",
+    "peerDependencies": {
+        "amateras": "../../"
+    },
+    "imports": {
+      "#node/*": "./src/node/*.ts",
+      "#structure/*": "./src/structure/*.ts"
+    }
+}