feat(i18n): support basic il8n feature (#170)

* feat(i18n): support basic il8n feature

1. built-in en, zh-CN locales; 2. load the model data in extensions'

re #106, re #107

* fix: remove useless

* refactor: rename locale to localeId

* refactor: rename local to locale

* refactor: decorate the menuBarController with private readonly

* refactor: remove the useless optional chaining

* fix: keyof the locale source type

* refactor: rename the locale to source

* refactor: rename the id of ILocalizeProps as sourceKey

Author: wewoor

build/webpack.css.js

@@ -109,6 +109,13 @@ module.exports = function () {
                             ignore: ['**/*.ts', '**/*.tsx'],
                         },
                     },
+                    {
+                        from: path.resolve(
+                            __dirname,
+                            '../src/i18n/source/zh-CN.json'
+                        ),
+                        to: path.resolve(__dirname, '../esm/i18n/source/'),
+                    },
                 ],
             }),
         ],

src/components/actionBar/index.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import {
     prefixClaName,
     classNames,
     getBEMElement,
     getBEMModifier,
 } from 'mo/common/className';
 import { useContextMenu } from 'mo/components/contextMenu';
-import { select } from 'mo/common/dom';
 import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { mergeFunctions } from 'mo/common/utils';
 
 export interface IActionBarItemProps<T = any> {
     id?: string;
-    name?: string;
+    name?: ReactNode;
     title?: string;
     iconName?: string;
     disabled?: boolean;
@@ -60,6 +59,8 @@ export function ActionBarItem(props: IActionBarItemProps) {
     } = props;
     const disabled = props.disabled ? itemDisabledClassName : null;
     const checked = props.checked ? itemCheckedClassName : null;
+    const refItem = useRef(null);
+
     const claNames = classNames(
         labelClassName,
         'codicon',
@@ -84,7 +85,7 @@ export function ActionBarItem(props: IActionBarItemProps) {
     useEffect(() => {
         if (contextMenu.length > 0) {
             contextViewMenu = useContextMenu({
-                anchor: select(`#${id}`),
+                anchor: refItem.current,
                 render: renderContextMenu,
             });
         }
@@ -107,6 +108,7 @@ export function ActionBarItem(props: IActionBarItemProps) {
     return (
         <li
             id={id}
+            ref={refItem}
             className={classNames(itemClassName, disabled)}
             onClick={onClickItem}
             data-id={data.id}

src/components/icon/index.tsx

@@ -8,8 +8,8 @@ export interface IIconProps extends ComponentProps<'span'> {
     onClick?: (e: React.MouseEvent) => void;
 }
 
-export function Icon(props: IIconProps) {
-    const { className, type, ...restProps } = props;
+export function Icon(props: React.PropsWithChildren<IIconProps>) {
+    const { className, type, children, ...restProps } = props;
     return (
         <span
             className={classNames(
@@ -18,6 +18,8 @@ export function Icon(props: IIconProps) {
                 prefixClaName(type, 'codicon')
             )}
             {...restProps}
-        ></span>
+        >
+            {children}
+        </span>
     );
 }

src/components/menu/menuItem.tsx

@@ -60,7 +60,12 @@ export function MenuItem(props: React.PropsWithChildren<IMenuItemProps>) {
             {...custom}
         >
             <a className={menuContentClassName}>
-                <Icon className={checkClassName} type={icon || ''} />
+                <Icon
+                    className={checkClassName}
+                    type={typeof icon === 'string' ? icon : ''}
+                >
+                    {typeof icon === 'object' ? icon : ''}
+                </Icon>
                 <span className={labelClassName} title={name as string}>
                     {render ? render(props) : children}
                 </span>

src/controller/activityBar.ts

@@ -90,32 +90,32 @@ export class ActivityBarController
         const contextMenuId = item?.id;
         switch (contextMenuId) {
             // activityBar contextMenu
-            case CONTEXT_MENU_MENU.id: {
+            case CONTEXT_MENU_MENU: {
                 this.menuBarService.showHide();
                 break;
             }
-            case CONTEXT_MENU_EXPLORER.id: {
+            case CONTEXT_MENU_EXPLORER: {
                 this.activityBarService.toggleBar(contextMenuId);
                 break;
             }
-            case CONTEXT_MENU_SEARCH.id: {
+            case CONTEXT_MENU_SEARCH: {
                 this.activityBarService.toggleBar(contextMenuId);
                 break;
             }
-            case CONTEXT_MENU_HIDE.id: {
+            case CONTEXT_MENU_HIDE: {
                 this.activityBarService.showHide();
                 break;
             }
             // manage button contextMenu
-            case CONTEXT_MENU_COMMAND_PALETTE.id: {
+            case CONTEXT_MENU_COMMAND_PALETTE: {
                 this.gotoQuickCommand();
                 break;
             }
-            case CONTEXT_MENU_SETTINGS.id: {
+            case CONTEXT_MENU_SETTINGS: {
                 this.settingsService.openSettingsInEditor();
                 break;
             }
-            case CONTEXT_MENU_COLOR_THEME.id: {
+            case CONTEXT_MENU_COLOR_THEME: {
                 this.onSelectColorTheme();
                 break;
             }

src/controller/editor.tsx

@@ -180,6 +180,7 @@ export class EditorController extends Controller implements IEditorController {
         );
     };
 
+    // TODO: Remove the below action register ?, because of the monaco Editor have integrated the undo/redo action
     private registerActions = (editorInstance) => {
         undoRedoMenu.forEach(({ id, label }) => {
             editorInstance?.addAction({

src/controller/explorer/explorer.tsx

@@ -7,9 +7,14 @@ import { Explorer, FolderTreeView } from 'mo/workbench/sidebar/explore';
 import { IMenuItemProps } from 'mo/components/menu';
 import { MENU_VIEW_SIDEBAR } from 'mo/model/workbench/menuBar';
 import { IActivityBarItem } from 'mo/model/workbench/activityBar';
-import { ExplorerEvent } from 'mo/model/workbench/explorer/explorer';
 import {
-    SAMPLE_FOLDER_PANEL,
+    builtInExplorerActivityItem,
+    builtInExplorerFolderPanel,
+    builtInExplorerEditorPanel,
+    ExplorerEvent,
+    builtInExplorerHeaderToolbar,
+} from 'mo/model/workbench/explorer/explorer';
+import {
     NEW_FILE_COMMAND_ID,
     NEW_FOLDER_COMMAND_ID,
     EXPLORER_ACTIVITY_ITEM,
@@ -65,9 +70,10 @@ export class ExplorerController
         const ctx = this;
         const state = this.activityBarService.getState();
         const sideBarState = this.sidebarService.getState();
+        const { data = [] } = state;
         this.activityBarService.setState({
-            selected: EXPLORER_ACTIVITY_ITEM.id,
-            data: [...state.data!, EXPLORER_ACTIVITY_ITEM],
+            selected: EXPLORER_ACTIVITY_ITEM,
+            data: [...data, builtInExplorerActivityItem()],
         });
 
         const explorerEvent = {
@@ -89,7 +95,7 @@ export class ExplorerController
 
         this.activityBarService.onSelect((e, item: IActivityBarItem) => {
             const { hidden } = this.sidebarService.getState();
-            if (item.id === EXPLORER_ACTIVITY_ITEM.id) {
+            if (item.id === EXPLORER_ACTIVITY_ITEM) {
                 const isShow = hidden ? !hidden : hidden;
                 this.sidebarService.setState({
                     current: explorePane.id,
@@ -105,10 +111,16 @@ export class ExplorerController
             current: explorePane.id,
             panes: [...sideBarState.panes!, explorePane],
         });
-
-        this.explorerService.addPanel([
-            { ...SAMPLE_FOLDER_PANEL, renderPanel: this.renderFolderTree },
-        ]);
+        this.explorerService.setState({
+            data: [
+                { ...builtInExplorerEditorPanel() },
+                {
+                    ...builtInExplorerFolderPanel(),
+                    renderPanel: this.renderFolderTree,
+                },
+            ],
+            headerToolBar: builtInExplorerHeaderToolbar(),
+        });
     }
 
     private createFileOrFolder = (type) => {
@@ -165,3 +177,6 @@ export class ExplorerController
         );
     };
 }
+
+// Register singleton
+container.resolve(ExplorerController);

src/controller/explorer/folderTree.tsx

@@ -179,3 +179,6 @@ export class FolderTreeController
         return menu;
     };
 }
+
+// Register singleton
+container.resolve(FolderTreeController);

src/controller/explorer/outline.tsx

@@ -3,6 +3,7 @@ import { Controller } from 'mo/react/controller';
 import { container, singleton } from 'tsyringe';
 import React from 'react';
 import { ExplorerService, IExplorerService } from 'mo/services';
+import { localize } from 'mo/i18n/localize';
 
 export interface IOutlineController {}
 
@@ -21,16 +22,19 @@ export class OutlineController
     private initView() {
         const outlinePanel = {
             id: 'outline',
-            name: 'OUTLINE',
+            name: localize('sidebar.explore.outline', 'OUTLINE'),
             toolbar: [
                 {
                     id: 'outline-collapse',
-                    title: 'Collapse All',
+                    title: localize('toolbar.collapseAll', 'Collapse All'),
                     iconName: 'codicon-collapse-all',
                 },
                 {
                     id: 'outline-more',
-                    title: 'More Actions...',
+                    title: localize(
+                        'sidebar.explore.outlineMore',
+                        'More Actions...'
+                    ),
                     iconName: 'codicon-ellipsis',
                 },
             ],
@@ -42,3 +46,6 @@ export class OutlineController
         // console.log('onClick:', panelService);
     };
 }
+
+// Register singleton
+container.resolve(OutlineController);

src/controller/index.ts

@@ -8,19 +8,7 @@ export * from './settings';
 export * from './sidebar';
 export * from './statusBar';
 export * from './workbench';
-
-import { container } from 'tsyringe';
-import { ExplorerController } from './explorer/explorer';
-import { FolderTreeController } from './explorer/folderTree';
-import { SearchController } from './search/search';
-import { NotificationController } from './notification';
-import { SettingsController } from './settings';
-import { ProblemsController } from './problems';
-import { MenuBarController } from './menuBar';
-export const explorerController = container.resolve(ExplorerController);
-export const searchController = container.resolve(SearchController);
-export const folderTreeController = container.resolve(FolderTreeController);
-export const notificationController = container.resolve(NotificationController);
-export const settingController = container.resolve(SettingsController);
-export const problemsController = container.resolve(ProblemsController);
-export const menuBarController = container.resolve(MenuBarController);
+export * from './explorer/explorer';
+export * from './explorer/folderTree';
+export * from './explorer/outline';
+export * from './search/search';

src/controller/notification.tsx

@@ -109,3 +109,6 @@ export class NotificationController
         this._notificationPane = container;
     }
 }
+
+// Register a singleton
+container.resolve(NotificationController);

src/controller/panel.tsx

@@ -38,9 +38,9 @@ export class PanelController extends Controller implements IPanelController {
         e: React.MouseEvent,
         item: IActionBarItemProps
     ): void => {
-        if (item.id === PANEL_TOOLBOX_CLOSE.id) {
+        if (item.id === PANEL_TOOLBOX_CLOSE) {
             this.panelService.showHide();
-        } else if (item.id === PANEL_TOOLBOX_RESIZE.id) {
+        } else if (item.id === PANEL_TOOLBOX_RESIZE) {
             this.panelService.maximizeRestore();
         }
         this.emit(PanelEvent.onToolbarClick, e, item);

src/controller/problems.tsx

@@ -9,7 +9,7 @@ import {
     StatusBarService,
 } from 'mo/services';
 import { singleton, container } from 'tsyringe';
-import { STATUS_PROBLEMS, PANEL_PROBLEMS } from 'mo/model/problems';
+import { builtInPanelProblems, builtInStatusProblems } from 'mo/model/problems';
 export interface IProblemsController {
     onClick?: (e: React.MouseEvent, item: IStatusBarItem) => void;
 }
@@ -19,20 +19,22 @@ export class ProblemsController
     implements IProblemsController {
     private readonly panelService: IPanelService;
     private readonly statusBarService: IStatusBarService;
+
     constructor() {
         super();
         this.panelService = container.resolve(PanelService);
         this.statusBarService = container.resolve(StatusBarService);
         this.init();
     }
+
     private showHideProblems() {
         const { current, hidden } = this.panelService.getState();
         if (hidden) {
             this.panelService.showHide();
-            this.panelService.open(PANEL_PROBLEMS);
+            this.panelService.open(builtInPanelProblems());
         } else {
-            if (current?.id !== PANEL_PROBLEMS.id) {
-                this.panelService.open(PANEL_PROBLEMS);
+            if (current?.id !== builtInPanelProblems().id) {
+                this.panelService.open(builtInPanelProblems());
             } else {
                 this.panelService.showHide();
             }
@@ -42,12 +44,15 @@ export class ProblemsController
     public onClick = (e: React.MouseEvent, item: IStatusBarItem) => {
         this.showHideProblems();
     };
+
     private init() {
         this.statusBarService.appendLeftItem(
-            Object.assign(STATUS_PROBLEMS, {
+            Object.assign(builtInStatusProblems(), {
                 onClick: this.onClick,
             })
         );
-        this.panelService.add(PANEL_PROBLEMS);
+        this.panelService.add(builtInPanelProblems());
     }
 }
+
+container.resolve(ProblemsController);

src/controller/search/search.tsx

@@ -13,6 +13,7 @@ import {
     SEARCH_PRESERVE_CASE_COMMAND_ID,
     SEARCH_REPLACE_ALL_COMMAND_ID,
     SEARCH_ACTIVITY_ITEM,
+    builtInSearchActivityItem,
 } from 'mo/model/workbench/search';
 import {
     ActivityBarService,
@@ -97,10 +98,10 @@ export class SearchController extends Controller implements ISearchController {
 
         this.sidebarService.push(searchSidePane);
 
-        this.activityBarService.addBar(SEARCH_ACTIVITY_ITEM);
+        this.activityBarService.addBar(builtInSearchActivityItem());
 
         this.activityBarService.onSelect((e, item: IActivityBarItem) => {
-            if (item.id === SEARCH_ACTIVITY_ITEM.id) {
+            if (item.id === SEARCH_ACTIVITY_ITEM) {
                 this.sidebarService.setState({
                     current: searchSidePane.id,
                 });
@@ -184,3 +185,6 @@ export class SearchController extends Controller implements ISearchController {
         return this.searchService.getSearchIndex(text, queryVal);
     };
 }
+
+// Register a singleton
+container.resolve(SearchController);