amateras 0.4.2 → 0.6.0

package/ext/i18n/src/node/I18nText.ts

@@ -1,35 +0,0 @@
-import { _Array_from, isUndefined } from "amateras/lib/native";
-import { $HTMLElement } from "amateras/node/$HTMLElement";
-import type { I18n } from "#structure/I18n";
-
-export class I18nText extends $HTMLElement<HTMLElement, { i18nupdate: Event }> {
-    i18n: I18n;
-    key: string;
-    options: I18nTextOptions | undefined;
-    constructor(i18n: I18n, key: string, options?: I18nTextOptions) {
-        super('text');
-        this.i18n = i18n;
-        this.key = key;
-        this.options = options;
-        i18n.locale$.signal.subscribe(() => this.update())
-        this.update();
-    }
-    
-    async update() {
-        update: {
-            const {key, i18n} = this;
-            const dictionary = i18n.dictionary();
-            if (!dictionary) {this.content(key); break update}
-            const target = await dictionary.find(key);
-            if (isUndefined(target)) break update;
-            const snippets = target.split(/\$[a-zA-Z0-9_]+\$/);
-            if (snippets.length === 1 || !this.options) {this.content(target); break update}
-            const matches = target.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
-            this.content(snippets.map(text => [text, this.options?.[matches.next().value?.at(2)!] ?? null]));
-        }
-        this.dispatchEvent(new Event('i18nupdate'));
-        return this;
-    }
-}
-
-export type I18nTextOptions = {[key: string]: any}

package/ext/router/index.ts

@@ -1,73 +0,0 @@
-import type { AnchorTarget } from "#html/$Anchor";
-import { _bind, _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;
-    }
-}
-
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'routeopen': Event;
-    }
-}
-
-// assign methods
-_Object_assign($, {
-    open: _bind(Router.open, Router),
-    replace: _bind(Router.replace, Router),
-    back: _bind(Router.back, Router),
-    forward: _bind(Router.forward, Router)
-});
-// define styles
-forEach([
-    `router{display:block}`,
-    `page{display:block}`
-], $.style);
-// 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

@@ -1,27 +0,0 @@
-import { chain } from "#lib/chain";
-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;
-    initial = false;
-    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) {
-        return chain(this, arguments, () => this.#pageTitle, title, title => this.#pageTitle = title)
-    }
-}

package/ext/router/node/Route.ts

@@ -1,54 +0,0 @@
-import { _instanceof, _Object_fromEntries, _Array_from } from "#lib/native";
-import { $Element } from "#node/$Element";
-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;
-        page.initial = true;
-        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;
-    }
-}

package/ext/router/node/Router.ts

@@ -1,149 +0,0 @@
-import type { AnchorTarget } from "#html/$Anchor";
-import { _document } from "#lib/env";
-import { _Array_from, _instanceof, _JSON_parse, _JSON_stringify, _Object_entries, _Object_fromEntries, forEach, startsWith } from "#lib/native";
-import { Page } from "./Page";
-import { BaseRouteNode, Route } from "./Route";
-
-// 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;
-    _history[mode === PUSH ? 'pushState' : 'replaceState']({index}, '' , url);
-    for (let router of Router.routers) router.routes.size && await router.resolve(path);
-}
-// disable browser scroll restoration
-_history.scrollRestoration = 'manual';
-
-export class Router extends BaseRouteNode<''> {
-    static pageRouters = new Map<Page, Router>();
-    static routers = new Set<Router>();
-    pageMap = new Map<string, Page>();
-    static direction: 'back' | 'forward' = FORWARD;
-    constructor(page?: Page) {
-        super('', () => [], 'router')
-        Router.routers.add(this);
-        if (page) Router.pageRouters.set(page, 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;
-    }
-
-    async resolve(path: string | URL) {
-        const {pathname, searchParams, hash, href} = toURL(path);
-        const routeData = { params: {} as {[key: string]: string}, query: _Object_fromEntries(searchParams) }
-        const split = (p: string) => p.replaceAll(/\/+/g, '/').split('/').map(path => `/${path}`);
-
-        function determineRoute(parentRoute: BaseRouteNode<any>, path: string, hash: string | undefined): [route: Route | null, pathId: string][] {
-            const targetPathSplit = split(path);
-            hash && targetPathSplit.push(hash);
-            if (!parentRoute.routes.size) return [];
-            routeLoop: for (const route of _Array_from(parentRoute.routes.values()).sort((a, b) => b.path.length - a.path.length)) {
-                const routePathSplit = split(route.path);
-                let pathId = '';
-                splitLoop: for (let i = 0; i < routePathSplit.length; i++) {
-                    const pass = () => pathId += targetSnippet;
-                    const [routeSnippet, targetSnippet] = [routePathSplit[i], targetPathSplit[i]];
-                    if (!routeSnippet || !targetSnippet) continue routeLoop;
-                    // process params in path
-                    if (routeSnippet.includes(':')) {
-                        if (targetSnippet === '/') continue routeLoop;
-                        const [prefix, paramName] = routeSnippet.split(':') as [string, string];
-                        if (!startsWith(targetSnippet, prefix)) continue routeLoop;
-                        routeData.params[paramName] = targetSnippet.replace(`${prefix}`, '');
-                        pass();
-                        continue splitLoop;
-                    }
-                    if (routeSnippet === '/' && route.routes.size) continue splitLoop;
-                    if (routeSnippet !== targetSnippet) continue routeLoop;
-                    pass()
-                }
-                return [[route, pathId], ...determineRoute(route, path, hash)];
-            }
-            return [[null, parentRoute.path + '$$NOT_FOUND$$']];
-        }
-        // analytics
-        const targetRoutes = determineRoute(this, pathname + '/', hash);
-        // build pages
-        let prevPage: null | Page = null, prevRoute: BaseRouteNode<any> = this;
-        const appendPage = (prevRouter: Router | undefined, page: Page) => page.parentNode !== prevRouter?.node && prevRouter?.content(page);
-
-        for (const [route, pathId] of targetRoutes) {
-            const page = this.pageMap.get(pathId) ?? new Page(route ?? prevRoute.routes.get('404') ?? new Route('404', () => null), routeData);
-            if (!page.initial) await route?.build(routeData, page);
-            _document && (_document.title = page.pageTitle() ?? _document.title);
-            this.pageMap.set(pathId, page);
-            if (href === _location.href) appendPage(prevPage ? Router.pageRouters.get(prevPage) : this, page);
-            prevPage = page;
-            if (route) prevRoute = route;
-        }
-        let { x, y } = Router.scroll ?? {x: 0, y: 0};
-        scrollTo(x, y);
-        this.dispatchEvent(new Event('routeopen', {bubbles: true}));
-        return this;
-    }
-
-    listen() {
-        const resolve = () => {
-            const stateIndex = _history.state?.index ?? 0;
-            if (index > stateIndex) Router.direction = BACK;
-            if (index < stateIndex) Router.direction = FORWARD;
-            index = stateIndex;
-            this.resolve(_location.href);
-        }
-        _addEventListener('popstate', resolve);
-        _addEventListener('beforeunload', scrollRecord);
-        _addEventListener('scroll', scrollRecord, false);
-        resolve();
-        return this;
-    }
-
-    static get scroll(): ScrollData[number] {
-        return _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}')[index] ?? {x: 0, y: 0}
-    }
-}

package/ext/router/node/RouterAnchor.ts

@@ -1,8 +0,0 @@
-import { $Anchor } from "#html/$Anchor";
-
-export class RouterAnchor extends $Anchor {
-    constructor() {
-        super();
-        this.on('click', e => { e.preventDefault(); $.open(this.href(), this.target()) })
-    }
-}

package/src/lib/assign.ts

@@ -1,38 +0,0 @@
-import { Signal } from "../structure/Signal";
-import { _instanceof, _Object_defineProperty, forEach, isUndefined } from "./native";
-
-export const assign = (target: any, {set, get, fn}: { 
-    set?: string[], 
-    get?: string[], 
-    fn?: string[]
-}) => {
-    const [GET, SET, FN] = ['get', 'set', 'fn'] as const;
-    const filterAndMap = (type: 'get' | 'set' | 'fn', arr: string[] | undefined) => arr?.map(prop => [type, prop]) ?? []
-    const list = [...filterAndMap(GET, get), ...filterAndMap(SET, set), ...filterAndMap(FN, fn)] as [string, string][];
-    forEach(list, ([type, prop]) => 
-        _Object_defineProperty(target.prototype, prop, {
-            ...(type === GET ? {
-                get() { return this.node[prop as any] }
-            } : {
-                writable: true,
-                ...(type === SET ? {
-                    // set
-                    value(this, args: any) {
-                        if (!arguments.length) return this.node[prop];
-                        let set = (value: any) => !isUndefined(value) && (this.node[prop] = value);
-                        if (_instanceof(args, Signal)) args = args.subscribe(set).value();
-                        set(args)
-                        return this;
-                    }
-                } : {
-                    // fn
-                    value(this, ...args : any[]) {
-                        let result = this.node[prop](...args)
-                        return isUndefined(result) ? this : result;
-                    }
-                })
-            }),
-
-        })
-    )
-}

package/src/lib/assignHelper.ts

@@ -1,18 +0,0 @@
-import type { $Node } from "#node/$Node";
-import { assign } from "./assign";
-import { _Object_entries, _Object_getOwnPropertyDescriptors, forEach } from "./native";
-
-export const assignHelper = (object: Constructor<EventTarget>, target: Constructor<$Node>, tagname?: string) => {
-    const [set, get, fn] = [[], [], []] as [string[], string[], string[]]
-    // assign native object properties to target
-    forEach(_Object_entries(_Object_getOwnPropertyDescriptors(object.prototype)), ([prop, value]) => {
-        if (!(prop in target.prototype)) {
-            if (value.get && !value.set) get.push(prop);
-            else if (value.value) fn.push(prop);
-            else if (value.get && value.set) set.push(prop);
-        }
-    })
-    assign(target, {set, get, fn})
-    // register tagname
-    if (tagname) $.assign(tagname, target)
-}