@sylphx/lens-react 1.0.2

package/dist/context.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @sylphx/lens-react - Context Provider
+ *
+ * Provides Lens client to React component tree.
+ */
+import type { LensClient } from "@sylphx/lens-client";
+import { type ReactNode } from "react";
+export interface LensProviderProps {
+    /** Lens client instance */
+    client: LensClient<any, any>;
+    /** Children */
+    children: ReactNode;
+}
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function LensProvider({ client, children }: LensProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>;
+ * }
+ * ```
+ */
+export declare function useLensClient<TRouter = any>(): LensClient<any, any> & TRouter;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAiBlE,MAAM,WAAW,iBAAiB;IACjC,2BAA2B;IAE3B,MAAM,EAAE,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC7B,eAAe;IACf,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAEnE;AAMD;;;;;;;;;;;;;GAaG;AAEH,wBAAgB,aAAa,CAAC,OAAO,GAAG,GAAG,KAAK,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,CAY7E"}

package/dist/hooks.d.ts

@@ -0,0 +1,190 @@
+/**
+ * @sylphx/lens-react - Hooks
+ *
+ * React hooks for Lens queries and mutations.
+ * Works with QueryResult from @sylphx/lens-client.
+ *
+ * @example
+ * ```tsx
+ * import { useLensClient, useQuery, useMutation } from '@sylphx/lens-react';
+ *
+ * function UserProfile({ userId }: { userId: string }) {
+ *   const client = useLensClient();
+ *   const { data: user, loading } = useQuery(client.user.get({ id: userId }));
+ *   if (loading) return <Spinner />;
+ *   return <h1>{user?.name}</h1>;
+ * }
+ *
+ * function CreatePost() {
+ *   const client = useLensClient();
+ *   const { mutate, loading } = useMutation(client.post.create);
+ *   const handleCreate = () => mutate({ title: 'Hello' });
+ *   return <button onClick={handleCreate} disabled={loading}>Create</button>;
+ * }
+ * ```
+ */
+import type { MutationResult, QueryResult } from "@sylphx/lens-client";
+/** Result of useQuery hook */
+export 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 */
+export 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 */
+export 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 });
+ * }
+ * ```
+ */
+export declare function useQuery<T>(query: QueryResult<T>, options?: UseQueryOptions): UseQueryResult<T>;
+/** Mutation function type */
+export 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
+ *   };
+ * }
+ * ```
+ */
+export declare function useMutation<TInput, TOutput>(mutationFn: MutationFn<TInput, TOutput>): UseMutationResult<TInput, TOutput>;
+/** Result of useLazyQuery hook */
+export 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>
+ *   );
+ * }
+ * ```
+ */
+export declare function useLazyQuery<T>(query: QueryResult<T>): UseLazyQueryResult<T>;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOvE,8BAA8B;AAC9B,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,4CAA4C;IAC5C,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,oBAAoB;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,iCAAiC;AACjC,MAAM,WAAW,iBAAiB,CAAC,MAAM,EAAE,OAAO;IACjD,2BAA2B;IAC3B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5D,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,2BAA2B;IAC3B,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC/B,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,CA0E/F;AAMD,6BAA6B;AAC7B,MAAM,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;AAE9F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,EAC1C,UAAU,EAAE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GACrC,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,CAoDpC;AAMD,kCAAkC;AAClC,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACpC,wBAAwB;IACxB,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,iDAAiD;IACjD,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,oBAAoB;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,kBAAkB;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,wBAAwB;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAiD5E"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAMhF,OAAO,EAEN,QAAQ,EACR,YAAY,EAEZ,WAAW,EAEX,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,UAAU,GACf,MAAM,SAAS,CAAC"}