@hyvor/design 0.0.53 → 0.0.55

package/dist/components/Internationalization/InternationalizationProvider.svelte

@@ -2,7 +2,10 @@
 import { InternationalizationService } from "./i18n.js";
 export let languages;
 const i18n = new InternationalizationService(languages);
+const locale = i18n.locale;
 setContext("i18n", i18n);
 </script>
 
-<slot />
+{#key $locale}
+    <slot />
+{/key}

package/dist/components/Internationalization/T.svelte

@@ -2,6 +2,7 @@
 import { getStringByKey, InternationalizationService } from "./i18n.js";
 import { IntlMessageFormat } from "intl-messageformat";
 import { browser } from "$app/environment";
+import { getMessage as getMessageBase } from "./t.js";
 export let key;
 export let params = {};
 let hasComponentParams = false;
@@ -9,12 +10,20 @@ function getParamsForBackend() {
   let retParams = {};
   for (let [key2, value] of Object.entries(params)) {
     let newValue;
-    if (typeof value === "object" && value !== null && value.hasOwnProperty("component")) {
-      newValue = (chunks) => {
-        const children = typeof chunks === "string" ? chunks : chunks.join("");
-        return children;
-      };
-      hasComponentParams = true;
+    if (typeof value === "object" && value !== null) {
+      if (value.hasOwnProperty("component")) {
+        newValue = (chunks) => {
+          const children = typeof chunks === "string" ? chunks : chunks.join("");
+          return children;
+        };
+        hasComponentParams = true;
+      } else if (value.hasOwnProperty("element")) {
+        newValue = (chunks) => {
+          const children = typeof chunks === "string" ? chunks : chunks.join("");
+          const el = value.element;
+          return `<${el}>${children}</${el}>`;
+        };
+      }
     } else {
       newValue = value;
     }
@@ -53,12 +62,12 @@ const locale = i18n.locale;
 const strings = i18n.strings;
 let message = getMessage(getParamsForBackend());
 function getMessage(processedParams) {
-  const string = getStringByKey($strings, key);
-  if (string) {
-    const formatter = new IntlMessageFormat(string, $locale);
-    return formatter.format(processedParams);
-  }
-  return "";
+  return getMessageBase(
+    key,
+    processedParams,
+    $strings,
+    $locale
+  );
 }
 function bindComponents() {
   for (let [id, binding] of componentBindings) {
@@ -81,7 +90,7 @@ async function renderFrontend() {
 }
 let mounted = false;
 $: {
-  $locale, $strings, params;
+  params;
   if (browser && mounted) {
     renderFrontend();
   }

package/dist/components/Internationalization/T.svelte.d.ts

@@ -4,10 +4,11 @@ import { type PrimitiveType } from 'intl-messageformat';
 declare const __propDef: {
     props: {
         key: string;
-        params?: Record<string, {
-            component: ComponentType;
+        params?: Record<string, PrimitiveType | {
+            element?: string | undefined;
+            component?: ComponentType | undefined;
             props?: Record<string, any> | undefined;
-        } | PrimitiveType> | undefined;
+        }> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Internationalization/i18n.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="svelte" />
+import type { PrimitiveType } from "intl-messageformat";
 import { type Readable, type Writable } from "svelte/store";
 export type i18nLoaderType = () => Promise<any>;
 interface LanguageBase {
@@ -28,6 +29,7 @@ export declare class InternationalizationService {
     register(language: Language): void;
     found(code: string): boolean;
     languageByCode(code: string): LanguageWithLoader | undefined;
+    t(key: string, params?: Record<string, PrimitiveType>): string;
 }
 export declare function getStringByKey(messages: Record<string, any>, key: string): string | undefined;
 export {};

package/dist/components/Internationalization/i18n.js

@@ -1,5 +1,6 @@
 import { deepmerge } from "deepmerge-ts";
 import { writable, derived } from "svelte/store";
+import { t } from "./t.js";
 export class InternationalizationService {
     languages = [];
     locale;
@@ -32,14 +33,15 @@ export class InternationalizationService {
         this.strings.set(merged);
     }
     setLocale(code) {
-        this.locale.set(code);
         if (this.stringsCache.has(code)) {
             this.setStrings(code);
+            this.locale.set(code);
         }
         else {
             this.languageByCode(code)?.loader().then(({ default: strings }) => {
                 this.stringsCache.set(code, strings);
                 this.setStrings(code);
+                this.locale.set(code);
             });
         }
     }
@@ -57,6 +59,9 @@ export class InternationalizationService {
     languageByCode(code) {
         return this.languages.find(l => l.code === code);
     }
+    t(key, params = {}) {
+        return t(key, params, this);
+    }
 }
 export function getStringByKey(messages, key) {
     const keys = key.split('.');

package/dist/components/Internationalization/t.d.ts

@@ -0,0 +1,8 @@
+import { type PrimitiveType } from "intl-messageformat";
+import { type InternationalizationService } from "./i18n.js";
+type ParamValue = PrimitiveType | ((chunks: string | string[]) => string);
+type ParamsType = Record<string, ParamValue>;
+export declare function getMessage(key: string, params: ParamsType, $strings: Record<string, any>, $locale: string): string;
+export type TParams = Record<string, PrimitiveType>;
+export declare function t(key: string, params?: Record<string, PrimitiveType>, i18n?: InternationalizationService | null): string;
+export {};

package/dist/components/Internationalization/t.js

@@ -0,0 +1,18 @@
+import { IntlMessageFormat } from "intl-messageformat";
+import { getContext } from "svelte";
+import { get } from "svelte/store";
+import { getStringByKey } from "./i18n.js";
+export function getMessage(key, params, $strings, $locale) {
+    const string = getStringByKey($strings, key);
+    if (string) {
+        const formatter = new IntlMessageFormat(string, $locale);
+        return formatter.format(params);
+    }
+    return '';
+}
+export function t(key, params = {}, i18n = null) {
+    i18n = i18n || getContext('i18n');
+    const $locale = get(i18n.locale);
+    const $strings = get(i18n.strings);
+    return getMessage(key, params, $strings, $locale);
+}

package/dist/components/index.d.ts

@@ -45,3 +45,4 @@ export { default as InternationalizationProvider } from './Internationalization/
 export { default as LanguageToggle } from './Internationalization/LanguageToggle.svelte';
 export { default as T } from './Internationalization/T.svelte';
 export { type Language as InternationalizationLanguage, InternationalizationService } from './Internationalization/i18n.js';
+export { t } from './Internationalization/t.js';

package/dist/components/index.js

@@ -47,3 +47,4 @@ export { default as InternationalizationProvider } from './Internationalization/
 export { default as LanguageToggle } from './Internationalization/LanguageToggle.svelte';
 export { default as T } from './Internationalization/T.svelte';
 export { InternationalizationService } from './Internationalization/i18n.js';
+export { t } from './Internationalization/t.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.53",
+	"version": "0.0.55",
 	"license": "MIT",
 	"private": false,
 	"scripts": {