@legendapp/state 3.0.0-alpha.9 → 3.0.0-beta.1

package/sync-plugins/supabase.mjs

@@ -1,4 +1,4 @@
-import { observable, computeSelector, isObject, symbolDelete } from '@legendapp/state';
+import { observable, computeSelector, isFunction, isObject, symbolDelete } from '@legendapp/state';
 import { removeNullUndefined, transformStringifyDates, combineTransforms } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
 
@@ -16,12 +16,22 @@ function configureSyncedSupabase(config) {
   }
   Object.assign(supabaseConfig, removeNullUndefined(rest));
 }
+function wrapSupabaseFn(fn) {
+  return async (...args) => {
+    const { data, error } = await fn(...args);
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data;
+  };
+}
 function syncedSupabase(props) {
   props = { ...supabaseConfig, ...props };
   const {
-    supabase: client,
+    supabase,
     collection,
     select: selectFn,
+    schema,
     filter,
     actions,
     fieldCreatedAt: fieldCreatedAtParam,
@@ -34,14 +44,21 @@ function syncedSupabase(props) {
     waitFor,
     waitForSet,
     generateId,
+    mode,
+    list: listParam,
+    create: createParam,
+    update: updateParam,
+    delete: deleteParam,
     ...rest
   } = props;
+  const client = supabase;
   const fieldCreatedAt = fieldCreatedAtParam || (changesSince === "last-sync" ? "created_at" : void 0);
   const fieldUpdatedAt = fieldUpdatedAtParam || (changesSince === "last-sync" ? "updated_at" : void 0);
   const fieldDeleted = fieldDeletedParam || (changesSince === "last-sync" ? "deleted" : void 0);
-  const list = !actions || actions.includes("read") ? async (params) => {
+  const list = !actions || actions.includes("read") ? listParam ? wrapSupabaseFn(listParam) : async (params) => {
     const { lastSync } = params;
-    const from = client.from(collection);
+    const clientSchema = schema ? client.schema(schema) : client;
+    const from = clientSchema.from(collection);
     let select = selectFn ? selectFn(from) : from.select();
     if (changesSince === "last-sync" && lastSync) {
       const date = new Date(lastSync).toISOString();
@@ -56,8 +73,8 @@ function syncedSupabase(props) {
     }
     return data || [];
   } : void 0;
-  const upsert = async (input) => {
-    const res = await client.from(collection).upsert(input).select();
+  const create = createParam ? wrapSupabaseFn(createParam) : !actions || actions.includes("create") ? async (input) => {
+    const res = await client.from(collection).insert(input).select();
     const { data, error } = res;
     if (data) {
       const created = data[0];
@@ -65,10 +82,18 @@ function syncedSupabase(props) {
     } else {
       throw new Error(error == null ? void 0 : error.message);
     }
-  };
-  const create = !actions || actions.includes("create") ? upsert : void 0;
-  const update = !actions || actions.includes("update") ? upsert : void 0;
-  const deleteFn = !fieldDeleted && (!actions || actions.includes("delete")) ? async (input) => {
+  } : void 0;
+  const update = !actions || actions.includes("update") ? updateParam ? wrapSupabaseFn(updateParam) : async (input) => {
+    const res = await client.from(collection).update(input).eq("id", input.id).select();
+    const { data, error } = res;
+    if (data) {
+      const created = data[0];
+      return created;
+    } else {
+      throw new Error(error == null ? void 0 : error.message);
+    }
+  } : void 0;
+  const deleteFn = !fieldDeleted && (!actions || actions.includes("delete")) ? deleteParam ? wrapSupabaseFn(deleteParam) : async (input) => {
     const id = input.id;
     const res = await client.from(collection).delete().eq("id", id).select();
     const { data, error } = res;
@@ -80,13 +105,13 @@ function syncedSupabase(props) {
     }
   } : void 0;
   const subscribe = realtime ? ({ node, value$, update: update2 }) => {
-    const { filter: filter2, schema } = isObject(realtime) ? realtime : {};
+    const { filter: filter2, schema: schema2 } = isObject(realtime) ? realtime : {};
     const channel = client.channel(`LS_${node.key || ""}${channelNum++}`).on(
       "postgres_changes",
       {
         event: "*",
         table: collection,
-        schema: schema || "public",
+        schema: schema2 || "public",
         filter: filter2 || void 0
       },
       (payload) => {
@@ -94,25 +119,30 @@ function syncedSupabase(props) {
         const { eventType, new: value, old } = payload;
         if (eventType === "INSERT" || eventType === "UPDATE") {
           const cur = (_a = value$.peek()) == null ? void 0 : _a[value.id];
-          const curDateStr = cur && (fieldUpdatedAt && cur[fieldUpdatedAt] || fieldCreatedAt || cur[fieldCreatedAt]);
-          const valueDateStr = fieldUpdatedAt && value[fieldUpdatedAt] || fieldCreatedAt && value[fieldCreatedAt];
-          const valueDate = +new Date(valueDateStr);
-          if (valueDateStr && (!curDateStr || valueDate > +new Date(curDateStr))) {
+          let isOk = !fieldUpdatedAt;
+          let lastSync = void 0;
+          if (!isOk) {
+            const curDateStr = cur && (fieldUpdatedAt && cur[fieldUpdatedAt] || fieldCreatedAt || cur[fieldCreatedAt]);
+            const valueDateStr = fieldUpdatedAt && value[fieldUpdatedAt] || fieldCreatedAt && value[fieldCreatedAt];
+            lastSync = +new Date(valueDateStr);
+            isOk = valueDateStr && (!curDateStr || lastSync > +new Date(curDateStr));
+          }
+          if (isOk) {
             update2({
-              value: { [value.id]: value },
-              lastSync: valueDate,
+              value: [value],
+              lastSync,
               mode: "merge"
             });
           }
         } else if (eventType === "DELETE") {
-          const { id } = old;
+          old[symbolDelete] = true;
           update2({
-            value: { [id]: symbolDelete }
+            value: [old]
           });
         }
       }
     ).subscribe();
-    return channel.unsubscribe;
+    return () => channel.unsubscribe();
   } : void 0;
   let transform = transformParam;
   if (stringifyDates) {
@@ -121,6 +151,7 @@ function syncedSupabase(props) {
   }
   return syncedCrud({
     ...rest,
+    mode: mode || "merge",
     list,
     create,
     update,
@@ -133,7 +164,7 @@ function syncedSupabase(props) {
     transform,
     generateId,
     waitFor: () => isEnabled$.get() && (waitFor ? computeSelector(waitFor) : true),
-    waitForSet
+    waitForSet: (params) => isEnabled$.get() && (waitForSet ? isFunction(waitForSet) ? waitForSet(params) : waitForSet : true)
   });
 }
 

package/sync-plugins/tanstack-query.d.mts

@@ -4,11 +4,11 @@ import { QueryKey, QueryObserverOptions, QueryClient, MutationObserverOptions, D
 interface ObservableQueryOptions<TQueryFnData, TError, TData, TQueryKey extends QueryKey> extends Omit<QueryObserverOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'> {
     queryKey?: TQueryKey | (() => TQueryKey);
 }
-interface SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey extends QueryKey> extends SyncedOptions<TData> {
+interface SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey extends QueryKey> extends Omit<SyncedOptions<TData>, 'get' | 'set'> {
     queryClient: QueryClient;
     query: ObservableQueryOptions<TQueryFnData, TError, TData, TQueryKey>;
     mutation?: MutationObserverOptions<TData, TError, void>;
 }
-declare function syncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): NonNullable<TData>;
+declare function syncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): TData;
 
 export { type ObservableQueryOptions, type SyncedQueryParams, syncedQuery };

package/sync-plugins/tanstack-query.d.ts

@@ -4,11 +4,11 @@ import { QueryKey, QueryObserverOptions, QueryClient, MutationObserverOptions, D
 interface ObservableQueryOptions<TQueryFnData, TError, TData, TQueryKey extends QueryKey> extends Omit<QueryObserverOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'> {
     queryKey?: TQueryKey | (() => TQueryKey);
 }
-interface SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey extends QueryKey> extends SyncedOptions<TData> {
+interface SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey extends QueryKey> extends Omit<SyncedOptions<TData>, 'get' | 'set'> {
     queryClient: QueryClient;
     query: ObservableQueryOptions<TQueryFnData, TError, TData, TQueryKey>;
     mutation?: MutationObserverOptions<TData, TError, void>;
 }
-declare function syncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): NonNullable<TData>;
+declare function syncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): TData;
 
 export { type ObservableQueryOptions, type SyncedQueryParams, syncedQuery };

package/sync-plugins/tanstack-query.js

@@ -6,7 +6,7 @@ var queryCore = require('@tanstack/query-core');
 
 // src/sync-plugins/tanstack-query.ts
 function syncedQuery(params) {
-  const { query: options, mutation: mutationOptions, queryClient } = params;
+  const { query: options, mutation: mutationOptions, queryClient, ...rest } = params;
   const Observer = queryCore.QueryObserver;
   const defaultedOptions = queryClient.defaultQueryOptions(
     options
@@ -14,6 +14,7 @@ function syncedQuery(params) {
   let observer = void 0;
   let latestOptions = defaultedOptions;
   let queryKeyFromFn;
+  let resolveInitialPromise = void 0;
   const origQueryKey = options.queryKey;
   const isKeyFunction = state.isFunction(origQueryKey);
   const updateQueryOptions = (obj) => {
@@ -33,14 +34,29 @@ function syncedQuery(params) {
     });
   }
   observer = new Observer(queryClient, latestOptions);
-  const get = () => {
-    const result = observer.getOptimisticResult(latestOptions);
-    return result.data;
+  let isFirstRun = true;
+  const get = async () => {
+    if (isFirstRun) {
+      isFirstRun = false;
+      const result = observer.getOptimisticResult(latestOptions);
+      if (result.isLoading) {
+        await new Promise((resolve) => {
+          resolveInitialPromise = resolve;
+        });
+      }
+      return result.data;
+    } else {
+      observer.refetch();
+    }
   };
   const subscribe = ({ update }) => {
     const unsubscribe = observer.subscribe(
       queryCore.notifyManager.batchCalls((result) => {
         if (result.status === "success") {
+          if (resolveInitialPromise) {
+            resolveInitialPromise(result.data);
+            resolveInitialPromise = void 0;
+          }
           update({ value: result.data });
         }
       })
@@ -58,7 +74,8 @@ function syncedQuery(params) {
   return sync.synced({
     get,
     set,
-    subscribe
+    subscribe,
+    ...rest
   });
 }
 

package/sync-plugins/tanstack-query.mjs

@@ -4,7 +4,7 @@ import { MutationObserver, QueryObserver, notifyManager } from '@tanstack/query-
 
 // src/sync-plugins/tanstack-query.ts
 function syncedQuery(params) {
-  const { query: options, mutation: mutationOptions, queryClient } = params;
+  const { query: options, mutation: mutationOptions, queryClient, ...rest } = params;
   const Observer = QueryObserver;
   const defaultedOptions = queryClient.defaultQueryOptions(
     options
@@ -12,6 +12,7 @@ function syncedQuery(params) {
   let observer = void 0;
   let latestOptions = defaultedOptions;
   let queryKeyFromFn;
+  let resolveInitialPromise = void 0;
   const origQueryKey = options.queryKey;
   const isKeyFunction = isFunction(origQueryKey);
   const updateQueryOptions = (obj) => {
@@ -31,14 +32,29 @@ function syncedQuery(params) {
     });
   }
   observer = new Observer(queryClient, latestOptions);
-  const get = () => {
-    const result = observer.getOptimisticResult(latestOptions);
-    return result.data;
+  let isFirstRun = true;
+  const get = async () => {
+    if (isFirstRun) {
+      isFirstRun = false;
+      const result = observer.getOptimisticResult(latestOptions);
+      if (result.isLoading) {
+        await new Promise((resolve) => {
+          resolveInitialPromise = resolve;
+        });
+      }
+      return result.data;
+    } else {
+      observer.refetch();
+    }
   };
   const subscribe = ({ update }) => {
     const unsubscribe = observer.subscribe(
       notifyManager.batchCalls((result) => {
         if (result.status === "success") {
+          if (resolveInitialPromise) {
+            resolveInitialPromise(result.data);
+            resolveInitialPromise = void 0;
+          }
           update({ value: result.data });
         }
       })
@@ -56,7 +72,8 @@ function syncedQuery(params) {
   return synced({
     get,
     set,
-    subscribe
+    subscribe,
+    ...rest
   });
 }
 

package/sync-plugins/tanstack-react-query.d.mts

@@ -3,6 +3,6 @@ import { DefaultError, QueryKey } from '@tanstack/query-core';
 import { Observable } from '@legendapp/state';
 import { Synced } from '@legendapp/state/sync';
 
-declare function useObservableSyncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): Observable<NonNullable<Synced<TData>>>;
+declare function useObservableSyncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): Observable<Synced<TData>>;
 
 export { useObservableSyncedQuery };

package/sync-plugins/tanstack-react-query.d.ts

@@ -3,6 +3,6 @@ import { DefaultError, QueryKey } from '@tanstack/query-core';
 import { Observable } from '@legendapp/state';
 import { Synced } from '@legendapp/state/sync';
 
-declare function useObservableSyncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): Observable<NonNullable<Synced<TData>>>;
+declare function useObservableSyncedQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(params: SyncedQueryParams<TQueryFnData, TError, TData, TQueryKey>): Observable<Synced<TData>>;
 
 export { useObservableSyncedQuery };

package/sync-plugins/tanstack-react-query.js

@@ -2,10 +2,17 @@
 
 var react = require('@legendapp/state/react');
 var tanstackQuery = require('@legendapp/state/sync-plugins/tanstack-query');
+var reactQuery = require('@tanstack/react-query');
 
 // src/sync-plugins/tanstack-react-query.ts
 function useObservableSyncedQuery(params) {
-  return react.useObservable(tanstackQuery.syncedQuery(params));
+  const queryClient = params.queryClient || reactQuery.useQueryClient();
+  return react.useObservable(
+    tanstackQuery.syncedQuery({
+      ...params,
+      queryClient
+    })
+  );
 }
 
 exports.useObservableSyncedQuery = useObservableSyncedQuery;

package/sync-plugins/tanstack-react-query.mjs

@@ -1,9 +1,16 @@
 import { useObservable } from '@legendapp/state/react';
 import { syncedQuery } from '@legendapp/state/sync-plugins/tanstack-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 // src/sync-plugins/tanstack-react-query.ts
 function useObservableSyncedQuery(params) {
-  return useObservable(syncedQuery(params));
+  const queryClient = params.queryClient || useQueryClient();
+  return useObservable(
+    syncedQuery({
+      ...params,
+      queryClient
+    })
+  );
 }
 
 export { useObservableSyncedQuery };