mirror of https://github.com/grafana/grafana
i18n: consolidate i18n types & runtime services (#102535)
* i18n: consolidate i18n types & runtime services * Chore: updates after PR feedback * Chore: updates after feedback * Chore: updates after feedback * Chore: updates after PR feedback * Chore: fix i18n * Chore: updates after PR feedbackpull/102721/head
Hugo Häggmark
3 months ago
committed by
GitHub
parent
9e9eb7a4f8
commit
6f2a9abc03
@ -0,0 +1,63 @@ |
||||
/** |
||||
* Hook type for translation function that takes an ID, default message, and optional values |
||||
* @returns A function that returns the translated string |
||||
*/ |
||||
type UseTranslateHook = () => (id: string, defaultMessage: string, values?: Record<string, unknown>) => string; |
||||
|
||||
/** |
||||
* Type for children elements in Trans component |
||||
* Can be either React nodes or an object of values |
||||
*/ |
||||
type TransChild = React.ReactNode | Record<string, unknown>; |
||||
|
||||
/** |
||||
* Props interface for the Trans component used for internationalization |
||||
*/ |
||||
interface TransProps { |
||||
/** |
||||
* The translation key to look up |
||||
*/ |
||||
i18nKey: string; |
||||
/** |
||||
* Child elements or values to interpolate |
||||
*/ |
||||
children?: TransChild | readonly TransChild[]; |
||||
/** |
||||
* React elements to use for interpolation |
||||
*/ |
||||
components?: readonly React.ReactElement[] | { readonly [tagName: string]: React.ReactElement }; |
||||
/** |
||||
* Count value for pluralization |
||||
*/ |
||||
count?: number; |
||||
/** |
||||
* Default text if translation is not found |
||||
*/ |
||||
defaults?: string; |
||||
/** |
||||
* Namespace for the translation key |
||||
*/ |
||||
ns?: string; |
||||
/** |
||||
* Whether to unescape HTML entities |
||||
*/ |
||||
shouldUnescape?: boolean; |
||||
/** |
||||
* Values to interpolate into the translation |
||||
*/ |
||||
values?: Record<string, unknown>; |
||||
} |
||||
|
||||
/** |
||||
* Function declaration for the Trans component |
||||
* @param props - The TransProps object containing translation configuration |
||||
* @returns A React element with translated content |
||||
*/ |
||||
declare function Trans(props: TransProps): React.ReactElement; |
||||
|
||||
/** |
||||
* Type alias for the Trans component |
||||
*/ |
||||
type TransType = typeof Trans; |
||||
|
||||
export type { UseTranslateHook, TransProps, TransType }; |
||||
@ -1,21 +0,0 @@ |
||||
type UseTranslateHook = () => (id: string, defaultMessage: string, values?: Record<string, unknown>) => string; |
||||
|
||||
/** |
||||
* Provides a i18next-compatible translation function. |
||||
*/ |
||||
export let useTranslate: UseTranslateHook = () => { |
||||
// Fallback implementation that should be overridden by setUseT
|
||||
const errorMessage = 'useTranslate is not set. useTranslate must not be called before Grafana is initialized.'; |
||||
if (process.env.NODE_ENV === 'development') { |
||||
throw new Error(errorMessage); |
||||
} |
||||
|
||||
console.error(errorMessage); |
||||
return (id: string, defaultMessage: string) => { |
||||
return defaultMessage; |
||||
}; |
||||
}; |
||||
|
||||
export function setUseTranslateHook(hook: UseTranslateHook) { |
||||
useTranslate = hook; |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
import { type TransProps, type TransType, type UseTranslateHook } from '../types/i18n'; |
||||
|
||||
/** |
||||
* Provides a i18next-compatible translation function. |
||||
*/ |
||||
export let useTranslate: UseTranslateHook = useTranslateDefault; |
||||
|
||||
function useTranslateDefault() { |
||||
// Fallback implementation that should be overridden by setUseT
|
||||
const errorMessage = 'useTranslate is not set. useTranslate must not be called before Grafana is initialized.'; |
||||
if (process.env.NODE_ENV === 'development') { |
||||
throw new Error(errorMessage); |
||||
} |
||||
|
||||
console.error(errorMessage); |
||||
return (id: string, defaultMessage: string) => { |
||||
return defaultMessage; |
||||
}; |
||||
} |
||||
|
||||
export function setUseTranslateHook(hook: UseTranslateHook) { |
||||
useTranslate = hook; |
||||
} |
||||
|
||||
let TransComponent: TransType | undefined; |
||||
|
||||
/** |
||||
* Sets the Trans component that will be used for translations throughout the application. |
||||
* This function should only be called once during application initialization. |
||||
* |
||||
* @param transComponent - The Trans component function to use for translations |
||||
* @throws {Error} If called multiple times outside of test environment |
||||
*/ |
||||
export function setTransComponent(transComponent: TransType) { |
||||
// We allow overriding the trans component in tests
|
||||
if (TransComponent && process.env.NODE_ENV !== 'test') { |
||||
throw new Error('setTransComponent() function should only be called once, when Grafana is starting.'); |
||||
} |
||||
|
||||
TransComponent = transComponent; |
||||
} |
||||
|
||||
/** |
||||
* A React component for handling translations with support for interpolation and pluralization. |
||||
* This component must be initialized using setTransComponent before use. |
||||
* |
||||
* @param props - The translation props including the i18nKey and any interpolation values |
||||
* @returns A React element containing the translated content |
||||
* @throws {Error} If the Trans component hasn't been initialized |
||||
*/ |
||||
export function Trans(props: TransProps): React.ReactElement { |
||||
if (!TransComponent) { |
||||
throw new Error('Trans component not set. Use setTransComponent to set the Trans component.'); |
||||
} |
||||
|
||||
return <TransComponent {...props} />; |
||||
} |
||||
Loading…
Reference in new issue