@sylphx/lens-solid 1.0.2

package/dist/primitives.d.ts

@@ -0,0 +1,151 @@
+/**
+ * @sylphx/lens-solid - Primitives
+ *
+ * SolidJS reactive primitives for Lens queries and mutations.
+ * Uses SolidJS fine-grained reactivity for optimal performance.
+ */
+import type { MutationResult, QueryResult } from "@sylphx/lens-client";
+import { type Accessor } from "solid-js";
+/** Query result with reactive signals */
+export interface CreateQueryResult<T> {
+    /** Reactive data accessor */
+    data: Accessor<T | null>;
+    /** Reactive loading state */
+    loading: Accessor<boolean>;
+    /** Reactive error state */
+    error: Accessor<Error | null>;
+    /** Refetch the query */
+    refetch: () => void;
+}
+/** Mutation result with reactive signals */
+export interface CreateMutationResult<TInput, TOutput> {
+    /** Reactive data accessor */
+    data: Accessor<TOutput | null>;
+    /** Reactive loading state */
+    loading: Accessor<boolean>;
+    /** Reactive error state */
+    error: Accessor<Error | null>;
+    /** Execute the mutation */
+    mutate: (input: TInput) => Promise<MutationResult<TOutput>>;
+    /** Reset state */
+    reset: () => void;
+}
+/** Lazy query result */
+export interface CreateLazyQueryResult<T> {
+    /** Reactive data accessor */
+    data: Accessor<T | null>;
+    /** Reactive loading state */
+    loading: Accessor<boolean>;
+    /** Reactive error state */
+    error: Accessor<Error | null>;
+    /** Execute the query */
+    execute: () => Promise<T>;
+    /** Reset state */
+    reset: () => void;
+}
+/** Query options */
+export interface CreateQueryOptions {
+    /** Skip the query (don't execute) */
+    skip?: boolean;
+}
+/** Mutation function type */
+export type MutationFn<TInput, TOutput> = (input: TInput) => Promise<MutationResult<TOutput>>;
+/**
+ * Create a reactive query from a QueryResult.
+ * Automatically subscribes to updates and manages cleanup.
+ *
+ * @example
+ * ```tsx
+ * import { createQuery } from '@sylphx/lens-solid';
+ *
+ * function UserProfile(props: { userId: string }) {
+ *   const user = createQuery(() => client.queries.getUser({ id: props.userId }));
+ *
+ *   return (
+ *     <Show when={!user.loading()} fallback={<Spinner />}>
+ *       <Show when={user.data()} fallback={<NotFound />}>
+ *         {(data) => <h1>{data().name}</h1>}
+ *       </Show>
+ *     </Show>
+ *   );
+ * }
+ * ```
+ */
+export declare function createQuery<T>(queryFn: () => QueryResult<T>, options?: CreateQueryOptions): CreateQueryResult<T>;
+/**
+ * Create a reactive mutation with loading/error state.
+ *
+ * @example
+ * ```tsx
+ * import { createMutation } from '@sylphx/lens-solid';
+ *
+ * function CreatePostForm() {
+ *   const createPost = createMutation(client.mutations.createPost);
+ *
+ *   const handleSubmit = async (e: Event) => {
+ *     e.preventDefault();
+ *     try {
+ *       const result = await createPost.mutate({ title: 'Hello World' });
+ *       console.log('Created:', result.data);
+ *     } catch (err) {
+ *       console.error('Failed:', err);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <button type="submit" disabled={createPost.loading()}>
+ *         {createPost.loading() ? 'Creating...' : 'Create'}
+ *       </button>
+ *       <Show when={createPost.error()}>
+ *         {(err) => <p class="error">{err().message}</p>}
+ *       </Show>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export declare function createMutation<TInput, TOutput>(mutationFn: MutationFn<TInput, TOutput>): CreateMutationResult<TInput, TOutput>;
+/**
+ * Create a lazy query that executes on demand.
+ *
+ * @example
+ * ```tsx
+ * import { createLazyQuery } from '@sylphx/lens-solid';
+ *
+ * function SearchUsers() {
+ *   const [searchTerm, setSearchTerm] = createSignal('');
+ *   const search = createLazyQuery(() =>
+ *     client.queries.searchUsers({ query: searchTerm() })
+ *   );
+ *
+ *   const handleSearch = async () => {
+ *     const results = await search.execute();
+ *     console.log('Found:', results);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         value={searchTerm()}
+ *         onInput={(e) => setSearchTerm(e.currentTarget.value)}
+ *       />
+ *       <button onClick={handleSearch} disabled={search.loading()}>
+ *         Search
+ *       </button>
+ *       <Show when={search.data()}>
+ *         {(users) => (
+ *           <ul>
+ *             <For each={users()}>
+ *               {(user) => <li>{user.name}</li>}
+ *             </For>
+ *           </ul>
+ *         )}
+ *       </Show>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function createLazyQuery<T>(queryFn: () => QueryResult<T>): CreateLazyQueryResult<T>;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,KAAK,QAAQ,EAA2B,MAAM,UAAU,CAAC;AAMlE,yCAAyC;AACzC,MAAM,WAAW,iBAAiB,CAAC,CAAC;IACnC,6BAA6B;IAC7B,IAAI,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACzB,6BAA6B;IAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IAC9B,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,4CAA4C;AAC5C,MAAM,WAAW,oBAAoB,CAAC,MAAM,EAAE,OAAO;IACpD,6BAA6B;IAC7B,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC/B,6BAA6B;IAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5D,kBAAkB;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,wBAAwB;AACxB,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,6BAA6B;IAC7B,IAAI,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACzB,6BAA6B;IAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IAC9B,wBAAwB;IACxB,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,kBAAkB;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,oBAAoB;AACpB,MAAM,WAAW,kBAAkB;IAClC,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,6BAA6B;AAC7B,MAAM,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;AAM9F;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC5B,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,CAAC,EAC7B,OAAO,CAAC,EAAE,kBAAkB,GAC1B,iBAAiB,CAAC,CAAC,CAAC,CAgEtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,EAC7C,UAAU,EAAE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GACrC,oBAAoB,CAAC,MAAM,EAAE,OAAO,CAAC,CAmCvC;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAoC1F"}

package/dist/primitives.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Tests for SolidJS Primitives
+ */
+export {};
+//# sourceMappingURL=primitives.test.d.ts.map

package/dist/primitives.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.test.d.ts","sourceRoot":"","sources":["../src/primitives.test.tsx"],"names":[],"mappings":"AAAA;;GAEG"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sylphx/lens-solid",
+  "version": "1.0.2",
+  "description": "SolidJS bindings for Lens API framework",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "bun build ./src/index.ts --outdir ./dist --target browser && bun run build:types",
+    "build:types": "tsc --emitDeclarationOnly --outDir ./dist",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "lens",
+    "solid",
+    "solidjs",
+    "reactive",
+    "signals"
+  ],
+  "author": "SylphxAI",
+  "license": "MIT",
+  "dependencies": {
+    "@sylphx/lens-client": "workspace:*"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.8.0"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
+    "solid-js": "^1.9.5",
+    "typescript": "^5.9.3"
+  }
+}

package/src/context.tsx

@@ -0,0 +1,86 @@
+/**
+ * @sylphx/lens-solid - Context
+ *
+ * SolidJS context for Lens client injection.
+ */
+
+import type { LensClient } from "@sylphx/lens-client";
+import { type ParentComponent, createContext, useContext } from "solid-js";
+
+// =============================================================================
+// Context
+// =============================================================================
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const LensClientContext = createContext<LensClient<any, any>>();
+
+// =============================================================================
+// Provider
+// =============================================================================
+
+export interface LensProviderProps {
+	/** Lens client instance */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	client: LensClient<any, any>;
+}
+
+/**
+ * Provider for Lens client in SolidJS.
+ *
+ * @example
+ * ```tsx
+ * import { createClient, httpLink } from '@sylphx/lens-client';
+ * import { LensProvider } from '@sylphx/lens-solid';
+ * import type { AppRouter } from './server';
+ *
+ * const client = createClient<AppRouter>({
+ *   links: [httpLink({ url: '/api' })],
+ * });
+ *
+ * function App() {
+ *   return (
+ *     <LensProvider client={client}>
+ *       <UserProfile />
+ *     </LensProvider>
+ *   );
+ * }
+ * ```
+ */
+export const LensProvider: ParentComponent<LensProviderProps> = (props) => {
+	return (
+		<LensClientContext.Provider value={props.client}>{props.children}</LensClientContext.Provider>
+	);
+};
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * Get Lens client from context.
+ *
+ * @throws Error if used outside LensProvider
+ *
+ * @example
+ * ```tsx
+ * function UserProfile() {
+ *   const client = useLensClient<AppRouter>();
+ *   const user = createQuery(() => client.queries.getUser({ id: '123' }));
+ *   return <h1>{user.data?.name}</h1>;
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useLensClient<TRouter = any>(): LensClient<any, any> & TRouter {
+	const client = useContext(LensClientContext);
+
+	if (!client) {
+		throw new Error(
+			"useLensClient must be used within a <LensProvider>. " +
+				"Make sure to wrap your app with <LensProvider client={client}>.",
+		);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return client as LensClient<any, any> & TRouter;
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+/**
+ * @sylphx/lens-solid
+ *
+ * SolidJS bindings for Lens API framework.
+ * Reactive primitives that integrate with SolidJS fine-grained reactivity.
+ */
+
+// =============================================================================
+// Context & Provider
+// =============================================================================
+
+export { LensProvider, useLensClient, type LensProviderProps } from "./context";
+
+// =============================================================================
+// Reactive Primitives
+// =============================================================================
+
+export {
+	// Query primitives
+	createQuery,
+	createLazyQuery,
+	// Mutation primitive
+	createMutation,
+	// Types
+	type CreateQueryResult,
+	type CreateMutationResult,
+	type CreateLazyQueryResult,
+	type CreateQueryOptions,
+	type MutationFn,
+} from "./primitives";

package/src/primitives.test.tsx

@@ -0,0 +1,279 @@
+/**
+ * Tests for SolidJS Primitives
+ */
+
+import { describe, expect, test } from "bun:test";
+import type { MutationResult, QueryResult } from "@sylphx/lens-client";
+import { createRoot } from "solid-js";
+import { createLazyQuery, createMutation, createQuery } from "./primitives";
+
+// =============================================================================
+// Mock QueryResult
+// =============================================================================
+
+function createMockQueryResult<T>(initialValue: T | null = null): QueryResult<T> & {
+	_setValue: (value: T) => void;
+	_setError: (error: Error) => void;
+} {
+	let currentValue = initialValue;
+	const subscribers: Array<(value: T) => void> = [];
+	let resolved = false;
+	let resolvePromise: ((value: T) => void) | null = null;
+	let rejectPromise: ((error: Error) => void) | null = null;
+
+	const promise = new Promise<T>((resolve, reject) => {
+		resolvePromise = resolve;
+		rejectPromise = reject;
+		if (initialValue !== null) {
+			resolved = true;
+			resolve(initialValue);
+		}
+	});
+
+	const result = {
+		get value() {
+			return currentValue;
+		},
+		signal: { value: currentValue } as any,
+		loading: { value: initialValue === null } as any,
+		error: { value: null } as any,
+		subscribe(callback?: (data: T) => void): () => void {
+			if (callback) {
+				subscribers.push(callback);
+				if (currentValue !== null) {
+					callback(currentValue);
+				}
+			}
+			return () => {
+				const idx = subscribers.indexOf(callback!);
+				if (idx >= 0) subscribers.splice(idx, 1);
+			};
+		},
+		select() {
+			return result as unknown as QueryResult<T>;
+		},
+		then<TResult1 = T, TResult2 = never>(
+			onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
+			onrejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
+		): Promise<TResult1 | TResult2> {
+			return promise.then(onfulfilled, onrejected);
+		},
+		// Test helpers
+		_setValue(value: T) {
+			currentValue = value;
+			subscribers.forEach((cb) => cb(value));
+			if (!resolved && resolvePromise) {
+				resolved = true;
+				resolvePromise(value);
+			}
+		},
+		_setError(error: Error) {
+			if (!resolved && rejectPromise) {
+				resolved = true;
+				rejectPromise(error);
+			}
+		},
+	};
+
+	return result as QueryResult<T> & {
+		_setValue: (value: T) => void;
+		_setError: (error: Error) => void;
+	};
+}
+
+// =============================================================================
+// Tests: createQuery
+// =============================================================================
+
+describe("createQuery", () => {
+	test("returns loading state initially", () => {
+		createRoot((dispose) => {
+			const mockQuery = createMockQueryResult<{ id: string; name: string }>();
+			const query = createQuery(() => mockQuery);
+
+			expect(query.loading()).toBe(true);
+			expect(query.data()).toBe(null);
+			expect(query.error()).toBe(null);
+
+			dispose();
+		});
+	});
+
+	test("returns data when query resolves", async () => {
+		await new Promise<void>((resolve) => {
+			createRoot(async (dispose) => {
+				// Create mock with initial value so promise resolves immediately
+				const mockQuery = createMockQueryResult<{ id: string; name: string }>({
+					id: "123",
+					name: "John",
+				});
+				const query = createQuery(() => mockQuery);
+
+				// Wait for promise to resolve
+				await new Promise((r) => setTimeout(r, 10));
+
+				expect(query.data()).toEqual({ id: "123", name: "John" });
+				expect(query.loading()).toBe(false);
+				expect(query.error()).toBe(null);
+
+				dispose();
+				resolve();
+			});
+		});
+	});
+
+	test("skips query when skip option is true", () => {
+		createRoot((dispose) => {
+			const mockQuery = createMockQueryResult<{ id: string }>();
+			const query = createQuery(() => mockQuery, { skip: true });
+
+			expect(query.loading()).toBe(false);
+			expect(query.data()).toBe(null);
+
+			dispose();
+		});
+	});
+});
+
+// =============================================================================
+// Tests: createMutation
+// =============================================================================
+
+describe("createMutation", () => {
+	test("executes mutation and returns result", async () => {
+		await new Promise<void>((resolve) => {
+			createRoot(async (dispose) => {
+				const mutationFn = async (input: { name: string }): Promise<
+					MutationResult<{ id: string; name: string }>
+				> => {
+					return { data: { id: "new-id", name: input.name } };
+				};
+
+				const mutation = createMutation(mutationFn);
+
+				expect(mutation.loading()).toBe(false);
+				expect(mutation.data()).toBe(null);
+
+				const result = await mutation.mutate({ name: "New User" });
+
+				expect(result.data).toEqual({ id: "new-id", name: "New User" });
+				expect(mutation.data()).toEqual({ id: "new-id", name: "New User" });
+				expect(mutation.loading()).toBe(false);
+
+				dispose();
+				resolve();
+			});
+		});
+	});
+
+	test("handles mutation error", async () => {
+		await new Promise<void>((resolve) => {
+			createRoot(async (dispose) => {
+				const mutationFn = async (_input: { name: string }): Promise<
+					MutationResult<{ id: string }>
+				> => {
+					throw new Error("Mutation failed");
+				};
+
+				const mutation = createMutation(mutationFn);
+
+				try {
+					await mutation.mutate({ name: "New User" });
+				} catch {
+					// Expected error
+				}
+
+				expect(mutation.error()?.message).toBe("Mutation failed");
+				expect(mutation.loading()).toBe(false);
+
+				dispose();
+				resolve();
+			});
+		});
+	});
+
+	test("reset clears mutation state", async () => {
+		await new Promise<void>((resolve) => {
+			createRoot(async (dispose) => {
+				const mutationFn = async (input: { name: string }): Promise<
+					MutationResult<{ id: string; name: string }>
+				> => {
+					return { data: { id: "new-id", name: input.name } };
+				};
+
+				const mutation = createMutation(mutationFn);
+				await mutation.mutate({ name: "New User" });
+
+				expect(mutation.data()).not.toBe(null);
+
+				mutation.reset();
+
+				expect(mutation.data()).toBe(null);
+				expect(mutation.error()).toBe(null);
+				expect(mutation.loading()).toBe(false);
+
+				dispose();
+				resolve();
+			});
+		});
+	});
+});
+
+// =============================================================================
+// Tests: createLazyQuery
+// =============================================================================
+
+describe("createLazyQuery", () => {
+	test("does not execute query on creation", () => {
+		createRoot((dispose) => {
+			const mockQuery = createMockQueryResult<{ id: string }>({ id: "123" });
+			const query = createLazyQuery(() => mockQuery);
+
+			expect(query.loading()).toBe(false);
+			expect(query.data()).toBe(null);
+
+			dispose();
+		});
+	});
+
+	test("executes query when execute is called", async () => {
+		await new Promise<void>((resolve) => {
+			createRoot(async (dispose) => {
+				const mockQuery = createMockQueryResult<{ id: string; name: string }>({
+					id: "123",
+					name: "John",
+				});
+				const query = createLazyQuery(() => mockQuery);
+
+				const result = await query.execute();
+
+				expect(result).toEqual({ id: "123", name: "John" });
+				expect(query.data()).toEqual({ id: "123", name: "John" });
+
+				dispose();
+				resolve();
+			});
+		});
+	});
+
+	test("reset clears query state", async () => {
+		await new Promise<void>((resolve) => {
+			createRoot(async (dispose) => {
+				const mockQuery = createMockQueryResult<{ id: string }>({ id: "123" });
+				const query = createLazyQuery(() => mockQuery);
+
+				await query.execute();
+				expect(query.data()).not.toBe(null);
+
+				query.reset();
+
+				expect(query.data()).toBe(null);
+				expect(query.error()).toBe(null);
+				expect(query.loading()).toBe(false);
+
+				dispose();
+				resolve();
+			});
+		});
+	});
+});