{"id":13495661,"url":"https://github.com/myNameIsDu/translator","last_synced_at":"2025-03-28T16:33:09.251Z","repository":{"id":248468129,"uuid":"582925283","full_name":"myNameIsDu/translator","owner":"myNameIsDu","description":"一个简单方便的国际化方案","archived":false,"fork":false,"pushed_at":"2023-07-05T13:06:59.000Z","size":746,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-16T12:47:40.518Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/myNameIsDu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-28T08:52:22.000Z","updated_at":"2024-07-15T04:42:40.000Z","dependencies_parsed_at":"2024-07-15T06:42:40.092Z","dependency_job_id":null,"html_url":"https://github.com/myNameIsDu/translator","commit_stats":null,"previous_names":["mynameisdu/translator","mynameisdu/i18n"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myNameIsDu%2Ftranslator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myNameIsDu%2Ftranslator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myNameIsDu%2Ftranslator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myNameIsDu%2Ftranslator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myNameIsDu","download_url":"https://codeload.github.com/myNameIsDu/translator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246063177,"owners_count":20717760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:36.828Z","updated_at":"2025-03-28T16:33:08.894Z","avatar_url":"https://github.com/myNameIsDu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 一个简单的国际化工具\n\n## 特点\n\n-   使用简单\n-   默认中文 id，无需特意声明各种 id，中文就写在代码中，高可读性\n-   支持一个中文多种英文翻译 (特定 id)\n-   支持动态文案\n-   支持 xml 解决多元素语义问题\n-   自动收集，并找出过期的翻译 (在业务的迭代中，文案已经删除，但是翻译还存在)，避免语言包越来越大\n-   可视化操作\n\n## Install\n\n```shell\npnpm install translator-client\npnpm install translator-server -D\n```\n\n主要注意的是，由于 `translator-server` 内置依赖 `react`，所以在 `npm` 下可能导致版本冲突，建议使用 `pnpm`\n\n## Get Start\n\n1. 在入口文件，导入 `setLocales`，从 `src/locales/complete.json` 导入 语言包，并传入 `setLocales`\n\n```tsx\nimport locales from './locales/complete.json';\nimport { setLocales } from 'translator-client';\n\nsetLocales(locales);\n```\n\n`src/locales/complete.json` 需要手动创建，并写入一个空对象\n\n2. `t` 和 `Translate` 的使用\n\n在需要翻译的文案外包一层 `t`,\n\n```tsx\nimport { t } from 'translator-client';\nfunction Page() {\n    return t('文案');\n}\n```\n\n在 `react`组件外的文案 (常量的声明里) 需要使用 `Translate`\n\n```tsx\nimport { Translate } from 'translator-client';\nexport const data = [\n    {\n        label: \u003cTranslate text=\"文案1\" /\u003e,\n        value: '1',\n    },\n    {\n        label: \u003cTranslate text=\"文案1\" /\u003e,\n        value: '2',\n    },\n];\n```\n\n3. 执行 `pnpm translator`，打开 `http://localhost:7733/` 可以查看到收集的文案，并操作\n\n## API\n\n### t\n\nreact 上下文中的翻译方法\n\n```tsx\ndeclare function t(s: string, { id }?: { id: string }): string;\n```\n\n#### 支持动态文案，例如\n\n```tsx\nt(`共计\u003c${var}\u003e`)\n```\n\n其中动态的部分会被替换为 `holder1` 并作为 `id` 使用\n\n如果确需 `\u003c\u003e` 字符，则可使用转义符，例如\n\n```tsx\nt(`文案/\u003c文案/\u003e`);\n```\n\n在渲染时转义符会被自动去除\n\n#### xml\n\n```tsx\nt('共计\u003cspan\u003e特殊\u003c/span\u003e\u003cpage\u003e页', {\n    span: children =\u003e (\n        \u003cspan key=\"span\" style={{ color: 'red' }}\u003e\n            {children}\n        \u003c/span\u003e\n    ),\n});\n```\n\n当 xml 替换函数返回 字符串时，t 函数也会尽量返回字符串\n\n```tsx\nexpect(\n    t('共计\u003cspan\u003e特殊\u003c/span\u003e\u003cpage\u003e页', {\n        span: c =\u003e `\u003cspan style='color:red'\u003e${c}\u003c/span\u003e`,\n    }),\n).toBe(\"共计\u003cspan style='color:red'\u003e特殊\u003c/span\u003epage页\");\n```\n\n更多用例[请查看](./packages/translator-client/src/__test__/translate.test.tsx)\n\n### Translate\n\nreact 上下文外 (常量声明) 的翻译组件\n\n```tsx\ndeclare function Translate({ text, id }: TranslatePropsType): JSX.Element;\n```\n\n### setLanguage\n\n切换语言的方法\n\n```tsx\ntype SupportLanguagesType = 'zh' | 'en';\n\ndeclare const setLang: (lang: SupportLanguagesType) =\u003e void;\n```\n\n### setLocales\n\n设置翻译包\n\n```tsx\nexport declare const supportLanguages: readonly ['zh', 'en'];\nexport declare type SupportLanguagesType = typeof supportLanguages[number];\nexport declare type LocalesItemType = Record\u003cSupportLanguagesType, string\u003e;\nexport declare type LocalesType = Record\u003cstring, LocalesItemType\u003e;\n\nexport declare const setLocales: (nextLocales: LocalesType) =\u003e void;\n```\n\n## 强绑定的文案和`t`\n\n为了能收集到所有的文案，所以牺牲了写法的灵活性，强行绑定文案和 `t`\n\n例如：\n\n错误的写法\n\n```tsx\nfunction Page() {\n    const text = isReal ? '文案1' : '文案2';\n    return t(text);\n}\n```\n\n正确写法\n\n```tsx\nfunction Page() {\n    const text = isReal ? t('文案1') : t('文案2');\n    return text;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FmyNameIsDu%2Ftranslator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FmyNameIsDu%2Ftranslator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FmyNameIsDu%2Ftranslator/lists"}