feat: upgrade Chart.js to v4

.eslintrc.js → .eslintrc.cjs

@@ -31,5 +31,5 @@ module.exports = {
       }
     }
   ],
-  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'rollup.config.mjs']
+  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'rollup.config.js']
 }

.size-limit.json

@@ -1,15 +1,4 @@
 [
-  {
-    "path": "dist/index.cjs",
-    "limit": "1.75 KB",
-    "webpack": false,
-    "running": false
-  },
-  {
-    "path": "dist/index.cjs",
-    "limit": "1 KB",
-    "import": "{ Bar }"
-  },
   {
     "path": "dist/index.js",
     "limit": "1.7 KB",

.storybook/manager.js

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons'
 
-import { theme } from './theme'
+import { theme } from './theme.js'
 
 addons.setConfig({
   theme,

.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package.json

@@ -1,5 +1,6 @@
 {
   "name": "vue-chartjs",
+  "type": "module",
   "version": "4.1.2",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <jakub@posteo.de>",
@@ -37,11 +38,13 @@
     "Charts"
   ],
   "sideEffects": false,
-  "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
+  "exports": "./src/index.ts",
   "publishConfig": {
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.js",
+    "exports": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
     "directory": "package"
   },
   "files": [
@@ -68,7 +71,7 @@
     "updateGitHooks": "simple-git-hooks"
   },
   "peerDependencies": {
-    "chart.js": "^3.7.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.0.0-0 || ^2.6.0"
   },
   "devDependencies": {

rollup.config.js

@@ -0,0 +1,32 @@
+import { swc } from 'rollup-plugin-swc3'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import pkg from './package.json' assert { type: 'json' }
+
+const extensions = ['.js', '.ts']
+const external = _ => /node_modules/.test(_) && !/@swc\/helpers/.test(_)
+const plugins = targets => [
+  nodeResolve({
+    extensions
+  }),
+  swc({
+    tsconfig: false,
+    env: {
+      targets
+    },
+    module: {
+      type: 'es6'
+    },
+    sourceMaps: true
+  })
+]
+
+export default {
+  input: pkg.exports,
+  plugins: plugins('defaults and supports es6-module'),
+  external,
+  output: {
+    format: 'es',
+    file: pkg.publishConfig.exports.import,
+    sourcemap: true
+  }
+}

sandboxes/bar/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/bar/src/App.vue

@@ -13,7 +13,7 @@ import {
   LinearScale
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 

sandboxes/bubble/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/bubble/src/App.vue

@@ -11,7 +11,7 @@ import {
   LinearScale
 } from 'chart.js'
 import { Bubble } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(LinearScale, PointElement, Tooltip, Legend)
 

sandboxes/custom/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/custom/src/App.vue

@@ -13,8 +13,8 @@ import {
   Tooltip,
   Legend
 } from 'chart.js'
-import LineWithLineChart from './components/LineWithLineChart'
-import * as chartConfig from './chartConfig'
+import LineWithLineChart from './components/LineWithLineChart.js'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(
   CategoryScale,

sandboxes/doughnut/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/doughnut/src/App.vue

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import { Doughnut } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(ArcElement, Tooltip, Legend)
 

sandboxes/line/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/line/src/App.vue

@@ -14,7 +14,7 @@ import {
   Legend
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(
   CategoryScale,

sandboxes/pie/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/pie/src/App.vue

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
 import { Pie } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(ArcElement, Tooltip, Legend)
 

sandboxes/polar-area/src/App.vue

@@ -11,7 +11,7 @@ import {
   Legend
 } from 'chart.js'
 import { PolarArea } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend)
 

sandboxes/radar/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/radar/src/App.vue

@@ -13,7 +13,7 @@ import {
   Legend
 } from 'chart.js'
 import { Radar } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(
   RadialLinearScale,

sandboxes/reactive/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/reactive/src/App.vue

@@ -15,7 +15,7 @@ import {
   ChartData
 } from 'chart.js'
 import { Bar } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 

sandboxes/scatter/package.json

@@ -1,11 +1,12 @@
 {
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "dependencies": {
-    "chart.js": "^3.8.0",
+    "chart.js": "^4.0.0",
     "vue": "^3.2.31",
-    "vue-chartjs": "^4.0.0"
+    "vue-chartjs": "^5.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

sandboxes/scatter/src/App.vue

@@ -12,7 +12,7 @@ import {
   Legend
 } from 'chart.js'
 import { Scatter } from 'vue-chartjs'
-import * as chartConfig from './chartConfig'
+import * as chartConfig from './chartConfig.js'
 
 ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
 

src/chart.ts

@@ -9,15 +9,16 @@ import {
   toRaw
 } from 'vue'
 import { Chart as ChartJS } from 'chart.js'
-import { Props } from './props'
+import type { ChartComponent } from './types.js'
+import { Props } from './props.js'
 import {
   cloneData,
   setLabels,
   setDatasets,
   setOptions,
   toRawIfProxy,
   cloneProxy
-} from './utils'
+} from './utils.js'
 
 export const Chart = defineComponent({
   props: Props,
@@ -113,4 +114,4 @@ export const Chart = defineComponent({
       })
     }
   }
-})
+}) as ChartComponent