2021-02-28 06:56:08 +08:00
|
|
|
import Vue from 'vue'
|
|
|
|
import { VueConstructor } from 'vue/types/umd'
|
|
|
|
|
2021-03-01 06:24:26 +08:00
|
|
|
export class VueRenderer {
|
2021-03-15 16:00:44 +08:00
|
|
|
ref!: Vue
|
2021-02-28 06:56:08 +08:00
|
|
|
|
|
|
|
constructor(component: Vue | VueConstructor, props: any) {
|
2022-05-24 02:23:49 +08:00
|
|
|
const Component = (typeof component === 'function') ? component : Vue.extend(component)
|
2021-02-28 06:56:08 +08:00
|
|
|
|
2021-03-15 16:00:44 +08:00
|
|
|
this.ref = new Component(props).$mount()
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
|
2021-03-18 04:21:57 +08:00
|
|
|
get element(): Element {
|
2021-03-15 16:00:44 +08:00
|
|
|
return this.ref.$el
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
|
2021-04-21 15:43:31 +08:00
|
|
|
updateProps(props: Record<string, any> = {}): void {
|
2021-03-15 16:00:44 +08:00
|
|
|
if (!this.ref.$props) {
|
2021-02-28 06:56:08 +08:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
// prevents `Avoid mutating a prop directly` error message
|
2022-06-06 23:33:13 +08:00
|
|
|
// Fix: `VueNodeViewRenderer` change vue Constructor `config.silent` not working
|
2022-06-23 22:19:32 +08:00
|
|
|
const currentVueConstructor = this.ref.$props.editor?.contentComponent?.$options._base ?? Vue // eslint-disable-line
|
2022-06-06 23:33:13 +08:00
|
|
|
const originalSilent = currentVueConstructor.config.silent
|
2021-12-03 07:03:39 +08:00
|
|
|
|
2022-06-06 23:33:13 +08:00
|
|
|
currentVueConstructor.config.silent = true
|
2021-02-28 06:56:08 +08:00
|
|
|
|
|
|
|
Object
|
|
|
|
.entries(props)
|
|
|
|
.forEach(([key, value]) => {
|
2021-03-15 16:00:44 +08:00
|
|
|
this.ref.$props[key] = value
|
2021-02-28 06:56:08 +08:00
|
|
|
})
|
|
|
|
|
2022-06-06 23:33:13 +08:00
|
|
|
currentVueConstructor.config.silent = originalSilent
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
|
2021-03-18 04:21:57 +08:00
|
|
|
destroy(): void {
|
2021-03-15 16:00:44 +08:00
|
|
|
this.ref.$destroy()
|
2021-02-28 06:56:08 +08:00
|
|
|
}
|
|
|
|
}
|