update

built/src/Observer.d.ts

@@ -0,0 +1,2 @@
+declare const Observer: (obj: any, defaultKey?: string) => any;
+export default Observer;

built/src/Observer.js

@@ -0,0 +1,36 @@
+const Observer = (obj, defaultKey = 'zh-CN') => {
+    Object.keys(obj.__data__ || obj).forEach(key => {
+        defineReactive(obj, key, defaultKey);
+    });
+    return obj;
+};
+const observe = value => {
+    if (!value || typeof value !== 'object') {
+        return;
+    }
+    Observer(value);
+};
+var defineReactive = (obj, key, defaultKey) => {
+    var childObj = observe(obj[key]);
+    Object.defineProperty(obj, key, {
+        get() {
+            if (obj.__data__[key]) {
+                return obj.__data__[key];
+            }
+            else if (obj.__metas__[defaultKey][key]) {
+                return obj.__metas__[defaultKey][key];
+            }
+        },
+        set(newVal) {
+            if (obj[key] === newVal) {
+                return;
+            }
+            obj[key] = newVal;
+            const cb = obj.callback[key];
+            cb.call(obj);
+            childObj = observe(newVal);
+        }
+    });
+};
+export default Observer;
+//# sourceMappingURL=Observer.js.map

built/src/Observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Observer.js","sourceRoot":"","sources":["../../src/Observer.ts"],"names":[],"mappings":"AAKA,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,UAAU,GAAG,OAAO,EAAE,EAAE;IAC7C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QAC7C,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IACH,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE;IAEtB,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACvC,OAAO;KACR;IACD,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClB,CAAC,CAAC;AAEF,IAAI,cAAc,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE;IAC5C,IAAI,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IACjC,MAAM,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE;QAC9B,GAAG;YACD,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB,OAAO,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC1B;iBAAM,IAAI,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,EAAE;gBACzC,OAAO,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC;aACvC;QACH,CAAC;QACD,GAAG,CAAC,MAAM;YACR,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,MAAM,EAAE;gBACvB,OAAO;aACR;YAED,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;YAElB,MAAM,EAAE,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC7B,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEb,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

built/src/demo.d.ts

@@ -0,0 +1 @@
+export {};

built/src/demo.js

@@ -0,0 +1,22 @@
+import IntlFormat from '../src/index';
+const intlFormat = IntlFormat.init('zh-CN', {
+    'zh-CN': {
+        value: '值',
+        test: '测试',
+        testTemplate: '你有{value}条未读通知',
+        foo: {
+            bar: 'foobar'
+        },
+        photo: '我{num, plural, =0 {没有照片} =1 {有1张照片} other {有#张照片}}'
+    },
+    'en-US': {
+        value: 'value'
+    }
+});
+console.log(intlFormat.test, 'intlFormat.test');
+console.log(intlFormat.template(intlFormat.testTemplate, {
+    value: '22'
+}), 'intlFormat.testTemplate');
+intlFormat.setLang('en-US');
+console.log(intlFormat.get('foo.bar'), 'get foo bar');
+//# sourceMappingURL=demo.js.map

built/src/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","sourceRoot":"","sources":["../../src/demo.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE;IAC1C,OAAO,EAAE;QACP,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,gBAAgB;QAC9B,GAAG,EAAE;YACH,GAAG,EAAE,QAAQ;SACd;QACD,KAAK,EAAE,oDAAoD;KAC5D;IACD,OAAO,EAAE;QACP,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC;AAEH,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;AAEhD,OAAO,CAAC,GAAG,CACT,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,YAAY,EAAE;IAC3C,KAAK,EAAE,IAAI;CACZ,CAAC,EACF,yBAAyB,CAC1B,CAAC;AAEF,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5B,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC"}

built/src/index.d.ts

@@ -0,0 +1,17 @@
+export interface I18NAPI {
+  init?(lang: string, metas: object, defaultKey?: 'zh-CN'): I18NAPI;
+  setLang?(lang: string): void;
+  template?(str: string, args: object): string;
+  get(name: string, args?: object): string;
+}
+declare const IntlFormat: {
+  init: <T>(
+    lang: string,
+    metas: {
+      [key: string]: T;
+    },
+    defaultKey?: string
+  ) => I18NAPI & T;
+};
+export { IntlFormat };
+export default IntlFormat;

built/src/index.js

@@ -0,0 +1,70 @@
+import IntlMessageFormat from 'intl-messageformat';
+import * as lodashGet from 'lodash.get';
+import Observer from './Observer';
+class I18N {
+    constructor(lang, metas, defaultKey) {
+        this.__lang__ = lang;
+        this.__metas__ = metas;
+        this.__data__ = metas[lang];
+        this.__defaultKey__ = defaultKey;
+    }
+    setLang(lang) {
+        this.__lang__ = lang;
+        this.__data__ = this.__metas__[lang];
+    }
+    getProp(obj, is, value) {
+        if (typeof is === 'string') {
+            is = is.split('.');
+        }
+        if (is.length === 1 && value !== undefined) {
+            return (obj[is[0]] = value);
+        }
+        else if (is.length === 0) {
+            return obj;
+        }
+        else {
+            const prop = is.shift();
+            if (value !== undefined && obj[prop] === undefined) {
+                obj[prop] = {};
+            }
+            return this.getProp(obj[prop], is, value);
+        }
+    }
+    template(str, args) {
+        if (!str) {
+            return '';
+        }
+        return str.replace(/\{(.+?)\}/g, (match, p1) => {
+            return this.getProp(Object.assign({}, this.__data__, args), p1);
+        });
+    }
+    get(str, args) {
+        let msg = lodashGet(this.__data__, str);
+        if (!msg) {
+            msg = lodashGet(this.__metas__[this.__defaultKey__ || 'zh-CN'], str, str);
+        }
+        if (args) {
+            try {
+                msg = new IntlMessageFormat(msg, this.__lang__);
+                msg = msg.format(args);
+                return msg;
+            }
+            catch (err) {
+                console.warn(`canary-intl format message failed for key='${str}'`, err);
+                return '';
+            }
+        }
+        else {
+            return msg;
+        }
+    }
+}
+const IntlFormat = {
+    init: (lang, metas, defaultKey) => {
+        const i18n = new I18N(lang, metas, defaultKey);
+        return Observer(i18n, defaultKey);
+    }
+};
+export { IntlFormat };
+export default IntlFormat;
+//# sourceMappingURL=index.js.map

built/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

built/test/test.d.ts

@@ -0,0 +1 @@
+export {};

built/test/test.js

@@ -0,0 +1,70 @@
+import * as assert from 'assert';
+import IntlFormat from '../src/index';
+describe('IntlFormat', function () {
+    let intlFormat;
+    before(function () {
+        intlFormat = IntlFormat.init('zh-CN', {
+            'zh-CN': {
+                value: '值',
+                test: '测试',
+                testTemplate: '你有{value}条未读通知',
+                foo: {
+                    bar: 'foobar'
+                },
+                photo: '我{num, plural, =0 {没有照片} =1 {有1张照片} other {有#张照片}}'
+            },
+            'en-US': {
+                value: 'value'
+            }
+        });
+    });
+    describe('get current value from certain language', function () {
+        it('get key test value for current lanuage', function () {
+            assert.equal(intlFormat.test, '测试');
+        });
+        it('Get method: get key test value for current lanuage', function () {
+            assert.equal(intlFormat.get('test'), '测试');
+            assert.equal(intlFormat.get('photo', {
+                num: 0
+            }), '我没有照片');
+            assert.equal(intlFormat.get('photo', {
+                num: 1
+            }), '我有1张照片');
+            assert.equal(intlFormat.get('photo', {
+                num: 1000
+            }), '我有1,000张照片');
+        });
+        it('Template method: get template values for current lanuage', function () {
+            assert.equal(intlFormat.template(intlFormat.testTemplate, {
+                value: 3
+            }), '你有3条未读通知');
+            assert.equal(intlFormat.get('testTemplate', {
+                value: 3
+            }), '你有3条未读通知');
+        });
+        it('Different instance values', function () {
+            const intlFormat1 = IntlFormat.init('zh-CN', {
+                'zh-CN': {
+                    test: 'firstvalue'
+                }
+            });
+            const intlFormat2 = IntlFormat.init('zh-CN', {
+                'zh-CN': {
+                    test: 'secondvalue'
+                }
+            });
+            assert.equal(intlFormat1.test, 'firstvalue');
+            assert.equal(intlFormat2.test, 'secondvalue');
+        });
+        it('Get deep value', function () {
+            assert.equal(intlFormat.foo.bar, 'foobar');
+            assert.equal(intlFormat.get('foo.bar'), 'foobar');
+        });
+        it('获取默认中文值', function () {
+            intlFormat.setLang('en-US');
+            assert.equal(intlFormat.foo.bar, 'foobar');
+            assert.equal(intlFormat.get('foo.bar'), 'foobar');
+        });
+    });
+});
+//# sourceMappingURL=test.js.map

built/test/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../test/test.ts"],"names":[],"mappings":"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"}

demo/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <title>intl-format/Demo</title>
+
+  <script src="../app.js"></script>
+</head>
+
+<body>
+</body>
+<script>
+</script>
+
+</html>

demo/webpack.config.js

@@ -0,0 +1,46 @@
+const path = require('path'); // 导入路径包
+const webpack = require('webpack');
+const env = process.env.NODE_ENV;
+
+let config = {
+  entry: {
+    app: ['./src/demo']
+  },
+  cache: false,
+  watch: true,
+  output: {
+    path: path.resolve(__dirname, '../built'),
+    filename: 'app.js'
+  },
+  devtool: 'inline-source-map',
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: ['.ts', '.tsx', '.js', '.json']
+  },
+  // 使用loader模块
+  module: {
+    loaders: [{ test: /\.tsx?$/, loader: 'ts-loader' }]
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(env)
+    })
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, '../'),
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    },
+    historyApiFallback: {
+      index: '/index.html'
+    },
+    stats: 'minimal',
+    host: '0.0.0.0',
+    port: 8000,
+    inline: true,
+    compress: true
+  }
+};
+
+module.exports = config;

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mi/canary-intl",
+  "version": "1.0.0",
+  "description": "I18N tools for universal javascript apps, easy use & better api;",
+  "main": "built/src/index.js",
+  "types": "built/src/index.d.ts",
+  "author": "zhaoyingbo",
+  "keywords": [
+    "I18N",
+    "intl",
+    "react",
+    "G11N",
+    "L10N"
+  ],
+  "scripts": {
+    "lint": "tslint src",
+    "autofix": "tslint src --fix",
+    "build": "tsc",
+    "demo": "webpack-dev-server --config demo/webpack.config.js",
+    "demo-build": "webpack --config demo/webpack.config.js",
+    "test": "mocha --compilers ts:ts-node/register test/**/*.ts -R spec"
+  },
+  "dependencies": {
+    "intl-messageformat": "^2.2.0",
+    "lodash.get": "^4.4.2"
+  },
+  "devDependencies": {
+    "@types/mocha": "^2.2.42",
+    "@types/node": "^7.0.31",
+    "babel-cli": "^6.18.0",
+    "mocha": "^3.5.0",
+    "ts-loader": "^2.3.0",
+    "ts-node": "^3.3.0",
+    "tslint": "^5.5.0",
+    "typescript": "^2.4.2",
+    "webpack": "^3.3.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "2.9.1"
+  },
+  "license": "MIT"
+}

src/Observer.ts

@@ -0,0 +1,45 @@
+/**
+ * @file 值处理
+ * @author linhuiw
+ */
+
+const Observer = (obj, defaultKey = 'zh-CN') => {
+  Object.keys(obj.__data__ || obj).forEach(key => {
+    defineReactive(obj, key, defaultKey);
+  });
+  return obj;
+};
+const observe = value => {
+  // 判断是否为object类型，是就继续执行Observer
+  if (!value || typeof value !== 'object') {
+    return;
+  }
+  Observer(value);
+};
+
+var defineReactive = (obj, key, defaultKey) => {
+  var childObj = observe(obj[key]);
+  Object.defineProperty(obj, key, {
+    get() {
+      if (obj.__data__[key]) {
+        return obj.__data__[key];
+      } else if (obj.__metas__[defaultKey][key]) {
+        return obj.__metas__[defaultKey][key];
+      }
+    },
+    set(newVal) {
+      if (obj[key] === newVal) {
+        return;
+      }
+      // 如果值有变化的话，做一些操作
+      obj[key] = newVal;
+      // 执行回调
+      const cb = obj.callback[key];
+      cb.call(obj);
+      // 如果set进来的值为复杂类型，再递归它，加上set/get
+      childObj = observe(newVal);
+    }
+  });
+};
+
+export default Observer;

src/demo.ts

@@ -0,0 +1,28 @@
+import IntlFormat from '../src/index';
+
+const intlFormat = IntlFormat.init('zh-CN', {
+  'zh-CN': {
+    value: '值',
+    test: '测试',
+    testTemplate: '你有{value}条未读通知',
+    foo: {
+      bar: 'foobar'
+    },
+    photo: '我{num, plural, =0 {没有照片} =1 {有1张照片} other {有#张照片}}'
+  },
+  'en-US': {
+    value: 'value'
+  }
+});
+
+console.log(intlFormat.test, 'intlFormat.test');
+
+console.log(
+  intlFormat.template(intlFormat.testTemplate, {
+    value: '22'
+  }),
+  'intlFormat.testTemplate'
+);
+
+intlFormat.setLang('en-US');
+console.log(intlFormat.get('foo.bar'), 'get foo bar');

src/index.ts

@@ -0,0 +1,116 @@
+/**
+ * @file I18N Tools
+ * @author linhuiw
+ */
+
+import IntlMessageFormat from 'intl-messageformat';
+import lodashGet from 'lodash.get';
+import Observer from './Observer';
+
+export interface I18NAPI {
+  /**
+   * 初始化对应语言
+   * @param lang: 对应语言
+   * @param metas: 所有语言的语言文件
+   * @param defaultKey: 默认支持的文件枚举值
+   */
+  init?(lang: string, metas: object, defaultKey?: 'zh-CN'): I18NAPI;
+  /**
+   * 设置对应语言
+   * @param lang: 切换的对应语言
+   */
+  setLang?(lang: string): void;
+  /**
+   * 获取对应语言的模板值
+   * @param template: 对应语言的模板
+   * @param args: 模板的参数
+   */
+  template?(str: string, args: object): string;
+  /**
+   * 获取对应语言的值
+   * @param name: 对应语言的模板的 Key
+   * @param options: 模板的参数
+   */
+  get(name: string, args?: object): string;
+}
+
+class I18N {
+  __lang__: string;
+  __metas__: any;
+  __data__: any;
+  __defaultKey__: string;
+  constructor(lang: string, metas: object, defaultKey?: string) {
+    this.__lang__ = lang;
+    this.__metas__ = metas;
+    this.__data__ = metas[lang];
+    this.__defaultKey__ = defaultKey;
+  }
+  setLang(lang: string) {
+    this.__lang__ = lang;
+    this.__data__ = this.__metas__[lang];
+  }
+  getProp(obj, is, value?) {
+    if (typeof is === 'string') {
+      is = is.split('.');
+    }
+    if (is.length === 1 && value !== undefined) {
+      return (obj[is[0]] = value);
+    } else if (is.length === 0) {
+      return obj;
+    } else {
+      const prop = is.shift();
+      if (value !== undefined && obj[prop] === undefined) {
+        obj[prop] = {};
+      }
+      return this.getProp(obj[prop], is, value);
+    }
+  }
+  template(str, args) {
+    if (!str) {
+      return '';
+    }
+    return str.replace(/\{(.+?)\}/g, (match, p1) => {
+      return this.getProp(
+        {
+          ...this.__data__,
+          ...args
+        },
+        p1
+      );
+    });
+  }
+  get(str, args?) {
+    let msg = lodashGet(this.__data__, str);
+    if (!msg) {
+      msg = lodashGet(this.__metas__[this.__defaultKey__ || 'zh-CN'], str, str);
+    }
+    if (args) {
+      try {
+        msg = new IntlMessageFormat(msg, this.__lang__);
+        msg = msg.format(args);
+        return msg;
+      } catch (err) {
+        console.warn(`canary-intl format message failed for key='${str}'`, err);
+        return '';
+      }
+    } else {
+      return msg;
+    }
+  }
+}
+
+const IntlFormat = {
+  init: <T>(
+    lang: string,
+    metas: {
+      [key: string]: T;
+    },
+    defaultKey?: string
+  ): I18NAPI & T => {
+    const i18n = new I18N(lang, metas, defaultKey);
+    return Observer(i18n, defaultKey);
+  }
+};
+
+export { IntlFormat };
+export default IntlFormat;

test/test.ts

@@ -0,0 +1,84 @@
+import * as assert from 'assert';
+import IntlFormat from '../src/index';
+describe('IntlFormat', function() {
+  let intlFormat;
+  before(function() {
+    intlFormat = IntlFormat.init('zh-CN', {
+      'zh-CN': {
+        value: '值',
+        test: '测试',
+        testTemplate: '你有{value}条未读通知',
+        foo: {
+          bar: 'foobar'
+        },
+        photo: '我{num, plural, =0 {没有照片} =1 {有1张照片} other {有#张照片}}'
+      },
+      'en-US': {
+        value: 'value'
+      }
+    });
+  });
+  describe('get current value from certain language', function() {
+    it('get key test value for current lanuage', function() {
+      assert.equal(intlFormat.test, '测试');
+    });
+    it('Get method: get key test value for current lanuage', function() {
+      assert.equal(intlFormat.get('test'), '测试');
+      assert.equal(
+        intlFormat.get('photo', {
+          num: 0
+        }),
+        '我没有照片'
+      );
+      assert.equal(
+        intlFormat.get('photo', {
+          num: 1
+        }),
+        '我有1张照片'
+      );
+      assert.equal(
+        intlFormat.get('photo', {
+          num: 1000
+        }),
+        '我有1,000张照片'
+      );
+    });
+    it('Template method: get template values for current lanuage', function() {
+      assert.equal(
+        intlFormat.template(intlFormat.testTemplate, {
+          value: 3
+        }),
+        '你有3条未读通知'
+      );
+      assert.equal(
+        intlFormat.get('testTemplate', {
+          value: 3
+        }),
+        '你有3条未读通知'
+      );
+    });
+    it('Different instance values', function() {
+      const intlFormat1: any = IntlFormat.init('zh-CN', {
+        'zh-CN': {
+          test: 'firstvalue'
+        }
+      });
+      const intlFormat2: any = IntlFormat.init('zh-CN', {
+        'zh-CN': {
+          test: 'secondvalue'
+        }
+      });
+      assert.equal(intlFormat1.test, 'firstvalue');
+      assert.equal(intlFormat2.test, 'secondvalue');
+    });
+    it('Get deep value', function() {
+      assert.equal(intlFormat.foo.bar, 'foobar');
+      assert.equal(intlFormat.get('foo.bar'), 'foobar');
+    });
+    it('获取默认中文值', function() {
+      intlFormat.setLang('en-US');
+      assert.equal(intlFormat.foo.bar, 'foobar');
+      assert.equal(intlFormat.get('foo.bar'), 'foobar');
+    });
+  });
+});

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "module": "esnext",
+    "target": "es6",
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "jsx": "react",
+    "sourceMap": true,
+    "declaration": true,
+    "outDir": "built",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "baseUrl": "./src/",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["dom", "es2015", "es2016", "es2017"],
+    "types": ["node", "mocha"]
+  },
+  "exclude": ["node_modules", "packages", "built"]
+}