[ts-sdk] Add useSmelter hook to smelter-web-client

ts/smelter-web-client/src/hooks/useSmelter.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from 'react';
+import Smelter from '../smelter/live';
+import type { SmelterInstanceOptions } from '../manager';
+
+export function useSmelter(options: SmelterInstanceOptions): Smelter | undefined {
+  const [smelter, setSmelter] = useState<Smelter>();
+  const [promiseQueue, setPromiseQueue] = useState<(() => Promise<void>)[]>([]);
+  const [isWaiting, setIsWaiting] = useState(false);
+
+  const enqueue = useCallback((fn: () => Promise<void>) => {
+    setPromiseQueue(queue => [
+      ...queue,
+      fn,
+    ])
+  }, []);
+
+  useEffect(() => {
+    const smelter = new Smelter(options);
+
+    let cancel = false;
+    enqueue(async () => {
+      await smelter.init();
+      await smelter.start();
+      if (!cancel) {
+        setSmelter(smelter);
+      }
+    });
+
+    return () => {
+      cancel = true;
+      enqueue(async () => await smelter.terminate());
+    };
+  }, [options?.url, enqueue]);
+
+  useEffect(() => {
+    if (isWaiting) {
+      return;
+    }
+    setIsWaiting(true);
+
+    const fn = promiseQueue[0];
+    if (fn) {
+      void (async () => {
+        await fn();
+        setPromiseQueue(promiseQueue.slice(1));
+        setIsWaiting(false);
+      })();
+    }
+  }, [promiseQueue, isWaiting]);
+
+  return smelter;
+}

ts/smelter-web-client/src/index.ts

@@ -1,5 +1,8 @@
 import Smelter from './smelter/live';
 import OfflineSmelter from './smelter/offline';
 
+export { useSmelter } from './hooks/useSmelter';
+export { SmelterInstanceOptions } from './manager';
 export { OfflineSmelter };
+
 export default Smelter;

ts/smelter-web-client/src/manager.ts

@@ -10,15 +10,15 @@ import { retry, sleep } from './utils';
 import { WebSocketConnection } from './ws';
 import { getSmelterStatus } from './getSmelterStatus';
 
-export type InstanceOptions = {
+export type SmelterInstanceOptions = {
   url: string | URL;
 };
 
 class RemoteInstanceManager implements SmelterManager {
   private url: URL;
   private wsConnection: WebSocketConnection;
 
-  constructor(opts: InstanceOptions) {
+  constructor(opts: SmelterInstanceOptions) {
     let url: URL;
     if (opts.url instanceof URL) {
       url = opts.url;

ts/smelter-web-client/src/smelter/live.ts

@@ -3,14 +3,14 @@ import { pino } from 'pino';
 import type { Renderers } from '@swmansion/smelter';
 import { Smelter as CoreSmelter, StateGuard } from '@swmansion/smelter-core';
 import type { RegisterInput, RegisterOutput } from '../api';
-import type { InstanceOptions } from '../manager';
+import type { SmelterInstanceOptions } from '../manager';
 import RemoteInstanceManager from '../manager';
 
 export default class Smelter {
   private coreSmelter: CoreSmelter;
   private scheduler: StateGuard;
 
-  public constructor(opts: InstanceOptions) {
+  public constructor(opts: SmelterInstanceOptions) {
     const logger = pino({
       level: 'warn',
       browser: {

ts/smelter-web-client/src/smelter/offline.ts

@@ -3,14 +3,14 @@ import { OfflineSmelter as CoreSmelter, StateGuard } from '@swmansion/smelter-co
 import type { Renderers } from '@swmansion/smelter';
 import { pino } from 'pino';
 import type { RegisterInput, RegisterOutput } from '../api';
-import type { InstanceOptions } from '../manager';
+import type { SmelterInstanceOptions } from '../manager';
 import RemoteInstanceManager from '../manager';
 
 export default class OfflineSmelter {
   private coreSmelter: CoreSmelter;
   private scheduler: StateGuard;
 
-  public constructor(opts: InstanceOptions) {
+  public constructor(opts: SmelterInstanceOptions) {
     const logger = pino({
       level: 'warn',
       browser: {

ts/smelter-web-wasm/src/hooks/useSmelter.ts

@@ -4,11 +4,12 @@ import Smelter from '../compositor/compositor';
 
 export function useSmelter(options?: SmelterOptions): Smelter | undefined {
   const [smelter, setSmelter] = useState<Smelter>();
+
   useEffect(() => {
     const smelter = new Smelter(options);
 
     let cancel = false;
-    const promise = (async () => {
+    (async () => {
       await smelter.init();
       await smelter.start();
       if (!cancel) {
@@ -18,10 +19,7 @@ export function useSmelter(options?: SmelterOptions): Smelter | undefined {
 
     return () => {
       cancel = true;
-      void (async () => {
-        await promise.catch(() => {});
-        await smelter.terminate();
-      })();
+      void smelter.terminate();
     };
   }, [options?.framerate, (options?.framerate as any)?.num, (options?.framerate as any)?.den]);
   return smelter;