feat: add i18n support in plugin infra (#3661)

* feat: add i18n in plugin infra

* feat: enable i18n keys in plugin infra

.i18n-codegen.json

@@ -37,6 +37,18 @@
                 "trans": "DashboardTrans",
                 "sourceMap": "inline"
             }
+        },
+        {
+            "input": "./packages/plugins/example/src/locales/en.json",
+            "output": "./packages/plugins/example/src/locales/i18n_generated",
+            "parser": "i18next",
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "io.mask.example",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
         }
     ]
 }

packages/dashboard/src/initialization/Dashboard.tsx

@@ -9,7 +9,7 @@ import {
     useSystemPreferencePalatte,
 } from '@masknet/theme'
 import { Emitter } from '@servie/events'
-import { ErrorBoundary } from '@masknet/shared'
+import { createI18NBundle, ErrorBoundary } from '@masknet/shared'
 
 import i18n from 'i18next'
 import { I18nextProvider } from 'react-i18next'
@@ -23,9 +23,14 @@ import { Web3Context } from '../web3/context'
 
 const PluginRender = createInjectHooksRenderer(useActivatedPluginsDashboard, (x) => x.GlobalInjection)
 
-// TODO: implement
-startPluginDashboard({
-    enabled: { events: new Emitter(), isEnabled: () => true },
+setTimeout(() => {
+    // TODO: implement enabled
+    startPluginDashboard({
+        enabled: { events: new Emitter(), isEnabled: () => true },
+        addI18NResource(plugin, resource) {
+            createI18NBundle(plugin, resource)(i18n)
+        },
+    })
 })
 export default function DashboardRoot() {
     const settings = useAppearance()

packages/maskbook/src/components/InjectedComponents/PostDialog.tsx

@@ -14,7 +14,7 @@ import {
     DialogContent,
     DialogActions,
 } from '@material-ui/core'
-import { Plugin, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
+import { I18NStringField, Plugin, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
 import { useValueRef } from '@masknet/shared'
 import { CompositionEvent, MaskMessage, useI18N, Flags } from '../../utils'
 import { isMinds } from '../../social-network-adaptor/minds.com/base'
@@ -41,6 +41,7 @@ import { DebugMetadataInspector } from '../shared/DebugMetadataInspector'
 import { editActivatedPostMetadata, globalTypedMessageMetadata } from '../../protocols/typed-message/global-state'
 import { isTwitter } from '../../social-network-adaptor/twitter.com/base'
 import { SteganographyTextPayload } from './SteganographyTextPayload'
+import { PluginI18NFieldRender, usePluginI18NField } from '../../plugin-infra/I18NFieldRender'
 
 const useStyles = makeStyles({
     MUIInputRoot: {
@@ -457,6 +458,7 @@ export function CharLimitIndicator({ value, max, ...props }: CircularProgressPro
 
 function PluginRenderer() {
     const chainIdValid = useChainIdValid()
+    const pluginField = usePluginI18NField()
     const result = useActivatedPluginsSNSAdaptor().map((plugin) =>
         Result.wrap(() => {
             const entry = plugin.CompositionDialogEntry
@@ -465,7 +467,7 @@ function PluginRenderer() {
             if (!entry || (!chainIdValid && requireChainValid)) return null
 
             return (
-                <ErrorBoundary subject={`Plugin "${plugin.name.fallback}"`} key={plugin.ID}>
+                <ErrorBoundary subject={`Plugin "${pluginField(plugin.ID, plugin.name)}"`} key={plugin.ID}>
                     {'onClick' in entry ? (
                         <PluginKindCustom {...entry} unstable={unstable} id={plugin.ID} />
                     ) : (
@@ -479,6 +481,7 @@ function PluginRenderer() {
 }
 function BadgeRenderer({ meta }: { meta: TypedMessage['meta'] }) {
     const plugins = useActivatedPluginsSNSAdaptor()
+    const i18n = usePluginI18NField()
     if (!meta) return null
     const metadata = [...meta.entries()]
     return (
@@ -489,21 +492,25 @@ function BadgeRenderer({ meta }: { meta: TypedMessage['meta'] }) {
                     if (!render) return null
 
                     if (typeof render === 'function') {
-                        if (process.env.NODE_ENV === 'development')
-                            return normalizeBadgeDescriptor(key, plugin, render(key, value))
+                        if (process.env.NODE_ENV === 'development') {
+                            // crash early in dev
+                            return normalizeBadgeDescriptor(key, plugin, render(key, value), i18n)
+                        }
                         try {
-                            return normalizeBadgeDescriptor(key, plugin, render(key, value))
+                            return normalizeBadgeDescriptor(key, plugin, render(key, value), i18n)
                         } catch (e) {
                             console.error(e)
                             return null
                         }
                     } else {
                         const f = render.get(key)
                         if (!f) return null
-                        if (process.env.NODE_ENV === 'development')
-                            return normalizeBadgeDescriptor(key, plugin, f(value))
+                        if (process.env.NODE_ENV === 'development') {
+                            // crash early in dev
+                            return normalizeBadgeDescriptor(key, plugin, f(value), i18n)
+                        }
                         try {
-                            return normalizeBadgeDescriptor(key, plugin, f(value))
+                            return normalizeBadgeDescriptor(key, plugin, f(value), i18n)
                         } catch (e) {
                             console.error(e)
                             return null
@@ -518,9 +525,10 @@ function normalizeBadgeDescriptor(
     meta: string,
     plugin: Plugin.SNSAdaptor.Definition,
     desc: Plugin.SNSAdaptor.BadgeDescriptor | string | null,
+    i18n: (id: string, field: I18NStringField) => string,
 ) {
     if (!desc) return null
-    if (typeof desc === 'string') desc = { text: desc, tooltip: `Provided by plugin "${plugin.name.fallback}"` }
+    if (typeof desc === 'string') desc = { text: desc, tooltip: `Provided by plugin "${i18n(plugin.ID, plugin.name)}"` }
     return (
         <MetaBadge key={meta + ';' + plugin.ID} title={desc.tooltip || ''} meta={meta}>
             {desc.text}
@@ -538,11 +546,7 @@ function MetaBadge({ title, children, meta: key }: React.PropsWithChildren<{ tit
         </Box>
     )
 }
-function renderLabel(label: Plugin.SNSAdaptor.CompositionDialogEntry['label']): React.ReactNode {
-    if (!label) return null
-    if (typeof label === 'object' && 'fallback' in label) return label.fallback
-    return label
-}
+
 type ExtraPluginProps = { unstable: boolean; id: string }
 function PluginKindCustom(props: Plugin.SNSAdaptor.CompositionDialogEntryCustom & ExtraPluginProps) {
     const classes = useStyles()
@@ -552,7 +556,7 @@ function PluginKindCustom(props: Plugin.SNSAdaptor.CompositionDialogEntryCustom
         <ClickableChip
             label={
                 <>
-                    {renderLabel(label)}
+                    <PluginI18NFieldRender field={label} pluginID={id} />
                     {unstable && <sup className={classes.sup}>(Beta)</sup>}
                 </>
             }
@@ -572,7 +576,7 @@ function PluginKindDialog(props: Plugin.SNSAdaptor.CompositionDialogEntryDialog
         <ClickableChip
             label={
                 <>
-                    {renderLabel(label)}
+                    <PluginI18NFieldRender field={label} pluginID={id} />
                     {unstable && <sup className={classes.sup}>(Beta)</sup>}
                 </>
             }

packages/maskbook/src/extension/options-page/DashboardRouters/Plugins.tsx

@@ -4,6 +4,7 @@ import PluginCard from '../DashboardComponents/PluginCard'
 
 import DashboardRouterContainer from './Container'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
+import { usePluginI18NField } from '../../../plugin-infra/I18NFieldRender'
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -30,6 +31,7 @@ export default function DashboardSettingsRouter() {
     const { t } = useI18N()
     const classes = useStyles()
     const plugins = useActivatedPluginsSNSAdaptor()
+    const field = usePluginI18NField()
 
     return (
         <DashboardRouterContainer title={t('plugins')}>
@@ -38,10 +40,10 @@ export default function DashboardSettingsRouter() {
                     <li className={classes.pluginItem} key={plugin.ID}>
                         <PluginCard
                             key={plugin.ID}
-                            name={plugin.name.fallback}
+                            name={field(plugin.ID, plugin.name)}
                             id={plugin.ID}
                             icon={plugin.icon}
-                            description={plugin.description?.fallback}
+                            description={plugin.description ? field(plugin.ID, plugin.description) : ''}
                         />
                     </li>
                 ))}

packages/maskbook/src/plugin-infra/I18NFieldRender.tsx

@@ -0,0 +1,42 @@
+import type { I18NFieldOrReactNode, I18NStringField } from '@masknet/plugin-infra'
+import { useTranslation } from 'react-i18next'
+
+export interface PluginI18NFieldRenderProps {
+    field: I18NFieldOrReactNode
+    pluginID: string
+}
+export function PluginI18NFieldRender({ pluginID, field }: PluginI18NFieldRenderProps) {
+    const [t] = useTranslation()
+    if (!field) return null
+    if (typeof field === 'object' && 'fallback' in field) {
+        return (
+            <>
+                {field.i18nKey
+                    ? t(field.i18nKey, { ns: pluginID, nsSeparator: '%%%', defaultValue: field.fallback })
+                    : field.fallback}
+            </>
+        )
+    }
+    return <>{field}</>
+}
+export function usePluginI18NField() {
+    const [t] = useTranslation()
+    return function (pluginID: string, field: I18NStringField) {
+        if (!field.i18nKey) return field.fallback
+        if (!field.i18nKey.startsWith('__')) {
+            /**
+             * This field is used in the definition of a plugin in form of
+             * { fallback: "Text", i18nKey: "name" }
+             *
+             * Which is highly not likely to be analyzed by the type system.
+             * Enforce those key to starts with __, we can exclude those keys
+             * from the unused key result to keep the functionality of the analyzer.
+             */
+            console.warn(
+                `[@masknet/plugin-infra] Plugin ${pluginID} uses i18n key ${field.i18nKey}. Please change it to __${field.i18nKey}.`,
+            )
+            return field.fallback
+        }
+        return t(field.i18nKey, { ns: pluginID, nsSeparator: '%%%', defaultValue: field.fallback })
+    }
+}

packages/maskbook/src/plugin-infra/host.ts

@@ -3,6 +3,8 @@ import './register'
 
 import type { Plugin } from '@masknet/plugin-infra'
 import { Emitter } from '@servie/events'
+import i18nNextInstance from '../utils/i18n-next'
+import { createI18NBundle } from '@masknet/shared'
 
 export function createPluginHost(signal?: AbortSignal): Plugin.__Host.Host {
     return {
@@ -12,5 +14,8 @@ export function createPluginHost(signal?: AbortSignal): Plugin.__Host.Host {
             isEnabled: (id) => true,
             events: new Emitter(),
         },
+        addI18NResource(plugin, resource) {
+            createI18NBundle(plugin, resource)(i18nNextInstance)
+        },
     }
 }

packages/plugin-infra/src/manager/manage.ts

@@ -1,7 +1,7 @@
 import { Emitter } from '@servie/events'
 import { ALL_EVENTS } from '@masknet/shared'
 import type { Plugin } from '../types'
-import { getPluginDefine, registeredPluginIDs } from './store'
+import { getPluginDefine, registeredPluginIDs, registeredPlugins } from './store'
 
 interface ActivatedPluginInstance<U extends Plugin.Shared.DefinitionWithInit> {
     instance: U
@@ -40,12 +40,17 @@ export function createManager<T extends Plugin.Shared.DefinitionWithInit>(_: Cre
         events,
     }
 
-    function startDaemon({ enabled, signal }: Plugin.__Host.Host, extraCheck?: (id: string) => boolean) {
+    function startDaemon(host: Plugin.__Host.Host, extraCheck?: (id: string) => boolean) {
+        const { enabled, signal, addI18NResource } = host
         const off2 = enabled.events.on(ALL_EVENTS, checkRequirementAndStartOrStop)
 
         signal?.addEventListener('abort', () => [...activated.keys()].forEach(stopPlugin))
         signal?.addEventListener('abort', off2)
 
+        for (const plugin of registeredPlugins) {
+            plugin.i18n && addI18NResource(plugin.ID, plugin.i18n)
+        }
+
         checkRequirementAndStartOrStop()
         function checkRequirementAndStartOrStop() {
             for (const id of registeredPluginIDs) {

packages/plugin-infra/src/types.ts

@@ -92,6 +92,8 @@ export namespace Plugin.Shared {
         experimentalMark?: boolean
         /** Configuration of how this plugin is managed by the Mask Network. */
         management?: ManagementProperty
+        /** i18n resources of this plugin */
+        i18n?: I18NResource
     }
     /**
      * This part is shared between Dashboard, SNSAdaptor and Worker part
@@ -157,6 +159,10 @@ export namespace Plugin.Shared {
         type: 'opt-in' | 'opt-out'
         networks: Partial<Record<CurrentSNSNetwork, boolean>>
     }
+    export type I18NLanguage = string
+    export type I18NKey = string
+    export type I18NValue = string
+    export type I18NResource = Record<I18NLanguage, Record<I18NKey, I18NValue>>
 }
 
 /** This part runs in the SNSAdaptor */
@@ -187,7 +193,7 @@ export namespace Plugin.SNSAdaptor {
          * A label that will be rendered in the CompositionDialog as a chip.
          * @example {fallback: "🧧 Red Packet"}
          */
-        label: I18NStringField | React.ReactNode
+        label: I18NFieldOrReactNode
         /** This callback will be called when the user clicked on the chip. */
         onClick(): void
     }
@@ -196,7 +202,7 @@ export namespace Plugin.SNSAdaptor {
          * A label that will be rendered in the CompositionDialog as a chip.
          * @example {fallback: "🧧 Red Packet"}
          */
-        label: I18NStringField | React.ReactNode
+        label: I18NFieldOrReactNode
         /** A React dialog component that receives `open` and `onClose`. The dialog will be opened when the chip clicked. */
         dialog: React.ComponentType<CompositionDialogEntry_DialogProps>
         /**
@@ -294,13 +300,13 @@ export namespace Plugin {
     export type InjectUIReact<Props> = React.ComponentType<Props>
 }
 // TODO: Plugin i18n is not read today.
-// TODO: Add an entry for i18n JSON files, and provide hooks.
 export interface I18NStringField {
     /** The i18n key of the string content. */
     i18nKey?: string
     /** The fallback content to display if there is no i18n string found. */
     fallback: string
 }
+export type I18NFieldOrReactNode = I18NStringField | React.ReactNode
 
 /**
  * The current running SocialNetwork.
@@ -319,6 +325,7 @@ export enum CurrentSNSNetwork {
 export namespace Plugin.__Host {
     export interface Host {
         enabled: EnabledStatusReporter
+        addI18NResource(pluginID: string, resources: Plugin.Shared.I18NResource): void
         signal?: AbortSignal
     }
     export interface EnabledStatusReporter {

packages/plugin-infra/src/utils/index.tsx

@@ -18,6 +18,7 @@ export function createInjectHooksRenderer<PluginDefinition extends Plugin.Shared
             .map(picker)
             .filter((x) => x.ui)
             .map(({ key, name, ui }) => (
+                // TODO: i18n
                 <ErrorBoundary key={key} subject={`Plugin ` + name.fallback}>
                     <Main UI={ui!} data={props} />
                 </ErrorBoundary>

packages/plugins/example/src/SNSAdaptor/index.tsx

@@ -11,10 +11,10 @@ const sns: Plugin.SNSAdaptor.Definition = {
     // SearchBoxComponent: HelloWorld,
     // DecryptedInspector: HelloWorld,
     // GlobalInjection: GlobalComponent,
-    // CompositionDialogEntry: {
-    //     label: '🤔 Example',
-    //     onClick: () => alert('It works ™!'),
-    // },
+    CompositionDialogEntry: {
+        label: { i18nKey: '__entry__', fallback: '🤔 Example' },
+        onClick: () => alert('It works ™!'),
+    },
     // CompositionDialogEntry: {
     //     label: '🤣 Example Dialog',
     //     dialog: PluginDialog,

packages/plugins/example/src/base.ts

@@ -1,4 +1,6 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import en from './locales/en.json'
+import zh from './locales/zh.json'
 
 export const base: Plugin.Shared.Definition = {
     ID: 'io.mask.example',
@@ -11,4 +13,5 @@ export const base: Plugin.Shared.Definition = {
         networks: { type: 'opt-out', networks: {} },
         target: 'insider',
     },
+    i18n: { en, zh },
 }

packages/plugins/example/src/locales/en.json

@@ -0,0 +1,4 @@
+{
+    "name": "Example Plugin",
+    "__entry__": "🤔 Example"
+}

packages/plugins/example/src/locales/zh.json

@@ -0,0 +1,4 @@
+{
+    "name": "測試插件",
+    "__entry__": "🤔 測試"
+}