feat: i18n for Iceworks-component-builder

[sspku-yqLiu]

No description provided.

[sspku-yqLiu]

存在一个缺陷：当一开始不能连接到物料库时，会在国际化之前进行一轮报错，所以会出现两轮报错，一轮中文 一轮英文，其余良好。

[sspku-yqLiu]

关于提到的缺陷：

示例：

错误产生条件：

1. 断掉网线（或用任何方式断开网络）
2. 用调试模式打开 i18n/iceworks-component-builder 分支中的 component-builder 插件
3. 在调试窗口中输入： generate-componet ,选择进入生成组件页面
4. 这时由于1中「断开网络」的环境，会导致出现无法连接到组建服务器的错误。

错误输出与期待输出

• 错误输出
  在 demo 中可以看到，输出了两个提示，一个中文（默认页面）一个英文（刷新页面）。
• 期望输出
  仅有「刷新页面」后的提示，即只有一次中文或英文提示。

错误推断

• 出现错误的可能原因
  出现两次输出的原因是因为本页面存在一次刷新，即先使用中文版生成基础页面，待插件发送 VSCode 使用语言后根据语言刷新为用户使用的语言。

• 代码定位

    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;
    }
    

  这个函数检测是否能够从云上下载物料，并且对用户提供反馈，由于出现错误，就会使用 Notification.error进行提示。这里面触发了两次提示。

  由于父组件 <LocalProvider> 收到 callService 的返回值，改变了 intl 从而进行了一轮刷新。第二次提示可能是由于 intl 刷新触发的。

• 为了解决这个错误的努力

  我尝试在跟组件添加 loading 判别器，期待通过是否加载的判断防止为更新语言的界面加载。

      <RawIntlProvider value={i18n}>
        <ConfigProvider>
          {loading?<Loading visible={loading} style={{width: '100%', height:'80vh'}} /> :React.Children.only(props.children)}
        </ConfigProvider>
      </RawIntlProvider>

  失败原因推测：需要了解 react 加载原理， 似乎是先加载组建而后根据判别式来判定是否进行渲染.

  尝试使用 await 阻塞异步函数

    await callService('common', 'getLanguage');
    sources = await callService('material', 'getSourcesByProjectType')

  并没有阻塞成功。

• 暂时的思路

  通过某种方式，比如说使用一个 flag ，让第一轮刷新的时候不出现提示，仅在第二轮刷新的时候进行提示。

  例如：

  let flag = false;
  ...
    async function getData(source: string) {
    if(!flag){
      flag = true;
      return;
    }
      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;
    }

  当然 还是希望有一个比较优雅的办法的...

[sspku-yqLiu]

补充，为什么说上面的解决方案不优雅

因为实际上存在着多个类似的检验函数，所以需要为每一个类似的组件分配一个 flag ,看起来就像：

let defaultFlag1 = true;
let defaultFlag2 = true ;  
  async function getSources() {
    if(defaultFlag1){
      defaultFlag1 = false;
      return;
    }  
    ...
  async function getData(source: string) {
    if(defaultFlag2){
      defaultFlag2 = false;
      return;
    }
    ...

[sspku-yqLiu]

进一步的思考

能不能利用一种东西来进行状态判别呢？一个想法是 intl.message 中添加一个 status 属性，但是这显然有些混淆了，我希望每个功能是分开的。

那么 我尝试利用 locale 进行传值：

i8n.tsx：

// 初始化时 locale 为 default, 这会使得它自动转换为 en 模式， 并且保留 local 属性为 default
export const defaultIntl = createIntl({locale:'default',messages:localeMessages['zh-cn'].messages})

//判别函数：判断是否国际化进程结束
export function checkI18nReady(intl: IntlShape){
  return intl.locale !== 'default'
}

使用：

async function getSources() {
    if(!checkI18nReady(intl)){
      return;
    }
  ...

这在运行的时候是比较良好的，但是麻烦在于，你必须找到所有这种类型的函数，并给他加一个判断。也许存在一种方法可以直接影响所有这类的函数而不是冲进去给他加个判断，如果找不到理想状态下的方法，我倾向于使用这种方法。

[alvinhui]

reviewed