amateras 0.4.2 → 0.6.0

package/README.md

@@ -29,37 +29,33 @@ $('p').css(paragraphStyle).content([
 ])
 ```
 
-## DOM Operating
+## State Management
 ```ts
 import 'amateras';
+import 'amateras/signal';
 
+// define a signal with value 0
 const count$ = $.signal(0);
 
-$(document.body).content([
-    $('button')
-        .content('Click me')
-        .class('class1', 'class2')
-        .on('click', () => count$(oldValue => oldValue + 1)),
-    $('p').content($`Clicked ${count$} times.`)
-])
-```
+// this variable will be auto recalculate when count$ changes
+const doubleCount$ = $.compute(() => count$() * 2);
 
-## State Management
-```ts
-import 'amateras';
+// the console message will fired when count$ changes
+$.effect(() => console.log( count$() ))
 
-const count$ = $.signal(0);
-const doubleCount$ = $.compute(() => count() * 2);
+$(document.body).content([
+    // Display Counts
+    $('p').content( $`Counts: ${count$}` ),
 
-setInterval(() => count$(oldValue => oldValue + 1), 1000);
+    // Display Double Counts
+    $('p').content( $`Double Counts: ${doubleCount$}` ),
 
-$(document.body).content([
-    $('p').content($`Count: ${count$}`),
-    $('p').content($`Double: ${doubleCount$}`)
+    // Create a button that make counts plus 1 on click
+    $('button').content('Add Count').on('click', () => count$.set(value => value + 1))
 ])
 ```
 
-## HTMLElement Methods Import
+## HTMLElement Native Methods Import
 ```ts
 import 'amateras';
 import 'amateras/html';
@@ -99,11 +95,14 @@ $(document.body).content([
 ```
 
 ## Packages
-The packages size result using Vite 7.0 with default bundle settings, polyfills code size included.
+The packages size result using Vite 7.0 with default bundle settings, polyfills code included.
 | Package name | Size | Size(gzip) | Description |
 | --- | --- | --- | --- |
-| amateras | 5.64 kB | 2.48 kB | Core |
-| amateras/html | 0.97 kB | 0.25 kB | Import HTMLElement types and methods |
-| [amateras/css](./ext/css/README.md) | 3.65 kB | 1.41 kB | Style in JS |
-| [amateras/router](./ext/router/README.md) | 3.74 kB | 1.69 kB | Amateras Router |
-| [amateras/i18n](./ext/i18n/README.md) | 1.49 kB | 0.57 kB | I18n translations |
+| amateras | 4.79 kB | 2.20 kB | Core |
+| amateras/html | 0.98 kB | 0.26 kB | Import HTMLElement types and methods |
+| [amateras/signal](./ext/signal/README.md) | 1.26 kB | 0.49 kB | Reactive data |
+| [amateras/css](./ext/css/README.md) | 3.70 kB | 1.44 kB | Style in JS |
+| [amateras/router](./ext/router/README.md) | 3.70 kB | 1.64 kB | Amateras Router |
+| [amateras/i18n](./ext/i18n/README.md) | 3.02 kB | 1.13 kB | I18n translations |
+| [amateras/idb](./ext/idb/README.md) | 5.39 kB | 2.06 kB | IndexedDB Builder and API Wrapper |
+| [amateras/markdown](./ext/markdown/README.md) | 6.81 kB | 2.68 kB | Markdown Converter |

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

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

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

@@ -1,4 +1,4 @@
-import { assignHelper } from "#lib/assignHelper";
+import { assignProperties } from "#lib/assignProperties";
 import { $HTMLElement } from "#node/$HTMLElement";
 
 export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
@@ -9,7 +9,7 @@ export class $Canvas extends $HTMLElement<HTMLCanvasElement> {
 
 export interface $Canvas extends $HTMLElement<HTMLCanvasElement> {}
 
-assignHelper(HTMLCanvasElement, $Canvas, 'canvas');
+assignProperties(HTMLCanvasElement, $Canvas, 'canvas');
 
 declare module '#core' {
     export function $(nodeName: 'canvas'): $Canvas

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { assignHelper } from "#lib/assignHelper";
+import { assignProperties } from "#lib/assignProperties";
 import { $HTMLElement } from "#node/$HTMLElement";
 
 export class $Input extends $HTMLElement<HTMLInputElement> {
@@ -143,8 +143,8 @@ export interface $Input extends $HTMLElement<HTMLInputElement> {
     step(step: $Parameter<string>): this;
     step(): string;
     /** {@link HTMLInputElement.type} */
-    type(type: $Parameter<string>): this;
-    type(): string;
+    type(type: $Parameter<InputType>): this;
+    type(): InputType;
     /** {@link HTMLInputElement.value} */
     value(value: $Parameter<string>): this;
     value(): string;
@@ -162,7 +162,31 @@ export interface $Input extends $HTMLElement<HTMLInputElement> {
     width(): number;
 }
 
-assignHelper(HTMLInputElement, $Input, 'input');
+export type InputType =
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week';
+
+assignProperties(HTMLInputElement, $Input, 'input');
 
 declare module '#core' {
     export function $(nodeName: 'input'): $Input

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

@@ -1,4 +1,4 @@
-import { assignHelper } from "#lib/assignHelper";
+import { assignProperties } from "#lib/assignProperties";
 import { $HTMLElement } from "#node/$HTMLElement";
 
 export class $Label extends $HTMLElement<HTMLLabelElement> {
@@ -7,9 +7,18 @@ export class $Label extends $HTMLElement<HTMLLabelElement> {
     }
 }
 
-export interface $Label extends $HTMLElement<HTMLLabelElement> {}
+export interface $Label extends $HTMLElement<HTMLLabelElement> {
+    /** {@link HTMLLabelElement.control} */
+    readonly control: HTMLElement | null;
+    /** {@link HTMLLabelElement.form} */
+    readonly form: HTMLFormElement | null;
+    
+    /** {@link HTMLLabelElement.htmlFor} */
+    htmlFor(htmlFor: $Parameter<string>): this;
+    htmlFor(): string;
+}
 
-assignHelper(HTMLLabelElement, $Label, 'label');
+assignProperties(HTMLLabelElement, $Label, 'label');
 
 declare module '#core' {
     export function $(nodeName: 'label'): $Label

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

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

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

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

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

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

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

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

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

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

package/ext/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/ext/i18n/src/index.ts

@@ -1,13 +1,29 @@
 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";
+import { $Node, $Text } from "amateras/node/$Node";
+import { I18nTranslation as _I18nTranslation, type I18nTranslationOptions } from "#structure/I18nTranslation";
+
+$Node.processors.add((_, content) => {
+    if (_instanceof(content, _I18nTranslation)) {
+        const text = new $Text();
+        $.effect(() => text.textContent(content.content$()))
+        return [text]
+    }
+})
+
+$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?: I18nTextOptions) => i18n.translate(key, options);
+        const i18nFn = (key: string, options?: I18nTranslationOptions) => i18n.translate(key, options);
         _Object_assign(i18nFn, { 
             i18n,
             locale(locale: string) {
@@ -22,6 +38,9 @@ _Object_assign($, {
             delete(lang: string) {
                 i18n.map.delete(lang);
                 return this;
+            },
+            dir(path: string) {
+                return (key: string, options?: I18nTranslationOptions) => i18n.translate(`${path}.${key}`, options)
             }
         })
         return i18nFn
@@ -30,25 +49,100 @@ _Object_assign($, {
 
 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;
+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, any> & 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 = {}> {
-            (path: DeepKeys<D>, ...args: any[]): I18nText;
+            <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<D | (F extends I18nDictionaryContextImporter ? ResolvedAsyncDictionary<F> : F)>;
+            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 I18nText = _I18nText;
+        export type I18nTranslation = _I18nTranslation;
+
+        export interface $NodeContentMap {
+            i18n: I18nTranslation
+        }
+
+        export interface $NodeParameterMap<T> {
+            i18n: I18nTranslation
+        }
     }
 }

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

@@ -1,6 +1,7 @@
-import { _instanceof } from "amateras/lib/native";
-import { I18nText, type I18nTextOptions } from "#node/I18nText";
+import { _instanceof, _null } from "amateras/lib/native";
 import { I18nDictionary } from "#structure/I18nDictionary";
+import 'amateras/signal';
+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/i18n/src/structure/I18nDictionary.ts

@@ -1,10 +1,10 @@
-import { _instanceof, isObject } from "amateras/lib/native";
+import { _instanceof, isFunction, isObject } from "amateras/lib/native";
 
 export class I18nDictionary {
     #context: I18nDictionaryContext | Promise<I18nDictionaryContext> | null = null;
     #fetch: I18nDictionaryContextImporter | null = null;
     constructor(resolver: I18nDictionaryContext | I18nDictionaryContextImporter) {
-        if (_instanceof(resolver, Function)) this.#fetch = resolver;
+        if (isFunction(resolver)) this.#fetch = resolver;
         else this.#context = resolver;
     }
 

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

@@ -0,0 +1,35 @@
+import { _Array_from, _null, isUndefined } from "amateras/lib/native";
+import type { I18n } from "#structure/I18n";
+
+export class I18nTranslation {
+    i18n: I18n;
+    key: string;
+    options: I18nTranslationOptions | undefined;
+    content$ = $.signal('');
+    constructor(i18n: I18n, key: string, options?: I18nTranslationOptions) {
+        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: string) => this.content$.set(content);
+        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].join('')).join('');
+            contentUpdate(content);
+        }
+        return this;
+    }
+}
+
+export type I18nTranslationOptions = {[key: string]: any}