Merge pull request #7 from mariobuikhuizen/fix_requirejs_not_loaded

Fix requirejs not loaded in time for preheated kernels
mariobuikhuizen · Mar 11, 2022 · 97bc2b5 · 97bc2b5
2 parents 032001d + 9b6cb25
commit 97bc2b5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "type": "git",
     "url": "https://github.com/mariobuikhuizen/voila-embed-vuetify.git"
   },
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "src/index.js",
   "scripts": {
     "lint": "eslint src"

diff --git a/src/JupyterWidgetEmbed.js b/src/JupyterWidgetEmbed.js
@@ -11,9 +11,6 @@ Vue.use(Vuetify, {
 });
 addCompiler(Vue);
 
-let requirejs;
-let define;
-
 function getWidgetManager(voila, kernel) {
     try {
         /* voila < 0.1.8 */
@@ -40,7 +37,7 @@ function getWidgetManager(voila, kernel) {
                 /* voila >= 0.2.8 */
                 sessionContext: {
                     session: {
-                        kernel
+                        kernel,
                     },
                     kernelChanged: {
                         connect: () => {
@@ -66,9 +63,8 @@ function getWidgetManager(voila, kernel) {
             });
 
             return new voila.WidgetManager(context, rendermime, settings);
-        } else {
-            throw e;
         }
+        throw e;
     }
 }
 
@@ -77,7 +73,8 @@ const notebooksLoaded = {};
 let voilaLoaded = false;
 
 async function init(voilaUrl, notebook, requestOptions) {
-    addVoilaTags(voilaUrl);
+    const requireJsPromise = loadRequireJs(voilaUrl);
+    addVoilaCss(voilaUrl);
 
     const notebookKey = `${voilaUrl}${notebook}`;
     if (notebooksLoaded[notebookKey]) {
@@ -87,8 +84,9 @@ async function init(voilaUrl, notebook, requestOptions) {
     const res = await fetch(`${voilaUrl}/voila/render/${notebook}`, requestOptions);
     const json = await res.json();
 
+    await requireJsPromise;
     if (!voilaLoaded) {
-        requirejs.config({
+        window.requirejs.config({
             baseUrl: `${voilaUrl}${json.baseUrl}voila`,
             waitSeconds: 3000,
             map: {
@@ -103,13 +101,13 @@ async function init(voilaUrl, notebook, requestOptions) {
             .filter((extension) => !extension.includes('jupyter-vue'))
             .map((extension) => `${voilaUrl}${extension}`);
 
-        requirejs(extensions);
+        window.requirejs(extensions);
 
         voilaLoaded = true;
     }
 
-    requirejs(['static/voila'], (voila) => {
-        define('vue', [], () => Vue);
+    window.requirejs(['static/voila'], (voila) => {
+        window.define('vue', [], () => Vue);
         (async () => {
             const kernel = await voila.connectKernel(`${voilaUrl}${json.baseUrl}`, json.kernelId);
 
@@ -133,17 +131,21 @@ async function init(voilaUrl, notebook, requestOptions) {
     });
 }
 
-function addVoilaTags(voilaUrl) {
-    if (!document.getElementById('tag-requirejs')) {
+function loadRequireJs(voilaUrl) {
+    if (document.getElementById('tag-requirejs')) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
         const script = document.createElement('script');
         script.src = `${voilaUrl}/voila/static/require.min.js`;
         script.id = 'tag-requirejs';
-        script.onload = () => {
-            requirejs = window.requirejs;
-            define = window.define;
-        };
+        script.onload = resolve;
+        script.onerror = reject;
         document.head.appendChild(script);
-    }
+    });
+}
+
+function addVoilaCss(voilaUrl) {
     if (!document.getElementById('tag-index.css')) {
         const link = document.createElement('link');
         link.href = `${voilaUrl}/voila/static/index.css`;
@@ -185,7 +187,7 @@ export default {
                         this.$el.removeChild(this.$el.firstChild);
                     }
 
-                    requirejs(['@jupyter-widgets/base'], (widgets) => {
+                    window.requirejs(['@jupyter-widgets/base'], (widgets) => {
                         widgets.JupyterPhosphorWidget.attach(widgetView.pWidget, this.$el);
                     });
                 }