chore: convert to typescript (#156)

* chore: convert to typescript

* fix: restore default label color

* fix: restore border test threshold

* fix: update linting, change type to module, etc

Author: kurkle

.eslintignore

@@ -18,6 +18,12 @@ jobs:
       - name: install
         run: npm ci
 
+      - name: lint
+        run: npm run lint
+
+      - name: typecheck
+        run: npm run typecheck
+
       - name: build
         run: npm run build
 

.eslintrc.yml

@@ -37,7 +37,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           cache: npm
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - name: Setup and build
         run: |
@@ -51,11 +51,11 @@ jobs:
           VERSION: ${{ needs.setup.outputs.version }}
       - name: Publish @next
         run: npm publish --access=public --tag next
-        if: "github.event.release.prerelease"
+        if: github.event.release.prerelease == true
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
       - name: Publish @latest
         run: npm publish --access=public --tag latest
-        if: "!github.event.release.prerelease"
+        if: github.event.release.prerelease == false
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/ci.yml

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

.github/workflows/npmpublish.yml

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Jukka Kurkela
+Copyright (c) 2019-2024 Jukka Kurkela
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.prettierrc

@@ -0,0 +1,120 @@
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
+import markdown from '@eslint/markdown'
+import tsParser from '@typescript-eslint/parser'
+import prettier from 'eslint-plugin-prettier'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import unusedImports from 'eslint-plugin-unused-imports'
+import globals from 'globals'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  {
+    ignores: ['**/*\\{.,-}min.js', 'dist/**/*'],
+  },
+  ...compat.extends('chartjs', 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'),
+  {
+    plugins: {
+      'unused-imports': unusedImports,
+      'simple-import-sort': simpleImportSort,
+      prettier,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jasmine,
+      },
+
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      parser: tsParser,
+    },
+
+    rules: {
+      'prettier/prettier': 'error',
+      'class-methods-use-this': 'off',
+      complexity: ['warn', 10],
+      'max-statements': ['warn', 30],
+      'no-empty-function': 'off',
+      semi: ['error', 'never'],
+      quotes: [
+        'error',
+        'single',
+        {
+          avoidEscape: true,
+          allowTemplateLiterals: true,
+        },
+      ],
+      'comma-spacing': [
+        'error',
+        {
+          before: false,
+          after: true,
+        },
+      ],
+
+      'no-use-before-define': [
+        'error',
+        {
+          functions: false,
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/indent': 'off',
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [
+            ['^@?\\w.*\\u0000$', '^[^.].*\\u0000$', '^\\..*\\u0000$'],
+            ['^react', '^@?\\w'],
+            ['^(@|components)(/.*|$)'],
+            ['^\\u0000'],
+            ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+            ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+            ['^.+\\.?(css)$'],
+          ],
+        },
+      ],
+
+      'unused-imports/no-unused-imports': 'error',
+    },
+  },
+  {
+    files: ['src/**/*.ts', '**/*.js', '**/*.mjs'],
+  },
+  {
+    files: ['**/*.md'],
+    language: 'markdown/commonmark',
+    plugins: {
+      markdown,
+    },
+    rules: {
+      'no-irregular-whitespace': 'off',
+    },
+  },
+  {
+    files: ['types/**/*.ts'],
+    rules: {
+      'no-use-before-define': 'warn',
+    },
+  },
+  {
+    files: ['**/*.cjs'],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+]

LICENSE

@@ -1,16 +1,15 @@
-const istanbul = require('rollup-plugin-istanbul');
-const resolve = require('@rollup/plugin-node-resolve').default;
-const builds = require('./rollup.config');
-const env = process.env.NODE_ENV;
+const istanbul = require('rollup-plugin-istanbul')
 
-module.exports = function(karma) {
-  const build = builds[0];
+const env = process.env.NODE_ENV
+
+module.exports = async function (karma) {
+  const builds = (await import('./rollup.config.js')).default
+
+  const build = builds[0]
+  const buildPlugins = [...build.plugins]
 
   if (env === 'test') {
-    build.plugins = [
-      resolve(),
-      istanbul({exclude: ['node_modules/**/*.js', 'package.json']})
-    ];
+    build.plugins.push(istanbul({ exclude: ['node_modules/**/*.js', 'package.json'] }))
   }
 
   karma.set({
@@ -20,12 +19,12 @@ module.exports = function(karma) {
     logLevel: karma.LOG_WARN,
 
     files: [
-      {pattern: './test/fixtures/**/*.js', included: false},
-      {pattern: './test/fixtures/**/*.png', included: false},
+      { pattern: './test/fixtures/**/*.js', included: false },
+      { pattern: './test/fixtures/**/*.png', included: false },
       'node_modules/chart.js/dist/chart.umd.js',
       'test/index.js',
-      'src/index.js',
-      'test/specs/**/*.js'
+      { pattern: 'src/index.ts', type: 'js' },
+      { pattern: 'test/specs/**/*.js', type: 'js' },
     ],
 
     customLaunchers: {
@@ -34,38 +33,34 @@ module.exports = function(karma) {
         flags: [
           '--disable-background-timer-throttling',
           '--disable-backgrounding-occluded-windows',
-          '--disable-renderer-backgrounding'
-        ]
+          '--disable-renderer-backgrounding',
+        ],
       },
       firefox: {
         base: 'Firefox',
         prefs: {
-          'layers.acceleration.disabled': true
-        }
-      }
+          'layers.acceleration.disabled': true,
+        },
+      },
     },
 
     preprocessors: {
       'test/fixtures/**/*.js': ['fixtures'],
       'test/specs/**/*.js': ['rollup'],
       'test/index.js': ['rollup'],
-      'src/index.js': ['sources']
+      'src/index.ts': ['sources'],
     },
 
     rollupPreprocessor: {
-      plugins: [
-        resolve(),
-      ],
-      external: [
-        'chart.js'
-      ],
+      plugins: buildPlugins,
+      external: ['chart.js'],
       output: {
         format: 'umd',
         sourcemap: karma.autoWatch ? 'inline' : false,
         globals: {
-          'chart.js': 'Chart'
-        }
-      }
+          'chart.js': 'Chart',
+        },
+      },
     },
 
     customPreprocessors: {
@@ -74,25 +69,25 @@ module.exports = function(karma) {
         options: {
           output: {
             format: 'iife',
-            name: 'fixture'
-          }
-        }
+            name: 'fixture',
+          },
+        },
       },
       sources: {
         base: 'rollup',
-        options: build
-      }
-    }
-  });
+        options: build,
+      },
+    },
+  })
 
   if (env === 'test') {
-    karma.reporters.push('coverage');
+    karma.reporters.push('coverage')
     karma.coverageReporter = {
       dir: 'coverage/',
       reporters: [
-        {type: 'html', subdir: 'html'},
-        {type: 'lcovonly', subdir: (browser) => browser.toLowerCase().split(/[ /-]/)[0]}
-      ]
-    };
+        { type: 'html', subdir: 'html' },
+        { type: 'lcovonly', subdir: (browser) => browser.toLowerCase().split(/[ /-]/)[0] },
+      ],
+    }
   }
-};
+}