properly implement resettableAsyncComponent

This commit is contained in:
Henry Jameson 2022-03-28 23:55:26 +03:00
parent 9afbb12f95
commit f21dc21a83
3 changed files with 13 additions and 15 deletions

View file

@ -19,6 +19,7 @@
<script>
export default {
emits: ['resetAsyncComponent'],
methods: {
retry () {
this.$emit('resetAsyncComponent')

View file

@ -56,8 +56,8 @@ const SettingsModal = {
SettingsModalContent: getResettableAsyncComponent(
() => import('./settings_modal_content.vue'),
{
loading: PanelLoading,
error: AsyncComponentError,
loadingComponent: PanelLoading,
errorComponent: AsyncComponentError,
delay: 0
}
)

View file

@ -1,5 +1,4 @@
// TODO investigate if even necessary since VUE3
import { reactive } from 'vue'
import { defineAsyncComponent, shallowReactive, h } from 'vue'
/* By default async components don't have any way to recover, if component is
* failed, it is failed forever. This helper tries to remedy that by recreating
@ -9,23 +8,21 @@ import { reactive } from 'vue'
* actual target component itself if needs to be.
*/
function getResettableAsyncComponent (asyncComponent, options) {
const asyncComponentFactory = () => () => ({
component: asyncComponent(),
const asyncComponentFactory = () => () => defineAsyncComponent({
loader: asyncComponent,
...options
})
const observe = reactive({ c: asyncComponentFactory() })
const observe = shallowReactive({ c: asyncComponentFactory() })
return {
functional: true,
render (createElement, { data, children }) {
render () {
// emit event resetAsyncComponent to reloading
data.on = {}
data.on.resetAsyncComponent = () => {
observe.c = asyncComponentFactory()
// parent.$forceUpdate()
}
return createElement(observe.c, data, children)
return h(observe.c(), {
onResetAsyncComponent () {
observe.c = asyncComponentFactory()
}
})
}
}
}