inline-i18n-multi 0.4.0 → 0.5.0

package/README.md

@@ -59,6 +59,10 @@ See "Hello" in your app? Just search for "Hello" in your codebase. **Done.**
 - **Missing Translation Warning** - Development-time diagnostics with customizable handlers
 - **Namespace Support** - Organize translations for large apps (`t('common:greeting')`)
 - **Debug Mode** - Visual indicators for missing/fallback translations
+- **Currency Formatting** - Locale-aware currency display (`{price, currency, USD}`)
+- **Compact Number Formatting** - Short number display (`{count, number, compact}`)
+- **Rich Text Interpolation** - Embed React components in translations (`<link>text</link>`)
+- **Lazy Loading** - Async dictionary loading on demand (`loadAsync()`)
 
 ---
 
@@ -203,7 +207,7 @@ it({
 ```
 
 **Supported ICU styles:**
-- `number`: `decimal`, `percent`, `integer`, `currency`
+- `number`: `decimal`, `percent`, `integer`, `currency`, `compact`, `compactLong`
 - `date`: `short`, `medium`, `long`, `full`
 - `time`: `short`, `medium`, `long`, `full`
 
@@ -234,6 +238,33 @@ it({ en: '{options, list, disjunction}' }, { options: ['A', 'B'] })
 // → "A or B"
 ```
 
+### Currency Formatting
+
+```typescript
+it({
+  en: 'Total: {price, currency, USD}',
+  ko: '합계: {price, currency, KRW}'
+}, { price: 42000 })
+// en → "Total: $42,000.00"  /  ko → "합계: ₩42,000"
+
+// Defaults to USD when currency code omitted
+it({ en: '{price, currency}' }, { price: 100 })
+// → "$100.00"
+```
+
+### Compact Number Formatting
+
+```typescript
+it({
+  en: '{count, number, compact} views',
+  ko: '{count, number, compact} 조회'
+}, { count: 1500000 })
+// en → "1.5M views"  /  ko → "150만 조회"
+
+it({ en: '{count, number, compactLong}' }, { count: 1500000 })
+// → "1.5 million"
+```
+
 ---
 
 ## Namespace Support
@@ -278,6 +309,67 @@ t('missing.key')  // → "[MISSING: fr] missing.key"
 
 ---
 
+## Rich Text Interpolation
+
+Embed React components within translations:
+
+```tsx
+import { RichText, useRichText } from 'inline-i18n-multi-react'
+
+// Component syntax
+<RichText
+  translations={{
+    en: 'Read <link>terms</link> and <bold>agree</bold>',
+    ko: '<link>약관</link>을 읽고 <bold>동의</bold>해주세요'
+  }}
+  components={{
+    link: (text) => <a href="/terms">{text}</a>,
+    bold: (text) => <strong>{text}</strong>
+  }}
+/>
+
+// Hook syntax
+const richT = useRichText({
+  link: (text) => <a href="/terms">{text}</a>,
+  bold: (text) => <strong>{text}</strong>
+})
+richT({ en: 'Click <link>here</link>', ko: '<link>여기</link> 클릭' })
+```
+
+---
+
+## Lazy Loading
+
+Load dictionaries asynchronously on demand:
+
+```typescript
+import { configure, loadAsync, isLoaded, t } from 'inline-i18n-multi'
+
+configure({
+  loader: (locale, namespace) => import(`./locales/${locale}/${namespace}.json`)
+})
+
+await loadAsync('ko', 'dashboard')
+t('dashboard:title')
+
+isLoaded('ko', 'dashboard')  // → true
+```
+
+### React Hook
+
+```tsx
+import { useLoadDictionaries } from 'inline-i18n-multi-react'
+
+function Dashboard() {
+  const { isLoading, error } = useLoadDictionaries('ko', 'dashboard')
+  if (isLoading) return <Spinner />
+  if (error) return <Error message={error.message} />
+  return <Content />
+}
+```
+
+---
+
 ## Configuration
 
 Configure global settings for fallback behavior and warnings:
@@ -366,6 +458,17 @@ Available helpers:
 | `configure(options)` | Configure global settings (fallback, warnings, debug) |
 | `getConfig()` | Get current configuration |
 | `resetConfig()` | Reset configuration to defaults |
+| `loadAsync(locale, namespace?)` | Asynchronously load dictionary using configured loader |
+| `isLoaded(locale, namespace?)` | Check if dictionary has been loaded |
+| `parseRichText(template, names)` | Parse rich text template into segments |
+
+### React Hooks & Components
+
+| Export | Description |
+|--------|-------------|
+| `RichText` | Rich text translation component with embedded components |
+| `useRichText(components)` | Hook returning function for rich text translations |
+| `useLoadDictionaries(locale, ns?)` | Hook for lazy loading dictionaries with loading state |
 
 ### Types
 
@@ -382,6 +485,7 @@ interface Config {
   warnOnMissing?: boolean
   onMissingTranslation?: WarningHandler
   debugMode?: boolean | DebugModeOptions
+  loader?: (locale: Locale, namespace: string) => Promise<Record<string, unknown>>
 }
 
 interface DebugModeOptions {
@@ -400,6 +504,12 @@ interface TranslationWarning {
 }
 
 type WarningHandler = (warning: TranslationWarning) => void
+
+interface RichTextSegment {
+  type: 'text' | 'component'
+  content: string
+  componentName?: string
+}
 ```
 
 ---

package/dist/index.d.mts

@@ -61,6 +61,8 @@ interface Config {
     onMissingTranslation?: WarningHandler;
     /** Enable debug mode with visual indicators (default: false) */
     debugMode?: boolean | DebugModeOptions;
+    /** Async loader function for lazy loading dictionaries */
+    loader?: (locale: Locale, namespace: string) => Promise<Record<string, unknown>>;
 }
 
 /**
@@ -158,6 +160,24 @@ declare function loadDictionary(locale: Locale, dict: Dictionary, namespace?: st
  * @param namespace - Optional namespace to clear (clears all if not specified)
  */
 declare function clearDictionaries(namespace?: string): void;
+/**
+ * Asynchronously load a dictionary using the configured loader
+ * @param locale - Locale to load
+ * @param namespace - Optional namespace (defaults to 'default')
+ * @throws Error if no loader is configured
+ *
+ * @example
+ * configure({ loader: (locale, ns) => import(`./locales/${locale}/${ns}.json`) })
+ * await loadAsync('ko', 'dashboard')
+ * t('dashboard:title')
+ */
+declare function loadAsync(locale: Locale, namespace?: string): Promise<void>;
+/**
+ * Check if a dictionary has been loaded for a locale/namespace
+ * @param locale - Locale to check
+ * @param namespace - Optional namespace (defaults to 'default')
+ */
+declare function isLoaded(locale: Locale, namespace?: string): boolean;
 /**
  * Translate using key-based lookup (i18n compatible)
  * @param key - Dot-separated translation key, optionally prefixed with namespace
@@ -191,6 +211,7 @@ declare function getDictionary(locale: Locale, namespace?: string): Dictionary |
  */
 declare function getLoadedNamespaces(): string[];
 
+type FullConfig = Required<Omit<Config, 'loader'>> & Pick<Config, 'loader'>;
 /**
  * Configure inline-i18n-multi settings
  *
@@ -205,10 +226,38 @@ declare function configure(options: Partial<Config>): void;
 /**
  * Get current configuration
  */
-declare function getConfig(): Required<Config>;
+declare function getConfig(): FullConfig;
 /**
  * Reset configuration to defaults
  */
 declare function resetConfig(): void;
 
-export { type Config, type DebugModeOptions, type Dictionaries, type Dictionary, type Locale, type PluralRules, type TranslationVars, type TranslationWarning, type Translations, type WarningHandler, __i18n_lookup, clearDictionaries, configure, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLoadedNamespaces, getLocale, hasTranslation, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadDictionaries, loadDictionary, resetConfig, setLocale, t, zh_es };
+/**
+ * Rich Text segment types
+ */
+interface RichTextSegment {
+    type: 'text' | 'component';
+    content: string;
+    /** Component name (only for type === 'component') */
+    componentName?: string;
+}
+/**
+ * Parse a template string into rich text segments.
+ * Matches patterns like <name>content</name> for each component name.
+ *
+ * @param template - The template string with component tags
+ * @param componentNames - Array of valid component names to match
+ * @returns Array of segments (text or component)
+ *
+ * @example
+ * parseRichText('Read <link>terms</link> and <bold>agree</bold>', ['link', 'bold'])
+ * // [
+ * //   { type: 'text', content: 'Read ' },
+ * //   { type: 'component', content: 'terms', componentName: 'link' },
+ * //   { type: 'text', content: ' and ' },
+ * //   { type: 'component', content: 'agree', componentName: 'bold' },
+ * // ]
+ */
+declare function parseRichText(template: string, componentNames: string[]): RichTextSegment[];
+
+export { type Config, type DebugModeOptions, type Dictionaries, type Dictionary, type Locale, type PluralRules, type RichTextSegment, type TranslationVars, type TranslationWarning, type Translations, type WarningHandler, __i18n_lookup, clearDictionaries, configure, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLoadedNamespaces, getLocale, hasTranslation, isLoaded, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadAsync, loadDictionaries, loadDictionary, parseRichText, resetConfig, setLocale, t, zh_es };

package/dist/index.d.ts

@@ -61,6 +61,8 @@ interface Config {
     onMissingTranslation?: WarningHandler;
     /** Enable debug mode with visual indicators (default: false) */
     debugMode?: boolean | DebugModeOptions;
+    /** Async loader function for lazy loading dictionaries */
+    loader?: (locale: Locale, namespace: string) => Promise<Record<string, unknown>>;
 }
 
 /**
@@ -158,6 +160,24 @@ declare function loadDictionary(locale: Locale, dict: Dictionary, namespace?: st
  * @param namespace - Optional namespace to clear (clears all if not specified)
  */
 declare function clearDictionaries(namespace?: string): void;
+/**
+ * Asynchronously load a dictionary using the configured loader
+ * @param locale - Locale to load
+ * @param namespace - Optional namespace (defaults to 'default')
+ * @throws Error if no loader is configured
+ *
+ * @example
+ * configure({ loader: (locale, ns) => import(`./locales/${locale}/${ns}.json`) })
+ * await loadAsync('ko', 'dashboard')
+ * t('dashboard:title')
+ */
+declare function loadAsync(locale: Locale, namespace?: string): Promise<void>;
+/**
+ * Check if a dictionary has been loaded for a locale/namespace
+ * @param locale - Locale to check
+ * @param namespace - Optional namespace (defaults to 'default')
+ */
+declare function isLoaded(locale: Locale, namespace?: string): boolean;
 /**
  * Translate using key-based lookup (i18n compatible)
  * @param key - Dot-separated translation key, optionally prefixed with namespace
@@ -191,6 +211,7 @@ declare function getDictionary(locale: Locale, namespace?: string): Dictionary |
  */
 declare function getLoadedNamespaces(): string[];
 
+type FullConfig = Required<Omit<Config, 'loader'>> & Pick<Config, 'loader'>;
 /**
  * Configure inline-i18n-multi settings
  *
@@ -205,10 +226,38 @@ declare function configure(options: Partial<Config>): void;
 /**
  * Get current configuration
  */
-declare function getConfig(): Required<Config>;
+declare function getConfig(): FullConfig;
 /**
  * Reset configuration to defaults
  */
 declare function resetConfig(): void;
 
-export { type Config, type DebugModeOptions, type Dictionaries, type Dictionary, type Locale, type PluralRules, type TranslationVars, type TranslationWarning, type Translations, type WarningHandler, __i18n_lookup, clearDictionaries, configure, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLoadedNamespaces, getLocale, hasTranslation, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadDictionaries, loadDictionary, resetConfig, setLocale, t, zh_es };
+/**
+ * Rich Text segment types
+ */
+interface RichTextSegment {
+    type: 'text' | 'component';
+    content: string;
+    /** Component name (only for type === 'component') */
+    componentName?: string;
+}
+/**
+ * Parse a template string into rich text segments.
+ * Matches patterns like <name>content</name> for each component name.
+ *
+ * @param template - The template string with component tags
+ * @param componentNames - Array of valid component names to match
+ * @returns Array of segments (text or component)
+ *
+ * @example
+ * parseRichText('Read <link>terms</link> and <bold>agree</bold>', ['link', 'bold'])
+ * // [
+ * //   { type: 'text', content: 'Read ' },
+ * //   { type: 'component', content: 'terms', componentName: 'link' },
+ * //   { type: 'text', content: ' and ' },
+ * //   { type: 'component', content: 'agree', componentName: 'bold' },
+ * // ]
+ */
+declare function parseRichText(template: string, componentNames: string[]): RichTextSegment[];
+
+export { type Config, type DebugModeOptions, type Dictionaries, type Dictionary, type Locale, type PluralRules, type RichTextSegment, type TranslationVars, type TranslationWarning, type Translations, type WarningHandler, __i18n_lookup, clearDictionaries, configure, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLoadedNamespaces, getLocale, hasTranslation, isLoaded, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadAsync, loadDictionaries, loadDictionary, parseRichText, resetConfig, setLocale, t, zh_es };

package/dist/index.js

@@ -115,6 +115,67 @@ function formatTimeElement(el, vars, locale) {
     return `{${el.value}}`;
   }
 }
+var CURRENCY_PATTERN = /\{(\w+),\s*currency(?:,\s*(\w+))?\}/g;
+function preprocessCurrency(template) {
+  const replacements = /* @__PURE__ */ new Map();
+  let counter = 0;
+  const processed = template.replace(CURRENCY_PATTERN, (_, variable, currencyCode) => {
+    const placeholder = `__CURRENCY_${counter++}__`;
+    replacements.set(placeholder, { variable, currencyCode: currencyCode || "USD" });
+    return `{${placeholder}}`;
+  });
+  return { processed, replacements };
+}
+function formatCurrencyValue(variableName, currencyCode, vars, locale) {
+  const value = vars[variableName];
+  if (value === void 0) {
+    return `{${variableName}}`;
+  }
+  const num = typeof value === "number" ? value : Number(value);
+  if (isNaN(num)) {
+    return `{${variableName}}`;
+  }
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: currencyCode
+    }).format(num);
+  } catch {
+    return String(num);
+  }
+}
+var COMPACT_NUMBER_PATTERN = /\{(\w+),\s*number,\s*(compact|compactLong)\}/g;
+function preprocessCompactNumber(template) {
+  const replacements = /* @__PURE__ */ new Map();
+  let counter = 0;
+  const processed = template.replace(COMPACT_NUMBER_PATTERN, (_, variable, style) => {
+    const placeholder = `__COMPACT_${counter++}__`;
+    replacements.set(placeholder, {
+      variable,
+      display: style === "compactLong" ? "long" : "short"
+    });
+    return `{${placeholder}}`;
+  });
+  return { processed, replacements };
+}
+function formatCompactNumber(variableName, display, vars, locale) {
+  const value = vars[variableName];
+  if (value === void 0) {
+    return `{${variableName}}`;
+  }
+  const num = typeof value === "number" ? value : Number(value);
+  if (isNaN(num)) {
+    return `{${variableName}}`;
+  }
+  try {
+    return new Intl.NumberFormat(locale, {
+      notation: "compact",
+      compactDisplay: display
+    }).format(num);
+  } catch {
+    return String(num);
+  }
+}
 function getRelativeTimeUnit(date, now = /* @__PURE__ */ new Date()) {
   const diffMs = date.getTime() - now.getTime();
   const diffSeconds = Math.round(diffMs / 1e3);
@@ -194,10 +255,20 @@ function formatListValue(variableName, type, style, vars, locale) {
   }
 }
 function interpolateICU(template, vars, locale) {
-  const { processed: afterRelTime, replacements: relTimeReplacements } = preprocessRelativeTime(template);
+  const { processed: afterCurrency, replacements: currencyReplacements } = preprocessCurrency(template);
+  const { processed: afterCompact, replacements: compactReplacements } = preprocessCompactNumber(afterCurrency);
+  const { processed: afterRelTime, replacements: relTimeReplacements } = preprocessRelativeTime(afterCompact);
   const { processed: afterList, replacements: listReplacements } = preprocessList(afterRelTime);
   const ast = icuMessageformatParser.parse(afterList);
   let result = formatElements(ast, vars, locale, null);
+  for (const [placeholder, { variable, currencyCode }] of currencyReplacements) {
+    const formatted = formatCurrencyValue(variable, currencyCode, vars, locale);
+    result = result.replace(`{${placeholder}}`, formatted);
+  }
+  for (const [placeholder, { variable, display }] of compactReplacements) {
+    const formatted = formatCompactNumber(variable, display, vars, locale);
+    result = result.replace(`{${placeholder}}`, formatted);
+  }
   for (const [placeholder, { variable, style }] of relTimeReplacements) {
     const formatted = formatRelativeTimeValue(variable, style, vars, locale);
     result = result.replace(`{${placeholder}}`, formatted);
@@ -270,7 +341,7 @@ function formatSelect(el, vars, locale) {
   }
   return `{${el.value}}`;
 }
-var ICU_PATTERN = /\{[^}]+,\s*(plural|select|selectordinal|number|date|time|relativeTime|list)\s*[,}]/;
+var ICU_PATTERN = /\{[^}]+,\s*(plural|select|selectordinal|number|date|time|relativeTime|list|currency)\s*[,}]/;
 function hasICUPattern(template) {
   return ICU_PATTERN.test(template);
 }
@@ -318,7 +389,8 @@ var defaultConfig = {
   fallbackChain: {},
   warnOnMissing: isDevMode(),
   onMissingTranslation: defaultWarningHandler,
-  debugMode: false
+  debugMode: false,
+  loader: void 0
 };
 var config = { ...defaultConfig };
 function configure(options) {
@@ -521,6 +593,11 @@ var zh_es = createPair("zh", "es");
 var DEFAULT_NAMESPACE = "default";
 var NAMESPACE_SEPARATOR = ":";
 var namespacedDictionaries = {};
+var loadingState = {};
+var loadingPromises = /* @__PURE__ */ new Map();
+function getLoadingKey(locale, namespace) {
+  return `${namespace}:${locale}`;
+}
 function parseKey(fullKey) {
   const separatorIndex = fullKey.indexOf(NAMESPACE_SEPARATOR);
   if (separatorIndex > 0) {
@@ -557,10 +634,50 @@ function loadDictionary(locale, dict, namespace) {
 function clearDictionaries(namespace) {
   if (namespace) {
     delete namespacedDictionaries[namespace];
+    for (const key of Object.keys(loadingState)) {
+      if (key.startsWith(`${namespace}:`)) {
+        delete loadingState[key];
+        loadingPromises.delete(key);
+      }
+    }
   } else {
     namespacedDictionaries = {};
+    loadingState = {};
+    loadingPromises.clear();
   }
 }
+async function loadAsync(locale, namespace) {
+  const ns = namespace || DEFAULT_NAMESPACE;
+  const cfg = getConfig();
+  if (!cfg.loader) {
+    throw new Error("No loader configured. Call configure({ loader: ... }) first.");
+  }
+  const key = getLoadingKey(locale, ns);
+  if (loadingState[key] === "loaded") return;
+  if (loadingPromises.has(key)) {
+    return loadingPromises.get(key);
+  }
+  const promise = (async () => {
+    loadingState[key] = "loading";
+    try {
+      const dict = await cfg.loader(locale, ns);
+      loadDictionary(locale, dict, ns);
+      loadingState[key] = "loaded";
+    } catch (error) {
+      loadingState[key] = "error";
+      throw error;
+    } finally {
+      loadingPromises.delete(key);
+    }
+  })();
+  loadingPromises.set(key, promise);
+  return promise;
+}
+function isLoaded(locale, namespace) {
+  const ns = namespace || DEFAULT_NAMESPACE;
+  const key = getLoadingKey(locale, ns);
+  return loadingState[key] === "loaded";
+}
 function getNestedValue(dict, key) {
   const parts = key.split(".");
   let current = dict;
@@ -670,6 +787,42 @@ function getLoadedNamespaces() {
   return Object.keys(namespacedDictionaries);
 }
 
+// src/richtext.ts
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function parseRichText(template, componentNames) {
+  if (componentNames.length === 0) {
+    return [{ type: "text", content: template }];
+  }
+  const segments = [];
+  const namesPattern = componentNames.map(escapeRegExp).join("|");
+  const regex = new RegExp(`<(${namesPattern})>(.*?)</\\1>`, "gs");
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(template)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        type: "text",
+        content: template.slice(lastIndex, match.index)
+      });
+    }
+    segments.push({
+      type: "component",
+      content: match[2] ?? "",
+      componentName: match[1]
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < template.length) {
+    segments.push({
+      type: "text",
+      content: template.slice(lastIndex)
+    });
+  }
+  return segments;
+}
+
 exports.__i18n_lookup = __i18n_lookup;
 exports.clearDictionaries = clearDictionaries;
 exports.configure = configure;
@@ -684,6 +837,7 @@ exports.getLoadedLocales = getLoadedLocales;
 exports.getLoadedNamespaces = getLoadedNamespaces;
 exports.getLocale = getLocale;
 exports.hasTranslation = hasTranslation;
+exports.isLoaded = isLoaded;
 exports.it = it;
 exports.it_de = it_de;
 exports.it_es = it_es;
@@ -692,8 +846,10 @@ exports.it_ja = it_ja;
 exports.it_zh = it_zh;
 exports.ja_es = ja_es;
 exports.ja_zh = ja_zh;
+exports.loadAsync = loadAsync;
 exports.loadDictionaries = loadDictionaries;
 exports.loadDictionary = loadDictionary;
+exports.parseRichText = parseRichText;
 exports.resetConfig = resetConfig;
 exports.setLocale = setLocale;
 exports.t = t;