Typescript update (#27)

* Refactor to typescript
* Upgraded dev dependencies
* Remove pnpm from action
* Update version

.github/workflows/run-tests.yml

@@ -15,24 +15,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
 
       - name: Install
-        run: pnpm install
+        run: npm install --legacy-peer-deps
 
       - name: Run tests
-        run: pnpm test
+        run: npm test
 
       - name: Upload coverage to Coveralls
-        run: cat ./coverage/lcov.info | pnpm coveralls
+        run: cat ./coverage/lcov.info | npx coveralls
         env:
           COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}

dist/index.d.ts

@@ -0,0 +1,55 @@
+import { AnyObject } from 'chart.js/dist/types/basic';
+import { Chart } from 'chart.js';
+import { ChartData } from 'chart.js/dist/types';
+import { ChartOptions } from 'chart.js/dist/types';
+import { ChartType } from 'chart.js/dist/types';
+import { ChartTypeRegistry } from 'chart.js';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { CoreChartOptions } from 'chart.js';
+import { DatasetChartOptions } from 'chart.js';
+import { _DeepPartialObject } from 'chart.js/dist/types/utils';
+import { DefineComponent } from 'vue';
+import { ElementChartOptions } from 'chart.js';
+import { Plugin as Plugin_2 } from 'chart.js';
+import { PluginChartOptions } from 'chart.js';
+import { PublicProps } from 'vue';
+import { ScaleChartOptions } from 'chart.js';
+
+declare type __VLS_Props = {
+    type: ChartType;
+    height?: number;
+    width?: number;
+    data: ChartData;
+    options?: ChartOptions;
+    plugins?: Plugin_2[];
+};
+
+declare const _default: DefineComponent<__VLS_Props, {
+chartJSState: {
+chart: Chart | null;
+plugins: Plugin_2<keyof ChartTypeRegistry, AnyObject>[];
+props: {
+type: ChartType;
+height: number;
+width: number;
+data: ChartData;
+options: _DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<keyof ChartTypeRegistry> & DatasetChartOptions<keyof ChartTypeRegistry> & ScaleChartOptions<keyof ChartTypeRegistry>>;
+plugins: Plugin_2<keyof ChartTypeRegistry, AnyObject>[];
+};
+};
+render: () => void;
+destroy: () => void;
+update: (mode?: UpdateMode) => void;
+resize: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+plugins: Plugin_2[];
+options: ChartOptions;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+chartRef: HTMLCanvasElement;
+}, HTMLCanvasElement>;
+export default _default;
+
+declare type UpdateMode = 'resize' | 'reset' | 'default' | 'none' | 'hide' | 'show' | 'active';
+
+export { }

dist/types/Vue3ChartJs.vue.d.ts

@@ -0,0 +1,36 @@
+import { Chart, Plugin } from 'chart.js';
+import { ChartType, ChartData, ChartOptions } from 'chart.js/dist/types';
+type UpdateMode = 'resize' | 'reset' | 'default' | 'none' | 'hide' | 'show' | 'active';
+type __VLS_Props = {
+    type: ChartType;
+    height?: number;
+    width?: number;
+    data: ChartData;
+    options?: ChartOptions;
+    plugins?: Plugin[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    chartJSState: {
+        chart: Chart | null;
+        plugins: Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[];
+        props: {
+            type: ChartType;
+            height: number;
+            width: number;
+            data: ChartData;
+            options: import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").CoreChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ElementChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").PluginChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").DatasetChartOptions<keyof import("chart.js").ChartTypeRegistry> & import("chart.js").ScaleChartOptions<keyof import("chart.js").ChartTypeRegistry>>;
+            plugins: Plugin<keyof import("chart.js").ChartTypeRegistry, import("chart.js/dist/types/basic").AnyObject>[];
+        };
+    };
+    render: () => void;
+    destroy: () => void;
+    update: (mode?: UpdateMode) => void;
+    resize: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    plugins: Plugin[];
+    options: ChartOptions;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    chartRef: HTMLCanvasElement;
+}, HTMLCanvasElement>;
+export default _default;
+//# sourceMappingURL=Vue3ChartJs.vue.d.ts.map

dist/types/includes.d.ts

@@ -0,0 +1,15 @@
+import { Ref, VNodeRef, EmitFn } from 'vue';
+declare const chartJsEventNames: string[];
+interface EventObject {
+    type: string;
+    chartRef?: Ref<VNodeRef | null>;
+    preventDefault: () => void;
+    isDefaultPrevented: () => boolean;
+    _defaultPrevented: boolean;
+}
+declare function generateEventObject(type: string, chartRef?: Ref<VNodeRef | null>): EventObject;
+declare function generateChartJsEventListener(emit: EmitFn, event: EventObject): {
+    [x: string]: () => boolean;
+};
+export { chartJsEventNames, generateEventObject, generateChartJsEventListener, };
+//# sourceMappingURL=includes.d.ts.map

dist/types/main.d.ts

@@ -0,0 +1,3 @@
+import Vue3ChartJs from './Vue3ChartJs.vue';
+export default Vue3ChartJs;
+//# sourceMappingURL=main.d.ts.map

dist/vue3-chartjs.es.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, onMounted, h } from "vue";
-import { registerables, Chart } from "chart.js";
-const chartJsEventNames = [
+import { defineComponent as m, ref as v, onMounted as w, createElementBlock as y, openBlock as E } from "vue";
+import { registerables as p, Chart as i } from "chart.js";
+const c = [
   "install",
   "uninstall",
   "beforeInit",
@@ -38,128 +38,84 @@ const chartJsEventNames = [
   "beforeEvent",
   "afterEvent"
 ];
-function generateEventObject(type, chartRef = null) {
+function P(r, t) {
   return {
-    type,
-    chartRef,
+    type: r,
+    chartRef: t,
     preventDefault() {
-      this._defaultPrevented = true;
+      this._defaultPrevented = !0;
     },
     isDefaultPrevented() {
       return !this._defaultPrevented;
     },
-    _defaultPrevented: false
+    _defaultPrevented: !1
   };
 }
-function generateChartJsEventListener(emit, event) {
+function _(r, t) {
   return {
-    [event.type]: () => {
-      emit(event.type, event);
-      return event.isDefaultPrevented();
-    }
+    [t.type]: () => (r(t.type, t), t.isDefaultPrevented())
   };
 }
-if (registerables !== void 0) {
-  Chart.register(...registerables);
-}
-const Vue3ChartJs = defineComponent({
-  name: "Vue3ChartJs",
+const J = ["height", "width"], s = /* @__PURE__ */ m({
+  __name: "Vue3ChartJs",
   props: {
-    type: {
-      type: String,
-      required: true
-    },
-    height: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    width: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    data: {
-      type: Object,
-      required: true
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    plugins: {
-      type: Array,
-      default: () => []
-    }
+    type: {},
+    height: {},
+    width: {},
+    data: {},
+    options: { default: () => ({}) },
+    plugins: { default: () => [] }
   },
-  emits: chartJsEventNames,
-  setup(props, { emit }) {
-    const chartRef = ref(null);
-    const chartJsEventsPlugin = chartJsEventNames.reduce((reduced, eventType) => {
-      const event = generateEventObject(eventType, chartRef);
-      return { ...reduced, ...generateChartJsEventListener(emit, event) };
-    }, { id: "Vue3ChartJsEventHookPlugin" });
-    const chartJSState = {
+  emits: c,
+  setup(r, { expose: t, emit: n }) {
+    p !== void 0 && i.register(...p);
+    const f = r, d = n, o = v(null), e = {
       chart: null,
       plugins: [
-        chartJsEventsPlugin,
-        ...props.plugins
+        c.reduce((a, u) => {
+          const b = P(u, o);
+          return { ...a, ..._(d, b) };
+        }, { id: "Vue3ChartJsEventHookPlugin" }),
+        ...f.plugins ?? []
       ],
-      props: { ...props }
-    };
-    const destroy = () => {
-      if (chartJSState.chart) {
-        chartJSState.chart.destroy();
-        chartJSState.chart = null;
-      }
+      props: { ...f }
+    }, h = () => {
+      e.chart && (e.chart.destroy(), e.chart = null);
+    }, g = (a = "default") => {
+      e.chart && (e.chart.data = { ...e.chart.data, ...e.props.data }, e.chart.options = { ...e.chart.options, ...e.props.options }, e.chart.update(a));
+    }, D = () => {
+      e.chart && e.chart.resize();
+    }, l = () => {
+      if (e.chart)
+        return e.chart.update();
+      e.chart = new i(o.value.getContext("2d"), {
+        type: e.props.type,
+        data: e.props.data,
+        options: e.props.options,
+        plugins: e.plugins
+      });
     };
-    const update = (animateSpeed = 750) => {
-      chartJSState.chart.data = { ...chartJSState.chart.data, ...chartJSState.props.data };
-      chartJSState.chart.options = { ...chartJSState.chart.options, ...chartJSState.props.options };
-      chartJSState.chart.update(animateSpeed);
-    };
-    const resize = () => chartJSState.chart && chartJSState.chart.resize();
-    const render = () => {
-      if (chartJSState.chart) {
-        return chartJSState.chart.update();
-      }
-      return chartJSState.chart = new Chart(
-        chartRef.value.getContext("2d"),
-        {
-          type: chartJSState.props.type,
-          data: chartJSState.props.data,
-          options: chartJSState.props.options,
-          plugins: chartJSState.plugins
-        }
-      );
-    };
-    onMounted(() => render());
-    return {
-      chartJSState,
-      chartRef,
-      render,
-      resize,
-      update,
-      destroy
-    };
-  },
-  render(props) {
-    return h("canvas", {
-      ref: "chartRef",
-      height: props.height,
-      width: props.width
-    });
+    return t({
+      chartJSState: e,
+      render: l,
+      destroy: h,
+      update: g,
+      resize: D
+    }), w(() => l()), (a, u) => (E(), y("canvas", {
+      ref_key: "chartRef",
+      ref: o,
+      height: a.height,
+      width: a.width
+    }, null, 8, J));
   }
 });
-const _sfc_main = Vue3ChartJs;
-_sfc_main.registerGlobalPlugins = (plugins) => {
-  Chart.register(...plugins);
+s.registerGlobalPlugins = (r) => {
+  i.register(...r);
 };
-_sfc_main.install = (app, options = {}) => {
-  var _a;
-  app.component(_sfc_main.name, _sfc_main);
-  if ((_a = options == null ? void 0 : options.plugins) == null ? void 0 : _a.length) {
-    _sfc_main.registerGlobalPlugins(options.plugins);
-  }
+s.install = (r, t = {}) => {
+  var n;
+  r.component(s.name ?? "Vue3ChartJs", s), (n = t == null ? void 0 : t.plugins) != null && n.length && s.registerGlobalPlugins(t.plugins);
+};
+export {
+  s as default
 };
-export { _sfc_main as default };

eslint.config.mjs

@@ -0,0 +1,11 @@
+// eslint.config.mjs
+import pluginVue from 'eslint-plugin-vue'
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from '@vue/eslint-config-typescript'
+
+export default defineConfigWithVueTs(
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+)