refactor: convert to typescript

Author: kurkle

.eslintignore

@@ -0,0 +1 @@
+dist/**/*

.eslintrc.yml

@@ -1,22 +1,36 @@
 extends:
   - chartjs
   - plugin:markdown/recommended
+  - plugin:@typescript-eslint/recommended
 
-env:
-  es2021: true
-  browser: true
-  node: true
+parser: "@typescript-eslint/parser"
 
 parserOptions:
+  ecmaVersion: 2022
   sourceType: module
-  ecmaFeatures:
-    impliedStrict: true
-    modules: true
 
-plugins: ['html']
+env:
+  es2022: true
+  browser: true
+  node: true
+  jasmine: true
+
+plugins:
+  - "@typescript-eslint"
+  - prettier
+  - html
 
 rules:
+  prettier/prettier: "error"
+  semi: ["error", "never"]
   complexity: ["warn", 10]
   max-statements: ["warn", 30]
   no-var: "warn"
   prefer-const: ["warn", {"destructuring": "all"}]
+  # turning off things conflicting with prettier
+  indent: "off"
+  comma-dangle: "off"
+  comma-spacing: "off"
+  comma-style: "off"
+  object-curly-spacing: "off"
+  space-before-function-paren: "off"

.github/workflows/ci.yml

@@ -28,6 +28,9 @@ jobs:
     - name: lint
       run: npm run lint
 
+    - name: typecheck
+      run: npm run typecheck
+
     - name: build
       run: npm run build
 
@@ -40,6 +43,15 @@ jobs:
         fi
       shell: bash
 
+    - name: Coveralls Paraller - Unit
+      if: matrix.os == 'ubuntu-latest'
+      uses: coverallsapp/github-action@v2
+      with:
+        github-token: ${{ secrets.github_token }}
+        file: './coverage/unit/lcov.info'
+        flag-name: unit
+        parallel: true
+
     - name: Coveralls Parallel - Chrome
       uses: coverallsapp/github-action@v2
       with:

.gitignore

@@ -1,4 +1,5 @@
 # Deployment
+/build
 /coverage
 /custom
 /dist

.prettierrc

@@ -0,0 +1,7 @@
+bracketSpacing: true
+singleQuote: true
+printWidth: 120
+semi: false
+tabWidth: 2
+useTabs: false
+trailingComma: 'es5'

.swcrc-spec

@@ -0,0 +1,18 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": false,
+      "decorators": true,
+      "dynamicImport": true,
+      "importMeta": true
+    },
+    "target": "es2022",
+    "baseUrl": "."
+  },
+  "module": {
+    "type": "es6",
+    "resolveFully": true
+  },
+  "sourceMaps": true
+}

docs/guide/developers.md

@@ -65,18 +65,18 @@ Returns whether the user is currently in the middle of a drag operation or pan o
 You can extend chartjs-plugin-zoom with support for [custom scales](https://www.chartjs.org/docs/latest/developers/axes.html) by using the zoom plugin's `zoomFunctions`, `zoomRectFunctions`, and `panFunctions` members. These objects are indexed by scale types (scales' `id` members) and give optional handlers for zoom and pan functionality.
 
 ```js
-import {Scale} from 'chart.js';
-import zoomPlugin from 'chartjs-plugin-zoom';
+import {Scale} from 'chart.js'
+import zoomPlugin from 'chartjs-plugin-zoom'
 
 class MyScale extends Scale {
   /* extensions ... */
 }
-MyScale.id = 'myScale';
-MyScale.defaults = defaultConfigObject;
+MyScale.id = 'myScale'
+MyScale.defaults = defaultConfigObject
 
-zoomPlugin.zoomFunctions.myScale = (scale, zoom, center, limits) => false;
-zoomPlugin.zoomRectFunctions.myScale = (scale, from, to, limits) => false;
-zoomPlugin.panFunctions.myScale = (scale, delta, limits) => false;
+zoomPlugin.zoomFunctions.myScale = (scale, zoom, center, limits) => false
+zoomPlugin.zoomRectFunctions.myScale = (scale, from, to, limits) => false
+zoomPlugin.panFunctions.myScale = (scale, delta, limits) => false
 // zoomRectFunctions can normally be omitted, since zooming by specific pixel
 // coordinates rarely needs special handling.
 ```

docs/guide/options.md

@@ -5,7 +5,7 @@ The options for chartjs-plugin-zoom should be placed in `options.plugins.zoom` i
 The options are split in three sub-objects, [limits](#limits), [pan](#pan) and [zoom](#zoom).
 
 ```js
-const chart = new Chart('id', {
+export const chart = new Chart('id', {
   type: 'bar',
   data: {},
   options: {
@@ -23,7 +23,7 @@ const chart = new Chart('id', {
       }
     }
   }
-});
+})
 ```
 
 ## Pan
@@ -122,7 +122,7 @@ Limits options define the limits per axis for pan and zoom.
 If you're using multiple or custom axes (scales), you can define limits for those, too.
 
 ```js
-const chart = new Chart('id', {
+export const chart = new Chart('id', {
   type: 'line',
   data: {},
   options: {
@@ -146,7 +146,7 @@ const chart = new Chart('id', {
       }
     }
   }
-});
+})
 ```
 
 #### Scale Limits

docs/guide/usage.md

@@ -31,18 +31,18 @@ const config = {
       }
     }
   }
-};
+}
 /* </block:config> */
 
 module.exports = {
   actions: [
     {
       name: 'Reset zoom',
       handler: function(chart) {
-        chart.resetZoom();
+        chart.resetZoom()
       }
     }
   ],
   config
-};
+}
 ```

docs/samples/api.md

@@ -2,7 +2,7 @@
 
 ```js chart-editor
 // <block:data:1>
-const NUMBER_CFG = {count: 20, min: -100, max: 100};
+const NUMBER_CFG = {count: 20, min: -100, max: 100}
 const data = {
   datasets: [{
     label: 'My First dataset',
@@ -21,7 +21,7 @@ const data = {
     pointBorderWidth: 1,
     data: Utils.points(NUMBER_CFG),
   }]
-};
+}
 // </block:data>
 
 // <block:scales:2>
@@ -38,16 +38,16 @@ const scaleOpts = {
     display: true,
     text: (ctx) => ctx.scale.axis + ' axis',
   }
-};
+}
 const scales = {
   x: {
     position: 'top',
   },
   y: {
     position: 'right',
   },
-};
-Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
+}
+Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts))
 // </block:scales>
 
 // <block:config:1>
@@ -57,7 +57,7 @@ const config = {
   options: {
     scales: scales,
   }
-};
+}
 // </block:config>
 
 // <block:actions:0>
@@ -66,50 +66,50 @@ const actions = [
   {
     name: 'Zoom +10%',
     handler(chart) {
-      chart.zoom(1.1);
+      chart.zoom(1.1)
     }
   }, {
     name: 'Zoom -10%',
     handler(chart) {
-      chart.zoom(2 - 1 / 0.9);
+      chart.zoom(2 - 1 / 0.9)
     },
   }, {
     name: 'Zoom x +10%',
     handler(chart) {
-      chart.zoom({x: 1.1});
+      chart.zoom({x: 1.1})
     }
   }, {
     name: 'Zoom x -10%',
     handler(chart) {
-      chart.zoom({x: 2 - 1 / 0.9});
+      chart.zoom({x: 2 - 1 / 0.9})
     },
   }, {
     name: 'Pan x 100px (anim)',
     handler(chart) {
-      chart.pan({x: 100}, undefined, 'default');
+      chart.pan({x: 100}, undefined, 'default')
     }
   }, {
     name: 'Pan x -100px (anim)',
     handler(chart) {
-      chart.pan({x: -100}, undefined, 'default');
+      chart.pan({x: -100}, undefined, 'default')
     },
   }, {
     name: 'Zoom x: 0..-100, y: 0..100',
     handler(chart) {
-      chart.zoomScale('x', {min: -100, max: 0}, 'default');
-      chart.zoomScale('y', {min: 0, max: 100}, 'default');
+      chart.zoomScale('x', {min: -100, max: 0}, 'default')
+      chart.zoomScale('y', {min: 0, max: 100}, 'default')
     }
   }, {
     name: 'Reset zoom',
     handler(chart) {
-      chart.resetZoom();
+      chart.resetZoom()
     }
   }
-];
+]
 // </block:actions>
 
 module.exports = {
   actions,
   config
-};
+}
 ```