@rocicorp/zero 0.26.1 → 0.26.2-canary.4

package/out/zero-react/src/use-query.js

@@ -1,297 +1,299 @@
-import { resolver } from "@rocicorp/resolver";
-import React, { useSyncExternalStore } from "react";
-import { deepClone } from "../../shared/src/deep-clone.js";
-import "compare-utf8";
-import "../../zero-protocol/src/ast.js";
-import "js-xxhash";
 import { asQueryInternals } from "../../zql/src/query/query-internals.js";
 import { addContextToQuery } from "../../zql/src/query/query-registry.js";
 import { DEFAULT_TTL_MS } from "../../zql/src/query/ttl.js";
+import { deepClone } from "../../shared/src/deep-clone.js";
 import { useZero } from "./zero-provider.js";
-const reactUse = React.use;
-const suspend = reactUse ? reactUse : (p) => {
-  throw p;
+import "./bindings.js";
+import { resolver } from "@rocicorp/resolver";
+import React, { useSyncExternalStore } from "react";
+//#region ../zero-react/src/use-query.tsx
+var reactUse = React.use;
+var suspend = reactUse ? reactUse : (p) => {
+	throw p;
 };
 function useQuery(query, options) {
-  let enabled = true;
-  let ttl = DEFAULT_TTL_MS;
-  if (typeof options === "boolean") {
-    enabled = options;
-  } else if (options) {
-    ({ enabled = true, ttl = DEFAULT_TTL_MS } = options);
-  }
-  const zero = useZero();
-  const q = query ? addContextToQuery(query, zero.context) : void 0;
-  const view = q ? viewStore.getView(zero, q, enabled, ttl) : void 0;
-  return useSyncExternalStore(
-    view?.subscribeReactInternals ?? disabledSubscriber,
-    view?.getSnapshot ?? getDisabledSnapshot,
-    view?.getSnapshot ?? getDisabledSnapshot
-  );
+	let enabled = true;
+	let ttl = DEFAULT_TTL_MS;
+	if (typeof options === "boolean") enabled = options;
+	else if (options) ({enabled = true, ttl = DEFAULT_TTL_MS} = options);
+	const zero = useZero();
+	const q = query ? addContextToQuery(query, zero.context) : void 0;
+	const view = q ? viewStore.getView(zero, q, enabled, ttl) : void 0;
+	return useSyncExternalStore(view?.subscribeReactInternals ?? disabledSubscriber, view?.getSnapshot ?? getDisabledSnapshot, view?.getSnapshot ?? getDisabledSnapshot);
 }
 function useSuspenseQuery(query, options) {
-  let enabled = true;
-  let ttl = DEFAULT_TTL_MS;
-  let suspendUntil = "partial";
-  if (typeof options === "boolean") {
-    enabled = options;
-  } else if (options) {
-    ({
-      enabled = true,
-      ttl = DEFAULT_TTL_MS,
-      suspendUntil = "complete"
-    } = options);
-  }
-  const zero = useZero();
-  const q = query ? addContextToQuery(query, zero.context) : void 0;
-  const view = q ? viewStore.getView(zero, q, enabled, ttl) : void 0;
-  const snapshot = useSyncExternalStore(
-    view?.subscribeReactInternals ?? disabledSubscriber,
-    view?.getSnapshot ?? getDisabledSnapshot,
-    view?.getSnapshot ?? getDisabledSnapshot
-  );
-  if (view && enabled) {
-    if (suspendUntil === "complete" && !view.complete) {
-      suspend(view.waitForComplete());
-    }
-    if (suspendUntil === "partial" && !view.nonEmpty) {
-      suspend(view.waitForNonEmpty());
-    }
-  }
-  return snapshot;
+	let enabled = true;
+	let ttl = DEFAULT_TTL_MS;
+	let suspendUntil = "partial";
+	if (typeof options === "boolean") enabled = options;
+	else if (options) ({enabled = true, ttl = DEFAULT_TTL_MS, suspendUntil = "complete"} = options);
+	const zero = useZero();
+	const q = query ? addContextToQuery(query, zero.context) : void 0;
+	const view = q ? viewStore.getView(zero, q, enabled, ttl) : void 0;
+	const snapshot = useSyncExternalStore(view?.subscribeReactInternals ?? disabledSubscriber, view?.getSnapshot ?? getDisabledSnapshot, view?.getSnapshot ?? getDisabledSnapshot);
+	if (view && enabled) {
+		if (suspendUntil === "complete" && !view.complete) suspend(view.waitForComplete());
+		if (suspendUntil === "partial" && !view.nonEmpty) suspend(view.waitForNonEmpty());
+	}
+	return snapshot;
 }
-const emptyArray = [];
-const disabledSubscriber = () => () => {
-};
-const resultTypeUnknown = { type: "unknown" };
-const resultTypeComplete = { type: "complete" };
-const resultTypeError = { type: "error" };
-const disabledQuerySnapshot = [void 0, resultTypeUnknown];
-const getDisabledSnapshot = () => disabledQuerySnapshot;
-const emptySnapshotSingularUnknown = [void 0, resultTypeUnknown];
-const emptySnapshotSingularComplete = [void 0, resultTypeComplete];
-const emptySnapshotSingularErrorUnknown = [void 0, resultTypeError];
-const emptySnapshotPluralUnknown = [emptyArray, resultTypeUnknown];
-const emptySnapshotPluralComplete = [emptyArray, resultTypeComplete];
-const emptySnapshotErrorUnknown = [emptyArray, resultTypeError];
+var emptyArray = [];
+var disabledSubscriber = () => () => {};
+var resultTypeUnknown = { type: "unknown" };
+var resultTypeComplete = { type: "complete" };
+var resultTypeError = { type: "error" };
+var disabledQuerySnapshot = [void 0, resultTypeUnknown];
+var getDisabledSnapshot = () => disabledQuerySnapshot;
+var emptySnapshotSingularUnknown = [void 0, resultTypeUnknown];
+var emptySnapshotSingularComplete = [void 0, resultTypeComplete];
+var emptySnapshotSingularErrorUnknown = [void 0, resultTypeError];
+var emptySnapshotPluralUnknown = [emptyArray, resultTypeUnknown];
+var emptySnapshotPluralComplete = [emptyArray, resultTypeComplete];
+var emptySnapshotErrorUnknown = [emptyArray, resultTypeError];
 function getDefaultSnapshot(singular) {
-  return singular ? emptySnapshotSingularUnknown : emptySnapshotPluralUnknown;
+	return singular ? emptySnapshotSingularUnknown : emptySnapshotPluralUnknown;
 }
+/**
+* Returns a new snapshot or one of the empty predefined ones. Returning the
+* predefined ones is important to prevent unnecessary re-renders in React.
+*/
 function getSnapshot(singular, data, resultType, retryFn, error) {
-  if (singular && data === void 0) {
-    switch (resultType) {
-      case "error":
-        if (error) {
-          return [
-            void 0,
-            makeError(retryFn, error)
-          ];
-        }
-        return emptySnapshotSingularErrorUnknown;
-      case "complete":
-        return emptySnapshotSingularComplete;
-      case "unknown":
-        return emptySnapshotSingularUnknown;
-    }
-  }
-  if (!singular && data.length === 0) {
-    switch (resultType) {
-      case "error":
-        if (error) {
-          return [
-            emptyArray,
-            makeError(retryFn, error)
-          ];
-        }
-        return emptySnapshotErrorUnknown;
-      case "complete":
-        return emptySnapshotPluralComplete;
-      case "unknown":
-        return emptySnapshotPluralUnknown;
-    }
-  }
-  switch (resultType) {
-    case "error":
-      if (error) {
-        return [data, makeError(retryFn, error)];
-      }
-      return [
-        data,
-        makeError(retryFn, {
-          error: "app",
-          message: "An unknown error occurred"
-        })
-      ];
-    case "complete":
-      return [data, resultTypeComplete];
-    case "unknown":
-      return [data, resultTypeUnknown];
-  }
+	if (singular && data === void 0) switch (resultType) {
+		case "error":
+			if (error) return [void 0, makeError(retryFn, error)];
+			return emptySnapshotSingularErrorUnknown;
+		case "complete": return emptySnapshotSingularComplete;
+		case "unknown": return emptySnapshotSingularUnknown;
+	}
+	if (!singular && data.length === 0) switch (resultType) {
+		case "error":
+			if (error) return [emptyArray, makeError(retryFn, error)];
+			return emptySnapshotErrorUnknown;
+		case "complete": return emptySnapshotPluralComplete;
+		case "unknown": return emptySnapshotPluralUnknown;
+	}
+	switch (resultType) {
+		case "error":
+			if (error) return [data, makeError(retryFn, error)];
+			return [data, makeError(retryFn, {
+				error: "app",
+				id: "unknown",
+				name: "unknown",
+				message: "An unknown error occurred"
+			})];
+		case "complete": return [data, resultTypeComplete];
+		case "unknown": return [data, resultTypeUnknown];
+	}
 }
 function makeError(retry, error) {
-  const message = error.message ?? "An unknown error occurred";
-  return {
-    type: "error",
-    retry,
-    refetch: retry,
-    error: {
-      type: error.error,
-      message,
-      ...error.details ? { details: error.details } : {}
-    }
-  };
-}
-class ViewStore {
-  #views = /* @__PURE__ */ new Map();
-  constructor() {
-  }
-  getView(zero, q, enabled, ttl) {
-    const qi = asQueryInternals(q);
-    if (!enabled) {
-      return {
-        getSnapshot: () => getDefaultSnapshot(qi.format.singular),
-        subscribeReactInternals: disabledSubscriber,
-        updateTTL: () => {
-        },
-        waitForComplete: () => Promise.resolve(),
-        waitForNonEmpty: () => Promise.resolve(),
-        complete: false,
-        nonEmpty: false
-      };
-    }
-    const hash = qi.hash() + zero.clientID;
-    let existing = this.#views.get(hash);
-    if (!existing) {
-      existing = new ViewWrapper(q, zero, ttl, (view) => {
-        const currentView = this.#views.get(hash);
-        if (currentView && currentView !== view) {
-          return;
-        }
-        this.#views.delete(hash);
-      });
-      this.#views.set(hash, existing);
-    } else {
-      existing.updateTTL(ttl);
-    }
-    return existing;
-  }
+	const message = error.message ?? "An unknown error occurred";
+	return {
+		type: "error",
+		retry,
+		refetch: retry,
+		error: {
+			type: error.error,
+			message,
+			...error.details ? { details: error.details } : {}
+		}
+	};
 }
-const viewStore = new ViewStore();
-class ViewWrapper {
-  #view;
-  #onDematerialized;
-  #query;
-  #snapshot;
-  #reactInternals = /* @__PURE__ */ new Set();
-  #ttl;
-  #complete = false;
-  #completeResolver = resolver();
-  #nonEmpty = false;
-  #nonEmptyResolver = resolver();
-  #zero;
-  #singular;
-  #destroyTimer;
-  constructor(query, zero, ttl, onDematerialized) {
-    this.#query = query;
-    this.#zero = zero;
-    this.#ttl = ttl;
-    this.#onDematerialized = onDematerialized;
-    const { singular } = asQueryInternals(query).format;
-    this.#singular = singular;
-    this.#snapshot = getDefaultSnapshot(singular);
-    this.#materializeIfNeeded();
-  }
-  #onData = (snap, resultType, error) => {
-    const data = snap === void 0 ? snap : deepClone(snap);
-    this.#snapshot = getSnapshot(
-      this.#singular,
-      data,
-      resultType,
-      this.#retry,
-      error
-    );
-    if (resultType === "complete" || resultType === "error") {
-      this.#complete = true;
-      this.#completeResolver.resolve();
-      this.#nonEmpty = true;
-      this.#nonEmptyResolver.resolve();
-    }
-    if (this.#singular ? this.#snapshot[0] !== void 0 : this.#snapshot[0].length !== 0) {
-      this.#nonEmpty = true;
-      this.#nonEmptyResolver.resolve();
-    }
-    for (const internals of this.#reactInternals) {
-      internals();
-    }
-  };
-  /**
-   * Called by the user to force a retry of the query
-   * in the case the query errored.
-   */
-  #retry = () => {
-    this.#view?.destroy();
-    this.#view = void 0;
-    this.#materializeIfNeeded();
-  };
-  #materializeIfNeeded = () => {
-    if (this.#view) {
-      return;
-    }
-    this.#view = this.#zero.materialize(this.#query, {
-      ttl: this.#ttl
-    });
-    this.#view.addListener(this.#onData);
-  };
-  getSnapshot = () => this.#snapshot;
-  subscribeReactInternals = (internals) => {
-    this.#reactInternals.add(internals);
-    if (this.#destroyTimer !== void 0) {
-      clearTimeout(this.#destroyTimer);
-      this.#destroyTimer = void 0;
-    }
-    this.#materializeIfNeeded();
-    return () => {
-      this.#reactInternals.delete(internals);
-      if (this.#reactInternals.size === 0) {
-        this.#destroyTimer = setTimeout(() => {
-          this.#destroyTimer = void 0;
-          if (this.#view === void 0) {
-            return;
-          }
-          if (this.#reactInternals.size > 0) {
-            return;
-          }
-          this.#view.destroy();
-          this.#view = void 0;
-          this.#complete = false;
-          this.#completeResolver = resolver();
-          this.#nonEmpty = false;
-          this.#nonEmptyResolver = resolver();
-          this.#onDematerialized(this);
-        }, 10);
-      }
-    };
-  };
-  updateTTL(ttl) {
-    this.#ttl = ttl;
-    this.#view?.updateTTL(ttl);
-  }
-  get complete() {
-    return this.#complete;
-  }
-  waitForComplete() {
-    return this.#completeResolver.promise;
-  }
-  get nonEmpty() {
-    return this.#nonEmpty;
-  }
-  waitForNonEmpty() {
-    return this.#nonEmptyResolver.promise;
-  }
-}
-export {
-  ViewStore,
-  useQuery,
-  useSuspenseQuery
+/**
+* A global store of all active views.
+*
+* React subscribes and unsubscribes to these views
+* via `useSyncExternalStore`.
+*
+* Managing views through `useEffect` or `useLayoutEffect` causes
+* inconsistencies because effects run after render.
+*
+* For example, if useQuery used use*Effect in the component below:
+* ```ts
+* function Foo({issueID}) {
+*   const issue = useQuery(z.query.issue.where('id', issueID).one());
+*   if (issue?.id !== undefined && issue.id !== issueID) {
+*     console.log('MISMATCH!', issue.id, issueID);
+*   }
+* }
+* ```
+*
+* `MISMATCH` will be printed whenever the `issueID` prop changes.
+*
+* This is because the component will render once with
+* the old state returned from `useQuery`. Then the effect inside
+* `useQuery` will run. The component will render again with the new
+* state. This inconsistent transition can cause unexpected results.
+*
+* Emulating `useEffect` via `useState` and `if` causes resource leaks.
+* That is:
+*
+* ```ts
+* function useQuery(q) {
+*   const [oldHash, setOldHash] = useState();
+*   if (hash(q) !== oldHash) {
+*      // make new view
+*   }
+*
+*   useEffect(() => {
+*     return () => view.destroy();
+*   }, []);
+* }
+* ```
+*
+* I'm not sure why but in strict mode the cleanup function
+* fails to be called for the first instance of the view and only
+* cleans up later instances.
+*
+* Swapping `useState` to `useRef` has similar problems.
+*/
+var ViewStore = class {
+	#views = /* @__PURE__ */ new Map();
+	constructor() {}
+	getView(zero, q, enabled, ttl) {
+		const qi = asQueryInternals(q);
+		if (!enabled) return {
+			getSnapshot: () => getDefaultSnapshot(qi.format.singular),
+			subscribeReactInternals: disabledSubscriber,
+			updateTTL: () => {},
+			waitForComplete: () => Promise.resolve(),
+			waitForNonEmpty: () => Promise.resolve(),
+			complete: false,
+			nonEmpty: false
+		};
+		const hash = qi.hash() + zero.clientID;
+		let existing = this.#views.get(hash);
+		if (!existing) {
+			existing = new ViewWrapper(q, zero, ttl, (view) => {
+				const currentView = this.#views.get(hash);
+				if (currentView && currentView !== view) return;
+				this.#views.delete(hash);
+			});
+			this.#views.set(hash, existing);
+		} else existing.updateTTL(ttl);
+		return existing;
+	}
+};
+var viewStore = new ViewStore();
+/**
+* This wraps and ref counts a view.
+*
+* The only signal we have from React as to whether or not it is
+* done with a view is when it calls `unsubscribe`.
+*
+* In non-strict-mode we can clean up the view as soon
+* as the listener count goes to 0.
+*
+* In strict-mode, the listener count will go to 0 then a
+* new listener for the same view is immediately added back.
+*
+* This is why the `onMaterialized` and `onDematerialized` callbacks exist --
+* they allow a view which React is still referencing to be added
+* back into the store when React re-subscribes to it.
+*
+* This wrapper also exists to deal with the various
+* `useSyncExternalStore` caveats that cause excessive
+* re-renders and materializations.
+*
+* See: https://react.dev/reference/react/useSyncExternalStore#caveats
+* Especially:
+* 1. The store snapshot returned by getSnapshot must be immutable. If the underlying store has mutable data, return a new immutable snapshot if the data has changed. Otherwise, return a cached last snapshot.
+* 2. If a different subscribe function is passed during a re-render, React will re-subscribe to the store using the newly passed subscribe function. You can prevent this by declaring subscribe outside the component.
+*/
+var ViewWrapper = class {
+	#view;
+	#onDematerialized;
+	#query;
+	#snapshot;
+	#reactInternals = /* @__PURE__ */ new Set();
+	#ttl;
+	#complete = false;
+	#completeResolver = resolver();
+	#nonEmpty = false;
+	#nonEmptyResolver = resolver();
+	#zero;
+	#singular;
+	#destroyTimer;
+	constructor(query, zero, ttl, onDematerialized) {
+		this.#query = query;
+		this.#zero = zero;
+		this.#ttl = ttl;
+		this.#onDematerialized = onDematerialized;
+		const { singular } = asQueryInternals(query).format;
+		this.#singular = singular;
+		this.#snapshot = getDefaultSnapshot(singular);
+		this.#materializeIfNeeded();
+	}
+	#onData = (snap, resultType, error) => {
+		const data = snap === void 0 ? snap : deepClone(snap);
+		this.#snapshot = getSnapshot(this.#singular, data, resultType, this.#retry, error);
+		if (resultType === "complete" || resultType === "error") {
+			this.#complete = true;
+			this.#completeResolver.resolve();
+			this.#nonEmpty = true;
+			this.#nonEmptyResolver.resolve();
+		}
+		if (this.#singular ? this.#snapshot[0] !== void 0 : this.#snapshot[0].length !== 0) {
+			this.#nonEmpty = true;
+			this.#nonEmptyResolver.resolve();
+		}
+		for (const internals of this.#reactInternals) internals();
+	};
+	/**
+	* Called by the user to force a retry of the query
+	* in the case the query errored.
+	*/
+	#retry = () => {
+		this.#view?.destroy();
+		this.#view = void 0;
+		this.#materializeIfNeeded();
+	};
+	#materializeIfNeeded = () => {
+		if (this.#view) return;
+		this.#view = this.#zero.materialize(this.#query, { ttl: this.#ttl });
+		this.#view.addListener(this.#onData);
+	};
+	getSnapshot = () => this.#snapshot;
+	subscribeReactInternals = (internals) => {
+		this.#reactInternals.add(internals);
+		if (this.#destroyTimer !== void 0) {
+			clearTimeout(this.#destroyTimer);
+			this.#destroyTimer = void 0;
+		}
+		this.#materializeIfNeeded();
+		return () => {
+			this.#reactInternals.delete(internals);
+			if (this.#reactInternals.size === 0) this.#destroyTimer = setTimeout(() => {
+				this.#destroyTimer = void 0;
+				if (this.#view === void 0) return;
+				if (this.#reactInternals.size > 0) return;
+				this.#view.destroy();
+				this.#view = void 0;
+				this.#complete = false;
+				this.#completeResolver = resolver();
+				this.#nonEmpty = false;
+				this.#nonEmptyResolver = resolver();
+				this.#onDematerialized(this);
+			}, 10);
+		};
+	};
+	updateTTL(ttl) {
+		this.#ttl = ttl;
+		this.#view?.updateTTL(ttl);
+	}
+	get complete() {
+		return this.#complete;
+	}
+	waitForComplete() {
+		return this.#completeResolver.promise;
+	}
+	get nonEmpty() {
+		return this.#nonEmpty;
+	}
+	waitForNonEmpty() {
+		return this.#nonEmptyResolver.promise;
+	}
 };
-//# sourceMappingURL=use-query.js.map
+//#endregion
+export { useQuery, useSuspenseQuery };
+
+//# sourceMappingURL=use-query.js.map