feat: base Chart component

.size-limit.json

@@ -1,24 +1,24 @@
 [
   {
     "path": "dist/index.cjs",
-    "limit": "2.3 KB",
+    "limit": "1.75 KB",
     "webpack": false,
     "running": false
   },
   {
     "path": "dist/index.cjs",
-    "limit": "60 KB",
+    "limit": "1 KB",
     "import": "{ Bar }"
   },
   {
     "path": "dist/index.js",
-    "limit": "2.25 KB",
+    "limit": "1.7 KB",
     "webpack": false,
     "running": false
   },
   {
     "path": "dist/index.js",
-    "limit": "8.5 KB",
+    "limit": "1 KB",
     "import": "{ Bar }"
   }
 ]

rollup.config.mjs

@@ -1,12 +1,10 @@
-import vue from '@vitejs/plugin-vue'
 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, vueOptions = {}) => [
-  vue(vueOptions),
+const plugins = (targets) => [
   nodeResolve({
     extensions
   }),
@@ -25,11 +23,7 @@ const plugins = (targets, vueOptions = {}) => [
 export default [
   {
     input: pkg.main,
-    plugins: plugins('defaults, not ie 11, not ie_mob 11', {
-      template: {
-        optimizeSSR: true
-      }
-    }),
+    plugins: plugins('defaults, not ie 11, not ie_mob 11'),
     external,
     output: {
       format: 'cjs',

sandboxes/reactive/src/App.vue

@@ -26,7 +26,7 @@ const data = ref<ChartData<'bar'>>({
 
 onMounted(() => {
   setInterval(() => {
-    data.value = { ...chartConfig.data }
+    data.value = chartConfig.randomData()
   }, 3000)
 })
 </script>

sandboxes/reactive/src/chartConfig.ts

@@ -2,7 +2,7 @@ function getRandomInt() {
   return Math.floor(Math.random() * (50 - 5 + 1)) + 5
 }
 
-export const data = {
+export const randomData = () => ({
   labels: [
     'January' + getRandomInt(),
     'February',
@@ -37,7 +37,7 @@ export const data = {
       ]
     }
   ]
-}
+})
 
 export const options = {
   responsive: true,