amateras 0.4.2 → 0.6.0

package/ext/router/src/index.ts

@@ -0,0 +1,69 @@
+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 { _bind, _Object_assign, forEach } from "../../../src/lib/native";
+import type { AnchorTarget } from "../../html/node/$Anchor";
+
+declare module 'amateras/core' {
+    // export function $(nodeName: 'ra'): RouterAnchor;
+    export namespace $ {
+        export function route<Params extends RouteParams = []>(builder: (page: Page<Params>) => 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/ext/router/src/node/Page.ts

@@ -0,0 +1,34 @@
+import type { RouteParams } from "#structure/Route";
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { _null } from "../../../../src/lib/native";
+import type { Router } from "./Router";
+import { chain } from "../../../../src/lib/chain";
+
+export class Page<Params extends RouteParams = []> extends $HTMLElement {
+    params: PageParamsResolver<Params>;
+    router: null | Router = _null
+    #pageTitle: string | null = _null;
+    built = false;
+    constructor(params: PageParamsResolver<Params>) {
+        super('page');
+        this.params = params;
+    }
+
+    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
+        :   {}
+    >

package/ext/router/src/node/Router.ts

@@ -0,0 +1,191 @@
+import { $HTMLElement } from "amateras/node/$HTMLElement";
+import { Route, type RouteBuilder, type RoutePath, type RouteParamsResolver, type RouteParams, type RouteParamsStrings, type AsyncPageBuilder } from "../structure/Route";
+import { _document } from "amateras/lib/env";
+import { _instanceof, startsWith, _JSON_parse, forEach, _Object_entries, _JSON_stringify, _Object_assign, isFunction, _null } from "../../../../src/lib/native";
+import type { AnchorTarget } from "../../../html/node/$Anchor";
+import { Page, type PageParams } from "./Page";
+import type { PageBuilder, PageBuilderFunction } from "#structure/PageBuilder";
+// 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);
+    forEach(Router.routers, router => router.resolve(path))
+}
+// disable browser scroll restoration
+_history.scrollRestoration = 'manual';
+
+export class Router extends $HTMLElement {
+    static direction: 'back' | 'forward' = FORWARD;
+    static routers = new Set<Router>();
+    routes = new Map<RoutePath, Route>();
+    pages = new Map<string, Page>();
+    constructor(page?: Page) {
+        super('router');
+        if (page) page.router = this;
+        else Router.routers.add(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;
+    }
+
+    static get scroll(): ScrollData[number] {
+        return _JSON_parse(_sessionStorage.getItem(scrollStorageKey) ?? '{}')[index] ?? {x: 0, y: 0}
+    }
+    
+    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;
+    }
+
+    async resolve(path: string | URL): Promise<this> {
+        const {pathname, href} = toURL(path);
+        const split = (p: string) => p.replaceAll(/\/+/g, '/').replace(/^\//, '').split('/').map(path => `/${path}`);
+        type RouteData = { route: Route, params: PageParams, pathId: string }
+        const searchRoute = (routes: typeof this.routes, targetPath: string): RouteData[] => {
+            let targetPathSplit = split(targetPath);
+            if (!routes.size) return [];
+            // check each route
+            for (const [_, route] of routes) {
+                // check each path pass
+                routePathLoop: for (const [path, paramsHandle] of route.paths) {
+                    let routePathSplit = split(path);
+                    let targetPathNodePosition = 0;
+                    let params: { [key: string]: string } = isFunction(paramsHandle) ? paramsHandle() : paramsHandle ?? {};
+                    let pathId = '';
+                    // check each path node
+                    pathNodeLoop: for (let i = 0; i < routePathSplit.length; i++) {
+                        // reset target path node position
+                        targetPathNodePosition = i;
+                        const routeNode = routePathSplit[i];
+                        const targetNode = targetPathSplit[i];
+                        // path node undefined, break path loop
+                        if (!routeNode || !targetNode) continue routePathLoop;
+                        // path node is params node
+                        if (routeNode.includes(':')) {
+                            // target not matched
+                            if (targetNode === '/') continue routePathLoop;
+                            const [prefix, paramName] = routeNode.split(':') as [string, string];
+                            if (!startsWith(targetNode, prefix)) continue routePathLoop;
+                            params[paramName] = targetNode.replace(`${prefix}`, '');
+                            pathId += targetNode;
+                            continue pathNodeLoop;
+                        }
+                        // path node not matched, next path
+                        if (routeNode !== targetNode) continue routePathLoop;
+                        pathId += targetNode;
+                    }
+                    // target path node longer than route, next route
+                    if (targetPathSplit[targetPathNodePosition + 1] && !route.routes.size) continue routePathLoop;
+                    // all path node passed, route found
+                    return [{route, params, pathId}, ...searchRoute(route.routes, targetPathSplit.slice(targetPathNodePosition + 1).join('/'))]
+                }
+            }
+            // no route passed
+            const notfound = routes.get('notfound');
+            if (notfound) return [{route: notfound, params: {}, pathId: 'notfound'}]
+            return [];
+        }
+        const routes = searchRoute(this.routes, pathname);
+        let prevRouter: Router | null = this;
+        await forEach(routes, async ({route, params, pathId}) => {
+            // skip route group
+            const builderResolver = route.builder;
+            if (!builderResolver) return;
+            // get page from cache or create new page
+            const page = route.pages.get(pathId) ?? new Page(params);
+            // resolve builder
+            if (!page.built) await builderResolver.build(page);
+            page.built = true;
+            // set title
+            _document && (_document.title = page.pageTitle() ?? _document.title);
+            // check location is still same, page parent is not router before insert page
+            if (href === _location.href && page.parentNode !== prevRouter?.node) prevRouter?.content(page);
+            // set cache
+            route.pages.set(pathId, page);
+            prevRouter = page.router;
+        })
+        // handle scroll restoration
+        let { x, y } = Router.scroll ?? {x: 0, y: 0};
+        scrollTo(x, y);
+        // event
+        this.dispatchEvent(new Event('routeopen', {bubbles: true}));
+        return this;
+    }
+}
+
+export interface Router {
+    route<
+        P extends RoutePath, 
+        B extends PageBuilder
+    >(path: P, builder: B, handle?: (route: Route<P, B['params']>) => Route<P>): Router
+    route<
+        K extends RoutePath, 
+        P extends RouteParamsStrings<K>, 
+        F extends PageBuilderFunction<P>
+    >(path: K, builder: F, handle?: (route: Route<K, P>) => Route<K, P>): this
+    route<
+        K extends RoutePath, 
+        P extends RouteParamsStrings<K>, 
+        F extends AsyncPageBuilder<P>
+    >(path: K, builder: F, handle?: (route: Route<K, P>) => Route<K, P>): this
+    route<P extends RoutePath>(path: P, builder: RouteBuilder<RouteParamsResolver<P>>, handle?: (route: Route<P>) => Route<P>): Router
+    group<P extends RoutePath>(path: P, handle: <R extends Route<P>>(route: R) => R): this;
+    notFound(builder: RouteBuilder<RouteParamsResolver<RoutePath>>): this;
+}

package/ext/router/src/node/RouterAnchor.ts

@@ -0,0 +1,24 @@
+import { $Anchor } from "../../../html/node/$Anchor";
+
+export class RouterAnchor extends $Anchor {
+    constructor() {
+        super();
+        this.on('click', e => { 
+            if (e.shiftKey || e.ctrlKey) return;
+            e.preventDefault();
+            this.target() === '_replace' 
+            ?   $.replace(this.href()) 
+            :   $.open(this.href(), this.target())
+        })
+    }
+}
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export interface $NodeMap {
+            'ra': typeof RouterAnchor;
+        }
+    }
+}
+
+$.assign(['ra', RouterAnchor]);

package/ext/router/src/structure/PageBuilder.ts

@@ -0,0 +1,24 @@
+import { Page, type PageParams } from "#node/Page";
+import { _instanceof, _Promise, isFunction } from "../../../../src/lib/native";
+import type { $NodeContentResolver } from "../../../../src/node/$Node";
+import type { AsyncPageBuilder, RouteParams } from "./Route";
+
+export class PageBuilder<Params extends RouteParams = any> {
+    params!: Params
+    #builder: PageBuilderFunction<Params> | AsyncPageBuilder<Params>;
+    constructor(builder: PageBuilderFunction<Params>) {
+        this.#builder = builder;
+    }
+
+    async build(page: Page<Params>): Promise<Page<Params>> {
+        const resolver = this.#builder(page)
+        const handle = async (result: any) => {
+            if (_instanceof(result, Page)) return result;
+            else if (result[Symbol.toStringTag] === 'Module') return await result.default.build(page);
+            else return page.content(result);
+        }
+        return handle(_instanceof(resolver, _Promise) ? await resolver : resolver);
+    }
+}
+
+export type PageBuilderFunction<Params extends RouteParams> = (page: Page<Params>) => OrPromise<Page<Params> | $NodeContentResolver<Page<Params>>>

package/ext/router/src/structure/Route.ts

@@ -0,0 +1,105 @@
+import type { Page } from "#node/Page";
+import { _instanceof, _null, isUndefined } from "../../../../src/lib/native";
+import { PageBuilder, type PageBuilderFunction } from "./PageBuilder";
+
+export class Route<Path extends RoutePath = RoutePath, Params extends RouteParams = []> {
+    readonly routes = new Map<RoutePath, Route>();
+    readonly path: Path;
+    readonly builder: PageBuilder<any> | undefined;
+    readonly paths = new Map<string, RouteAliasParams<RoutePath, Params> | null>()
+    readonly pages = new Map<string, Page>();
+    redirectURL: string | null = null
+    constructor(path: Path, builder?: RouteBuilder<Params>) {
+        this.path = path;
+        this.paths.set(path, _null);
+        this.builder = _instanceof(builder, PageBuilder<any>) || isUndefined(builder) ? builder : new PageBuilder(builder as any);
+    }
+    
+
+    alias<K extends string, P extends RouteAliasParams<K, Params>>(path: K, ...params: RequireKeys<P> extends never ? [] : [Prettify<P>]): this
+    alias(path: string, params: RouteAliasParams<RoutePath, Params> | null = _null) {
+        this.paths.set(path, params);
+        return this;
+    }
+}
+
+export interface Route<Path extends RoutePath = RoutePath, Params extends RouteParams = []> {
+    route<
+        P extends RoutePath, 
+        B extends PageBuilder
+    >(path: P, builder: B, handle?: (route: Route<`${Path}${P}`, B['params']>) => Route<`${Path}${P}`, B['params']>): this
+    route<
+        K extends RoutePath, 
+        P extends [...Params, ...RouteParamsStrings<K>], 
+        F extends PageBuilderFunction<P>
+    >(path: K, builder: F, handle?: (route: Route<`${Path}${K}`, P>) => Route<`${Path}${K}`, P>): this
+    route<
+        K extends RoutePath, 
+        P extends [...Params, ...RouteParamsStrings<K>], 
+        F extends AsyncPageBuilder<P>
+    >(path: K, builder: F, handle?: (route: Route<`${Path}${K}`, P>) => Route<`${Path}${K}`, P>): this
+    route<P extends RoutePath>(path: P, builder: RouteBuilder<RouteParamsResolver<`${Path}${P}`>>, handle?: <R extends Route<`${Path}${P}`>>(route: R) => R): this;
+    group<P extends RoutePath>(path: P, handle: <R extends Route<`${Path}${P}`>>(route: R) => R): this;
+    notFound(builder: RouteBuilder<RouteParamsResolver<`${Path}`>>): this;
+}
+
+export type RouteBuilder<Params extends RouteParams = []> = PageBuilder<Params | `${string}?`[]> | AsyncPageBuilder<Params | `${string}?`[]> | PageBuilderFunction<Params>;
+export type RoutePath = string;
+export type RouteParams = string[]
+export type AsyncPageBuilder<Params extends RouteParams = any> = () => Promise<{default: PageBuilder<Params>}>
+
+export type RouteParamsResolver<Path extends RoutePath> = RouteParamsOptional<RouteParamsStrings<Path>>
+
+/** Convert route path to literals array */
+export type RouteParamsStrings<Path extends string> = 
+    Path extends `${infer Segment}/${infer Rest}`
+        ? Segment extends `${string}:${infer Param}` 
+            ? [Param, ...RouteParamsStrings<Rest>]
+            : [...RouteParamsStrings<Rest>]
+        : Path extends `${string}:${infer Param}?${infer Query}`
+            ? [Param]
+        : Path extends `${string}:${infer Param}` 
+            ? [Param] 
+            : []
+/** Convert route path to object structure */
+export type RouteParamsConfig<Path extends string> =
+    Path extends `${infer Segment}/${infer Rest}`
+        ? Segment extends `${string}:${infer Param}` 
+            ? { [key in Param]: string } & RouteParamsConfig<Rest>
+            : RouteParamsConfig<Rest>
+        : Path extends `${string}:${infer Param}?${infer Query}`
+            ? { [key in Param]: string }
+        : Path extends `${string}:${infer Param}` 
+            ? { [key in Param]: string }
+            : {}
+/** Convert literals array to optional literals arrays */
+export type RouteParamsOptional<Params extends string[]> =
+    Params extends [infer A, ...infer Rest]
+    ?   Rest extends string[]
+        ?   A extends string
+            ?   [A | `${A}?`, ...RouteParamsOptional<Rest>] | RouteParamsOptional<Rest>
+            :   never
+        :   never
+    :   []
+
+export type RouteAliasPath<Path extends string, RoutePath extends string> = RouteParamsStrings<RoutePath> extends RouteParamsStrings<Path> ? Route<RoutePath> : never
+
+type RouteParamsConfigByArrayString<RouteParams extends string[]> =
+    RouteParams extends [`${infer A}`, ...infer Rest]
+    ?   Rest extends string[]
+        ?   A extends `${infer P}?`
+            ?   { [key in P]?: string } & RouteParamsConfigByArrayString<Rest>
+            :   { [key in A]: string } & RouteParamsConfigByArrayString<Rest>
+        :   never
+    : {}
+
+
+type RouteAliasParams<Path extends string, Params extends RouteParams> = Omit<RouteParamsConfigByArrayString<Params>, keyof RouteParamsConfig<Path>>
+
+type a<T> = T[keyof T] extends (string | undefined) ? true : false
+
+type b = RequireKeys<{t: string, a?: string, b?: string}> & {}
+
+type RequireKeys<T> = {
+    [K in keyof T]: {} extends Pick<T, K> ? never : K 
+}[keyof T]; 

package/ext/signal/README.md

@@ -0,0 +1,93 @@
+# amateras/signal
+
+## Usage
+
+```ts
+import 'amateras';
+import 'amateras/signal';
+
+// define a signal with value 0
+const count$ = $.signal(0);
+
+// this variable will be auto recalculate when count$ changes
+const doubleCount$ = $.compute(() => count$() * 2);
+
+// the console message will fired when count$ changes
+$.effect(() => console.log( count$() ))
+
+$(document.body).content([
+    // Display Counts
+    $('p').content( $`Counts: ${count$}` ),
+
+    // Display Double Counts
+    $('p').content( $`Double Counts: ${doubleCount$}` ),
+
+    // Create a button that make counts plus 1 on click
+    $('button').content('Add Count').on('click', () => count$.set(value => value + 1))
+])
+```
+
+## Read and Write
+
+```ts
+const number$ = $.signal(0);
+const string$ = $.singal('');
+const boolean$ = $.signal(false);
+const object$ = $.signal({ number: 1 });
+
+// write value
+number$.set(42);
+string$.set('New Content');
+boolean$.set(true);
+object$.set({ number: 42 });
+
+// read value
+number$(); // 42
+string$(); // 'New Content'
+boolean$(); // true
+object$(); // { number: 42 }
+```
+
+## Use in attribute methods
+
+```ts
+const src$ = $.signal('/image-1.png');
+
+$(document.body).content([
+    // you can set signal variable in attribute
+    $('img').src( src$ ),
+
+    $('button').content('Change Image').on('click', () => src$.set('/image-2.png'))
+])
+```
+
+## Reactive object
+
+```ts
+const user$ = $.signal({
+    name: 'Amateras',
+    age: 16,
+    avatar: {
+        url: '/amateras/avatar.png',
+        size: '350x350'
+    }
+})
+
+$(document.body).content([
+    // Display name and age
+    $('h1').content( $`${user$.name$} (${user$.age$})` ),
+    // Display avatar image
+    $('img').src( user$.avatar$.url$ ),
+    // Change the user$ when button is clicked
+    $('button')
+    .content('Change User')
+    .on('click', () => user$.set({
+        name: 'Tsukimi',
+        age: 10,
+        avatar: {
+            url: '/tsukimi/avatar.png',
+            size: '350x350'
+        }
+    }))
+])
+```

package/ext/signal/package.json

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

package/ext/signal/src/index.ts

@@ -0,0 +1,128 @@
+import { Signal } from "#structure/Signal";
+import { _document } from "amateras/lib/env";
+import { _instanceof, isObject, _JSON_stringify, _Object_assign, forEach, _null, _Object_defineProperty, _Object_entries, isNull, isFunction } from "amateras/lib/native";
+import { $Node, $Text } from "amateras/node/$Node";
+
+// handle $Node content process
+$Node.processors.add((_, content) => {
+    const signal = (content as SignalFunction<any>)?.signal;
+    if (_instanceof(signal, Signal)) {
+        const resolver = (content as SignalFunction<any>)();
+        if (_instanceof(resolver, $Node)) {
+            // handler signal $Node result
+            let node = resolver;
+            const set = (value: any) => {
+                node.replace(value);
+                node = value;
+            }
+            signal.subscribe(set);
+            return [resolver];
+        } else {
+            // handler signal other type result
+            const $text = new $Text()
+            const set = (value: any) => $text.textContent(isObject(value) ? _JSON_stringify(value) : value);
+            signal.subscribe(set);
+            set(resolver);
+            return [$text];
+        }
+    }
+})
+
+// handle $Node native method setter
+$Node.setters.add((value, set) => {
+    const signal = value?.signal
+    if (isFunction(value) && _instanceof(signal, Signal)) {
+        signal.subscribe(set);
+        return value();
+    }
+})
+
+declare module 'amateras/core' {
+    export namespace $ {
+        export function signal<T>(value: T): SignalFunction<T>;
+        export function compute<T>(process: () => T): ComputeFunction<T>; 
+        export function effect(process: () => void): void;
+        export interface $NodeContentMap {
+            signalFn: SignalFunction<any>;
+            computeFn: ComputeFunction<any>;
+        }
+        export interface $NodeParameterMap<T> {
+            signalFn: SignalFunction<T>
+        }
+    }
+}
+
+type SignalObject<T> = T extends Array<any> ? {} : T extends object ? { [key in keyof T as `${string & key}$`]: SignalFunction<T[key]> } : {};
+export type SignalFunction<T> = {
+    signal: Signal<T>, 
+    set: (newValue: T | ((oldValue: T) => T)) => SignalFunction<T>,
+    value: () => T;
+} & (() => T) & SignalObject<T>;
+export type ComputeFunction<T> = ({(): T}) & { signal: Signal<T> };
+
+const signalComputeListeners = new Set<(signal: Signal<any>) => void>();
+const signalEffectListeners = new Set<(signal: Signal<any>) => void>();
+const signalFnMap = new Map<any, SignalFunction<any> | ComputeFunction<any>>();
+
+// experiment feature
+const nestedComputeFn = (value: any, parentSignalFn: SignalFunction<any> | ComputeFunction<any>) => {
+    if (isObject(value) && !isNull(value)) {
+        forEach(_Object_entries(value), ([key, val]) => {
+            const cachedFn = signalFnMap.get(val);
+            const val$ = cachedFn ?? $.compute(() => parentSignalFn()[key]);
+            if (!cachedFn && isObject(val)) {
+                signalFnMap.set(val, val$);
+                nestedComputeFn(val, val$)
+            }
+            _Object_defineProperty(parentSignalFn, `${key}$`, {value: val$});
+        })
+    }
+}
+
+_Object_assign($, {
+    // signal function
+    signal<T>(value: T): SignalFunction<T> {
+        const signal = new Signal<T>(value);
+        const signalFn = function () { 
+            forEach([...signalComputeListeners, ...signalEffectListeners], fn => fn(signal));
+            return signal.value();
+        } as SignalFunction<T> 
+        nestedComputeFn(value, signalFn);
+        _Object_assign(signalFn, {
+            signal,
+            set: (newValue: T) => (signal.value(newValue), signalFn),
+            value: () => signal.value()
+        })
+        return signalFn
+    },
+
+    // compute function
+    compute<T>(process: () => T): ComputeFunction<T> {
+        let subscribed = false;
+        const signalFn: SignalFunction<any> = $.signal(_null);
+        const computeFn = () => {
+            if (!subscribed) return signalFn.set(subscribe()).value();
+            else return signalFn.set(process()).value();
+        }
+        const subscribe = () => {
+            const signalHandler = (signal: Signal<any>) => 
+                signal.subscribe(() => signalFn.set(process())) 
+            signalComputeListeners.add(signalHandler);
+            const result = process();
+            signalComputeListeners.delete(signalHandler);
+            subscribed = true;
+            return result;
+        }
+        _Object_assign(computeFn, { signal: signalFn.signal });
+        return computeFn as ComputeFunction<T>
+    },
+
+    // effect
+    effect(process: () => void) {
+        const signalHandler = (signal: Signal<any>) => 
+            signal.subscribe(process);
+        signalEffectListeners.add(signalHandler);
+        process();
+        signalEffectListeners.delete(signalHandler);
+    }
+})