refactor: use typescript (c3js#2796)

banban · Jun 16, 2020 · 98b20e9 · 98b20e9
1 parent 12dee8d
commit 98b20e9
Show file tree

Hide file tree

Showing 102 changed files with 977 additions and 1,465 deletions.
diff --git a/karma.conf.js b/karma.conf.js
@@ -1,27 +1,22 @@
-const path = require('path');
+const path = require('path')
 
-module.exports = function(config) {
+module.exports = config =>
   config.set({
-    frameworks: ['jasmine', 'browserify'],
-    files: [
-      'c3.css',
-      'spec/*-helper.js',
-      'spec/*-spec.js'
-    ],
+    frameworks: ['jasmine', 'karma-typescript'],
+    files: ['htdocs/css/c3.css', 'src/**/*.ts', 'spec/**/*'],
     preprocessors: {
-      'spec/*.js': ['browserify']
+      'spec/**/*.ts': ['karma-typescript'],
+      'src/**/*.ts': ['karma-typescript']
     },
-    browserify: {
-      debug: true,
-      transform: [['babelify', { presets: ['@babel/preset-env'], plugins: ['istanbul'] }]]
+    karmaTypescriptConfig: {
+      coverageOptions: {
+        exclude: /spec/
+      },
+      reports: {
+        lcov: 'coverage',
+      },
     },
-    reporters: ['spec', 'coverage-istanbul'],
-    coverageIstanbulReporter: {
-      reports: ['html', 'lcovonly', 'text-summary']
-    },
-    autoWatch: true,
+    reporters: ['spec', 'karma-typescript'],
     browsers: ['Chrome'],
-    singleRun: true,
-    browserNoActivityTimeout: 120000,
+    singleRun: true
   })
-};
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "start": "run-p serve-static watch",
     "serve-static": "static -p 8080 htdocs/",
     "lint": "jshint --reporter=node_modules/jshint-stylish src/ spec/",
-    "fmt": "prettier --write rollup.config.js src/*.js spec/*.js *.json",
+    "type": "tsc --noEmit",
+    "fmt": "prettier --write rollup.config.js karma.conf.js \"src/**/*.ts\" \"spec/**/*.ts\" *.json",
     "docs": "bundle exec middleman",
     "build": "run-s build:js build:css",
     "build:js": "run-s build:js:rollup build:js:uglify",
@@ -58,32 +59,28 @@
     "d3": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
-    "babel-plugin-istanbul": "^6.0.0",
-    "babelify": "^10.0.0",
-    "browserify": "^16.1.1",
+    "@types/d3": "^5.7.2",
+    "@types/jasmine": "^3.5.10",
     "clean-css-cli": "^4.1.11",
     "codecov": "^3.0.4",
     "gh-pages": "^2.0.0",
     "jasmine-core": "^2.3.4",
     "jshint": "^2.9.7",
     "jshint-stylish": "^2.1.0",
     "karma": "^4.4.1",
-    "karma-browserify": "^7.0.0",
     "karma-chrome-launcher": "^3.0.0",
-    "karma-coverage-istanbul-reporter": "^2.0.0",
     "karma-jasmine": "^1.1.0",
-    "karma-spec-reporter": "0.0.32",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-typescript": "^5.0.3",
     "node-static": "^0.7.9",
     "nodemon": "^2.0.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.19.1",
     "rollup": "^1.32.0",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-modify": "^3.0.0",
+    "rollup-plugin-typescript2": "^0.27.1",
     "sass": "^1.10.3",
     "status-back": "^1.1.0",
+    "typescript": "^3.9.5",
     "uglify-js": "^3.6.4",
     "watchify": "^3.11.1"
   },

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,48 +1,17 @@
-import babel from 'rollup-plugin-babel'
-import modify from 'rollup-plugin-modify'
+import typescript from 'rollup-plugin-typescript2'
 import pkg from './package.json'
 
 export default [
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: {
       file: 'htdocs/js/c3.js',
       name: 'c3',
       format: 'umd',
       banner: `/* @license C3.js v${pkg.version} | (c) C3 Team and other contributors | http://c3js.org/ */`,
-      globals: {
-        d3: 'd3'
-      }
+      globals: { d3: 'd3' }
     },
-    plugins: [
-      babel({
-        presets: [
-          [
-            '@babel/preset-env',
-            {
-              modules: false
-            }
-          ]
-        ]
-      })
-    ],
-    external: ['d3']
-  },
-  {
-    input: 'src/index.js',
-    output: {
-      file: 'htdocs/js/c3.esm.js',
-      name: 'c3',
-      format: 'es',
-      banner: `/* @license C3.js v${pkg.version} | (c) C3 Team and other contributors | http://c3js.org/ */`,
-      intro: `import * as d3 from 'd3';`
-    },
-    plugins: [
-      modify({
-        find: /\$\$\.d3 =.+?;/,
-        replace: '$$.d3 = d3;'
-      })
-    ],
+    plugins: [typescript()],
     external: ['d3']
   }
 ]
diff --git a/spec/api.axis-spec.js → spec/api.axis-spec.ts b/spec/api.axis-spec.js → spec/api.axis-spec.ts
@@ -1,10 +1,12 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api axis', function() {
   'use strict'
 
   var chart, args
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('axis.labels', function() {

diff --git a/spec/api.data-spec.js → spec/api.data-spec.ts b/spec/api.data-spec.js → spec/api.data-spec.ts
@@ -1,9 +1,11 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api data', function() {
   'use strict'
 
   var chart
 
-  var args = {
+  var args: any = {
     data: {
       columns: [
         ['data1', 30, 200, 100, 400, 150, 250],
@@ -30,8 +32,8 @@ describe('c3 api data', function() {
   }
 
   beforeEach(function(done) {
-    jasmine.addMatchers(customMatchers)
-    chart = window.initChart(chart, args, done)
+    jasmine.addMatchers(customMatchers as any)
+    chart = initChart(chart, args, done)
   })
 
   describe('data()', function() {
@@ -112,32 +114,32 @@ describe('c3 api data', function() {
   describe('data.colors()', function() {
     it('should return data.colors specified as argument', function() {
       var results = chart.data.colors()
-      expect(results.data1).toBeHexOrRGB('#FF0000')
-      expect(results.data2).toBeHexOrRGB('#00FF00')
+      ;(expect(results.data1) as any).toBeHexOrRGB('#FF0000')
+      ;(expect(results.data2) as any).toBeHexOrRGB('#00FF00')
     })
 
     it('should return data.colors specified as api', function() {
       var results = chart.data.colors({
         data1: '#00FF00',
         data2: '#FF0000'
       })
-      expect(results.data1).toBeHexOrRGB('#00FF00')
-      expect(results.data2).toBeHexOrRGB('#FF0000')
+      ;(expect(results.data1) as any).toBeHexOrRGB('#00FF00')
+      ;(expect(results.data2) as any).toBeHexOrRGB('#FF0000')
     })
 
     it('should set data.colors specified as api', function() {
-      expect(d3.select('.c3-line-data1').style('stroke')).toBeHexOrRGB(
-        '#00ff00'
-      )
-      expect(d3.select('.c3-line-data2').style('stroke')).toBeHexOrRGB(
-        '#ff0000'
-      )
-      expect(
+      ;(expect(
+        d3.select('.c3-line-data1').style('stroke')
+      ) as any).toBeHexOrRGB('#00ff00')
+      ;(expect(
+        d3.select('.c3-line-data2').style('stroke')
+      ) as any).toBeHexOrRGB('#ff0000')
+      ;(expect(
         d3.select('.c3-legend-item-data1 .c3-legend-item-tile').style('stroke')
-      ).toBeHexOrRGB('#00ff00')
-      expect(
+      ) as any).toBeHexOrRGB('#00ff00')
+      ;(expect(
         d3.select('.c3-legend-item-data2 .c3-legend-item-tile').style('stroke')
-      ).toBeHexOrRGB('#ff0000')
+      ) as any).toBeHexOrRGB('#ff0000')
     })
   })
 
@@ -177,7 +179,7 @@ describe('c3 api data', function() {
         }
       }
 
-      chart = window.initChart(chart, args, done)
+      chart = initChart(chart, args, done)
     })
 
     it('can toggle option', function(done) {
@@ -212,7 +214,7 @@ describe('c3 api data.x', function() {
   }
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   it('should return values for target data1', function() {
@@ -264,7 +266,7 @@ describe('c3 api data.xs', function() {
   }
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   it('should return values for target data1', function() {
@@ -317,7 +319,7 @@ var customMatchers = {
           expected = ''
         }
 
-        var result = {}
+        var result: any = {}
         actual = actual.match('rgb') ? rgb2hex(actual) : actual
         expected = expected.match('rgb') ? rgb2hex(expected) : expected
 

diff --git a/spec/api.donut-spec.js → spec/api.donut-spec.ts b/spec/api.donut-spec.js → spec/api.donut-spec.ts
@@ -1,3 +1,5 @@
+import { initChart } from './c3-helper'
+
 describe('c3 api donut', function() {
   'use strict'
 
@@ -17,7 +19,7 @@ describe('c3 api donut', function() {
   }
 
   beforeAll(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   it('can configure padAngle', function(done) {

diff --git a/spec/api.focus-spec.js → spec/api.focus-spec.ts b/spec/api.focus-spec.js → spec/api.focus-spec.ts
@@ -1,9 +1,11 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api focus', function() {
   'use strict'
 
   var chart
 
-  var args = {
+  var args: any = {
     data: {
       columns: [
         ['data1', 30, 200, 100, 400],
@@ -14,7 +16,7 @@ describe('c3 api focus', function() {
   }
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('focus', function() {

diff --git a/spec/api.grid-spec.js → spec/api.grid-spec.ts b/spec/api.grid-spec.js → spec/api.grid-spec.ts
@@ -1,10 +1,12 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api grid', function() {
   'use strict'
 
   var chart, args
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('ygrid.add and ygrid.remove', function() {

diff --git a/spec/api.load-spec.js → spec/api.load-spec.ts b/spec/api.load-spec.js → spec/api.load-spec.ts
@@ -1,10 +1,12 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api load', function() {
   'use strict'
 
   var chart, args
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('indexed data', function() {

diff --git a/spec/api.pie-spec.js → spec/api.pie-spec.ts b/spec/api.pie-spec.js → spec/api.pie-spec.ts
@@ -1,3 +1,5 @@
+import { initChart } from './c3-helper'
+
 describe('c3 api pie', function() {
   'use strict'
 
@@ -17,7 +19,7 @@ describe('c3 api pie', function() {
   }
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('padAngle', function() {

diff --git a/spec/api.region-spec.js → spec/api.region-spec.ts b/spec/api.region-spec.js → spec/api.region-spec.ts
@@ -1,10 +1,12 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api region', function() {
   'use strict'
 
   var chart, args
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('api.region', function() {

diff --git a/spec/api.x-spec.js → spec/api.x-spec.ts b/spec/api.x-spec.js → spec/api.x-spec.ts
@@ -1,3 +1,5 @@
+import { d3, initChart } from './c3-helper'
+
 describe('c3 api.x', function() {
   'use strict'
 
@@ -15,7 +17,7 @@ describe('c3 api.x', function() {
   }
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   it('should return initial ticks for axis x', function() {
@@ -67,7 +69,7 @@ describe('c3 api.xs', function() {
   }
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   it('should return initial ticks for axis x', function() {

diff --git a/spec/api.zoom-spec.js → spec/api.zoom-spec.ts b/spec/api.zoom-spec.js → spec/api.zoom-spec.ts
@@ -1,10 +1,12 @@
+import { initChart } from './c3-helper'
+
 describe('c3 api zoom', function() {
   'use strict'
 
   var chart, args
 
   beforeEach(function(done) {
-    chart = window.initChart(chart, args, done)
+    chart = initChart(chart, args, done)
   })
 
   describe('zoom', function() {