[ts-sdk] Add useSmelter hook to web client

Also updated wasm `useSmelter` hook

Author: noituri

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

@@ -1,19 +1,14 @@
-import { useEffect, useRef, useState } from 'react';
+import { 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 cleanUpPromise = useRef<Promise<void>>();
-
   useEffect(() => {
     const smelter = new Smelter(options);
 
     let cancel = false;
-    // TODO(noituri): Add smelter.restart()
-    const promise = (async () => {
-      await cleanUpPromise.current;
-
+    (async () => {
       await smelter.init();
       await smelter.start();
       if (!cancel) {
@@ -23,12 +18,9 @@ export function useSmelter(options: SmelterInstanceOptions): Smelter | undefined
 
     return () => {
       cancel = true;
-      cleanUpPromise.current = (async () => {
-        await promise.catch(() => {});
-        await smelter.terminate();
-      })();
+      void smelter.terminate()
     };
-  }, [options]);
+  }, [options?.url]);
 
   return smelter;
 }

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

@@ -1,14 +1,18 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { SmelterOptions } from '../compositor/compositor';
 import Smelter from '../compositor/compositor';
 
 export function useSmelter(options?: SmelterOptions): Smelter | undefined {
   const [smelter, setSmelter] = useState<Smelter>();
+  const count = useRef(1);
   useEffect(() => {
     const smelter = new Smelter(options);
 
+    let id = count.current;
+    count.current++;
     let cancel = false;
-    const promise = (async () => {
+    (async () => {
+      console.log('Init', id);
       await smelter.init();
       await smelter.start();
       if (!cancel) {
@@ -17,11 +21,9 @@ export function useSmelter(options?: SmelterOptions): Smelter | undefined {
     })();
 
     return () => {
+      console.log('Cancel', id);
       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;