@spooky-sync/client-solid2 0.0.1-canary.200 → 0.0.1-canary.201

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Sp00kyClient, fileToUint8Array, semverGt } from "@spooky-sync/core";
+import { Sp00kyClient, decodeBlurhash, fileToUint8Array, semverGt } from "@spooky-sync/core";
 import { RecordId, Uuid } from "surrealdb";
-import { createComponent, createContext, createEffect, createMemo, createProjection, createSignal, merge, onCleanup, onSettled, useContext } from "solid-js";
+import { children, createComponent, createContext, createEffect, createMemo, createSignal, createStore, merge, onCleanup, onSettled, snapshot, useContext } from "solid-js";
 
 //#region src/lib/conflate.ts
 /**
@@ -124,6 +124,42 @@ function usePendingMutations() {
 	return fromSubscription((cb) => db.subscribeToPendingMutations(cb), db.pendingMutationCount);
 }
 
+//#endregion
+//#region src/lib/merge-rows.ts
+/**
+* Keyed in-place merge of a fresh row list into a store draft array.
+*
+* Why not `reconcile(rows, 'id')`: in Solid 2 rc.1 a reconcile REPLACES the row
+* objects, so a component that captured `data()[0]` sees a different object
+* after the next emission, and anything keyed on row identity (`<For>` without
+* an explicit key, a memo comparing rows) re-creates its subtree on every live
+* update. Mutating the draft in place keeps the identity AND keeps updates
+* fine-grained: only the fields that actually changed are written, so a row
+* whose data is unchanged notifies nobody.
+*
+* Rows are matched by `key` (default `id`); unmatched incoming rows are
+* inserted as-is and trailing rows are dropped, so add / remove / reorder all
+* reach coarse readers.
+*/
+function mergeRows(draft, next, key = "id") {
+	const byKey = /* @__PURE__ */ new Map();
+	for (const row of draft) {
+		const k = row?.[key];
+		if (k !== void 0) byKey.set(String(k), row);
+	}
+	for (let i = 0; i < next.length; i++) {
+		const incoming = next[i];
+		const k = incoming?.[key];
+		const reuse = k !== void 0 ? byKey.get(String(k)) : void 0;
+		if (reuse) {
+			for (const field of Object.keys(incoming)) if (reuse[field] !== incoming[field]) reuse[field] = incoming[field];
+			for (const field of Object.keys(snapshot(reuse))) if (!(field in incoming)) delete reuse[field];
+			if (draft[i] !== reuse) draft[i] = reuse;
+		} else if (draft[i] !== incoming) draft[i] = incoming;
+	}
+	if (draft.length > next.length) draft.splice(next.length);
+}
+
 //#endregion
 //#region src/lib/create-query.ts
 function createQuery(dbOrQuery, queryOrOptions, maybeOptions) {
@@ -144,54 +180,76 @@ function createQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 	const [isFetched, setIsFetched] = createSignal(false, { ownedWrite: true });
 	const [isFetching, setIsFetching] = createSignal(false, { ownedWrite: true });
 	let activeHash;
-	const store = createProjection(async function* () {
-		const enabled = options?.enabled?.() ?? true;
-		const query = typeof finalQuery === "function" ? finalQuery() : finalQuery;
-		if (!enabled || !query) {
-			setIsFetched(false);
-			setError(void 0);
-			return;
-		}
+	const [store, setStore] = createStore({ value: null });
+	let runId = 0;
+	let readyWaiters = [];
+	const wakeReady = () => {
+		const waiters = readyWaiters;
+		readyWaiters = [];
+		for (const w of waiters) w();
+	};
+	createEffect(() => {
+		return {
+			enabled: options?.enabled?.() ?? true,
+			query: typeof finalQuery === "function" ? finalQuery() : finalQuery
+		};
+	}, ({ enabled, query }) => {
+		const myRun = ++runId;
 		setIsFetched(false);
 		setError(void 0);
-		const iterators = [];
+		if (!enabled || !query) return;
 		const cleanups = [];
-		onCleanup(() => {
-			for (const it of iterators) it.return?.();
-			for (const c of cleanups) c();
-		});
-		try {
-			/**
-			* Registration can fail — the canonical case is the SSP answering 503
-			* NOT_READY while it bootstraps. Surface it as `error()` instead of
-			* throwing into the graph: the sync scheduler retries the
-			* registration underneath, so a transient failure still recovers, and
-			* a spinner driven by `isLoading()` resolves via `error()`.
-			*/
-			const { hash } = await query.run();
+		let disposed = false;
+		const addCleanup = (c) => {
+			if (!c) return;
+			if (typeof c === "function") {
+				if (disposed) c();
+				else cleanups.push(c);
+				return;
+			}
+			Promise.resolve(c).then((fn) => {
+				if (typeof fn !== "function") return;
+				if (disposed) fn();
+				else cleanups.push(fn);
+			});
+		};
+		/**
+		* Registration can fail — the canonical case is the SSP answering 503
+		* NOT_READY while it bootstraps. Surface it as `error()` instead of
+		* throwing into the graph: the sync scheduler retries the registration
+		* underneath, so a transient failure still recovers, and a spinner
+		* driven by `isLoading()` resolves via `error()`.
+		*/
+		query.run().then(({ hash }) => {
+			if (disposed || myRun !== runId) return;
 			activeHash = hash;
-			cleanups.push(sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === "fetching"), { immediate: true }));
-			const it = conflate((cb) => sp00ky.subscribe(hash, cb, { immediate: true }))[Symbol.asyncIterator]();
-			iterators.push(it);
+			addCleanup(sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === "fetching"), { immediate: true }));
 			let isFirstCall = true;
-			while (true) {
-				const r = await it.next();
-				if (r.done) break;
-				const e = r.value;
-				const queryData = query.isOne ? e[0] ?? null : e;
-				const hasData = query.isOne ? queryData !== null && queryData !== void 0 : e.length > 0;
-				if (!isFirstCall || hasData) setIsFetched(true);
+			addCleanup(sp00ky.subscribe(hash, (rows) => {
+				if (disposed || myRun !== runId) return;
+				const queryData = query.isOne ? rows[0] ?? null : rows;
+				const hasData = query.isOne ? queryData !== null && queryData !== void 0 : rows.length > 0;
+				if (!isFirstCall || hasData) {
+					setIsFetched(true);
+					wakeReady();
+				}
 				isFirstCall = false;
 				const t0 = performance.now();
-				yield { value: queryData };
+				setStore((s) => {
+					if (query.isOne || queryData === null || !Array.isArray(s.value)) s.value = queryData;
+					else mergeRows(s.value, queryData);
+				});
 				sp00ky.reportFrontendTiming(hash, performance.now() - t0);
-			}
-		} catch (err) {
+			}, { immediate: true }));
+		}).catch((err) => {
+			if (disposed || myRun !== runId) return;
 			setError(err instanceof Error ? err : new Error(String(err)));
-		}
-	}, { value: null }, {
-		key: "id",
-		seedLoadingValue: true
+			wakeReady();
+		});
+		return () => {
+			disposed = true;
+			for (const c of cleanups) c();
+		};
 	});
 	const emptyList = [];
 	const data = () => {
@@ -204,9 +262,9 @@ function createQuery(dbOrQuery, queryOrOptions, maybeOptions) {
 	};
 	const readyGate = createMemo(async () => {
 		if (isFetched() || error()) return true;
-		await new Promise(() => {});
+		await new Promise((resolve) => readyWaiters.push(resolve));
 		return true;
-	});
+	}, { lazy: true });
 	const ready = () => {
 		readyGate();
 		return data();
@@ -618,6 +676,222 @@ function useDownloadFile(dbOrBucketName, bucketNameOrPath, pathOrOptions, maybeO
 	};
 }
 
+//#endregion
+//#region src/lib/use-blurhash.ts
+function useBlurhash(dbOrBucketName, bucketNameOrPath, maybePath) {
+	let db;
+	let bucketName;
+	let path;
+	if (typeof dbOrBucketName === "string") {
+		db = useDb();
+		bucketName = dbOrBucketName;
+		path = bucketNameOrPath;
+	} else {
+		db = dbOrBucketName;
+		bucketName = bucketNameOrPath;
+		path = maybePath;
+	}
+	const [hash, setHash] = createSignal(null, { ownedWrite: true });
+	const [isLoading, setIsLoading] = createSignal(false, { ownedWrite: true });
+	createEffect(() => path(), (filePath) => {
+		if (!filePath) {
+			setHash(null);
+			setIsLoading(false);
+			return;
+		}
+		let cancelled = false;
+		setIsLoading(true);
+		db.bucket(bucketName).blurhash(filePath).then((result) => {
+			if (cancelled) return;
+			setHash(result);
+			setIsLoading(false);
+		}).catch(() => {
+			if (cancelled) return;
+			setHash(null);
+			setIsLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+	return {
+		hash,
+		isLoading
+	};
+}
+
+//#endregion
+//#region src/lib/use-bucket-image.ts
+function useBucketImage(dbOrBucketName, bucketNameOrPath, pathOrOptions, maybeOptions) {
+	let db;
+	let bucketName;
+	let path;
+	let options;
+	if (typeof dbOrBucketName === "string") {
+		db = useDb();
+		bucketName = dbOrBucketName;
+		path = bucketNameOrPath;
+		options = pathOrOptions ?? {};
+	} else {
+		db = dbOrBucketName;
+		bucketName = bucketNameOrPath;
+		path = pathOrOptions;
+		options = maybeOptions ?? {};
+	}
+	const wantHash = options.blurhash !== false;
+	const { hash } = useBlurhash(db, bucketName, () => wantHash ? path() : null);
+	const file = useDownloadFile(db, bucketName, path, options);
+	const [ready, setReady] = createSignal(false, { ownedWrite: true });
+	createEffect(file.url, () => {
+		setReady(false);
+	}, { defer: true });
+	const gate = (img) => {
+		const done = () => setReady(true);
+		if (typeof img.decode === "function") img.decode().then(done, done);
+		else if (img.complete) done();
+		else {
+			img.onload = done;
+			img.onerror = done;
+		}
+	};
+	return {
+		...file,
+		blurhash: hash,
+		ready,
+		gate
+	};
+}
+
+//#endregion
+//#region src/lib/Blurhash.ts
+/**
+* A blurhash painted onto a canvas, once per hash change. Size the canvas via
+* `class`/`style` (e.g. `absolute inset-0 w-full h-full`); the internal decode
+* resolution stays tiny regardless of the displayed size.
+*/
+function Blurhash(props) {
+	if (typeof document === "undefined") return null;
+	const canvas = document.createElement("canvas");
+	createEffect(() => props.class ?? "", (className) => {
+		canvas.className = className;
+	});
+	createEffect(() => props.style ?? "", (style) => {
+		canvas.style.cssText = style;
+	});
+	createEffect(() => ({
+		width: props.width ?? 32,
+		height: props.height ?? 32,
+		hash: props.hash,
+		punch: props.punch ?? 1
+	}), ({ width, height, hash, punch }) => {
+		canvas.width = width;
+		canvas.height = height;
+		if (!hash) return;
+		try {
+			const pixels = decodeBlurhash(hash, width, height, punch);
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			const imageData = ctx.createImageData(width, height);
+			imageData.data.set(pixels);
+			ctx.putImageData(imageData, 0, 0);
+		} catch {}
+	});
+	return canvas;
+}
+
+//#endregion
+//#region src/lib/BucketImage.ts
+const LAYER_STYLE = "position:absolute;inset:0;width:100%;height:100%;";
+/**
+* A bucket image that never pops in: it layers (bottom to top) your `fallback`
+* plate, the automatically stored blurhash, and the real image, which stays
+* transparent until the bitmap is DECODED and then crossfades over the
+* placeholders. Placeholder layers unmount once the fade settles. Respects
+* prefers-reduced-motion (instant swap). The container is made
+* `position: relative` unless your `class` positions it already.
+*
+* ```tsx
+* <BucketImage bucket="covers" path={row.cover_key} class="absolute inset-0"
+*              fallback={<MyPlate />} alt="" />
+* ```
+*/
+function BucketImage(props) {
+	if (typeof document === "undefined") return null;
+	const image = useBucketImage(props.bucket, () => props.path, {
+		...props.options,
+		blurhash: props.blurhash !== false
+	});
+	const reducedMotion = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+	const root = document.createElement("div");
+	createEffect(() => props.class ?? "", (className) => {
+		root.className = className;
+	});
+	onSettled(() => {
+		if (getComputedStyle(root).position === "static") root.style.position = "relative";
+	});
+	const placeholder = document.createElement("div");
+	placeholder.style.cssText = LAYER_STYLE;
+	const fallbackHolder = document.createElement("div");
+	fallbackHolder.style.cssText = LAYER_STYLE;
+	placeholder.append(fallbackHolder);
+	const resolvedFallback = children(() => props.fallback);
+	createEffect(() => resolvedFallback.toArray().filter((node) => node instanceof Node), (nodes) => {
+		fallbackHolder.replaceChildren(...nodes);
+	});
+	const hashCanvas = Blurhash({
+		get hash() {
+			return image.blurhash();
+		},
+		style: LAYER_STYLE
+	});
+	if (hashCanvas instanceof Node) placeholder.append(hashCanvas);
+	const img = document.createElement("img");
+	img.decoding = "async";
+	img.style.cssText = `${LAYER_STYLE}opacity:0;`;
+	createEffect(() => props.imgClass ?? "", (className) => {
+		img.className = className;
+	});
+	createEffect(() => props.fit ?? "cover", (fit) => {
+		img.style.objectFit = fit;
+	});
+	createEffect(() => props.alt ?? "", (alt) => {
+		img.alt = alt;
+	});
+	createEffect(() => reducedMotion ? "none" : `opacity ${props.transition ?? 300}ms ${props.easing ?? "cubic-bezier(0.16, 1, 0.3, 1)"}`, (transition) => {
+		img.style.transition = transition;
+	});
+	createEffect(() => image.url(), (url) => {
+		if (!url) {
+			img.removeAttribute("src");
+			return;
+		}
+		img.src = url;
+		image.gate(img);
+	});
+	createEffect(() => image.ready(), (ready) => {
+		img.style.opacity = ready ? "1" : "0";
+	});
+	const [settled, setSettled] = createSignal(false, { ownedWrite: true });
+	createEffect(() => ({
+		ready: image.ready(),
+		transition: props.transition ?? 300
+	}), ({ ready, transition }) => {
+		if (!ready) {
+			setSettled(false);
+			return;
+		}
+		const wait = (reducedMotion ? 0 : transition) + 120;
+		const timer = setTimeout(() => setSettled(true), wait);
+		return () => clearTimeout(timer);
+	});
+	createEffect(() => settled(), (isSettled) => {
+		if (isSettled) placeholder.remove();
+		else if (!placeholder.isConnected) root.insertBefore(placeholder, img);
+	});
+	root.append(placeholder, img);
+	return root;
+}
+
 //#endregion
 //#region src/lib/Sp00kyProvider.ts
 function Sp00kyProvider(props) {
@@ -712,7 +986,20 @@ function createSubmission(fn) {
 * NOTE: keep in sync with packages/client-solid/src/index.ts (SyncedDb).
 * Copied rather than shared so this package's dependency graph never pulls
 * in solid-js 1.x; fold the two together once client-solid moves to Solid 2.
+* Solid-2-only differences: `delete` accepts 'bound RecordId', and write
+* payloads go through `snapshot()` (see `unproxy` below).
 */
+/**
+* Solid 2 stores wrap every object read out of them (query rows, their nested
+* arrays, `createStore` docs) in a Proxy. Those proxies cannot cross
+* `postMessage` (the sqlite and shared-tabs workers): structuredClone throws
+* DataCloneError. `snapshot()` returns the underlying plain value for store
+* proxies and passes anything else through untouched.
+*/
+function unproxy(value) {
+	if (value === null || typeof value !== "object") return value;
+	return snapshot(value);
+}
 var SyncedDb = class {
 	constructor(config) {
 		this.sp00ky = null;
@@ -749,25 +1036,26 @@ var SyncedDb = class {
 	*/
 	async create(id, payload) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		await this.sp00ky.create(id, payload);
+		await this.sp00ky.create(id, unproxy(payload));
 	}
 	/**
 	* Update an existing record in the database
 	*/
 	async update(tableName, recordId, payload, options) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		await this.sp00ky.update(tableName, recordId, payload, options);
+		await this.sp00ky.update(tableName, recordId, unproxy(payload), options);
 	}
 	/**
 	* Delete an existing record in the database
 	*/
 	async delete(tableName, selector) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		const ctorName = selector?.constructor?.name;
-		const isRecordId = selector instanceof RecordId || ctorName === "RecordId" || ctorName === "bound RecordId";
+		const raw = unproxy(selector);
+		const ctorName = raw?.constructor?.name;
+		const isRecordId = raw instanceof RecordId || ctorName === "RecordId" || ctorName === "bound RecordId";
 		let id;
-		if (typeof selector === "string") id = selector;
-		else if (isRecordId) id = `${tableName}:${selector.id}`;
+		if (typeof raw === "string") id = raw;
+		else if (isRecordId) id = `${tableName}:${raw.id}`;
 		else throw new Error("Only string ID or RecordId selectors are supported currently with core");
 		await this.sp00ky.delete(tableName, id);
 	}
@@ -792,7 +1080,7 @@ var SyncedDb = class {
 	*/
 	async run(backend, path, payload, options) {
 		if (!this.sp00ky) throw new Error("SyncedDb not initialized");
-		await this.sp00ky.run(backend, path, payload, options);
+		await this.sp00ky.run(backend, path, unproxy(payload), options);
 	}
 	/**
 	* Sign out, clear session and local storage
@@ -880,5 +1168,5 @@ var SyncedDb = class {
 };
 
 //#endregion
-export { RecordId, Sp00kyProvider, SyncedDb, Uuid, conflate, createPreload, createQuery, createSubmission, fromSubscription, useAppRelease, useCrdtField, useDb, useDownloadFile, useFeatureFlag, useFileUpload, usePendingMutations, useQuery, useStorageStatus, useSyncStatus };
+export { Blurhash, BucketImage, RecordId, Sp00kyProvider, SyncedDb, Uuid, conflate, createPreload, createQuery, createSubmission, fromSubscription, useAppRelease, useBlurhash, useBucketImage, useCrdtField, useDb, useDownloadFile, useFeatureFlag, useFileUpload, usePendingMutations, useQuery, useStorageStatus, useSyncStatus };
 //# sourceMappingURL=index.js.map