feat: upgrade Chart.js to v4 (#960)

Chart.js v4 support BREAKING CHANGE: package now is ESM-only, no CommonJS support
apertureless · Dec 5, 2022 · 7fd4ae4 · 7fd4ae4
1 parent 5ab27bc
commit 7fd4ae4
Show file tree

Hide file tree

Showing 51 changed files with 139 additions and 144 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -31,5 +31,5 @@ module.exports = {
       }
     }
   ],
-  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'rollup.config.mjs']
+  ignorePatterns: ['dist/**/*', 'node_modules/**/*', 'rollup.config.js']
 }
diff --git a/.size-limit.json b/.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",

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,6 +1,6 @@
 import { addons } from '@storybook/addons'
 
-import { theme } from './theme'
+import { theme } from './theme.js'
 
 addons.setConfig({
   theme,

diff --git a/.storybook/package.json b/.storybook/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/package.json b/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": {

diff --git a/rollup.config.js b/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
+  }
+}
diff --git a/rollup.config.mjs b/rollup.config.mjs
diff --git a/sandboxes/bar/package.json b/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",

diff --git a/sandboxes/bar/src/App.vue b/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)
 

diff --git a/sandboxes/bubble/package.json b/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",

diff --git a/sandboxes/bubble/src/App.vue b/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)
 

diff --git a/sandboxes/custom/package.json b/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",

diff --git a/sandboxes/custom/src/App.vue b/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,

diff --git a/sandboxes/doughnut/package.json b/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",

diff --git a/sandboxes/doughnut/src/App.vue b/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)
 

diff --git a/sandboxes/line/package.json b/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",

diff --git a/sandboxes/line/src/App.vue b/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,

diff --git a/sandboxes/pie/package.json b/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",

diff --git a/sandboxes/pie/src/App.vue b/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)
 

diff --git a/sandboxes/polar-area/src/App.vue b/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)
 

diff --git a/sandboxes/radar/package.json b/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",

diff --git a/sandboxes/radar/src/App.vue b/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,

diff --git a/sandboxes/reactive/package.json b/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",

diff --git a/sandboxes/reactive/src/App.vue b/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)
 

diff --git a/sandboxes/scatter/package.json b/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",

diff --git a/sandboxes/scatter/src/App.vue b/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)
 

diff --git a/src/chart.ts b/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