Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix compatability with Vue >=2.7 #967

Merged
merged 1 commit into from Dec 6, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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