Merge branch 'master' into alessandro/validate-module-mount-names

Author: aasoni

crates/bindings-typescript/src/vue/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/vue/useProcedure.ts

@@ -0,0 +1,62 @@
+import { shallowRef, watch, onUnmounted } from 'vue';
+import { useSpacetimeDB } from './useSpacetimeDB';
+import type { UntypedProcedureDef } from '../sdk/procedures';
+import type {
+  ProcedureParamsType,
+  ProcedureReturnType,
+} from '../sdk/type_utils';
+
+export function useProcedure<ProcedureDef extends UntypedProcedureDef>(
+  procedureDef: ProcedureDef
+): (
+  ...params: ProcedureParamsType<ProcedureDef>
+) => Promise<ProcedureReturnType<ProcedureDef>> {
+  const conn = useSpacetimeDB();
+  const procedureName = procedureDef.accessorName;
+
+  const queueRef = shallowRef<
+    {
+      params: ProcedureParamsType<ProcedureDef>;
+      resolve: (val: any) => void;
+      reject: (err: unknown) => void;
+    }[]
+  >([]);
+
+  const stopWatch = watch(
+    () => conn.isActive,
+    () => {
+      const connection = conn.getConnection();
+      if (!connection) return;
+
+      const fn = (connection.procedures as any)[procedureName] as (
+        ...p: ProcedureParamsType<ProcedureDef>
+      ) => Promise<ProcedureReturnType<ProcedureDef>>;
+      if (queueRef.value.length) {
+        const pending = queueRef.value.splice(0);
+        for (const item of pending) {
+          fn(...item.params).then(item.resolve, item.reject);
+        }
+      }
+    },
+    { immediate: true }
+  );
+
+  onUnmounted(() => {
+    stopWatch();
+  });
+
+  return (...params: ProcedureParamsType<ProcedureDef>) => {
+    const connection = conn.getConnection();
+    if (!connection) {
+      return new Promise<ProcedureReturnType<ProcedureDef>>(
+        (resolve, reject) => {
+          queueRef.value.push({ params, resolve, reject });
+        }
+      );
+    }
+    const fn = (connection.procedures as any)[procedureName] as (
+      ...p: ProcedureParamsType<ProcedureDef>
+    ) => Promise<ProcedureReturnType<ProcedureDef>>;
+    return fn(...params);
+  };
+}