@floegence/redevplugin-ui 3.0.20 → 3.0.21

package/dist/surface.js

@@ -751,6 +751,7 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
   const maxImageTotalPixels = ${opaqueSurfaceRenderLimits.max_image_total_pixels};
   const workerHeartbeatIntervalMs = ${opaqueSurfaceRenderLimits.worker_heartbeat_interval_ms};
   const workerHeartbeatTimeoutMs = ${opaqueSurfaceRenderLimits.worker_heartbeat_timeout_ms};
+  const rendererCommitFallbackMs = 100;
   const maxCriticalDocumentBytes = ${8 * 1024 * 1024};
   const maxPrivateAssetBase64Length = ${Math.ceil((32 * 1024 * 1024) / 3) * 4};
   const maxLazyAssetCount = ${maxOpaqueSurfaceLazyAssets};
@@ -863,7 +864,9 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
   let workerHeartbeatTimer;
   let workerHeartbeatTimeout;
   let pendingQuiesceID;
+  let runtimeDisposed = false;
   const pendingWorkerRequests = new Set();
+  const pendingRendererCommits = new Set();
   const requestSequence = { rpc: 0, execution: 0, render: 0, canvas: 0, asset: 0 };
   let executionQuerySurfaceTokens = 8;
   let executionQuerySurfaceRefillAt = performance.now();
@@ -956,7 +959,13 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
     sendParent({ type: "redevplugin.surface.error", error: String(message).slice(0, 512) });
     disposeRuntime();
   };
+  const cancelPendingRendererCommits = () => {
+    for (const cancel of [...pendingRendererCommits]) cancel();
+  };
   const disposeRuntime = () => {
+    if (runtimeDisposed) return;
+    runtimeDisposed = true;
+    cancelPendingRendererCommits();
     if (workerHeartbeatTimer) clearTimeout(workerHeartbeatTimer);
     if (workerHeartbeatTimeout) clearTimeout(workerHeartbeatTimeout);
     workerHeartbeatTimer = undefined;
@@ -997,6 +1006,7 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
     assetByLogicalID.clear();
   };
   const terminateQuiescedWorker = () => {
+    cancelPendingRendererCommits();
     if (workerHeartbeatTimer) clearTimeout(workerHeartbeatTimer);
     if (workerHeartbeatTimeout) clearTimeout(workerHeartbeatTimeout);
     workerHeartbeatTimer = undefined;
@@ -1486,9 +1496,25 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
       parent.insertBefore(target, before || null);
     }
   };
-  const onAnimationFrame = (commit) => new Promise((resolve, reject) => requestAnimationFrame(() => {
-    try { commit(); resolve(); } catch (error) { reject(error); }
-  }));
+  const commitOnRenderOpportunity = (commit) => new Promise((resolve, reject) => {
+    if (runtimeDisposed) return resolve(false);
+    let settled = false;
+    let frameID;
+    let fallbackTimer;
+    const finish = (shouldCommit) => {
+      if (settled) return;
+      settled = true;
+      if (frameID !== undefined) cancelAnimationFrame(frameID);
+      if (fallbackTimer !== undefined) clearTimeout(fallbackTimer);
+      pendingRendererCommits.delete(cancel);
+      if (!shouldCommit || runtimeDisposed) return resolve(false);
+      try { commit(); resolve(true); } catch (error) { reject(error); }
+    };
+    const cancel = () => finish(false);
+    pendingRendererCommits.add(cancel);
+    frameID = requestAnimationFrame(() => finish(true));
+    fallbackTimer = setTimeout(() => finish(true), rendererCommitFallbackMs);
+  });
   const mountWorkerTree = async (tree) => {
     if (uiRevision !== 0) throw new Error("plugin UI mount may only occur once");
     const built = buildWorkerSubtree(tree, { nodes: 0 }, 1, undefined);
@@ -1496,25 +1522,29 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
     if (!(root instanceof Element)) throw new Error("plugin UI root must be an element");
     validateCanvasIdentifiers(root);
     const renderState = captureRenderState();
-    await onAnimationFrame(() => {
+    const committed = await commitOnRenderOpportunity(() => {
       document.body.replaceChildren(root);
       restoreRenderState(renderState);
     });
+    if (!committed) return false;
     uiGraph = built.graph;
     uiNodes = built.nodes;
     uiRevision = 1;
     sendParent({ type: "redevplugin.surface.first_commit" });
+    return true;
   };
   const patchWorkerTree = async (baseRevision, revision, operations) => {
     if (uiRevision < 1 || baseRevision !== uiRevision || revision !== baseRevision + 1) throw new Error("plugin UI patch revision is invalid");
     const validated = validatePatch(operations);
     const renderState = captureRenderState();
-    await onAnimationFrame(() => {
+    const committed = await commitOnRenderOpportunity(() => {
       for (const operation of validated.plan) applyPatchOperation(operation);
       validated.graph.commit();
       restoreRenderState(renderState);
     });
+    if (!committed) return false;
     uiRevision = revision;
+    return true;
   };
   const actionPayload = (event, element, eventType = event.type) => {
     const target = event.target instanceof Element ? event.target.closest("[data-redevplugin-key]") : element;
@@ -2272,9 +2302,9 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
         completeWorkerRequest(message.id);
         return rejectWorkerRequest(message.id, "plugin render rate limit exceeded");
       }
-      void mountWorkerTree(message.tree).then(() => {
+      void mountWorkerTree(message.tree).then((committed) => {
         completeWorkerRequest(message.id);
-        sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
+        if (committed) sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
       }, (error) => fail(error && error.message || "plugin UI mount violated the protocol"));
       return;
     }
@@ -2285,9 +2315,9 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
         completeWorkerRequest(message.id);
         return rejectWorkerRequest(message.id, "plugin render rate limit exceeded");
       }
-      void patchWorkerTree(message.base_revision, message.revision, message.operations).then(() => {
+      void patchWorkerTree(message.base_revision, message.revision, message.operations).then((committed) => {
         completeWorkerRequest(message.id);
-        sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
+        if (committed) sendWorker({ type: "redevplugin.bridge.response", id: message.id, ok: true });
       }, (error) => fail(error && error.message || "plugin UI patch violated the protocol"));
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/redevplugin-ui",
-  "version": "3.0.20",
+  "version": "3.0.21",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -40,7 +40,7 @@
     "dist"
   ],
   "dependencies": {
-    "@floegence/redevplugin-contracts": "3.0.20"
+    "@floegence/redevplugin-contracts": "3.0.21"
   },
   "publishConfig": {
     "access": "public"