'use client'
|
import { resources } from '@/i18n/i18next-config'
|
import { useEffect, useState } from 'react'
|
import cn from '@/utils/classnames'
|
|
export default function I18nTest() {
|
const [langs, setLangs] = useState<Lang[]>([])
|
|
useEffect(() => {
|
setLangs(genLangs())
|
}, [])
|
|
return (
|
<div
|
style={{
|
height: 'calc(100% - 6em)',
|
overflowY: 'auto',
|
margin: '1em 1em 5em',
|
}}
|
>
|
|
<div style={{ minHeight: '75vh' }}>
|
<h2>Summary</h2>
|
|
<table
|
className={cn('mt-2 min-w-[340px] border-collapse border-0')}
|
>
|
<thead className="system-xs-medium-uppercase text-text-tertiary">
|
<tr>
|
<td className="w-5 min-w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1">
|
#
|
</td>
|
<td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
lang
|
</td>
|
<td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
count
|
</td>
|
<td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
missing
|
</td>
|
<td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
extra
|
</td>
|
</tr>
|
</thead>
|
<tbody className="system-sm-regular text-text-secondary">
|
{langs.map(({ locale, count, missing, extra }, idx) => <tr key={locale}>
|
<td className="">{idx}</td>
|
<td className="p-1.5">{locale}</td>
|
<td>{count}</td>
|
<td>{missing.length}</td>
|
<td>{extra.length}</td>
|
</tr>)}
|
</tbody>
|
</table>
|
</div>
|
|
<h2>Details</h2>
|
|
<table
|
className={cn('mt-2 w-full min-w-[340px] border-collapse border-0')}
|
>
|
<thead className="system-xs-medium-uppercase text-text-tertiary">
|
<tr>
|
<td className="w-5 min-w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1">
|
#
|
</td>
|
<td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
lang
|
</td>
|
<td className="w-full whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
missing
|
</td>
|
<td className="w-full whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
|
extra
|
</td>
|
</tr>
|
</thead>
|
|
<tbody>
|
{langs.map(({ locale, missing, extra }, idx) => {
|
return (<tr key={locale}>
|
<td className="py-2 align-top">{idx}</td>
|
<td className="py-2 align-top">{locale}</td>
|
<td className="py-2 align-top">
|
<ul>
|
{missing.map(key => (
|
<li key={key}>{key}</li>
|
))}
|
</ul>
|
</td>
|
<td className="py-2 align-top">
|
<ul>
|
{extra.map(key => (
|
<li key={key}>{key}</li>
|
))}
|
</ul>
|
</td>
|
</tr>
|
)
|
})}
|
</tbody>
|
</table>
|
|
</div>
|
)
|
}
|
|
function genLangs() {
|
const langs_: Lang[] = []
|
let en!: Lang
|
|
for (const [key, value] of Object.entries(resources)) {
|
const keys = getNestedKeys(value.translation)
|
const lang: Lang = {
|
locale: key,
|
keys: new Set(keys),
|
count: keys.length,
|
missing: [],
|
extra: [],
|
}
|
|
langs_.push(lang)
|
if (key === 'en-US') en = lang
|
}
|
|
for (const lang of langs_) {
|
const missing: string[] = []
|
const extra: string[] = []
|
|
for (const key of lang.keys)
|
if (!en.keys.has(key)) extra.push(key)
|
|
for (const key of en.keys)
|
if (!lang.keys.has(key)) missing.push(key)
|
|
lang.missing = missing
|
lang.extra = extra
|
}
|
return langs_
|
}
|
|
function getNestedKeys(translation: Record<string, any>): string[] {
|
const nestedKeys: string[] = []
|
const iterateKeys = (obj: Record<string, any>, prefix = '') => {
|
for (const key in obj) {
|
const nestedKey = prefix ? `${prefix}.${key}` : key
|
// nestedKeys.push(nestedKey);
|
if (typeof obj[key] === 'object') iterateKeys(obj[key], nestedKey)
|
else if (typeof obj[key] === 'string') nestedKeys.push(nestedKey)
|
}
|
}
|
iterateKeys(translation)
|
return nestedKeys
|
}
|
|
type Lang = {
|
locale: string;
|
keys: Set<string>;
|
count: number;
|
missing: string[];
|
extra: string[];
|
}
|
