Wait for jupyterapp to be available

content/demo-dev.html

@@ -107,49 +107,63 @@
       display: none !important;
     }
     `;
-    const loader = document.getElementById('loader');
-
-    for (const codeEl of document.querySelectorAll('code[data-run]')) {
-      const styleSheet = document.createElement("style");
-      styleSheet.textContent = styles;
-      const iframe = document.createElement('iframe');
-      const code = codeEl.textContent;
-      // find indent
-      let indent = 0;
-      for (const line of code.split('\n')) {
-        if (line.length === 0) {
-          continue
-        }
-        while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
-          indent += 1;
+    async function getJupyterApp(iframe, pause=50, maxAttempts=100) {
+      let attempt = 1;
+      while (attempt < maxAttempts) {
+        if (iframe.contentWindow.jupyterapp) {
+          return iframe.contentWindow.jupyterapp;
         }
-        break;
+        attempt += 1;
+        await new Promise(resolve => setTimeout(resolve, pause));
       }
-      let cleanCode = '';
-      let blocks = [];
-      for (const line of code.split('\n')) {
-        if (cleanCode === '' && line.length === 0) {
-          continue
+      throw Error(`Could not acquite 'jupyterapp' object in ${maxAttempts * pause} ms`);
+    }
+    async function load() {
+      const loader = document.getElementById('loader');
+
+      for (const codeEl of document.querySelectorAll('code[data-run]')) {
+        const styleSheet = document.createElement("style");
+        styleSheet.textContent = styles;
+        const iframe = document.createElement('iframe');
+        const code = codeEl.textContent;
+        // find indent
+        let indent = 0;
+        for (const line of code.split('\n')) {
+          if (line.length === 0) {
+            continue
+          }
+          while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
+            indent += 1;
+          }
+          break;
         }
-        cleanCode += line.substring(indent) + '\n';
-      }
-      codeEl.textContent = cleanCode;
-      iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1`;
-      iframe.style.width = '100%';
-      iframe.onload = () => {
-        if (iframe.contentDocument) {
-          iframe.contentDocument.head.appendChild(styleSheet);
-          const jupyter = iframe.contentWindow.jupyterapp;
-          jupyter.commands.execute('console:replace-selection', {text: cleanCode});
-          jupyter.restored.then(() => {
+        let cleanCode = '';
+        let blocks = [];
+        for (const line of code.split('\n')) {
+          if (cleanCode === '' && line.length === 0) {
+            continue
+          }
+          cleanCode += line.substring(indent) + '\n';
+        }
+        codeEl.textContent = cleanCode;
+        iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1`;
+        iframe.style.width = '100%';
+        iframe.onload = () => {
+          if (iframe.contentDocument) {
+            iframe.contentDocument.head.appendChild(styleSheet);
+            const jupyter = await getJupyterApp(iframe);
+            jupyter.commands.execute('console:replace-selection', {text: cleanCode});
+            jupyter.restored.then(() => {
+              codeEl.replaceWith(iframe);
+            });
+          } else {
             codeEl.replaceWith(iframe);
-          })
-        } else {
-          codeEl.replaceWith(iframe);
+          }
         }
+        loader.appendChild(iframe);
       }
-      loader.appendChild(iframe);
     }
+    load()
     </script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>