amateras 0.2.0 → 0.4.0

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

@@ -1,30 +1,10 @@
 import { _Array_from, _instanceof } from "amateras/lib/native";
 import { $CSSRule } from "#structure/$CSSRule";
-import { $CSSStyleRule } from "./$CSSStyleRule";
 
 export class $CSSMediaRule extends $CSSRule {
     condition: string;
-    constructor(condition: string) {
-        super();
-        this.condition = condition;
-    }
-
-    get css(): string {
-        function findOwnerMediaRule(rule: $CSSRule, contextRules: $CSSMediaRule[]) {
-            const ownerRule = rule.ownerRule;
-            if (!ownerRule) return contextRules;
-            if (_instanceof(ownerRule, $CSSMediaRule)) return findOwnerMediaRule(ownerRule, [ownerRule, ...contextRules]);
-            else return findOwnerMediaRule(ownerRule, contextRules);
-        }
-        
-        function findChildRules(rule: $CSSRule, rules: $CSSStyleRule[] = []) {
-            _Array_from(rule.rules).forEach((_rule => {
-                if (!_instanceof(_rule, $CSSStyleRule)) return;
-                rules.push(_rule);
-                return findChildRules(_rule, rules);
-            }))
-            return rules
-        }
-        return `@media ${findOwnerMediaRule(this, [this]).map(rule => rule.condition).join(' and ')} { ${findChildRules(this).map(rule => rule.css).join(' ')} }`
+    constructor(selector: string) {
+        super(selector);
+        this.condition = selector.replace('@media ', '');
     }
 }

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

@@ -1,25 +1,13 @@
-import { _instanceof } from "amateras/lib/native";
-import { $CSSMediaRule } from "#structure/$CSSMediaRule";
+import { _Array_from, _instanceof, _Object_fromEntries } from "amateras/lib/native";
 
 export abstract class $CSSRule {
     rules = new Set<$CSSRule>();
-    ownerRule: $CSSRule | null = null;
-    constructor() {}
-
-    abstract get css(): string;
-    
-    get mediaRules() {
-        const rules: $CSSMediaRule[] = []
-        this.rules.forEach(rule => {
-            if (_instanceof(rule, $CSSMediaRule)) rules.push(rule);
-            rules.push(...rule.mediaRules)
-        })
-        return rules;
+    selector: string;
+    constructor(selector: string) {
+        this.selector = selector;
     }
 
-    addRule(rule: $CSSRule) {
-        this.rules.add(rule);
-        rule.ownerRule = this;
-        return this;
+    get options(): {[key: string]: any} {
+        return _Object_fromEntries(_Array_from(this.rules).map(rule => [rule.selector, rule.options]))
     }
 }

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

@@ -1,23 +1,14 @@
 import type { $CSSDeclaration } from "#structure/$CSSDeclaration";
 import { $CSSRule } from "#structure/$CSSRule";
-import { _Array_from, _instanceof } from "amateras/lib/native";
+import { _Array_from, _instanceof, _Object_fromEntries } from "amateras/lib/native";
 
 export class $CSSStyleRule extends $CSSRule {
-    context: string[] = [];
     declarations = new Map<string, $CSSDeclaration>();
-    className: string = '';
-    constructor(context: string[] = []) {
-        super();
-        this.context = context;
+    constructor(selector: string) {
+        super(selector);
     }
 
-    get css(): string {
-        return `${this.selector} { ${_Array_from(this.declarations).map(([_, dec]) => `${dec}`).join(' ')} }`
-    }
-
-    get selector() {
-        const ctx: string[][] = [];
-        this.context.forEach((part, i) => ctx.push(part.split(',').map(sel => ctx[i - 1] ? ctx[i - 1]!.map(prefix => `${prefix} ${sel.trim()}`) : [sel.trim()]).flat()))
-        return ctx.at(-1)?.join(', ')
+    get options(): {[key: string]: any} {
+        return {..._Object_fromEntries(_Array_from(this.declarations).map(([_, dec]) => [dec.key, dec])), ...super.options}
     }
 }

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

@@ -1,7 +1,7 @@
-export class $CSSVariable {
+export class $CSSVariable<V = string> {
     key: string;
-    value: string;
-    constructor(key: string, value: string) {
+    value: V;
+    constructor(key: string, value: V) {
         this.key = key;
         this.value = value;
     }

package/ext/html/html.ts

@@ -10,16 +10,4 @@ import './node/$Media';
 import './node/$OptGroup';
 import './node/$Option';
 import './node/$Select';
-import './node/$TextArea';
-export * from './node/$Anchor';
-export * from './node/$Canvas';
-export * from './node/$Dialog';
-export * from './node/$Form';
-export * from './node/$Image';
-export * from './node/$Input';
-export * from './node/$Label';
-export * from './node/$Media';
-export * from './node/$OptGroup';
-export * from './node/$Option';
-export * from './node/$Select';
-export * from './node/$TextArea';
+import './node/$TextArea';

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

@@ -8,10 +8,40 @@ export class $Anchor extends $HTMLElement<HTMLAnchorElement> {
 }
 
 export interface $Anchor extends $HTMLElement<HTMLAnchorElement> {
-    href(href: string): this;
+    /** {@link HTMLAnchorElement.href} */
+    href(href: $Parameter<string>): this;
     href(): string;
+    /** {@link HTMLAnchorElement.hreflang} */
+    hreflang(hreflang: $Parameter<string>): this;
+    hreflang(): string;
+    /** {@link HTMLAnchorElement.download} */
+    download(download: $Parameter<string>): this;
+    download(): string;
+    /** {@link HTMLAnchorElement.ping} */
+    ping(ping: $Parameter<string>): this;
+    ping(): string;
+    /** {@link HTMLAnchorElement.referrerPolicy} */
+    referrerPolicy(referrerPolicy: $Parameter<string>): this;
+    referrerPolicy(): string;
+    /** {@link HTMLAnchorElement.rel} */
+    rel(rel: $Parameter<string>): this;
+    rel(): string;
+    /** {@link HTMLAnchorElement.relList} */
+    relList(relList: $Parameter<string>): this;
+    relList(): DOMTokenList;
+    /** {@link HTMLAnchorElement.target} */
+    target(target: $Parameter<AnchorTarget>): this;
+    target(): AnchorTarget;
+    /** {@link HTMLAnchorElement.text} */
+    text(text: $Parameter<string>): this;
+    text(): string;
+    /** {@link HTMLAnchorElement.type} */
+    type(type: $Parameter<string>): this;
+    type(): string;
 }
 
+export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top' | '_unfenced_top' | '';
+
 declare module '#core' {
     export function $(nodeName: 'a'): $Anchor
 }

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

@@ -8,8 +8,61 @@ export class $Image extends $HTMLElement<HTMLImageElement> {
 }
 
 export interface $Image extends $HTMLElement<HTMLImageElement> {
-    src(src: string): this;
+    /** {@link HTMLImageElement.complete} */
+    readonly complete: boolean;
+    /** {@link HTMLImageElement.currentSrc} */
+    readonly currentSrc: string;
+    /** {@link HTMLImageElement.naturalHeight} */
+    readonly naturalHeight: number;
+    /** {@link HTMLImageElement.naturalWidth} */
+    readonly naturalWidth: number;
+    /** {@link HTMLImageElement.x} */
+    readonly x: number;
+    /** {@link HTMLImageElement.y} */
+    readonly y: number;
+
+    /** {@link HTMLImageElement.decode} */
+    decode(): Promise<this>;
+
+    /** {@link HTMLImageElement.alt} */
+    alt(alt: $Parameter<string>): this;
+    alt(): string;
+    /** {@link HTMLImageElement.crossOrigin} */
+    crossOrigin(crossOrigin: $Parameter<string | null>): this;
+    crossOrigin(): string | null;
+    /** {@link HTMLImageElement.decoding} */
+    decoding(decoding: $Parameter<"async" | "sync" | "auto">): this;
+    decoding(): "async" | "sync" | "auto";
+    /** {@link HTMLImageElement.fetchPriority} */
+    fetchPriority(fetchPriority: $Parameter<"high" | "low" | "auto">): this;
+    fetchPriority(): "high" | "low" | "auto";
+    /** {@link HTMLImageElement.height} */
+    height(height: $Parameter<number>): this;
+    height(): number;
+    /** {@link HTMLImageElement.isMap} */
+    isMap(isMap: $Parameter<boolean>): this;
+    isMap(): boolean;
+    /** {@link HTMLImageElement.loading} */
+    loading(loading: $Parameter<"eager" | "lazy">): this;
+    loading(): "eager" | "lazy";
+    /** {@link HTMLImageElement.referrerPolicy} */
+    referrerPolicy(referrerPolicy: $Parameter<string>): this;
+    referrerPolicy(): string;
+    /** {@link HTMLImageElement.sizes} */
+    sizes(sizes: $Parameter<string>): this;
+    sizes(): string;
+    /** {@link HTMLImageElement.src} */
+    src(src: $Parameter<string>): this;
     src(): string;
+    /** {@link HTMLImageElement.srcset} */
+    srcset(srcset: $Parameter<string>): this;
+    srcset(): string;
+    /** {@link HTMLImageElement.useMap} */
+    useMap(useMap: $Parameter<string>): this;
+    useMap(): string;
+    /** {@link HTMLImageElement.width} */
+    width(width: $Parameter<number>): this;
+    width(): number;
 }
 
 assignHelper(HTMLImageElement, $Image, 'img');

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

@@ -7,7 +7,160 @@ export class $Input extends $HTMLElement<HTMLInputElement> {
     }
 }
 
-export interface $Input extends $HTMLElement<HTMLInputElement> {}
+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');
 

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

@@ -7,7 +7,14 @@ export class $OptGroup extends $HTMLElement<HTMLOptGroupElement> {
     }
 }
 
-export interface $OptGroup extends $HTMLElement<HTMLOptGroupElement> {}
+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');
 

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

@@ -7,7 +7,31 @@ export class $Option extends $HTMLElement<HTMLOptionElement> {
     }
 }
 
-export interface $Option extends $HTMLElement<HTMLOptionElement> {}
+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');
 

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

@@ -7,7 +7,67 @@ export class $Select extends $HTMLElement<HTMLSelectElement> {
     }
 }
 
-export interface $Select extends $HTMLElement<HTMLSelectElement> {}
+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');
 

package/ext/i18n/README.md

@@ -0,0 +1,53 @@
+# amateras/i18n
+
+## Usage
+```ts
+import 'amateras';
+import 'amateras/i18n';
+
+const $t = $.i18n()
+// add 'en' locale dictionary context
+.add('en', {
+    homepage: {
+        _: 'Home',
+        hello: 'Hello, $name$!',
+    }
+})
+// set 'en' as locale language
+.locale('en')
+
+$(document.body).content([
+    $('h1').content( $t('homepage') )
+    // <h1><text>Home</text></h1>
+    $t('homepage.hello', {name: 'Amateras'}) 
+    // <text>Hello, Amateras!</text>
+])
+```
+
+## Change Language
+```ts
+$t.locale('zh')
+// all translation text will be updated
+```
+
+## Import Dictionary Context
+
+```ts
+// ./i18n/en.ts
+export default {
+    hello: 'Hello, $name$!'
+}
+
+// ./i18n/zh.ts
+export default {
+    hello: '您好，$name$！'
+}
+
+// ./entry_file.ts
+const $t = $.i18n()
+.add('en', () => import('./i18n/en.ts'))
+.add('zh', () => import('./i18n/zh.ts'))
+// set 'zh' as locale language
+// and fetch file automatically from path
+.locale('zh');
+```

package/ext/i18n/package.json

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

package/ext/i18n/src/index.ts

@@ -0,0 +1,54 @@
+import { _Array_from, _instanceof, _Object_assign } from "amateras/lib/native"
+import { $ } from "amateras/core"
+import { I18n } from "#structure/I18n"
+import type { I18nText as _I18nText, I18nTextOptions } from "#node/I18nText";
+import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
+
+_Object_assign($, {
+    i18n(defaultLocale: string) {
+        const i18n = new I18n(defaultLocale);
+        const i18nFn = (key: string, options?: I18nTextOptions) => i18n.translate(key, options);
+        _Object_assign(i18nFn, { 
+            i18n,
+            locale(locale: string) {
+                if (!arguments.length) return i18n.locale();
+                i18n.locale(locale);
+                return this;
+            },
+            add(lang: string, context: I18nDictionaryContext | I18nDictionaryContextImporter) {
+                i18n.map.set(lang, new I18nDictionary(context));
+                return this;
+            },
+            delete(lang: string) {
+                i18n.map.delete(lang);
+                return this;
+            }
+        })
+        return i18nFn
+    }
+})
+
+type ResolvedAsyncDictionary<F extends I18nDictionaryContextImporter> = Awaited<ReturnType<F>>['default'];
+
+type DeepKeys<T> = T extends I18nDictionaryContext
+  ? {
+      [K in keyof T]: K extends string
+        ? K extends '_' ? never : `${K}` | `${K}.${DeepKeys<T[K]>}`
+        : never;
+    }[keyof T]
+  : never;
+
+declare module "amateras/core" {
+    export namespace $ {
+        export interface I18nFunction<D extends I18nDictionaryContext = {}> {
+            (path: DeepKeys<D>, ...args: any[]): I18nText;
+            i18n: I18n;
+            locale(): string;
+            locale(lang?: $Parameter<string>): this;
+            add<F extends I18nDictionaryContext | I18nDictionaryContextImporter>(lang: string, dictionary: F): I18nFunction<D | (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>;
+            delete(lang: string): this;
+        }
+        export function i18n(defaultLocale: string): I18nFunction;
+        export type I18nText = _I18nText;
+    }
+}

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

@@ -0,0 +1,35 @@
+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}