inline-i18n-multi-react 0.1.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/LICENSE +21 -0
- package/dist/index.d.mts +65 -0
- package/dist/index.d.ts +65 -0
- package/dist/index.js +162 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +134 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +54 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { Locale, TranslationVars, Translations } from 'inline-i18n-multi';
|
|
4
|
+
export { Dictionaries, Dictionary, Locale, PluralRules, TranslationVars, Translations, clearDictionaries, en_de, en_es, en_fr, en_ja, en_zh, getDictionary, getLoadedLocales, getLocale, hasTranslation, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadDictionaries, loadDictionary, setLocale, t, zh_es } from 'inline-i18n-multi';
|
|
5
|
+
|
|
6
|
+
interface LocaleProviderProps {
|
|
7
|
+
/**
|
|
8
|
+
* Initial locale value
|
|
9
|
+
*/
|
|
10
|
+
locale: Locale;
|
|
11
|
+
/**
|
|
12
|
+
* Cookie name for persisting locale (default: NEXT_LOCALE)
|
|
13
|
+
* Set to false to disable cookie sync
|
|
14
|
+
*/
|
|
15
|
+
cookieName?: string | false;
|
|
16
|
+
/**
|
|
17
|
+
* Callback when locale changes
|
|
18
|
+
*/
|
|
19
|
+
onLocaleChange?: (locale: Locale) => void;
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
declare function LocaleProvider({ locale: initialLocale, cookieName, onLocaleChange, children, }: LocaleProviderProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Get current locale and setter
|
|
26
|
+
*/
|
|
27
|
+
declare function useLocale(): [Locale, (locale: Locale) => void];
|
|
28
|
+
/**
|
|
29
|
+
* Get translation function bound to current locale
|
|
30
|
+
* @example
|
|
31
|
+
* const t = useT()
|
|
32
|
+
* t('greeting.hello') // uses context locale
|
|
33
|
+
* t('items.count', { count: 5 })
|
|
34
|
+
*/
|
|
35
|
+
declare function useT(): (key: string, vars?: TranslationVars) => string;
|
|
36
|
+
|
|
37
|
+
interface TPropsShorthand {
|
|
38
|
+
/**
|
|
39
|
+
* Korean text
|
|
40
|
+
*/
|
|
41
|
+
ko: string;
|
|
42
|
+
/**
|
|
43
|
+
* English text
|
|
44
|
+
*/
|
|
45
|
+
en: string;
|
|
46
|
+
translations?: never;
|
|
47
|
+
}
|
|
48
|
+
interface TPropsObject {
|
|
49
|
+
ko?: never;
|
|
50
|
+
en?: never;
|
|
51
|
+
/**
|
|
52
|
+
* Translation map with locale keys
|
|
53
|
+
*/
|
|
54
|
+
translations: Translations;
|
|
55
|
+
}
|
|
56
|
+
type TProps = (TPropsShorthand | TPropsObject) & TranslationVars;
|
|
57
|
+
/**
|
|
58
|
+
* Translation component for JSX
|
|
59
|
+
* @example <T ko="안녕" en="Hello" />
|
|
60
|
+
* @example <T translations={{ ko: '안녕', en: 'Hello', ja: 'こんにちは' }} />
|
|
61
|
+
* @example <T ko="안녕 {name}" en="Hello {name}" name="철수" />
|
|
62
|
+
*/
|
|
63
|
+
declare function T(props: TProps): react_jsx_runtime.JSX.Element;
|
|
64
|
+
|
|
65
|
+
export { LocaleProvider, T, useLocale, useT };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { Locale, TranslationVars, Translations } from 'inline-i18n-multi';
|
|
4
|
+
export { Dictionaries, Dictionary, Locale, PluralRules, TranslationVars, Translations, clearDictionaries, en_de, en_es, en_fr, en_ja, en_zh, getDictionary, getLoadedLocales, getLocale, hasTranslation, it, it_de, it_es, it_fr, it_ja, it_zh, ja_es, ja_zh, loadDictionaries, loadDictionary, setLocale, t, zh_es } from 'inline-i18n-multi';
|
|
5
|
+
|
|
6
|
+
interface LocaleProviderProps {
|
|
7
|
+
/**
|
|
8
|
+
* Initial locale value
|
|
9
|
+
*/
|
|
10
|
+
locale: Locale;
|
|
11
|
+
/**
|
|
12
|
+
* Cookie name for persisting locale (default: NEXT_LOCALE)
|
|
13
|
+
* Set to false to disable cookie sync
|
|
14
|
+
*/
|
|
15
|
+
cookieName?: string | false;
|
|
16
|
+
/**
|
|
17
|
+
* Callback when locale changes
|
|
18
|
+
*/
|
|
19
|
+
onLocaleChange?: (locale: Locale) => void;
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
declare function LocaleProvider({ locale: initialLocale, cookieName, onLocaleChange, children, }: LocaleProviderProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Get current locale and setter
|
|
26
|
+
*/
|
|
27
|
+
declare function useLocale(): [Locale, (locale: Locale) => void];
|
|
28
|
+
/**
|
|
29
|
+
* Get translation function bound to current locale
|
|
30
|
+
* @example
|
|
31
|
+
* const t = useT()
|
|
32
|
+
* t('greeting.hello') // uses context locale
|
|
33
|
+
* t('items.count', { count: 5 })
|
|
34
|
+
*/
|
|
35
|
+
declare function useT(): (key: string, vars?: TranslationVars) => string;
|
|
36
|
+
|
|
37
|
+
interface TPropsShorthand {
|
|
38
|
+
/**
|
|
39
|
+
* Korean text
|
|
40
|
+
*/
|
|
41
|
+
ko: string;
|
|
42
|
+
/**
|
|
43
|
+
* English text
|
|
44
|
+
*/
|
|
45
|
+
en: string;
|
|
46
|
+
translations?: never;
|
|
47
|
+
}
|
|
48
|
+
interface TPropsObject {
|
|
49
|
+
ko?: never;
|
|
50
|
+
en?: never;
|
|
51
|
+
/**
|
|
52
|
+
* Translation map with locale keys
|
|
53
|
+
*/
|
|
54
|
+
translations: Translations;
|
|
55
|
+
}
|
|
56
|
+
type TProps = (TPropsShorthand | TPropsObject) & TranslationVars;
|
|
57
|
+
/**
|
|
58
|
+
* Translation component for JSX
|
|
59
|
+
* @example <T ko="안녕" en="Hello" />
|
|
60
|
+
* @example <T translations={{ ko: '안녕', en: 'Hello', ja: 'こんにちは' }} />
|
|
61
|
+
* @example <T ko="안녕 {name}" en="Hello {name}" name="철수" />
|
|
62
|
+
*/
|
|
63
|
+
declare function T(props: TProps): react_jsx_runtime.JSX.Element;
|
|
64
|
+
|
|
65
|
+
export { LocaleProvider, T, useLocale, useT };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/index.ts
|
|
22
|
+
var index_exports = {};
|
|
23
|
+
__export(index_exports, {
|
|
24
|
+
LocaleProvider: () => LocaleProvider,
|
|
25
|
+
T: () => T,
|
|
26
|
+
clearDictionaries: () => import_inline_i18n_multi4.clearDictionaries,
|
|
27
|
+
en_de: () => import_inline_i18n_multi4.en_de,
|
|
28
|
+
en_es: () => import_inline_i18n_multi4.en_es,
|
|
29
|
+
en_fr: () => import_inline_i18n_multi4.en_fr,
|
|
30
|
+
en_ja: () => import_inline_i18n_multi4.en_ja,
|
|
31
|
+
en_zh: () => import_inline_i18n_multi4.en_zh,
|
|
32
|
+
getDictionary: () => import_inline_i18n_multi4.getDictionary,
|
|
33
|
+
getLoadedLocales: () => import_inline_i18n_multi4.getLoadedLocales,
|
|
34
|
+
getLocale: () => import_inline_i18n_multi4.getLocale,
|
|
35
|
+
hasTranslation: () => import_inline_i18n_multi4.hasTranslation,
|
|
36
|
+
it: () => import_inline_i18n_multi4.it,
|
|
37
|
+
it_de: () => import_inline_i18n_multi4.it_de,
|
|
38
|
+
it_es: () => import_inline_i18n_multi4.it_es,
|
|
39
|
+
it_fr: () => import_inline_i18n_multi4.it_fr,
|
|
40
|
+
it_ja: () => import_inline_i18n_multi4.it_ja,
|
|
41
|
+
it_zh: () => import_inline_i18n_multi4.it_zh,
|
|
42
|
+
ja_es: () => import_inline_i18n_multi4.ja_es,
|
|
43
|
+
ja_zh: () => import_inline_i18n_multi4.ja_zh,
|
|
44
|
+
loadDictionaries: () => import_inline_i18n_multi4.loadDictionaries,
|
|
45
|
+
loadDictionary: () => import_inline_i18n_multi4.loadDictionary,
|
|
46
|
+
setLocale: () => import_inline_i18n_multi4.setLocale,
|
|
47
|
+
t: () => import_inline_i18n_multi4.t,
|
|
48
|
+
useLocale: () => useLocale,
|
|
49
|
+
useT: () => useT,
|
|
50
|
+
zh_es: () => import_inline_i18n_multi4.zh_es
|
|
51
|
+
});
|
|
52
|
+
module.exports = __toCommonJS(index_exports);
|
|
53
|
+
|
|
54
|
+
// src/provider.tsx
|
|
55
|
+
var import_react2 = require("react");
|
|
56
|
+
var import_inline_i18n_multi = require("inline-i18n-multi");
|
|
57
|
+
|
|
58
|
+
// src/context.tsx
|
|
59
|
+
var import_react = require("react");
|
|
60
|
+
var LocaleContext = (0, import_react.createContext)(null);
|
|
61
|
+
function useLocaleContext() {
|
|
62
|
+
const context = (0, import_react.useContext)(LocaleContext);
|
|
63
|
+
if (!context) {
|
|
64
|
+
throw new Error("useLocaleContext must be used within a LocaleProvider");
|
|
65
|
+
}
|
|
66
|
+
return context;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// src/provider.tsx
|
|
70
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
71
|
+
function setCookie(name, value, days = 365) {
|
|
72
|
+
if (typeof document === "undefined") return;
|
|
73
|
+
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
|
74
|
+
document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax`;
|
|
75
|
+
}
|
|
76
|
+
function LocaleProvider({
|
|
77
|
+
locale: initialLocale,
|
|
78
|
+
cookieName = "NEXT_LOCALE",
|
|
79
|
+
onLocaleChange,
|
|
80
|
+
children
|
|
81
|
+
}) {
|
|
82
|
+
const [locale, setLocaleState] = (0, import_react2.useState)(initialLocale);
|
|
83
|
+
(0, import_react2.useEffect)(() => {
|
|
84
|
+
(0, import_inline_i18n_multi.setLocale)(locale);
|
|
85
|
+
}, [locale]);
|
|
86
|
+
const setLocale2 = (0, import_react2.useCallback)(
|
|
87
|
+
(newLocale) => {
|
|
88
|
+
setLocaleState(newLocale);
|
|
89
|
+
(0, import_inline_i18n_multi.setLocale)(newLocale);
|
|
90
|
+
if (cookieName) {
|
|
91
|
+
setCookie(cookieName, newLocale);
|
|
92
|
+
}
|
|
93
|
+
onLocaleChange?.(newLocale);
|
|
94
|
+
},
|
|
95
|
+
[cookieName, onLocaleChange]
|
|
96
|
+
);
|
|
97
|
+
const value = (0, import_react2.useMemo)(() => ({ locale, setLocale: setLocale2 }), [locale, setLocale2]);
|
|
98
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocaleContext.Provider, { value, children });
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// src/hooks.ts
|
|
102
|
+
var import_react3 = require("react");
|
|
103
|
+
var import_inline_i18n_multi2 = require("inline-i18n-multi");
|
|
104
|
+
function useLocale() {
|
|
105
|
+
const { locale, setLocale: setLocale2 } = useLocaleContext();
|
|
106
|
+
return [locale, setLocale2];
|
|
107
|
+
}
|
|
108
|
+
function useT() {
|
|
109
|
+
const { locale } = useLocaleContext();
|
|
110
|
+
return (0, import_react3.useCallback)(
|
|
111
|
+
(key, vars) => (0, import_inline_i18n_multi2.t)(key, vars, locale),
|
|
112
|
+
[locale]
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// src/component.tsx
|
|
117
|
+
var import_inline_i18n_multi3 = require("inline-i18n-multi");
|
|
118
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
119
|
+
function T(props) {
|
|
120
|
+
const { ko, en, translations, ...vars } = props;
|
|
121
|
+
if (translations) {
|
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: (0, import_inline_i18n_multi3.it)(translations, vars) });
|
|
123
|
+
}
|
|
124
|
+
if (ko !== void 0 && en !== void 0) {
|
|
125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: (0, import_inline_i18n_multi3.it)(ko, en, vars) });
|
|
126
|
+
}
|
|
127
|
+
throw new Error('T component requires either "translations" or both "ko" and "en" props');
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// src/index.ts
|
|
131
|
+
var import_inline_i18n_multi4 = require("inline-i18n-multi");
|
|
132
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
133
|
+
0 && (module.exports = {
|
|
134
|
+
LocaleProvider,
|
|
135
|
+
T,
|
|
136
|
+
clearDictionaries,
|
|
137
|
+
en_de,
|
|
138
|
+
en_es,
|
|
139
|
+
en_fr,
|
|
140
|
+
en_ja,
|
|
141
|
+
en_zh,
|
|
142
|
+
getDictionary,
|
|
143
|
+
getLoadedLocales,
|
|
144
|
+
getLocale,
|
|
145
|
+
hasTranslation,
|
|
146
|
+
it,
|
|
147
|
+
it_de,
|
|
148
|
+
it_es,
|
|
149
|
+
it_fr,
|
|
150
|
+
it_ja,
|
|
151
|
+
it_zh,
|
|
152
|
+
ja_es,
|
|
153
|
+
ja_zh,
|
|
154
|
+
loadDictionaries,
|
|
155
|
+
loadDictionary,
|
|
156
|
+
setLocale,
|
|
157
|
+
t,
|
|
158
|
+
useLocale,
|
|
159
|
+
useT,
|
|
160
|
+
zh_es
|
|
161
|
+
});
|
|
162
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/context.tsx","../src/hooks.ts","../src/component.tsx"],"sourcesContent":["export { LocaleProvider } from './provider'\nexport { useLocale, useT } from './hooks'\nexport { T } from './component'\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 // 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 } from 'react'\nimport { useLocaleContext } from './context'\nimport { t as coreT } from 'inline-i18n-multi'\nimport type { Locale, TranslationVars } 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","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA0E;AAC1E,+BAAwD;;;ACDxD,mBAA0C;AAQnC,IAAM,oBAAgB,4BAAyC,IAAI;AAEnE,SAAS,mBAAuC;AACrD,QAAM,cAAU,yBAAW,aAAa;AAExC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;;;ADwCS;AArCT,SAAS,UAAU,MAAc,OAAe,OAAO,KAAW;AAChE,MAAI,OAAO,aAAa,YAAa;AACrC,QAAM,UAAU,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,YAAY;AAChE,WAAS,SAAS,GAAG,IAAI,IAAI,KAAK,aAAa,OAAO;AACxD;AAEO,SAAS,eAAe;AAAA,EAC7B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,CAAC,QAAQ,cAAc,QAAI,wBAAiB,aAAa;AAG/D,+BAAU,MAAM;AACd,iCAAAC,WAAc,MAAM;AAAA,EACtB,GAAG,CAAC,MAAM,CAAC;AAEX,QAAMC,iBAAY;AAAA,IAChB,CAAC,cAAsB;AACrB,qBAAe,SAAS;AACxB,mCAAAD,WAAc,SAAS;AAGvB,UAAI,YAAY;AACd,kBAAU,YAAY,SAAS;AAAA,MACjC;AAGA,uBAAiB,SAAS;AAAA,IAC5B;AAAA,IACA,CAAC,YAAY,cAAc;AAAA,EAC7B;AAEA,QAAM,YAAQ,uBAAQ,OAAO,EAAE,QAAQ,WAAAC,WAAU,IAAI,CAAC,QAAQA,UAAS,CAAC;AAExE,SAAO,4CAAC,cAAc,UAAd,EAAuB,OAAe,UAAS;AACzD;;;AE3DA,IAAAC,gBAA4B;AAE5B,IAAAC,4BAA2B;AAMpB,SAAS,YAAgD;AAC9D,QAAM,EAAE,QAAQ,WAAAC,WAAU,IAAI,iBAAiB;AAC/C,SAAO,CAAC,QAAQA,UAAS;AAC3B;AASO,SAAS,OAAwD;AACtE,QAAM,EAAE,OAAO,IAAI,iBAAiB;AAEpC,aAAO;AAAA,IACL,CAAC,KAAa,aAA2B,0BAAAC,GAAM,KAAK,MAAM,MAAM;AAAA,IAChE,CAAC,MAAM;AAAA,EACT;AACF;;;AC3BA,IAAAC,4BAA4D;AAmCjD,IAAAC,sBAAA;AAJJ,SAAS,EAAE,OAAe;AAC/B,QAAM,EAAE,IAAI,IAAI,cAAc,GAAG,KAAK,IAAI;AAE1C,MAAI,cAAc;AAChB,WAAO,6EAAG,4CAAG,cAAc,IAAI,GAAE;AAAA,EACnC;AAEA,MAAI,OAAO,UAAa,OAAO,QAAW;AACxC,WAAO,6EAAG,4CAAG,IAAI,IAAI,IAAI,GAAE;AAAA,EAC7B;AAEA,QAAM,IAAI,MAAM,wEAAwE;AAC1F;;;AJtCA,IAAAC,4BAiCO;","names":["import_react","setCoreLocale","setLocale","import_react","import_inline_i18n_multi","setLocale","coreT","import_inline_i18n_multi","import_jsx_runtime","import_inline_i18n_multi"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/provider.tsx
|
|
4
|
+
import { useState, useCallback, useMemo, useEffect } from "react";
|
|
5
|
+
import { setLocale as setCoreLocale } from "inline-i18n-multi";
|
|
6
|
+
|
|
7
|
+
// src/context.tsx
|
|
8
|
+
import { createContext, useContext } from "react";
|
|
9
|
+
var LocaleContext = createContext(null);
|
|
10
|
+
function useLocaleContext() {
|
|
11
|
+
const context = useContext(LocaleContext);
|
|
12
|
+
if (!context) {
|
|
13
|
+
throw new Error("useLocaleContext must be used within a LocaleProvider");
|
|
14
|
+
}
|
|
15
|
+
return context;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// src/provider.tsx
|
|
19
|
+
import { jsx } from "react/jsx-runtime";
|
|
20
|
+
function setCookie(name, value, days = 365) {
|
|
21
|
+
if (typeof document === "undefined") return;
|
|
22
|
+
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
|
23
|
+
document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax`;
|
|
24
|
+
}
|
|
25
|
+
function LocaleProvider({
|
|
26
|
+
locale: initialLocale,
|
|
27
|
+
cookieName = "NEXT_LOCALE",
|
|
28
|
+
onLocaleChange,
|
|
29
|
+
children
|
|
30
|
+
}) {
|
|
31
|
+
const [locale, setLocaleState] = useState(initialLocale);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
setCoreLocale(locale);
|
|
34
|
+
}, [locale]);
|
|
35
|
+
const setLocale2 = useCallback(
|
|
36
|
+
(newLocale) => {
|
|
37
|
+
setLocaleState(newLocale);
|
|
38
|
+
setCoreLocale(newLocale);
|
|
39
|
+
if (cookieName) {
|
|
40
|
+
setCookie(cookieName, newLocale);
|
|
41
|
+
}
|
|
42
|
+
onLocaleChange?.(newLocale);
|
|
43
|
+
},
|
|
44
|
+
[cookieName, onLocaleChange]
|
|
45
|
+
);
|
|
46
|
+
const value = useMemo(() => ({ locale, setLocale: setLocale2 }), [locale, setLocale2]);
|
|
47
|
+
return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children });
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// src/hooks.ts
|
|
51
|
+
import { useCallback as useCallback2 } from "react";
|
|
52
|
+
import { t as coreT } from "inline-i18n-multi";
|
|
53
|
+
function useLocale() {
|
|
54
|
+
const { locale, setLocale: setLocale2 } = useLocaleContext();
|
|
55
|
+
return [locale, setLocale2];
|
|
56
|
+
}
|
|
57
|
+
function useT() {
|
|
58
|
+
const { locale } = useLocaleContext();
|
|
59
|
+
return useCallback2(
|
|
60
|
+
(key, vars) => coreT(key, vars, locale),
|
|
61
|
+
[locale]
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// src/component.tsx
|
|
66
|
+
import { it } from "inline-i18n-multi";
|
|
67
|
+
import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
|
|
68
|
+
function T(props) {
|
|
69
|
+
const { ko, en, translations, ...vars } = props;
|
|
70
|
+
if (translations) {
|
|
71
|
+
return /* @__PURE__ */ jsx2(Fragment, { children: it(translations, vars) });
|
|
72
|
+
}
|
|
73
|
+
if (ko !== void 0 && en !== void 0) {
|
|
74
|
+
return /* @__PURE__ */ jsx2(Fragment, { children: it(ko, en, vars) });
|
|
75
|
+
}
|
|
76
|
+
throw new Error('T component requires either "translations" or both "ko" and "en" props');
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// src/index.ts
|
|
80
|
+
import {
|
|
81
|
+
it as it2,
|
|
82
|
+
it_ja,
|
|
83
|
+
it_zh,
|
|
84
|
+
it_es,
|
|
85
|
+
it_fr,
|
|
86
|
+
it_de,
|
|
87
|
+
en_ja,
|
|
88
|
+
en_zh,
|
|
89
|
+
en_es,
|
|
90
|
+
en_fr,
|
|
91
|
+
en_de,
|
|
92
|
+
ja_zh,
|
|
93
|
+
ja_es,
|
|
94
|
+
zh_es,
|
|
95
|
+
getLocale,
|
|
96
|
+
setLocale,
|
|
97
|
+
t,
|
|
98
|
+
loadDictionaries,
|
|
99
|
+
loadDictionary,
|
|
100
|
+
clearDictionaries,
|
|
101
|
+
hasTranslation,
|
|
102
|
+
getLoadedLocales,
|
|
103
|
+
getDictionary
|
|
104
|
+
} from "inline-i18n-multi";
|
|
105
|
+
export {
|
|
106
|
+
LocaleProvider,
|
|
107
|
+
T,
|
|
108
|
+
clearDictionaries,
|
|
109
|
+
en_de,
|
|
110
|
+
en_es,
|
|
111
|
+
en_fr,
|
|
112
|
+
en_ja,
|
|
113
|
+
en_zh,
|
|
114
|
+
getDictionary,
|
|
115
|
+
getLoadedLocales,
|
|
116
|
+
getLocale,
|
|
117
|
+
hasTranslation,
|
|
118
|
+
it2 as it,
|
|
119
|
+
it_de,
|
|
120
|
+
it_es,
|
|
121
|
+
it_fr,
|
|
122
|
+
it_ja,
|
|
123
|
+
it_zh,
|
|
124
|
+
ja_es,
|
|
125
|
+
ja_zh,
|
|
126
|
+
loadDictionaries,
|
|
127
|
+
loadDictionary,
|
|
128
|
+
setLocale,
|
|
129
|
+
t,
|
|
130
|
+
useLocale,
|
|
131
|
+
useT,
|
|
132
|
+
zh_es
|
|
133
|
+
};
|
|
134
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/provider.tsx","../src/context.tsx","../src/hooks.ts","../src/component.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 } from 'react'\nimport { useLocaleContext } from './context'\nimport { t as coreT } from 'inline-i18n-multi'\nimport type { Locale, TranslationVars } 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","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","export { LocaleProvider } from './provider'\nexport { useLocale, useT } from './hooks'\nexport { T } from './component'\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 // 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":";;;AAAA,SAAS,UAAU,aAAa,SAAS,iBAAiC;AAC1E,SAAS,aAAa,qBAAkC;;;ACDxD,SAAS,eAAe,kBAAkB;AAQnC,IAAM,gBAAgB,cAAyC,IAAI;AAEnE,SAAS,mBAAuC;AACrD,QAAM,UAAU,WAAW,aAAa;AAExC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;;;ADwCS;AArCT,SAAS,UAAU,MAAc,OAAe,OAAO,KAAW;AAChE,MAAI,OAAO,aAAa,YAAa;AACrC,QAAM,UAAU,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,YAAY;AAChE,WAAS,SAAS,GAAG,IAAI,IAAI,KAAK,aAAa,OAAO;AACxD;AAEO,SAAS,eAAe;AAAA,EAC7B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,CAAC,QAAQ,cAAc,IAAI,SAAiB,aAAa;AAG/D,YAAU,MAAM;AACd,kBAAc,MAAM;AAAA,EACtB,GAAG,CAAC,MAAM,CAAC;AAEX,QAAMA,aAAY;AAAA,IAChB,CAAC,cAAsB;AACrB,qBAAe,SAAS;AACxB,oBAAc,SAAS;AAGvB,UAAI,YAAY;AACd,kBAAU,YAAY,SAAS;AAAA,MACjC;AAGA,uBAAiB,SAAS;AAAA,IAC5B;AAAA,IACA,CAAC,YAAY,cAAc;AAAA,EAC7B;AAEA,QAAM,QAAQ,QAAQ,OAAO,EAAE,QAAQ,WAAAA,WAAU,IAAI,CAAC,QAAQA,UAAS,CAAC;AAExE,SAAO,oBAAC,cAAc,UAAd,EAAuB,OAAe,UAAS;AACzD;;;AE3DA,SAAS,eAAAC,oBAAmB;AAE5B,SAAS,KAAK,aAAa;AAMpB,SAAS,YAAgD;AAC9D,QAAM,EAAE,QAAQ,WAAAC,WAAU,IAAI,iBAAiB;AAC/C,SAAO,CAAC,QAAQA,UAAS;AAC3B;AASO,SAAS,OAAwD;AACtE,QAAM,EAAE,OAAO,IAAI,iBAAiB;AAEpC,SAAOC;AAAA,IACL,CAAC,KAAa,SAA2B,MAAM,KAAK,MAAM,MAAM;AAAA,IAChE,CAAC,MAAM;AAAA,EACT;AACF;;;AC3BA,SAAS,UAAmD;AAmCjD,0BAAAC,YAAA;AAJJ,SAAS,EAAE,OAAe;AAC/B,QAAM,EAAE,IAAI,IAAI,cAAc,GAAG,KAAK,IAAI;AAE1C,MAAI,cAAc;AAChB,WAAO,gBAAAA,KAAA,YAAG,aAAG,cAAc,IAAI,GAAE;AAAA,EACnC;AAEA,MAAI,OAAO,UAAa,OAAO,QAAW;AACxC,WAAO,gBAAAA,KAAA,YAAG,aAAG,IAAI,IAAI,IAAI,GAAE;AAAA,EAC7B;AAEA,QAAM,IAAI,MAAM,wEAAwE;AAC1F;;;ACtCA;AAAA,EAEE,MAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAQK;","names":["setLocale","useCallback","setLocale","useCallback","jsx","it"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "inline-i18n-multi-react",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React integration for inline-i18n-multi",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"sideEffects": false,
|
|
19
|
+
"keywords": [
|
|
20
|
+
"i18n",
|
|
21
|
+
"react",
|
|
22
|
+
"internationalization",
|
|
23
|
+
"translation",
|
|
24
|
+
"inline"
|
|
25
|
+
],
|
|
26
|
+
"author": "exiivy98",
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "https://github.com/exiivy98/inline-i18n-multi.git",
|
|
31
|
+
"directory": "packages/react"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
35
|
+
},
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"inline-i18n-multi": "0.1.0"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@types/react": "^19.0.2",
|
|
41
|
+
"react": "^19.0.0",
|
|
42
|
+
"tsup": "^8.3.5",
|
|
43
|
+
"typescript": "^5.7.2",
|
|
44
|
+
"vitest": "^2.1.8"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "tsup",
|
|
48
|
+
"dev": "tsup --watch",
|
|
49
|
+
"test": "vitest --passWithNoTests",
|
|
50
|
+
"lint": "eslint src",
|
|
51
|
+
"typecheck": "tsc --noEmit",
|
|
52
|
+
"clean": "rm -rf dist"
|
|
53
|
+
}
|
|
54
|
+
}
|