Zhengxinqi/i18n优化

.i18nGenerator.js

@@ -0,0 +1,70 @@
+require('dotenv').config()
+const fs = require('fs')
+const fromJS = require('immutable').fromJS
+
+const root_path = process.argv[2] || 'app'
+const i18nTargetRoot = process.env.I18nTargetRoot || 'app/i18n'
+
+const i18nRegex = /(?:i18n`(.+?):=)(.+?)(?:`)/gm
+const i18nRegexPer = /(?:i18n`(.+?):=)(.+?)(?:`)/
+
+console.log('search i18n shape in folder : ' + root_path)
+
+const i18nFolders = require(`./${i18nTargetRoot}/index.json`)
+console.log('found folders  ' + i18nFolders)
+
+
+// 遍历读取所有的js和jsx文件,当看到有文件内容有特征内容，则替换内容，并且过程中 有一个side effect 在指定的目录生成json文件
+
+function generateI18n(root) {
+    const files = fs.readdirSync(root);
+    files.forEach(file => {
+         var pathname = root+'/'+file
+        , stat = fs.lstatSync(pathname);
+        if (stat.isDirectory()) {
+            generateI18n(pathname)
+        }
+        if (['js', 'jsx'].includes(file.split('.').pop())) {
+            const readablePathname = pathname.replace(root,'.')
+            const data = fs.readFileSync(pathname, "utf-8")
+            if (i18nRegex.test(data)) {
+                const newData = data.replace(i18nRegex, (matchable) => {
+                    console.log(`find i18n shape ${matchable}, generating...`)
+                    return generate(matchable)
+                })
+                fs.writeFile(pathname, newData, (err) => {
+                    if (err) throw err
+                })
+            }
+        }
+    })
+}
+
+function generate(matchable) {
+    const perMatchableArray = matchable.match(i18nRegexPer)
+    const fileKey = perMatchableArray[1].split('$')[0]
+    const value = perMatchableArray[2]
+    const folderArray = fileKey.split('.')
+    const folder = folderArray.shift()
+
+    i18nFolders.forEach(i18nFolder => {
+    const jsonFileName = `${i18nTargetRoot}/${i18nFolder}/${folder}.json`
+    const i18nFiles = fs.readdirSync(`${i18nTargetRoot}/${i18nFolder}`);
+    if (!i18nFiles.includes(`${folder}.json`)) {
+        console.log(`create a new File ${jsonFileName}`)
+        fs.writeFileSync(jsonFileName, '{}', "utf-8")
+    }
+    const json = fs.readFileSync(jsonFileName, "utf-8")
+    const tmp = fromJS(JSON.parse(json));
+    if (!tmp.getIn(folderArray, '')) {
+        const nextData = tmp.setIn(folderArray, value).toJS()
+        fs.writeFileSync(jsonFileName, JSON.stringify(nextData, undefined, 3), "utf-8")
+        console.log(`generate in ${jsonFileName} success`)
+    } else {
+        console.log(`${i18nFolder} already has value, skip`)
+    }
+    })
+    return matchable.replace(/:=.+/, '`');
+}
+
+generateI18n(root_path)

app/CodingSDK.js

@@ -1,16 +1,18 @@
 import { request } from './utils'
 import store from './store'
-import { bindActionCreators } from 'redux'
 import config from './config'
 import * as Modal from './components/Modal/actions'
 import { notify, NOTIFY_TYPE } from './components/Notification/actions'
 import { addComToSideBar } from './components/Panel/actions'
+import { CreateI18n } from 'utils/createI18n'
+
 
 export default class {
   // app data
   constructor (config = {}) {
     this.subscribeDataArray = config.subscribeDataArray || []
     this.pkgId = config.pkgId || ''
+    this.i18nConfig = config.i18n
   }
   getData () {
     const currentStore = store.getState()
@@ -34,6 +36,9 @@ export default class {
       addComToSideBar
     })
   }
+  get i18n () {
+    return new CreateI18n(this.i18nConfig || {})
+  }
   get config () {
     return config
   }

app/components/Git/GitBranchWidget.jsx

@@ -37,7 +37,7 @@ export default class GitBranchWidget extends Component {
         {this.state.isActive ?
           <div className='git-branch-widget'>
             <div className='widget-header'>
-              <h2>Git Branches</h2>
+              <h2>{i18n`git.branchWidget.branches`}</h2>
             </div>
             <Menu className={cx('bottom-up to-left', { active: this.state.isActive })}
               style={{

app/components/Git/modals/commitDiff.jsx

@@ -4,6 +4,8 @@ import { bindActionCreators } from 'redux'
 import { dispatchCommand } from '../../../commands'
 import cx from 'classnames'
 import { connect } from 'react-redux'
+import i18n from 'utils/createI18n'
+
 
 import * as GitActions from '../actions'
 import GitFileTree from '../GitFileTree'
@@ -31,9 +33,9 @@ class GitCommitDiffView extends Component {
             handleClick={(path) => {
               this.handleFileClick(path)
           }} />
-          
+
           <div className='modal-ops'>
-            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>Cancel</button>
+            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>{i18n`git.cancel`}</button>
           </div>
         </div>
       </div>

app/components/Git/modals/diffFile.jsx

@@ -9,7 +9,7 @@ const jsdiff = require('diff')
 // CodeMirror
 import CodeMirror from 'codemirror'
 require(['diff_match_patch'], (lib) => {
-  Object.assign(window, lib)  //@fixme: diff_match_patch is now exposed into the global ns
+  Object.assign(window, lib)  // @fixme: diff_match_patch is now exposed into the global ns
   require(['codemirror/addon/merge/merge.js'])
 })
 import 'codemirror/addon/merge/merge.css'
@@ -29,49 +29,49 @@ class GitDiffView extends Component {
   }
 
   componentWillMount () {
-    const {path, oldRef, newRef} = this.props.content
+    const { path, oldRef, newRef } = this.props.content
     if (oldRef !== '') {
       this.props.gitFileDiff({
-        path: path,
-        oldRef: oldRef,
-        newRef: newRef
-      }).then(res => {
+        path,
+        oldRef,
+        newRef
+      }).then((res) => {
         this.setState({
           isLoading: false,
         })
         const diffPatch = res.diff
         if (diffPatch === '' || diffPatch.split('\n')[3] === '--- /dev/null') {
-          this.props.gitReadFile({ref: newRef, path: path})
-            .then(res => {
+          this.props.gitReadFile({ ref: newRef, path })
+            .then((res) => {
               this.initDiff('', res.content)
             })
-        } else if (oldRef && oldRef !== '~~unstaged~~'){
-          this.props.gitReadFile({ref: oldRef, path: path})
-            .then(res => {
-              let content = res.content
-              let newContent = jsdiff.applyPatch(content, diffPatch)
+        } else if (oldRef && oldRef !== '~~unstaged~~') {
+          this.props.gitReadFile({ ref: oldRef, path })
+            .then((res) => {
+              const content = res.content
+              const newContent = jsdiff.applyPatch(content, diffPatch)
               this.initDiff(newContent, content)
             })
         } else {
-          this.props.readFile({ path: path })
-            .then(res => {
-              let content = res.content
-              let newContent = jsdiff.applyPatch(content, diffPatch)
+          this.props.readFile({ path })
+            .then((res) => {
+              const content = res.content
+              const newContent = jsdiff.applyPatch(content, diffPatch)
               this.initDiff(newContent, content)
             })
         }
       })
     } else {
-      this.props.gitReadFile({ref: newRef, path: path})
-        .then(res => {
+      this.props.gitReadFile({ ref: newRef, path })
+        .then((res) => {
           this.initDiff('', res.content)
         })
     }
   }
 
   render () {
-    const {theme, content} = this.props
-    const {path, oldRef, newRef} = this.props.content
+    const { theme, content } = this.props
+    const { path, oldRef, newRef } = this.props.content
     let loadDiv = ''
     if (this.state.isLoading) {
       loadDiv = (
@@ -84,28 +84,29 @@ class GitDiffView extends Component {
     }
     let title = ''
     if (oldRef !== '') {
-      title = `Diff File: ${path} - ${newRef} vs ${oldRef}`
+      title = i18n`git.diffFileModal.titleWithOldRef${{ path, newRef, oldRef }}`
     } else {
-      title = `Diff File: ${path}`
+      title = i18n`git.diffFileModal.title${{ path }}`
     }
     return (
       <div>
         <div className='git-merge'>
           <h1>
-          {title}
+            {title}
           </h1>
           <hr />
           <div className='diffModal'>
             <div
               id='flex-container'
-              className='diffContainer'>
-              <div id='cm-merge-view-wrapper' ref={r=>this.editorDOM=r} ></div>
+              className='diffContainer'
+            >
+              <div id='cm-merge-view-wrapper' ref={r => this.editorDOM = r} />
             </div>
             { loadDiv }
           </div>
           <hr />
           <div className='modal-ops'>
-            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>Cancel</button>
+            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>{i18n`git.cancel`}</button>
           </div>
         </div>
       </div>

app/components/Git/modals/merge.jsx

@@ -21,23 +21,23 @@ class GitMergeView extends Component {
     return (
       <div>
         <div className='git-reset-container'>
-          <h1>Merge Branch</h1>
+          <h1>{i18n`git.mergeModal.title`}</h1>
           <hr />
           <form className='form-horizontal'>
             <div className='form-group'>
-              <label className='col-sm-3 control-label'>Current Branch</label>
+              <label className='col-sm-3 control-label'>{i18n`git.mergeModal.currentBranch`}</label>
               <label className='col-sm-9 checkbox-inline'>{currentBranch}</label>
             </div>
             <div className='form-group'>
-              <label className='col-sm-3 control-label'>Branch to merge</label>
+              <label className='col-sm-3 control-label'>{i18n`git.mergeModal.destBranch`}</label>
               <label className='col-sm-5' style={{ width: 'auto' }}>
                 <select className='form-control'
                   onChange={e => this.setState({ branchToMerge: e.target.value, selectChanged: true })}
                   value={this.state.branchToMerge}
                   style={this.state.selectChanged ? null : { color: '#aaa' }}
                 >
                   <option selected value='' disabled={this.state.selectChanged}>
-                    -- select a branch --
+                    -- {i18n.get('git.mergeModal.selectBranch')} --
                   </option>
                   {allBranches.map(branch => <option key={branch} value={branch}>{branch}</option>)}
                 </select>
@@ -46,7 +46,7 @@ class GitMergeView extends Component {
           </form>
           <hr />
           <div className='modal-ops'>
-            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>Cancel</button>
+            <button className='btn btn-default' onClick={e => dispatchCommand('modal:dismiss')}>{i18n`git.cancel`}</button>
             <button className='btn btn-primary'
               onClick={e => dispatch(GitActions.mergeBranch(this.state.branchToMerge))}
               disabled={!this.state.branchToMerge}

app/components/Git/modals/mergeFile.jsx

@@ -4,11 +4,13 @@ import { dispatchCommand } from '../../../commands'
 import cx from 'classnames'
 import { connect } from 'react-redux'
 import * as GitActions from '../actions'
+import i18n from 'utils/createI18n'
+
 
 // CodeMirror
 import CodeMirror from 'codemirror'
 require(['diff_match_patch'], (lib) => {
-  Object.assign(window, lib)  //@fixme: diff_match_patch is now exposed into the global ns
+  Object.assign(window, lib)  // @fixme: diff_match_patch is now exposed into the global ns
   require(['codemirror/addon/merge/merge.js'])
 })
 import 'codemirror/addon/merge/merge.css'
@@ -20,15 +22,15 @@ class GitMergeView extends Component {
     width: '100%',
   }
 
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.state = {
       isLoading: true
     }
   }
 
   componentWillMount () {
-    this.props.getConflicts({path: this.props.content.path}).then(res => {
+    this.props.getConflicts({ path: this.props.content.path }).then((res) => {
       this.setState({
         isLoading: false,
       })
@@ -37,7 +39,7 @@ class GitMergeView extends Component {
   }
 
   render () {
-    const {theme, content} = this.props;
+    const { theme, content } = this.props
     let loadDiv = ''
     if (this.state.isLoading) {
       loadDiv = (
@@ -52,34 +54,35 @@ class GitMergeView extends Component {
       <div>
         <div className='git-merge'>
           <h1>
-          Merge File: {this.props.content.path}
+            {i18n`git.mergeFile.title`} : {this.props.content.path}
           </h1>
           <hr />
           <div className='diffModal'>
             <div className='mergeTitle'>
               <div>
-                LOCAL
+                {i18n`git.mergeFile.local`}
               </div>
-              <div className='gutterTitle'></div>
+              <div className='gutterTitle' />
               <div>
-                BASE
+                {i18n`git.mergeFile.base`}
               </div>
-              <div className='gutterTitle'></div>
+              <div className='gutterTitle' />
               <div>
-                REMOTE
+                {i18n`git.mergeFile.remote`}
               </div>
             </div>
             <div
               id='flex-container'
-              className='mergeContainer'>
-              <div id='cm-merge-view-wrapper' ref={r=>this.editorDOM=r} ></div>
+              className='mergeContainer'
+            >
+              <div id='cm-merge-view-wrapper' ref={r => this.editorDOM = r}  />
             </div>
             { loadDiv }
           </div>
           <hr />
           <div className='modal-ops'>
-            <button className='btn btn-default' onClick={this.handleCancel}>Cancel</button>
-            <button className='btn btn-primary' onClick={this.handleConfirm}>Confirm</button>
+            <button className='btn btn-default' onClick={this.handleCancel}>{i18n`git.cancel`}</button>
+            <button className='btn btn-primary' onClick={this.handleConfirm}>{i18n`git.commit`}</button>
           </div>
         </div>
       </div>