amateras 0.11.2 → 0.12.0

package/README.md

@@ -53,7 +53,8 @@ const Counter = $.widget(() => ({
 
         console.log('This template only run once.');
 
-        $('button', $$ => { $(double$)
+        $('button', $$ => { 
+            $([ double$ ])
             $$.on('click', () => count$.set(val => val + 1));
         })
     }
@@ -79,21 +80,21 @@ Amateras 能让你编写接近 HTML 排版的模板代码，实现了在原生 J
 
 | 模块库 | 体积 | Gzip | 简介 |
 | --- | --- | --- | --- |
-| core | 4.97 kB | 2.13 kB | 核心模块 |
-| widget | 5.33 kB | 2.31 kB | 组件模块 |
-| signal | 6.38 kB | 2.69 kB | 响应式数据模块 |
-| css | 6.52 kB | 2.85 kB | 样式模块 |
-| for | 6.00 kB | 2.47 kB | 控制流 For 模块 |
-| if | 7.64 kB | 3.11 kB | 控制流 If 模块 |
-| match | 6.26 kB | 2.53 kB | 控制流 Match 模块 |
-| router | 10.73 kB | 4.29 kB | 页面路由器模块 |
-| i18n | 6.97 kB | 2.88 kB | 多语言界面模块 |
-| idb | 10.24 kB | 4.14 kB | IndexedDB 模块 |
-| markdown | 12.44 kB | 5.06 kB | Markdown 转换 HTML 模块 |
-| prefetch | 5.53 kB | 2.40 kB | SSR 数据预取 |
-| meta | 5.05 kB | 2.17 kB | SSR 页面 `meta` 标签管理 |
-| ui | 7.80 kB | 3.26 kB | UI 组件模块 |
-| utils | 4.97 kB | 2.13 kB | 通用工具库 |
+| core | 5.47 kB | 2.32 kB | 核心模块 |
+| widget | 0.35 kB | 0.17 kB | 组件模块 |
+| signal | 1.78 kB | 0.74 kB | 响应式数据模块 |
+| css | 1.56 kB | 0.71 kB | 样式模块 |
+| for | 1.05 kB | 0.35 kB | 控制流 For 模块 |
+| if | 3.08 kB | 1.15 kB | 控制流 If 模块 |
+| match | 1.31 kB | 0.39 kB | 控制流 Match 模块 |
+| router | 6.03 kB | 2.24 kB | 页面路由器模块 |
+| i18n | 2.92 kB | 0.98 kB | 多语言界面模块 |
+| idb | 5.26 kB | 1.99 kB | IndexedDB 模块 |
+| markdown | 7.48 kB | 2.93 kB | Markdown 转换 HTML 模块 |
+| prefetch | 0.41 kB | 0.20 kB | SSR 数据预取 |
+| meta | 0.18 kB | 0.08 kB | SSR 页面 `meta` 标签管理 |
+| ui | 6.50 kB | 2.25 kB | UI 组件模块 |
+| utils | 0.00 kB | 0.00 kB | 通用工具库 |
 
 ## 文档
 1. [基础入门](/docs/Basic.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Amateras is a JavaScript library for building user interface.",
   "module": "index.ts",
   "type": "module",

package/packages/core/src/index.ts

@@ -1,10 +1,10 @@
 import { onclient, onserver } from '#env';
-import { hmr } from '#lib/hmr';
-import { _instanceof, _null, forEach, isArray, isFunction, isString, isUndefined } from '@amateras/utils';
+import { _instanceof, _null, forEach, isArray, isFunction, isString, isUndefined, toArray } from '@amateras/utils';
 import './global';
 import { ElementProto } from './structure/ElementProto';
 import { Proto } from './structure/Proto';
 import { TextProto } from './structure/TextProto';
+import { hmr } from '#lib/hmr';
 
 type ElementProtoArguments<C extends Constructor> = 
     RequiredKeys<RemoveIndexSignature<ConstructorParameters<C>[0]>> extends never 
@@ -158,11 +158,21 @@ export namespace $ {
         callback(match as any);
         return cases.get(condition)?.() ?? cases.get(symbol_default)?.();
     }
+
+    export const async = (fn: () => Promise<void>) => {
+        Proto.proto?.global.promises.add(fn());
+    }
+
     export const stylesheet = onclient() ? new CSSStyleSheet() : _null;
-    export const styleMap = new Map<Constructor<ElementProto>, string>();
-    export const style = (proto: Constructor<ElementProto> | null, css: string) => {
-        if (proto) styleMap.set(proto, css);
-        stylesheet?.insertRule(css);
+    export const styleMap = new Map<Constructor<ElementProto>, Set<string>>();
+    export const style = (proto: Constructor<ElementProto> | null, css: string | string[]) => {
+        let rules = toArray(css)
+        if (proto) {
+            let set = styleMap.get(proto) ?? new Set();
+            forEach(rules, rule => set.add(rule));
+            styleMap.set(proto, set);
+        }
+        if (stylesheet) forEach(rules, rule => stylesheet!.insertRule(rule));
     }
     
     if (stylesheet) document.adoptedStyleSheets.push(stylesheet);

package/packages/core/src/lib/hmr.ts

@@ -6,7 +6,10 @@ import { TextProto } from "#structure/TextProto";
 import { _Array_from, _instanceof, _undefined, forEach, is } from "@amateras/utils";
 import { symbol_ProtoType } from "./symbols";
 
-const elementProtoMap = import.meta.hot?.data.protoMap ?? new Map<HTMLElement, Proto>()
+const elementProtoMap = (() => {
+    if (import.meta.hot) return import.meta.hot.data.protoMap ?? new Map<HTMLElement, Proto>();
+    return new Map<HTMLElement, Proto>()
+})()
 // save data before HMR
 if (import.meta.hot) import.meta.hot.dispose(data => {
     data.protoMap = elementProtoMap;

package/packages/core/src/structure/ElementProto.ts

@@ -1,4 +1,4 @@
-import { _Array_from, _Object_entries, forEach, isNull, isUndefined, map } from "@amateras/utils";
+import { _Array_from, _null, _Object_assign, _Object_entries, forEach, isNull, isUndefined, map } from "@amateras/utils";
 import { NodeProto } from "./NodeProto";
 
 const SELF_CLOSING_TAGNAMES = ['img', 'hr', 'br', 'input', 'link', 'meta'];
@@ -15,10 +15,12 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
     }
 
     on<K extends keyof HTMLElementEventMap>(type: K, listener: (event: HTMLElementEventMap[K] & { currentTarget: H }) => void) {
-        this.ondom(node => {
+        let setListener = (node: Node) => {
             node.addEventListener(type, listener as any)
             this.disposers.add(() => node.removeEventListener(type, listener as any))
-        });
+        }
+        if (this.node) setListener(this.node);
+        else this.ondom(setListener);
     }
 
     override toString(): string {
@@ -57,14 +59,15 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
 
     innerHTML(html: string) {
         this.#innerHTML = html;
+        if (this.node) this.node.innerHTML = html;
     }
 
     attr(): Map<string, string>;
-    attr(attrName: string): string | undefined;
+    attr(attrName: string): string | null;
     attr(attrName: string, attrValue: string | null): this;
     attr(attrName?: string, attrValue?: string | null) {
         if (!arguments.length) return this.#attr;
-        if (isUndefined(attrValue)) return this.#attr.get(attrName!);
+        if (isUndefined(attrValue)) return this.#attr.get(attrName!) ?? _null;
         if (isNull(attrValue)) {
             this.#attr.delete(attrName!);
             this.node?.removeAttribute(attrName!);
@@ -86,6 +89,10 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
         this.node?.classList.remove(...tokens);
     }
 
+    style(declarations: Partial<CSSStyleDeclaration>) {
+        if (this.node) _Object_assign(this.node.style, declarations);
+    }
+
     private token(method: 'add' | 'delete', name: string, ...tokens: string[]) {
         let value = this.#attr.get(name);
         let tokenArr = new Set(value?.split(' ') ?? []);

package/packages/core/src/structure/GlobalState.ts

@@ -1,9 +1,14 @@
-import { forEach } from "@amateras/utils";
+import { _Object_assign, forEach } from "@amateras/utils";
 
 export class GlobalState {
     static disposers = new Set<(global: GlobalState) => void>()
-
+    promises = new Set<Promise<any>>();
     dispose() {
+        this.promises.clear();
         forEach(GlobalState.disposers, disposer => disposer(this))
     }
+
+    static assign(obj: object) {
+        _Object_assign(GlobalState.prototype, obj);
+    }
 }

package/packages/core/src/structure/NodeProto.ts

@@ -1,5 +1,6 @@
 import { _null } from "@amateras/utils";
 import { Proto } from "./Proto";
+import { onclient } from "#env";
 
 export class NodeProto<N extends Node & ChildNode = Node & ChildNode> extends Proto {
     node: null | N = _null;
@@ -12,6 +13,11 @@ export class NodeProto<N extends Node & ChildNode = Node & ChildNode> extends Pr
         this.modifiers.add(callback);
     }
 
+    inDOM() {
+        if (onclient()) return document.contains(this.node);
+        return false;
+    }
+
     override removeNode(): void {
         this.node?.remove();
     }

package/packages/core/src/structure/Proto.ts

@@ -42,10 +42,10 @@ export abstract class Proto {
         }).flat()
     }
 
-    build(children = true): this {
+    build(cascading = true): this {
         this.clear(true);
         $.context(Proto, this, () => this.layout?.(this));
-        if (children) forEach(this.protos, proto => {
+        if (cascading) forEach(this.protos, proto => {
             proto.build()
         });
         return this
@@ -73,7 +73,7 @@ export abstract class Proto {
         if (dispose) forEach(this.protos, proto => proto.dispose())
     }
 
-    findAbove<T>(filter: (proto: Proto) => boolean | T | void | null): T | null {
+    findAbove<T extends Proto>(filter: (proto: Proto) => any): T | null {
         let parent = this.parent;
         if (parent) return filter(parent) ? parent as T : parent.findAbove(filter);
         return _null;
@@ -87,4 +87,19 @@ export abstract class Proto {
         }
         return _null;
     }
+
+    findBelowAll<T extends Proto = Proto>(filter: (proto: Proto) => boolean | void): T[] {
+        let matches: T[] = [];
+        for (let proto of this.protos) {
+            if (filter(proto)) matches.push(proto as T);
+            matches.push(...proto.findBelowAll(filter) as T[]);
+        }
+        return matches;
+    }
+
+    /**
+     * This method will be called when control flow proto is updated, 
+     * it's useful when you need re-render content of component while content updated.
+     */
+    mutate() {}
 }

package/packages/css/src/lib/cache.ts

@@ -18,7 +18,10 @@ export const cssGlobalRuleSet = new Set<$CSSRule>();
  * This is very suitable for storing CSS objects in JSON format, as the length of the JSON string will not
  * affect the retrieve efficiency of the Map.
  */
-export const cssRuleByJSONMap: Map<string, $CSSRule> = import.meta.hot?.data.cssMap ?? new Map();
+export const cssRuleByJSONMap: Map<string, $CSSRule> = $.call(() => {
+    if (import.meta.hot) return import.meta.hot.data.cssMap ?? new Map();
+    return new Map();
+})
 
 if (import.meta.hot) {
     import.meta.hot.dispose(data => {

package/packages/for/src/structure/For.ts

@@ -32,6 +32,7 @@ export class For<T extends object = object> extends ProxyProto {
                 if (node.parentNode) prevNode = node;
                 else prevNode = prevNode?.parentNode?.insertBefore(node, prevNode.nextSibling)
             })
+            this.parent?.mutate()
         }
 
         this.list$.subscribe(update);

package/packages/i18n/src/index.ts

@@ -1,69 +1,41 @@
 import { I18n } from "#structure/I18n";
-import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
-import { I18nTranslation as _I18nTranslation, I18nTranslation, type I18nTranslationOptions } from "#structure/I18nTranslation";
-import { _instanceof, _Object_assign } from "@amateras/utils";
-import type { GetDictionaryContextByKey, I18nTranslationDirKey, I18nTranslationKey, I18nTranslationParams, Mixin, ResolvedAsyncDictionary } from "./types";
+import { I18nTranslation as _I18nTranslation, I18nTranslation } from "#structure/I18nTranslation";
+import { _instanceof, _null, _Object_assign } from "@amateras/utils";
 import { GlobalState } from "@amateras/core";
+import type { I18nSession } from "#structure/I18nSession";
 
 declare global {
     export namespace $ {
-        export interface I18nFunction<D extends I18nDictionaryContext = {}> {
-            <K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): I18nTranslation;
-            i18n: I18n;
-            locale(lang?: string): Promise<void>;
-            add<F extends I18nDictionaryContext | I18nDictionaryContextImporter>(lang: string, dictionary: F): I18nFunction<Mixin<D, (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>>;
-            delete(lang: string): this;
-            dir<K extends I18nTranslationDirKey<D>>(path: K): I18nFunction<GetDictionaryContextByKey<K, D>>
-        }
-        export function i18n(defaultLocale: string): I18nFunction;
+        export function i18n(defaultLocale: string): I18n;
         export type I18nTranslation = _I18nTranslation;
 
         export interface TextProcessorValueMap {
             i18n: I18nTranslation
         }
     }
+
+    export interface GlobalEventHandlersEventMap {
+        localeupdate: Event;
+    }
 }
 
 declare module '@amateras/core' {
     export interface GlobalState {
         i18n: {
-            promises: Promise<any>[]
+            session: I18nSession | null
         }
     }
 }
 
-_Object_assign(GlobalState.prototype, {
+GlobalState.assign({
     i18n: {
-        promises: []
+        session: _null
     }
 })
 
-GlobalState.disposers.add(global => {
-    global.i18n.promises = [];
-})
-
 _Object_assign($, {
     i18n(defaultLocale: string) {
-        const i18n = new I18n(defaultLocale);
-        const i18nFn = (key: string, options?: I18nTranslationOptions) => i18n.translate(key, options);
-        _Object_assign(i18nFn, { 
-            i18n,
-            async locale(locale: string) {
-                await i18n.setLocale(locale);
-            },
-            add(lang: string, context: I18nDictionaryContext | I18nDictionaryContextImporter) {
-                i18n.map.set(lang, new I18nDictionary(context));
-                return this;
-            },
-            delete(lang: string) {
-                i18n.map.delete(lang);
-                return this;
-            },
-            dir(path: string) {
-                return (key: string, options?: I18nTranslationOptions) => i18n.translate(`${path}.${key}`, options)
-            }
-        })
-        return i18nFn
+        return new I18n(defaultLocale)
     }
 })
 

package/packages/i18n/src/structure/I18n.ts

@@ -1,51 +1,106 @@
-import { _instanceof, _null, map } from "@amateras/utils";
-import { I18nDictionary } from "#structure/I18nDictionary";
+import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
 import { I18nTranslation, type I18nTranslationOptions } from "./I18nTranslation";
+import { I18nSession } from "./I18nSession";
+import { onclient, Proto } from "@amateras/core";
+import type { I18nTranslationKey, I18nTranslationParams, Mixin, ResolvedAsyncDictionary, I18nTranslationDirKey, GetDictionaryContextByKey } from "../types";
+import { map } from "@amateras/utils";
 
-export class I18n {
-    map = new Map<string, I18nDictionary>();
-    #defaultLocale: string;
-    translations = new Set<I18nTranslation>();
-    locale: string;
+export class I18n<D extends I18nDictionaryContext = {}> {
+    #locale: string;
+    dictionaries = new Map<string, I18nDictionary>();
+    defaultLocale: string;
+    sessions = new Set<I18nSession>();
+    session = new I18nSession(this);
+    path = '';
+    static key = '__locale__';
     constructor(defaultLocale: string) {
-        this.#defaultLocale = defaultLocale;
-        this.locale = defaultLocale;
+        this.defaultLocale = defaultLocale;
+        this.#locale = defaultLocale;
+        this.sessions.add(this.session);
     }
 
-    defaultLocale(): string;
-    defaultLocale(locale: string): this;
-    defaultLocale(locale?: string) {
-        if (!arguments.length) return this.#defaultLocale;
-        if (locale) this.#defaultLocale = locale;
+    add(lang: string, dictionary: I18nDictionaryContext | I18nDictionaryContextImporter) {
+        this.dictionaries.set(lang, new I18nDictionary(dictionary));
+        return this as any;
+    }
+
+    delete(lang: string) {
+        this.dictionaries.delete(lang);
         return this;
     }
 
-    async setLocale(): Promise<string>;
-    async setLocale(locale: string): Promise<this>;
-    async setLocale(locale?: string) {
-        if (!arguments.length) return this.locale;
-        if (locale) {
-            let dictionary = this.map.get(locale);
-            if (!dictionary) {
-                locale = locale.split('-')[0]!;
-                return this.setLocale(locale);
-            }
-            if (locale !== this.locale) {
-                this.locale = locale;
-                await Promise.all(map(this.translations, translation => translation.update()))
-            }
+    t<K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): I18nTranslation;
+    t(key: string, options?: I18nTranslationOptions) {
+        return new I18nTranslation(this.getSession(), this.getFullPath(key), options);
+    }
+
+    text<K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): Promise<string>;
+    async text(key: string, options?: I18nTranslationOptions) {
+        let content = await this.getSession().fetch(this.getFullPath(key), options)
+        return content.text.reduce((acc, str, i) => acc + str + (content.args[i] || ''), '')
+    }
+
+    dir(path: string) {
+        let i18n = this;
+        return {
+            t: (key: string, options: any) => i18n.t(`${path}.${key}` as any, options),
+            text: (key: string, options: any) => i18n.text(`${path}.${key}` as any, options),
+            dir: (postPath: string) => i18n.dir(`${path}.${postPath}`)
+        } as unknown as I18nDir;
+    }
+
+    locale(): string;
+    locale(locale: string): Promise<void>;
+    locale(locale?: string) {
+        if (!arguments.length) {
+            this.readStoreLocale();
+            return this.#locale;
         }
-        return this;
+        if (!locale) return;
+        let dictionary = this.dictionaries.get(locale);
+        if (!dictionary) {
+            let splited = locale.split('-');
+            if (splited.length === 1) return;
+            return this.locale(splited[0]!);
+        }
+        this.#locale = locale;
+        this.writeStoreLocale(locale);
+        return Promise.all(map(this.sessions, session => session.locale(locale)));
+    }
+
+    private getFullPath(key: string) {
+        return this.path ? `${this.path}.${key}` : key;
     }
 
-    dictionary(locale = this.locale) {
-        if (!locale) return _null;
-        const dictionary = this.map.get(locale);
-        return dictionary;
+    private getSession() {
+        let parentProto = Proto.proto;
+        if (parentProto) {
+            let session = parentProto.global.i18n.session ?? new I18nSession(this);
+            parentProto.global.i18n.session = session;
+            return session;
+        }
+        else return this.session;
     }
 
-    translate(key: string, options?: I18nTranslationOptions) {
-        return new I18nTranslation(this, key, options);
+    private readStoreLocale() {
+        if (onclient()) this.#locale = localStorage.getItem(I18n.key) ?? this.defaultLocale;
+    }
+    
+    private writeStoreLocale(locale: string) {
+        if (onclient()) localStorage.setItem(I18n.key, locale);
     }
 }
 
+export interface I18n<D extends I18nDictionaryContext = {}> {
+    add<F extends I18nDictionaryContext | I18nDictionaryContextImporter>(lang: string, dictionary: F): I18n<Mixin<D, (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>>;
+    delete(lang: string): this;
+    t<K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): I18nTranslation;
+    text<K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): Promise<string>;
+    dir<K extends I18nTranslationDirKey<D>>(path: K): I18nDir<GetDictionaryContextByKey<K, D>>
+}
+
+export interface I18nDir<D extends I18nDictionaryContext = {}> {
+    t<K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): I18nTranslation;
+    text<K extends I18nTranslationKey<D>, P extends I18nTranslationParams<K, D>>(path: K, ...params: P extends Record<string, never> ? [] : [P]): Promise<string>;
+    dir<K extends I18nTranslationDirKey<D>>(path: K): I18n<GetDictionaryContextByKey<K, D>>
+}

package/packages/i18n/src/structure/I18nSession.ts

@@ -0,0 +1,49 @@
+import { isUndefined, map } from "@amateras/utils";
+import type { I18nTranslationResult } from "../types";
+import type { I18n } from "./I18n";
+import type { I18nTranslation, I18nTranslationOptions } from "./I18nTranslation";
+import { onclient } from "@amateras/core";
+
+export class I18nSession {
+    translations = new Set<I18nTranslation>()
+    i18n: I18n;
+    #locale: string;
+    constructor(i18n: I18n) {
+        this.i18n = i18n;
+        this.#locale = i18n.locale();
+        i18n.sessions.add(this);
+    }
+    
+    async fetch(key: string, options?: I18nTranslationOptions): Promise<I18nTranslationResult> {
+        const dictionary = this.i18n.dictionaries.get(this.#locale);
+        if (!dictionary) return {text: [key], args: []};
+        const translate = await dictionary.find(key);
+        if (isUndefined(translate)) return {text: [key], args: []};
+        const snippets = translate.split(/\$[a-zA-Z0-9_]+\$/);
+        if (snippets.length === 1 || !options) return {text: [translate], args: []}
+        const matches = translate.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
+        return {text: snippets, args: map(matches as unknown as [string, string, string][], ([,,value]) => options[value])}
+    }
+    
+    locale(): string;
+    locale(locale: string): Promise<void>;
+    locale(locale?: string) {
+        if (!arguments.length) return this.#locale;
+        if (locale) {
+            let dictionary = this.i18n.dictionaries.get(locale);
+            if (!dictionary) {
+                let splited = locale.split('-');
+                if (splited.length === 1) return;
+                return this.locale(splited[0]!);
+            }
+        }
+        if (locale && locale !== this.#locale) {
+            this.#locale = locale;
+            return new Promise<void>(async (resolve) => {
+                await Promise.all(map(this.translations, translation => translation.update()));
+                resolve();
+                if (onclient()) dispatchEvent(new Event('localeupdate'));
+            })
+        }
+    }
+}

package/packages/i18n/src/structure/I18nTranslation.ts

@@ -1,17 +1,17 @@
-import type { I18n } from "#structure/I18n";
 import { ProxyProto } from "@amateras/core";
-import { forEach, isUndefined, map } from "@amateras/utils";
+import { forEach } from "@amateras/utils";
+import type { I18nSession } from "./I18nSession";
 
 export class I18nTranslation extends ProxyProto {
-    i18n: I18n;
+    session: I18nSession;
     key: string;
     options: I18nTranslationOptions | undefined;
-    constructor(i18n: I18n, key: string, options?: I18nTranslationOptions) {
+    constructor(session: I18nSession, key: string, options?: I18nTranslationOptions) {
         super()
-        this.i18n = i18n;
+        this.session = session;
         this.key = key;
         this.options = options;
-        this.i18n.translations.add(this);
+        session.translations.add(this);
     }
     
     override build(): this {
@@ -20,30 +20,18 @@ export class I18nTranslation extends ProxyProto {
     }
     
     async update() {
-        const {key, i18n, options} = this;
-        const contentUpdate = (content: string[], args: any[] = []) => {
-            this.layout = () => {
-                // make this array become Template String Array;
-                //@ts-ignore
-                content.raw = content;
-                $(content as any, ...args);
-            }
-            forEach(this.protos, proto => proto.removeNode());
-            super.build();
-            this.node?.replaceWith(...this.toDOM());
-        }
-        update: {
-            const dictionary = i18n.dictionary();
-            if (!dictionary) { contentUpdate([key]); break update }
-            const request = dictionary.find(key);
-            this.global.i18n.promises.push(request);
-            const translate = await request;
-            if (isUndefined(translate)) break update;
-            const snippets = translate.split(/\$[a-zA-Z0-9_]+\$/);
-            if (snippets.length === 1 || !options) { contentUpdate([translate]); break update }
-            const matches = translate.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
-            contentUpdate(snippets, map(matches as unknown as [string, string, string][], ([,,value]) => options[value]));
+        const request = this.session.fetch(this.key, this.options)
+        this.global.promises.add(request);
+        const {text, args} = await request;
+        this.layout = () => {
+            // make this array become Template String Array;
+            //@ts-ignore
+            text.raw = text;
+            $(text as any, ...args);
         }
+        forEach(this.protos, proto => proto.removeNode());
+        super.build();
+        this.node?.replaceWith(...this.toDOM());
         return this;
     }
 }

package/packages/i18n/src/types.ts

@@ -1,5 +1,7 @@
 import type { I18nDictionaryContext, I18nDictionaryContextImporter } from "#structure/I18nDictionary";
 
+export type I18nTranslationResult = { text: string[], args: any[] }
+
 export type ResolvedAsyncDictionary<F extends I18nDictionaryContextImporter> = Awaited<ReturnType<F>>['default'];
 
 export type I18nTranslationKey<T> = 
@@ -39,7 +41,7 @@ export type FindParam<T extends string> =
     T extends `${string}$${infer Param}$${infer Rest}`
     ?   Param extends `${string}${' '}${string}`
         ?   Prettify<{} & FindParam<Rest>>
-        :   Prettify<Record<Param, $.Layout> & FindParam<Rest>>
+        :   Prettify<Record<Param, any> & FindParam<Rest>>
     :   {}
 
 export type FindTranslationByKey<K extends string, T extends I18nDictionaryContext> = 

package/packages/if/src/global.ts

@@ -2,14 +2,14 @@ import type { Condition } from "#structure/Condition";
 import * as _Else from "#structure/Else";
 import * as _ElseIf from "#structure/ElseIf";
 import * as _If from "#structure/If";
-import type { Signal } from "@amateras/signal";
+import type { SignalType } from "@amateras/signal";
 
 declare global {
     export var If: typeof _If.If
     export var Else: typeof _Else.Else
     export var ElseIf: typeof _ElseIf.ElseIf
 
-    export function $(statement: typeof _If.If, signal: Signal<any>, layout: _If.IfLayout): Condition;
-    export function $(statement: typeof _ElseIf.ElseIf, signal: Signal<any>, layout: _ElseIf.ElseIfLayout): Condition;
+    export function $<T>(statement: typeof _If.If, signal: SignalType<T>, layout: _If.IfLayout<T>): Condition;
+    export function $<T>(statement: typeof _ElseIf.ElseIf, signal: SignalType<T>, layout: _ElseIf.ElseIfLayout<T>): Condition;
     export function $(statement: typeof _Else.Else, layout: _Else.ElseLayout): Condition;
 }

package/packages/if/src/structure/Condition.ts

@@ -23,6 +23,7 @@ export class Condition extends ProxyProto {
             this.statement = matchProto ?? _null;
             forEach(this.statements, proto => proto !== matchProto && proto.removeNode())
             this.node?.replaceWith(...this.toDOM());
+            this.parent?.mutate();
         }
         // build statements proto and subscribe expression signal
         forEach(this.statements, proto => {