@doenet/doenetml-iframe 0.7.20-dev.320 → 0.7.20-dev.323

package/index.d.ts

@@ -75,7 +75,7 @@ declare type DoenetEditorProps = Omit<React.ComponentProps<typeof DoenetEditor_2
  * DoenetML component. Instead you must use the message passing interface of `DoenetViewer` to communicate
  * with the underlying DoenetML component.
  */
-export declare function DoenetViewer({ doenetML, standaloneUrl: specifiedStandaloneUrl, cssUrl: specifiedCssUrl, doenetmlVersion: specifiedDoenetmlVersion, autodetectVersion, ...doenetViewerProps }: DoenetViewerIframeProps): default_2.JSX.Element | null;
+export declare function DoenetViewer({ doenetML, standaloneUrl: specifiedStandaloneUrl, cssUrl: specifiedCssUrl, doenetmlVersion: specifiedDoenetmlVersion, autodetectVersion, useSharedCoreWorker, ...doenetViewerProps }: DoenetViewerIframeProps): default_2.JSX.Element | null;
 
 export declare type DoenetViewerIframeProps = DoenetViewerProps & {
     doenetML: string;
@@ -100,6 +100,17 @@ export declare type DoenetViewerIframeProps = DoenetViewerProps & {
      * overwriting any doenetmlVersion or urls provided
      */
     autodetectVersion?: boolean;
+    /**
+     * Opt-in (#1466): multiplex this viewer's core onto a shared core worker
+     * owned by this (parent) page, instead of the iframe booting its own
+     * ~100 MB dedicated worker. Viewers on the same page with the same
+     * standalone version share workers (up to a pool cap per worker), which
+     * is the dominant memory saving on pages embedding many documents.
+     * Trade-off: a worker-level hang or crash affects every document on that
+     * worker (per-core teardown stays individual; suspect workers are
+     * quarantined so retries boot fresh ones). Default off.
+     */
+    useSharedCoreWorker?: boolean;
 };
 
 declare type DoenetViewerProps = Omit<React.ComponentProps<typeof DoenetViewer_2>, "doenetML" | "externalVirtualKeyboardProvided">;

package/index.js

@@ -25618,7 +25618,7 @@ function requireCssesc$1() {
   return cssesc_1$1;
 }
 requireCssesc$1();
-const viewerIframeJsSource = '(function() {\n  "use strict";\n  async function waitForStandaloneBundle(timeoutMs) {\n    if (typeof window.renderDoenetViewerToContainer === "function") {\n      return true;\n    }\n    const deadline = Date.now() + timeoutMs;\n    while (Date.now() < deadline) {\n      await new Promise((resolve) => setTimeout(resolve, 50));\n      if (typeof window.renderDoenetViewerToContainer === "function") {\n        return true;\n      }\n    }\n    return false;\n  }\n  ComlinkViewer.expose(\n    { renderViewerWithFunctionProps },\n    ComlinkViewer.windowEndpoint(globalThis.parent)\n  );\n  function renderViewerWithFunctionProps(...args) {\n    const augmentedDoenetViewerProps = { ...doenetViewerProps };\n    augmentedDoenetViewerProps.externalVirtualKeyboardProvided = true;\n    for (const propName of doenetViewerPropsSpecified) {\n      if (!(propName in doenetViewerProps)) {\n        const idx = args.indexOf(propName);\n        if (idx !== -1) {\n          augmentedDoenetViewerProps[propName] = args[idx + 1];\n        }\n      }\n    }\n    if (!doenetViewerPropsSpecified.includes("requestScrollTo")) {\n      augmentedDoenetViewerProps.requestScrollTo = (offset) => {\n        messageParentFromViewer({ type: "scrollTo", offset });\n      };\n    }\n    window.renderDoenetViewerToContainer(\n      document.getElementById("root"),\n      void 0,\n      augmentedDoenetViewerProps\n    );\n  }\n  (async () => {\n    if (await waitForStandaloneBundle(6e4)) {\n      messageParentFromViewer({ iframeReady: true });\n    } else {\n      messageParentFromViewer({\n        error: "Invalid DoenetML version or DoenetML package not found"\n      });\n    }\n  })().catch((err) => {\n    console.error(\n      "iframe DoenetViewer: unexpected failure while signalling iframeReady",\n      err\n    );\n    try {\n      messageParentFromViewer({\n        error: "iframe viewer failed to initialize"\n      });\n    } catch {\n    }\n  });\n  function messageParentFromViewer(data) {\n    window.parent.postMessage(\n      {\n        origin: viewerId,\n        data\n      },\n      window.parent.origin\n    );\n  }\n})();\n';
+const viewerIframeJsSource = '(function() {\n  "use strict";\n  async function waitForStandaloneBundle(timeoutMs) {\n    if (typeof window.renderDoenetViewerToContainer === "function") {\n      return true;\n    }\n    const deadline = Date.now() + timeoutMs;\n    while (Date.now() < deadline) {\n      await new Promise((resolve) => setTimeout(resolve, 50));\n      if (typeof window.renderDoenetViewerToContainer === "function") {\n        return true;\n      }\n    }\n    return false;\n  }\n  ComlinkViewer.expose(\n    { renderViewerWithFunctionProps },\n    ComlinkViewer.windowEndpoint(globalThis.parent)\n  );\n  function renderViewerWithFunctionProps(...args) {\n    const augmentedDoenetViewerProps = { ...doenetViewerProps };\n    augmentedDoenetViewerProps.externalVirtualKeyboardProvided = true;\n    for (const propName of doenetViewerPropsSpecified) {\n      if (!(propName in doenetViewerProps)) {\n        const idx = args.indexOf(propName);\n        if (idx !== -1) {\n          augmentedDoenetViewerProps[propName] = args[idx + 1];\n        }\n      }\n    }\n    if (!doenetViewerPropsSpecified.includes("requestScrollTo")) {\n      augmentedDoenetViewerProps.requestScrollTo = (offset) => {\n        messageParentFromViewer({ type: "scrollTo", offset });\n      };\n    }\n    window.renderDoenetViewerToContainer(\n      document.getElementById("root"),\n      void 0,\n      augmentedDoenetViewerProps\n    );\n  }\n  function installSharedCorePortProvider() {\n    let coreCounter = 0;\n    window.doenetGlobalConfig.createExternalCoreWorkerPort = () => {\n      const coreId = `${viewerId}-core-${++coreCounter}`;\n      const channel = new MessageChannel();\n      window.parent.postMessage(\n        { origin: viewerId, data: { type: "createSharedCore", coreId } },\n        window.parent.origin,\n        [channel.port2]\n      );\n      return {\n        port: channel.port1,\n        destroy: (suspectWedge) => {\n          messageParentFromViewer({\n            type: "destroySharedCore",\n            coreId,\n            suspectWedge: Boolean(suspectWedge)\n          });\n        }\n      };\n    };\n  }\n  (async () => {\n    if (await waitForStandaloneBundle(6e4)) {\n      if (typeof doenetSharedCoreWorker !== "undefined" && doenetSharedCoreWorker) {\n        installSharedCorePortProvider();\n      }\n      messageParentFromViewer({ iframeReady: true });\n    } else {\n      messageParentFromViewer({\n        error: "Invalid DoenetML version or DoenetML package not found"\n      });\n    }\n  })().catch((err) => {\n    console.error(\n      "iframe DoenetViewer: unexpected failure while signalling iframeReady",\n      err\n    );\n    try {\n      messageParentFromViewer({\n        error: "iframe viewer failed to initialize"\n      });\n    } catch {\n    }\n  });\n  function messageParentFromViewer(data) {\n    window.parent.postMessage(\n      {\n        origin: viewerId,\n        data\n      },\n      window.parent.origin\n    );\n  }\n})();\n';
 const editorIframeJsSource = `(function() {
   "use strict";
   let editorControlHandle = null;
@@ -25856,7 +25856,7 @@ function createIframeHead(standaloneUrl, cssUrl) {
 function createIframeBodyOpenTag(darkMode) {
   return `<body style="margin:0" ${BODY_BACKGROUND_ATTRIBUTE}="${bodyBackgroundMode(darkMode)}">`;
 }
-function createHtmlForDoenetViewer(id2, doenetML, doenetViewerProps, standaloneUrl, cssUrl) {
+function createHtmlForDoenetViewer(id2, doenetML, doenetViewerProps, standaloneUrl, cssUrl, useSharedCoreWorker = false) {
   const doenetViewerPropsSpecified = Object.keys(doenetViewerProps);
   return `
     <html style="overflow:hidden">
@@ -25866,6 +25866,7 @@ function createHtmlForDoenetViewer(id2, doenetML, doenetViewerProps, standaloneU
             const viewerId = "${id2}";
             const doenetViewerProps = ${JSON.stringify(doenetViewerProps)};
             const doenetViewerPropsSpecified = ${JSON.stringify(doenetViewerPropsSpecified)};
+            const doenetSharedCoreWorker = ${JSON.stringify(!!useSharedCoreWorker)};
             import * as ComlinkViewer from "https://unpkg.com/comlink/dist/esm/comlink.mjs";
 
             // This source code has been compiled by vite and should be directly included.
@@ -25907,6 +25908,124 @@ function createHtmlForDoenetEditor(id2, doenetML, width, doenetEditorProps, stan
     </html>
     `;
 }
+const MAX_CORES_PER_WORKER = 12;
+const hostsByWorkerUrl = /* @__PURE__ */ new Map();
+const coreRecords = /* @__PURE__ */ new Map();
+function resolveWorkerUrl(standaloneUrl) {
+  try {
+    return new URL("./doenetml-worker/index.js", standaloneUrl).href;
+  } catch {
+  }
+  try {
+    return new URL("/doenetml-worker/index.js", document.baseURI).href;
+  } catch {
+    return null;
+  }
+}
+function workerCreationUrl(workerUrl) {
+  try {
+    if (new URL(workerUrl).origin === window.location.origin) {
+      return workerUrl;
+    }
+  } catch {
+  }
+  const bootstrap = `importScripts(${JSON.stringify(workerUrl)});`;
+  return URL.createObjectURL(
+    new Blob([bootstrap], { type: "text/javascript" })
+  );
+}
+function quarantineHost(workerUrl, host) {
+  host.quarantined = true;
+  if (host.liveCores <= 0) {
+    try {
+      host.worker.terminate();
+    } catch {
+    }
+    const pool = hostsByWorkerUrl.get(workerUrl);
+    const index2 = pool?.indexOf(host) ?? -1;
+    if (pool && index2 !== -1) {
+      pool.splice(index2, 1);
+    }
+  }
+}
+function getHost(workerUrl) {
+  let pool = hostsByWorkerUrl.get(workerUrl);
+  if (!pool) {
+    pool = [];
+    hostsByWorkerUrl.set(workerUrl, pool);
+  }
+  let host = pool.find(
+    (h2) => !h2.quarantined && h2.liveCores < MAX_CORES_PER_WORKER
+  );
+  if (!host) {
+    const worker = new Worker(workerCreationUrl(workerUrl), {
+      type: "classic"
+    });
+    const newHost = {
+      worker,
+      remote: wrap$3(worker),
+      liveCores: 0,
+      quarantined: false
+    };
+    worker.addEventListener("error", () => {
+      quarantineHost(workerUrl, newHost);
+    });
+    pool.push(newHost);
+    host = newHost;
+  }
+  return host;
+}
+function handleCreateSharedCore({
+  viewerId,
+  coreId,
+  standaloneUrl,
+  port
+}) {
+  const workerUrl = resolveWorkerUrl(standaloneUrl);
+  if (workerUrl === null) {
+    console.warn(
+      "doenetml-iframe: could not resolve a shared core worker URL for",
+      standaloneUrl
+    );
+    return;
+  }
+  const host = getHost(workerUrl);
+  host.liveCores++;
+  const idPromise = host.remote.createCore(transfer(port, [port]));
+  idPromise.catch(() => {
+  });
+  coreRecords.set(coreId, {
+    viewerId,
+    host,
+    workerUrl,
+    idPromise,
+    destroyed: false
+  });
+}
+function handleDestroySharedCore({
+  coreId,
+  suspectWedge
+}) {
+  const record = coreRecords.get(coreId);
+  if (!record || record.destroyed) {
+    return;
+  }
+  record.destroyed = true;
+  coreRecords.delete(coreId);
+  record.host.liveCores--;
+  record.idPromise.then((id2) => record.host.remote.destroyCore(id2)).catch(() => {
+  });
+  if (suspectWedge || record.host.quarantined) {
+    quarantineHost(record.workerUrl, record.host);
+  }
+}
+function destroySharedCoresForViewer(viewerId) {
+  for (const [coreId, record] of [...coreRecords]) {
+    if (record.viewerId === viewerId) {
+      handleDestroySharedCore({ coreId, suspectWedge: false });
+    }
+  }
+}
 function findNodesWithPositionInfo(nodes) {
   if (typeof nodes !== "object" || nodes === null) {
     return [];
@@ -63053,7 +63172,7 @@ function ExternalVirtualKeyboard({
     }
   );
 }
-const version = "0.7.20-dev.320";
+const version = "0.7.20-dev.323";
 const latestDoenetmlVersion = version;
 function subscribeToPinnedTheme() {
   return () => {
@@ -63074,6 +63193,7 @@ function DoenetViewer({
   cssUrl: specifiedCssUrl,
   doenetmlVersion: specifiedDoenetmlVersion,
   autodetectVersion = true,
+  useSharedCoreWorker = false,
   ...doenetViewerProps
 }) {
   const [id2, _2] = React__default__default.useState(() => Math.random().toString(36).slice(2));
@@ -63106,6 +63226,16 @@ function DoenetViewer({
   } else {
     cssUrl = `https://cdn.jsdelivr.net/npm/@doenet/standalone@${selectedDoenetmlVersion}/style.css`;
   }
+  const standaloneUrlRef = React__default__default.useRef(standaloneUrl);
+  standaloneUrlRef.current = standaloneUrl;
+  React__default__default.useEffect(() => {
+    if (!useSharedCoreWorker) {
+      return;
+    }
+    return () => {
+      destroySharedCoresForViewer(id2);
+    };
+  }, []);
   React__default__default.useEffect(() => {
     const listener = (event) => {
       if (event.origin !== window.location.origin) {
@@ -63127,6 +63257,22 @@ function DoenetViewer({
         return;
       }
       const data = event.data.data;
+      if (data.type === "createSharedCore" && event.ports[0]) {
+        handleCreateSharedCore({
+          viewerId: id2,
+          coreId: String(data.coreId),
+          standaloneUrl: standaloneUrlRef.current,
+          port: event.ports[0]
+        });
+        return;
+      }
+      if (data.type === "destroySharedCore") {
+        handleDestroySharedCore({
+          coreId: String(data.coreId),
+          suspectWedge: Boolean(data.suspectWedge)
+        });
+        return;
+      }
       if (ref.current && data.type === "scrollTo" && typeof data.offset === "number") {
         const iframeTop = ref.current.getBoundingClientRect().top + window.scrollY;
         const targetAbsoluteTop = iframeTop + data.offset;
@@ -63208,7 +63354,8 @@ function DoenetViewer({
         doenetML,
         doenetViewerProps,
         standaloneUrl,
-        cssUrl
+        cssUrl,
+        useSharedCoreWorker
       ),
       style: {
         width: "100%",