react-fate 0.1.3 → 1.0.0

package/lib/index.mjs

@@ -1,7 +1,7 @@
-import { ConnectionTag, clientRoot, createClient, createTRPCTransport, isViewTag, mutation, toEntityId, view } from "@nkzw/fate";
-import { createContext, use, useCallback, useDeferredValue, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { ConnectionTag, clientRoot, createClient, createHTTPTransport, createTRPCTransport, isViewTag, mutation, toEntityId, view } from "@nkzw/fate";
+import { createContext, use, useCallback, useDeferredValue, useEffect, useEffectEvent, useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
-
+import { getListEntries } from "@nkzw/fate/list";
 //#region src/context.tsx
 const FateContext = createContext(null);
 /**
@@ -21,7 +21,6 @@ function useFateClient() {
 	if (!context) throw new Error(`react-fate: '<FateClient client={fate}>' is missing.`);
 	return context;
 }
-
 //#endregion
 //#region src/useView.tsx
 const nullSnapshot = {
@@ -31,7 +30,7 @@ const nullSnapshot = {
 	},
 	value: null
 };
-function useView(view$1, ref) {
+function useView(view, ref) {
 	const client = useFateClient();
 	const snapshotRef = useRef(null);
 	const getSnapshot = useCallback(() => {
@@ -39,12 +38,12 @@ function useView(view$1, ref) {
 			snapshotRef.current = null;
 			return nullSnapshot;
 		}
-		const snapshot$1 = client.readView(view$1, ref);
-		snapshotRef.current = snapshot$1.status === "fulfilled" ? snapshot$1.value : null;
-		return snapshot$1;
+		const snapshot = client.readView(view, ref);
+		snapshotRef.current = snapshot.status === "fulfilled" ? snapshot.value : null;
+		return snapshot;
 	}, [
 		client,
-		view$1,
+		view,
 		ref
 	]);
 	const snapshot = use(useDeferredValue(useSyncExternalStore(useCallback((onStoreChange) => {
@@ -80,49 +79,48 @@ function useView(view$1, ref) {
 	}, [client.store, ref]), getSnapshot, getSnapshot)));
 	return snapshot ? snapshot.data : null;
 }
-
 //#endregion
-//#region src/useRequest.tsx
-/**
-* Declares the data a screen needs and kicks off fetching, suspending while the
-* request resolves.
-*
-* @example
-* const { posts } = useRequest({ posts: { list: PostView } });
-*/
-function useRequest(request, options) {
+//#region src/useLiveView.tsx
+function useLiveView(view, ref) {
 	const client = useFateClient();
-	const promise = client.request(request, options);
-	const mode = options?.mode ?? "cache-first";
-	useEffect(() => {
-		if (mode === "network-only" || mode === "stale-while-revalidate") return () => {
-			client.releaseRequest(request, mode);
-		};
-	}, [
+	const liveId = ref?.id;
+	const liveType = ref?.__typename;
+	const subscribeLiveView = useEffectEvent(() => {
+		if (ref === null) return;
+		client.assertLiveViewSupport();
+		return client.subscribeLiveView(view, ref);
+	});
+	useEffect(() => subscribeLiveView(), [
 		client,
-		mode,
-		request
+		view,
+		liveId,
+		liveType
 	]);
-	return use(useDeferredValue(promise));
+	return useView(view, ref);
 }
-
 //#endregion
-//#region src/useListView.tsx
-const getNodeView = (view$1) => {
-	const maybeView = view$1?.items?.node;
-	if (maybeView) {
+//#region src/listView.ts
+const getNodeView = (view) => {
+	const maybeView = view.items?.node;
+	if (maybeView && typeof maybeView === "object") {
 		for (const key of Object.keys(maybeView)) if (isViewTag(key)) return maybeView;
 	}
-	return view$1;
+	return view;
 };
+const getConnectionMetadata = (connection) => connection && typeof connection === "object" ? connection[ConnectionTag] : null;
+const useListViewInfo = (selection, connection) => ({
+	metadata: getConnectionMetadata(connection),
+	nodeView: useMemo(() => getNodeView(selection), [selection])
+});
+//#endregion
+//#region src/useListView.tsx
 /**
 * Subscribes to a connection field, returning the current items and pagination
 * helpers to load the next or previous page.
 */
 function useListView(selection, connection) {
 	const client = useFateClient();
-	const nodeView = useMemo(() => getNodeView(selection), [selection]);
-	const metadata = connection && typeof connection === "object" ? connection[ConnectionTag] : null;
+	const { metadata, nodeView } = useListViewInfo(selection, connection);
 	const subscribe = useCallback((onStoreChange) => metadata ? client.store.subscribeList(metadata.key, onStoreChange) : () => {}, [client, metadata]);
 	const getSnapshot = useCallback(() => metadata ? client.store.getListState(metadata.key) : void 0, [client, metadata]);
 	const listState = useDeferredValue(useSyncExternalStore(subscribe, getSnapshot, getSnapshot));
@@ -133,8 +131,8 @@ function useListView(selection, connection) {
 	const previousCursor = pagination?.previousCursor;
 	return [
 		useMemo(() => {
-			if (metadata?.root && listState) return listState.ids.map((id, index) => ({
-				cursor: listState.cursors?.[index],
+			if (metadata && listState) return getListEntries(listState).map(({ cursor, id }) => ({
+				cursor,
 				node: client.rootListRef(id, nodeView)
 			}));
 			return connection?.items;
@@ -142,18 +140,20 @@ function useListView(selection, connection) {
 			client,
 			connection?.items,
 			listState,
-			metadata?.root,
+			metadata,
 			nodeView
 		]),
 		useMemo(() => {
 			if (!metadata || !hasNext || !nextCursor) return null;
 			return async () => {
-				const { before, first, last, ...values } = metadata.args || {};
+				const { before: _before, first, last, ...values } = metadata.args || {};
 				const nextPageSize = first ?? last;
 				await client.loadConnection(nodeView, metadata, {
 					...values,
 					after: nextCursor,
-					...nextPageSize !== void 0 ? { first: nextPageSize } : null
+					before: void 0,
+					...nextPageSize !== void 0 ? { first: nextPageSize } : null,
+					last: void 0
 				}, { direction: "forward" });
 			};
 		}, [
@@ -166,10 +166,14 @@ function useListView(selection, connection) {
 		useMemo(() => {
 			if (!metadata || !hasPrevious || !previousCursor) return null;
 			return async () => {
-				const { after, ...values } = metadata.args || {};
+				const { after: _after, first, last, ...values } = metadata.args || {};
+				const previousPageSize = last ?? first;
 				await client.loadConnection(nodeView, metadata, {
 					...values,
-					before: previousCursor
+					after: void 0,
+					before: previousCursor,
+					first: void 0,
+					...previousPageSize !== void 0 ? { last: previousPageSize } : null
 				}, { direction: "backward" });
 			};
 		}, [
@@ -181,6 +185,52 @@ function useListView(selection, connection) {
 		])
 	];
 }
-
 //#endregion
-export { FateClient, clientRoot, createClient, createTRPCTransport, mutation, toEntityId, useFateClient, useListView, useRequest, useView, view };
+//#region src/useLiveListView.tsx
+/**
+* Subscribes to a connection field, returning live-updating items and pagination
+* helpers to load the next or previous page.
+*/
+function useLiveListView(selection, connection) {
+	const client = useFateClient();
+	const { metadata, nodeView } = useListViewInfo(selection, connection);
+	const subscribeLiveListView = useEffectEvent(() => {
+		if (!metadata) return;
+		client.assertLiveConnectionSupport();
+		return client.subscribeLiveListView(nodeView, metadata);
+	});
+	useEffect(() => subscribeLiveListView(), [
+		client,
+		metadata?.key,
+		nodeView
+	]);
+	return useListView(selection, connection);
+}
+//#endregion
+//#region src/useRequest.tsx
+/**
+* Declares the data a screen needs and kicks off fetching, suspending while the
+* request resolves.
+*
+* @example
+* const { posts } = useRequest({ posts: { list: PostView } });
+*/
+function useRequest(request, options) {
+	const client = useFateClient();
+	const mode = options?.mode ?? "cache-first";
+	const { promise, requestKey } = client.prepareRequestForRender(request, options);
+	useEffect(() => {
+		const retained = client.retainRequestKey(requestKey, mode);
+		return () => {
+			retained.dispose();
+			if (mode === "network-only" || mode === "stale-while-revalidate") client.releaseRequestKey(requestKey, mode);
+		};
+	}, [
+		client,
+		mode,
+		requestKey
+	]);
+	return use(useDeferredValue(promise));
+}
+//#endregion
+export { FateClient, clientRoot, createClient, createHTTPTransport, createTRPCTransport, mutation, toEntityId, useFateClient, useListView, useLiveListView, useLiveView, useRequest, useView, view };

package/lib/vite.d.mts

@@ -0,0 +1,12 @@
+import { FateViteTransport, fate as fate$1 } from "@nkzw/fate/vite";
+
+//#region src/vite.d.ts
+type FateVitePluginOptions = {
+  generatedFile?: false | string;
+  module: string;
+  transport?: FateViteTransport;
+  tsconfigFile?: false | string;
+};
+declare const fate: (options: FateVitePluginOptions) => ReturnType<typeof fate$1>;
+//#endregion
+export { FateVitePluginOptions, fate };

package/lib/vite.mjs

@@ -0,0 +1,8 @@
+import { fate as fate$1 } from "@nkzw/fate/vite";
+//#region src/vite.ts
+const fate = (options) => fate$1({
+	...options,
+	clientModule: "react-fate"
+});
+//#endregion
+export { fate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fate",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "description": "fate is a modern data client for React.",
   "homepage": "https://github.com/nkzw-tech/fate",
   "license": "MIT",
@@ -16,6 +16,7 @@
     "fate": "./lib/cli.mjs"
   },
   "files": [
+    "docs",
     "lib"
   ],
   "type": "module",
@@ -26,22 +27,32 @@
       "types": "./lib/index.d.mts",
       "@nkzw/source": "./src/index.tsx",
       "default": "./lib/index.mjs"
+    },
+    "./client": {
+      "types": "./lib/client.d.mts",
+      "@nkzw/source": "./src/client.ts",
+      "default": "./lib/client.mjs"
+    },
+    "./vite": {
+      "types": "./lib/vite.d.mts",
+      "@nkzw/source": "./src/vite.ts",
+      "default": "./lib/vite.mjs"
     }
   },
   "dependencies": {
-    "@nkzw/fate": "^0.1.3"
+    "@nkzw/fate": "^1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "scripts": {
-    "build": "vite lib -d lib --target=node24 src/index.tsx src/cli.ts"
+    "build": "vp pack -d lib --target=node24 src/index.tsx src/client.ts src/cli.ts src/vite.ts"
   }
 }