Skip to content

Commit

Permalink
fix: fix compatability with Vue >=2.7 (#967)
Browse files Browse the repository at this point in the history
  • Loading branch information
dangreen committed Dec 6, 2022
1 parent 4ab91cc commit 742bf62
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 7 deletions.
2 changes: 1 addition & 1 deletion .size-limit.json
@@ -1,7 +1,7 @@
[
{
"path": "dist/index.js",
"limit": "1.9 KB",
"limit": "1.95 KB",
"webpack": false,
"running": false
},
Expand Down
18 changes: 13 additions & 5 deletions src/typedCharts.ts
Expand Up @@ -14,6 +14,7 @@ import {
import type { TypedChartComponent, ChartComponentRef } from './types.js'
import { CommonProps } from './props.js'
import { Chart } from './chart.js'
import { compatProps } from './utils.js'

export function createTypedChart<
TType extends ChartType = ChartType,
Expand All @@ -36,11 +37,18 @@ export function createTypedChart<
expose({ chart: ref })

return () => {
return h(Chart, {
ref: reforwardRef as any,
type,
...props
})
return h(
Chart,
compatProps(
{
ref: reforwardRef as any
},
{
type,
...props
}
)
)
}
}
}) as any
Expand Down
9 changes: 8 additions & 1 deletion src/utils.ts
@@ -1,4 +1,4 @@
import { isProxy, toRaw } from 'vue'
import { isProxy, toRaw, version } from 'vue'
import type {
Chart,
ChartType,
Expand All @@ -8,6 +8,13 @@ import type {
DefaultDataPoint
} from 'chart.js'

export const compatProps =
version[0] === '2'
? <I extends {}, T extends {}>(internals: I, props: T) =>
Object.assign(internals, { attrs: props }) as unknown as I & T
: <I extends {}, T extends {}>(internals: I, props: T) =>
Object.assign(internals, props)

export function toRawIfProxy<T>(obj: T) {
return isProxy(obj) ? toRaw(obj) : obj
}
Expand Down
1 change: 1 addition & 0 deletions website/src/migration-guides/index.md
Expand Up @@ -21,6 +21,7 @@ If you are experiencing this problem with Jest, you should follow [this doc](htt
- `chartOptions` props were renamed to `options`
- unknown props will fall through to the canvas element.
- `generateChart` were refactored and renamed to `createTypedChart`
- Vue.js < 2.7 is no longer supported. If you want to use vue-chartjs with Vue < 2.7 you have to lock your version to 4.x.

## Migration from v3 to v4

Expand Down

0 comments on commit 742bf62

Please sign in to comment.