inline-i18n-multi-react 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -1
- package/dist/index.d.mts +10 -2
- package/dist/index.d.ts +10 -2
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -152,6 +152,37 @@ configure({
|
|
|
152
152
|
const saved = restoreLocale() // returns locale string or undefined
|
|
153
153
|
```
|
|
154
154
|
|
|
155
|
+
## Translation Scope (v0.8.0)
|
|
156
|
+
|
|
157
|
+
Scope translations to a key prefix with `useScopedT`. Useful for large apps where each component only needs a subset of the dictionary.
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
import { useScopedT } from 'inline-i18n-multi-react'
|
|
161
|
+
|
|
162
|
+
function Dashboard() {
|
|
163
|
+
const t = useScopedT('dashboard')
|
|
164
|
+
return (
|
|
165
|
+
<div>
|
|
166
|
+
<h1>{t('title')}</h1> {/* resolves to 'dashboard.title' */}
|
|
167
|
+
<p>{t('subtitle')}</p> {/* resolves to 'dashboard.subtitle' */}
|
|
168
|
+
</div>
|
|
169
|
+
)
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
You can also create a reusable scope with `createScope`:
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
import { createScope } from 'inline-i18n-multi-react'
|
|
177
|
+
|
|
178
|
+
const scope = createScope('settings.profile')
|
|
179
|
+
|
|
180
|
+
function ProfileForm() {
|
|
181
|
+
const t = useScopedT(scope)
|
|
182
|
+
return <label>{t('name')}</label> {/* resolves to 'settings.profile.name' */}
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
155
186
|
## Automatic Locale Detection
|
|
156
187
|
|
|
157
188
|
```tsx
|
|
@@ -189,6 +220,7 @@ function AutoDetect() {
|
|
|
189
220
|
| `RichText` | Rich text translation component |
|
|
190
221
|
| `useRichText(components)` | Hook for rich text translations |
|
|
191
222
|
| `useLoadDictionaries(locale, namespace?)` | Lazy loading hook with loading/error state |
|
|
223
|
+
| `useScopedT(prefix)` | Hook returning scoped `t()` bound to a key prefix |
|
|
192
224
|
| `useDetectedLocale(options)` | Auto-detect and set locale on mount |
|
|
193
225
|
|
|
194
226
|
### Re-exported from Core
|
|
@@ -200,7 +232,7 @@ function AutoDetect() {
|
|
|
200
232
|
`getLocale`, `setLocale`
|
|
201
233
|
|
|
202
234
|
**Key-based translations:**
|
|
203
|
-
`t`, `loadDictionaries`, `loadDictionary`, `clearDictionaries`, `hasTranslation`, `getLoadedLocales`, `getDictionary`, `loadAsync`, `isLoaded`
|
|
235
|
+
`t`, `loadDictionaries`, `loadDictionary`, `clearDictionaries`, `hasTranslation`, `getLoadedLocales`, `getDictionary`, `loadAsync`, `isLoaded`, `createScope`
|
|
204
236
|
|
|
205
237
|
**Configuration:**
|
|
206
238
|
`configure`, `getConfig`, `resetConfig`
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React, { ReactNode } from 'react';
|
|
3
3
|
import { Locale, TranslationVars, DetectLocaleOptions, Translations } from 'inline-i18n-multi';
|
|
4
|
-
export { CustomFormatter, DetectLocaleOptions, DetectSource, Dictionaries, Dictionary, Locale, PluralRules, RichTextSegment, TranslationVars, Translations, clearDictionaries, clearFormatters, clearICUCache, configure, detectLocale, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLocale, hasTranslation, isLoaded, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadAsync, loadDictionaries, loadDictionary, parseRichText, registerFormatter, resetConfig, restoreLocale, setLocale, t, zh_es } from 'inline-i18n-multi';
|
|
4
|
+
export { CustomFormatter, DetectLocaleOptions, DetectSource, Dictionaries, Dictionary, Locale, PluralRules, RichTextSegment, TranslationVars, Translations, clearDictionaries, clearFormatters, clearICUCache, configure, createScope, detectLocale, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLocale, hasTranslation, isLoaded, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadAsync, loadDictionaries, loadDictionary, parseRichText, registerFormatter, resetConfig, restoreLocale, setLocale, t, zh_es } from 'inline-i18n-multi';
|
|
5
5
|
|
|
6
6
|
interface LocaleProviderProps {
|
|
7
7
|
/**
|
|
@@ -62,6 +62,14 @@ declare function useLoadDictionaries(locale: Locale, namespace?: string): {
|
|
|
62
62
|
* return <Content />
|
|
63
63
|
* }
|
|
64
64
|
*/
|
|
65
|
+
/**
|
|
66
|
+
* Get a scoped translation function bound to current locale and namespace
|
|
67
|
+
* @param namespace - Namespace to scope to
|
|
68
|
+
* @example
|
|
69
|
+
* const tc = useScopedT('common')
|
|
70
|
+
* tc('greeting') // equivalent to t('common:greeting')
|
|
71
|
+
*/
|
|
72
|
+
declare function useScopedT(namespace: string): (key: string, vars?: TranslationVars) => string;
|
|
65
73
|
declare function useDetectedLocale(options: DetectLocaleOptions): void;
|
|
66
74
|
|
|
67
75
|
interface TPropsShorthand {
|
|
@@ -139,4 +147,4 @@ declare function RichText({ translations, components, vars }: RichTextProps): Re
|
|
|
139
147
|
*/
|
|
140
148
|
declare function useRichText(components: Record<string, ComponentRenderer>): (translations: Translations, vars?: TranslationVars) => ReactNode;
|
|
141
149
|
|
|
142
|
-
export { LocaleProvider, RichText, T, useDetectedLocale, useLoadDictionaries, useLocale, useRichText, useT };
|
|
150
|
+
export { LocaleProvider, RichText, T, useDetectedLocale, useLoadDictionaries, useLocale, useRichText, useScopedT, useT };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React, { ReactNode } from 'react';
|
|
3
3
|
import { Locale, TranslationVars, DetectLocaleOptions, Translations } from 'inline-i18n-multi';
|
|
4
|
-
export { CustomFormatter, DetectLocaleOptions, DetectSource, Dictionaries, Dictionary, Locale, PluralRules, RichTextSegment, TranslationVars, Translations, clearDictionaries, clearFormatters, clearICUCache, configure, detectLocale, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLocale, hasTranslation, isLoaded, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadAsync, loadDictionaries, loadDictionary, parseRichText, registerFormatter, resetConfig, restoreLocale, setLocale, t, zh_es } from 'inline-i18n-multi';
|
|
4
|
+
export { CustomFormatter, DetectLocaleOptions, DetectSource, Dictionaries, Dictionary, Locale, PluralRules, RichTextSegment, TranslationVars, Translations, clearDictionaries, clearFormatters, clearICUCache, configure, createScope, detectLocale, en_de, en_es, en_fr, en_ja, en_zh, getConfig, getDictionary, getLoadedLocales, getLocale, hasTranslation, isLoaded, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadAsync, loadDictionaries, loadDictionary, parseRichText, registerFormatter, resetConfig, restoreLocale, setLocale, t, zh_es } from 'inline-i18n-multi';
|
|
5
5
|
|
|
6
6
|
interface LocaleProviderProps {
|
|
7
7
|
/**
|
|
@@ -62,6 +62,14 @@ declare function useLoadDictionaries(locale: Locale, namespace?: string): {
|
|
|
62
62
|
* return <Content />
|
|
63
63
|
* }
|
|
64
64
|
*/
|
|
65
|
+
/**
|
|
66
|
+
* Get a scoped translation function bound to current locale and namespace
|
|
67
|
+
* @param namespace - Namespace to scope to
|
|
68
|
+
* @example
|
|
69
|
+
* const tc = useScopedT('common')
|
|
70
|
+
* tc('greeting') // equivalent to t('common:greeting')
|
|
71
|
+
*/
|
|
72
|
+
declare function useScopedT(namespace: string): (key: string, vars?: TranslationVars) => string;
|
|
65
73
|
declare function useDetectedLocale(options: DetectLocaleOptions): void;
|
|
66
74
|
|
|
67
75
|
interface TPropsShorthand {
|
|
@@ -139,4 +147,4 @@ declare function RichText({ translations, components, vars }: RichTextProps): Re
|
|
|
139
147
|
*/
|
|
140
148
|
declare function useRichText(components: Record<string, ComponentRenderer>): (translations: Translations, vars?: TranslationVars) => ReactNode;
|
|
141
149
|
|
|
142
|
-
export { LocaleProvider, RichText, T, useDetectedLocale, useLoadDictionaries, useLocale, useRichText, useT };
|
|
150
|
+
export { LocaleProvider, RichText, T, useDetectedLocale, useLoadDictionaries, useLocale, useRichText, useScopedT, useT };
|
package/dist/index.js
CHANGED
|
@@ -28,6 +28,7 @@ __export(index_exports, {
|
|
|
28
28
|
clearFormatters: () => import_inline_i18n_multi5.clearFormatters,
|
|
29
29
|
clearICUCache: () => import_inline_i18n_multi5.clearICUCache,
|
|
30
30
|
configure: () => import_inline_i18n_multi5.configure,
|
|
31
|
+
createScope: () => import_inline_i18n_multi5.createScope,
|
|
31
32
|
detectLocale: () => import_inline_i18n_multi5.detectLocale,
|
|
32
33
|
en_de: () => import_inline_i18n_multi5.en_de,
|
|
33
34
|
en_es: () => import_inline_i18n_multi5.en_es,
|
|
@@ -61,6 +62,7 @@ __export(index_exports, {
|
|
|
61
62
|
useLoadDictionaries: () => useLoadDictionaries,
|
|
62
63
|
useLocale: () => useLocale,
|
|
63
64
|
useRichText: () => useRichText,
|
|
65
|
+
useScopedT: () => useScopedT,
|
|
64
66
|
useT: () => useT,
|
|
65
67
|
zh_es: () => import_inline_i18n_multi5.zh_es
|
|
66
68
|
});
|
|
@@ -145,6 +147,13 @@ function useLoadDictionaries(locale, namespace) {
|
|
|
145
147
|
}, [locale, namespace]);
|
|
146
148
|
return { isLoading, error };
|
|
147
149
|
}
|
|
150
|
+
function useScopedT(namespace) {
|
|
151
|
+
const { locale } = useLocaleContext();
|
|
152
|
+
return (0, import_react3.useCallback)(
|
|
153
|
+
(key, vars) => (0, import_inline_i18n_multi2.t)(`${namespace}:${key}`, vars, locale),
|
|
154
|
+
[locale, namespace]
|
|
155
|
+
);
|
|
156
|
+
}
|
|
148
157
|
function useDetectedLocale(options) {
|
|
149
158
|
const { setLocale: setContextLocale } = useLocaleContext();
|
|
150
159
|
(0, import_react3.useEffect)(() => {
|
|
@@ -219,6 +228,7 @@ var import_inline_i18n_multi5 = require("inline-i18n-multi");
|
|
|
219
228
|
clearFormatters,
|
|
220
229
|
clearICUCache,
|
|
221
230
|
configure,
|
|
231
|
+
createScope,
|
|
222
232
|
detectLocale,
|
|
223
233
|
en_de,
|
|
224
234
|
en_es,
|
|
@@ -252,6 +262,7 @@ var import_inline_i18n_multi5 = require("inline-i18n-multi");
|
|
|
252
262
|
useLoadDictionaries,
|
|
253
263
|
useLocale,
|
|
254
264
|
useRichText,
|
|
265
|
+
useScopedT,
|
|
255
266
|
useT,
|
|
256
267
|
zh_es
|
|
257
268
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/context.tsx","../src/hooks.ts","../src/component.tsx","../src/richtext.tsx"],"sourcesContent":["export { LocaleProvider } from './provider'\nexport { useLocale, useT, useLoadDictionaries, useDetectedLocale } from './hooks'\nexport { T } from './component'\nexport { RichText, useRichText } from './richtext'\n\n// re-export from core for convenience\nexport {\n // inline translations\n it,\n it_ja,\n it_zh,\n it_es,\n it_fr,\n it_de,\n en_ja,\n en_zh,\n en_es,\n en_fr,\n en_de,\n ja_zh,\n ja_es,\n zh_es,\n getLocale,\n setLocale,\n // key-based translations (i18n compatible)\n t,\n loadDictionaries,\n loadDictionary,\n clearDictionaries,\n hasTranslation,\n getLoadedLocales,\n getDictionary,\n loadAsync,\n isLoaded,\n // configuration\n configure,\n getConfig,\n resetConfig,\n // rich text parsing\n parseRichText,\n type RichTextSegment,\n // custom formatters (v0.6.0) + ICU cache (v0.7.0)\n registerFormatter,\n clearFormatters,\n clearICUCache,\n type CustomFormatter,\n // locale persistence (v0.7.0)\n restoreLocale,\n // locale detection (v0.6.0)\n detectLocale,\n type DetectLocaleOptions,\n type DetectSource,\n // types\n type Locale,\n type Translations,\n type TranslationVars,\n type Dictionary,\n type Dictionaries,\n type PluralRules,\n} from 'inline-i18n-multi'\n","import { useState, useCallback, useMemo, useEffect, type ReactNode } from 'react'\nimport { setLocale as setCoreLocale, type Locale } from 'inline-i18n-multi'\nimport { LocaleContext } from './context'\n\ninterface LocaleProviderProps {\n /**\n * Initial locale value\n */\n locale: Locale\n /**\n * Cookie name for persisting locale (default: NEXT_LOCALE)\n * Set to false to disable cookie sync\n */\n cookieName?: string | false\n /**\n * Callback when locale changes\n */\n onLocaleChange?: (locale: Locale) => void\n children: ReactNode\n}\n\nfunction setCookie(name: string, value: string, days = 365): void {\n if (typeof document === 'undefined') return\n const expires = new Date(Date.now() + days * 864e5).toUTCString()\n document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax`\n}\n\nexport function LocaleProvider({\n locale: initialLocale,\n cookieName = 'NEXT_LOCALE',\n onLocaleChange,\n children,\n}: LocaleProviderProps) {\n const [locale, setLocaleState] = useState<Locale>(initialLocale)\n\n // sync with core package on mount and locale change\n useEffect(() => {\n setCoreLocale(locale)\n }, [locale])\n\n const setLocale = useCallback(\n (newLocale: Locale) => {\n setLocaleState(newLocale)\n setCoreLocale(newLocale)\n\n // sync cookie for Next.js middleware\n if (cookieName) {\n setCookie(cookieName, newLocale)\n }\n\n // callback for custom handling\n onLocaleChange?.(newLocale)\n },\n [cookieName, onLocaleChange]\n )\n\n const value = useMemo(() => ({ locale, setLocale }), [locale, setLocale])\n\n return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>\n}\n","import { createContext, useContext } from 'react'\nimport type { Locale } from 'inline-i18n-multi'\n\ninterface LocaleContextValue {\n locale: Locale\n setLocale: (locale: Locale) => void\n}\n\nexport const LocaleContext = createContext<LocaleContextValue | null>(null)\n\nexport function useLocaleContext(): LocaleContextValue {\n const context = useContext(LocaleContext)\n\n if (!context) {\n throw new Error('useLocaleContext must be used within a LocaleProvider')\n }\n\n return context\n}\n","import { useCallback, useState, useEffect } from 'react'\nimport { useLocaleContext } from './context'\nimport { t as coreT, loadAsync, isLoaded, detectLocale, setLocale } from 'inline-i18n-multi'\nimport type { Locale, TranslationVars, DetectLocaleOptions } from 'inline-i18n-multi'\n\n/**\n * Get current locale and setter\n */\nexport function useLocale(): [Locale, (locale: Locale) => void] {\n const { locale, setLocale } = useLocaleContext()\n return [locale, setLocale]\n}\n\n/**\n * Get translation function bound to current locale\n * @example\n * const t = useT()\n * t('greeting.hello') // uses context locale\n * t('items.count', { count: 5 })\n */\nexport function useT(): (key: string, vars?: TranslationVars) => string {\n const { locale } = useLocaleContext()\n\n return useCallback(\n (key: string, vars?: TranslationVars) => coreT(key, vars, locale),\n [locale]\n )\n}\n\n/**\n * Hook for lazy loading dictionaries\n * Automatically loads dictionaries when locale or namespace changes\n *\n * @example\n * function Dashboard() {\n * const { isLoading, error } = useLoadDictionaries('ko', 'dashboard')\n * if (isLoading) return <Spinner />\n * if (error) return <Error message={error.message} />\n * return <Content />\n * }\n */\nexport function useLoadDictionaries(\n locale: Locale,\n namespace?: string\n): { isLoading: boolean; error: Error | null } {\n const [isLoading, setIsLoading] = useState(() => !isLoaded(locale, namespace))\n const [error, setError] = useState<Error | null>(null)\n\n useEffect(() => {\n if (isLoaded(locale, namespace)) {\n setIsLoading(false)\n setError(null)\n return\n }\n\n setIsLoading(true)\n setError(null)\n\n loadAsync(locale, namespace)\n .then(() => setIsLoading(false))\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(String(err)))\n setIsLoading(false)\n })\n }, [locale, namespace])\n\n return { isLoading, error }\n}\n\n/**\n * Hook that auto-detects and sets locale on mount\n *\n * @example\n * function App() {\n * useDetectedLocale({\n * supportedLocales: ['en', 'ko', 'ja'],\n * defaultLocale: 'en',\n * sources: ['cookie', 'navigator'],\n * })\n * return <Content />\n * }\n */\nexport function useDetectedLocale(options: DetectLocaleOptions): void {\n const { setLocale: setContextLocale } = useLocaleContext()\n\n useEffect(() => {\n const detected = detectLocale(options)\n setLocale(detected)\n setContextLocale(detected)\n // Run once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n}\n","import { it, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ninterface TPropsShorthand {\n /**\n * Korean text\n */\n ko: string\n /**\n * English text\n */\n en: string\n translations?: never\n}\n\ninterface TPropsObject {\n ko?: never\n en?: never\n /**\n * Translation map with locale keys\n */\n translations: Translations\n}\n\ntype TProps = (TPropsShorthand | TPropsObject) & TranslationVars\n\n/**\n * Translation component for JSX\n * @example <T ko=\"안녕\" en=\"Hello\" />\n * @example <T translations={{ ko: '안녕', en: 'Hello', ja: 'こんにちは' }} />\n * @example <T ko=\"안녕 {name}\" en=\"Hello {name}\" name=\"철수\" />\n */\nexport function T(props: TProps) {\n const { ko, en, translations, ...vars } = props\n\n if (translations) {\n return <>{it(translations, vars)}</>\n }\n\n if (ko !== undefined && en !== undefined) {\n return <>{it(ko, en, vars)}</>\n }\n\n throw new Error('T component requires either \"translations\" or both \"ko\" and \"en\" props')\n}\n","import React, { type ReactNode, useMemo, useCallback, Fragment } from 'react'\nimport { it, parseRichText, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ntype ComponentRenderer = (text: string) => ReactNode\n\ninterface RichTextProps {\n /**\n * Translation map with locale keys\n * Tags like <link>text</link> will be matched to component renderers\n */\n translations: Translations\n /**\n * Component renderers for each tag name\n * @example { link: (text) => <a href=\"/terms\">{text}</a> }\n */\n components: Record<string, ComponentRenderer>\n /**\n * Variables for interpolation (applied before rich text parsing)\n */\n vars?: TranslationVars\n}\n\n/**\n * Rich text translation component\n * Supports embedding React components within translations\n *\n * @example\n * <RichText\n * translations={{\n * en: 'Read <link>terms</link> and <bold>agree</bold>',\n * ko: '<link>약관</link>을 읽고 <bold>동의</bold>해주세요'\n * }}\n * components={{\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>\n * }}\n * />\n */\nexport function RichText({ translations, components, vars }: RichTextProps): React.JSX.Element {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n // Resolve locale and interpolate variables ({curly} braces)\n // Rich text tags (<angle> brackets) don't conflict with variable interpolation\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n}\n\n/**\n * Hook for rich text translations\n * Returns a function that resolves translations with component interpolation\n *\n * @example\n * const richT = useRichText({\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>,\n * })\n * return richT({ en: 'Click <link>here</link>', ko: '<link>여기</link> 클릭' })\n */\nexport function useRichText(\n components: Record<string, ComponentRenderer>\n): (translations: Translations, vars?: TranslationVars) => ReactNode {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n return useCallback(\n (translations: Translations, vars?: TranslationVars): ReactNode => {\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n },\n [components, componentNames]\n )\n}\n"],"mappings":"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","names":["import_react","setCoreLocale","setLocale","import_react","import_inline_i18n_multi","setLocale","coreT","import_inline_i18n_multi","import_jsx_runtime","import_react","import_inline_i18n_multi","import_jsx_runtime","import_inline_i18n_multi"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/context.tsx","../src/hooks.ts","../src/component.tsx","../src/richtext.tsx"],"sourcesContent":["export { LocaleProvider } from './provider'\nexport { useLocale, useT, useScopedT, useLoadDictionaries, useDetectedLocale } from './hooks'\nexport { T } from './component'\nexport { RichText, useRichText } from './richtext'\n\n// re-export from core for convenience\nexport {\n // inline translations\n it,\n it_ja,\n it_zh,\n it_es,\n it_fr,\n it_de,\n en_ja,\n en_zh,\n en_es,\n en_fr,\n en_de,\n ja_zh,\n ja_es,\n zh_es,\n getLocale,\n setLocale,\n // key-based translations (i18n compatible)\n t,\n loadDictionaries,\n loadDictionary,\n clearDictionaries,\n hasTranslation,\n getLoadedLocales,\n getDictionary,\n loadAsync,\n isLoaded,\n // configuration\n configure,\n getConfig,\n resetConfig,\n // rich text parsing\n parseRichText,\n type RichTextSegment,\n // custom formatters (v0.6.0) + ICU cache (v0.7.0)\n registerFormatter,\n clearFormatters,\n clearICUCache,\n type CustomFormatter,\n // locale persistence (v0.7.0)\n restoreLocale,\n // translation scope (v0.8.0)\n createScope,\n // locale detection (v0.6.0)\n detectLocale,\n type DetectLocaleOptions,\n type DetectSource,\n // types\n type Locale,\n type Translations,\n type TranslationVars,\n type Dictionary,\n type Dictionaries,\n type PluralRules,\n} from 'inline-i18n-multi'\n","import { useState, useCallback, useMemo, useEffect, type ReactNode } from 'react'\nimport { setLocale as setCoreLocale, type Locale } from 'inline-i18n-multi'\nimport { LocaleContext } from './context'\n\ninterface LocaleProviderProps {\n /**\n * Initial locale value\n */\n locale: Locale\n /**\n * Cookie name for persisting locale (default: NEXT_LOCALE)\n * Set to false to disable cookie sync\n */\n cookieName?: string | false\n /**\n * Callback when locale changes\n */\n onLocaleChange?: (locale: Locale) => void\n children: ReactNode\n}\n\nfunction setCookie(name: string, value: string, days = 365): void {\n if (typeof document === 'undefined') return\n const expires = new Date(Date.now() + days * 864e5).toUTCString()\n document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax`\n}\n\nexport function LocaleProvider({\n locale: initialLocale,\n cookieName = 'NEXT_LOCALE',\n onLocaleChange,\n children,\n}: LocaleProviderProps) {\n const [locale, setLocaleState] = useState<Locale>(initialLocale)\n\n // sync with core package on mount and locale change\n useEffect(() => {\n setCoreLocale(locale)\n }, [locale])\n\n const setLocale = useCallback(\n (newLocale: Locale) => {\n setLocaleState(newLocale)\n setCoreLocale(newLocale)\n\n // sync cookie for Next.js middleware\n if (cookieName) {\n setCookie(cookieName, newLocale)\n }\n\n // callback for custom handling\n onLocaleChange?.(newLocale)\n },\n [cookieName, onLocaleChange]\n )\n\n const value = useMemo(() => ({ locale, setLocale }), [locale, setLocale])\n\n return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>\n}\n","import { createContext, useContext } from 'react'\nimport type { Locale } from 'inline-i18n-multi'\n\ninterface LocaleContextValue {\n locale: Locale\n setLocale: (locale: Locale) => void\n}\n\nexport const LocaleContext = createContext<LocaleContextValue | null>(null)\n\nexport function useLocaleContext(): LocaleContextValue {\n const context = useContext(LocaleContext)\n\n if (!context) {\n throw new Error('useLocaleContext must be used within a LocaleProvider')\n }\n\n return context\n}\n","import { useCallback, useState, useEffect } from 'react'\nimport { useLocaleContext } from './context'\nimport { t as coreT, loadAsync, isLoaded, detectLocale, setLocale } from 'inline-i18n-multi'\nimport type { Locale, TranslationVars, DetectLocaleOptions } from 'inline-i18n-multi'\n\n/**\n * Get current locale and setter\n */\nexport function useLocale(): [Locale, (locale: Locale) => void] {\n const { locale, setLocale } = useLocaleContext()\n return [locale, setLocale]\n}\n\n/**\n * Get translation function bound to current locale\n * @example\n * const t = useT()\n * t('greeting.hello') // uses context locale\n * t('items.count', { count: 5 })\n */\nexport function useT(): (key: string, vars?: TranslationVars) => string {\n const { locale } = useLocaleContext()\n\n return useCallback(\n (key: string, vars?: TranslationVars) => coreT(key, vars, locale),\n [locale]\n )\n}\n\n/**\n * Hook for lazy loading dictionaries\n * Automatically loads dictionaries when locale or namespace changes\n *\n * @example\n * function Dashboard() {\n * const { isLoading, error } = useLoadDictionaries('ko', 'dashboard')\n * if (isLoading) return <Spinner />\n * if (error) return <Error message={error.message} />\n * return <Content />\n * }\n */\nexport function useLoadDictionaries(\n locale: Locale,\n namespace?: string\n): { isLoading: boolean; error: Error | null } {\n const [isLoading, setIsLoading] = useState(() => !isLoaded(locale, namespace))\n const [error, setError] = useState<Error | null>(null)\n\n useEffect(() => {\n if (isLoaded(locale, namespace)) {\n setIsLoading(false)\n setError(null)\n return\n }\n\n setIsLoading(true)\n setError(null)\n\n loadAsync(locale, namespace)\n .then(() => setIsLoading(false))\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(String(err)))\n setIsLoading(false)\n })\n }, [locale, namespace])\n\n return { isLoading, error }\n}\n\n/**\n * Hook that auto-detects and sets locale on mount\n *\n * @example\n * function App() {\n * useDetectedLocale({\n * supportedLocales: ['en', 'ko', 'ja'],\n * defaultLocale: 'en',\n * sources: ['cookie', 'navigator'],\n * })\n * return <Content />\n * }\n */\n/**\n * Get a scoped translation function bound to current locale and namespace\n * @param namespace - Namespace to scope to\n * @example\n * const tc = useScopedT('common')\n * tc('greeting') // equivalent to t('common:greeting')\n */\nexport function useScopedT(namespace: string): (key: string, vars?: TranslationVars) => string {\n const { locale } = useLocaleContext()\n\n return useCallback(\n (key: string, vars?: TranslationVars) => coreT(`${namespace}:${key}`, vars, locale),\n [locale, namespace]\n )\n}\n\nexport function useDetectedLocale(options: DetectLocaleOptions): void {\n const { setLocale: setContextLocale } = useLocaleContext()\n\n useEffect(() => {\n const detected = detectLocale(options)\n setLocale(detected)\n setContextLocale(detected)\n // Run once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n}\n","import { it, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ninterface TPropsShorthand {\n /**\n * Korean text\n */\n ko: string\n /**\n * English text\n */\n en: string\n translations?: never\n}\n\ninterface TPropsObject {\n ko?: never\n en?: never\n /**\n * Translation map with locale keys\n */\n translations: Translations\n}\n\ntype TProps = (TPropsShorthand | TPropsObject) & TranslationVars\n\n/**\n * Translation component for JSX\n * @example <T ko=\"안녕\" en=\"Hello\" />\n * @example <T translations={{ ko: '안녕', en: 'Hello', ja: 'こんにちは' }} />\n * @example <T ko=\"안녕 {name}\" en=\"Hello {name}\" name=\"철수\" />\n */\nexport function T(props: TProps) {\n const { ko, en, translations, ...vars } = props\n\n if (translations) {\n return <>{it(translations, vars)}</>\n }\n\n if (ko !== undefined && en !== undefined) {\n return <>{it(ko, en, vars)}</>\n }\n\n throw new Error('T component requires either \"translations\" or both \"ko\" and \"en\" props')\n}\n","import React, { type ReactNode, useMemo, useCallback, Fragment } from 'react'\nimport { it, parseRichText, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ntype ComponentRenderer = (text: string) => ReactNode\n\ninterface RichTextProps {\n /**\n * Translation map with locale keys\n * Tags like <link>text</link> will be matched to component renderers\n */\n translations: Translations\n /**\n * Component renderers for each tag name\n * @example { link: (text) => <a href=\"/terms\">{text}</a> }\n */\n components: Record<string, ComponentRenderer>\n /**\n * Variables for interpolation (applied before rich text parsing)\n */\n vars?: TranslationVars\n}\n\n/**\n * Rich text translation component\n * Supports embedding React components within translations\n *\n * @example\n * <RichText\n * translations={{\n * en: 'Read <link>terms</link> and <bold>agree</bold>',\n * ko: '<link>약관</link>을 읽고 <bold>동의</bold>해주세요'\n * }}\n * components={{\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>\n * }}\n * />\n */\nexport function RichText({ translations, components, vars }: RichTextProps): React.JSX.Element {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n // Resolve locale and interpolate variables ({curly} braces)\n // Rich text tags (<angle> brackets) don't conflict with variable interpolation\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n}\n\n/**\n * Hook for rich text translations\n * Returns a function that resolves translations with component interpolation\n *\n * @example\n * const richT = useRichText({\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>,\n * })\n * return richT({ en: 'Click <link>here</link>', ko: '<link>여기</link> 클릭' })\n */\nexport function useRichText(\n components: Record<string, ComponentRenderer>\n): (translations: Translations, vars?: TranslationVars) => ReactNode {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n return useCallback(\n (translations: Translations, vars?: TranslationVars): ReactNode => {\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n },\n [components, componentNames]\n )\n}\n"],"mappings":"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","names":["import_react","setCoreLocale","setLocale","import_react","import_inline_i18n_multi","setLocale","coreT","import_inline_i18n_multi","import_jsx_runtime","import_react","import_inline_i18n_multi","import_jsx_runtime","import_inline_i18n_multi"]}
|
package/dist/index.mjs
CHANGED
|
@@ -79,6 +79,13 @@ function useLoadDictionaries(locale, namespace) {
|
|
|
79
79
|
}, [locale, namespace]);
|
|
80
80
|
return { isLoading, error };
|
|
81
81
|
}
|
|
82
|
+
function useScopedT(namespace) {
|
|
83
|
+
const { locale } = useLocaleContext();
|
|
84
|
+
return useCallback2(
|
|
85
|
+
(key, vars) => coreT(`${namespace}:${key}`, vars, locale),
|
|
86
|
+
[locale, namespace]
|
|
87
|
+
);
|
|
88
|
+
}
|
|
82
89
|
function useDetectedLocale(options) {
|
|
83
90
|
const { setLocale: setContextLocale } = useLocaleContext();
|
|
84
91
|
useEffect2(() => {
|
|
@@ -177,6 +184,7 @@ import {
|
|
|
177
184
|
clearFormatters,
|
|
178
185
|
clearICUCache,
|
|
179
186
|
restoreLocale,
|
|
187
|
+
createScope,
|
|
180
188
|
detectLocale as detectLocale2
|
|
181
189
|
} from "inline-i18n-multi";
|
|
182
190
|
export {
|
|
@@ -187,6 +195,7 @@ export {
|
|
|
187
195
|
clearFormatters,
|
|
188
196
|
clearICUCache,
|
|
189
197
|
configure,
|
|
198
|
+
createScope,
|
|
190
199
|
detectLocale2 as detectLocale,
|
|
191
200
|
en_de,
|
|
192
201
|
en_es,
|
|
@@ -220,6 +229,7 @@ export {
|
|
|
220
229
|
useLoadDictionaries,
|
|
221
230
|
useLocale,
|
|
222
231
|
useRichText,
|
|
232
|
+
useScopedT,
|
|
223
233
|
useT,
|
|
224
234
|
zh_es
|
|
225
235
|
};
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/provider.tsx","../src/context.tsx","../src/hooks.ts","../src/component.tsx","../src/richtext.tsx","../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, useEffect, type ReactNode } from 'react'\nimport { setLocale as setCoreLocale, type Locale } from 'inline-i18n-multi'\nimport { LocaleContext } from './context'\n\ninterface LocaleProviderProps {\n /**\n * Initial locale value\n */\n locale: Locale\n /**\n * Cookie name for persisting locale (default: NEXT_LOCALE)\n * Set to false to disable cookie sync\n */\n cookieName?: string | false\n /**\n * Callback when locale changes\n */\n onLocaleChange?: (locale: Locale) => void\n children: ReactNode\n}\n\nfunction setCookie(name: string, value: string, days = 365): void {\n if (typeof document === 'undefined') return\n const expires = new Date(Date.now() + days * 864e5).toUTCString()\n document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax`\n}\n\nexport function LocaleProvider({\n locale: initialLocale,\n cookieName = 'NEXT_LOCALE',\n onLocaleChange,\n children,\n}: LocaleProviderProps) {\n const [locale, setLocaleState] = useState<Locale>(initialLocale)\n\n // sync with core package on mount and locale change\n useEffect(() => {\n setCoreLocale(locale)\n }, [locale])\n\n const setLocale = useCallback(\n (newLocale: Locale) => {\n setLocaleState(newLocale)\n setCoreLocale(newLocale)\n\n // sync cookie for Next.js middleware\n if (cookieName) {\n setCookie(cookieName, newLocale)\n }\n\n // callback for custom handling\n onLocaleChange?.(newLocale)\n },\n [cookieName, onLocaleChange]\n )\n\n const value = useMemo(() => ({ locale, setLocale }), [locale, setLocale])\n\n return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>\n}\n","import { createContext, useContext } from 'react'\nimport type { Locale } from 'inline-i18n-multi'\n\ninterface LocaleContextValue {\n locale: Locale\n setLocale: (locale: Locale) => void\n}\n\nexport const LocaleContext = createContext<LocaleContextValue | null>(null)\n\nexport function useLocaleContext(): LocaleContextValue {\n const context = useContext(LocaleContext)\n\n if (!context) {\n throw new Error('useLocaleContext must be used within a LocaleProvider')\n }\n\n return context\n}\n","import { useCallback, useState, useEffect } from 'react'\nimport { useLocaleContext } from './context'\nimport { t as coreT, loadAsync, isLoaded, detectLocale, setLocale } from 'inline-i18n-multi'\nimport type { Locale, TranslationVars, DetectLocaleOptions } from 'inline-i18n-multi'\n\n/**\n * Get current locale and setter\n */\nexport function useLocale(): [Locale, (locale: Locale) => void] {\n const { locale, setLocale } = useLocaleContext()\n return [locale, setLocale]\n}\n\n/**\n * Get translation function bound to current locale\n * @example\n * const t = useT()\n * t('greeting.hello') // uses context locale\n * t('items.count', { count: 5 })\n */\nexport function useT(): (key: string, vars?: TranslationVars) => string {\n const { locale } = useLocaleContext()\n\n return useCallback(\n (key: string, vars?: TranslationVars) => coreT(key, vars, locale),\n [locale]\n )\n}\n\n/**\n * Hook for lazy loading dictionaries\n * Automatically loads dictionaries when locale or namespace changes\n *\n * @example\n * function Dashboard() {\n * const { isLoading, error } = useLoadDictionaries('ko', 'dashboard')\n * if (isLoading) return <Spinner />\n * if (error) return <Error message={error.message} />\n * return <Content />\n * }\n */\nexport function useLoadDictionaries(\n locale: Locale,\n namespace?: string\n): { isLoading: boolean; error: Error | null } {\n const [isLoading, setIsLoading] = useState(() => !isLoaded(locale, namespace))\n const [error, setError] = useState<Error | null>(null)\n\n useEffect(() => {\n if (isLoaded(locale, namespace)) {\n setIsLoading(false)\n setError(null)\n return\n }\n\n setIsLoading(true)\n setError(null)\n\n loadAsync(locale, namespace)\n .then(() => setIsLoading(false))\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(String(err)))\n setIsLoading(false)\n })\n }, [locale, namespace])\n\n return { isLoading, error }\n}\n\n/**\n * Hook that auto-detects and sets locale on mount\n *\n * @example\n * function App() {\n * useDetectedLocale({\n * supportedLocales: ['en', 'ko', 'ja'],\n * defaultLocale: 'en',\n * sources: ['cookie', 'navigator'],\n * })\n * return <Content />\n * }\n */\nexport function useDetectedLocale(options: DetectLocaleOptions): void {\n const { setLocale: setContextLocale } = useLocaleContext()\n\n useEffect(() => {\n const detected = detectLocale(options)\n setLocale(detected)\n setContextLocale(detected)\n // Run once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n}\n","import { it, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ninterface TPropsShorthand {\n /**\n * Korean text\n */\n ko: string\n /**\n * English text\n */\n en: string\n translations?: never\n}\n\ninterface TPropsObject {\n ko?: never\n en?: never\n /**\n * Translation map with locale keys\n */\n translations: Translations\n}\n\ntype TProps = (TPropsShorthand | TPropsObject) & TranslationVars\n\n/**\n * Translation component for JSX\n * @example <T ko=\"안녕\" en=\"Hello\" />\n * @example <T translations={{ ko: '안녕', en: 'Hello', ja: 'こんにちは' }} />\n * @example <T ko=\"안녕 {name}\" en=\"Hello {name}\" name=\"철수\" />\n */\nexport function T(props: TProps) {\n const { ko, en, translations, ...vars } = props\n\n if (translations) {\n return <>{it(translations, vars)}</>\n }\n\n if (ko !== undefined && en !== undefined) {\n return <>{it(ko, en, vars)}</>\n }\n\n throw new Error('T component requires either \"translations\" or both \"ko\" and \"en\" props')\n}\n","import React, { type ReactNode, useMemo, useCallback, Fragment } from 'react'\nimport { it, parseRichText, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ntype ComponentRenderer = (text: string) => ReactNode\n\ninterface RichTextProps {\n /**\n * Translation map with locale keys\n * Tags like <link>text</link> will be matched to component renderers\n */\n translations: Translations\n /**\n * Component renderers for each tag name\n * @example { link: (text) => <a href=\"/terms\">{text}</a> }\n */\n components: Record<string, ComponentRenderer>\n /**\n * Variables for interpolation (applied before rich text parsing)\n */\n vars?: TranslationVars\n}\n\n/**\n * Rich text translation component\n * Supports embedding React components within translations\n *\n * @example\n * <RichText\n * translations={{\n * en: 'Read <link>terms</link> and <bold>agree</bold>',\n * ko: '<link>약관</link>을 읽고 <bold>동의</bold>해주세요'\n * }}\n * components={{\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>\n * }}\n * />\n */\nexport function RichText({ translations, components, vars }: RichTextProps): React.JSX.Element {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n // Resolve locale and interpolate variables ({curly} braces)\n // Rich text tags (<angle> brackets) don't conflict with variable interpolation\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n}\n\n/**\n * Hook for rich text translations\n * Returns a function that resolves translations with component interpolation\n *\n * @example\n * const richT = useRichText({\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>,\n * })\n * return richT({ en: 'Click <link>here</link>', ko: '<link>여기</link> 클릭' })\n */\nexport function useRichText(\n components: Record<string, ComponentRenderer>\n): (translations: Translations, vars?: TranslationVars) => ReactNode {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n return useCallback(\n (translations: Translations, vars?: TranslationVars): ReactNode => {\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n },\n [components, componentNames]\n )\n}\n","export { LocaleProvider } from './provider'\nexport { useLocale, useT, useLoadDictionaries, useDetectedLocale } from './hooks'\nexport { T } from './component'\nexport { RichText, useRichText } from './richtext'\n\n// re-export from core for convenience\nexport {\n // inline translations\n it,\n it_ja,\n it_zh,\n it_es,\n it_fr,\n it_de,\n en_ja,\n en_zh,\n en_es,\n en_fr,\n en_de,\n ja_zh,\n ja_es,\n zh_es,\n getLocale,\n setLocale,\n // key-based translations (i18n compatible)\n t,\n loadDictionaries,\n loadDictionary,\n clearDictionaries,\n hasTranslation,\n getLoadedLocales,\n getDictionary,\n loadAsync,\n isLoaded,\n // configuration\n configure,\n getConfig,\n resetConfig,\n // rich text parsing\n parseRichText,\n type RichTextSegment,\n // custom formatters (v0.6.0) + ICU cache (v0.7.0)\n registerFormatter,\n clearFormatters,\n clearICUCache,\n type CustomFormatter,\n // locale persistence (v0.7.0)\n restoreLocale,\n // locale detection (v0.6.0)\n detectLocale,\n type DetectLocaleOptions,\n type DetectSource,\n // types\n type Locale,\n type Translations,\n type TranslationVars,\n type Dictionary,\n type Dictionaries,\n type PluralRules,\n} from 'inline-i18n-multi'\n"],"mappings":"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","names":["setLocale","useCallback","useState","useEffect","setLocale","useCallback","useState","useEffect","jsx","useMemo","useCallback","Fragment","it","jsx","it","setLocale","loadAsync","isLoaded","parseRichText","detectLocale"]}
|
|
1
|
+
{"version":3,"sources":["../src/provider.tsx","../src/context.tsx","../src/hooks.ts","../src/component.tsx","../src/richtext.tsx","../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, useEffect, type ReactNode } from 'react'\nimport { setLocale as setCoreLocale, type Locale } from 'inline-i18n-multi'\nimport { LocaleContext } from './context'\n\ninterface LocaleProviderProps {\n /**\n * Initial locale value\n */\n locale: Locale\n /**\n * Cookie name for persisting locale (default: NEXT_LOCALE)\n * Set to false to disable cookie sync\n */\n cookieName?: string | false\n /**\n * Callback when locale changes\n */\n onLocaleChange?: (locale: Locale) => void\n children: ReactNode\n}\n\nfunction setCookie(name: string, value: string, days = 365): void {\n if (typeof document === 'undefined') return\n const expires = new Date(Date.now() + days * 864e5).toUTCString()\n document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax`\n}\n\nexport function LocaleProvider({\n locale: initialLocale,\n cookieName = 'NEXT_LOCALE',\n onLocaleChange,\n children,\n}: LocaleProviderProps) {\n const [locale, setLocaleState] = useState<Locale>(initialLocale)\n\n // sync with core package on mount and locale change\n useEffect(() => {\n setCoreLocale(locale)\n }, [locale])\n\n const setLocale = useCallback(\n (newLocale: Locale) => {\n setLocaleState(newLocale)\n setCoreLocale(newLocale)\n\n // sync cookie for Next.js middleware\n if (cookieName) {\n setCookie(cookieName, newLocale)\n }\n\n // callback for custom handling\n onLocaleChange?.(newLocale)\n },\n [cookieName, onLocaleChange]\n )\n\n const value = useMemo(() => ({ locale, setLocale }), [locale, setLocale])\n\n return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>\n}\n","import { createContext, useContext } from 'react'\nimport type { Locale } from 'inline-i18n-multi'\n\ninterface LocaleContextValue {\n locale: Locale\n setLocale: (locale: Locale) => void\n}\n\nexport const LocaleContext = createContext<LocaleContextValue | null>(null)\n\nexport function useLocaleContext(): LocaleContextValue {\n const context = useContext(LocaleContext)\n\n if (!context) {\n throw new Error('useLocaleContext must be used within a LocaleProvider')\n }\n\n return context\n}\n","import { useCallback, useState, useEffect } from 'react'\nimport { useLocaleContext } from './context'\nimport { t as coreT, loadAsync, isLoaded, detectLocale, setLocale } from 'inline-i18n-multi'\nimport type { Locale, TranslationVars, DetectLocaleOptions } from 'inline-i18n-multi'\n\n/**\n * Get current locale and setter\n */\nexport function useLocale(): [Locale, (locale: Locale) => void] {\n const { locale, setLocale } = useLocaleContext()\n return [locale, setLocale]\n}\n\n/**\n * Get translation function bound to current locale\n * @example\n * const t = useT()\n * t('greeting.hello') // uses context locale\n * t('items.count', { count: 5 })\n */\nexport function useT(): (key: string, vars?: TranslationVars) => string {\n const { locale } = useLocaleContext()\n\n return useCallback(\n (key: string, vars?: TranslationVars) => coreT(key, vars, locale),\n [locale]\n )\n}\n\n/**\n * Hook for lazy loading dictionaries\n * Automatically loads dictionaries when locale or namespace changes\n *\n * @example\n * function Dashboard() {\n * const { isLoading, error } = useLoadDictionaries('ko', 'dashboard')\n * if (isLoading) return <Spinner />\n * if (error) return <Error message={error.message} />\n * return <Content />\n * }\n */\nexport function useLoadDictionaries(\n locale: Locale,\n namespace?: string\n): { isLoading: boolean; error: Error | null } {\n const [isLoading, setIsLoading] = useState(() => !isLoaded(locale, namespace))\n const [error, setError] = useState<Error | null>(null)\n\n useEffect(() => {\n if (isLoaded(locale, namespace)) {\n setIsLoading(false)\n setError(null)\n return\n }\n\n setIsLoading(true)\n setError(null)\n\n loadAsync(locale, namespace)\n .then(() => setIsLoading(false))\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(String(err)))\n setIsLoading(false)\n })\n }, [locale, namespace])\n\n return { isLoading, error }\n}\n\n/**\n * Hook that auto-detects and sets locale on mount\n *\n * @example\n * function App() {\n * useDetectedLocale({\n * supportedLocales: ['en', 'ko', 'ja'],\n * defaultLocale: 'en',\n * sources: ['cookie', 'navigator'],\n * })\n * return <Content />\n * }\n */\n/**\n * Get a scoped translation function bound to current locale and namespace\n * @param namespace - Namespace to scope to\n * @example\n * const tc = useScopedT('common')\n * tc('greeting') // equivalent to t('common:greeting')\n */\nexport function useScopedT(namespace: string): (key: string, vars?: TranslationVars) => string {\n const { locale } = useLocaleContext()\n\n return useCallback(\n (key: string, vars?: TranslationVars) => coreT(`${namespace}:${key}`, vars, locale),\n [locale, namespace]\n )\n}\n\nexport function useDetectedLocale(options: DetectLocaleOptions): void {\n const { setLocale: setContextLocale } = useLocaleContext()\n\n useEffect(() => {\n const detected = detectLocale(options)\n setLocale(detected)\n setContextLocale(detected)\n // Run once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n}\n","import { it, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ninterface TPropsShorthand {\n /**\n * Korean text\n */\n ko: string\n /**\n * English text\n */\n en: string\n translations?: never\n}\n\ninterface TPropsObject {\n ko?: never\n en?: never\n /**\n * Translation map with locale keys\n */\n translations: Translations\n}\n\ntype TProps = (TPropsShorthand | TPropsObject) & TranslationVars\n\n/**\n * Translation component for JSX\n * @example <T ko=\"안녕\" en=\"Hello\" />\n * @example <T translations={{ ko: '안녕', en: 'Hello', ja: 'こんにちは' }} />\n * @example <T ko=\"안녕 {name}\" en=\"Hello {name}\" name=\"철수\" />\n */\nexport function T(props: TProps) {\n const { ko, en, translations, ...vars } = props\n\n if (translations) {\n return <>{it(translations, vars)}</>\n }\n\n if (ko !== undefined && en !== undefined) {\n return <>{it(ko, en, vars)}</>\n }\n\n throw new Error('T component requires either \"translations\" or both \"ko\" and \"en\" props')\n}\n","import React, { type ReactNode, useMemo, useCallback, Fragment } from 'react'\nimport { it, parseRichText, type Translations, type TranslationVars } from 'inline-i18n-multi'\n\ntype ComponentRenderer = (text: string) => ReactNode\n\ninterface RichTextProps {\n /**\n * Translation map with locale keys\n * Tags like <link>text</link> will be matched to component renderers\n */\n translations: Translations\n /**\n * Component renderers for each tag name\n * @example { link: (text) => <a href=\"/terms\">{text}</a> }\n */\n components: Record<string, ComponentRenderer>\n /**\n * Variables for interpolation (applied before rich text parsing)\n */\n vars?: TranslationVars\n}\n\n/**\n * Rich text translation component\n * Supports embedding React components within translations\n *\n * @example\n * <RichText\n * translations={{\n * en: 'Read <link>terms</link> and <bold>agree</bold>',\n * ko: '<link>약관</link>을 읽고 <bold>동의</bold>해주세요'\n * }}\n * components={{\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>\n * }}\n * />\n */\nexport function RichText({ translations, components, vars }: RichTextProps): React.JSX.Element {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n // Resolve locale and interpolate variables ({curly} braces)\n // Rich text tags (<angle> brackets) don't conflict with variable interpolation\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n}\n\n/**\n * Hook for rich text translations\n * Returns a function that resolves translations with component interpolation\n *\n * @example\n * const richT = useRichText({\n * link: (text) => <a href=\"/terms\">{text}</a>,\n * bold: (text) => <strong>{text}</strong>,\n * })\n * return richT({ en: 'Click <link>here</link>', ko: '<link>여기</link> 클릭' })\n */\nexport function useRichText(\n components: Record<string, ComponentRenderer>\n): (translations: Translations, vars?: TranslationVars) => ReactNode {\n const componentNames = useMemo(() => Object.keys(components), [components])\n\n return useCallback(\n (translations: Translations, vars?: TranslationVars): ReactNode => {\n const resolved = it(translations, vars)\n const segments = parseRichText(resolved, componentNames)\n\n return (\n <>\n {segments.map((segment, index) => {\n if (segment.type === 'text') {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n const renderer = components[segment.componentName!]\n if (!renderer) {\n return <Fragment key={index}>{segment.content}</Fragment>\n }\n return <Fragment key={index}>{renderer(segment.content)}</Fragment>\n })}\n </>\n )\n },\n [components, componentNames]\n )\n}\n","export { LocaleProvider } from './provider'\nexport { useLocale, useT, useScopedT, useLoadDictionaries, useDetectedLocale } from './hooks'\nexport { T } from './component'\nexport { RichText, useRichText } from './richtext'\n\n// re-export from core for convenience\nexport {\n // inline translations\n it,\n it_ja,\n it_zh,\n it_es,\n it_fr,\n it_de,\n en_ja,\n en_zh,\n en_es,\n en_fr,\n en_de,\n ja_zh,\n ja_es,\n zh_es,\n getLocale,\n setLocale,\n // key-based translations (i18n compatible)\n t,\n loadDictionaries,\n loadDictionary,\n clearDictionaries,\n hasTranslation,\n getLoadedLocales,\n getDictionary,\n loadAsync,\n isLoaded,\n // configuration\n configure,\n getConfig,\n resetConfig,\n // rich text parsing\n parseRichText,\n type RichTextSegment,\n // custom formatters (v0.6.0) + ICU cache (v0.7.0)\n registerFormatter,\n clearFormatters,\n clearICUCache,\n type CustomFormatter,\n // locale persistence (v0.7.0)\n restoreLocale,\n // translation scope (v0.8.0)\n createScope,\n // locale detection (v0.6.0)\n detectLocale,\n type DetectLocaleOptions,\n type DetectSource,\n // types\n type Locale,\n type Translations,\n type TranslationVars,\n type Dictionary,\n type Dictionaries,\n type PluralRules,\n} from 'inline-i18n-multi'\n"],"mappings":"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","names":["setLocale","useCallback","useState","useEffect","setLocale","useCallback","useState","useEffect","jsx","useMemo","useCallback","Fragment","it","jsx","it","setLocale","loadAsync","isLoaded","parseRichText","detectLocale"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inline-i18n-multi-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "React integration for inline-i18n-multi",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"react": "^18.0.0 || ^19.0.0"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"inline-i18n-multi": "0.
|
|
37
|
+
"inline-i18n-multi": "0.8.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "^19.0.2",
|