@rozenite/tanstack-query-plugin 2.4.0 → 2.5.0

package/src/shared/messaging.ts

@@ -1,63 +0,0 @@
-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;
-    metadata?: {
-      data?: unknown;
-    };
-  };
-  /**
-   * Announced by the device once it is listening for panel messages. The panel
-   * is recreated on every app reload and asks for the cache immediately, which
-   * can land before the app's React tree has mounted the plugin; this lets the
-   * panel ask again instead of staying empty until the app is restarted.
-   */
-  'device-ready': unknown;
-  '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/query-data-sync.test.ts

@@ -1,89 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { QueryClient } from '@tanstack/react-query';
-import { applyRemoteQueryState, instrumentQuery, instrumentQueryClient } from './query-data-sync';
-
-const createQueryClient = () =>
-  new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        gcTime: Infinity,
-      },
-    },
-  });
-
-describe('query data sync instrumentation', () => {
-  it('emits query data updates for data-only setState edits', () => {
-    const queryClient = createQueryClient();
-    const handler = vi.fn();
-
-    queryClient.setQueryData(['edited'], { value: 1 });
-    const query = queryClient.getQueryCache().find({ queryKey: ['edited'] })!;
-
-    instrumentQuery(query, handler);
-
-    query.setState({
-      ...query.state,
-      data: { value: 2 },
-    });
-
-    expect(handler).toHaveBeenCalledTimes(1);
-    expect(handler).toHaveBeenCalledWith(
-      expect.objectContaining({
-        data: { value: 2 },
-      }),
-    );
-  });
-
-  it('emits query data updates for setQueryData user edits', () => {
-    const queryClient = createQueryClient();
-    const handler = vi.fn();
-
-    instrumentQueryClient(queryClient, handler);
-
-    queryClient.setQueryData(['edited'], { value: 1 });
-
-    expect(handler).toHaveBeenCalledTimes(1);
-    expect(handler).toHaveBeenCalledWith(
-      expect.objectContaining({
-        data: { value: 1 },
-      }),
-    );
-  });
-
-  it('does not emit query data updates for non-data state changes', () => {
-    const queryClient = createQueryClient();
-    const handler = vi.fn();
-
-    queryClient.setQueryData(['edited'], { value: 1 });
-    const query = queryClient.getQueryCache().find({ queryKey: ['edited'] })!;
-
-    instrumentQuery(query, handler);
-
-    query.setState({
-      data: undefined,
-      status: 'pending',
-      fetchStatus: 'fetching',
-    });
-
-    expect(handler).not.toHaveBeenCalled();
-  });
-
-  it('does not emit query data updates for remote state application', () => {
-    const queryClient = createQueryClient();
-    const handler = vi.fn();
-
-    queryClient.setQueryData(['edited'], { value: 1 });
-    const query = queryClient.getQueryCache().find({ queryKey: ['edited'] })!;
-
-    instrumentQuery(query, handler);
-
-    applyRemoteQueryState(query, {
-      ...query.state,
-      data: { value: 2 },
-    });
-
-    expect(handler).not.toHaveBeenCalled();
-    expect(query.state.data).toEqual({ value: 2 });
-  });
-});

package/src/shared/query-data-sync.ts

@@ -1,129 +0,0 @@
-import { Query, QueryClient, QueryKey, QueryState } from '@tanstack/react-query';
-
-type QuerySetState = Query['setState'];
-type QueryClientSetQueryData = QueryClient['setQueryData'];
-
-type SyncQueryDataPayload = {
-  queryHash: string;
-  data: unknown;
-};
-
-type QueryDataSyncHandler = (payload: SyncQueryDataPayload) => void;
-
-const originalQuerySetStateMap = new WeakMap<Query, QuerySetState>();
-const originalSetQueryDataMap = new WeakMap<QueryClient, QueryClientSetQueryData>();
-const instrumentedQueryClients = new WeakSet<QueryClient>();
-const instrumentedQueries = new WeakSet<Query>();
-const queryClientHandlers = new WeakMap<QueryClient, QueryDataSyncHandler | undefined>();
-const queryHandlers = new WeakMap<Query, QueryDataSyncHandler | undefined>();
-
-const getOriginalQuerySetState = (query: Query): QuerySetState => {
-  return originalQuerySetStateMap.get(query) ?? query.setState.bind(query);
-};
-
-const emitIfDataChanged = (query: Query, previousData: unknown, handler?: QueryDataSyncHandler) => {
-  if (!handler || Object.is(previousData, query.state.data)) {
-    return;
-  }
-
-  handler({
-    queryHash: query.queryHash,
-    data: query.state.data,
-  });
-};
-
-const isDataOnlyStateUpdate = (previousState: QueryState, nextState: Partial<QueryState>) => {
-  if (!('data' in nextState)) {
-    return false;
-  }
-
-  const changedKeys = Object.keys(nextState).filter((key) => {
-    const typedKey = key as keyof QueryState;
-    return !Object.is(previousState[typedKey], nextState[typedKey]);
-  }) as Array<keyof QueryState>;
-
-  return changedKeys.every((key) => key === 'data');
-};
-
-export const applyRemoteQueryState = (query: Query, state: Partial<QueryState>) => {
-  const originalSetState = getOriginalQuerySetState(query);
-  originalSetState(state);
-};
-
-export const instrumentQuery = (query: Query, handler?: QueryDataSyncHandler) => {
-  queryHandlers.set(query, handler);
-
-  if (instrumentedQueries.has(query)) {
-    return query;
-  }
-
-  const originalSetState = query.setState.bind(query);
-  originalQuerySetStateMap.set(query, originalSetState);
-
-  query.setState = ((state) => {
-    const shouldEmit = isDataOnlyStateUpdate(query.state, state);
-    const previousData = query.state.data;
-    const result = originalSetState(state);
-
-    if (shouldEmit) {
-      emitIfDataChanged(query, previousData, queryHandlers.get(query));
-    }
-
-    return result;
-  }) as QuerySetState;
-
-  instrumentedQueries.add(query);
-  return query;
-};
-
-const resolveQueryHash = (queryClient: QueryClient, queryKey: QueryKey) => {
-  return queryClient.getQueryCache().find({ queryKey })?.queryHash;
-};
-
-export const instrumentQueryClient = (queryClient: QueryClient, handler?: QueryDataSyncHandler) => {
-  queryClientHandlers.set(queryClient, handler);
-
-  if (instrumentedQueryClients.has(queryClient)) {
-    queryClient
-      .getQueryCache()
-      .getAll()
-      .forEach((query) => {
-        instrumentQuery(query, handler);
-      });
-    return queryClient;
-  }
-
-  const originalSetQueryData = queryClient.setQueryData.bind(queryClient);
-  originalSetQueryDataMap.set(queryClient, originalSetQueryData);
-
-  queryClient.setQueryData = ((queryKey, updater, options) => {
-    const result = originalSetQueryData(queryKey, updater, options);
-    const query = queryClient.getQueryCache().find({ queryKey });
-    const activeQueryClientHandler = queryClientHandlers.get(queryClient);
-
-    if (query) {
-      instrumentQuery(query, activeQueryClientHandler);
-      const queryHash = resolveQueryHash(queryClient, queryKey);
-      const activeHandler = queryHandlers.get(query);
-
-      if (activeHandler && queryHash) {
-        activeHandler({
-          queryHash,
-          data: query.state.data,
-        });
-      }
-    }
-
-    return result;
-  }) as QueryClientSetQueryData;
-
-  queryClient
-    .getQueryCache()
-    .getAll()
-    .forEach((query) => {
-      instrumentQuery(query, handler);
-    });
-
-  instrumentedQueryClients.add(queryClient);
-  return queryClient;
-};

package/src/shared/types.ts

@@ -1,49 +0,0 @@
-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'
-  | 'SET_QUERY_DATA'
-  | 'INVALIDATE'
-  | 'RESET'
-  | 'REMOVE'
-  | 'TRIGGER_ERROR'
-  | 'RESTORE_ERROR'
-  | 'TRIGGER_LOADING'
-  | 'RESTORE_LOADING'
-  | 'CLEAR_MUTATION_CACHE'
-  | 'CLEAR_QUERY_CACHE';

package/src/shared/useSyncOnlineStatus.ts

@@ -1,24 +0,0 @@
-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,46 +0,0 @@
-import { useEffect } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools/production';
-import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { TanStackQueryPluginEventMap } from '../shared/messaging';
-import { useSyncInitialData } from './useSyncInitialData';
-import { useSyncDevToolsEvents } from './useSyncDevToolsEvents';
-import { useSyncOnlineStatus } from '../shared/useSyncOnlineStatus';
-import { useHandleSyncMessages } from './useHandleSyncMessages';
-import { instrumentQueryClient } from '../shared/query-data-sync';
-
-const App = () => {
-  const client = useRozeniteDevToolsClient<TanStackQueryPluginEventMap>({
-    pluginId: '@rozenite/tanstack-query-plugin',
-  });
-
-  useEffect(() => {
-    instrumentQueryClient(queryClient, ({ queryHash, data }) => {
-      client?.send('devtools-action', {
-        type: 'SET_QUERY_DATA',
-        queryHash,
-        metadata: { data },
-      });
-    });
-  }, [client]);
-
-  useSyncInitialData(client);
-
-  useSyncDevToolsEvents(client);
-
-  useSyncOnlineStatus(client);
-
-  useHandleSyncMessages(client);
-
-  return <ReactQueryDevtoolsPanel style={{ height: '100%', width: '100%' }} />;
-};
-
-const queryClient = new QueryClient();
-
-export default function TanStackQueryPanel() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  );
-}

package/src/ui/useHandleSyncMessages.ts

@@ -1,58 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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.test.tsx

@@ -1,76 +0,0 @@
-// @vitest-environment jsdom
-
-import { act, type ReactNode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { TanStackQueryPluginClient } from '../shared/messaging';
-import { useSyncInitialData } from './useSyncInitialData';
-
-declare global {
-  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
-}
-
-type Listener = (payload: unknown) => void;
-
-const createClient = () => {
-  const listeners = new Map<string, Set<Listener>>();
-
-  return {
-    send: vi.fn(),
-    onMessage: vi.fn((type: string, listener: Listener) => {
-      const typeListeners = listeners.get(type) ?? new Set<Listener>();
-      typeListeners.add(listener);
-      listeners.set(type, typeListeners);
-      return { remove: () => typeListeners.delete(listener) };
-    }),
-    close: vi.fn(),
-    emit: (type: string, payload: unknown) =>
-      listeners.get(type)?.forEach((listener) => listener(payload)),
-  };
-};
-
-const requests = (client: ReturnType<typeof createClient>) =>
-  client.send.mock.calls.filter(([type]) => type === 'request-initial-data');
-
-describe('useSyncInitialData', () => {
-  beforeEach(() => {
-    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
-  });
-  afterEach(() => {
-    document.body.innerHTML = '';
-    delete globalThis.IS_REACT_ACT_ENVIRONMENT;
-  });
-
-  // The panel is recreated on every app reload and asks for the cache before the
-  // app's React tree has mounted the plugin, so its first request is dropped.
-  it('asks for the cache again when the device announces itself', async () => {
-    const client = createClient();
-    const queryClient = new QueryClient();
-    queryClient.setQueryData(['stale-from-previous-context'], 'value');
-
-    const Harness = ({ children }: { children?: ReactNode }) => {
-      useSyncInitialData(client as unknown as TanStackQueryPluginClient);
-      return <>{children}</>;
-    };
-    const container = document.createElement('div');
-    document.body.append(container);
-    const root = createRoot(container);
-    await act(async () =>
-      root.render(
-        <QueryClientProvider client={queryClient}>
-          <Harness />
-        </QueryClientProvider>,
-      ),
-    );
-
-    expect(requests(client)).toHaveLength(1);
-
-    await act(async () => client.emit('device-ready', {}));
-
-    expect(requests(client)).toHaveLength(2);
-    expect(queryClient.getQueryData(['stale-from-previous-context'])).toBeUndefined();
-
-    await act(async () => root.unmount());
-  });
-});

package/src/ui/useSyncInitialData.ts

@@ -1,27 +0,0 @@
-import { useEffect } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { TanStackQueryPluginClient } from '../shared/messaging';
-
-export const useSyncInitialData = (client: TanStackQueryPluginClient | null) => {
-  const queryClient = useQueryClient();
-
-  useEffect(() => {
-    if (!client) {
-      return;
-    }
-
-    // The device announces itself once it is listening. It reconnects on every
-    // app reload, so the cache has to be pulled again — what the panel holds
-    // belongs to the previous JS context.
-    const subscription = client.onMessage('device-ready', () => {
-      queryClient.clear();
-      client.send('request-initial-data', {});
-    });
-
-    client.send('request-initial-data', {});
-
-    return () => {
-      subscription.remove();
-    };
-  }, [client, queryClient]);
-};

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "customConditions": ["development"],
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src/**/*", "react-native.ts", "sdk.ts", "rozenite.config.ts"],
-  "exclude": ["node_modules", "dist", "build"],
-  "references": [
-    {
-      "path": "../agent-bridge"
-    },
-    {
-      "path": "../plugin-bridge"
-    },
-    {
-      "path": "../cli"
-    },
-    {
-      "path": "../vite-plugin"
-    }
-  ]
-}

package/vite.config.ts

@@ -1,27 +0,0 @@
-/// <reference types='vitest' />
-import { resolve } from 'node:path';
-import { defineConfig } from 'vite';
-import { rozenitePlugin } from '@rozenite/vite-plugin';
-
-export default defineConfig({
-  root: __dirname,
-  plugins: [rozenitePlugin()],
-  test: {
-    passWithNoTests: true,
-    alias: {
-      '@rozenite/agent-shared': resolve(__dirname, '../agent-shared/src/index.ts'),
-    },
-  },
-  base: './',
-  build: {
-    outDir: './dist',
-    emptyOutDir: false,
-    reportCompressedSize: false,
-    minify: true,
-    sourcemap: false,
-  },
-  server: {
-    port: 3000,
-    open: true,
-  },
-});