@protobase/ui 0.12.2 → 0.12.4

package/dist/data/api-provider.js

@@ -5,17 +5,42 @@ import { jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 //#region src/data/api-provider.tsx
 const ApiContext = createContext(null);
+const SourceClientsContext = createContext(null);
+const ResourceClientContext = createContext(null);
+/** The API client: the app's own, or below `MetaGate` one that sends each resource's calls to the API that serves it. */
 const useClient = () => {
 	const client = useContext(ApiContext);
 	if (!client) throw new Error("useClient must be used inside ApiProvider");
 	return client;
 };
 /**
+* The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
+* otherwise. A source's client calls that API's functions with `invoke`, where `useClient()` calls the app's own.
+*/
+const useResourceClient = (resource) => {
+	const own = useClient();
+	return useContext(ResourceClientContext)?.(resource) ?? own;
+};
+/** The client of a source's API, one per URL, with the signed-in user's token; for `MetaGate`. */
+const useSourceClients = () => {
+	const clientOf = useContext(SourceClientsContext);
+	if (!clientOf) throw new Error("useSourceClients must be used inside ApiProvider");
+	return clientOf;
+};
+/** Gives what is below it `client` from `useClient()`, and the client of a resource's API from `useResourceClient()`. */
+const ClientProvider = ({ client, resourceClient, children }) => /* @__PURE__ */ jsx(ApiContext.Provider, {
+	value: client,
+	children: /* @__PURE__ */ jsx(ResourceClientContext.Provider, {
+		value: resourceClient,
+		children
+	})
+});
+/**
 * Owns the query cache and the API client; refetches `/meta` whenever `X-Meta-Version` changes. The version is
 * compared only with the last one seen: it hashes the models and roles, while the `/meta` ETag hashes the whole
 * per-caller body, so the two never match.
 */
-const ApiProvider = ({ baseUrl, client: given, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
+const ApiProvider = ({ baseUrl, client: given, sources, fetch, queryClient: givenQueryClient, token, onUnauthenticated, children }) => {
 	const [queryClient] = useState(() => givenQueryClient ?? new QueryClient({ defaultOptions: { queries: {
 		staleTime: 3e4,
 		retry: false,
@@ -41,13 +66,42 @@ const ApiProvider = ({ baseUrl, client: given, fetch, queryClient: givenQueryCli
 		token,
 		onUnauthenticated
 	]);
+	const sourceClient = useMemo(() => {
+		const made = /* @__PURE__ */ new Map();
+		return (source) => {
+			const ready = sources?.[source.url] ?? made.get(source.url);
+			if (ready) return ready;
+			let seen;
+			const client = createClient({
+				baseUrl: source.url,
+				fetch,
+				token,
+				onMetaVersion: (version) => {
+					const previous = seen;
+					seen = version;
+					if (previous === void 0 || previous === version) return;
+					queryClient.invalidateQueries({ queryKey: keys.sourceMetas(source.url) }, { cancelRefetch: false });
+				}
+			});
+			made.set(source.url, client);
+			return client;
+		};
+	}, [
+		sources,
+		fetch,
+		token,
+		queryClient
+	]);
 	return /* @__PURE__ */ jsx(QueryClientProvider, {
 		client: queryClient,
 		children: /* @__PURE__ */ jsx(ApiContext.Provider, {
 			value: client,
-			children
+			children: /* @__PURE__ */ jsx(SourceClientsContext.Provider, {
+				value: sourceClient,
+				children
+			})
 		})
 	});
 };
 //#endregion
-export { ApiProvider, useClient };
+export { ApiProvider, ClientProvider, useClient, useResourceClient, useSourceClients };

package/dist/data/meta-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+//#region src/data/meta-context.ts
+/** The app's `/meta` with the resources of its sources, as `MetaGate` gives it to everything below it. */
+const MetaContext = createContext(null);
+//#endregion
+export { MetaContext };

package/dist/data/meta-data.d.ts

@@ -1,4 +1,4 @@
-import { PluginRef, ResourcePermissions } from "@protobase/client";
+import { PluginRef, ResourcePermissions, SourceRef } from "@protobase/client";
 import { BottomBarModel, ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
@@ -22,5 +22,19 @@ export type MetaData = {
   };
   /** The plugins the app loads for the user (see `PluginGate`). */
   plugins?: PluginRef[];
+  /** The other APIs the app draws resources from for the user, and how far their `/meta` has loaded (see `withSources`). */
+  sources?: SourceStatus[];
+};
+/**
+ * A source of resources and its `/meta`: `ready` once its resources are among the app's, `error` when it could not be
+ * read, the reason in `error`.
+ */
+export type SourceStatus = {
+  source: SourceRef;
+  state: 'loading' | 'ready';
+} | {
+  source: SourceRef;
+  state: 'error';
+  error: Error;
 };
 //#endregion

package/dist/data/query-keys.js

@@ -1,6 +1,14 @@
 //#region src/data/query-keys.ts
 const keys = {
 	meta: ["meta"],
+	/** A source's `/meta`, as far as the app draws it: its URL, and the resources the app lists for it. */
+	sourceMeta: (url, resources) => [
+		"source-meta",
+		url,
+		resources.join(",")
+	],
+	/** Every `/meta` query of the source at `url`. */
+	sourceMetas: (url) => ["source-meta", url],
 	list: (resource, filter, orderBy, pageSize, startToken) => [
 		"list",
 		resource,

package/dist/data/use-meta.d.ts

@@ -1,8 +1,10 @@
 import { MetaData } from "./meta-data.js";
+import { UseQueryResult } from "@tanstack/react-query";
 //#region src/data/use-meta.d.ts
 /**
  * The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
- * `/meta` costs a 304, and the cached object keeps its identity.
+ * `/meta` costs a 304, and the cached object keeps its identity. Below the app's `MetaGate`, `data` holds the resources
+ * of its sources too, as every page of the app reads them.
  */
-export declare const useMeta: () => import("@tanstack/react-query").UseQueryResult<MetaData, Error>;
+export declare const useMeta: () => UseQueryResult<MetaData>;
 //#endregion

package/dist/data/use-meta.js

@@ -1,15 +1,19 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
+import { MetaContext } from "./meta-context.js";
+import { useContext, useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-meta.ts
 /**
 * The resource and view models. Refetches on window focus with `If-None-Match`, so an unchanged
-* `/meta` costs a 304, and the cached object keeps its identity.
+* `/meta` costs a 304, and the cached object keeps its identity. Below the app's `MetaGate`, `data` holds the resources
+* of its sources too, as every page of the app reads them.
 */
 const useMeta = () => {
 	const client = useClient();
 	const queryClient = useQueryClient();
-	return useQuery({
+	const merged = useContext(MetaContext);
+	const query = useQuery({
 		queryKey: keys.meta,
 		staleTime: 0,
 		refetchOnWindowFocus: "always",
@@ -30,10 +34,18 @@ const useMeta = () => {
 				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime },
-				...result.meta.plugins && { plugins: result.meta.plugins }
+				...result.meta.plugins && { plugins: result.meta.plugins },
+				...result.meta.sources && { sources: result.meta.sources.map((source) => ({
+					source,
+					state: "loading"
+				})) }
 			};
 		}
 	});
+	return useMemo(() => merged && query.data ? {
+		...query,
+		data: merged
+	} : query, [merged, query]);
 };
 //#endregion
 export { useMeta };

package/dist/data/use-source-metas.js

@@ -0,0 +1,61 @@
+import { keys } from "./query-keys.js";
+import { useMemo } from "react";
+import { sourceMeta } from "@protobase/client";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
+//#region src/data/use-source-metas.ts
+/** How long the app waits for a source's `/meta` before it shows the source's resources as unavailable. */
+const sourceTimeoutMs = 1e4;
+const combine = (results) => results.map((result) => ({
+	data: result.data?.meta,
+	error: result.error
+}));
+/**
+* Each source's `/meta`, read with the user's token from that API and scoped to the resources the app draws from it
+* (`sourceMeta`). Like the app's own, it is read again on window focus with `If-None-Match`, and a source that cannot be
+* read is an `error` without holding up the others or the app.
+*/
+const useSourceMetas = (sources, clientOf) => {
+	const queryClient = useQueryClient();
+	const results = useQueries({
+		queries: sources.map((source) => {
+			const queryKey = keys.sourceMeta(source.url, source.resources);
+			return {
+				queryKey,
+				staleTime: 0,
+				refetchOnWindowFocus: "always",
+				queryFn: async () => {
+					const previous = queryClient.getQueryData(queryKey);
+					const result = await clientOf(source).meta(previous?.etag, { signal: AbortSignal.timeout(sourceTimeoutMs) });
+					if (result.status === "unchanged") {
+						if (!previous) throw new Error(`${source.label} answered 304 to a request without If-None-Match`);
+						return previous;
+					}
+					return {
+						etag: result.etag,
+						meta: sourceMeta(result.meta, source)
+					};
+				}
+			};
+		}),
+		combine
+	});
+	return useMemo(() => sources.map((source, index) => {
+		const { data, error } = results[index];
+		if (data) return {
+			source,
+			state: "ready",
+			meta: data
+		};
+		if (error) return {
+			source,
+			state: "error",
+			error
+		};
+		return {
+			source,
+			state: "loading"
+		};
+	}), [sources, results]);
+};
+//#endregion
+export { sourceTimeoutMs, useSourceMetas };

package/dist/data/with-sources.js

@@ -0,0 +1,38 @@
+//#region src/data/with-sources.ts
+/**
+* The app's `/meta` with the resources it draws from its sources: those of every source that is ready, with their views
+* and permissions, as if they were the app's own, and how far each source has loaded in `sources`. A source that is
+* loading or cannot be read adds no resources; the app shows its resources as unavailable (see `sourceStatusOf`).
+*/
+const withSources = (meta, results) => {
+	if (results.length === 0) return meta;
+	const ready = results.flatMap((result) => result.state === "ready" ? [result.meta] : []);
+	const sources = results.map((result) => result.state === "error" ? {
+		source: result.source,
+		state: "error",
+		error: result.error
+	} : {
+		source: result.source,
+		state: result.state
+	});
+	return {
+		...meta,
+		resources: {
+			...meta.resources,
+			...Object.fromEntries(ready.flatMap((part) => part.resources.map((model) => [model.name, model])))
+		},
+		views: {
+			...meta.views,
+			...Object.fromEntries(ready.flatMap((part) => part.views.map((view) => [view.resource, view])))
+		},
+		permissions: {
+			...meta.permissions,
+			...Object.assign({}, ...ready.map((part) => part.permissions))
+		},
+		sources
+	};
+};
+/** The source the app draws `resource` from, with how far it has loaded; `undefined` for a resource of the app's own. */
+const sourceStatusOf = (meta, resource) => meta.sources?.find((status) => status.source.resources.includes(resource));
+//#endregion
+export { sourceStatusOf, withSources };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { ActionContext, ActionHandler, ProjectUi, definePlugin, defineUi } from
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
 import "./app/index.js";
-import { ApiProvider, ApiProviderProps, useClient } from "./data/api-provider.js";
+import { ApiProvider, ApiProviderProps, useClient, useResourceClient } from "./data/api-provider.js";
 import { MetaData } from "./data/meta-data.js";
 import { useMeta } from "./data/use-meta.js";
 import { useList } from "./data/use-list.js";
@@ -39,4 +39,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ApiProvider, useClient } from "./data/api-provider.js";
+import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { ChatMessage } from "./chat/chat-message.js";
@@ -30,4 +30,4 @@ import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/package.js

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