@rozenite/tanstack-query-plugin 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/shared/messaging.ts

@@ -0,0 +1,54 @@
+import type { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import {
+  DevToolsActionType,
+  SerializableQueryClient,
+  SerializableQuery,
+  SerializableMutation,
+  SerializableObserver,
+  PartialQueryState,
+} from './types';
+
+export type TanStackQueryPluginEventMap = {
+  'online-status-changed': {
+    online: boolean;
+  };
+  'devtools-action': {
+    type: DevToolsActionType;
+    queryHash: string;
+  };
+  'request-initial-data': unknown;
+  'sync-data': {
+    data: SerializableQueryClient;
+  };
+  'sync-query-event':
+    | {
+        type: 'added' | 'removed';
+        data: SerializableQuery;
+      }
+    | {
+        type: 'updated';
+        action?: string; // Add action type for optimization
+        data: SerializableQuery | PartialQueryState; // Support both full and partial state
+      }
+    | {
+        type: 'observerAdded' | 'observerRemoved' | 'observerOptionsUpdated';
+        data: {
+          queryHash: string;
+          observers: SerializableObserver[];
+        };
+      };
+  'sync-mutation-event': {
+    type:
+      | 'added'
+      | 'updated'
+      | 'removed'
+      | 'observerAdded'
+      | 'observerRemoved'
+      | 'observerResultsUpdated'
+      | 'observerOptionsUpdated';
+    data: SerializableMutation;
+  };
+};
+
+export type TanStackQueryPluginClient =
+  RozeniteDevToolsClient<TanStackQueryPluginEventMap>;

package/src/shared/types.ts

@@ -0,0 +1,48 @@
+import type {
+  QueryKey,
+  MutationState,
+  QueryState,
+  QueryObserverOptions,
+  InfiniteQueryObserverOptions,
+  MutationOptions,
+} from '@tanstack/react-query';
+
+export type SerializableQuery = {
+  queryHash: string;
+  state: QueryState;
+  queryKey: QueryKey;
+  observers: SerializableObserver[];
+};
+
+export type PartialQueryState = {
+  queryHash: string;
+  state: Partial<QueryState>;
+};
+
+export type SerializableMutation = {
+  mutationId: number;
+  options: MutationOptions;
+  state: MutationState;
+};
+
+export type SerializableObserver = {
+  queryHash: string;
+  options: QueryObserverOptions | InfiniteQueryObserverOptions;
+};
+
+export type SerializableQueryClient = {
+  queries: SerializableQuery[];
+  mutations: SerializableMutation[];
+};
+
+export type DevToolsActionType =
+  | 'REFETCH'
+  | 'INVALIDATE'
+  | 'RESET'
+  | 'REMOVE'
+  | 'TRIGGER_ERROR'
+  | 'RESTORE_ERROR'
+  | 'TRIGGER_LOADING'
+  | 'RESTORE_LOADING'
+  | 'CLEAR_MUTATION_CACHE'
+  | 'CLEAR_QUERY_CACHE';

package/src/shared/useSyncOnlineStatus.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { onlineManager } from '@tanstack/react-query';
+import { TanStackQueryPluginClient } from './messaging';
+
+export const useSyncOnlineStatus = (
+  client: TanStackQueryPluginClient | null
+) => {
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const onlineManagerSubscription = onlineManager.subscribe((online) => {
+      client.send('online-status-changed', { online });
+    });
+
+    const onlineMessageSubscription = client.onMessage(
+      'online-status-changed',
+      ({ online }) => {
+        onlineManager.setOnline(online);
+      }
+    );
+
+    return () => {
+      onlineManagerSubscription();
+      onlineMessageSubscription.remove();
+    };
+  }, [client]);
+};

package/src/ui/tanstack-query.tsx

@@ -1,197 +1,34 @@
-import { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, QueryClientProvider, Query, Mutation } from '@tanstack/react-query';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools/production';
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { useEffect, useRef } from 'react';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      queryFn: async () => {
-        // Prevent refetch from throwing an error
-        return Promise.resolve(null);
-      },
-    },
-  },
-});
-
-type DevToolsEventMap = {
-  "DEVTOOLS_TO_DEVICE": unknown;
-  "DEVICE_TO_DEVTOOLS": QueryCacheNotifyEvent | MutationCacheNotifyEvent;
-  "DEVICE_TO_DEVTOOLS_ACK": { requestId: string; success: boolean };
-  "DEVICE_TO_DEVTOOLS_INITIAL_DATA": { queries: Query[]; mutations: Mutation[] };
-  "DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST": unknown;
-}
-
-const Wrapped = () => {
-  const client = useRozeniteDevToolsClient<DevToolsEventMap>({
+import { TanStackQueryPluginEventMap } from '../shared/messaging';
+import { useSyncInitialData } from './useSyncInitialData';
+import { useSyncDevToolsEvents } from './useSyncDevToolsEvents';
+import { useSyncOnlineStatus } from '../shared/useSyncOnlineStatus';
+import { useHandleSyncMessages } from './useHandleSyncMessages';
+
+const App = () => {
+  const client = useRozeniteDevToolsClient<TanStackQueryPluginEventMap>({
     pluginId: '@rozenite/tanstack-query-plugin',
-  })
-
-  // Track pending acknowledgments to prevent feedback loops
-  const pendingAcknowledgment = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-    if (!client) return;
-    client.send("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", null);
-  }, [client]);
-
-  useEffect(() => {
-    if (!client) return;
+  });
 
-    const handleEvent = (event: Event) => {
-      const detail = (event as CustomEvent).detail;
-      
-      // Generate a unique request ID for this DevTools action
-      const requestId = `devtools-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-      
-      // Mark that we're waiting for acknowledgment
-      pendingAcknowledgment.current.add(requestId);
-      
-      // Add the request ID to the event detail
-      const eventWithRequestId = {
-        ...detail,
-        requestId,
-      };
-      
-      client.send("DEVTOOLS_TO_DEVICE", eventWithRequestId);
-    };
+  useSyncInitialData(client);
 
-    window.addEventListener('@tanstack/query-devtools-event', handleEvent);
-    return () => window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
-  }, [client])
+  useSyncDevToolsEvents(client);
 
-  useEffect(() => {
-    if (!client) return;
+  useSyncOnlineStatus(client);
 
-    const ackSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_ACK", (ack) => {
-      // Remove the request from pending acknowledgments
-      pendingAcknowledgment.current.delete(ack.requestId);
-    });
+  useHandleSyncMessages(client);
 
-    const subscription = client.onMessage("DEVICE_TO_DEVTOOLS", (event) => {
-      // Don't reflect events if we're waiting for acknowledgments
-      if (pendingAcknowledgment.current.size > 0) {
-        return;
-      }
-      
-      if ('query' in event) {
-        const { query, type } = event as QueryCacheNotifyEvent;
-        const queryCache = queryClient.getQueryCache();
-        
-        if (type === 'updated') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (existingQuery) {
-            existingQuery.setState(query.state);
-          } else {
-            queryCache.build(
-              queryClient,
-              {
-                queryKey: query.queryKey,
-                queryHash: query.queryHash,
-              },
-              query.state
-            );
-          }
-        } else if (type === 'added') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (!existingQuery) {
-            // Only add if it doesn't already exist
-            queryCache.build(
-              queryClient,
-              {
-                queryKey: query.queryKey,
-                queryHash: query.queryHash,
-              },
-              query.state
-            );
-          }
-        } else if (type === 'removed') {
-          const existingQuery = queryCache.get(query.queryHash);
-          if (existingQuery) {
-            queryCache.remove(existingQuery);
-          }
-        }
-      } else if ('mutation' in event) {
-        const { mutation, type } = event as MutationCacheNotifyEvent;
-        const mutationCache = queryClient.getMutationCache();
-        
-        if (type === 'added') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-          }
+  return <ReactQueryDevtoolsPanel style={{ height: '100%', width: '100%' }} />;
+};
 
-          mutationCache.build(
-            queryClient,
-            mutation.options,
-            mutation.state
-          );
-        } else if (type === 'removed') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-          }
-        } else if (type === 'updated') {
-          const existingMutation = mutationCache.find({ mutationKey: mutation.options.mutationKey });
-          
-          if (existingMutation) {
-            mutationCache.remove(existingMutation);
-            mutationCache.build(
-              queryClient,
-              mutation.options,
-              mutation.state
-            );
-          }
-        }
-      }
-    })
-
-    const initialDataSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_INITIAL_DATA", (event) => {
-      // Clear existing data first
-      queryClient.clear();
-      queryClient.getMutationCache().clear();
-      
-      // Restore queries
-      const queryCache = queryClient.getQueryCache();
-      event.queries.forEach(query => {
-        queryCache.build(
-          queryClient,
-          {
-            queryKey: query.queryKey,
-            queryHash: query.queryHash,
-          },
-          query.state
-        );
-      });
-      
-      // Restore mutations
-      const mutationCache = queryClient.getMutationCache();
-      event.mutations.forEach(mutation => {
-        mutationCache.build(
-          queryClient,
-          mutation.options,
-          mutation.state
-        );
-      });
-    });
-
-    return () => {
-      subscription.remove();
-      ackSubscription.remove();
-      initialDataSubscription.remove();
-    };
-  }, [client, queryClient])
-
-
-  return (
-    <ReactQueryDevtoolsPanel />
-  )
-}
+const queryClient = new QueryClient();
 
 export default function TanStackQueryPanel() {
   return (
     <QueryClientProvider client={queryClient}>
-      <Wrapped />
+      <App />
     </QueryClientProvider>
-  )
-}
+  );
+}

package/src/ui/useHandleSyncMessages.ts

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  hydrateQueryClient,
+  applyQueryEvent,
+  applyMutationEvent,
+  applyQueryObserverEvent,
+} from '../shared/hydrate';
+
+export const useHandleSyncMessages = (
+  client: TanStackQueryPluginClient | null
+) => {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const querySubscription = client.onMessage(
+      'sync-query-event',
+      (message) => {
+        const { type, data } = message;
+
+        if (type === 'added' || type === 'removed') {
+          applyQueryEvent(queryClient, type, data);
+          return;
+        }
+
+        if (type === 'updated') {
+          const action = 'action' in message ? message.action : undefined;
+          applyQueryEvent(queryClient, type, data, action);
+          return;
+        }
+
+        if (
+          type === 'observerAdded' ||
+          type === 'observerRemoved' ||
+          type === 'observerOptionsUpdated'
+        ) {
+          applyQueryObserverEvent(queryClient, data);
+          return;
+        }
+      }
+    );
+
+    const mutationSubscription = client.onMessage(
+      'sync-mutation-event',
+      ({ type, data }) => {
+        applyMutationEvent(queryClient, type, data);
+      }
+    );
+
+    // Keep the full sync for initial data requests
+    const fullSyncSubscription = client.onMessage('sync-data', ({ data }) => {
+      hydrateQueryClient(queryClient, data);
+    });
+
+    return () => {
+      querySubscription.remove();
+      mutationSubscription.remove();
+      fullSyncSubscription.remove();
+    };
+  }, [client, queryClient]);
+};

package/src/ui/useSyncDevToolsEvents.ts

@@ -0,0 +1,55 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+
+export const useSyncDevToolsEvents = (
+  client: TanStackQueryPluginClient | null
+) => {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const handleEvent = (event: Event) => {
+      const detail = (event as CustomEvent).detail;
+      const { type, queryHash } = detail;
+
+      // Get the query from cache if we have a hash
+      const query = queryHash
+        ? queryClient.getQueryCache().get(queryHash)
+        : undefined;
+      if (
+        !query &&
+        type !== 'CLEAR_QUERY_CACHE' &&
+        type !== 'CLEAR_MUTATION_CACHE'
+      ) {
+        return;
+      }
+
+      // Special handling for cache clear actions which don't require a query
+      if (type === 'CLEAR_QUERY_CACHE' || type === 'CLEAR_MUTATION_CACHE') {
+        client.send('devtools-action', {
+          type,
+          queryHash: '',
+        });
+        return;
+      }
+
+      // For all other actions, ensure we have a valid query
+      if (!query || !queryHash) {
+        return;
+      }
+
+      client.send('devtools-action', {
+        type,
+        queryHash: query.queryHash,
+      });
+    };
+
+    window.addEventListener('@tanstack/query-devtools-event', handleEvent);
+    return () =>
+      window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
+  }, [client]);
+};

package/src/ui/useSyncInitialData.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+
+export const useSyncInitialData = (
+  client: TanStackQueryPluginClient | null
+) => {
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    client.send('request-initial-data', {});
+  }, [client]);
+};

package/tsconfig.json

@@ -16,10 +16,17 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src/**/*",
-    "react-native.ts",
-    "rozenite.config.ts"
-  ],
-  "exclude": ["node_modules", "dist", "build"]
+  "include": ["src/**/*", "react-native.ts", "rozenite.config.ts"],
+  "exclude": ["node_modules", "dist", "build"],
+  "references": [
+    {
+      "path": "../plugin-bridge"
+    },
+    {
+      "path": "../cli"
+    },
+    {
+      "path": "../vite-plugin"
+    }
+  ]
 }

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/react-native/usehandledevtoolsmessages.ts","./src/react-native/usehandleinitialdata.ts","./src/react-native/usesynctanstackcache.ts","./src/react-native/usetanstackquerydevtools.ts","./src/shared/dehydrate.ts","./src/shared/hydrate.ts","./src/shared/messaging.ts","./src/shared/types.ts","./src/shared/usesynconlinestatus.ts","./src/ui/tanstack-query.tsx","./src/ui/usehandlesyncmessages.ts","./src/ui/usesyncdevtoolsevents.ts","./src/ui/usesyncinitialdata.ts","./react-native.ts","./rozenite.config.ts"],"errors":true,"version":"5.8.3"}