Execute JavaScript elements in dynamic HTML

NEWS.md

@@ -0,0 +1,9 @@
+# Quarto Live (development version)
+
+## Bug fixes
+
+* Ensure that JavaScript scripts that have been dynamically added via HTML output are executed.
+
+# Quarto Live 0.1.1
+
+Initial release.

live-runtime/src/evaluate-pyodide.ts

@@ -10,6 +10,7 @@ import {
   EvaluateValue,
 } from "./evaluate";
 import { PyodideInterfaceWorker } from './pyodide-worker';
+import { replaceScriptChildren } from './utils';
 
 declare global {
   interface Window {
@@ -304,6 +305,7 @@ export class PyodideEvaluator implements ExerciseEvaluator {
         const outputDiv = document.createElement("div");
         outputDiv.className = "cell-output cell-output-pyodide";
         outputDiv.innerHTML = html;
+        replaceScriptChildren(outputDiv);
         container.appendChild(outputDiv);
       }
     };

live-runtime/src/evaluate-webr.ts

@@ -24,7 +24,7 @@ import {
   ExerciseEvaluator,
   OJSEvaluateElement,
 } from "./evaluate";
-import { arrayBufferToBase64 } from './utils';
+import { arrayBufferToBase64, replaceScriptChildren } from './utils';
 
 declare global {
   interface Window {
@@ -340,6 +340,7 @@ export class WebREvaluator implements ExerciseEvaluator {
         const outputDiv = document.createElement("div");
         outputDiv.className = "cell-output cell-output-webr";
         outputDiv.innerHTML = html;
+        replaceScriptChildren(outputDiv);
 
         // Add HTML output to the DOM
         appendSource();

live-runtime/src/utils.ts

@@ -56,3 +56,19 @@ export function replaceInObject<T>(
   }
   return obj;
 }
+
+export function replaceScriptChildren(container: HTMLElement) {
+  for (let script of container.getElementsByTagName('script')) {
+    if (!script.type || script.type == "text/javascript" || script.type == "module") {
+      const newScript = document.createElement('script');
+      if (script.async) newScript.async = script.async;
+      if (script.crossOrigin) newScript.crossOrigin = script.crossOrigin;
+      if (script.defer) newScript.defer = script.async;
+      if (script.integrity) newScript.integrity = script.integrity;
+      if (script.src) newScript.src = script.src;
+      if (script.text) newScript.text = script.text;
+      if (script.type) newScript.type = script.type;
+      script.parentNode.replaceChild(newScript, script);
+    }
+  }
+}