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

package/dist/react-native.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@rozenite/plugin-bridge"),O=require("react"),D=u=>{const e=d.useRozeniteDevToolsClient({pluginId:"@rozenite/tanstack-query-plugin"});O.useEffect(()=>{if(!e)return;const c=e.onMessage("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST",()=>{e.send("DEVICE_TO_DEVTOOLS_INITIAL_DATA",{queries:u.getQueryCache().getAll(),mutations:u.getMutationCache().getAll()})});return()=>c.remove()},[e,u]);const o=O.useRef(new Set),a=O.useCallback(c=>{const n=T=>u.getQueryCache().getAll().find(E=>E.queryHash===T);(T=>{var f;const{type:E,queryHash:t,metadata:_,requestId:s}=T;if(E==="REFETCH"&&t&&((f=n(t))==null||f.fetch(),s&&(o.current.add(s),e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}),o.current.delete(s))),E==="INVALIDATE"&&t){const r=n(t);r&&u.invalidateQueries({queryKey:r.queryKey}),s&&(e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}))}if(E==="RESET"&&t){const r=n(t);r&&u.resetQueries({queryKey:r.queryKey}),s&&(e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}))}if(E==="REMOVE"&&t){const r=n(t);r&&u.removeQueries({queryKey:r.queryKey}),s&&(e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}))}if(E==="TRIGGER_LOADING"&&t){const r=n(t);r&&(r.setState({...r.state,fetchStatus:"fetching",status:"pending",error:null}),s&&(o.current.add(s),e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}),o.current.delete(s)))}if(E==="RESTORE_LOADING"&&t){const r=n(t);r&&(r.setState({...r.state,fetchStatus:"idle"}),s&&(o.current.add(s),e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}),o.current.delete(s)))}if(E==="TRIGGER_ERROR"&&t){const r=n(t);r&&(r.setState({...r.state,fetchStatus:"idle",status:"error",error:(_==null?void 0:_.error)||new Error("Forced error via devtools"),errorUpdateCount:(r.state.errorUpdateCount??0)+1,errorUpdatedAt:Date.now()}),s&&(o.current.add(s),e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}),o.current.delete(s)))}if(E==="RESTORE_ERROR"&&t){const r=n(t);r&&u.resetQueries({queryKey:r.queryKey}),s&&(e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}))}E==="CLEAR_MUTATION_CACHE"&&(u.getMutationCache().clear(),s&&(e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0}))),E==="CLEAR_QUERY_CACHE"&&(u.clear(),s&&(e==null||e.send("DEVICE_TO_DEVTOOLS_ACK",{requestId:s,success:!0})))})(c)},[u,e]);O.useEffect(()=>{if(!e)return;const c=e.onMessage("DEVTOOLS_TO_DEVICE",a);return()=>c.remove()},[a,e]),O.useEffect(()=>{if(e)return u.getQueryCache().subscribe(c=>{o.current.size>0||e.send("DEVICE_TO_DEVTOOLS",c)})},[e,u]),O.useEffect(()=>{if(e)return u.getMutationCache().subscribe(c=>{o.current.size>0||e.send("DEVICE_TO_DEVTOOLS",c)})},[e,u])};exports.useTanStackQueryDevTools=void 0;process.env.NODE_ENV!=="production"?exports.useTanStackQueryDevTools=D:exports.useTanStackQueryDevTools=()=>({isConnected:!1});

package/dist/react-native.d.ts

@@ -0,0 +1,5 @@
+import { useTanStackQueryDevTools as useTanStackQueryDevTools_2 } from './src/react-native/useTanStackQueryDevTools';
+
+export declare let useTanStackQueryDevTools: useTanStackQueryDevTools_2;
+
+export { }

package/dist/react-native.js

@@ -0,0 +1,88 @@
+import { useRozeniteDevToolsClient as D } from "@rozenite/plugin-bridge";
+import { useEffect as _, useRef as i, useCallback as V } from "react";
+const I = (u) => {
+  const e = D({
+    pluginId: "@rozenite/tanstack-query-plugin"
+  });
+  _(() => {
+    if (!e) return;
+    const n = e.onMessage("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", () => {
+      e.send("DEVICE_TO_DEVTOOLS_INITIAL_DATA", {
+        queries: u.getQueryCache().getAll(),
+        mutations: u.getMutationCache().getAll()
+      });
+    });
+    return () => n.remove();
+  }, [e, u]);
+  const o = i(/* @__PURE__ */ new Set()), a = V((n) => {
+    const O = (c) => u.getQueryCache().getAll().find((E) => E.queryHash === c);
+    ((c) => {
+      var f;
+      const { type: E, queryHash: t, metadata: T, requestId: s } = c;
+      if (E === "REFETCH" && t && ((f = O(t)) == null || f.fetch(), s && (o.current.add(s), e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }), o.current.delete(s))), E === "INVALIDATE" && t) {
+        const r = O(t);
+        r && u.invalidateQueries({ queryKey: r.queryKey }), s && (e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }));
+      }
+      if (E === "RESET" && t) {
+        const r = O(t);
+        r && u.resetQueries({ queryKey: r.queryKey }), s && (e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }));
+      }
+      if (E === "REMOVE" && t) {
+        const r = O(t);
+        r && u.removeQueries({ queryKey: r.queryKey }), s && (e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }));
+      }
+      if (E === "TRIGGER_LOADING" && t) {
+        const r = O(t);
+        r && (r.setState({
+          ...r.state,
+          fetchStatus: "fetching",
+          status: "pending",
+          error: null
+        }), s && (o.current.add(s), e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }), o.current.delete(s)));
+      }
+      if (E === "RESTORE_LOADING" && t) {
+        const r = O(t);
+        r && (r.setState({
+          ...r.state,
+          fetchStatus: "idle"
+        }), s && (o.current.add(s), e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }), o.current.delete(s)));
+      }
+      if (E === "TRIGGER_ERROR" && t) {
+        const r = O(t);
+        r && (r.setState({
+          ...r.state,
+          fetchStatus: "idle",
+          status: "error",
+          error: (T == null ? void 0 : T.error) || new Error("Forced error via devtools"),
+          errorUpdateCount: (r.state.errorUpdateCount ?? 0) + 1,
+          errorUpdatedAt: Date.now()
+        }), s && (o.current.add(s), e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }), o.current.delete(s)));
+      }
+      if (E === "RESTORE_ERROR" && t) {
+        const r = O(t);
+        r && u.resetQueries({ queryKey: r.queryKey }), s && (e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }));
+      }
+      E === "CLEAR_MUTATION_CACHE" && (u.getMutationCache().clear(), s && (e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 }))), E === "CLEAR_QUERY_CACHE" && (u.clear(), s && (e == null || e.send("DEVICE_TO_DEVTOOLS_ACK", { requestId: s, success: !0 })));
+    })(n);
+  }, [u, e]);
+  _(() => {
+    if (!e) return;
+    const n = e.onMessage("DEVTOOLS_TO_DEVICE", a);
+    return () => n.remove();
+  }, [a, e]), _(() => {
+    if (e)
+      return u.getQueryCache().subscribe((n) => {
+        o.current.size > 0 || e.send("DEVICE_TO_DEVTOOLS", n);
+      });
+  }, [e, u]), _(() => {
+    if (e)
+      return u.getMutationCache().subscribe((n) => {
+        o.current.size > 0 || e.send("DEVICE_TO_DEVTOOLS", n);
+      });
+  }, [e, u]);
+};
+let d;
+process.env.NODE_ENV !== "production" ? d = I : d = () => ({ isConnected: !1 });
+export {
+  d as useTanStackQueryDevTools
+};

package/dist/rozenite.json

@@ -0,0 +1 @@
+{"name":"@rozenite/tanstack-query-plugin","version":"1.0.0-alpha.1","description":"TanStack Query for Rozenite.","panels":[{"name":"Tanstack Query","source":"/tanstack-query.html"}]}

package/dist/tanstack-query.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tanstack-query Panel</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        overflow: hidden;
+      }
+
+      #root {
+        display: flex;
+        height: 100%;
+      }
+    </style>
+    <script>
+      var __ROZENITE_PANEL__ = true;
+    </script>
+    <script type="module" crossorigin src="./assets/tanstack-query-CXp_Psxe.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@rozenite/tanstack-query-plugin",
+  "version": "1.0.0-alpha.0",
+  "description": "TanStack Query for Rozenite.",
+  "type": "module",
+  "main": "./dist/react-native.cjs",
+  "module": "./dist/react-native.js",
+  "types": "./dist/react-native.d.ts",
+  "dependencies": {
+    "@rozenite/plugin-bridge": "1.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "rozenite": "1.0.0-alpha.2",
+    "@rozenite/vite-plugin": "1.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": ">= 17.0.0",
+    "react-native": ">= 0.74.0",
+    "@tanstack/react-query": "^5.0.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rozenite build",
+    "dev": "rozenite dev"
+  }
+}

package/react-native.ts

@@ -0,0 +1,8 @@
+
+export let useTanStackQueryDevTools: typeof import('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;
+
+if (process.env.NODE_ENV !== 'production') {
+  useTanStackQueryDevTools = require('./src/react-native/useTanStackQueryDevTools').useTanStackQueryDevTools;
+} else {
+  useTanStackQueryDevTools = () => ({ isConnected: false });
+}

package/rozenite.config.ts

@@ -0,0 +1,8 @@
+export default {
+  panels: [
+    {
+      name: 'Tanstack Query',
+      source: './src/ui/tanstack-query.tsx',
+    },
+  ],
+};

package/src/react-native/useTanStackQueryDevTools.ts

@@ -0,0 +1,214 @@
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import type { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, Query, Mutation } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef } from 'react';
+
+type DevToolsActionType =
+  | 'REFETCH'
+  | 'INVALIDATE'
+  | 'RESET'
+  | 'REMOVE'
+  | 'TRIGGER_ERROR'
+  | 'RESTORE_ERROR'
+  | 'TRIGGER_LOADING'
+  | 'RESTORE_LOADING'
+  | 'CLEAR_MUTATION_CACHE'
+  | 'CLEAR_QUERY_CACHE';
+
+interface DevToolsEventDetail {
+  type: DevToolsActionType;
+  queryHash?: string;
+  mutationId?: number;
+  metadata?: Record<string, unknown>;
+  requestId?: string;
+}
+
+type DevToolsEventMap = {
+  "DEVTOOLS_TO_DEVICE": DevToolsEventDetail;
+  "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;
+}
+
+export const useTanStackQueryDevTools = (queryClient: QueryClient) => {
+  const client = useRozeniteDevToolsClient<DevToolsEventMap>({
+    pluginId: '@rozenite/tanstack-query-plugin',
+  })
+
+  useEffect(() => {
+    if (!client) return;
+
+    const subscription = client.onMessage("DEVTOOLS_TO_DEVICE_INITIAL_DATA_REQUEST", () => {
+      client.send("DEVICE_TO_DEVTOOLS_INITIAL_DATA", {
+        queries: queryClient.getQueryCache().getAll(),
+        mutations: queryClient.getMutationCache().getAll(),
+      });
+    });
+
+    return () => subscription.remove();
+  }, [client, queryClient]);
+
+  // Track pending DevTools requests that are waiting for acknowledgment
+  const pendingDevToolsRequests = useRef<Set<string>>(new Set());
+
+  const handleEvent = useCallback((event: DevToolsEventDetail) => {
+    const getQuery = (hash: string): Query | undefined => {
+      return queryClient.getQueryCache().getAll().find(q => q.queryHash === hash);
+    }
+  
+    const onEvent = (event: DevToolsEventDetail): void => {
+      const { type, queryHash, metadata, requestId } = event;
+  
+      if (type === 'REFETCH' && queryHash) {
+        getQuery(queryHash)?.fetch();
+        if (requestId) {
+          pendingDevToolsRequests.current.add(requestId);
+          // Acknowledge immediately after the fetch is initiated
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+          pendingDevToolsRequests.current.delete(requestId);
+        }
+      }
+      if (type === 'INVALIDATE' && queryHash) {
+        const query = getQuery(queryHash);
+        if (query) {
+          queryClient.invalidateQueries({ queryKey: query.queryKey });
+        }
+        if (requestId) {
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+        }
+      }
+      if (type === 'RESET' && queryHash) {
+        const query = getQuery(queryHash);
+        if (query) {
+          queryClient.resetQueries({ queryKey: query.queryKey });
+        }
+        if (requestId) {
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+        }
+      }
+      if (type === 'REMOVE' && queryHash) {
+        const query = getQuery(queryHash);
+        if (query) {
+          queryClient.removeQueries({ queryKey: query.queryKey });
+        }
+        if (requestId) {
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+        }
+      }
+      if (type === 'TRIGGER_LOADING' && queryHash) {
+        const query = getQuery(queryHash);
+        
+        if (query) {
+          // Set state to loading/pending (simulate fetch in progress)
+          query.setState({
+            ...query.state,
+            fetchStatus: 'fetching',
+            status: 'pending',
+            error: null,
+          });
+          
+          if (requestId) {
+            pendingDevToolsRequests.current.add(requestId);
+            // Acknowledge immediately after the state change is applied
+            client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+            pendingDevToolsRequests.current.delete(requestId);
+          }
+        }
+      }
+      if (type === 'RESTORE_LOADING' && queryHash) {
+        const query = getQuery(queryHash);
+        if (query) {
+          // Set state to idle/success (simulate fetch complete)
+          query.setState({
+            ...query.state,
+            fetchStatus: 'idle',
+          });
+          
+          if (requestId) {
+            pendingDevToolsRequests.current.add(requestId);
+            // Acknowledge immediately after the state change is applied
+            client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+            pendingDevToolsRequests.current.delete(requestId);
+          }
+        }
+      }
+      if (type === 'TRIGGER_ERROR' && queryHash) {
+        const query = getQuery(queryHash);
+        if (query) {
+          query.setState({
+            ...query.state,
+            fetchStatus: 'idle',
+            status: 'error',
+            error: metadata?.error as Error || new Error('Forced error via devtools'),
+            errorUpdateCount: (query.state.errorUpdateCount ?? 0) + 1,
+            errorUpdatedAt: Date.now(),
+          });
+          
+          if (requestId) {
+            pendingDevToolsRequests.current.add(requestId);
+            // Acknowledge immediately after the state change is applied
+            client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+            pendingDevToolsRequests.current.delete(requestId);
+          }
+        }
+      }
+      if (type === 'RESTORE_ERROR' && queryHash) {
+        const query = getQuery(queryHash);
+        if (query) {
+          queryClient.resetQueries({ queryKey: query.queryKey });
+        }
+        if (requestId) {
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+        }
+      }
+      if (type === 'CLEAR_MUTATION_CACHE') {
+        queryClient.getMutationCache().clear();
+        if (requestId) {
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+        }
+      }
+      if (type === 'CLEAR_QUERY_CACHE') {
+        queryClient.clear();
+        if (requestId) {
+          client?.send("DEVICE_TO_DEVTOOLS_ACK", { requestId, success: true });
+        }
+      }
+    }
+
+    onEvent(event);
+  }, [queryClient, client]);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const subscription = client.onMessage("DEVTOOLS_TO_DEVICE", handleEvent);
+    return () => subscription.remove();
+  }, [handleEvent, client]);
+
+  useEffect(() => {
+    if (!client) return;
+
+    return queryClient.getQueryCache().subscribe((event) => {
+      // Don't send events for queries that have pending DevTools requests
+      if (pendingDevToolsRequests.current.size > 0) {
+        return;
+      }
+      
+      client.send("DEVICE_TO_DEVTOOLS", event);
+    });
+  }, [client, queryClient]);
+
+  // Subscribe to mutation cache events
+  useEffect(() => {
+    if (!client) return;
+
+    return queryClient.getMutationCache().subscribe((event) => {
+      // Don't send events for mutations that have pending DevTools requests
+      if (pendingDevToolsRequests.current.size > 0) {
+        return;
+      }
+      
+      client.send("DEVICE_TO_DEVTOOLS", event);
+    });
+  }, [client, queryClient]);
+}

package/src/ui/tanstack-query.tsx

@@ -0,0 +1,197 @@
+import { QueryCacheNotifyEvent, MutationCacheNotifyEvent, QueryClient, QueryClientProvider, Query, Mutation } from '@tanstack/react-query';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+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>({
+    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);
+    };
+
+    window.addEventListener('@tanstack/query-devtools-event', handleEvent);
+    return () => window.removeEventListener('@tanstack/query-devtools-event', handleEvent);
+  }, [client])
+
+  useEffect(() => {
+    if (!client) return;
+
+    const ackSubscription = client.onMessage("DEVICE_TO_DEVTOOLS_ACK", (ack) => {
+      // Remove the request from pending acknowledgments
+      pendingAcknowledgment.current.delete(ack.requestId);
+    });
+
+    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);
+          }
+
+          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 />
+  )
+}
+
+export default function TanStackQueryPanel() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Wrapped />
+    </QueryClientProvider>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*",
+    "react-native.ts",
+    "rozenite.config.ts"
+  ],
+  "exclude": ["node_modules", "dist", "build"]
+}

package/vite.config.ts

@@ -0,0 +1,20 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import { rozenitePlugin } from '@rozenite/vite-plugin';
+
+export default defineConfig({
+  root: __dirname,
+  plugins: [rozenitePlugin()],
+  base: './',
+  build: {
+    outDir: './dist',
+    emptyOutDir: false,
+    reportCompressedSize: false,
+    minify: true,
+    sourcemap: false,
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});