@protobase/ui 0.23.3 → 0.23.4

package/dist/app/app.js

@@ -12,11 +12,12 @@ import { CustomBoundary } from "./pages/custom-boundary.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
+import { sourceStatusOf } from "../data/with-sources.js";
+import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
 import { recordTitle } from "../live/model-helpers.js";
-import { sourceStatusOf } from "../data/with-sources.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
 import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
@@ -75,6 +76,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		resource: shown?.resource,
 		key: shown?.key
 	});
+	useLiveUpdates(meta);
 	const groups = navFromMeta(meta, basePath, recent);
 	const firstPage = Object.keys(meta.pages)[0];
 	const firstResource = Object.keys(meta.resources)[0];

package/dist/app/meta-gate.js

@@ -1,10 +1,10 @@
 import { Spinner } from "../primitives/spinner.js";
 import { ClientProvider, useClient, useSourceClients } from "../data/api-provider.js";
+import { withSources } from "../data/with-sources.js";
 import { MetaContext } from "../data/meta-context.js";
 import { allowEverything } from "../data/meta-data.js";
 import { useMeta } from "../data/use-meta.js";
 import { useSourceMetas } from "../data/use-source-metas.js";
-import { withSources } from "../data/with-sources.js";
 import { useContext, useMemo } from "react";
 import { isApiError, routedClient } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/data/api-provider.d.ts

@@ -56,6 +56,7 @@ export declare const useClient: () => {
   form: (name: string) => Promise<import("@protobase/client").PublicForm>;
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
+  live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -114,6 +115,7 @@ export declare const useResourceClient: (resource: string) => {
   form: (name: string) => Promise<import("@protobase/client").PublicForm>;
   formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
   submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
+  live: (handlers: import("@protobase/client").LiveHandlers) => () => void;
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data/focus-refresh.js

@@ -9,6 +9,8 @@ const createFocusRefresh = () => {
 	let paused = 0;
 	return {
 		refetchOnWindowFocus: () => paused > 0 ? false : "always",
+		/** Whether a form on screen holds unsaved changes, so its record must not be read again under it. */
+		paused: () => paused > 0,
 		/** Holds the refetches until the returned function is called. */
 		pause: () => {
 			paused += 1;

package/dist/data/live-refresh.js

@@ -0,0 +1,29 @@
+/**
+* Reads again what the page shows of the resources whose records changed: every query keyed by the resource, as after
+* a write of the page's own. While a form holds unsaved changes (`paused`), the records stay as they are, only marked
+* stale, so the form's Save still finds a conflict.
+*/
+const liveRefresh = (queryClient, paused) => {
+	const pending = /* @__PURE__ */ new Set();
+	let timer;
+	const flush = () => {
+		timer = void 0;
+		const resources = new Set(pending);
+		pending.clear();
+		const shown = (key) => resources.has(key[1]);
+		queryClient.invalidateQueries({ predicate: (query) => shown(query.queryKey) && query.queryKey[0] !== "record" });
+		queryClient.invalidateQueries({
+			predicate: (query) => shown(query.queryKey) && query.queryKey[0] === "record",
+			refetchType: paused() ? "none" : "active"
+		});
+	};
+	return {
+		changed: (resources) => {
+			for (const resource of resources) pending.add(resource);
+			if (pending.size > 0 && !timer) timer = setTimeout(flush, 300);
+		},
+		stop: () => clearTimeout(timer)
+	};
+};
+//#endregion
+export { liveRefresh };

package/dist/data/use-live-updates.js

@@ -0,0 +1,36 @@
+import { FocusRefreshContext } from "./focus-refresh.js";
+import { useClient } from "./api-provider.js";
+import { liveRefresh } from "./live-refresh.js";
+import { sourceStatusOf } from "./with-sources.js";
+import { useContext, useEffect, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+//#region src/data/use-live-updates.ts
+/**
+* Keeps what the page shows of the app's `.live()` resources current: hears which records change (`client.live`) and
+* reads again the lists, records and counts of their resources. Connects only when the caller reads a live resource.
+*/
+const useLiveUpdates = (meta) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const focusRefresh = useContext(FocusRefreshContext);
+	const live = useMemo(() => Object.values(meta.resources).filter((model) => model.live && !sourceStatusOf(meta, model.name)).map((model) => model.name).sort().join(","), [meta]);
+	useEffect(() => {
+		if (!live) return;
+		const refresh = liveRefresh(queryClient, () => focusRefresh?.paused() ?? false);
+		const stop = client.live({
+			onChanges: (changes) => refresh.changed(changes.map((change) => change.resource)),
+			onResync: () => refresh.changed(live.split(","))
+		});
+		return () => {
+			stop();
+			refresh.stop();
+		};
+	}, [
+		client,
+		queryClient,
+		focusRefresh,
+		live
+	]);
+};
+//#endregion
+export { useLiveUpdates };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.23.3";
+var version = "0.23.4";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };