From f21dc21a83cbcf4c502b8fbf56cabac797a0b9da Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 28 Mar 2022 23:55:26 +0300
Subject: [PATCH] properly implement resettableAsyncComponent
---
.../async_component_error.vue | 1 +
.../settings_modal/settings_modal.js | 4 ++--
src/services/resettable_async_component.js | 23 ++++++++-----------
3 files changed, 13 insertions(+), 15 deletions(-)
diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index b1b59638d5..26ab5d21c3 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -19,6 +19,7 @@
<script>
export default {
+ emits: ['resetAsyncComponent'],
methods: {
retry () {
this.$emit('resetAsyncComponent')
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 82ea410e82..0a72dca1e2 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -56,8 +56,8 @@ const SettingsModal = {
SettingsModalContent: getResettableAsyncComponent(
() => import('./settings_modal_content.vue'),
{
- loading: PanelLoading,
- error: AsyncComponentError,
+ loadingComponent: PanelLoading,
+ errorComponent: AsyncComponentError,
delay: 0
}
)
diff --git a/src/services/resettable_async_component.js b/src/services/resettable_async_component.js
index e85c540b8a..1c046ce7b4 100644
--- a/src/services/resettable_async_component.js
+++ b/src/services/resettable_async_component.js
@@ -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()
+ }
+ })
}
}
}
--
GitLab