fix: attrs update

fixes: #1392

Author: kagawagao

__tests__/plots/circle-packing.spec.tsx

@@ -1,7 +1,5 @@
 import { mount } from '@vue/test-utils'
-import CirclePackingChart, {
-  CirclePackingChartProps,
-} from '../../src/plots/circle-packing'
+import CirclePackingChart, { CirclePackingChartProps } from '../../src/plots/circle-packing'
 import data from './circle-packing-data.json'
 
 const config: CirclePackingChartProps = {

__tests__/plots/stock.spec.tsx

@@ -15,7 +15,7 @@ const data = [
 const config = {
   width: 400,
   height: 500,
-  data: data,
+  data,
   xField: 'x',
   yField: ['low', 'q1', 'median', 'q3', 'high'],
   boxStyle: {

package-lock.json

@@ -63,8 +63,7 @@
   },
   "homepage": "https://github.com/open-data-plan/g2plot-vue#readme",
   "devDependencies": {
-    "@antv/g2": "^5.1.0",
-    "@antv/g2plot": "^2.3.13",
+    "@antv/g2plot": "^2.4.31",
     "@babel/cli": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@commitlint/cli": "^18.0.0",
@@ -79,6 +78,7 @@
     "@vue/babel-preset-jsx": "^1.3.0",
     "@vue/composition-api": "^1.7.0",
     "@vue/test-utils": "^2.0.0-beta.7",
+    "@vue/tsconfig": "^0.5.1",
     "canvas": "^2.6.1",
     "conventional-changelog-cli": "^4.0.0",
     "cross-env": "^7.0.2",

package.json

@@ -1,8 +1,8 @@
-import { defineComponent, Ref } from 'vue-demi'
 import { Plot as BasePlot } from '@antv/g2plot'
-import isEqual from 'lodash/isEqual'
 import isEmpty from 'lodash/isEmpty'
+import isEqual from 'lodash/isEqual'
 import { HTMLAttributes } from 'vue'
+import { defineComponent, Ref } from 'vue-demi'
 
 interface Options {
   [x: string]: any
@@ -16,8 +16,7 @@ type PickedAttrs = 'class' | 'style'
 
 type Data = Record<string, any>[] | Record<string, any>
 
-export interface BaseChartProps<C extends Options>
-  extends Pick<HTMLAttributes, PickedAttrs> {
+export interface BaseChartProps<C extends Options> extends Pick<HTMLAttributes, PickedAttrs> {
   chart: any
   data: Data
   chartRef?: Ref<BasePlot<C> | null>
@@ -34,16 +33,12 @@ export interface BaseChartRawBindings<C extends Options> {
   plot: BasePlot<C>
 }
 
-const BaseChart = defineComponent<
-  BaseChartProps<any>,
-  BaseChartRawBindings<any>,
-  ComputedOptions<any>
->({
+const BaseChart = defineComponent<BaseChartProps<any>, BaseChartRawBindings<any>, ComputedOptions<any>>({
   inheritAttrs: false,
   name: 'BaseChart',
   computed: {
     attrConfig() {
-      return this.$attrs
+      return { ...this.$attrs }
     },
     chartData() {
       const { data } = this.attrConfig
@@ -65,8 +60,7 @@ const BaseChart = defineComponent<
     },
   },
   mounted() {
-    const chartRef = this.$attrs
-      .chartRef as unknown as Ref<BasePlot<any> | null>
+    const chartRef = this.$attrs.chartRef as unknown as Ref<BasePlot<any> | null>
     const { chart: Chart, onReady } = this.attrConfig
     const plot = new Chart(this.$el as HTMLElement, {
       data: this.chartData,

src/components/base.tsx

@@ -1,12 +1,10 @@
-import { App, defineComponent } from 'vue-demi'
 import { Area, AreaOptions } from '@antv/g2plot'
+import { App, defineComponent } from 'vue-demi'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type AreaChartProps = Writeable<
-  Omit<BaseChartProps<AreaOptions>, 'chart' | 'data'> & AreaOptions
->
+export type AreaChartProps = Writeable<Omit<BaseChartProps<AreaOptions>, 'chart' | 'data'> & AreaOptions>
 
 const AreaChart = defineComponent<AreaChartProps>({
   name: 'AreaChart',

src/plots/area/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type BarChartProps = Writeable<
-  Omit<BaseChartProps<BarOptions>, 'chart' | 'data'> & BarOptions
->
+export type BarChartProps = Writeable<Omit<BaseChartProps<BarOptions>, 'chart' | 'data'> & BarOptions>
 
 const BarChart = defineComponent<BarChartProps>({
   name: 'BarChart',

src/plots/bar/index.tsx

@@ -5,16 +5,13 @@ import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
 export type BidirectionalBarChartProps = Writeable<
-  Omit<BaseChartProps<BidirectionalBarOptions>, 'chart' | 'data'> &
-    BidirectionalBarOptions
+  Omit<BaseChartProps<BidirectionalBarOptions>, 'chart' | 'data'> & BidirectionalBarOptions
 >
 
 const BidirectionalBarChart = defineComponent<BidirectionalBarChartProps>({
   name: 'BidirectionalBarChart',
   setup: (props, ctx) => {
-    return () => (
-      <BaseChart chart={BidirectionalBar} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={BidirectionalBar} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/bidirectional-bar/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type BoxChartProps = Writeable<
-  Omit<BaseChartProps<BoxOptions>, 'chart' | 'data'> & BoxOptions
->
+export type BoxChartProps = Writeable<Omit<BaseChartProps<BoxOptions>, 'chart' | 'data'> & BoxOptions>
 
 const BoxChart = defineComponent<BoxChartProps>({
   name: 'BoxChart',

src/plots/box/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type BulletChartProps = Writeable<
-  Omit<BaseChartProps<BulletOptions>, 'chart' | 'data'> & BulletOptions
->
+export type BulletChartProps = Writeable<Omit<BaseChartProps<BulletOptions>, 'chart' | 'data'> & BulletOptions>
 
 const BulletChart = defineComponent<BulletChartProps>({
   name: 'BulletChart',