refactor: convert to typescript (#907)

* refactor: convert to typescript

* fix: windows lint

* fix: docs-build (= remove typedoc)

* fix: try to fix windows test

* fix: one more fix for windows

* chore: tuning

* fix: removing comments

* chore: use -Infinity/Infinity

* chore: fix issues

* fix: tests

* fix: reduce complexity

* fix: api documentation

* fix: linting issues, license year

.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,8 @@
+bracketSpacing: true
+singleQuote: true
+printWidth: 120
+semi: false
+tabWidth: 2
+useTabs: false
+trailingComma: 'es5'
+endOfLine: 'auto'

.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
+}

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-2021 chartjs-plugin-zoom contributors
+Copyright (c) 2013-2024 chartjs-plugin-zoom contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

docs/.vuepress/config.js → docs/.vuepress/config.ts

@@ -1,8 +1,10 @@
-const path = require('path');
+import * as path from 'path';
+import { DefaultThemeConfig, defineConfig, PluginTuple } from 'vuepress/config';
+
 const docsVersion = "VERSION";
 const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-zoom/master/' : `/chartjs-plugin-zoom/${docsVersion}/`;
 
-module.exports = {
+export default defineConfig({
   title: 'chartjs-plugin-zoom',
   description: 'A zoom and pan plugin for Chart.js >= 3.0.0',
   theme: 'chartjs',
@@ -22,7 +24,7 @@ module.exports = {
     [
       'vuepress-plugin-typedoc',
       {
-        entryPoints: ['../../types/index.d.ts'],
+        entryPoints: ['../../src/index.ts'],
         hideInPageTOC: true,
         tsconfig: 'tsconfig.json',
         sidebar: {
@@ -34,7 +36,7 @@ module.exports = {
     ['@simonbrunel/vuepress-plugin-versions', {
       filters: {
         suffix: (tag) => tag ? ` (${tag})` : '',
-        title: (v, vars) => window.location.href.includes('master') ? 'Development (master)' : v + (vars.tag ? ` (${tag})` : ''),
+        title: (v, vars) => window.location.href.includes('master') ? 'Development (master)' : v + (vars.tag ? ` (${vars.tag})` : ''),
       },
       menu: {
         text: '{{version|title}}',
@@ -72,7 +74,7 @@ module.exports = {
         ]
       },
     }],
-  ],
+  ] as PluginTuple[],
   chainWebpack: (config) => {
     config.module
       .rule('chart.js')
@@ -163,6 +165,6 @@ module.exports = {
         'fetch-data',
         'api',
       ],
-    }
-  }
-};
+    } as any
+  } as DefaultThemeConfig
+});

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
-};
+}
 ```