[ts-sdk] Ensure compositor instance cleanup (Node.js and browser)

ts/@live-compositor/browser-render/src/wasm.ts

@@ -5,7 +5,7 @@ import init, * as wasm from './generated/compositor_web';
  * @param wasmModuleUrl {string} - An URL for `live-compositor.wasm` file. The file is located in `dist` folder.
  */
 export async function loadWasmModule(wasmModuleUrl: string) {
-  await init(wasmModuleUrl);
+  await init({ module_or_path: wasmModuleUrl });
 }
 
 export { wasm };

ts/@live-compositor/core/src/compositorManager.ts

@@ -14,4 +14,5 @@ export interface CompositorManager {
   setupInstance(opts: SetupInstanceOptions): Promise<void>;
   sendRequest(request: ApiRequest): Promise<object>;
   registerEventListener(cb: (event: unknown) => void): void;
+  terminate(): Promise<void>;
 }

ts/@live-compositor/core/src/live/compositor.ts

@@ -61,7 +61,7 @@ export class LiveCompositor {
 
   public async unregisterOutput(outputId: string): Promise<object> {
     this.logger.info({ outputId }, 'Unregister output');
-    this.outputs[outputId].close();
+    await this.outputs[outputId].close();
     delete this.outputs[outputId];
     // TODO: wait for event
     return this.api.unregisterOutput(outputId, {});
@@ -140,6 +140,13 @@ export class LiveCompositor {
     this.startTime = startTime;
   }
 
+  public async terminate(): Promise<void> {
+    for (const output of Object.values(this.outputs)) {
+      await output.close();
+    }
+    await this.manager.terminate();
+  }
+
   private handleEvent(rawEvent: unknown) {
     const event = parseEvent(rawEvent, this.logger);
     if (!event) {

ts/@live-compositor/core/src/live/output.ts

@@ -6,8 +6,8 @@ import type { ApiClient, Api } from '../api.js';
 import Renderer from '../renderer.js';
 import type { RegisterOutput } from '../api/output.js';
 import { intoAudioInputsConfiguration } from '../api/output.js';
-import { throttle } from '../utils.js';
-import { OutputRootComponent, OutputShutdownStateStore } from '../rootComponent.js';
+import { ThrottledFunction } from '../utils.js';
+import { OutputRootComponent } from '../rootComponent.js';
 import type { Logger } from 'pino';
 
 type AudioContext = _liveCompositorInternals.AudioContext;
@@ -21,11 +21,10 @@ class Output {
   audioContext: AudioContext;
   timeContext: LiveTimeContext;
   internalInputStreamStore: LiveInputStreamStore<number>;
-  outputShutdownStateStore: OutputShutdownStateStore;
   logger: Logger;
 
   shouldUpdateWhenReady: boolean = false;
-  throttledUpdate: () => void;
+  throttledUpdate: ThrottledFunction;
 
   supportsAudio: boolean;
   supportsVideo: boolean;
@@ -44,16 +43,21 @@ class Output {
     this.api = api;
     this.logger = logger;
     this.outputId = outputId;
-    this.outputShutdownStateStore = new OutputShutdownStateStore();
     this.shouldUpdateWhenReady = false;
-    this.throttledUpdate = () => {
-      this.shouldUpdateWhenReady = true;
-    };
+    this.throttledUpdate = new ThrottledFunction(
+      async () => {
+        this.shouldUpdateWhenReady = true;
+      },
+      {
+        timeoutMs: 30,
+        logger: this.logger,
+      }
+    );
 
     this.supportsAudio = 'audio' in registerRequest && !!registerRequest.audio;
     this.supportsVideo = 'video' in registerRequest && !!registerRequest.video;
 
-    const onUpdate = () => this.throttledUpdate();
+    const onUpdate = () => this.throttledUpdate.scheduleCall();
     this.audioContext = new _liveCompositorInternals.AudioContext(onUpdate);
     this.timeContext = new _liveCompositorInternals.LiveTimeContext();
     this.internalInputStreamStore = new _liveCompositorInternals.LiveInputStreamStore(this.logger);
@@ -64,7 +68,6 @@ class Output {
     const rootElement = createElement(OutputRootComponent, {
       outputContext: new OutputContext(this, this.outputId, store),
       outputRoot: root,
-      outputShutdownStateStore: this.outputShutdownStateStore,
       childrenLifetimeContext: new _liveCompositorInternals.ChildrenLifetimeContext(() => {}),
     });
 
@@ -87,25 +90,18 @@ class Output {
     };
   }
 
-  public close(): void {
-    this.throttledUpdate = () => {};
-    // close will switch a scene to just a <View />, so we need replace `throttledUpdate`
-    // callback before it is called
-    this.outputShutdownStateStore.close();
+  public async close(): Promise<void> {
+    this.throttledUpdate.setFn(async () => {});
+    this.renderer.stop();
+    await this.throttledUpdate.waitForPendingCalls();
   }
 
   public async ready() {
-    this.throttledUpdate = throttle(
-      async () => {
-        await this.api.updateScene(this.outputId, this.scene());
-      },
-      {
-        timeoutMs: 30,
-        logger: this.logger,
-      }
-    );
+    this.throttledUpdate.setFn(async () => {
+      await this.api.updateScene(this.outputId, this.scene());
+    });
     if (this.shouldUpdateWhenReady) {
-      this.throttledUpdate();
+      this.throttledUpdate.scheduleCall();
     }
   }
 

ts/@live-compositor/core/src/offline/compositor.ts

@@ -56,7 +56,6 @@ export class OfflineCompositor {
     await this.api.registerOutput(OFFLINE_OUTPUT_ID, apiRequest);
     await output.scheduleAllUpdates();
     // at this point all scene update requests should already be delivered
-    output.outputShutdownStateStore.close();
 
     if (durationMs) {
       await this.api.unregisterOutput(OFFLINE_OUTPUT_ID, { schedule_time_ms: durationMs });
@@ -78,6 +77,7 @@ export class OfflineCompositor {
     await this.api.start();
 
     await renderPromise;
+    await this.manager.terminate();
   }
 
   public async registerInput(inputId: string, request: RegisterInput): Promise<object> {

ts/@live-compositor/core/src/offline/output.ts

@@ -8,7 +8,7 @@ import type { RegisterOutput } from '../api/output.js';
 import { intoAudioInputsConfiguration } from '../api/output.js';
 import { sleep } from '../utils.js';
 import { OFFLINE_OUTPUT_ID } from './compositor.js';
-import { OutputRootComponent, OutputShutdownStateStore } from '../rootComponent.js';
+import { OutputRootComponent } from '../rootComponent.js';
 import type { Logger } from 'pino';
 
 type AudioContext = _liveCompositorInternals.AudioContext;
@@ -26,7 +26,6 @@ class OfflineOutput {
   timeContext: OfflineTimeContext;
   childrenLifetimeContext: ChildrenLifetimeContext;
   internalInputStreamStore: OfflineInputStreamStore<number>;
-  outputShutdownStateStore: OutputShutdownStateStore;
   logger: Logger;
 
   durationMs?: number;
@@ -48,7 +47,6 @@ class OfflineOutput {
     this.api = api;
     this.logger = logger;
     this.outputId = OFFLINE_OUTPUT_ID;
-    this.outputShutdownStateStore = new OutputShutdownStateStore();
     this.durationMs = durationMs;
 
     this.supportsAudio = 'audio' in registerRequest && !!registerRequest.audio;
@@ -70,7 +68,6 @@ class OfflineOutput {
     const rootElement = createElement(OutputRootComponent, {
       outputContext: new OutputContext(this, this.outputId, store),
       outputRoot: root,
-      outputShutdownStateStore: this.outputShutdownStateStore,
       childrenLifetimeContext: this.childrenLifetimeContext,
     });
 
@@ -117,7 +114,7 @@ class OfflineOutput {
 
       this.timeContext.setNextTimestamp();
     }
-    this.outputShutdownStateStore.close();
+    this.renderer.stop();
   }
 }
 

ts/@live-compositor/core/src/renderer.ts

@@ -236,6 +236,7 @@ class Renderer {
   public readonly root: FiberRootNode;
   public readonly onUpdate: () => void;
   private logger: Logger;
+  private lastScene?: Api.Component;
 
   constructor({ rootElement, onUpdate, idPrefix, logger }: RendererOptions) {
     this.logger = logger;
@@ -256,6 +257,11 @@ class Renderer {
   }
 
   public scene(): Api.Component {
+    if (this.lastScene) {
+      // Renderer was already stopped just return old scene
+      return this.lastScene;
+    }
+
     // When resetAfterCommit is called `this.root.current` is not updated yet, so we need to rely
     // on `pendingChildren`. I'm not sure it is always populated, so there is a fallback to
     // `root.current`.
@@ -264,6 +270,11 @@ class Renderer {
       this.root.pendingChildren[0] ?? rootHostComponent(this.root.current, this.logger);
     return rootComponent.scene();
   }
+
+  public stop() {
+    this.lastScene = this.scene();
+    CompositorRenderer.updateContainer(null, this.root, null, () => {});
+  }
 }
 
 function rootHostComponent(root: any, logger: Logger): LiveCompositorHostComponent {

ts/@live-compositor/core/src/rootComponent.ts

@@ -1,59 +1,21 @@
-import { _liveCompositorInternals, useAfterTimestamp, View } from 'live-compositor';
-import { createElement, useEffect, useSyncExternalStore, type ReactElement } from 'react';
+import { _liveCompositorInternals, useAfterTimestamp } from 'live-compositor';
+import { createElement, useEffect, type ReactElement } from 'react';
 
 type CompositorOutputContext = _liveCompositorInternals.CompositorOutputContext;
 type ChildrenLifetimeContext = _liveCompositorInternals.ChildrenLifetimeContext;
 
-// External store to share shutdown information between React tree
-// and external code that is managing it.
-export class OutputShutdownStateStore {
-  private shutdown: boolean = false;
-  private onChangeCallbacks: Set<() => void> = new Set();
-
-  public close() {
-    this.shutdown = true;
-    this.onChangeCallbacks.forEach(cb => cb());
-  }
-
-  // callback for useSyncExternalStore
-  public getSnapshot = (): boolean => {
-    return this.shutdown;
-  };
-
-  // callback for useSyncExternalStore
-  public subscribe = (onStoreChange: () => void): (() => void) => {
-    this.onChangeCallbacks.add(onStoreChange);
-    return () => {
-      this.onChangeCallbacks.delete(onStoreChange);
-    };
-  };
-}
-
 const globalDelayRef = Symbol();
 
 export function OutputRootComponent({
   outputContext,
   outputRoot,
-  outputShutdownStateStore,
   childrenLifetimeContext,
 }: {
   outputContext: CompositorOutputContext;
   outputRoot: ReactElement;
-  outputShutdownStateStore: OutputShutdownStateStore;
   childrenLifetimeContext: ChildrenLifetimeContext;
 }) {
-  const shouldShutdown = useSyncExternalStore(
-    outputShutdownStateStore.subscribe,
-    outputShutdownStateStore.getSnapshot
-  );
-
   useMinimalStreamDuration(childrenLifetimeContext);
-
-  if (shouldShutdown) {
-    // replace root with view to stop all the dynamic code
-    return createElement(View, {});
-  }
-
   return createElement(
     _liveCompositorInternals.LiveCompositorContext.Provider,
     { value: outputContext },

ts/@live-compositor/core/src/utils.ts

@@ -5,37 +5,53 @@ type ThrottleOptions = {
   timeoutMs: number;
 };
 
-export function throttle(fn: () => Promise<void>, opts: ThrottleOptions): () => void {
-  let shouldCall: boolean = false;
-  let running: boolean = false;
+export class ThrottledFunction {
+  private fn: () => Promise<void>;
+  private shouldCall: boolean = false;
+  private runningPromise?: Promise<void> = undefined;
+  private opts: ThrottleOptions;
 
-  const start = async () => {
-    while (shouldCall) {
+  constructor(fn: () => Promise<void>, opts: ThrottleOptions) {
+    this.opts = opts;
+    this.fn = fn;
+  }
+
+  public scheduleCall() {
+    this.shouldCall = true;
+    if (this.runningPromise) {
+      return;
+    }
+    this.runningPromise = this.doCall();
+  }
+
+  public async waitForPendingCalls(): Promise<void> {
+    while (this.runningPromise) {
+      await this.runningPromise;
+    }
+  }
+
+  public setFn(fn: () => Promise<void>) {
+    this.fn = fn;
+  }
+
+  private async doCall() {
+    while (this.shouldCall) {
       const start = Date.now();
-      shouldCall = false;
+      this.shouldCall = false;
 
       try {
-        await fn();
+        await this.fn();
       } catch (error) {
-        opts.logger.error(error);
+        this.opts.logger.error(error);
       }
 
-      const timeoutLeft = start + opts.timeoutMs - Date.now();
+      const timeoutLeft = start + this.opts.timeoutMs - Date.now();
       if (timeoutLeft > 0) {
         await sleep(timeoutLeft);
       }
-      running = false;
-    }
-  };
-
-  return () => {
-    shouldCall = true;
-    if (running) {
-      return;
+      this.runningPromise = undefined;
     }
-    running = true;
-    void start();
-  };
+  }
 }
 
 export async function sleep(timeoutMs: number): Promise<void> {

ts/@live-compositor/node/src/logger.ts

@@ -43,7 +43,7 @@ export function compositorInstanceLoggerOptions(): {
 
   if ([LoggerLevel.WARN, LoggerLevel.ERROR].includes(loggerLevel)) {
     return {
-      level: loggerLevel,
+      level: LoggerLevel.ERROR,
       format,
     };
   } else if (loggerLevel === LoggerLevel.INFO) {

ts/@live-compositor/node/src/manager/existingInstance.ts

@@ -45,7 +45,11 @@ class ExistingInstance implements CompositorManager {
   }
 
   public registerEventListener(cb: (event: object) => void): void {
-    this.wsConnection?.registerEventListener(cb);
+    this.wsConnection.registerEventListener(cb);
+  }
+
+  public async terminate(): Promise<void> {
+    await this.wsConnection.close();
   }
 }