watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 03:55:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Replace react-intl with next-intl and consolidate lang files.

Browse source 
Migrate i18n from react-intl to next-intl, eliminating the formatjs
compilation pipeline. Translation files now live as nested JSON in
public/intl/messages/ (single source of truth), removing the duplicated
src/lang/ directory and the copy/compile build steps. The useMessages()
hook API is preserved so all 195+ consumer components are unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-02-07 01:48:32 -08:00
parent fed8d4c71a
commit a1890e9261
118 changed files with 18151 additions and 136657 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/hooks/useMessages.ts
View file

@ -1,5 +1,6 @@
import { FormattedMessage, type MessageDescriptor, useIntl } from 'react-intl';
import { labels, messages } from '@/components/messages';
import { useTranslations } from 'next-intl';
import { createElement, type ReactNode } from 'react';
import { labels, type MessageDescriptor, messages } from '@/components/messages';
import type { ApiError } from '@/lib/types';
type FormatMessage = (
@ -8,17 +9,33 @@ type FormatMessage = (
opts?: any,
) => string | null;
interface FormattedMessageProps extends MessageDescriptor {
values?: Record<string, ReactNode>;
}
interface UseMessages {
formatMessage: FormatMessage;
messages: typeof messages;
labels: typeof labels;
getMessage: (id: string) => string;
getErrorMessage: (error: ApiError) => string | undefined;
FormattedMessage: typeof FormattedMessage;
FormattedMessage: (props: FormattedMessageProps) => ReactNode;
}
export function useMessages(): UseMessages {
const intl = useIntl();
const t = useTranslations();
const formatMessage = (
descriptor: MessageDescriptor,
values?: Record<string, string | number | boolean | null | undefined>,
) => {
if (!descriptor) return null;
try {
return t(descriptor.id, values);
} catch {
return descriptor.defaultMessage || descriptor.id;
}
};
const getMessage = (id: string) => {
const message = Object.values(messages).find(value => value.id === `message.${id}`);
@ -36,13 +53,50 @@ export function useMessages(): UseMessages {
return code ? getMessage(code) : error?.message || 'Unknown error';
};
const formatMessage = (
descriptor: MessageDescriptor,
values?: Record<string, string | number | boolean | null | undefined>,
opts?: any,
) => {
return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
};
function FormattedMessage({ id, defaultMessage, values }: FormattedMessageProps) {
if (
!values ||
Object.values(values).every(v => typeof v === 'string' || typeof v === 'number')
) {
try {
return t(id, values as any);
} catch {
return defaultMessage || id;
}
}
// For JSX values: get the raw ICU template and manually interpolate
let template: string;
try {
template = t.raw(id) as string;
} catch {
template = defaultMessage || id;
}
if (typeof template !== 'string') {
return defaultMessage || id;
}
// Split on {placeholder} tokens and interleave with values
const parts: ReactNode[] = [];
const regex = /\{(\w+)\}/g;
let lastIndex = 0;
for (let match = regex.exec(template); match !== null; match = regex.exec(template)) {
if (match.index > lastIndex) {
parts.push(template.slice(lastIndex, match.index));
}
const key = match[1];
parts.push(values[key] !== undefined ? values[key] : match[0]);
lastIndex = regex.lastIndex;
}
if (lastIndex < template.length) {
parts.push(template.slice(lastIndex));
}
return createElement('span', null, ...parts);
}
return { formatMessage, messages, labels, getMessage, getErrorMessage, FormattedMessage };
}