From 5e3037047069aac08502d762e7092c112f157390 Mon Sep 17 00:00:00 2001 From: "kistz (Kilian Strunz)" Date: Tue, 12 May 2026 01:09:49 +0200 Subject: [PATCH 1/2] add vue useProcedure hook --- crates/bindings-typescript/src/vue/index.ts | 1 + .../src/vue/useProcedure.ts | 58 +++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 crates/bindings-typescript/src/vue/useProcedure.ts diff --git a/crates/bindings-typescript/src/vue/index.ts b/crates/bindings-typescript/src/vue/index.ts index b32fbdf4b80..3b3e64aba48 100644 --- a/crates/bindings-typescript/src/vue/index.ts +++ b/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'; diff --git a/crates/bindings-typescript/src/vue/useProcedure.ts b/crates/bindings-typescript/src/vue/useProcedure.ts new file mode 100644 index 00000000000..1d1ced47ba0 --- /dev/null +++ b/crates/bindings-typescript/src/vue/useProcedure.ts @@ -0,0 +1,58 @@ +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: ProcedureDef +): (...params: ProcedureParamsType) => Promise> { + const conn = useSpacetimeDB(); + const procedureName = procedureDef.accessorName; + + const queueRef = shallowRef< + { + params: ProcedureParamsType; + 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 + ) => Promise>; + 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) => { + const connection = conn.getConnection(); + if (!connection) { + return new Promise>((resolve, reject) => { + queueRef.value.push({ params, resolve, reject }); + }); + } + const fn = (connection.procedures as any)[procedureName] as ( + ...p: ProcedureParamsType + ) => Promise>; + return fn(...params); + }; +} From 753d091409c83ec1b4a7e6633acf182119c75e8e Mon Sep 17 00:00:00 2001 From: Kilian Strunz Date: Wed, 13 May 2026 15:16:52 +0200 Subject: [PATCH 2/2] pnpm format --- .../src/vue/useProcedure.ts | 92 ++++++++++--------- 1 file changed, 48 insertions(+), 44 deletions(-) diff --git a/crates/bindings-typescript/src/vue/useProcedure.ts b/crates/bindings-typescript/src/vue/useProcedure.ts index 1d1ced47ba0..385b0c96ae8 100644 --- a/crates/bindings-typescript/src/vue/useProcedure.ts +++ b/crates/bindings-typescript/src/vue/useProcedure.ts @@ -2,57 +2,61 @@ import { shallowRef, watch, onUnmounted } from 'vue'; import { useSpacetimeDB } from './useSpacetimeDB'; import type { UntypedProcedureDef } from '../sdk/procedures'; import type { - ProcedureParamsType, - ProcedureReturnType, + ProcedureParamsType, + ProcedureReturnType, } from '../sdk/type_utils'; export function useProcedure( - procedureDef: ProcedureDef -): (...params: ProcedureParamsType) => Promise> { - const conn = useSpacetimeDB(); - const procedureName = procedureDef.accessorName; + procedureDef: ProcedureDef +): ( + ...params: ProcedureParamsType +) => Promise> { + const conn = useSpacetimeDB(); + const procedureName = procedureDef.accessorName; - const queueRef = shallowRef< - { - params: ProcedureParamsType; - resolve: (val: any) => void; - reject: (err: unknown) => void; - }[] - >([]); + const queueRef = shallowRef< + { + params: ProcedureParamsType; + resolve: (val: any) => void; + reject: (err: unknown) => void; + }[] + >([]); - const stopWatch = watch( - () => conn.isActive, - () => { - const connection = conn.getConnection(); - if (!connection) return; + const stopWatch = watch( + () => conn.isActive, + () => { + const connection = conn.getConnection(); + if (!connection) return; - const fn = (connection.procedures as any)[procedureName] as ( - ...p: ProcedureParamsType - ) => Promise>; - 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 } - ); + const fn = (connection.procedures as any)[procedureName] as ( + ...p: ProcedureParamsType + ) => Promise>; + 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(); - }); + onUnmounted(() => { + stopWatch(); + }); - return (...params: ProcedureParamsType) => { - const connection = conn.getConnection(); - if (!connection) { - return new Promise>((resolve, reject) => { - queueRef.value.push({ params, resolve, reject }); - }); + return (...params: ProcedureParamsType) => { + const connection = conn.getConnection(); + if (!connection) { + return new Promise>( + (resolve, reject) => { + queueRef.value.push({ params, resolve, reject }); } - const fn = (connection.procedures as any)[procedureName] as ( - ...p: ProcedureParamsType - ) => Promise>; - return fn(...params); - }; + ); + } + const fn = (connection.procedures as any)[procedureName] as ( + ...p: ProcedureParamsType + ) => Promise>; + return fn(...params); + }; }