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

package/src/lib/Blurhash.ts

@@ -0,0 +1,64 @@
+import { createEffect, type Element } from 'solid-js';
+import { decodeBlurhash } from '@spooky-sync/core';
+
+export interface BlurhashProps {
+  /** The blurhash string. Nullish paints nothing (transparent canvas). */
+  hash: string | null | undefined;
+  /** Decode resolution. 32x32 is plenty: blurhash carries at most 9x9 DCT
+   *  components, the canvas is meant to be CSS-scaled to fill. */
+  width?: number;
+  height?: number;
+  /** Contrast punch, see the blurhash reference decoder. Defaults to 1. */
+  punch?: number;
+  class?: string;
+  style?: string;
+}
+
+/**
+ * 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.
+ */
+export function Blurhash(props: BlurhashProps): Element {
+  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 {
+        // An invalid hash paints nothing; the layer below stays visible.
+      }
+    }
+  );
+
+  return canvas as unknown as Element;
+}

package/src/lib/BucketImage.ts

@@ -0,0 +1,170 @@
+import { createSignal, createEffect, onSettled, children, type Element } from 'solid-js';
+import type { BucketNames, SchemaStructure } from '@spooky-sync/query-builder';
+import { useBucketImage, type UseBucketImageOptions } from './use-bucket-image';
+import { Blurhash } from './Blurhash';
+
+export interface BucketImageProps {
+  /** Bucket name from the schema. */
+  bucket: string;
+  /** Path within the bucket. Nullish renders only the fallback layers. */
+  path: string | null | undefined;
+  alt?: string;
+  /** Classes for the container element (sizing/positioning). */
+  class?: string;
+  /** Classes for the inner `<img>` (the layout styles are inline). */
+  imgClass?: string;
+  /** `object-fit` for the image. Defaults to `cover`. */
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  /**
+   * Bottom placeholder layer (your own plate/skeleton), shown until the image
+   * settles. The blurhash layer paints on top of it once the sidecar resolves.
+   */
+  fallback?: Element;
+  /** Crossfade duration in ms. Defaults to 300. */
+  transition?: number;
+  /** Crossfade easing. Defaults to an ease-out-expo curve. */
+  easing?: string;
+  /** Resolve the blurhash sidecar. Defaults to true. */
+  blurhash?: boolean;
+  /** Download tuning, forwarded to the underlying `useDownloadFile`. */
+  options?: UseBucketImageOptions;
+}
+
+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="" />
+ * ```
+ */
+export function BucketImage(props: BucketImageProps): Element {
+  if (typeof document === 'undefined') return null;
+
+  const image = useBucketImage(
+    props.bucket as BucketNames<SchemaStructure>,
+    () => 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;
+    }
+  );
+  // Layers are absolutely positioned; give them an anchor without stomping on
+  // a caller class that already positions the container (inline would win).
+  onSettled(() => {
+    if (getComputedStyle(root).position === 'static') root.style.position = 'relative';
+  });
+
+  const placeholder = document.createElement('div');
+  placeholder.style.cssText = LAYER_STYLE;
+  // Solid hands JSX props over as lazy thunks; `children` resolves them (and
+  // nested arrays/functions) to real nodes and keeps them alive reactively.
+  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) as 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';
+    }
+  );
+
+  // Placeholders leave the DOM once the fade is over (a shelf of covers should
+  // not composite three layers each forever) and come back when the path
+  // changes mid-life (`ready` re-arms via the hook). `settled` is written from
+  // the apply phase and a timer, outside any tracking scope.
+  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 as unknown as Element;
+}

package/src/lib/__tests__/rc-semantics.test.ts

@@ -1,5 +1,5 @@
 /**
- * Probes against solid-js 2.0.0-rc.0 semantics this package's design depends
+ * Probes against solid-js 2.0.0-rc.1 semantics this package's design depends
  * on. If any of these fail after a Solid version bump, the binding's
  * assumptions are broken — fix the binding, don't delete the probe.
  *
@@ -337,16 +337,20 @@ describe('probe 5: class instances inside store rows', () => {
       const rid = rows[0].rid;
       // Solid 2 wraps class instances (isWrappable true — unlike Solid 1).
       expect(isWrappable(new FakeRecordId('t', 'i'))).toBe(true);
-      // Document what survives through the proxy: methods are served BOUND, so
-      // `constructor.name` gains a 'bound ' prefix. SyncedDb.delete's
-      // cross-package RecordId detection must strip it.
-      expect((rid as any).constructor?.name).toBe('bound FakeRecordId');
+      // Document what survives through the proxy. rc.0 served methods BOUND
+      // and `constructor.name` read 'bound FakeRecordId'; rc.1 hides the
+      // prototype entirely: no `instanceof`, no `constructor`, but own fields
+      // and prototype methods still resolve. SyncedDb.delete therefore
+      // unwraps with `snapshot` BEFORE any RecordId detection.
+      expect(rid instanceof FakeRecordId).toBe(false);
+      expect((rid as any).constructor?.name).toBeUndefined();
       expect(rid.toString()).toBe('game:a');
       expect(`${rid.tb}:${rid.id}`).toBe('game:a');
       // `snapshot` must unwrap back to the raw instance so payloads passed to
       // surrealdb (which checks instanceof) can be de-proxied at the boundary.
       const snap = snapshot(rows[0]);
       expect(snap.rid instanceof FakeRecordId).toBe(true);
+      expect(snapshot(rid) instanceof FakeRecordId).toBe(true);
       dispose();
     });
   });

package/src/lib/create-query.ts

@@ -6,16 +6,17 @@ import type {
   QueryResult,
 } from '@spooky-sync/query-builder';
 import {
+  createEffect,
   createMemo,
-  createProjection,
   createSignal,
+  createStore,
   onCleanup,
   type Accessor,
 } from 'solid-js';
 import { SyncedDb } from '..';
 import type { Sp00kyQueryResultPromise } from '@spooky-sync/core';
 import { useDb } from './context';
-import { conflate } from './conflate';
+import { mergeRows } from './merge-rows';
 
 type QueryArg<
   S extends SchemaStructure,
@@ -138,96 +139,135 @@ export function createQuery<
   // dispose (see `deregisterOnCleanup`).
   let activeHash: string | undefined;
 
-  // Results live in a projection: each yielded emission is reconciled in place
-  // keyed by `id` (unchanged rows keep identity; coarse readers are notified
-  // on add/remove/reorder — probed in rc-semantics.test.ts, replacing the
-  // Solid 1 reconcile + version-signal hack). `seedLoadingValue` births the
-  // store committed, so `data()` reads never suspend.
+  // Results live in a plain store, written from the engine's subscription
+  // callback and reconciled in place keyed by `id`, so unchanged rows keep
+  // identity and coarse readers (`<For>`) are notified on add/remove/reorder.
   //
-  // The compute's tracked reads (enabled, query thunk) all happen before the
-  // first await — Solid 2 only creates dependency edges for pre-await reads. A
-  // dep change restarts the generator; the superseded one is ABANDONED by
-  // Solid (no return()/finally — probed), so the onCleanup registered
-  // synchronously below is what tears down its subscriptions. This also
-  // replaces the Solid 1 hook's runId/prevQueryString supersede machinery:
-  // Solid dedupes re-runs whose tracked reads are unchanged, and identical
-  // query identity means an identical hash means the same compute inputs.
-  const store = createProjection(
-    async function* (): AsyncGenerator<{ value: TData }> {
-      const enabled = options?.enabled?.() ?? true;
-      const query = typeof finalQuery === 'function' ? finalQuery() : finalQuery;
+  // NOT an async-generator projection. A live query's generator never returns:
+  // it awaits the next emission forever, which leaves its node permanently
+  // PENDING. Solid 2 holds a navigation transition until every pending node in
+  // the new tree settles, so with a generator here the first client-side
+  // navigation into a screen that opens a query never commits: the URL and
+  // effects update while the old DOM stays on screen, with no error and no
+  // <Loading> fallback that can rescue it. Subscription writes settle
+  // immediately, which is what the Solid 1 binding did too.
+  //
+  // Wrapped in an object so `one()` queries (row object or null) and list
+  // queries share one store shape; `mergeRows` keys `value`'s contents by id.
+  const [store, setStore] = createStore<{ value: TData }>({ value: null as TData });
 
-      if (!enabled || !query) {
-        setIsFetched(false);
-        setError(undefined);
-        return;
-      }
+  // Identity of the installed subscription, so a superseded run cannot write
+  // results for a query the caller has already moved off.
+  let runId = 0;
+
+  // Woken by the first result or error, for the suspending `ready()` read.
+  let readyWaiters: (() => void)[] = [];
+  const wakeReady = () => {
+    const waiters = readyWaiters;
+    readyWaiters = [];
+    for (const w of waiters) w();
+  };
 
+  // Tracked: the query identity and the `enabled` gate. Untracked apply: the
+  // registration + subscription, whose teardown is the returned cleanup.
+  createEffect(
+    () => {
+      const enabled = options?.enabled?.() ?? true;
+      const query = typeof finalQuery === 'function' ? finalQuery() : finalQuery;
+      return { enabled, query };
+    },
+    ({ enabled, query }) => {
+      const myRun = ++runId;
       // A new identity starts clean: a previous identity's failure must not
       // keep this one out of its loading state.
       setIsFetched(false);
       setError(undefined);
+      if (!enabled || !query) return;
 
-      const iterators: AsyncIterator<any>[] = [];
       const cleanups: (() => void)[] = [];
-      onCleanup(() => {
-        for (const it of iterators) void it.return?.();
-        for (const c of cleanups) c();
-      });
+      let disposed = false;
+      // `sp00ky.subscribe` resolves its unsubscribe asynchronously; the status
+      // subscription returns one directly. Accept both, and if teardown already
+      // happened while the promise was in flight, unsubscribe immediately.
+      const addCleanup = (c: (() => void) | Promise<(() => void) | undefined> | undefined) => {
+        if (!c) return;
+        if (typeof c === 'function') {
+          if (disposed) c();
+          else cleanups.push(c);
+          return;
+        }
+        void Promise.resolve(c).then((fn) => {
+          if (typeof fn !== 'function') return;
+          if (disposed) fn();
+          else cleanups.push(fn);
+        });
+      };
 
-      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();
-        activeHash = hash;
+      /**
+       * 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 }: { hash: string }) => {
+          if (disposed || myRun !== runId) return;
+          activeHash = hash;
 
-        // Mirror the query's fetch status so the UI can show a "loading more"
-        // state while the sync engine pulls missing records in the background.
-        cleanups.push(
-          sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === 'fetching'), {
-            immediate: true,
-          })
-        );
+          // Mirror the query's fetch status so the UI can show a "loading
+          // more" state while the sync engine pulls records in the background.
+          addCleanup(
+            sp00ky.subscribeQueryStatus(hash, (status) => setIsFetching(status === 'fetching'), {
+              immediate: true,
+            })
+          );
 
-        const it = conflate<Record<string, any>[]>((cb) =>
-          sp00ky.subscribe(hash, cb, { immediate: true })
-        )[Symbol.asyncIterator]();
-        iterators.push(it);
+          let isFirstCall = true;
+          addCleanup(
+            sp00ky.subscribe(
+              hash,
+              (rows: Record<string, any>[]) => {
+                if (disposed || myRun !== runId) return;
+                const queryData = (query.isOne ? (rows[0] ?? null) : rows) as TData;
+                // The first (immediate) callback with no data likely means the
+                // local DB has not synced yet — don't mark as fetched, so the
+                // UI keeps showing its loading state.
+                const hasData = query.isOne
+                  ? queryData !== null && queryData !== undefined
+                  : rows.length > 0;
+                if (!isFirstCall || hasData) {
+                  setIsFetched(true);
+                  wakeReady();
+                }
+                isFirstCall = false;
 
-        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) as TData;
-          // The first (immediate) callback with no data likely means the local
-          // DB hasn't synced yet — don't mark as fetched so UI shows loading.
-          const hasData = query.isOne
-            ? queryData !== null && queryData !== undefined
-            : e.length > 0;
-          if (!isFirstCall || hasData) setIsFetched(true);
-          isFirstCall = false;
+                const t0 = performance.now();
+                setStore((s) => {
+                  if (query.isOne || queryData === null || !Array.isArray(s.value)) {
+                    s.value = queryData;
+                  } else {
+                    mergeRows(s.value as any[], queryData as any[]);
+                  }
+                });
+                sp00ky.reportFrontendTiming(hash, performance.now() - t0);
+              },
+              { immediate: true }
+            )
+          );
+        })
+        .catch((err: unknown) => {
+          if (disposed || myRun !== runId) return;
+          setError(err instanceof Error ? err : new Error(String(err)));
+          wakeReady();
+        });
 
-          // Time the store commit (yield → resume) and report it as the
-          // "frontend" phase for DevTools/MCP. Approximate: Solid reconciles
-          // the yielded value before resuming the generator.
-          const t0 = performance.now();
-          yield { value: queryData };
-          sp00ky.reportFrontendTiming(hash, performance.now() - t0);
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    // Wrapped in an object so `one()` queries (row object or null) and list
-    // queries share one store shape; `key` reconciles `value`'s contents.
-    { value: null as TData },
-    { key: 'id', seedLoadingValue: true }
+      return () => {
+        disposed = true;
+        for (const c of cleanups) c();
+      };
+    }
   );
 
   // Fallback empty value served before the first emission of a list query.
@@ -242,15 +282,23 @@ export function createQuery<
     return v as TData;
   };
 
-  // Suspending read: pends until the first real result (or error) via an async
-  // memo that resolves when isFetched/error flips. Reading it inside <Loading>
-  // integrates with Solid 2's boundary protocol; `data` stays non-throwing.
-  const readyGate = createMemo(async (): Promise<true> => {
-    if (isFetched() || error()) return true;
-    // Tracked reads above registered the deps; park until one flips.
-    await new Promise<void>(() => {});
-    return true;
-  });
+  // Suspending read: pends until the first real result (or error). Reading it
+  // inside <Loading> integrates with Solid 2's boundary protocol; `data` stays
+  // non-throwing.
+  //
+  // `lazy` matters, and so does the promise actually resolving: an unresolved
+  // async node stays PENDING, every queue flush carries pending nodes forward,
+  // and a navigation transition waits on them. Lazy means only a query whose
+  // `ready()` is read creates the node at all, and the deferred below is
+  // settled by the same emission that flips `isFetched`.
+  const readyGate = createMemo(
+    async (): Promise<true> => {
+      if (isFetched() || error()) return true;
+      await new Promise<void>((resolve) => readyWaiters.push(resolve));
+      return true;
+    },
+    { lazy: true }
+  );
   const ready: Accessor<TData> = () => {
     readyGate();
     return data();

package/src/lib/merge-rows.ts

@@ -0,0 +1,46 @@
+import { snapshot } from 'solid-js';
+
+/**
+ * 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.
+ */
+export function mergeRows(draft: any[], next: any[], key = 'id'): void {
+  const byKey = new Map<any, any>();
+  for (const row of draft) {
+    const k = row?.[key];
+    if (k !== undefined) byKey.set(String(k), row);
+  }
+
+  for (let i = 0; i < next.length; i++) {
+    const incoming = next[i];
+    const k = incoming?.[key];
+    const reuse = k !== undefined ? byKey.get(String(k)) : undefined;
+
+    if (reuse) {
+      for (const field of Object.keys(incoming)) {
+        if (reuse[field] !== incoming[field]) reuse[field] = incoming[field];
+      }
+      // `snapshot` first: iterating the proxy's own keys while deleting from it
+      // is not safe, and the raw object is what carries the stale fields.
+      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);
+}

package/src/lib/use-blurhash.ts

@@ -0,0 +1,82 @@
+import { createSignal, createEffect, type Accessor } from 'solid-js';
+import type { SchemaStructure, BucketNames } from '@spooky-sync/query-builder';
+import type { SyncedDb } from '../index';
+import { useDb } from './context';
+
+export interface UseBlurhashResult {
+  /** The stored blurhash for the path, or null while loading / when none exists. */
+  hash: Accessor<string | null>;
+  isLoading: Accessor<boolean>;
+}
+
+/**
+ * The blurhash sidecar for a bucket image (written automatically by
+ * `bucket.put`, see `Sp00kyConfig.blurhash`). Resolves from OPFS instantly on
+ * warm clients; a miss is remembered per tab. Use this directly when the hash
+ * belongs to a different rendition than the displayed image; otherwise
+ * `useBucketImage` / `BucketImage` bundle it with the download.
+ */
+export function useBlurhash<S extends SchemaStructure>(
+  bucketName: BucketNames<S>,
+  path: Accessor<string | null | undefined>
+): UseBlurhashResult;
+export function useBlurhash<S extends SchemaStructure>(
+  db: SyncedDb<S>,
+  bucketName: BucketNames<S>,
+  path: Accessor<string | null | undefined>
+): UseBlurhashResult;
+export function useBlurhash<S extends SchemaStructure>(
+  dbOrBucketName: SyncedDb<S> | BucketNames<S>,
+  bucketNameOrPath?: BucketNames<S> | Accessor<string | null | undefined>,
+  maybePath?: Accessor<string | null | undefined>
+): UseBlurhashResult {
+  let db: SyncedDb<S>;
+  let bucketName: BucketNames<S>;
+  let path: Accessor<string | null | undefined>;
+
+  if (typeof dbOrBucketName === 'string') {
+    db = useDb<S>();
+    bucketName = dbOrBucketName as BucketNames<S>;
+    path = bucketNameOrPath as Accessor<string | null | undefined>;
+  } else {
+    db = dbOrBucketName as SyncedDb<S>;
+    bucketName = bucketNameOrPath as BucketNames<S>;
+    path = maybePath as Accessor<string | null | undefined>;
+  }
+
+  // Written from the lookup continuation, outside any tracking scope.
+  const [hash, setHash] = createSignal<string | null>(null, { ownedWrite: true });
+  const [isLoading, setIsLoading] = createSignal(false, { ownedWrite: true });
+
+  // Compute tracks the path; apply runs the lookup and returns the cancel
+  // cleanup, which runs before the next apply and on unmount.
+  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 };
+}