amateras 0.1.1 → 0.3.0

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

@@ -0,0 +1,169 @@
+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> {
+    /** {@link HTMLInputElement.form} */
+    readonly form: HTMLFormElement | null;
+    /** {@link HTMLInputElement.labels} */
+    readonly labels: NodeListOf<HTMLLabelElement> | null;
+    /** {@link HTMLInputElement.list} */
+    readonly list: HTMLDataListElement | null;
+    /** {@link HTMLInputElement.validationMessage} */
+    readonly validationMessage: string;
+    /** {@link HTMLInputElement.validity} */
+    readonly validity: ValidityState;
+    /** {@link HTMLInputElement.webkitEntries} */
+    readonly webkitEntries: ReadonlyArray<FileSystemEntry>;
+    /** {@link HTMLInputElement.willValidate} */
+    readonly willValidate: boolean;
+
+    /** {@link HTMLInputElement.checkValidity} */
+    checkValidity(): boolean;
+    /** {@link HTMLInputElement.reportValidity} */
+    reportValidity(): boolean;
+    /** {@link HTMLInputElement.select} */
+    select(): this;
+    /** {@link HTMLInputElement.setCustomValidity} */
+    setCustomValidity(error: string): this;
+    /** {@link HTMLInputElement.setRangeText} */
+    setRangeText(replacement: string): this;
+    setRangeText(replacement: string, start: number, end: number, selectionMode?: SelectionMode): this;
+    /** {@link HTMLInputElement.setSelectionRange} */
+    setSelectionRange(start: number | null, end: number | null, direction?: "forward" | "backward" | "none"): this;
+    /** {@link HTMLInputElement.showPicker} */
+    showPicker(): this;
+    /** {@link HTMLInputElement.stepDown} */
+    stepDown(n?: number): this;
+    /** {@link HTMLInputElement.stepUp} */
+    stepUp(n?: number): this;
+    
+    /** {@link HTMLInputElement.accept} */
+    accept(accept: $Parameter<string>): this;
+    accept(): string;
+    /** {@link HTMLInputElement.alt} */
+    alt(alt: $Parameter<string>): this;
+    alt(): string;
+    /** {@link HTMLInputElement.autoFill} */
+    autoFill(autoFill: $Parameter<AutoFill>): this;
+    autoFill(): AutoFill;
+    /** {@link HTMLInputElement.capture} */
+    capture(capture: $Parameter<string>): this;
+    capture(): string;
+    /** {@link HTMLInputElement.checked} */
+    checked(checked: $Parameter<boolean>): this;
+    checked(): boolean;
+    /** {@link HTMLInputElement.defaultChecked} */
+    defaultChecked(defaultChecked: $Parameter<boolean>): this;
+    defaultChecked(): string;
+    /** {@link HTMLInputElement.defaultValue} */
+    defaultValue(defaultValue: $Parameter<string>): this;
+    defaultValue(): string;
+    /** {@link HTMLInputElement.dirName} */
+    dirName(dirName: $Parameter<string>): this;
+    dirName(): string;
+    /** {@link HTMLInputElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLInputElement.files} */
+    files(files: $Parameter<FileList | null>): this;
+    files(): string;
+    /** {@link HTMLInputElement.formAction} */
+    formAction(formAction: $Parameter<string>): this;
+    formAction(): string;
+    /** {@link HTMLInputElement.formEnctype} */
+    formEnctype(formEnctype: $Parameter<string>): this;
+    formEnctype(): string;
+    /** {@link HTMLInputElement.formMethod} */
+    formMethod(formMethod: $Parameter<string>): this;
+    formMethod(): string;
+    /** {@link HTMLInputElement.formNoValidate} */
+    formNoValidate(formNoValidate: $Parameter<boolean>): this;
+    formNoValidate(): boolean;
+    /** {@link HTMLInputElement.formTarget} */
+    formTarget(formTarget: $Parameter<string>): this;
+    formTarget(): string;
+    /** {@link HTMLInputElement.height} */
+    height(height: $Parameter<number>): this;
+    height(): number;
+    /** {@link HTMLInputElement.indeterminate} */
+    indeterminate(indeterminate: $Parameter<boolean>): this;
+    indeterminate(): boolean;
+    /** {@link HTMLInputElement.max} */
+    max(max: $Parameter<string>): this;
+    max(): string;
+    /** {@link HTMLInputElement.maxLength} */
+    maxLength(maxLength: $Parameter<number>): this;
+    maxLength(): number;
+    /** {@link HTMLInputElement.min} */
+    min(min: $Parameter<string>): this;
+    min(): string;
+    /** {@link HTMLInputElement.minLength} */
+    minLength(minLength: $Parameter<string>): this;
+    minLength(): string;
+    /** {@link HTMLInputElement.multiple} */
+    multiple(multiple: $Parameter<boolean>): this;
+    multiple(): boolean;
+    /** {@link HTMLInputElement.name} */
+    name(name: $Parameter<string>): this;
+    name(): string;
+    /** {@link HTMLInputElement.pattern} */
+    pattern(pattern: $Parameter<string>): this;
+    pattern(): string;
+    /** {@link HTMLInputElement.placeholder} */
+    placeholder(placeholder: $Parameter<string>): this;
+    placeholder(): string;
+    /** {@link HTMLInputElement.readOnly} */
+    readOnly(readOnly: $Parameter<boolean>): this;
+    readOnly(): boolean;
+    /** {@link HTMLInputElement.required} */
+    required(required: $Parameter<boolean>): this;
+    required(): boolean;
+    /** {@link HTMLInputElement.selectionDirection} */
+    selectionDirection(selectionDirection: $Parameter<'forward' | 'backward' | 'none' | null>): this;
+    selectionDirection(): 'forward' | 'backward' | 'none' | null;
+    /** {@link HTMLInputElement.selectionEnd} */
+    selectionEnd(selectionEnd: $Parameter<number | null>): this;
+    selectionEnd(): number | null;
+    /** {@link HTMLInputElement.selectionStart} */
+    selectionStart(selectionStart: $Parameter<number>): this;
+    selectionStart(): number;
+    /** {@link HTMLInputElement.size} */
+    size(size: $Parameter<number>): this;
+    size(): number;
+    /** {@link HTMLInputElement.src} */
+    src(src: $Parameter<string>): this;
+    src(): string;
+    /** {@link HTMLInputElement.step} */
+    step(step: $Parameter<string>): this;
+    step(): string;
+    /** {@link HTMLInputElement.type} */
+    type(type: $Parameter<string>): this;
+    type(): string;
+    /** {@link HTMLInputElement.value} */
+    value(value: $Parameter<string>): this;
+    value(): string;
+    /** {@link HTMLInputElement.valueAsDate} */
+    valueAsDate(valueAsDate: $Parameter<Date | null>): this;
+    valueAsDate(): Date | null;
+    /** {@link HTMLInputElement.valueAsNumber} */
+    valueAsNumber(valueAsNumber: $Parameter<number>): this;
+    valueAsNumber(): number;
+    /** {@link HTMLInputElement.webkitdirectory} */
+    webkitdirectory(webkitdirectory: $Parameter<boolean>): this;
+    webkitdirectory(): boolean;
+    /** {@link HTMLInputElement.width} */
+    width(width: $Parameter<number>): this;
+    width(): number;
+}
+
+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,23 @@
+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> {
+    /** {@link HTMLOptGroupElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLOptGroupElement.label} */
+    label(label: $Parameter<string>): this;
+    label(): string;
+}
+
+assignHelper(HTMLOptGroupElement, $OptGroup, 'optgroup');
+
+declare module '#core' {
+    export function $(nodeName: 'optgroup'): $OptGroup
+}

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

@@ -0,0 +1,40 @@
+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> {
+    /** {@link HTMLOptionElement.form} */
+    readonly form: HTMLFormElement | null;
+    /** {@link HTMLOptionElement.index} */
+    readonly index: number;
+
+    /** {@link HTMLOptionElement.defaultSelected} */
+    defaultSelected(defaultSelected: $Parameter<boolean>): this;
+    defaultSelected(): boolean;
+    /** {@link HTMLOptionElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLOptionElement.label} */
+    label(label: $Parameter<string>): this;
+    label(): string;
+    /** {@link HTMLOptionElement.selected} */
+    selected(selected: $Parameter<boolean>): this;
+    selected(): boolean;
+    /** {@link HTMLOptionElement.text} */
+    text(text: $Parameter<string>): this;
+    text(): string;
+    /** {@link HTMLOptionElement.value} */
+    value(value: $Parameter<string>): this;
+    value(): string;
+}
+
+assignHelper(HTMLOptionElement, $Option, 'option');
+
+declare module '#core' {
+    export function $(nodeName: 'option'): $Option
+}

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

@@ -0,0 +1,76 @@
+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> {
+    /** {@link HTMLSelectElement.form} */
+    readonly form: HTMLFormElement | null;
+    /** {@link HTMLSelectElement.labels} */
+    readonly labels: NodeListOf<HTMLLabelElement>;
+    /** {@link HTMLSelectElement.options} */
+    readonly options: HTMLOptionsCollection;
+    /** {@link HTMLSelectElement.selectedOptions} */
+    readonly selectedOptions: HTMLCollectionOf<HTMLOptionElement>;
+    /** {@link HTMLSelectElement.type} */
+    readonly type: "select-one" | "select-multiple";
+    /** {@link HTMLSelectElement.validationMessage} */
+    readonly validationMessage: string;
+    /** {@link HTMLSelectElement.validity} */
+    readonly validity: ValidityState;
+    /** {@link HTMLSelectElement.willValidate} */
+    readonly willValidate: boolean;
+
+    /** {@link HTMLSelectElement.autocomplete} */
+    autocomplete(autocomplete: $Parameter<AutoFill>): this;
+    autocomplete(): AutoFill;
+    /** {@link HTMLSelectElement.disabled} */
+    disabled(disabled: $Parameter<boolean>): this;
+    disabled(): boolean;
+    /** {@link HTMLSelectElement.length} */
+    length(length: $Parameter<number>): this;
+    length(): number;
+    /** {@link HTMLSelectElement.multiple} */
+    multiple(multiple: $Parameter<boolean>): this;
+    multiple(): boolean;
+    /** {@link HTMLSelectElement.name} */
+    name(name: $Parameter<string>): this;
+    name(): string;
+    /** {@link HTMLSelectElement.required} */
+    required(required: $Parameter<boolean>): this;
+    required(): boolean;
+    /** {@link HTMLSelectElement.selectedIndex} */
+    selectedIndex(selectedIndex: $Parameter<number>): this;
+    selectedIndex(): number;
+    /** {@link HTMLSelectElement.size} */
+    size(size: $Parameter<number>): this;
+    size(): number;
+    /** {@link HTMLSelectElement.value} */
+    value(value: $Parameter<string>): this;
+    value(): string;
+
+    /** {@link HTMLSelectElement.add} */
+    add(element: HTMLOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): this;
+    /** {@link HTMLSelectElement.checkValidity} */
+    checkValidity(): boolean;
+    /** {@link HTMLSelectElement.item} */
+    item(index: number): HTMLOptionElement | null;
+    /** {@link HTMLSelectElement.namedItem} */
+    namedItem(name: string): HTMLOptionElement | null;
+    /** {@link HTMLSelectElement.reportValidity} */
+    reportValidity(): boolean;
+    /** {@link HTMLSelectElement.setCustomValidity} */
+    setCustomValidity(error: string): this;
+    /** {@link HTMLSelectElement.showPicker} */
+    showPicker(): this;
+}
+
+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,66 @@
+import type { AnchorTarget } from "#html/$Anchor";
+import { _Object_assign, forEach } 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";
+export * from "./node/RouterAnchor";
+
+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, target: AnchorTarget): 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
+forEach([
+    `router{display:block}`,
+    `page{display:block}`
+], 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: {}}, page?: Page) {
+        page = 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;
+    }
+}