@veloxts/client 0.4.1 → 0.4.3

package/dist/react/hooks.d.ts

@@ -0,0 +1,182 @@
+/**
+ * React hooks for VeloxTS API calls
+ *
+ * Provides type-safe hooks for queries and mutations
+ * with full integration with React Query.
+ *
+ * @module @veloxts/client/react/hooks
+ */
+import { type QueryClient, type UseMutationResult, type UseQueryResult } from '@tanstack/react-query';
+import type { InferProcedureInput, InferProcedureOutput } from '../types.js';
+import type { GetProcedure, GetProceduresFromCollection, VeloxUseMutationOptions, VeloxUseQueryOptions } from './types.js';
+/**
+ * Type-safe query hook for VeloxTS procedures
+ *
+ * Wraps React Query's useQuery with automatic type inference from
+ * your backend procedure definitions. The hook automatically:
+ * - Builds a stable query key from namespace, procedure, and input
+ * - Provides full type safety for input and output
+ * - Integrates with React Query's caching and refetching
+ *
+ * @template TRouter - The router type (typeof imported procedures)
+ * @template TNamespace - The namespace key (e.g., 'users', 'posts')
+ * @template TProcedureName - The procedure name (e.g., 'getUser', 'listUsers')
+ *
+ * @param namespace - Resource namespace (e.g., 'users')
+ * @param procedureName - Procedure name (e.g., 'getUser')
+ * @param input - Input matching the procedure's input schema
+ * @param options - React Query options (optional)
+ *
+ * @returns UseQueryResult with typed data and error
+ *
+ * @example Basic usage
+ * ```tsx
+ * function UserProfile({ userId }: { userId: string }) {
+ *   const { data: user, isLoading, error } = useQuery(
+ *     'users',
+ *     'getUser',
+ *     { id: userId }
+ *   );
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!user) return <div>User not found</div>;
+ *
+ *   return <div>{user.name}</div>;
+ * }
+ * ```
+ *
+ * @example With options
+ * ```tsx
+ * const { data } = useQuery(
+ *   'users',
+ *   'listUsers',
+ *   { page: 1, limit: 10 },
+ *   {
+ *     staleTime: 60_000,
+ *     refetchOnWindowFocus: true,
+ *   }
+ * );
+ * ```
+ *
+ * @example Conditional query
+ * ```tsx
+ * const { data } = useQuery(
+ *   'users',
+ *   'getUser',
+ *   { id: userId },
+ *   { enabled: !!userId }
+ * );
+ * ```
+ */
+export declare function useQuery<TRouter, TNamespace extends keyof TRouter, TProcedureName extends keyof GetProceduresFromCollection<TRouter[TNamespace]>>(namespace: TNamespace, procedureName: TProcedureName, input: InferProcedureInput<GetProcedure<TRouter, TNamespace, TProcedureName>>, options?: VeloxUseQueryOptions<InferProcedureOutput<GetProcedure<TRouter, TNamespace, TProcedureName>>>): UseQueryResult<InferProcedureOutput<GetProcedure<TRouter, TNamespace, TProcedureName>>, Error>;
+/**
+ * Type-safe mutation hook for VeloxTS procedures
+ *
+ * Wraps React Query's useMutation with automatic type inference from
+ * your backend procedure definitions. The hook provides:
+ * - Full type safety for input and output
+ * - Access to mutation lifecycle callbacks (onSuccess, onError, etc.)
+ * - Optimistic update support via context
+ *
+ * @template TRouter - The router type
+ * @template TNamespace - The namespace key
+ * @template TProcedureName - The procedure name (should be a mutation)
+ *
+ * @param namespace - Resource namespace (e.g., 'users')
+ * @param procedureName - Procedure name (e.g., 'createUser')
+ * @param options - React Query mutation options (optional)
+ *
+ * @returns UseMutationResult with typed variables, data, and error
+ *
+ * @example Basic usage
+ * ```tsx
+ * function CreateUserForm() {
+ *   const { mutate: createUser, isPending, error } = useMutation(
+ *     'users',
+ *     'createUser'
+ *   );
+ *
+ *   const handleSubmit = (e: FormEvent) => {
+ *     e.preventDefault();
+ *     createUser({ name: 'Alice', email: 'alice@example.com' });
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <button type="submit" disabled={isPending}>
+ *         {isPending ? 'Creating...' : 'Create User'}
+ *       </button>
+ *       {error && <div>{error.message}</div>}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example With cache invalidation
+ * ```tsx
+ * const queryClient = useQueryClient();
+ *
+ * const { mutate } = useMutation('users', 'createUser', {
+ *   onSuccess: () => {
+ *     queryClient.invalidateQueries({ queryKey: ['users', 'listUsers'] });
+ *   },
+ * });
+ * ```
+ *
+ * @example With optimistic update
+ * ```tsx
+ * const { mutate } = useMutation('users', 'updateUser', {
+ *   onMutate: async (newUser) => {
+ *     await queryClient.cancelQueries({ queryKey: ['users', 'getUser', { id: newUser.id }] });
+ *     const previousUser = queryClient.getQueryData(['users', 'getUser', { id: newUser.id }]);
+ *     queryClient.setQueryData(['users', 'getUser', { id: newUser.id }], newUser);
+ *     return { previousUser };
+ *   },
+ *   onError: (err, newUser, context) => {
+ *     if (context?.previousUser) {
+ *       queryClient.setQueryData(['users', 'getUser', { id: newUser.id }], context.previousUser);
+ *     }
+ *   },
+ * });
+ * ```
+ */
+export declare function useMutation<TRouter, TNamespace extends keyof TRouter, TProcedureName extends keyof GetProceduresFromCollection<TRouter[TNamespace]>, TContext = unknown>(namespace: TNamespace, procedureName: TProcedureName, options?: VeloxUseMutationOptions<InferProcedureOutput<GetProcedure<TRouter, TNamespace, TProcedureName>>, InferProcedureInput<GetProcedure<TRouter, TNamespace, TProcedureName>>, Error, TContext>): UseMutationResult<InferProcedureOutput<GetProcedure<TRouter, TNamespace, TProcedureName>>, Error, InferProcedureInput<GetProcedure<TRouter, TNamespace, TProcedureName>>, TContext>;
+/**
+ * Hook to access React Query's QueryClient for manual cache operations
+ *
+ * This is a direct re-export of React Query's useQueryClient for convenience.
+ * Use this for manual cache invalidation, prefetching, or optimistic updates.
+ *
+ * @returns The QueryClient instance
+ *
+ * @example Cache invalidation
+ * ```tsx
+ * function MyComponent() {
+ *   const queryClient = useQueryClient();
+ *   const { mutate } = useMutation('users', 'createUser', {
+ *     onSuccess: () => {
+ *       // Invalidate and refetch users list
+ *       queryClient.invalidateQueries({ queryKey: ['users', 'listUsers'] });
+ *     },
+ *   });
+ * }
+ * ```
+ *
+ * @example Prefetching
+ * ```tsx
+ * function UserListItem({ userId }: { userId: string }) {
+ *   const queryClient = useQueryClient();
+ *
+ *   const handleMouseEnter = () => {
+ *     // Prefetch user data on hover
+ *     queryClient.prefetchQuery({
+ *       queryKey: ['users', 'getUser', { id: userId }],
+ *       queryFn: () => api.users.getUser({ id: userId }),
+ *     });
+ *   };
+ * }
+ * ```
+ */
+export declare function useQueryClient(): QueryClient;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/react/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/react/hooks.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EAIpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,KAAK,EACV,YAAY,EACZ,2BAA2B,EAC3B,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAOpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EACP,UAAU,SAAS,MAAM,OAAO,EAChC,cAAc,SAAS,MAAM,2BAA2B,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,EAE7E,SAAS,EAAE,UAAU,EACrB,aAAa,EAAE,cAAc,EAC7B,KAAK,EAAE,mBAAmB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,EAC7E,OAAO,CAAC,EAAE,oBAAoB,CAC5B,oBAAoB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CACxE,GACA,cAAc,CAAC,oBAAoB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,CA2BhG;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,wBAAgB,WAAW,CACzB,OAAO,EACP,UAAU,SAAS,MAAM,OAAO,EAChC,cAAc,SAAS,MAAM,2BAA2B,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,EAC7E,QAAQ,GAAG,OAAO,EAElB,SAAS,EAAE,UAAU,EACrB,aAAa,EAAE,cAAc,EAC7B,OAAO,CAAC,EAAE,uBAAuB,CAC/B,oBAAoB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,EACvE,mBAAmB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,EACtE,KAAK,EACL,QAAQ,CACT,GACA,iBAAiB,CAClB,oBAAoB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,EACvE,KAAK,EACL,mBAAmB,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,EACtE,QAAQ,CACT,CAwBA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAE5C"}

package/dist/react/hooks.js

@@ -0,0 +1,224 @@
+/**
+ * React hooks for VeloxTS API calls
+ *
+ * Provides type-safe hooks for queries and mutations
+ * with full integration with React Query.
+ *
+ * @module @veloxts/client/react/hooks
+ */
+import { useMutation as useReactMutation, useQuery as useReactQuery, useQueryClient as useReactQueryClient, } from '@tanstack/react-query';
+import { useVeloxContext } from './provider.js';
+import { buildQueryKey } from './utils.js';
+// ============================================================================
+// useQuery Hook
+// ============================================================================
+/**
+ * Type-safe query hook for VeloxTS procedures
+ *
+ * Wraps React Query's useQuery with automatic type inference from
+ * your backend procedure definitions. The hook automatically:
+ * - Builds a stable query key from namespace, procedure, and input
+ * - Provides full type safety for input and output
+ * - Integrates with React Query's caching and refetching
+ *
+ * @template TRouter - The router type (typeof imported procedures)
+ * @template TNamespace - The namespace key (e.g., 'users', 'posts')
+ * @template TProcedureName - The procedure name (e.g., 'getUser', 'listUsers')
+ *
+ * @param namespace - Resource namespace (e.g., 'users')
+ * @param procedureName - Procedure name (e.g., 'getUser')
+ * @param input - Input matching the procedure's input schema
+ * @param options - React Query options (optional)
+ *
+ * @returns UseQueryResult with typed data and error
+ *
+ * @example Basic usage
+ * ```tsx
+ * function UserProfile({ userId }: { userId: string }) {
+ *   const { data: user, isLoading, error } = useQuery(
+ *     'users',
+ *     'getUser',
+ *     { id: userId }
+ *   );
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!user) return <div>User not found</div>;
+ *
+ *   return <div>{user.name}</div>;
+ * }
+ * ```
+ *
+ * @example With options
+ * ```tsx
+ * const { data } = useQuery(
+ *   'users',
+ *   'listUsers',
+ *   { page: 1, limit: 10 },
+ *   {
+ *     staleTime: 60_000,
+ *     refetchOnWindowFocus: true,
+ *   }
+ * );
+ * ```
+ *
+ * @example Conditional query
+ * ```tsx
+ * const { data } = useQuery(
+ *   'users',
+ *   'getUser',
+ *   { id: userId },
+ *   { enabled: !!userId }
+ * );
+ * ```
+ */
+export function useQuery(namespace, procedureName, input, options) {
+    const { client } = useVeloxContext();
+    // Build stable query key
+    const queryKey = buildQueryKey(namespace, procedureName, input);
+    return useReactQuery({
+        queryKey,
+        queryFn: async () => {
+            // Access the namespace client
+            // Use unknown intermediate cast for type safety with generic constraints
+            const namespaceClient = client[namespace];
+            // Get the procedure function
+            const procedure = namespaceClient[procedureName];
+            // Call the procedure with input
+            return procedure(input);
+        },
+        ...options,
+    });
+}
+// ============================================================================
+// useMutation Hook
+// ============================================================================
+/**
+ * Type-safe mutation hook for VeloxTS procedures
+ *
+ * Wraps React Query's useMutation with automatic type inference from
+ * your backend procedure definitions. The hook provides:
+ * - Full type safety for input and output
+ * - Access to mutation lifecycle callbacks (onSuccess, onError, etc.)
+ * - Optimistic update support via context
+ *
+ * @template TRouter - The router type
+ * @template TNamespace - The namespace key
+ * @template TProcedureName - The procedure name (should be a mutation)
+ *
+ * @param namespace - Resource namespace (e.g., 'users')
+ * @param procedureName - Procedure name (e.g., 'createUser')
+ * @param options - React Query mutation options (optional)
+ *
+ * @returns UseMutationResult with typed variables, data, and error
+ *
+ * @example Basic usage
+ * ```tsx
+ * function CreateUserForm() {
+ *   const { mutate: createUser, isPending, error } = useMutation(
+ *     'users',
+ *     'createUser'
+ *   );
+ *
+ *   const handleSubmit = (e: FormEvent) => {
+ *     e.preventDefault();
+ *     createUser({ name: 'Alice', email: 'alice@example.com' });
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <button type="submit" disabled={isPending}>
+ *         {isPending ? 'Creating...' : 'Create User'}
+ *       </button>
+ *       {error && <div>{error.message}</div>}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example With cache invalidation
+ * ```tsx
+ * const queryClient = useQueryClient();
+ *
+ * const { mutate } = useMutation('users', 'createUser', {
+ *   onSuccess: () => {
+ *     queryClient.invalidateQueries({ queryKey: ['users', 'listUsers'] });
+ *   },
+ * });
+ * ```
+ *
+ * @example With optimistic update
+ * ```tsx
+ * const { mutate } = useMutation('users', 'updateUser', {
+ *   onMutate: async (newUser) => {
+ *     await queryClient.cancelQueries({ queryKey: ['users', 'getUser', { id: newUser.id }] });
+ *     const previousUser = queryClient.getQueryData(['users', 'getUser', { id: newUser.id }]);
+ *     queryClient.setQueryData(['users', 'getUser', { id: newUser.id }], newUser);
+ *     return { previousUser };
+ *   },
+ *   onError: (err, newUser, context) => {
+ *     if (context?.previousUser) {
+ *       queryClient.setQueryData(['users', 'getUser', { id: newUser.id }], context.previousUser);
+ *     }
+ *   },
+ * });
+ * ```
+ */
+export function useMutation(namespace, procedureName, options) {
+    const { client } = useVeloxContext();
+    return useReactMutation({
+        mutationFn: async (input) => {
+            // Access the namespace client
+            // Use unknown intermediate cast for type safety with generic constraints
+            const namespaceClient = client[namespace];
+            // Get the procedure function
+            const procedure = namespaceClient[procedureName];
+            // Call the procedure with input
+            return procedure(input);
+        },
+        ...options,
+    });
+}
+// ============================================================================
+// useQueryClient Hook
+// ============================================================================
+/**
+ * Hook to access React Query's QueryClient for manual cache operations
+ *
+ * This is a direct re-export of React Query's useQueryClient for convenience.
+ * Use this for manual cache invalidation, prefetching, or optimistic updates.
+ *
+ * @returns The QueryClient instance
+ *
+ * @example Cache invalidation
+ * ```tsx
+ * function MyComponent() {
+ *   const queryClient = useQueryClient();
+ *   const { mutate } = useMutation('users', 'createUser', {
+ *     onSuccess: () => {
+ *       // Invalidate and refetch users list
+ *       queryClient.invalidateQueries({ queryKey: ['users', 'listUsers'] });
+ *     },
+ *   });
+ * }
+ * ```
+ *
+ * @example Prefetching
+ * ```tsx
+ * function UserListItem({ userId }: { userId: string }) {
+ *   const queryClient = useQueryClient();
+ *
+ *   const handleMouseEnter = () => {
+ *     // Prefetch user data on hover
+ *     queryClient.prefetchQuery({
+ *       queryKey: ['users', 'getUser', { id: userId }],
+ *       queryFn: () => api.users.getUser({ id: userId }),
+ *     });
+ *   };
+ * }
+ * ```
+ */
+export function useQueryClient() {
+    return useReactQueryClient();
+}
+//# sourceMappingURL=hooks.js.map

package/dist/react/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/react/hooks.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAIL,WAAW,IAAI,gBAAgB,EAC/B,QAAQ,IAAI,aAAa,EACzB,cAAc,IAAI,mBAAmB,GACtC,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOhD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,+EAA+E;AAC/E,gBAAgB;AAChB,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,UAAU,QAAQ,CAKtB,SAAqB,EACrB,aAA6B,EAC7B,KAA6E,EAC7E,OAEC;IAED,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAW,CAAC;IAK9C,yBAAyB;IACzB,MAAM,QAAQ,GAAG,aAAa,CAAC,SAAmB,EAAE,aAAuB,EAAE,KAAK,CAAC,CAAC;IAEpF,OAAO,aAAa,CAAiB;QACnC,QAAQ;QACR,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,8BAA8B;YAC9B,yEAAyE;YACzE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAGvC,CAAC;YAEF,6BAA6B;YAC7B,MAAM,SAAS,GAAG,eAAe,CAAC,aAAuB,CAAC,CAAC;YAE3D,gCAAgC;YAChC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,GAAG,OAAO;KACX,CAAC,CAAC;AACL,CAAC;AAED,+EAA+E;AAC/E,mBAAmB;AACnB,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,MAAM,UAAU,WAAW,CAMzB,SAAqB,EACrB,aAA6B,EAC7B,OAKC;IAOD,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAW,CAAC;IAM9C,OAAO,gBAAgB,CAAmC;QACxD,UAAU,EAAE,KAAK,EAAE,KAAa,EAAE,EAAE;YAClC,8BAA8B;YAC9B,yEAAyE;YACzE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAGvC,CAAC;YAEF,6BAA6B;YAC7B,MAAM,SAAS,GAAG,eAAe,CAAC,aAAuB,CAAC,CAAC;YAE3D,gCAAgC;YAChC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,GAAG,OAAO;KACX,CAAC,CAAC;AACL,CAAC;AAED,+EAA+E;AAC/E,sBAAsB;AACtB,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,mBAAmB,EAAE,CAAC;AAC/B,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @veloxts/client/react - React hooks for VeloxTS
+ *
+ * Type-safe React Query integration for VeloxTS procedures.
+ * Provides hooks that automatically infer types from your backend
+ * procedure definitions without any code generation.
+ *
+ * @example Quick Start
+ * ```tsx
+ * // 1. Define your router type (imports backend procedure types)
+ * import type { userProcedures, postProcedures } from '../server/procedures';
+ *
+ * type AppRouter = {
+ *   users: typeof userProcedures;
+ *   posts: typeof postProcedures;
+ * };
+ *
+ * // 2. Wrap your app with VeloxProvider
+ * import { VeloxProvider } from '@veloxts/client/react';
+ *
+ * function App() {
+ *   return (
+ *     <VeloxProvider<AppRouter> config={{ baseUrl: '/api' }}>
+ *       <UserList />
+ *     </VeloxProvider>
+ *   );
+ * }
+ *
+ * // 3. Use hooks in components
+ * import { useQuery, useMutation, useQueryClient } from '@veloxts/client/react';
+ *
+ * function UserList() {
+ *   // Query - data is fully typed!
+ *   const { data, isLoading } = useQuery('users', 'listUsers', {});
+ *
+ *   // Mutation with cache invalidation
+ *   const queryClient = useQueryClient();
+ *   const { mutate: createUser } = useMutation('users', 'createUser', {
+ *     onSuccess: () => {
+ *       queryClient.invalidateQueries({ queryKey: ['users'] });
+ *     },
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <ul>
+ *       {data?.data.map(user => (
+ *         <li key={user.id}>{user.name}</li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @module @veloxts/client/react
+ */
+export type { VeloxContextValue, VeloxProviderProps } from './provider.js';
+export { useVeloxContext, VeloxProvider } from './provider.js';
+export { useMutation, useQuery, useQueryClient } from './hooks.js';
+export { buildQueryKey, getQueryData, invalidateNamespace, invalidateProcedure, invalidateQuery, setQueryData, } from './utils.js';
+export type { ClientConfig, ClientFromRouter, GetProcedure, GetProceduresFromCollection, InferProcedureInput, InferProcedureOutput, ProcedureCollection, VeloxQueryKey, VeloxUseMutationOptions, VeloxUseQueryOptions, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAMH,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM/D,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAMnE,OAAO,EACL,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,YAAY,GACb,MAAM,YAAY,CAAC;AAMpB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,2BAA2B,EAC3B,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,YAAY,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,67 @@
+/**
+ * @veloxts/client/react - React hooks for VeloxTS
+ *
+ * Type-safe React Query integration for VeloxTS procedures.
+ * Provides hooks that automatically infer types from your backend
+ * procedure definitions without any code generation.
+ *
+ * @example Quick Start
+ * ```tsx
+ * // 1. Define your router type (imports backend procedure types)
+ * import type { userProcedures, postProcedures } from '../server/procedures';
+ *
+ * type AppRouter = {
+ *   users: typeof userProcedures;
+ *   posts: typeof postProcedures;
+ * };
+ *
+ * // 2. Wrap your app with VeloxProvider
+ * import { VeloxProvider } from '@veloxts/client/react';
+ *
+ * function App() {
+ *   return (
+ *     <VeloxProvider<AppRouter> config={{ baseUrl: '/api' }}>
+ *       <UserList />
+ *     </VeloxProvider>
+ *   );
+ * }
+ *
+ * // 3. Use hooks in components
+ * import { useQuery, useMutation, useQueryClient } from '@veloxts/client/react';
+ *
+ * function UserList() {
+ *   // Query - data is fully typed!
+ *   const { data, isLoading } = useQuery('users', 'listUsers', {});
+ *
+ *   // Mutation with cache invalidation
+ *   const queryClient = useQueryClient();
+ *   const { mutate: createUser } = useMutation('users', 'createUser', {
+ *     onSuccess: () => {
+ *       queryClient.invalidateQueries({ queryKey: ['users'] });
+ *     },
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <ul>
+ *       {data?.data.map(user => (
+ *         <li key={user.id}>{user.name}</li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @module @veloxts/client/react
+ */
+export { useVeloxContext, VeloxProvider } from './provider.js';
+// ============================================================================
+// Hooks
+// ============================================================================
+export { useMutation, useQuery, useQueryClient } from './hooks.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+export { buildQueryKey, getQueryData, invalidateNamespace, invalidateProcedure, invalidateQuery, setQueryData, } from './utils.js';
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AAOH,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE/D,+EAA+E;AAC/E,QAAQ;AACR,+EAA+E;AAE/E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEnE,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E,OAAO,EACL,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,YAAY,GACb,MAAM,YAAY,CAAC"}

package/dist/react/provider.d.ts

@@ -0,0 +1,108 @@
+/**
+ * VeloxProvider - React context provider for VeloxTS client
+ *
+ * Wraps your React application to provide access to the VeloxTS client
+ * and React Query's QueryClient.
+ *
+ * @module @veloxts/client/react/provider
+ */
+import { type ReactNode } from 'react';
+import type { VeloxContextValue, VeloxProviderProps } from './types.js';
+/**
+ * Provider component that sets up VeloxTS client and React Query
+ *
+ * This provider:
+ * - Creates a memoized VeloxTS client instance from the provided config
+ * - Sets up React Query's QueryClientProvider
+ * - Makes the client available to hooks via React context
+ *
+ * @template TRouter - The router type defining your procedure collections
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { VeloxProvider } from '@veloxts/client/react';
+ * import type { userProcedures, postProcedures } from './server/procedures';
+ *
+ * type AppRouter = {
+ *   users: typeof userProcedures;
+ *   posts: typeof postProcedures;
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <VeloxProvider<AppRouter> config={{ baseUrl: '/api' }}>
+ *       <YourApp />
+ *     </VeloxProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom QueryClient
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query';
+ *
+ * const queryClient = new QueryClient({
+ *   defaultOptions: {
+ *     queries: { staleTime: 60_000 },
+ *   },
+ * });
+ *
+ * function App() {
+ *   return (
+ *     <VeloxProvider<AppRouter>
+ *       config={{ baseUrl: '/api' }}
+ *       queryClient={queryClient}
+ *     >
+ *       <YourApp />
+ *     </VeloxProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom headers
+ * ```tsx
+ * function App() {
+ *   const token = useAuthToken();
+ *
+ *   const config = useMemo(() => ({
+ *     baseUrl: '/api',
+ *     headers: {
+ *       Authorization: `Bearer ${token}`,
+ *     },
+ *   }), [token]);
+ *
+ *   return (
+ *     <VeloxProvider<AppRouter> config={config}>
+ *       <YourApp />
+ *     </VeloxProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function VeloxProvider<TRouter>({ children, config, queryClient: providedQueryClient, }: VeloxProviderProps<TRouter>): ReactNode;
+/**
+ * Hook to access VeloxTS client from context
+ *
+ * This is primarily used internally by useQuery and useMutation hooks,
+ * but can also be used directly for advanced use cases.
+ *
+ * @template TRouter - The router type for type-safe client access
+ * @returns The context value containing the typed client
+ * @throws Error if used outside of VeloxProvider
+ *
+ * @example Direct client access (advanced)
+ * ```tsx
+ * function MyComponent() {
+ *   const { client } = useVeloxContext<AppRouter>();
+ *
+ *   // Direct client access for edge cases
+ *   const handleClick = async () => {
+ *     const user = await client.users.getUser({ id: '123' });
+ *     console.log(user);
+ *   };
+ * }
+ * ```
+ */
+export declare function useVeloxContext<TRouter>(): VeloxContextValue<TRouter>;
+export type { VeloxProviderProps, VeloxContextValue };
+//# sourceMappingURL=provider.d.ts.map

package/dist/react/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/react/provider.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAwCxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,EACrC,QAAQ,EACR,MAAM,EACN,WAAW,EAAE,mBAAmB,GACjC,EAAE,kBAAkB,CAAC,OAAO,CAAC,GAAG,SAAS,CAoBzC;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,OAAO,KAAK,iBAAiB,CAAC,OAAO,CAAC,CAWrE;AAMD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}