From 7b07de42112ef60bcfc3e04781a4fd01ccba0148 Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Wed, 22 Nov 2023 19:34:47 +0100
Subject: [PATCH] refactor: directly render vue tree if root view is a ipyvue
 widget

Do not include a div in between temporarily. Since the widget view
is created before we try to render the the upyter-widget-mount-point
we do not need to get it asynchrounously via promises.
---
 solara/server/static/main-vuetify.js | 52 +++++++++-------------------
 1 file changed, 16 insertions(+), 36 deletions(-)

diff --git a/solara/server/static/main-vuetify.js b/solara/server/static/main-vuetify.js
index d1f9c8c6d..8ee50b740 100644
--- a/solara/server/static/main-vuetify.js
+++ b/solara/server/static/main-vuetify.js
@@ -1,4 +1,5 @@
 
+const widgetViews = {};
 var jupyterWidgetMountPoint = {
     data() {
         return {
@@ -8,25 +9,22 @@ var jupyterWidgetMountPoint = {
     },
     props: ['mount-id'],
     created() {
-        requestWidget(this.mountId);
-    },
-    mounted() {
-        const vue3 = Vue.version.startsWith('3');
-        requestWidget(this.mountId)
-            .then(widgetView => {
-                if (['VuetifyView', 'VuetifyTemplateView'].includes(widgetView.model.get('_view_name'))) {
-                    this.renderFn = createElement => widgetView.vueRender(createElement);
-                } else {
-                    while (this.$el.firstChild) {
-                        this.$el.removeChild(this.$el.firstChild);
-                    }
-
-                    requirejs(['@jupyter-widgets/base'], widgets =>
-                        widgets.JupyterPhosphorWidget.attach(widgetView.pWidget, this.$el)
-                    );
+        const maybeCreateRenderFn = (widgetView) => {
+            // in solara, this is always the case, but lets keep this code so we could potentially
+            // support any ipywidget as a root view
+            if (['VuetifyView', 'VuetifyTemplateView'].includes(widgetView.model.get('_view_name'))) {
+                this.renderFn = createElement => widgetView.vueRender(createElement);
+            } else {
+                while (this.$el.firstChild) {
+                    this.$el.removeChild(this.$el.firstChild);
                 }
+
+                requirejs(['@jupyter-widgets/base'], widgets =>
+                    widgets.JupyterPhosphorWidget.attach(widgetView.pWidget, this.$el)
+                );
             }
-            );
+        }
+        maybeCreateRenderFn(widgetViews[this.mountId]);
     },
     render(createElement) {
         // in vue3 we have Vue.h, otherwise fall back to createElement (vue2)
@@ -43,24 +41,6 @@ var jupyterWidgetMountPoint = {
     }
 };
 
-const widgetResolveFns = {};
-const widgetPromises = {};
-
-function provideWidget(mountId, widgetView) {
-    if (widgetResolveFns[mountId]) {
-        widgetResolveFns[mountId](widgetView);
-    } else {
-        widgetPromises[mountId] = Promise.resolve(widgetView);
-    }
-}
-
-function requestWidget(mountId) {
-    if (!widgetPromises[mountId]) {
-        widgetPromises[mountId] = new Promise(resolve => widgetResolveFns[mountId] = resolve);
-    }
-    return widgetPromises[mountId];
-}
-
 function injectDebugMessageInterceptor(kernel) {
     const _original_handle_message = kernel._handleMessage.bind(kernel)
     kernel._handleMessage = ((msg) => {
@@ -245,7 +225,7 @@ async function solaraMount(widgetManager, mountId, modelId) {
             const model = await modelPromise;
             if (model.model_id == modelId) {
                 const view = await widgetManager.create_view(model);
-                provideWidget(mountId, view);
+                widgetViews[mountId] = view;
             }
         }));
         app.$data.loadingPercentage = 0;