@sylphx/lens-react 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -1,9 +1,220 @@
+import { LensClient } from "@sylphx/lens-client";
+import { ReactElement, ReactNode } from "react";
+interface LensProviderProps {
+	/** Lens client instance */
+	client: LensClient<any, any>;
+	/** Children */
+	children: ReactNode;
+}
 /**
- * @sylphx/lens-react
- *
- * React bindings for Lens API framework.
- * Hooks and context provider for reactive data access.
- */
-export { LensProvider, useLensClient, type LensProviderProps } from "./context";
-export { useQuery, useLazyQuery, useMutation, type UseQueryResult, type UseLazyQueryResult, type UseMutationResult, type UseQueryOptions, type MutationFn, } from "./hooks";
-//# sourceMappingURL=index.d.ts.map
+* Provides Lens client to component tree
+*
+* @example
+* ```tsx
+* import { createClient, http } from '@sylphx/lens-client';
+* import { LensProvider } from '@sylphx/lens-react';
+* import type { AppRouter } from './server';
+*
+* const client = createClient<AppRouter>({
+*   transport: http({ url: '/api' }),
+* });
+*
+* function App() {
+*   return (
+*     <LensProvider client={client}>
+*       <UserProfile />
+*     </LensProvider>
+*   );
+* }
+* ```
+*/
+declare function LensProvider({ client, children }: LensProviderProps): ReactElement;
+/**
+* Get Lens client from context
+*
+* @throws Error if used outside LensProvider
+*
+* @example
+* ```tsx
+* function UserProfile({ userId }: { userId: string }) {
+*   const client = useLensClient<AppRouter>();
+*   const { data } = useQuery(client.user.get({ id: userId }));
+*   return <h1>{data?.name}</h1>;
+* }
+* ```
+*/
+declare function useLensClient<TRouter = any>(): LensClient<any, any> & TRouter;
+import { MutationResult, QueryResult } from "@sylphx/lens-client";
+/** Result of useQuery hook */
+interface UseQueryResult<T> {
+	/** Query data (null if loading or error) */
+	data: T | null;
+	/** Loading state */
+	loading: boolean;
+	/** Error state */
+	error: Error | null;
+	/** Refetch the query */
+	refetch: () => void;
+}
+/** Result of useMutation hook */
+interface UseMutationResult<
+	TInput,
+	TOutput
+> {
+	/** Execute the mutation */
+	mutate: (input: TInput) => Promise<MutationResult<TOutput>>;
+	/** Mutation is in progress */
+	loading: boolean;
+	/** Mutation error */
+	error: Error | null;
+	/** Last mutation result */
+	data: TOutput | null;
+	/** Reset mutation state */
+	reset: () => void;
+}
+/** Options for useQuery */
+interface UseQueryOptions {
+	/** Skip the query (don't execute) */
+	skip?: boolean;
+}
+/**
+* Subscribe to a query with reactive updates
+*
+* @param query - QueryResult from client API call
+* @param options - Query options
+*
+* @example
+* ```tsx
+* // Basic usage
+* function UserProfile({ userId }: { userId: string }) {
+*   const client = useLensClient();
+*   const { data: user, loading, error } = useQuery(client.user.get({ id: userId }));
+*
+*   if (loading) return <Spinner />;
+*   if (error) return <Error message={error.message} />;
+*   if (!user) return <NotFound />;
+*
+*   return <h1>{user.name}</h1>;
+* }
+*
+* // With select (type-safe field selection)
+* function UserName({ userId }: { userId: string }) {
+*   const client = useLensClient();
+*   const { data } = useQuery(
+*     client.user.get({ id: userId }).select({ name: true })
+*   );
+*   // data is { name: string } | null
+*   return <span>{data?.name}</span>;
+* }
+*
+* // Skip query conditionally
+* function ConditionalQuery({ shouldFetch }: { shouldFetch: boolean }) {
+*   const client = useLensClient();
+*   const { data } = useQuery(client.user.list(), { skip: !shouldFetch });
+* }
+* ```
+*/
+declare function useQuery<T>(query: QueryResult<T>, options?: UseQueryOptions): UseQueryResult<T>;
+/** Mutation function type */
+type MutationFn<
+	TInput,
+	TOutput
+> = (input: TInput) => Promise<MutationResult<TOutput>>;
+/**
+* Execute mutations with loading/error state
+*
+* @param mutationFn - Mutation function from client API
+*
+* @example
+* \`\`\`tsx
+* function CreatePost() {
+*   const client = useLensClient();
+*   const { mutate, loading, error, data } = useMutation(client.post.create);
+*
+*   const handleSubmit = async (formData: FormData) => {
+*     try {
+*       const result = await mutate({
+*         title: formData.get('title'),
+*         content: formData.get('content'),
+*       });
+*       console.log('Created:', result.data);
+*     } catch (err) {
+*       console.error('Failed:', err);
+*     }
+*   };
+*
+*   return (
+*     <form onSubmit={handleSubmit}>
+*       <button type="submit" disabled={loading}>
+*         {loading ? 'Creating...' : 'Create'}
+*       </button>
+*       {error && <p className="error">{error.message}</p>}
+*     </form>
+*   );
+* }
+*
+* // With optimistic updates
+* function UpdatePost({ postId }: { postId: string }) {
+*   const client = useLensClient();
+*   const { mutate } = useMutation(client.post.update);
+*
+*   const handleUpdate = async (title: string) => {
+*     const result = await mutate({ id: postId, title });
+*     // result.rollback?.() can undo optimistic update
+*   };
+* }
+* \`\`\`
+*/
+declare function useMutation<
+	TInput,
+	TOutput
+>(mutationFn: MutationFn<TInput, TOutput>): UseMutationResult<TInput, TOutput>;
+/** Result of useLazyQuery hook */
+interface UseLazyQueryResult<T> {
+	/** Execute the query */
+	execute: () => Promise<T>;
+	/** Query data (null if not executed or error) */
+	data: T | null;
+	/** Loading state */
+	loading: boolean;
+	/** Error state */
+	error: Error | null;
+	/** Reset query state */
+	reset: () => void;
+}
+/**
+* Execute a query on demand (not on mount)
+*
+* @param query - QueryResult from client API call
+*
+* @example
+* ```tsx
+* function SearchUsers() {
+*   const client = useLensClient();
+*   const [searchTerm, setSearchTerm] = useState('');
+*   const { execute, data, loading } = useLazyQuery(
+*     client.user.search({ query: searchTerm })
+*   );
+*
+*   const handleSearch = async () => {
+*     const users = await execute();
+*     console.log('Found:', users);
+*   };
+*
+*   return (
+*     <div>
+*       <input
+*         value={searchTerm}
+*         onChange={e => setSearchTerm(e.target.value)}
+*       />
+*       <button onClick={handleSearch} disabled={loading}>
+*         Search
+*       </button>
+*       {data?.map(user => <UserCard key={user.id} user={user} />)}
+*     </div>
+*   );
+* }
+* ```
+*/
+declare function useLazyQuery<T>(query: QueryResult<T>): UseLazyQueryResult<T>;
+export { useQuery, useMutation, useLensClient, useLazyQuery, UseQueryResult, UseQueryOptions, UseMutationResult, UseLazyQueryResult, MutationFn, LensProviderProps, LensProvider };