@spooky-sync/client-solid 0.0.1-canary.9 → 0.0.1-canary.90

package/AGENTS.md

@@ -0,0 +1,66 @@
+# `@spooky-sync/client-solid` — agent guide
+
+## What this package is
+
+The SolidJS binding for sp00ky. Exposes a `Sp00kyProvider` that initializes a `Sp00kyClient` and a set of reactive hooks (`useDb`, `useQuery`, `useCrdtField`, `useFileUpload`, `useDownloadFile`). All hooks expect to be called inside a `<Sp00kyProvider>` boundary.
+
+## Setup pattern
+
+```ts
+// db.ts
+import type { SyncedDbConfig } from '@spooky-sync/client-solid';
+import { schema, SURQL_SCHEMA } from './schema.gen'; // generated by `spky generate`
+
+export const dbConfig: SyncedDbConfig<typeof schema> = {
+  schema,
+  schemaSurql: SURQL_SCHEMA,
+  database: {
+    namespace: 'main',
+    database: 'app',
+    endpoint: 'ws://localhost:8666/rpc',
+    store: 'memory',           // or 'indexeddb' for persistence
+    persistenceClient: 'localstorage',
+  },
+};
+```
+
+```tsx
+// App.tsx
+<Sp00kyProvider config={dbConfig}>{/* app */}</Sp00kyProvider>
+```
+
+## Key hooks
+
+- **`useDb<typeof schema>()`** — returns the `SyncedDb<S>` instance. Methods:
+  - `db.create(id, payload)` — `id` is a full record ID like `'thread:abc'`.
+  - `db.update(table, id, payload, options?)` — `options.debounced` coalesces updates.
+  - `db.delete(table, idOrSelector)`.
+  - `db.query(table)` — returns a `QueryBuilder`. Chain `.related()`, `.orderBy()`, `.limit()`, etc., end with `.build()`.
+  - `db.run(backend, route, payload)` — call a backend RPC route.
+  - `db.bucket(name)` — get a `BucketHandle` for file storage.
+  - `db.useRemote(fn)` — escape hatch to the raw `Surreal` client (skips cache).
+  - `db.authenticate(token)`, `db.signOut()`, `db.auth`.
+  - `db.pendingMutationCount`, `db.subscribeToPendingMutations(cb)`.
+- **`useQuery(() => db.query(...).build())`** — reactive query. Returns `{ data, status, error, ... }` accessors. The factory function is tracked, so passing reactive params (signals) re-runs the query.
+- **`useCrdtField(table, () => recordId, field, () => valueAccessor)`** — wires a CRDT text field to a Loro doc. Pair with `db.update(table, id, { [field]: newValue }, { debounced: true })` so rapid keystrokes don't flood the queue. *All four arguments take accessor functions where reactive — that's deliberate, for SolidJS tracking.*
+- **`useFileUpload()`** / **`useDownloadFile()`** — bucket helpers; the upload result includes the storage path you write into a record column.
+
+## Re-exports for convenience
+
+- `RecordId`, `Uuid` from `surrealdb`.
+- Query-builder types: `TableModel`, `TableNames`, `GetTable`, `QueryResult`, etc. (see `@spooky-sync/query-builder/AGENTS.md`).
+- `Model<S, T>`, `GenericModel`, `ModelPayload` — typed row shapes.
+
+## Common gotchas
+
+- **`useDb()` requires `<typeof schema>`.** Without the generic, all calls fall back to `unknown` and you lose type safety.
+- **CRDT fields are not regular columns.** Don't read or write them via `useQuery` — read with `useCrdtField`, write via `db.update` with `{ debounced: true }`.
+- **Generate IDs explicitly.** `const id = new Uuid().toString()`, then `db.create(\`thread:\${id}\`, ...)`. SurrealDB's auto-id only fires on direct DB writes, not through the sync queue.
+- **`useQuery` factories must call `.build()` (or `.all()`, `.first()`, etc.).** A bare `db.query('thread')` is a builder, not a query — `useQuery` will throw or return forever-loading.
+- **Provider is mandatory.** Calling any hook outside `<Sp00kyProvider>` throws.
+
+## Pointers
+
+- Sync engine: `node_modules/@spooky-sync/core/AGENTS.md`
+- Query builder DSL: `node_modules/@spooky-sync/query-builder/AGENTS.md`
+- Schema authoring + codegen: `node_modules/@spooky-sync/cli/AGENTS.md`

package/dist/index.cjs

@@ -2,12 +2,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 let _spooky_sync_core = require("@spooky-sync/core");
 let surrealdb = require("surrealdb");
 let solid_js = require("solid-js");
+let solid_js_store = require("solid-js/store");
 
 //#region src/lib/context.ts
-const SpookyContext = (0, solid_js.createContext)();
+const Sp00kyContext = (0, solid_js.createContext)();
 function useDb() {
-	const db = (0, solid_js.useContext)(SpookyContext);
-	if (!db) throw new Error("useDb must be used within a <SpookyProvider>. Wrap your app in <SpookyProvider config={...}>.");
+	const db = (0, solid_js.useContext)(Sp00kyContext);
+	if (!db) throw new Error("useDb must be used within a <Sp00kyProvider>. Wrap your app in <Sp00kyProvider config={...}>.");
 	return db;
 }
 
@@ -22,30 +23,56 @@ function useQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 		finalQuery = queryOrOptions;
 		options = maybeOptions;
 	} else {
-		const contextDb = (0, solid_js.useContext)(SpookyContext);
-		if (!contextDb) throw new Error("useQuery: No db argument provided and no SpookyContext found. Either pass a SyncedDb instance or wrap your app in <SpookyProvider>.");
+		const contextDb = (0, solid_js.useContext)(Sp00kyContext);
+		if (!contextDb) throw new Error("useQuery: No db argument provided and no Sp00kyContext found. Either pass a SyncedDb instance or wrap your app in <Sp00kyProvider>.");
 		db = contextDb;
 		finalQuery = dbOrQuery;
 		options = queryOrOptions;
 	}
-	const [data, setData] = (0, solid_js.createSignal)(void 0);
 	const [error, setError] = (0, solid_js.createSignal)(void 0);
 	const [isFetched, setIsFetched] = (0, solid_js.createSignal)(false);
-	const [unsubscribe, setUnsubscribe] = (0, solid_js.createSignal)(void 0);
+	const [isFetching, setIsFetching] = (0, solid_js.createSignal)(false);
+	const [state, setState] = (0, solid_js_store.createStore)({ value: void 0 });
+	const [version, setVersion] = (0, solid_js.createSignal)(0);
+	const data = () => {
+		version();
+		return state.value;
+	};
 	let prevQueryString;
-	const spooky = db.getSpooky();
-	const initQuery = async (query) => {
+	let runId = 0;
+	let activeUnsub;
+	let activeHash;
+	const teardownActive = () => {
+		activeUnsub?.();
+		activeUnsub = void 0;
+	};
+	const sp00ky = db.getSp00ky();
+	const initQuery = async (query, myRun) => {
 		const { hash } = await query.run();
+		if (myRun !== runId) return;
+		activeHash = hash;
 		setError(void 0);
 		let isFirstCall = true;
-		const unsub = await spooky.subscribe(hash, (e) => {
-			const data = query.isOne ? e[0] : e;
-			setData(() => data);
-			const hasData = query.isOne ? data != null : e.length > 0;
+		const unsub = await sp00ky.subscribe(hash, (e) => {
+			const queryData = query.isOne ? e[0] : e;
+			const reconcileStart = performance.now();
+			setState("value", (0, solid_js_store.reconcile)(queryData, { key: "id" }));
+			setVersion((v) => v + 1);
+			sp00ky.reportFrontendTiming(hash, performance.now() - reconcileStart);
+			const hasData = query.isOne ? queryData !== null && queryData !== void 0 : e.length > 0;
 			if (!isFirstCall || hasData) setIsFetched(true);
 			isFirstCall = false;
 		}, { immediate: true });
-		setUnsubscribe(() => unsub);
+		const unsubStatus = sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === "fetching"), { immediate: true });
+		const teardown = () => {
+			unsub();
+			unsubStatus();
+		};
+		if (myRun !== runId) {
+			teardown();
+			return;
+		}
+		activeUnsub = teardown;
 	};
 	(0, solid_js.createEffect)(() => {
 		if (!(options?.enabled?.() ?? true)) {
@@ -54,14 +81,18 @@ function useQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 		}
 		const query = typeof finalQuery === "function" ? finalQuery() : finalQuery;
 		if (!query) return;
-		const queryString = JSON.stringify(query);
+		const queryString = String(query.hash);
 		if (queryString === prevQueryString) return;
 		prevQueryString = queryString;
+		const myRun = ++runId;
+		teardownActive();
 		setIsFetched(false);
-		initQuery(query);
-		(0, solid_js.onCleanup)(() => {
-			unsubscribe()?.();
-		});
+		initQuery(query, myRun);
+	});
+	(0, solid_js.onCleanup)(() => {
+		runId++;
+		teardownActive();
+		if (options?.deregisterOnCleanup && activeHash) sp00ky.deregisterQuery(activeHash);
 	});
 	const isLoading = () => {
 		return !isFetched() && error() === void 0;
@@ -69,7 +100,102 @@ function useQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 	return {
 		data,
 		error,
-		isLoading
+		isLoading,
+		isFetching
+	};
+}
+
+//#endregion
+//#region src/lib/use-sync-status.ts
+/**
+* Observe sync health for a "can't reach the server" banner / indicator.
+*
+* Backed by `db.subscribeToSyncHealth`. Individual sync failures (a transient
+* remote 500 on query registration, a dropped socket) are absorbed by the
+* retry and never flip this; `isDegraded()` only goes true once failures
+* persist for the configured number of consecutive rounds (sp00ky core config
+* `syncHealth.degradeAfterConsecutiveFailures`, default 3), and flips back on
+* the next successful round. Must be used within a `<Sp00kyProvider>`.
+*/
+function useSyncStatus() {
+	const db = useDb();
+	const [health, setHealth] = (0, solid_js.createSignal)(db.syncHealth);
+	(0, solid_js.onCleanup)(db.subscribeToSyncHealth(setHealth));
+	return {
+		health,
+		status: () => health().status,
+		isHealthy: () => health().status === "healthy",
+		isDegraded: () => health().status === "degraded"
+	};
+}
+
+//#endregion
+//#region src/lib/use-crdt-field.ts
+function useCrdtField(table, recordId, field, fallbackText) {
+	const db = (0, solid_js.useContext)(Sp00kyContext);
+	if (!db) throw new Error("useCrdtField must be used within a <Sp00kyProvider>");
+	const [crdtField, setCrdtField] = (0, solid_js.createSignal)(null);
+	let currentId;
+	let initialized = false;
+	(0, solid_js.createEffect)(() => {
+		const id = recordId();
+		if (initialized && id === currentId) return;
+		if (currentId && crdtField()) {
+			db.getSp00ky().closeCrdtField(table, currentId, field);
+			setCrdtField(null);
+		}
+		currentId = id;
+		initialized = true;
+		if (!id) return;
+		const sp00ky = db.getSp00ky();
+		const text = fallbackText?.();
+		sp00ky.openCrdtField(table, id, field, text).then((cf) => {
+			if (currentId === id) setCrdtField(cf);
+		}).catch((err) => {
+			console.error(`[useCrdtField] Failed to open CRDT field ${table}.${field} on ${id}:`, err);
+		});
+	});
+	(0, solid_js.onCleanup)(() => {
+		if (currentId && crdtField()) {
+			db.getSp00ky().closeCrdtField(table, currentId, field);
+			setCrdtField(null);
+		}
+	});
+	return crdtField;
+}
+
+//#endregion
+//#region src/lib/use-feature-flag.ts
+/**
+* Subscribe to a feature flag for the currently authenticated user.
+*
+* Returns three Solid accessors that update reactively whenever the
+* server-materialized assignment in `_00_user_feature` changes. Backed by
+* the same SSP + sync pipeline that powers `useQuery`, so toggling a flag
+* via `spky flag enable <key>` propagates to the UI without a refresh.
+*
+* `enabled()` is `true` when the resolved variant exists and is not 'off'.
+* For multi-variant flags, prefer `variant()` directly.
+*/
+function useFeatureFlag(key, options) {
+	const handle = useDb().getSp00ky().feature(key, options);
+	const [variant, setVariant] = (0, solid_js.createSignal)(handle.variant());
+	const [payload, setPayload] = (0, solid_js.createSignal)(handle.payload());
+	const unsub = handle.subscribe((s) => {
+		setVariant(s.variant ?? options?.fallback);
+		setPayload(s.payload);
+	});
+	(0, solid_js.onCleanup)(() => {
+		unsub();
+		handle.close();
+	});
+	return {
+		variant,
+		payload,
+		enabled: () => {
+			const v = variant();
+			return v !== void 0 && v !== "off";
+		}
 	};
 }
 
@@ -95,7 +221,7 @@ function useFileUpload(dbOrBucketName, maybeBucketName) {
 	const validate = (file) => {
 		const config = db.getBucketConfig(bucketName);
 		if (!config) return;
-		if (config.maxSize != null && file.size > config.maxSize) {
+		if (config.maxSize !== null && config.maxSize !== void 0 && file.size > config.maxSize) {
 			const maxMB = (config.maxSize / (1024 * 1024)).toFixed(1);
 			throw new Error(`File exceeds maximum size of ${maxMB} MB.`);
 		}
@@ -204,9 +330,8 @@ function useDownloadFile(dbOrBucketName, bucketNameOrPath, pathOrOptions, maybeO
 	const [error, setError] = (0, solid_js.createSignal)(null);
 	let currentKey = null;
 	let privateUrl = null;
-	let refetchTrigger;
 	const [refetchSignal, setRefetchSignal] = (0, solid_js.createSignal)(0);
-	refetchTrigger = () => setRefetchSignal((n) => n + 1);
+	const refetchTrigger = () => setRefetchSignal((n) => n + 1);
 	async function doDownload(key, filePath) {
 		if (useCache) {
 			const cached = downloadCache.get(key);
@@ -326,8 +451,8 @@ function useDownloadFile(dbOrBucketName, bucketNameOrPath, pathOrOptions, maybeO
 }
 
 //#endregion
-//#region src/lib/SpookyProvider.ts
-function SpookyProvider(props) {
+//#region src/lib/Sp00kyProvider.ts
+function Sp00kyProvider(props) {
 	const merged = (0, solid_js.mergeProps)({ fallback: void 0 }, props);
 	const [db, setDb] = (0, solid_js.createSignal)(void 0);
 	(0, solid_js.onMount)(async () => {
@@ -339,13 +464,13 @@ function SpookyProvider(props) {
 		} catch (e) {
 			const error = e instanceof Error ? e : new Error(String(e));
 			if (merged.onError) merged.onError(error);
-			else console.error("SpookyProvider: Failed to initialize database", error);
+			else console.error("Sp00kyProvider: Failed to initialize database", error);
 		}
 	});
 	return (0, solid_js.createMemo)(() => {
 		const instance = db();
 		if (!instance) return merged.fallback;
-		return (0, solid_js.createComponent)(SpookyContext.Provider, {
+		return (0, solid_js.createComponent)(Sp00kyContext.Provider, {
 			value: instance,
 			get children() {
 				return merged.children;
@@ -357,69 +482,73 @@ function SpookyProvider(props) {
 //#endregion
 //#region src/index.ts
 /**
-* SyncedDb - A thin wrapper around spooky-ts for Solid.js integration
-* Delegates all logic to the underlying spooky-ts instance
+* SyncedDb - A thin wrapper around sp00ky-ts for Solid.js integration
+* Delegates all logic to the underlying sp00ky-ts instance
 */
 var SyncedDb = class {
 	constructor(config) {
-		this.spooky = null;
+		this.sp00ky = null;
 		this._initialized = false;
 		this.config = config;
 	}
-	getSpooky() {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky;
+	getSp00ky() {
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky;
 	}
 	/**
-	* Initialize the spooky-ts instance
+	* Initialize the sp00ky-ts instance
 	*/
 	async init() {
 		if (this._initialized) return;
-		this.spooky = new _spooky_sync_core.SpookyClient(this.config);
-		await this.spooky.init();
+		this.sp00ky = new _spooky_sync_core.Sp00kyClient(this.config);
+		await this.sp00ky.init();
 		this._initialized = true;
 	}
 	/**
 	* Create a new record in the database
 	*/
 	async create(id, payload) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		await this.spooky.create(id, payload);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		await this.sp00ky.create(id, payload);
 	}
 	/**
 	* Update an existing record in the database
 	*/
 	async update(tableName, recordId, payload, options) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		await this.spooky.update(tableName, recordId, payload, options);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		await this.sp00ky.update(tableName, recordId, payload, options);
 	}
 	/**
 	* Delete an existing record in the database
 	*/
 	async delete(tableName, selector) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		if (typeof selector !== "string") throw new Error("Only string ID selectors are supported currently with core");
-		await this.spooky.delete(tableName, selector);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		const isRecordId = selector instanceof surrealdb.RecordId || selector?.constructor?.name === "RecordId";
+		let id;
+		if (typeof selector === "string") id = selector;
+		else if (isRecordId) id = `${tableName}:${selector.id}`;
+		else throw new Error("Only string ID or RecordId selectors are supported currently with core");
+		await this.sp00ky.delete(tableName, id);
 	}
 	/**
 	* Query data from the database
 	*/
 	query(table) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.query(table, {});
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.query(table, {});
 	}
 	/**
 	* Run a backend operation
 	*/
 	async run(backend, path, payload, options) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		await this.spooky.run(backend, path, payload, options);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		await this.sp00ky.run(backend, path, payload, options);
 	}
 	/**
 	* Authenticate with the database
 	*/
 	async authenticate(token) {
-		await this.spooky?.authenticate(token);
+		await this.sp00ky?.authenticate(token);
 		return new surrealdb.RecordId("user", "me");
 	}
 	/**
@@ -433,48 +562,67 @@ var SyncedDb = class {
 	* Sign out, clear session and local storage
 	*/
 	async signOut() {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		await this.spooky.auth.signOut();
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		await this.sp00ky.auth.signOut();
 	}
 	/**
 	* Execute a function with direct access to the remote database connection
 	*/
 	async useRemote(fn) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return await this.spooky.useRemote(fn);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return await this.sp00ky.useRemote(fn);
 	}
 	/**
 	* Access the remote database service directly
 	*/
 	get remote() {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.remoteClient;
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.remoteClient;
 	}
 	/**
 	* Access the local database service directly
 	*/
 	get local() {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.localClient;
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.localClient;
 	}
 	/**
 	* Access the auth service
 	*/
 	get auth() {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.auth;
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.auth;
 	}
 	get pendingMutationCount() {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.pendingMutationCount;
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.pendingMutationCount;
+	}
+	/** Diagnostic — see `Sp00kyClient.liveRetryCount`. */
+	get liveRetryCount() {
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.liveRetryCount;
 	}
 	subscribeToPendingMutations(cb) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.subscribeToPendingMutations(cb);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.subscribeToPendingMutations(cb);
+	}
+	/** Current sync-health snapshot. See {@link useSyncStatus}. */
+	get syncHealth() {
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.syncHealth;
+	}
+	/**
+	* Observe sync health. Fires immediately with the current status and again
+	* on every healthy↔degraded transition. Prefer the `useSyncStatus` hook in
+	* components; this is the imperative escape hatch.
+	*/
+	subscribeToSyncHealth(cb) {
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.subscribeToSyncHealth(cb);
 	}
 	bucket(name) {
-		if (!this.spooky) throw new Error("SyncedDb not initialized");
-		return this.spooky.bucket(name);
+		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
+		return this.sp00ky.bucket(name);
 	}
 	getBucketConfig(name) {
 		return this.config.schema.buckets?.find((b) => b.name === name);
@@ -483,11 +631,14 @@ var SyncedDb = class {
 
 //#endregion
 exports.RecordId = surrealdb.RecordId;
-exports.SpookyProvider = SpookyProvider;
+exports.Sp00kyProvider = Sp00kyProvider;
 exports.SyncedDb = SyncedDb;
 exports.Uuid = surrealdb.Uuid;
+exports.useCrdtField = useCrdtField;
 exports.useDb = useDb;
 exports.useDownloadFile = useDownloadFile;
+exports.useFeatureFlag = useFeatureFlag;
 exports.useFileUpload = useFileUpload;
 exports.useQuery = useQuery;
+exports.useSyncStatus = useSyncStatus;
 //# sourceMappingURL=index.cjs.map