amateras 0.1.0 → 0.2.0

package/README.md

@@ -83,8 +83,9 @@ $(document.body).content([
 ```
 
 ## Packages
-|-|-|
-|Package name|Size|Size(gzip)|Description|
-|amateras|5.51 kB|2.33 kB|Core
-|amateras/html|0.66 kB|0.28 kB|Import HTMLElement types and methods|
-|[amateras/css](./ext/css/README.md)|3.73 kB|1.4 kB|Style in JS|
+| Package name | Size | Size(gzip) | Description |
+| --- | --- | --- | --- |
+| amateras | 5.50 kB | 2.26 kB | Core |
+| amateras/html | 0.97 kB | 0.26 kB | Import HTMLElement types and methods |
+| [amateras/css](./ext/css/README.md) | 3.45 kB | 1.29 kB | Style in JS |
+| [amateras/router](./ext/router/README.md) | 2.92 kB | 1.27 kB | Amateras Router |

package/ext/css/src/index.ts

@@ -18,7 +18,6 @@ declare module 'amateras/core' {
             export function variables(value: string): $CSSVariable;
             export function variables<T extends $CSSVariableType>(options: T, conditions?: $CSSVariableConditionType<T>): { [key in keyof T]: $CSSVariable }
             export function keyframes<T extends { [key: string]: $CSSKeyframesType }>(options: T): { [key in keyof T]: $CSSKeyframesRule };
-            export const stylesheet: CSSStyleSheet;
         }
     }
 }
@@ -37,8 +36,7 @@ function generateId(lettercase?: 'any' | 'lower' | 'upper'): string {
     return id;
 }
 
-const stylesheet = new CSSStyleSheet();
-document.adoptedStyleSheets.push(stylesheet);
+const stylesheet = $.stylesheet;
 
 function processCSSOptions<T extends $CSSStyleRule | $CSSKeyframeRule>(
     rule: T, 
@@ -90,8 +88,9 @@ function createKeyframesRule(name: string, options: $CSSKeyframesType) {
 function insertRule(rule: $CSSRule, recursive = false) {
     if (_instanceof(rule, $CSSStyleRule) && !CSS.supports(`selector(${rule.selector})`)) return rule;
     stylesheet.insertRule(rule.css, stylesheet.cssRules.length);
-    if (!_instanceof(rule, $CSSMediaRule)) rule.rules.forEach(rule => insertRule(rule))
-    else if (!recursive) rule.mediaRules.forEach(rule => insertRule(rule, true))
+    if (_instanceof(rule, $CSSKeyframesRule)) return rule;
+    if (!_instanceof(rule, $CSSMediaRule)) rule.rules.forEach(rule => insertRule(rule));
+    else if (!recursive) rule.mediaRules.forEach(rule => insertRule(rule, true));
     return rule;
 }
 
@@ -111,7 +110,6 @@ _Object_assign($, {
 })
 
 _Object_assign($.css, {
-    stylesheet: stylesheet,
     variables<T extends $CSSVariableType | string>(options: T, conditions?: $CSSVariableConditionType<T>) {
         if (isObject(options)) {
             const variables = _Object_fromEntries(_Object_entries(options).map(([key, value]) => [

package/ext/css/src/structure/$CSSKeyframeRule.ts

@@ -1,4 +1,5 @@
 import { $CSSStyleRule } from "#structure/$CSSStyleRule";
+import { _Array_from } from "../../../../src/lib/native";
 
 export class $CSSKeyframeRule extends $CSSStyleRule {
     keyframe: string
@@ -8,6 +9,6 @@ export class $CSSKeyframeRule extends $CSSStyleRule {
     }
 
     get css(): string {
-        return `${this.keyframe} { ${Array.from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
+        return `${this.keyframe} { ${_Array_from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
     }
 }

package/ext/css/src/structure/$CSSKeyframesRule.ts

@@ -1,4 +1,5 @@
 import { $CSSRule } from "#structure/$CSSRule";
+import { _Array_from } from "../../../../src/lib/native";
 
 export class $CSSKeyframesRule extends $CSSRule {
     name: string;
@@ -12,6 +13,6 @@ export class $CSSKeyframesRule extends $CSSRule {
     }
 
     get css() {
-        return `@keyframes ${this.name} { ${Array.from(this.rules).map(rule => rule.css).join(' ')} }`
+        return `@keyframes ${this.name} { ${_Array_from(this.rules).map(rule => rule.css).join(' ')} }`
     }
 }

package/ext/html/html.ts

@@ -1,59 +1,25 @@
 import '#core';
-import { $Node } from '#node/$Node';
-import { $HTMLElement } from './node/$HTMLElement';
-import './node/type';
-import { assignHelper } from '#lib/assignHelper';
-export * from './node/type';
-export * from './node/$HTMLElement';
-
-// create element classes
-export const [
-    $Input,
-    $Anchor,
-    $Image,
-    $Canvas,
-    $Dialog,
-    $Form,
-    $Label,
-    $Media,
-    $Select,
-    $Option,
-    $OptGroup,
-    $TextArea,
-] = [
-    $HTMLElementBuilder<HTMLInputElement>('input'),
-    $HTMLElementBuilder<HTMLAnchorElement>('a'),
-    $HTMLElementBuilder<HTMLImageElement>('img'),
-    $HTMLElementBuilder<HTMLCanvasElement>('canvas'),
-    $HTMLElementBuilder<HTMLDialogElement>('dialog'),
-    $HTMLElementBuilder<HTMLFormElement>('form'),
-    $HTMLElementBuilder<HTMLLabelElement>('label'),
-    $HTMLElementBuilder<HTMLMediaElement>('media'),
-    $HTMLElementBuilder<HTMLSelectElement>('select'),
-    $HTMLElementBuilder<HTMLOptionElement>('option'),
-    $HTMLElementBuilder<HTMLOptGroupElement>('optgroup'),
-    $HTMLElementBuilder<HTMLTextAreaElement>('textarea'),
-]
-
-const targets: [object: Constructor<Node>, target: Constructor<$Node>, tagname?: string][] = [
-    [HTMLElement, $HTMLElement],
-    [HTMLInputElement, $Input, 'input'],
-    [HTMLAnchorElement, $Anchor, 'a'],
-    [HTMLImageElement, $Image, 'img'],
-    [HTMLCanvasElement, $Canvas, 'canvas'],
-    [HTMLDialogElement, $Dialog, 'dialog'],
-    [HTMLFormElement, $Form, 'form'],
-    [HTMLLabelElement, $Label, 'label'],
-    [HTMLMediaElement, $Media, 'media'],
-    [HTMLSelectElement, $Select, 'select'],
-    [HTMLOptionElement, $Option, 'option'],
-    [HTMLOptGroupElement, $OptGroup, 'optgroup'],
-    [HTMLTextAreaElement, $TextArea, 'textarea'],
-];
-assignHelper(targets);
-
-function $HTMLElementBuilder<Ele extends HTMLElement>(tagName: string) {
-    return class extends $HTMLElement<Ele> {
-        constructor() { super(tagName) }
-    } 
-}
+import './node/$Anchor';
+import './node/$Dialog';
+import './node/$Form';
+import './node/$Image';
+import './node/$Canvas';
+import './node/$Input';
+import './node/$Label';
+import './node/$Media';
+import './node/$OptGroup';
+import './node/$Option';
+import './node/$Select';
+import './node/$TextArea';
+export * from './node/$Anchor';
+export * from './node/$Canvas';
+export * from './node/$Dialog';
+export * from './node/$Form';
+export * from './node/$Image';
+export * from './node/$Input';
+export * from './node/$Label';
+export * from './node/$Media';
+export * from './node/$OptGroup';
+export * from './node/$Option';
+export * from './node/$Select';
+export * from './node/$TextArea';

package/ext/html/node/$Anchor.ts

@@ -0,0 +1,19 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Anchor extends $HTMLElement<HTMLAnchorElement> {
+    constructor() {
+        super('a')
+    }
+}
+
+export interface $Anchor extends $HTMLElement<HTMLAnchorElement> {
+    href(href: string): this;
+    href(): string;
+}
+
+declare module '#core' {
+    export function $(nodeName: 'a'): $Anchor
+}
+
+assignHelper(HTMLAnchorElement, $Anchor, 'a');

package/ext/html/node/$Canvas.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
+    constructor() {
+        super('canvas')
+    }
+}
+
+export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {}
+
+assignHelper(HTMLCanvasElement, $Canvas, 'canvas');
+
+declare module '#core' {
+    export function $(nodeName: 'canvas'): $Canvas
+}

package/ext/html/node/$Dialog.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Dialog extends $HTMLElement<HTMLDialogElement> {
+    constructor() {
+        super('dialog')
+    }
+}
+
+export interface $Dialog extends $HTMLElement<HTMLDialogElement> {}
+
+assignHelper(HTMLDialogElement, $Dialog, 'dialog');
+
+declare module '#core' {
+    export function $(nodeName: 'dialog'): $Dialog
+}

package/ext/html/node/$Form.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Form extends $HTMLElement<HTMLFormElement> {
+    constructor() {
+        super('form')
+    }
+}
+
+export interface $Form extends $HTMLElement<HTMLFormElement> {}
+
+assignHelper(HTMLFormElement, $Form, 'form');
+
+declare module '#core' {
+    export function $(nodeName: 'form'): $Form
+}

package/ext/html/node/$Image.ts

@@ -0,0 +1,19 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Image extends $HTMLElement<HTMLImageElement> {
+    constructor() {
+        super('img')
+    }
+}
+
+export interface $Image extends $HTMLElement<HTMLImageElement> {
+    src(src: string): this;
+    src(): string;
+}
+
+assignHelper(HTMLImageElement, $Image, 'img');
+
+declare module '#core' {
+    export function $(nodeName: 'img'): $Image
+}

package/ext/html/node/$Input.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Input extends $HTMLElement<HTMLInputElement> {
+    constructor() {
+        super('input')
+    }
+}
+
+export interface $Input extends $HTMLElement<HTMLInputElement> {}
+
+assignHelper(HTMLInputElement, $Input, 'input');
+
+declare module '#core' {
+    export function $(nodeName: 'input'): $Input
+}

package/ext/html/node/$Label.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Label extends $HTMLElement<HTMLLabelElement> {
+    constructor() {
+        super('label')
+    }
+}
+
+export interface $Label extends $HTMLElement<HTMLLabelElement> {}
+
+assignHelper(HTMLLabelElement, $Label, 'label');
+
+declare module '#core' {
+    export function $(nodeName: 'label'): $Label
+}

package/ext/html/node/$Media.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Media extends $HTMLElement<HTMLMediaElement> {
+    constructor() {
+        super('media')
+    }
+}
+
+export interface $Media extends $HTMLElement<HTMLMediaElement> {}
+
+assignHelper(HTMLMediaElement, $Media, 'media');
+
+declare module '#core' {
+    export function $(nodeName: 'media'): $Media
+}

package/ext/html/node/$OptGroup.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $OptGroup extends $HTMLElement<HTMLOptGroupElement> {
+    constructor() {
+        super('optgroup')
+    }
+}
+
+export interface $OptGroup extends $HTMLElement<HTMLOptGroupElement> {}
+
+assignHelper(HTMLOptGroupElement, $OptGroup, 'optgroup');
+
+declare module '#core' {
+    export function $(nodeName: 'optgroup'): $OptGroup
+}

package/ext/html/node/$Option.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Option extends $HTMLElement<HTMLOptionElement> {
+    constructor() {
+        super('option')
+    }
+}
+
+export interface $Option extends $HTMLElement<HTMLOptionElement> {}
+
+assignHelper(HTMLOptionElement, $Option, 'option');
+
+declare module '#core' {
+    export function $(nodeName: 'option'): $Option
+}

package/ext/html/node/$Select.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $Select extends $HTMLElement<HTMLSelectElement> {
+    constructor() {
+        super('select')
+    }
+}
+
+export interface $Select extends $HTMLElement<HTMLSelectElement> {}
+
+assignHelper(HTMLSelectElement, $Select, 'select');
+
+declare module '#core' {
+    export function $(nodeName: 'select'): $Select
+}

package/ext/html/node/$TextArea.ts

@@ -0,0 +1,16 @@
+import { assignHelper } from "#lib/assignHelper";
+import { $HTMLElement } from "#node/$HTMLElement";
+
+export class $TextArea extends $HTMLElement<HTMLTextAreaElement> {
+    constructor() {
+        super('textarea')
+    }
+}
+
+export interface $TextArea extends $HTMLElement<HTMLTextAreaElement> {}
+
+assignHelper(HTMLTextAreaElement, $TextArea, 'textarea');
+
+declare module '#core' {
+    export function $(nodeName: 'textarea'): $TextArea
+}

package/ext/router/README.md

@@ -0,0 +1,81 @@
+# amateras/router
+
+## Usage
+```ts
+import 'amateras';
+import 'amateras/router';
+```
+
+## Create Route Map
+```ts
+// create home page route
+const HomePage = $('route', '/', page => page
+    .pageTitle('Home')
+    .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
+])
+```
+
+## 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.
+
+## Path Parameter and Query
+```ts
+$('router')
+.route('/user/@:username', page => {
+    console.log(page.params)
+})
+.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: '' }
+```
+
+## Nesting Route
+```ts
+const ContactPage = $('route', '/contact', page => page
+    .pageTitle('Home')
+    .content([
+        $('h1').content('Contact'),
+        // append router with page, nested routes will show in this router
+        $('router', page)
+    ])
+)
+
+const ContactEmailPage = $('route', '/contact/email', () => 'amateras@example.com')
+
+$('router')
+.route('/', HomePage)
+.route('/contact', ContactPage, route => route
+    .route('/', () => 'My name is Amateras.')
+    .route('/phone', () => '0123456789')
+    .route('/email', ContactEmailPage)
+)
+```
+
+## Async Route
+```ts
+$('router')
+.route('/about', () => import('./pages/about.ts'))
+```

package/ext/router/index.ts

@@ -0,0 +1,64 @@
+import { _Object_assign } from "#lib/native";
+import type { $NodeContentResolver } from "#node/$Node";
+import type { Page } from "./node/Page";
+import { Route } from "./node/Route";
+import { Router } from "./node/Router";
+import { RouterAnchor } from "./node/RouterAnchor";
+export * from "./node/Route";
+export * from "./node/Router";
+export * from "./node/Page";
+
+declare module 'amateras/core' {
+    export function $<P extends string>(nodeName: 'route', path: P, builder: RouteBuilder<Route<P>, RouteDataResolver<P>>): Route<P>;
+    export function $(nodeName: 'router', page?: Page<any>): Router;
+    export function $(nodeName: 'ra'): RouterAnchor;
+    export namespace $ {
+        export function open(url: string | URL | Nullish): typeof Router;
+        export function replace(url: string | URL | Nullish): typeof Router;
+        export function back(): typeof Router;
+        export function forward(): typeof Router;
+    }
+}
+// assign methods
+_Object_assign($, {
+    open: Router.open.bind(Router),
+    replace: Router.replace.bind(Router),
+    back: Router.back.bind(Router),
+    forward: Router.forward.bind(Router)
+});
+// define styles
+[
+    `router{display:block}`,
+    `page{display:block}`
+].forEach(rule => $.stylesheet.insertRule(rule));
+// assign nodes
+$.assign([
+    ['router', Router],
+    ['route', Route],
+    ['ra', RouterAnchor]
+])
+
+export type RouteData = { params: any, query: any }
+export type RouteDataResolver<P extends string> = { params: Prettify<PathParams<P>>, query: Prettify<PathQuery<P>> }
+export type AsyncRoute<P extends string> = () => Promise<{default: Route<P>}>
+export type RouteBuilder<R extends Route<any>, D extends RouteData> = (page: Page<R, D>) => OrPromise<$NodeContentResolver<Page<R, D>>>;
+
+type PathParams<Path> = Path extends `${infer Segment}/${infer Rest}`
+    ? Segment extends `${string}:${infer Param}` 
+        ? Record<Param, string> & PathParams<Rest> 
+        : PathParams<Rest>
+    : Path extends `${string}:${infer Param}?${infer Query}`
+        ? Record<Param, string> 
+    : Path extends `${string}:${infer Param}` 
+        ? Record<Param, string> 
+        : {}
+
+type PathQuery<Path> = Path extends `${string}?${infer Segment}`
+    ? PathQuery_SetRecord<Segment>
+    : Path extends `&${infer Segment}`
+        ? PathQuery_SetRecord<Segment>
+        : {}
+
+type PathQuery_SetRecord<Segment extends string> = Segment extends `${infer Param}&${infer Rest}` 
+    ? Record<Param, string> & PathQuery<`&${Rest}`>
+    : Record<Segment, string>

package/ext/router/node/Page.ts

@@ -0,0 +1,27 @@
+import { isUndefined } from "#lib/native";
+import { $HTMLElement } from "#node/$HTMLElement";
+import type { RouteData } from "..";
+import type { Route } from "./Route";
+
+export class Page<R extends Route<any> = any, Data extends RouteData = any> extends $HTMLElement {
+    route: R;
+    page: this;
+    params: Data['params'];
+    query: Data['query'];
+    #pageTitle: null | string = null;
+    constructor(route: R, data?: {params: any, query: any}) {
+        super('page');
+        this.route = route;
+        this.page = this;
+        this.params = data?.params ?? {};
+        this.query = data?.query ?? {};
+    }
+
+    pageTitle(): string | null;
+    pageTitle(title: string | null): this;
+    pageTitle(title?: string | null) {
+        if (!arguments.length) return this.#pageTitle;
+        if (!isUndefined(title)) this.#pageTitle = title;
+        return this;
+    }
+}

package/ext/router/node/Route.ts

@@ -0,0 +1,53 @@
+import { _instanceof, _Object_fromEntries, _Array_from } from "#lib/native";
+import { $Element } from "#node/node";
+import type { AsyncRoute, RouteBuilder, RouteDataResolver } from "..";
+import { Page } from "./Page";
+
+export abstract class BaseRouteNode<Path extends string = string> extends $Element {
+    readonly path: Path;
+    routes = new Map<string, Route<any>>()
+    parent: BaseRouteNode<any> | null = null;
+    builder: RouteBuilder<Route<Path>, RouteDataResolver<Path>> | AsyncRoute<Path>
+    constructor(path: Path, builder: RouteBuilder<Route<Path>, RouteDataResolver<Path>> | AsyncRoute<Path>, nodeName: string) {
+        super(nodeName);
+        this.path = path;
+        this.builder = builder;
+    }
+
+    route<P extends string, J extends `${Path}${P}`>(
+        path: P, 
+        resolver: RouteBuilder<Route<J>, RouteDataResolver<J>> | Route<J> | AsyncRoute<J>, 
+        fn?: (route: Route<J>) => Route<J>
+    ) {
+        const fullPath = `${this.path}${path}`;
+        if (_instanceof(resolver, Route) && fullPath !== resolver.path) throw `Pathname not matched: ${path}`
+        const route = resolver instanceof Route ? resolver : new Route(fullPath as J, resolver);
+        route.parent = this;
+        fn && fn(route);
+        this.routes.set(path, route);
+        return this;
+    }
+}
+
+export class Route<Path extends string = string> extends BaseRouteNode<Path> {
+    constructor(path: Path, builder: RouteBuilder<Route<Path>, RouteDataResolver<Path>> | AsyncRoute<Path>) {
+        super(path, builder, 'route');
+    }
+
+    async build(data: {params: any, query: any} = {params: {}, query: {}}) {
+        const page = new Page(this, data);
+        page.params = data.params;
+        let resolver: any = this.builder(page);
+        if (_instanceof(resolver, Promise)) {
+            const result = await resolver as any;
+            // Module import
+            if (result[Symbol.toStringTag] === 'Module') {
+                page.route = this;
+                resolver = result.default.builder(page);
+            }
+            else resolver = result;
+        }
+        if (!_instanceof(resolver, Page)) page.content(resolver);
+        return page;
+    }
+}