feat: Introduced experimental support for internationalization.

Signed-off-by: rui ma <ruima@alauda.io>
2023-09-04 23:51:08 +08:00
parent 155901d486
commit 6e30769cc6
38 changed files with 1698 additions and 37 deletions
@@ -0,0 +1,61 @@
+---
+id: internationalization
+title: Internationalization (Experimental)
+description: Documentation on adding internationalization to the plugin
+---
+
+## Overview
+
+The Backstage core function provides internationalization for plugins
+
+## For a plugin developer
+
+When you are creating your plugin, you have the possibility to use `createTranslationRef` to define all messages for your plugin. For example
+
+```typescript jsx
+import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+/** @alpha */
+export const userSettingsTranslationRef = createTranslationRef({
+  id: 'user-settings',
+  messages: {
+    language: 'Language',
+    change_the_language: 'Change the language',
+  },
+});
+```
+
+And the using this messages in your components like:
+
+```typescript jsx
+const t = useTranslationRef(userSettingsTranslationRef);
+
+return (
+  <ListItemText
+    className={classes.listItemText}
+    primary={t('language')}
+    secondary={t('change_the_language')}
+  />
+);
+```
+
+## For an application developer overwrite plugin messages
+
+```diff typescript jsx
+const app = createApp({
+  __experimentalI18n: {
+    supportedLanguages: ['zh', 'en'],
+    messages: [
+      createTranslationResource({
+        ref: userSettingsTranslationRef,
+        messages: {
+          zh: {
+            select_lng: '选择中文-app',
+          },
+        },
+      }),
+    ],
+  },
+  ...
+})
+```