fix: resolve conflicting packages; address linting issues; resolve "@…

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'space-before-function-paren': 0,
-    'no-unused-vars': ['warn', { varsIgnorePattern: '^_' }],
+    'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '^_' }],
     'vue/multi-word-component-names': 0
   }

package.json

@@ -35,18 +35,19 @@
     "@types/ramda": "^0.27.60",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
-    "@vue/babel-preset-app": "^4.5.15",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
+    "@vue/babel-preset-app": "^5.0.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "^3.2.26",
     "core-js": "^3.19.3",
     "cross-env": "^7.0.3",
     "eslint": "^8.4.1",
-    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^8.2.0",
     "minimist": "^1.2.5",
     "postcss": "^8.4.4",
@@ -55,6 +56,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-vue": "^6.0.0",
+    "tsc-alias": "^1.6.11",
     "typescript": "^4.5.3",
     "vue-router": "^4.0.11"
   },

rollup.config.js

@@ -1,16 +1,35 @@
+import alias from '@rollup/plugin-alias'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import { exec } from 'child_process'
 import path from 'path'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
 import typescript from 'rollup-plugin-typescript2'
 import vue from 'rollup-plugin-vue'
-import alias from '@rollup/plugin-alias'
-import postcss from 'rollup-plugin-postcss'
 
 import packageJson from './package.json'
 
 const projectRoot = path.resolve(__dirname, '.')
 
+// see https://github.com/ezolenko/rollup-plugin-typescript2/issues/201
+const tscAlias = () => {
+  return {
+    name: 'tsAlias',
+    writeBundle: () => {
+      return new Promise((resolve, reject) => {
+        exec('tsc-alias', function callback(error, stdout, stderr) {
+          if (stderr || error) {
+            reject(stderr || error)
+          } else {
+            resolve(stdout)
+          }
+        })
+      })
+    }
+  }
+}
+
 export default {
   input: 'src/index.ts',
   output: [
@@ -39,6 +58,7 @@ export default {
     typescript(),
     vue(),
     postcss({ include: /(?<!&module=.*)\.css$/ }),
-    commonjs()
+    commonjs(),
+    tscAlias()
   ]
 }

src/components/Area/index.vue

@@ -86,15 +86,15 @@ export default defineComponent({
           .y0(p => p.y)
           .y1(p => p.y)
           .x0(p => p.x)
-          .x1(_ => secondary.scale(0))
+          .x1(() => secondary.scale(0))
       }
 
       return area<any>()
         .curve(lineType(props.type))
         .x0(p => p.x)
         .x1(p => p.x)
         .y0(p => p.y)
-        .y1(_ => secondary.scale(0))
+        .y1(() => secondary.scale(0))
     }
 
     const getStyle = computed(() => {

src/components/Group/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <slot />
+  <div>
+    <slot />
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent, provide } from 'vue'

src/components/HoverBar/index.vue

@@ -52,7 +52,7 @@ export default defineComponent({
             bar.value = {
               x: x - width / 2,
               y: 0,
-              width: width,
+              width,
               height: canvas.value.height
             }
           } else {

src/components/Labels/index.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watch, ref, onMounted, inject } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { is } from 'ramda'
-import { useChart, usePoints } from '@/hooks'
+import { usePoints } from '@/hooks'
 import Layer from '../Layer/index.vue'
 import { kebabize, mapKeys } from '@/utils'
 
@@ -26,7 +26,6 @@ export default defineComponent({
   },
   setup(props) {
     const toKebabCase = (data: any) => mapKeys(kebabize, data)
-    const chart = useChart()
     const { points } = usePoints(props.dataKeys, { stacked: false, type: 'custom' })
 
     const getStyle = computed(() => {

src/components/Treemap/index.vue

@@ -45,15 +45,15 @@ export default defineComponent({
     },
     margin: {
       type: Object as () => Margin,
-      default: { top: 0, right: 0, bottom: 0, left: 0 }
+      default: () => ({ top: 0, right: 0, bottom: 0, left: 0 })
     },
     padding: {
       type: Number,
       default: 8
     },
     data: {
       type: Array as () => any[],
-      default: []
+      default: () => ([])
     },
     dataKeys: {
       type: Object as () => [string, string],

src/models/Scale.ts

@@ -93,11 +93,13 @@ export default class Scale {
     const valueMin: number = min(stackedData, (arr) => min(arr, (x) => min(x))) || 0
 
     const [dataMin, dataMax] = extent(Array.from(new Set(values.concat([valueMin, valueMax]))))
+    // eslint-disable-next-line no-eval
     const yMin = eval(`
       let dataMin = ${dataMin || 0}
       ${domain[0]}
     `)
 
+    // eslint-disable-next-line no-eval
     const yMax = eval(`
       let dataMax = ${dataMax || 0}
       ${domain[1]}

tsconfig.json

@@ -5,6 +5,7 @@
     "strict": true,
     "declaration": true,
     "declarationDir": "dist/types",
+    "outDir": "dist",
     "noUnusedLocals": false,
     "noUnusedParameters": true,
     "importHelpers": true,