use-intl 2.7.5 → 2.7.7-alpha.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/dist/{AbstractIntlMessages.d.ts → core/AbstractIntlMessages.d.ts} +0 -0
- package/dist/{DateTimeFormatOptions.d.ts → core/DateTimeFormatOptions.d.ts} +0 -0
- package/dist/{Formats.d.ts → core/Formats.d.ts} +0 -0
- package/dist/{IntlError.d.ts → core/IntlError.d.ts} +0 -0
- package/dist/{IntlMessages.d.ts → core/IntlMessages.d.ts} +0 -0
- package/dist/{NumberFormatOptions.d.ts → core/NumberFormatOptions.d.ts} +0 -0
- package/dist/{TranslationValues.d.ts → core/TranslationValues.d.ts} +2 -2
- package/dist/core/config.d.ts +6 -0
- package/dist/{convertFormatsToIntlMessageFormat.d.ts → core/convertFormatsToIntlMessageFormat.d.ts} +0 -0
- package/dist/core/createBaseTranslator.d.ts +34 -0
- package/dist/{useIntl.d.ts → core/createIntl.d.ts} +11 -1
- package/dist/core/createTranslator.d.ts +47 -0
- package/dist/core/createTranslatorImpl.d.ts +21 -0
- package/dist/core/index.d.ts +8 -0
- package/dist/core/resolveNamespace.d.ts +5 -0
- package/dist/core/use-intl.esm.js +32 -0
- package/dist/core/use-intl.esm.js.map +1 -0
- package/dist/{use-intl.esm8.js → core/use-intl.esm2.js} +2 -2
- package/dist/core/use-intl.esm2.js.map +1 -0
- package/dist/{use-intl.esm4.js → core/use-intl.esm3.js} +12 -12
- package/dist/core/use-intl.esm3.js.map +1 -0
- package/dist/core/use-intl.esm4.js +61 -0
- package/dist/core/use-intl.esm4.js.map +1 -0
- package/dist/core/use-intl.esm5.js +13 -0
- package/dist/core/use-intl.esm5.js.map +1 -0
- package/dist/{use-intl.esm10.js → core/use-intl.esm6.js} +2 -2
- package/dist/core/use-intl.esm6.js.map +1 -0
- package/dist/core/use-intl.esm7.js +213 -0
- package/dist/core/use-intl.esm7.js.map +1 -0
- package/dist/core/use-intl.esm8.js +10 -0
- package/dist/core/use-intl.esm8.js.map +1 -0
- package/dist/{use-intl.esm13.js → core/use-intl.esm9.js} +2 -2
- package/dist/core/use-intl.esm9.js.map +1 -0
- package/dist/{utils → core/utils}/MessageKeys.d.ts +0 -0
- package/dist/{utils → core/utils}/NamespaceKeys.d.ts +0 -0
- package/dist/{utils → core/utils}/NestedKeyOf.d.ts +0 -0
- package/dist/{utils → core/utils}/NestedValueOf.d.ts +0 -0
- package/dist/{validateMessages.d.ts → core/validateMessages.d.ts} +0 -0
- package/dist/index.d.ts +2 -12
- package/dist/{IntlContext.d.ts → react/IntlContext.d.ts} +4 -4
- package/dist/{IntlProvider.d.ts → react/IntlProvider.d.ts} +4 -4
- package/dist/react/index.d.ts +6 -0
- package/dist/react/use-intl.esm.js +25 -0
- package/dist/react/use-intl.esm.js.map +1 -0
- package/dist/{use-intl.esm3.js → react/use-intl.esm2.js} +4 -4
- package/dist/react/use-intl.esm2.js.map +1 -0
- package/dist/{use-intl.esm7.js → react/use-intl.esm3.js} +2 -2
- package/dist/react/use-intl.esm3.js.map +1 -0
- package/dist/{use-intl.esm6.js → react/use-intl.esm4.js} +2 -2
- package/dist/react/use-intl.esm4.js.map +1 -0
- package/dist/react/use-intl.esm5.js +36 -0
- package/dist/react/use-intl.esm5.js.map +1 -0
- package/dist/{use-intl.esm5.js → react/use-intl.esm6.js} +2 -2
- package/dist/react/use-intl.esm6.js.map +1 -0
- package/dist/{use-intl.esm11.js → react/use-intl.esm7.js} +1 -1
- package/dist/react/use-intl.esm7.js.map +1 -0
- package/dist/react/use-intl.esm8.js +44 -0
- package/dist/react/use-intl.esm8.js.map +1 -0
- package/dist/{use-intl.esm9.js → react/use-intl.esm9.js} +0 -0
- package/dist/react/use-intl.esm9.js.map +1 -0
- package/dist/react/useIntl.d.ts +5 -0
- package/dist/{useIntlContext.d.ts → react/useIntlContext.d.ts} +0 -0
- package/dist/{useLocale.d.ts → react/useLocale.d.ts} +0 -0
- package/dist/{useNow.d.ts → react/useNow.d.ts} +0 -0
- package/dist/{useTimeZone.d.ts → react/useTimeZone.d.ts} +0 -0
- package/dist/{useTranslations.d.ts → react/useTranslations.d.ts} +6 -6
- package/dist/react/useTranslationsImpl.d.ts +8 -0
- package/dist/use-intl.cjs.development.js +363 -218
- package/dist/use-intl.cjs.development.js.map +1 -1
- package/dist/use-intl.cjs.production.min.js +1 -1
- package/dist/use-intl.cjs.production.min.js.map +1 -1
- package/dist/use-intl.esm.js +9 -7
- package/dist/use-intl.esm.js.map +1 -1
- package/package.json +3 -2
- package/src/{AbstractIntlMessages.tsx → core/AbstractIntlMessages.tsx} +0 -0
- package/src/{DateTimeFormatOptions.tsx → core/DateTimeFormatOptions.tsx} +0 -0
- package/src/{Formats.tsx → core/Formats.tsx} +0 -0
- package/src/{IntlError.tsx → core/IntlError.tsx} +0 -0
- package/src/{IntlMessages.tsx → core/IntlMessages.tsx} +0 -0
- package/src/{NumberFormatOptions.tsx → core/NumberFormatOptions.tsx} +0 -0
- package/src/{TranslationValues.tsx → core/TranslationValues.tsx} +8 -2
- package/src/core/config.tsx +15 -0
- package/src/{convertFormatsToIntlMessageFormat.tsx → core/convertFormatsToIntlMessageFormat.tsx} +0 -0
- package/src/core/createBaseTranslator.tsx +323 -0
- package/src/{useIntl.tsx → core/createIntl.tsx} +17 -4
- package/src/core/createTranslator.tsx +110 -0
- package/src/core/createTranslatorImpl.tsx +95 -0
- package/src/core/index.tsx +11 -0
- package/src/core/resolveNamespace.tsx +12 -0
- package/src/{utils → core/utils}/MessageKeys.tsx +0 -0
- package/src/{utils → core/utils}/NamespaceKeys.tsx +0 -0
- package/src/{utils → core/utils}/NestedKeyOf.tsx +0 -0
- package/src/{utils → core/utils}/NestedValueOf.tsx +0 -0
- package/src/{validateMessages.tsx → core/validateMessages.tsx} +0 -0
- package/src/index.tsx +2 -15
- package/src/{IntlContext.tsx → react/IntlContext.tsx} +4 -4
- package/src/{IntlProvider.tsx → react/IntlProvider.tsx} +6 -19
- package/src/react/index.tsx +6 -0
- package/src/react/useIntl.tsx +19 -0
- package/src/{useIntlContext.tsx → react/useIntlContext.tsx} +0 -0
- package/src/{useLocale.tsx → react/useLocale.tsx} +0 -0
- package/src/{useNow.tsx → react/useNow.tsx} +0 -0
- package/src/{useTimeZone.tsx → react/useTimeZone.tsx} +0 -0
- package/src/{useTranslations.tsx → react/useTranslations.tsx} +9 -7
- package/src/react/useTranslationsImpl.tsx +64 -0
- package/dist/use-intl.esm10.js.map +0 -1
- package/dist/use-intl.esm11.js.map +0 -1
- package/dist/use-intl.esm12.js +0 -213
- package/dist/use-intl.esm12.js.map +0 -1
- package/dist/use-intl.esm13.js.map +0 -1
- package/dist/use-intl.esm2.js +0 -48
- package/dist/use-intl.esm2.js.map +0 -1
- package/dist/use-intl.esm3.js.map +0 -1
- package/dist/use-intl.esm4.js.map +0 -1
- package/dist/use-intl.esm5.js.map +0 -1
- package/dist/use-intl.esm6.js.map +0 -1
- package/dist/use-intl.esm7.js.map +0 -1
- package/dist/use-intl.esm8.js.map +0 -1
- package/dist/use-intl.esm9.js.map +0 -1
- package/dist/useTranslationsImpl.d.ts +0 -12
- package/src/useTranslationsImpl.tsx +0 -328
|
@@ -1,328 +0,0 @@
|
|
|
1
|
-
import {IntlMessageFormat} from 'intl-messageformat';
|
|
2
|
-
import {
|
|
3
|
-
cloneElement,
|
|
4
|
-
isValidElement,
|
|
5
|
-
ReactElement,
|
|
6
|
-
ReactNode,
|
|
7
|
-
ReactNodeArray,
|
|
8
|
-
useMemo,
|
|
9
|
-
useRef
|
|
10
|
-
} from 'react';
|
|
11
|
-
import AbstractIntlMessages from './AbstractIntlMessages';
|
|
12
|
-
import Formats from './Formats';
|
|
13
|
-
import IntlError, {IntlErrorCode} from './IntlError';
|
|
14
|
-
import TranslationValues, {RichTranslationValues} from './TranslationValues';
|
|
15
|
-
import convertFormatsToIntlMessageFormat from './convertFormatsToIntlMessageFormat';
|
|
16
|
-
import useIntlContext from './useIntlContext';
|
|
17
|
-
import MessageKeys from './utils/MessageKeys';
|
|
18
|
-
import NestedKeyOf from './utils/NestedKeyOf';
|
|
19
|
-
import NestedValueOf from './utils/NestedValueOf';
|
|
20
|
-
|
|
21
|
-
function resolvePath(
|
|
22
|
-
messages: AbstractIntlMessages | undefined,
|
|
23
|
-
idPath: string,
|
|
24
|
-
namespace?: string
|
|
25
|
-
) {
|
|
26
|
-
if (!messages) {
|
|
27
|
-
throw new Error(
|
|
28
|
-
__DEV__ ? `No messages available at \`${namespace}\`.` : undefined
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
let message = messages;
|
|
33
|
-
|
|
34
|
-
idPath.split('.').forEach((part) => {
|
|
35
|
-
const next = (message as any)[part];
|
|
36
|
-
|
|
37
|
-
if (part == null || next == null) {
|
|
38
|
-
throw new Error(
|
|
39
|
-
__DEV__
|
|
40
|
-
? `Could not resolve \`${idPath}\` in ${
|
|
41
|
-
namespace ? `\`${namespace}\`` : 'messages'
|
|
42
|
-
}.`
|
|
43
|
-
: undefined
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
message = next;
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
return message;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function prepareTranslationValues(values: RichTranslationValues) {
|
|
54
|
-
if (Object.keys(values).length === 0) return undefined;
|
|
55
|
-
|
|
56
|
-
// Workaround for https://github.com/formatjs/formatjs/issues/1467
|
|
57
|
-
const transformedValues: RichTranslationValues = {};
|
|
58
|
-
Object.keys(values).forEach((key) => {
|
|
59
|
-
let index = 0;
|
|
60
|
-
const value = values[key];
|
|
61
|
-
|
|
62
|
-
let transformed;
|
|
63
|
-
if (typeof value === 'function') {
|
|
64
|
-
transformed = (children: ReactNode) => {
|
|
65
|
-
const result = value(children);
|
|
66
|
-
|
|
67
|
-
return isValidElement(result)
|
|
68
|
-
? cloneElement(result, {key: key + index++})
|
|
69
|
-
: result;
|
|
70
|
-
};
|
|
71
|
-
} else {
|
|
72
|
-
transformed = value;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
transformedValues[key] = transformed;
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
return transformedValues;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export default function useTranslationsImpl<
|
|
82
|
-
Messages extends AbstractIntlMessages,
|
|
83
|
-
NestedKey extends NestedKeyOf<Messages>
|
|
84
|
-
>(allMessages: Messages, namespace: NestedKey, namespacePrefix: string) {
|
|
85
|
-
const {
|
|
86
|
-
defaultTranslationValues,
|
|
87
|
-
formats: globalFormats,
|
|
88
|
-
getMessageFallback,
|
|
89
|
-
locale,
|
|
90
|
-
onError,
|
|
91
|
-
timeZone
|
|
92
|
-
} = useIntlContext();
|
|
93
|
-
|
|
94
|
-
// The `namespacePrefix` is part of the type system.
|
|
95
|
-
// See the comment in the hook invocation.
|
|
96
|
-
allMessages = allMessages[namespacePrefix] as Messages;
|
|
97
|
-
namespace = (
|
|
98
|
-
namespace === namespacePrefix
|
|
99
|
-
? undefined
|
|
100
|
-
: namespace.slice((namespacePrefix + '.').length)
|
|
101
|
-
) as NestedKey;
|
|
102
|
-
|
|
103
|
-
const cachedFormatsByLocaleRef = useRef<
|
|
104
|
-
Record<string, Record<string, IntlMessageFormat>>
|
|
105
|
-
>({});
|
|
106
|
-
|
|
107
|
-
const messagesOrError = useMemo(() => {
|
|
108
|
-
try {
|
|
109
|
-
if (!allMessages) {
|
|
110
|
-
throw new Error(
|
|
111
|
-
__DEV__ ? `No messages were configured on the provider.` : undefined
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
const retrievedMessages = namespace
|
|
116
|
-
? resolvePath(allMessages, namespace)
|
|
117
|
-
: allMessages;
|
|
118
|
-
|
|
119
|
-
if (!retrievedMessages) {
|
|
120
|
-
throw new Error(
|
|
121
|
-
__DEV__
|
|
122
|
-
? `No messages for namespace \`${namespace}\` found.`
|
|
123
|
-
: undefined
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
return retrievedMessages;
|
|
128
|
-
} catch (error) {
|
|
129
|
-
const intlError = new IntlError(
|
|
130
|
-
IntlErrorCode.MISSING_MESSAGE,
|
|
131
|
-
(error as Error).message
|
|
132
|
-
);
|
|
133
|
-
onError(intlError);
|
|
134
|
-
return intlError;
|
|
135
|
-
}
|
|
136
|
-
}, [allMessages, namespace, onError]);
|
|
137
|
-
|
|
138
|
-
const translate = useMemo(() => {
|
|
139
|
-
function getFallbackFromErrorAndNotify(
|
|
140
|
-
key: string,
|
|
141
|
-
code: IntlErrorCode,
|
|
142
|
-
message?: string
|
|
143
|
-
) {
|
|
144
|
-
const error = new IntlError(code, message);
|
|
145
|
-
onError(error);
|
|
146
|
-
return getMessageFallback({error, key, namespace});
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
function translateBaseFn(
|
|
150
|
-
/** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
|
|
151
|
-
key: string,
|
|
152
|
-
/** Key value pairs for values to interpolate into the message. */
|
|
153
|
-
values?: RichTranslationValues,
|
|
154
|
-
/** Provide custom formats for numbers, dates and times. */
|
|
155
|
-
formats?: Partial<Formats>
|
|
156
|
-
): string | ReactElement | ReactNodeArray {
|
|
157
|
-
const cachedFormatsByLocale = cachedFormatsByLocaleRef.current;
|
|
158
|
-
|
|
159
|
-
if (messagesOrError instanceof IntlError) {
|
|
160
|
-
// We have already warned about this during render
|
|
161
|
-
return getMessageFallback({
|
|
162
|
-
error: messagesOrError,
|
|
163
|
-
key,
|
|
164
|
-
namespace
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
const messages = messagesOrError;
|
|
168
|
-
|
|
169
|
-
const cacheKey = [namespace, key]
|
|
170
|
-
.filter((part) => part != null)
|
|
171
|
-
.join('.');
|
|
172
|
-
|
|
173
|
-
let messageFormat;
|
|
174
|
-
if (cachedFormatsByLocale[locale]?.[cacheKey]) {
|
|
175
|
-
messageFormat = cachedFormatsByLocale[locale][cacheKey];
|
|
176
|
-
} else {
|
|
177
|
-
let message;
|
|
178
|
-
try {
|
|
179
|
-
message = resolvePath(messages, key, namespace);
|
|
180
|
-
} catch (error) {
|
|
181
|
-
return getFallbackFromErrorAndNotify(
|
|
182
|
-
key,
|
|
183
|
-
IntlErrorCode.MISSING_MESSAGE,
|
|
184
|
-
(error as Error).message
|
|
185
|
-
);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
if (typeof message === 'object') {
|
|
189
|
-
return getFallbackFromErrorAndNotify(
|
|
190
|
-
key,
|
|
191
|
-
IntlErrorCode.INSUFFICIENT_PATH,
|
|
192
|
-
__DEV__
|
|
193
|
-
? `Insufficient path specified for \`${key}\` in \`${
|
|
194
|
-
namespace ? `\`${namespace}\`` : 'messages'
|
|
195
|
-
}\`.`
|
|
196
|
-
: undefined
|
|
197
|
-
);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
try {
|
|
201
|
-
messageFormat = new IntlMessageFormat(
|
|
202
|
-
message,
|
|
203
|
-
locale,
|
|
204
|
-
convertFormatsToIntlMessageFormat(
|
|
205
|
-
{...globalFormats, ...formats},
|
|
206
|
-
timeZone
|
|
207
|
-
)
|
|
208
|
-
);
|
|
209
|
-
} catch (error) {
|
|
210
|
-
return getFallbackFromErrorAndNotify(
|
|
211
|
-
key,
|
|
212
|
-
IntlErrorCode.INVALID_MESSAGE,
|
|
213
|
-
(error as Error).message
|
|
214
|
-
);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
if (!cachedFormatsByLocale[locale]) {
|
|
218
|
-
cachedFormatsByLocale[locale] = {};
|
|
219
|
-
}
|
|
220
|
-
cachedFormatsByLocale[locale][cacheKey] = messageFormat;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
try {
|
|
224
|
-
const formattedMessage = messageFormat.format(
|
|
225
|
-
// @ts-ignore `intl-messageformat` expects a different format
|
|
226
|
-
// for rich text elements since a recent minor update. This
|
|
227
|
-
// needs to be evaluated in detail, possibly also in regards
|
|
228
|
-
// to be able to format to parts.
|
|
229
|
-
prepareTranslationValues({...defaultTranslationValues, ...values})
|
|
230
|
-
);
|
|
231
|
-
|
|
232
|
-
if (formattedMessage == null) {
|
|
233
|
-
throw new Error(
|
|
234
|
-
__DEV__
|
|
235
|
-
? `Unable to format \`${key}\` in ${
|
|
236
|
-
namespace ? `namespace \`${namespace}\`` : 'messages'
|
|
237
|
-
}`
|
|
238
|
-
: undefined
|
|
239
|
-
);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
// Limit the function signature to return strings or React elements
|
|
243
|
-
return isValidElement(formattedMessage) ||
|
|
244
|
-
// Arrays of React elements
|
|
245
|
-
Array.isArray(formattedMessage) ||
|
|
246
|
-
typeof formattedMessage === 'string'
|
|
247
|
-
? formattedMessage
|
|
248
|
-
: String(formattedMessage);
|
|
249
|
-
} catch (error) {
|
|
250
|
-
return getFallbackFromErrorAndNotify(
|
|
251
|
-
key,
|
|
252
|
-
IntlErrorCode.FORMATTING_ERROR,
|
|
253
|
-
(error as Error).message
|
|
254
|
-
);
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
function translateFn<
|
|
259
|
-
TargetKey extends MessageKeys<
|
|
260
|
-
NestedValueOf<Messages, NestedKey>,
|
|
261
|
-
NestedKeyOf<NestedValueOf<Messages, NestedKey>>
|
|
262
|
-
>
|
|
263
|
-
>(
|
|
264
|
-
/** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
|
|
265
|
-
key: TargetKey,
|
|
266
|
-
/** Key value pairs for values to interpolate into the message. */
|
|
267
|
-
values?: TranslationValues,
|
|
268
|
-
/** Provide custom formats for numbers, dates and times. */
|
|
269
|
-
formats?: Partial<Formats>
|
|
270
|
-
): string {
|
|
271
|
-
const message = translateBaseFn(key, values, formats);
|
|
272
|
-
|
|
273
|
-
if (typeof message !== 'string') {
|
|
274
|
-
return getFallbackFromErrorAndNotify(
|
|
275
|
-
key,
|
|
276
|
-
IntlErrorCode.INVALID_MESSAGE,
|
|
277
|
-
__DEV__
|
|
278
|
-
? `The message \`${key}\` in ${
|
|
279
|
-
namespace ? `namespace \`${namespace}\`` : 'messages'
|
|
280
|
-
} didn't resolve to a string. If you want to format rich text, use \`t.rich\` instead.`
|
|
281
|
-
: undefined
|
|
282
|
-
);
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
return message;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
translateFn.rich = translateBaseFn;
|
|
289
|
-
|
|
290
|
-
translateFn.raw = (
|
|
291
|
-
/** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
|
|
292
|
-
key: string
|
|
293
|
-
): any => {
|
|
294
|
-
if (messagesOrError instanceof IntlError) {
|
|
295
|
-
// We have already warned about this during render
|
|
296
|
-
return getMessageFallback({
|
|
297
|
-
error: messagesOrError,
|
|
298
|
-
key,
|
|
299
|
-
namespace
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
const messages = messagesOrError;
|
|
303
|
-
|
|
304
|
-
try {
|
|
305
|
-
return resolvePath(messages, key, namespace);
|
|
306
|
-
} catch (error) {
|
|
307
|
-
return getFallbackFromErrorAndNotify(
|
|
308
|
-
key,
|
|
309
|
-
IntlErrorCode.MISSING_MESSAGE,
|
|
310
|
-
(error as Error).message
|
|
311
|
-
);
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
return translateFn;
|
|
316
|
-
}, [
|
|
317
|
-
onError,
|
|
318
|
-
getMessageFallback,
|
|
319
|
-
namespace,
|
|
320
|
-
messagesOrError,
|
|
321
|
-
locale,
|
|
322
|
-
globalFormats,
|
|
323
|
-
timeZone,
|
|
324
|
-
defaultTranslationValues
|
|
325
|
-
]);
|
|
326
|
-
|
|
327
|
-
return translate;
|
|
328
|
-
}
|