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);
+ }
+ }
+}