amateras 0.5.0 → 0.7.0

package/packages/dom/src/structure/html/HTMLUElement.ts

@@ -0,0 +1,16 @@
+import { assignAttributes } from "#lib/assignAttributes";
+import { HTMLElement } from "#structure/HTMLElement";
+import { _Object_assign } from "@amateras/utils";
+
+export class HTMLUElement extends HTMLElement {
+    static defaultAttributes = {
+        ...HTMLElement.defaultAttributes
+    }
+
+    constructor() {
+        super('u')
+    }
+}
+
+assignAttributes(HTMLUElement, HTMLUElement.defaultAttributes)
+_Object_assign(globalThis, { HTMLUElement })

package/packages/dom/src/structure/html/HTMLUListElement.ts

@@ -0,0 +1,18 @@
+import { assignAttributes } from "#lib/assignAttributes";
+import { HTMLElement } from "#structure/HTMLElement";
+import { _Object_assign } from "@amateras/utils";
+
+export class HTMLUListElement extends HTMLElement {
+    static defaultAttributes = {
+        ...HTMLElement.defaultAttributes,
+        compact: false,
+        type: ''
+    }
+
+    constructor() {
+        super('ul')
+    }
+}
+
+assignAttributes(HTMLUListElement, HTMLUListElement.defaultAttributes)
+_Object_assign(globalThis, { HTMLUListElement })

package/packages/dom/src/structure/html/HTMLVarElement.ts

@@ -0,0 +1,16 @@
+import { assignAttributes } from "#lib/assignAttributes";
+import { HTMLElement } from "#structure/HTMLElement";
+import { _Object_assign } from "@amateras/utils";
+
+export class HTMLVarElement extends HTMLElement {
+    static defaultAttributes = {
+        ...HTMLElement.defaultAttributes
+    }
+
+    constructor() {
+        super('var')
+    }
+}
+
+assignAttributes(HTMLVarElement, HTMLVarElement.defaultAttributes)
+_Object_assign(globalThis, { HTMLVarElement })

package/packages/dom/src/structure/html/HTMLVideoElement.ts

@@ -0,0 +1,22 @@
+import { assignAttributes } from "#lib/assignAttributes";
+import { HTMLMediaElement } from "#structure/html/HTMLMediaElement";
+import { _Object_assign } from "@amateras/utils";
+
+export class HTMLVideoElement extends HTMLMediaElement {
+    static defaultAttributes = {
+        ...HTMLMediaElement.defaultAttributes,
+        disablePictureInPicture: false,
+        height: '',
+        poster: '',
+        videoHeight: 0,
+        videoWidth: 0,
+        width: ''
+    }
+
+    constructor() {
+        super('video')
+    }
+}
+
+assignAttributes(HTMLVideoElement, HTMLVideoElement.defaultAttributes)
+_Object_assign(globalThis, { HTMLVideoElement })

package/packages/dom/src/structure/html/HTMLWBRElement.ts

@@ -0,0 +1,16 @@
+import { assignAttributes } from "#lib/assignAttributes";
+import { HTMLElement } from "#structure/HTMLElement";
+import { _Object_assign } from "@amateras/utils";
+
+export class HTMLWBRElement extends HTMLElement {
+    static defaultAttributes = {
+        ...HTMLElement.defaultAttributes
+    }
+
+    constructor() {
+        super('wbr')
+    }
+}
+
+assignAttributes(HTMLWBRElement, HTMLWBRElement.defaultAttributes)
+_Object_assign(globalThis, { HTMLWBRElement })

package/packages/html/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@amateras/html",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts",
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/{ext/html/html.ts → packages/html/src/index.ts}

@@ -1,4 +1,4 @@
-import '#core';
+import '@amateras/core';
 import './node/$Anchor';
 import './node/$Dialog';
 import './node/$Form';

package/{ext/html → packages/html/src}/node/$Anchor.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Anchor extends $HTMLElement<HTMLAnchorElement> {
     constructor() {
@@ -42,8 +42,8 @@ export interface $Anchor extends $HTMLElement<HTMLAnchorElement> {
 
 export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top' | '_unfenced_top' | '' | '_replace';
 
-declare module '#core' {
+declare module '@amateras/core' {
     export function $(nodeName: 'a'): $Anchor
 }
 
-assignHelper(HTMLAnchorElement, $Anchor, 'a');
+assignProperties(HTMLAnchorElement, $Anchor, 'a');

package/packages/html/src/node/$Canvas.ts

@@ -0,0 +1,38 @@
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+
+export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
+    constructor() {
+        super('canvas');
+    }
+}
+
+export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {
+    /** {@link HTMLCanvasElement.height} */
+    height(height: $Parameter<number>): this;
+    height(): number;
+    /** {@link HTMLCanvasElement.width} */
+    width(width: $Parameter<number>): this;
+    width(): number;
+
+    /** {@link HTMLCanvasElement.captureStream} */
+    captureStream(frameRequestRate?: number): MediaStream;
+    /** {@link HTMLCanvasElement.getContext} */
+    getContext(contextId: "2d", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null;
+    getContext(contextId: "bitmaprenderer", options?: ImageBitmapRenderingContextSettings): ImageBitmapRenderingContext | null;
+    getContext(contextId: "webgl", options?: WebGLContextAttributes): WebGLRenderingContext | null;
+    getContext(contextId: "webgl2", options?: WebGLContextAttributes): WebGL2RenderingContext | null;
+    getContext(contextId: string, options?: any): RenderingContext | null;
+    /** {@link HTMLCanvasElement.toBlob} */
+    toBlob(callback: BlobCallback, type?: string, quality?: number): this;
+    /** {@link HTMLCanvasElement.toDataURL} */
+    toDataURL(type?: string, quality?: number): string;
+    /** {@link HTMLCanvasElement.transferControlToOffscreen} */
+    transferControlToOffscreen(): OffscreenCanvas;
+}
+
+assignProperties(HTMLCanvasElement, $Canvas, 'canvas');
+
+declare module "@amateras/core" {
+    export function $(nodeName: 'canvas'): $Canvas
+}

package/{ext/html → packages/html/src}/node/$Dialog.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Dialog extends $HTMLElement<HTMLDialogElement> {
     constructor() {
@@ -9,8 +9,8 @@ export class $Dialog extends $HTMLElement<HTMLDialogElement> {
 
 export interface $Dialog extends $HTMLElement<HTMLDialogElement> {}
 
-assignHelper(HTMLDialogElement, $Dialog, 'dialog');
+assignProperties(HTMLDialogElement, $Dialog, 'dialog');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'dialog'): $Dialog
 }

package/{ext/html → packages/html/src}/node/$Form.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Form extends $HTMLElement<HTMLFormElement> {
     constructor() {
@@ -9,8 +9,8 @@ export class $Form extends $HTMLElement<HTMLFormElement> {
 
 export interface $Form extends $HTMLElement<HTMLFormElement> {}
 
-assignHelper(HTMLFormElement, $Form, 'form');
+assignProperties(HTMLFormElement, $Form, 'form');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'form'): $Form
 }

package/{ext/html → packages/html/src}/node/$Image.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Image extends $HTMLElement<HTMLImageElement> {
     constructor() {
@@ -65,8 +65,8 @@ export interface $Image extends $HTMLElement<HTMLImageElement> {
     width(): number;
 }
 
-assignHelper(HTMLImageElement, $Image, 'img');
+assignProperties(HTMLImageElement, $Image, 'img');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'img'): $Image
 }

package/{ext/html → packages/html/src}/node/$Input.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Input extends $HTMLElement<HTMLInputElement> {
     constructor() {
@@ -186,8 +186,8 @@ export type InputType =
   | 'url'
   | 'week';
 
-assignHelper(HTMLInputElement, $Input, 'input');
+assignProperties(HTMLInputElement, $Input, 'input');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'input'): $Input
 }

package/{ext/html → packages/html/src}/node/$Label.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Label extends $HTMLElement<HTMLLabelElement> {
     constructor() {
@@ -18,8 +18,8 @@ export interface $Label extends $HTMLElement<HTMLLabelElement> {
     htmlFor(): string;
 }
 
-assignHelper(HTMLLabelElement, $Label, 'label');
+assignProperties(HTMLLabelElement, $Label, 'label');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'label'): $Label
 }

package/{ext/html → packages/html/src}/node/$Media.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Media extends $HTMLElement<HTMLMediaElement> {
     constructor() {
@@ -9,8 +9,8 @@ export class $Media extends $HTMLElement<HTMLMediaElement> {
 
 export interface $Media extends $HTMLElement<HTMLMediaElement> {}
 
-assignHelper(HTMLMediaElement, $Media, 'media');
+assignProperties(HTMLMediaElement, $Media, 'media');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'media'): $Media
 }

package/{ext/html → packages/html/src}/node/$OptGroup.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $OptGroup extends $HTMLElement<HTMLOptGroupElement> {
     constructor() {
@@ -16,8 +16,8 @@ export interface $OptGroup extends $HTMLElement<HTMLOptGroupElement> {
     label(): string;
 }
 
-assignHelper(HTMLOptGroupElement, $OptGroup, 'optgroup');
+assignProperties(HTMLOptGroupElement, $OptGroup, 'optgroup');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'optgroup'): $OptGroup
 }

package/{ext/html → packages/html/src}/node/$Option.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Option extends $HTMLElement<HTMLOptionElement> {
     constructor() {
@@ -33,8 +33,8 @@ export interface $Option extends $HTMLElement<HTMLOptionElement> {
     value(): string;
 }
 
-assignHelper(HTMLOptionElement, $Option, 'option');
+assignProperties(HTMLOptionElement, $Option, 'option');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'option'): $Option
 }

package/{ext/html → packages/html/src}/node/$Select.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $Select extends $HTMLElement<HTMLSelectElement> {
     constructor() {
@@ -69,8 +69,8 @@ export interface $Select extends $HTMLElement<HTMLSelectElement> {
     showPicker(): this;
 }
 
-assignHelper(HTMLSelectElement, $Select, 'select');
+assignProperties(HTMLSelectElement, $Select, 'select');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'select'): $Select
 }

package/{ext/html → packages/html/src}/node/$TextArea.ts

@@ -1,5 +1,5 @@
-import { assignHelper } from "#lib/assignHelper";
-import { $HTMLElement } from "#node/$HTMLElement";
+import { assignProperties } from "@amateras/core/lib/assignProperties";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
 
 export class $TextArea extends $HTMLElement<HTMLTextAreaElement> {
     constructor() {
@@ -9,8 +9,8 @@ export class $TextArea extends $HTMLElement<HTMLTextAreaElement> {
 
 export interface $TextArea extends $HTMLElement<HTMLTextAreaElement> {}
 
-assignHelper(HTMLTextAreaElement, $TextArea, 'textarea');
+assignProperties(HTMLTextAreaElement, $TextArea, 'textarea');
 
-declare module '#core' {
+declare module "@amateras/core" {
     export function $(nodeName: 'textarea'): $TextArea
 }

package/{ext → packages}/i18n/README.md

@@ -50,4 +50,24 @@ const $t = $.i18n()
 // set 'zh' as locale language
 // and fetch file automatically from path
 .locale('zh');
+```
+
+## Directory Shortcut
+
+```ts
+const $t = $.i18n('en')
+.add('en', {
+    page1: {
+        section2: {
+            button3: {
+                text: 'Too deep!'
+            }
+        }
+    }
+})
+
+const $t_button = $t.dir('page1.section2.button3');
+
+$t_button('text') // Too deep!
+$t('page1.section2.button3.text') // Too deep!
 ```

package/packages/i18n/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@amateras/i18n",
+    "peerDependencies": {
+      "@amateras/core": "workspace:*",
+      "@amateras/signal": "workspace:*",
+      "@amateras/utils": "workspace:*"
+    },
+    "imports": {
+      "#structure/*": "./src/structure/*.ts",
+      "#lib/*": "./src/lib/*.ts",
+      "#node/*": "./src/node/*.ts"
+    },
+    "exports": {
+      ".": "./src/index.ts",
+      "./structure/*": "./src/structure/*.ts",
+      "./lib/*": "./src/lib/*.ts",
+      "./node/*": "./src/node/*.ts"
+    }
+}

package/packages/i18n/src/index.ts

@@ -0,0 +1,140 @@
+import "@amateras/core"
+import { _Array_from, _instanceof, _Object_assign } from "@amateras/utils"
+import { I18n } from "#structure/I18n"
+import { I18nDictionary, type I18nDictionaryContext, type I18nDictionaryContextImporter } from "#structure/I18nDictionary";
+import { $Node, type $NodeContentResolver } from "@amateras/core/node/$Node";
+import { I18nTranslation as _I18nTranslation, I18nTranslation, type I18nTranslationOptions } from "#structure/I18nTranslation";
+
+$Node.setters.add((value, set) => {
+    if (_instanceof(value, _I18nTranslation)) {
+        value.content$.signal.subscribe(set);
+        return value.content$.value();
+    }
+})
+
+_Object_assign($, {
+    i18n(defaultLocale: string) {
+        const i18n = new I18n(defaultLocale);
+        const i18nFn = (key: string, options?: I18nTranslationOptions) => 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;
+            },
+            dir(path: string) {
+                return (key: string, options?: I18nTranslationOptions) => i18n.translate(`${path}.${key}`, options)
+            }
+        })
+        return i18nFn
+    }
+})
+
+type ResolvedAsyncDictionary<F extends I18nDictionaryContextImporter> = Awaited<ReturnType<F>>['default'];
+
+type I18nTranslationKey<T> = 
+    T extends I18nDictionaryContext
+    ?   {
+            [K in keyof T]: K extends string
+            ?   K extends '_' 
+                ?   never 
+                :   T[K] extends string
+                    ?   `${K}`
+                    :   '_' extends keyof T[K]
+                        ?   `${K}` | `${K}.${I18nTranslationKey<T[K]>}`
+                        :   `${K}.${I18nTranslationKey<T[K]>}`
+            :   never;
+        }[keyof T]
+    :   never;
+
+type I18nTranslationDirKey<T> = 
+    T extends I18nDictionaryContext
+    ?   {
+            [K in keyof T]: K extends string
+            ?   T[K] extends string 
+                ?   never
+                :   `${K}` | `${K}.${I18nTranslationDirKey<T[K]>}`
+            :   never;
+        }[keyof T]
+    :   never;
+
+type I18nTranslationParams<K extends string, T extends I18nDictionaryContext> = 
+    FindTranslationByKey<K, T> extends infer O
+    ?   O extends string
+        ?   FindParam<O>
+        :   never
+    :   never
+
+type FindParam<T extends string> = 
+    T extends `${string}$${infer Param}$${infer Rest}`
+    ?   Param extends `${string}${' '}${string}`
+        ?   Prettify<{} & FindParam<Rest>>
+        :   Prettify<Record<Param, $NodeContentResolver<I18nTranslation>> & FindParam<Rest>>
+    :   {}
+
+type FindTranslationByKey<K extends string, T extends I18nDictionaryContext> = 
+    K extends `${infer Prefix}.${infer Rest}`
+    ?   Prefix extends keyof T
+        ?   T[Prefix] extends I18nDictionaryContext
+            ?   FindTranslationByKey<Rest, T[Prefix]>
+            :   T[Prefix]
+        :   ''
+    :   T[K] extends object
+        ?   '_' extends keyof T[K]
+            ?   T[K]['_']
+            :   never
+        :   T[K]
+
+type GetDictionaryContextByKey<K extends string, T extends I18nDictionaryContext> =
+    K extends `${infer Prefix}.${infer Rest}`
+    ?   Prefix extends keyof T
+        ?   T[Prefix] extends I18nDictionaryContext
+            ?   GetDictionaryContextByKey<Rest, T[Prefix]>
+            :   never
+        :   never
+    :   T[K] extends object
+        ?   T[K]
+        :   never
+
+type Mixin<A, B> = 
+    (Omit<A, keyof B> & Omit<B, keyof A>) & {
+        [key in (keyof A & keyof B)]: 
+            A[key] extends object
+            ?   B[key] extends object
+                ?   Mixin<A[key], B[key]>
+                :   A[key] | B[key]
+            :   A[key] | B[key]  
+    }
+
+declare module "@amateras/core" {
+    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(): string;
+            locale(lang?: $Parameter<string>): this;
+            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 type I18nTranslation = _I18nTranslation;
+
+        export interface $NodeContentMap {
+            i18n: I18nTranslation
+        }
+
+        export interface $NodeParameterMap<T> {
+            i18n: I18nTranslation
+        }
+    }
+}

package/{ext → packages}/i18n/src/structure/I18n.ts

@@ -1,6 +1,7 @@
-import { _instanceof } from "amateras/lib/native";
-import { I18nText, type I18nTextOptions } from "#node/I18nText";
+import '@amateras/signal';
+import { _instanceof, _null } from "@amateras/utils";
 import { I18nDictionary } from "#structure/I18nDictionary";
+import { I18nTranslation, type I18nTranslationOptions } from "./I18nTranslation";
 
 export class I18n {
     locale$ = $.signal<string>('');
@@ -22,19 +23,22 @@ export class I18n {
     locale(): string;
     locale(locale: string): this;
     locale(locale?: string) {
-        if (!arguments.length) return this.locale$();
-        if (locale) this.locale$.set(locale)
+        if (!arguments.length) return this.locale$.value();
+        if (locale) {
+            if (!this.map.has(locale)) locale = locale.split('-')[0]!;
+            if (this.map.has(locale)) this.locale$.set(locale)
+        }
         return this;
     }
 
-    dictionary(locale = this.locale$()) {
-        if (!locale) return null;
+    dictionary(locale = this.locale$.value()) {
+        if (!locale) return _null;
         const dictionary = this.map.get(locale);
         return dictionary;
     }
 
-    translate(key: string, options?: I18nTextOptions) {
-        return new I18nText(this, key, options);
+    translate(key: string, options?: I18nTranslationOptions) {
+        return new I18nTranslation(this, key, options);
     }
 }
 

package/{ext → packages}/i18n/src/structure/I18nDictionary.ts

@@ -1,4 +1,4 @@
-import { _instanceof, isFunction, isObject } from "amateras/lib/native";
+import { _instanceof, isFunction, isObject } from "@amateras/utils";
 
 export class I18nDictionary {
     #context: I18nDictionaryContext | Promise<I18nDictionaryContext> | null = null;

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

@@ -0,0 +1,41 @@
+import { _Array_from, _null, isUndefined } from "@amateras/utils";
+import type { I18n } from "#structure/I18n";
+import { $Node, type $NodeContentResolver, type $NodeContentTypes } from "@amateras/core/node/$Node";
+import { $HTMLElement } from "@amateras/core/node/$HTMLElement";
+
+export class I18nTranslation extends $HTMLElement {
+    i18n: I18n;
+    key: string;
+    options: I18nTranslationOptions | undefined;
+    content$ = $.signal('');
+    constructor(i18n: I18n, key: string, options?: I18nTranslationOptions) {
+        super('t')
+        this.i18n = i18n;
+        this.key = key;
+        this.options = options;
+        i18n.locale$.signal.subscribe(() => this.update())
+        this.update();
+    }
+    
+    async update() {
+        const {key, i18n, options} = this;
+        const contentUpdate = (content: $NodeContentResolver<this>) => {
+            this.content(content);
+            this.content$.set(this.textContent() ?? '')
+        }
+        update: {
+            const dictionary = i18n.dictionary();
+            if (!dictionary) { contentUpdate(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 || !options) { contentUpdate(target); break update }
+            const matches = target.matchAll(/(\$([a-zA-Z0-9_]+)\$)/g);
+            const content = snippets.map(text => [text, options[matches.next().value?.at(2)!] ?? null]).flat();
+            contentUpdate(content);
+        }
+        return this;
+    }
+}
+
+export type I18nTranslationOptions = {[key: string]: any}