From 416557ff398cd10a28d122f1ebd1d98bd254f69f Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Wed, 13 Sep 2023 21:26:24 +0200
Subject: [PATCH] fix: altair did not work in Jupyter Lab because requirejs was
 not loaded.

---
 solara/widgets/vue/vegalite.vue | 52 ++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/solara/widgets/vue/vegalite.vue b/solara/widgets/vue/vegalite.vue
index 81d78846d..45db6147e 100644
--- a/solara/widgets/vue/vegalite.vue
+++ b/solara/widgets/vue/vegalite.vue
@@ -6,22 +6,32 @@
 <script>
 module.exports = {
     created() {
-        requirejs.undef("vega")
-        requirejs.undef("vega-lite")
-        requirejs.undef("vega-embed")
-        require.config({
-            map: {
-                '*': {
-                    'vega': `${this.getCdn()}/vega@5/build/vega.min.js`,
-                    'vega-lite': `${this.getCdn()}/vega-lite@5.8.0/build/vega-lite.min.js`,
-                    'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
+        this.vegaLoaded = (async () => {
+            await this.loadRequire();
+            requirejs.undef("vega")
+            requirejs.undef("vega-lite")
+            requirejs.undef("vega-embed")
+            require.config({
+                map: {
+                    '*': {
+                        'vega': `${this.getCdn()}/vega@5/build/vega.min.js`,
+                        'vega-lite': `${this.getCdn()}/vega-lite@5/build/vega-lite.min.js`,
+                        'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
+                    }
                 }
+            })
+            // pre load
+            await new Promise((resolve, reject) => {
+                require(['vega', 'vega-lite', 'vega-embed'], () => {
+                    resolve()
+                }, reject)
             }
-        })
-        // pre load
-        require(['vega', 'vega-lite', 'vega-embed'], () => {
-        })
-        this.do_plot_debounced = _.debounce(() => this.do_plot(), 100)
+            );
+        })();
+        this.do_plot_debounced = _.debounce(async () => {
+            await this.vegaLoaded;
+            this.do_plot()
+        }, 100)
     },
     mounted() {
         this.do_plot_debounced();
@@ -64,6 +74,20 @@ module.exports = {
                 })();
             });
         },
+        loadRequire() {
+            /* Needed in lab */
+            if (window.requirejs) {
+                console.log('require found');
+                return Promise.resolve()
+            }
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = `${this.getCdn()}/requirejs@2.3.6/require.js`;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            });
+        },
         getBaseUrl() {
             if (window.solara && window.solara.rootPath !== undefined) {
                 return solara.rootPath + "/";