Remove requirejs, load Jupyter lib with script tag

_extensions/live/live.lua

@@ -649,14 +649,6 @@ function Pandoc(doc)
     stylesheets = { "resources/live-runtime.css" },
   })
 
-  if (pyodide) then
-    -- Additional runtime dependencies for Pyodide
-    quarto.doc.add_html_dependency({
-      name = 'require-js',
-      scripts = { "resources/require.min.js" },
-    })
-  end
-
   -- Copy resources for upload to VFS at runtime
   local vfs_files = {}
   if (webr and webr.resources) then

docs/other/py_output.qmd

@@ -15,14 +15,14 @@ pyodide:
     - vega_datasets
 ---
 
-The `quarto-live` extension has support for displaying several types of `ipython` [rich output](https://ipython.readthedocs.io/en/stable/interactive/plotting.html#rich-outputs) and [Jupyter Widgets](https://ipywidgets.readthedocs.io/en/latest/) with interactive code blocks.
+The `quarto-live` extension has support for displaying several types of IPython [rich output](https://ipython.readthedocs.io/en/stable/interactive/plotting.html#rich-outputs) and [Jupyter Widgets](https://ipywidgets.readthedocs.io/en/latest/) with interactive code blocks.
 
 ## Example: IPython rich output
 
 ```{pyodide}
 from IPython.display import HTML
 from IPython.display import Image
-display(HTML("<h3>Hello from <code>ipython</code>!</h3>"))
+display(HTML("<h3>Hello from <code>IPython</code>!</h3>"))
 display(HTML("<p>This is HTML output, and below is an image.</p>"))
 Image(filename='images/python-logo.png') 
 ```

live-runtime/src/evaluate-pyodide.ts

@@ -10,28 +10,17 @@ import {
   EvaluateValue,
 } from "./evaluate";
 import { PyodideInterfaceWorker } from './pyodide-worker';
-import { replaceScriptChildren } from './utils';
+import { loadScriptAsync, replaceScriptChildren } from './utils';
 
 declare global {
   interface Window {
-    require: (
-      (modules: string[], callback?: (...modules: any[]) => any) => any
-    ) & {
-      config: (options: { paths: { [key: string]: string } }) => void;
-    };
     _ojs: {
       ojsConnector: any;
     }
   }
 }
 
 let stateElement: HTMLScriptElement | undefined;
-const requireHtmlManager = {
-  paths: {
-    "@jupyter-widgets/html-manager/dist/libembed-amd":
-      "https://cdn.jsdelivr.net/npm/@jupyter-widgets/[email protected]/dist/libembed-amd"
-  },
-};
 
 export class PyodideEvaluator implements ExerciseEvaluator {
   container: OJSEvaluateElement;
@@ -280,7 +269,7 @@ export class PyodideEvaluator implements ExerciseEvaluator {
         stateElement = document.createElement('script');
         stateElement.type = "application/vnd.jupyter.widget-state+json";
         stateElement = document.body.appendChild(stateElement);
-        window.require.config(requireHtmlManager);
+        await loadScriptAsync("https://cdn.jsdelivr.net/npm/@jupyter-widgets/[email protected]/dist/embed.js");
       }
       stateElement.innerHTML = state;
 
@@ -295,9 +284,7 @@ export class PyodideEvaluator implements ExerciseEvaluator {
       widgetElement.innerHTML = widgetJson;
       container.appendChild(widgetElement);
 
-      window.require(['@jupyter-widgets/html-manager/dist/libembed-amd'], function (m) {
-        m.renderWidgets();
-      });
+      dispatchEvent(new Event('load'));
     }
 
     const appendHtml = async (html: string) => {

live-runtime/src/utils.ts

@@ -72,3 +72,14 @@ export function replaceScriptChildren(container: HTMLElement) {
     }
   }
 }
+
+export function loadScriptAsync(url: string): Promise<any> {
+  return new Promise(function(resolve, reject) {
+    var script = document.createElement('script');
+    script.onload = () => resolve(url);
+    script.onerror = () => reject(`Can't load script: "${url}".`);
+    script.async = true;
+    script.src = url;
+    document.getElementsByTagName("head")[0].appendChild(script);
+  });
+}