feat: i18n for Iceworks-component-builder

extensions/iceworks-component-builder/package.json

@@ -108,7 +108,8 @@
     "@iceworks/common-service": "^0.1.3",
     "@iceworks/material-service": "^0.1.3",
     "@iceworks/project-service": "^0.1.4",
-    "@iceworks/vscode-webview": "^0.1.1"
+    "@iceworks/vscode-webview": "^0.1.1",
+    "@iceworks/i18n":"^0.0.1"
   },
   "homepage": "https://github.com/ice-lab/iceworks/blob/master/extensions/iceworks-component-builder/README.md",
   "bugs": {

extensions/iceworks-component-builder/src/extension.ts

@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import { connectService, getHtmlForWebview } from '@iceworks/vscode-webview/lib/vscode';
 import { initExtension, Logger } from '@iceworks/common-service';
 import services from './services/index';
+import i18n from './i18n';
 
 // eslint-disable-next-line
 const { name, version } = require('../package.json');
@@ -22,7 +23,7 @@ export function activate(context: vscode.ExtensionContext) {
   initExtension(context);
 
   function activeWebview() {
-    const webviewPanel: vscode.WebviewPanel = window.createWebviewPanel('iceworks', '生成组件 - Iceworks', ViewColumn.One, {
+    const webviewPanel: vscode.WebviewPanel = window.createWebviewPanel('iceworks', i18n.format('extension.iceworksComponentBuilder.extension.webviewTitle'), ViewColumn.One, {
       enableScripts: true,
       retainContextWhenHidden: true,
     });

extensions/iceworks-component-builder/src/i18n.ts

@@ -0,0 +1,15 @@
+import * as vscode from 'vscode';
+import I18nService from '@iceworks/i18n';
+import * as zhCNTextMap from './locales/zh-CN.json';
+import * as enUSTextMap from './locales/en-US.json';
+
+// 注册语言表
+const i18n = new I18nService();
+
+i18n.registry('zh-cn', zhCNTextMap);
+i18n.registry('en', enUSTextMap);
+
+// 设置使用的语言
+i18n.setLocal(vscode.env.language);
+
+export default i18n;

extensions/iceworks-component-builder/src/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+    "extension.iceworksComponentBuilder.extension.webviewTitle":"Generate Components - Iceworks"
+}

extensions/iceworks-component-builder/src/locales/zh-CN.json

@@ -0,0 +1,3 @@
+{
+    "extension.iceworksComponentBuilder.extension.webviewTitle":"生成组件 - Iceworks"
+}

extensions/iceworks-component-builder/tsconfig.json

@@ -2,7 +2,8 @@
 	"extends": "../../tsconfig.extension.json",
 	"compilerOptions": {
 		"rootDir": "./",
-		"outDir": "build"
+		"outDir": "build",
+		"resolveJsonModule": true 
 	},
 	"include": [
 		"src"

extensions/iceworks-component-builder/web/package.json

@@ -20,7 +20,8 @@
     "@iceworks/vscode-webview": "^0.1.1",
     "moment": "^2.24.0",
     "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react-dom": "^16.8.0",
+    "react-intl": "^5.3.2"
   },
   "scripts": {
     "start": "icejs start --disable-reload",

extensions/iceworks-component-builder/web/src/i18n.tsx

@@ -0,0 +1,56 @@
+import { createIntl, RawIntlProvider } from 'react-intl'; 
+import React, { useEffect, useState } from 'react'
+import { ConfigProvider, Loading } from '@alifd/next';
+import enUSNextMessages from '@alifd/next/lib/locale/en-us';
+import zhCNNextMessages from '@alifd/next/lib/locale/zh-cn';
+
+import callService from './callService';
+import enUSMessages from './locales/en-US.json';
+import zhCNMessages from './locales/zh-CN.json';
+
+const DEFAULT_LOCALE = 'zh-cn';
+
+export const localeMessages = {
+  'en': {
+    messages: enUSMessages,
+    nextMessages: enUSNextMessages,
+  },
+  'zh-cn':{
+    messages: zhCNMessages,
+    nextMessages: zhCNNextMessages,
+  },
+};
+
+const getIntl = (locale: string) =>{
+  let localeMessage = localeMessages[locale];
+  if (!localeMessage) {
+    locale = DEFAULT_LOCALE;
+    localeMessage = localeMessages[locale];
+  }
+  return createIntl({locale, messages: localeMessage.messages});
+}
+export const LocaleProvider = (props)=>{
+  const [i18n, setI18n] = useState(() => getIntl(DEFAULT_LOCALE));
+  const [loading, setLoading] = useState(true)
+  useEffect(()=>{
+    async function initI18n(){
+      try {
+        const lang = await callService('common', 'getLanguage');
+        setI18n(getIntl(lang));
+      } catch(e) {
+        // ignore i18n error, just using default language
+      } finally {
+        setLoading(false);
+      }
+    }
+    initI18n();
+  },[]);
+
+  return (
+    <RawIntlProvider value={i18n}>
+      <ConfigProvider locale={localeMessages[i18n.locale].nextMessages}>
+        {loading ? <Loading visible={loading} style={{width: '100%', height:'80vh'}} /> : React.Children.only(props.children)}
+      </ConfigProvider>
+    </RawIntlProvider>
+  )
+}

extensions/iceworks-component-builder/web/src/locales/en-US.json

@@ -0,0 +1,11 @@
+{
+    "web.ComponentBuiilder.Home.getMaterialError":"Fail to obtain materials. Please try again later.",
+    "web.ComponentBuiilder.Home.getDataError":"Fail to obtain material data. Please try again later.",
+    "web.ComponentBuiilder.Home.noComponentName":"Please Enter Component Name.",
+    "web.ComponentBuiilder.Home.didNotSeletBlock":"Please choose a block before generate.",
+    "web.ComponentBuiilder.Home.generateSuccess":"Generate component successfully.",
+    "web.ComponentBuiilder.Home.inputComponentName":"1. Enter Component Name.",
+    "web.ComponentBuiilder.Home.inputComponentNamePlaceHolder":"Component name must start with A-Z and only contains letters and numbers. Special characters are not allowed.",
+    "web.ComponentBuiilder.Home.selectBlock":"2. Choose A Block",
+    "web.ComponentBuiilder.Home.generate":"Generate Component"
+}

extensions/iceworks-component-builder/web/src/locales/zh-CN.json

@@ -0,0 +1,11 @@
+{
+    "web.ComponentBuiilder.Home.getMaterialError":"获取物料源信息失败，请稍后再试。",
+    "web.ComponentBuiilder.Home.getDataError":"获取物料集合信息失败，请稍后再试。",
+    "web.ComponentBuiilder.Home.noComponentName":"请填写组件名。",
+    "web.ComponentBuiilder.Home.didNotSeletBlock":"请选择使用的区块。",
+    "web.ComponentBuiilder.Home.generateSuccess":"组件生成成功！",
+    "web.ComponentBuiilder.Home.inputComponentName":"1. 填写组件名：",
+    "web.ComponentBuiilder.Home.inputComponentNamePlaceHolder":"名称必须英文字母 A-Z 开头，只包含英文和数字，不允许有特殊字符",
+    "web.ComponentBuiilder.Home.selectBlock":"2. 选择使用的区块：",
+    "web.ComponentBuiilder.Home.generate":"生成组件"
+}

extensions/iceworks-component-builder/web/src/pages/Home/index.tsx

@@ -1,57 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Notification, Button, Input } from '@alifd/next';
 import Material from '@iceworks/material-ui';
+import { LocaleProvider } from '@/i18n';
+import { useIntl, FormattedMessage } from 'react-intl';
 import callService from '../../callService';
 import styles from './index.module.scss';
 
-async function onSettingsClick() {
-  try {
-    await callService('common', 'executeCommand', 'iceworksApp.configHelper.start');
-  } catch (e) {
-    Notification.error({ content: e.message });
-  }
-}
+const Home = () => {
+  const intl = useIntl();
+  const [selectedBlock, setSelectedBlock] = useState();
+  const [componentName, setComponentName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
 
-async function getSources() {
-  let sources = [];
-  try {
-    sources = await callService('material', 'getSourcesByProjectType');
-  } catch (e) {
-    Notification.error({ content: '获取物料源信息失败，请稍后再试。' });
+  async function onSettingsClick() {
+    try {
+      await callService('common', 'executeCommand', 'iceworksApp.configHelper.start');
+    } catch (e) {
+      Notification.error({ content: e.message });
+    }
   }
-
-  console.log('getSources', sources);
-  return sources;
-}
-
-async function getData(source: string) {
-  let data = {};
-  try {
-    data = await callService('material', 'getData', source);
-  } catch (e) {
-    Notification.error({ content: '获取物料集合信息失败，请稍后再试。' });
+  
+  async function getSources() {
+    let sources = [];
+    try {
+      sources = await callService('material', 'getSourcesByProjectType');
+    } catch (e) {
+      Notification.error({ content: intl.formatMessage({id:'web.ComponentBuiilder.Home.getMaterialError'})});
+    }
+
+    console.log('getSources', sources);
+    return sources;
   }
-  console.log('getData', data);
-  return data;
-}
-
-function validateData({ block, componentName }) {
-  if (!componentName) {
-    return '请填写组件名。';
+
+  async function getData(source: string) {
+    let data = {};
+    try {
+      data = await callService('material', 'getData', source);
+    } catch (e) {
+      Notification.error({ content: intl.formatMessage({id:'web.ComponentBuiilder.Home.getDataError'})});
+    }
+    console.log('getData', data);
+    return data;
   }
-
-  if (!block) {
-    return '请选择使用的区块。';
+
+  function validateData({ block, componentName }) {
+    if (!componentName) {
+      return intl.formatMessage({id:'web.ComponentBuiilder.Home.noComponentName'});
+    }
+    if (!block) {
+      return intl.formatMessage({id:'web.ComponentBuiilder.Home.didNotSeletBlock'});
+    }
+    return '';
   }
 
-  return '';
-}
-
-const Home = () => {
-  const [selectedBlock, setSelectedBlock] = useState();
-  const [componentName, setComponentName] = useState('');
-  const [isCreating, setIsCreating] = useState(false);
-
   function onSelect(block) {
     setSelectedBlock(block);
   }
@@ -87,20 +88,19 @@ const Home = () => {
     }
 
     setIsCreating(false);
-    Notification.success({ content: '组件生成成功！' });
+    Notification.success({ content: intl.formatMessage({id:'web.ComponentBuiilder.Home.generateSuccess'})});
     resetData();
   }
-
   return (
     <div className={styles.wrap}>
       <div className={styles.list}>
         <div className={styles.item}>
           <div className={styles.label}>
-            1. 填写组件名：
+            <FormattedMessage id='web.ComponentBuiilder.Home.inputComponentName'/>
           </div>
           <div className={styles.field}>
             <Input
-              placeholder="名称必须英文字母 A-Z 开头，只包含英文和数字，不允许有特殊字符"
+              placeholder={intl.formatMessage({id:'web.ComponentBuiilder.Home.getMaterialError'})}
               className={styles.pageNameInput}
               value={componentName}
               onChange={(value) => setComponentName(value)}
@@ -110,7 +110,7 @@ const Home = () => {
         </div>
         <div className={styles.item}>
           <div className={styles.label}>
-            2. 选择使用的区块：
+            <FormattedMessage id='web.ComponentBuiilder.Home.selectBlock'/>
           </div>
           <div className={styles.select}>
             <Material
@@ -127,11 +127,19 @@ const Home = () => {
       </div>
       <div className={styles.opts}>
         <Button type="primary" loading={isCreating} onClick={handleCreate}>
-          生成组件
+          <FormattedMessage id='web.ComponentBuiilder.Home.generate'/>
         </Button>
       </div>
     </div>
   );
 };
 
-export default Home;
+const IntlHome = ()=>{
+  return (
+    <LocaleProvider>
+      <Home/>
+    </LocaleProvider>
+  )
+}
+
+export default IntlHome;

extensions/iceworks-component-builder/web/tsconfig.json

@@ -14,7 +14,8 @@
       "ice/*": [
         ".ice/pages/*"
       ]
-    }
+    },
+    "resolveJsonModule": true 
   },
   "include": [
     "src/*",

packages/common-service/package.json

@@ -24,4 +24,4 @@
     "access": "public"
   },
   "gitHead": "fc5b35f95ab4cc24898845916acf598c2f34d576"
-}
+}