Add vue useProcedure hook (#4999)

# Description of Changes

Tin. Just mechanically mirrors the `useReducer` hook just like it is for
React
Would be cool if this could get in #4998

# API and ABI breaking changes

None.

# Expected complexity level and risk
1

<!--
How complicated do you think these changes are? Grade on a scale from 1
to 5,
where 1 is a trivial change, and 5 is a deep-reaching and complex
change.

This complexity rating applies not only to the complexity apparent in
the diff,
but also to its interactions with existing and future code.

If you answered more than a 2, explain what is complex about the PR,
and what other components it interacts with in potentially concerning
ways. -->

# Testing

<!-- Describe any testing you've done, and any testing you'd like your
reviewers to do,
so that you're confident that all the changes work as expected! -->

- [x] Works in my project

Author: kistz

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);
+  };
+}