refactor(chart-core): migrate chart core to TS (#1816)

packages/dx-chart-core/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  globals: {
+    'ts-jest': {
+      tsConfig: './tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  testMatch: [
+    '**/*.test.(ts|tsx)',
+  ],
+};

packages/dx-chart-core/package.json

@@ -35,25 +35,24 @@
     "test:coverage": "jest --coverage",
     "build": "rollup -c rollup.config.js",
     "build:watch": "rollup -c rollup.config.js -w",
-    "lint": "eslint \"src/**\"",
+    "lint": "tslint -p tsconfig.lint.json",
     "lint:fix": "yarn run lint -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.0.0",
+    "@types/d3-array": "^1.2.5",
+    "@types/d3-scale": "^2.1.0",
+    "@types/d3-shape": "^1.3.0",
     "core-js": "^2.6.3",
-    "eslint": "^5.13.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.2.2",
     "jest": "^24.0.0",
     "rollup": "^1.1.2",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-license": "^0.8.1"
+    "rollup-plugin-license": "^0.8.1",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-typescript2": "^0.19.2",
+    "ts-jest": "^23.10.5",
+    "tslint": "^5.12.1",
+    "tslint-config-airbnb": "^5.11.1",
+    "typescript": "^3.3.1"
   },
   "dependencies": {
     "d3-array": "^2.0.3",

packages/dx-chart-core/rollup.config.js

@@ -1,19 +1,25 @@
-import babel from 'rollup-plugin-babel';
 import license from 'rollup-plugin-license';
+import { default as typescriptRollup } from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
+import typescript from 'typescript';
 import { banner, external, globals } from '../../tools/rollup-utils';
 import pkg from './package.json';
 
 export default {
-  input: 'src/index.js',
+  input: 'src/index.ts',
   output: [
     { file: pkg.main, format: 'umd', name: pkg.globalName, sourcemap: true, globals: globals() },
     { file: pkg.module, format: 'es', sourcemap: true },
   ],
   external: external(__dirname),
   plugins: [
-    babel({
-      runtimeHelpers: true,
-      exclude: 'node_modules/**',
+    typescriptRollup({
+      typescript,
+      useTsconfigDeclarationDir: true,
+    }),
+    replace({
+      '/** @class */': '/*#__PURE__*/',
+      delimiters: ['', ''],
     }),
     license({
       banner,

packages/dx-chart-core/src/plugins/animation/computeds.test.js → packages/dx-chart-core/src/plugins/animation/computeds.test.ts

@@ -6,7 +6,7 @@ import {
 } from './computeds';
 
 describe('Animation styles', () => {
-  const { head } = document; // eslint-disable-line no-undef
+  const { head } = document;
 
   afterEach(() => {
     const style = head.getElementsByTagName('style')[0];
@@ -19,7 +19,7 @@ describe('Animation styles', () => {
     yScale.clamp = () => yScale;
 
     it('should return style', () => {
-      expect(getAreaAnimationStyle({ yScale })).toEqual({
+      expect(getAreaAnimationStyle({ yScale } as any)).toEqual({
         animation: 'animation_transform 1s',
         transformOrigin: '0px 4px',
       });
@@ -28,27 +28,28 @@ describe('Animation styles', () => {
 
   describe('#getPieAnimationStyle', () => {
     it('should return style', () => {
-      expect(getPieAnimationStyle({}, { index: 3 })).toEqual({
+      expect(getPieAnimationStyle({} as any, { index: 3 } as any)).toEqual({
         animation: 'animation_pie 1s',
       });
     });
   });
 
   describe('#getScatterAnimationStyle', () => {
     it('should return style', () => {
-      expect(getScatterAnimationStyle({})).toEqual({
+      expect(getScatterAnimationStyle({} as any)).toEqual({
         animation: 'animation_scatter 1s',
       });
     });
   });
 
   describe('style element generation', () => {
     it('should reuse single "style" element', () => {
-      getScatterAnimationStyle({}, null, 'test-point', 'test-series-name');
-      getScatterAnimationStyle({}, null, 'test-point', 'test-series-name');
+      getScatterAnimationStyle({} as any);
+      getScatterAnimationStyle({} as any);
 
       expect(head.getElementsByTagName('style').length).toEqual(1);
       expect(head.getElementsByTagName('style')[0].textContent).toEqual(
+        // tslint:disable-next-line: max-line-length
         '\n@keyframes animation_scatter { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1 } }\n',
       );
     });
@@ -60,7 +61,7 @@ describe('#buildAnimatedStyleGetter', () => {
     const getAnimationStyle = jest.fn().mockReturnValue({ animation: 'test' });
 
     expect(buildAnimatedStyleGetter(
-      { style: 'base' }, getAnimationStyle, 'test-scales', 'test-point',
+      { style: 'base' }, getAnimationStyle, 'test-scales' as any, 'test-point' as any,
     )).toEqual({
       style: 'base',
       animation: 'test',

packages/dx-chart-core/src/plugins/animation/computeds.js → packages/dx-chart-core/src/plugins/animation/computeds.ts

@@ -1,14 +1,16 @@
+import { Point, GetAnimationStyleFn, BuildAnimatedStyleGetter } from '../../types';
+
 const ANIMATIONS = Symbol('animation');
 
-const addKeyframe = (name, def) => {
+const addKeyframe = (name: string, def: string): void => {
   if (typeof document === 'undefined') {
     return;
   }
-  const head = document.getElementsByTagName('head')[0]; // eslint-disable-line no-undef
-  let style = Array.from(head.getElementsByTagName('style'))
-    .find(node => node.dataset[ANIMATIONS]);
+  const head = document.getElementsByTagName('head')[0];
+  let style: any = Array.from(head.getElementsByTagName('style'))
+  .find((node: any) => node.dataset[ANIMATIONS]);
   if (!style) {
-    style = document.createElement('style'); // eslint-disable-line no-undef
+    style = document.createElement('style');
     style.type = 'text/css';
     style.dataset[ANIMATIONS] = true;
     head.appendChild(style);
@@ -39,11 +41,11 @@ const getPieAnimationName = () => {
 
 const getDefaultAreaAnimationOptions = () => '1s';
 
-const getDefaultPieAnimationOptions = ({ index }) => `${0.7 + index * 0.1}s`;
+const getDefaultPieAnimationOptions = ({ index }: Point) => `${0.7 + index * 0.1}s`;
 
-export const getAreaAnimationStyle = (scales) => {
+export const getAreaAnimationStyle: GetAnimationStyleFn = (scales) => {
   const animationStyle = {
-    transformOrigin: `0px ${scales.yScale.copy().clamp(true)(0)}px`,
+    transformOrigin: `0px ${scales.yScale.copy().clamp!(true)(0)}px`,
   };
   const options = getDefaultAreaAnimationOptions();
   return {
@@ -52,21 +54,21 @@ export const getAreaAnimationStyle = (scales) => {
   };
 };
 
-export const getPieAnimationStyle = (scales, point) => {
-  const options = getDefaultPieAnimationOptions(point);
+export const getPieAnimationStyle: GetAnimationStyleFn = (_, point) => {
+  const options = getDefaultPieAnimationOptions(point!);
   return {
     animation: `${getPieAnimationName()} ${options}`,
   };
 };
 
-export const getScatterAnimationStyle = () => {
+export const getScatterAnimationStyle: GetAnimationStyleFn = () => {
   const options = getDefaultAreaAnimationOptions();
   return {
     animation: `${getScatterAnimationName()} ${options}`,
   };
 };
 
-export const buildAnimatedStyleGetter = (
+export const buildAnimatedStyleGetter: BuildAnimatedStyleGetter = (
   style, getAnimationStyle, scales, point,
 ) => {
   const animationStyle = getAnimationStyle(scales, point);