From 8a9115b58e020f750366e87bb4fd3483d6b62b03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 14:51:15 +0300
Subject: temp fix for now-unused resettable async component

---
 src/services/resettable_async_component.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/services/resettable_async_component.js')

diff --git a/src/services/resettable_async_component.js b/src/services/resettable_async_component.js
index 517bbd88..e85c540b 100644
--- a/src/services/resettable_async_component.js
+++ b/src/services/resettable_async_component.js
@@ -1,4 +1,5 @@
-import Vue from 'vue'
+// TODO investigate if even necessary since VUE3
+import { reactive } 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
@@ -13,7 +14,7 @@ function getResettableAsyncComponent (asyncComponent, options) {
     ...options
   })
 
-  const observe = Vue.observable({ c: asyncComponentFactory() })
+  const observe = reactive({ c: asyncComponentFactory() })
 
   return {
     functional: true,
-- 
cgit v1.2.3-70-g09d2


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: properly implement resettableAsyncComponent

---
 .../async_component_error.vue                      |  1 +
 src/components/settings_modal/settings_modal.js    |  4 ++--
 src/services/resettable_async_component.js         | 23 ++++++++++------------
 3 files changed, 13 insertions(+), 15 deletions(-)

(limited to 'src/services/resettable_async_component.js')

diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index b1b59638..26ab5d21 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 82ea410e..0a72dca1 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 e85c540b..1c046ce7 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()
+        }
+      })
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2