Add useProcedure React hook and export procedures from codegen

crates/bindings-typescript/src/react/index.ts

@@ -2,3 +2,4 @@ export * from './SpacetimeDBProvider.ts';
 export { useSpacetimeDB } from './useSpacetimeDB.ts';
 export { useTable } from './useTable.ts';
 export { useReducer } from './useReducer.ts';
+export { useProcedure } from './useProcedure.ts';

crates/bindings-typescript/src/react/useProcedure.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { UntypedProcedureDef } from '../sdk/procedures';
+import { useSpacetimeDB } from './useSpacetimeDB';
+import type {
+  ProcedureParamsType,
+  ProcedureReturnType,
+} from '../sdk/type_utils';
+
+export function useProcedure<ProcedureDef extends UntypedProcedureDef>(
+  procedureDef: ProcedureDef
+): (
+  ...params: ProcedureParamsType<ProcedureDef>
+) => Promise<ProcedureReturnType<ProcedureDef>> {
+  const { getConnection, isActive } = useSpacetimeDB();
+  const procedureName = procedureDef.accessorName;
+
+  // Holds calls made before the connection exists
+  const queueRef = useRef<
+    {
+      params: ProcedureParamsType<ProcedureDef>;
+      resolve: (val: any) => void;
+      reject: (err: unknown) => void;
+    }[]
+  >([]);
+
+  // Flush when we finally have a connection
+  useEffect(() => {
+    const conn = getConnection();
+    if (!conn) {
+      return;
+    }
+    const fn = (conn.procedures as any)[procedureName] as (
+      ...p: ProcedureParamsType<ProcedureDef>
+    ) => Promise<ProcedureReturnType<ProcedureDef>>;
+    if (queueRef.current.length) {
+      const pending = queueRef.current.splice(0);
+      for (const item of pending) {
+        fn(...item.params).then(item.resolve, item.reject);
+      }
+    }
+  }, [getConnection, procedureName, isActive]);
+
+  return useCallback(
+    (...params: ProcedureParamsType<ProcedureDef>) => {
+      const conn = getConnection();
+      if (!conn) {
+        return new Promise<ProcedureReturnType<ProcedureDef>>(
+          (resolve, reject) => {
+            queueRef.current.push({ params, resolve, reject });
+          }
+        );
+      }
+      const fn = (conn.procedures as any)[procedureName] as (
+        ...p: ProcedureParamsType<ProcedureDef>
+      ) => Promise<ProcedureReturnType<ProcedureDef>>;
+      return fn(...params);
+    },
+    [getConnection, procedureName]
+  );
+}

crates/bindings-typescript/src/sdk/type_utils.ts

@@ -1,5 +1,6 @@
-import type { InferTypeOfRow } from '.';
+import type { Infer, InferTypeOfRow } from '.';
 import type { Prettify } from '../lib/type_util';
+import type { UntypedProcedureDef } from './procedures';
 import type { UntypedReducerDef } from './reducers';
 
 export type IsEmptyObject<T> = [keyof T] extends [never] ? true : false;
@@ -8,3 +9,11 @@ export type MaybeParams<T> = IsEmptyObject<T> extends true ? [] : [params: T];
 export type ParamsType<R extends UntypedReducerDef> = MaybeParams<
   Prettify<InferTypeOfRow<R['params']>>
 >;
+
+export type ProcedureParamsType<P extends UntypedProcedureDef> = MaybeParams<
+  Prettify<InferTypeOfRow<P['params']>>
+>;
+
+export type ProcedureReturnType<P extends UntypedProcedureDef> = Infer<
+  P['returnType']
+>;

crates/codegen/src/typescript.rs

@@ -295,6 +295,12 @@ impl Lang for TypeScript {
             out,
             "export const reducers = __convertToAccessorMap(reducersSchema.reducersType.reducers);"
         );
+        writeln!(out);
+        writeln!(out, "/** The procedures available in this remote SpacetimeDB module. */");
+        writeln!(
+            out,
+            "export const procedures = __convertToAccessorMap(proceduresSchema.procedures);"
+        );
 
         // Write type aliases for EventContext, ReducerEventContext, SubscriptionEventContext, ErrorContext
         writeln!(out);