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

Author: noituri

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

@@ -0,0 +1,34 @@
+import { useEffect, useRef, 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;
+
+      await smelter.init();
+      await smelter.start();
+      if (!cancel) {
+        setSmelter(smelter);
+      }
+    })();
+
+    return () => {
+      cancel = true;
+      cleanUpPromise.current = (async () => {
+        await promise.catch(() => {});
+        await smelter.terminate();
+      })();
+    };
+  }, [options]);
+
+  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

@@ -9,15 +9,15 @@ import { sendRequest, sendMultipartRequest } from './fetch';
 import { retry, sleep } from './utils';
 import { WebSocketConnection } from './ws';
 
-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,13 +3,13 @@ import { pino } from 'pino';
 import type { Renderers } from '@swmansion/smelter';
 import { Smelter as CoreSmelter } 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;
 
-  public constructor(opts: InstanceOptions) {
+  public constructor(opts: SmelterInstanceOptions) {
     const logger = pino({
       level: 'warn',
       browser: {

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

@@ -3,13 +3,13 @@ import { OfflineSmelter as CoreSmelter } from '@swmansion/smelter-core';
 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;
 
-  public constructor(opts: InstanceOptions) {
+  public constructor(opts: SmelterInstanceOptions) {
     const logger = pino({
       level: 'warn',
       browser: {