i18n engine typescript migration

package.json

@@ -210,8 +210,9 @@
     "@kbn/eslint-plugin-license-header": "link:packages/kbn-eslint-plugin-license-header",
     "@kbn/plugin-generator": "link:packages/kbn-plugin-generator",
     "@kbn/test": "link:packages/kbn-test",
+    "@types/angular": "^1.6.50",
+    "@types/angular-mocks": "^1.7.0",
     "@octokit/rest": "^15.10.0",
-    "@types/angular": "^1.6.45",
     "@types/babel-core": "^6.25.5",
     "@types/bluebird": "^3.1.1",
     "@types/boom": "^7.2.0",

packages/kbn-i18n/angular/package.json

@@ -1,4 +1,5 @@
 {
   "browser": "../target/web/angular",
-  "main": "../target/node/angular"
+  "main": "../target/node/angular",
+  "types": "./target/types/angular/index.d.ts"
 }

packages/kbn-i18n/babel.config.js

@@ -0,0 +1,51 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// We can't use common Kibana presets here because of babel versions incompatibility
+module.exports = {
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
+  presets: ['@babel/preset-react', '@babel/typescript'],
+  env: {
+    web: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              browsers: ['last 2 versions', '> 5%', 'Safari 7'],
+            },
+          },
+        ],
+      ],
+    },
+    node: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current',
+            },
+          },
+        ],
+      ],
+    },
+  },
+  ignore: ['**/*.test.ts', '**/*.test.tsx'],
+};

packages/kbn-i18n/package.json

@@ -2,30 +2,40 @@
   "name": "@kbn/i18n",
   "browser": "./target/web/browser.js",
   "main": "./target/node/index.js",
+  "types": "./target/types/index.d.ts",
   "module": "./src/index.js",
   "version": "1.0.0",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
-    "build": "yarn build:web && yarn build:node",
-    "build:web": "cross-env BABEL_ENV=web babel src --out-dir target/web",
-    "build:node": "cross-env BABEL_ENV=node babel src --out-dir target/node",
+    "build": "yarn build:web && yarn build:node && yarn build:types",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:web": "cross-env BABEL_ENV=web babel src --config-file ./babel.config.js --out-dir target/web --extensions \".ts,.js,.tsx\"",
+    "build:node": "cross-env BABEL_ENV=node babel src --config-file ./babel.config.js --out-dir target/node --extensions \".ts,.js,.tsx\"",
     "kbn:bootstrap": "yarn build",
     "kbn:watch": "yarn build --watch"
   },
   "devDependencies": {
-    "@kbn/babel-preset": "link:../kbn-babel-preset",
-    "@kbn/dev-utils": "link:../kbn-dev-utils",
-    "babel-cli": "^6.26.0",
-    "cross-env": "^5.2.0"
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
+    "@types/intl-relativeformat": "^2.1.0",
+    "@types/json5": "^0.0.30",
+    "@types/react-intl": "^2.3.11",
+    "cross-env": "^5.2.0",
+    "typescript": "^3.0.3"
   },
   "dependencies": {
     "intl-format-cache": "^2.1.0",
     "intl-messageformat": "^2.2.0",
     "intl-relativeformat": "^2.1.0",
-    "json5": "^1.0.1",
-    "prop-types": "^15.5.8",
+    "json5": "^2.0.1",
+    "prop-types": "^15.6.2",
     "react": "^16.3.0",
-    "react-intl": "^2.4.0"
+    "react-intl": "^2.7.0"
   }
 }

packages/kbn-i18n/react/package.json

@@ -1,4 +1,5 @@
 {
   "browser": "../target/web/react",
-  "main": "../target/node/react"
+  "main": "../target/node/react",
+  "types": "./target/types/react/index.d.ts"
 }

packages/kbn-i18n/src/angular/directive.test.js → packages/kbn-i18n/src/angular/directive.test.ts

@@ -20,26 +20,28 @@
 import angular from 'angular';
 import 'angular-mocks';
 import { i18nDirective } from './directive';
-import { i18nProvider } from './provider';
+import { I18nProvider } from './provider';
 
 angular
   .module('app', [])
-  .provider('i18n', i18nProvider)
+  .provider('i18n', I18nProvider)
   .directive('i18nId', i18nDirective);
 
 describe('i18nDirective', () => {
-  let compile;
-  let scope;
+  let compile: angular.ICompileService;
+  let scope: angular.IRootScopeService;
 
   beforeEach(angular.mock.module('app'));
   beforeEach(
-    angular.mock.inject(($compile, $rootScope) => {
-      compile = $compile;
-      scope = $rootScope.$new();
-    })
+    angular.mock.inject(
+      ($compile: angular.ICompileService, $rootScope: angular.IRootScopeService) => {
+        compile = $compile;
+        scope = $rootScope.$new();
+      }
+    )
   );
 
-  it('inserts correct translation html content', () => {
+  test('inserts correct translation html content', () => {
     const id = 'id';
     const defaultMessage = 'default-message';
 
@@ -56,7 +58,7 @@ describe('i18nDirective', () => {
     expect(element.html()).toEqual(defaultMessage);
   });
 
-  it('inserts correct translation html content with values', () => {
+  test('inserts correct translation html content with values', () => {
     const id = 'id';
     const defaultMessage = 'default-message {word}';
     const compiledContent = 'default-message word';

packages/kbn-i18n/src/angular/directive.js → packages/kbn-i18n/src/angular/directive.ts

@@ -17,27 +17,28 @@
  * under the License.
  */
 
-export function i18nDirective(i18n) {
+import { I18nServiceType } from './provider';
+
+export function i18nDirective(i18n: I18nServiceType) {
   return {
     restrict: 'A',
     scope: {
       id: '@i18nId',
       defaultMessage: '@i18nDefaultMessage',
       values: '=i18nValues',
     },
-    link: function($scope, $element) {
-      $scope.$watchGroup(['id', 'defaultMessage', 'values'], function([
-        id,
-        defaultMessage = '',
-        values = {},
-      ]) {
-        $element.html(
-          i18n(id, {
-            values,
-            defaultMessage,
-          })
-        );
-      });
+    link($scope: angular.IScope, $element: angular.IRootElementService) {
+      $scope.$watchGroup(
+        ['id', 'defaultMessage', 'values'],
+        ([id, defaultMessage = '', values = {}]) => {
+          $element.html(
+            i18n(id, {
+              values,
+              defaultMessage,
+            })
+          );
+        }
+      );
     },
   };
 }

packages/kbn-i18n/src/angular/filter.test.js → packages/kbn-i18n/src/angular/filter.test.ts

@@ -17,23 +17,24 @@
  * under the License.
  */
 
-import angular from 'angular';
-import 'angular-mocks';
-import { i18nProvider } from './provider';
-import { i18nFilter } from './filter';
-import * as i18n from '../core/i18n';
-
 jest.mock('../core/i18n', () => ({
   translate: jest.fn().mockImplementation(() => 'translation'),
 }));
 
+import angular from 'angular';
+import 'angular-mocks';
+
+import * as i18n from '../core/i18n';
+import { i18nFilter as angularI18nFilter } from './filter';
+import { I18nProvider, I18nServiceType } from './provider';
+
 angular
   .module('app', [])
-  .provider('i18n', i18nProvider)
-  .filter('i18n', i18nFilter);
+  .provider('i18n', I18nProvider)
+  .filter('i18n', angularI18nFilter);
 
 describe('i18nFilter', () => {
-  let filter;
+  let filter: I18nServiceType;
 
   beforeEach(angular.mock.module('app'));
   beforeEach(
@@ -45,15 +46,15 @@ describe('i18nFilter', () => {
     jest.resetAllMocks();
   });
 
-  it('provides wrapper around i18n engine', () => {
+  test('provides wrapper around i18n engine', () => {
     const id = 'id';
     const defaultMessage = 'default-message';
     const values = {};
 
     const result = filter(id, { defaultMessage, values });
 
+    expect(result).toEqual('translation');
     expect(i18n.translate).toHaveBeenCalledTimes(1);
     expect(i18n.translate).toHaveBeenCalledWith(id, { defaultMessage, values });
-    expect(result).toEqual('translation');
   });
 });

packages/kbn-i18n/src/angular/filter.js → packages/kbn-i18n/src/angular/filter.ts

@@ -17,8 +17,10 @@
  * under the License.
  */
 
-export function i18nFilter(i18n) {
-  return function(id, { defaultMessage = '', values = {} } = {}) {
+import { I18nServiceType } from './provider';
+
+export function i18nFilter(i18n: I18nServiceType) {
+  return (id: string, { defaultMessage = '', values = {} } = {}) => {
     return i18n(id, {
       values,
       defaultMessage,

packages/kbn-i18n/src/angular/index.js → packages/kbn-i18n/src/angular/index.ts

@@ -17,6 +17,6 @@
  * under the License.
  */
 
-export { i18nProvider } from './provider';
+export { I18nProvider } from './provider';
 export { i18nFilter } from './filter';
 export { i18nDirective } from './directive';

packages/kbn-i18n/src/angular/provider.test.js → packages/kbn-i18n/src/angular/provider.test.ts

@@ -19,36 +19,37 @@
 
 import angular from 'angular';
 import 'angular-mocks';
-import { i18nProvider } from './provider';
-import * as i18n from '../core/i18n';
 
-angular.module('app', []).provider('i18n', i18nProvider);
+import * as i18nCore from '../core/i18n';
+import { I18nProvider, I18nServiceType } from './provider';
+
+angular.module('app', []).provider('i18n', I18nProvider);
 
 describe('i18nProvider', () => {
-  let provider;
-  let service;
+  let provider: I18nProvider;
+  let service: I18nServiceType;
 
   beforeEach(
     angular.mock.module('app', [
       'i18nProvider',
-      i18n => {
-        service = i18n;
+      (i18n: I18nProvider) => {
+        provider = i18n;
       },
     ])
   );
   beforeEach(
-    angular.mock.inject(i18n => {
-      provider = i18n;
+    angular.mock.inject((i18n: I18nServiceType) => {
+      service = i18n;
     })
   );
 
-  it('provides wrapper around i18n engine', () => {
-    expect(provider).toEqual(i18n.translate);
+  test('provides wrapper around i18n engine', () => {
+    expect(service).toEqual(i18nCore.translate);
   });
 
-  it('provides service wrapper around i18n engine', () => {
-    const serviceMethodNames = Object.keys(service);
-    const pluginMethodNames = Object.keys(i18n);
+  test('provides service wrapper around i18n engine', () => {
+    const serviceMethodNames = Object.keys(provider);
+    const pluginMethodNames = Object.keys(i18nCore);
 
     expect([...serviceMethodNames, 'translate'].sort()).toEqual(
       [...pluginMethodNames, '$get'].sort()

packages/kbn-i18n/src/angular/provider.ts

@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as i18n from '../core';
+
+export type I18nServiceType = ReturnType<I18nProvider['$get']>;
+
+export class I18nProvider implements angular.IServiceProvider {
+  public addMessages = i18n.addMessages;
+  public getMessages = i18n.getMessages;
+  public setLocale = i18n.setLocale;
+  public getLocale = i18n.getLocale;
+  public setDefaultLocale = i18n.setDefaultLocale;
+  public getDefaultLocale = i18n.getDefaultLocale;
+  public setFormats = i18n.setFormats;
+  public getFormats = i18n.getFormats;
+  public getRegisteredLocales = i18n.getRegisteredLocales;
+  public init = i18n.init;
+  public $get = () => i18n.translate;
+}