fix: make vega and altair work in Jupyter Lab

Jupyter Lab does not provide requirejs, so we need to load it ourselves
similar to what we do in other vue templates.

solara/widgets/vue/vegalite.vue

@@ -6,22 +6,11 @@
 <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()}/[email protected]/build/vega-lite.min.js`,
-                    'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
-                }
-            }
-        })
-        // pre load
-        require(['vega', 'vega-lite', 'vega-embed'], () => {
-        })
-        this.do_plot_debounced = _.debounce(() => this.do_plot(), 100)
+        this.vegaLoaded = this.loadVega();
+        this.do_plot_debounced = _.debounce(async () => {
+            await this.vegaLoaded;
+            this.do_plot()
+        }, 100)
     },
     mounted() {
         this.do_plot_debounced();
@@ -64,6 +53,41 @@ module.exports = {
                 })();
             });
         },
+        async loadVega() {
+            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)
+            });
+        },
+        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()}/[email protected]/require.js`;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            });
+        },
         getBaseUrl() {
             if (window.solara && window.solara.rootPath !== undefined) {
                 return solara.rootPath + "/";