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

package/dist/react-native.cjs

@@ -1 +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});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("@rozenite/plugin-bridge"),i=require("react"),a=require("@tanstack/react-query"),y=e=>{i.useEffect(()=>{if(!e)return;const s=a.onlineManager.subscribe(r=>{}),n=e.onMessage("online-status-changed",({online:r})=>{console.log("changed from ",a.onlineManager.isOnline(),"to",r)});return()=>{s(),n.remove()}},[e])},h=e=>{const s=a.useQueryClient();i.useEffect(()=>{if(!e)return;const n=e.onMessage("devtools-action",({type:r,queryHash:u})=>{const t=s.getQueryCache().get(u);if(!t){console.warn(`No active query found for hash: ${u}`);return}switch(r){case"TRIGGER_ERROR":{const o=t.options,c=new Error("Unknown error from devtools");t.setState({status:"error",error:c,fetchMeta:{...t.state.fetchMeta,__previousQueryOptions:o}});break}case"RESTORE_ERROR":{s.resetQueries(t);break}case"TRIGGER_LOADING":{if(!t)return;const o=t.options;t.fetch({...o,queryFn:()=>new Promise(()=>{}),gcTime:-1}),t.setState({data:void 0,status:"pending",fetchMeta:{...t.state.fetchMeta,__previousQueryOptions:o}});break}case"RESTORE_LOADING":{const o=t.state,c=t.state.fetchMeta?t.state.fetchMeta.__previousQueryOptions:null;t.cancel({silent:!0}),t.setState({...o,fetchStatus:"idle",fetchMeta:null}),c&&t.fetch(c);break}case"RESET":{s.resetQueries(t);break}case"REMOVE":{s.removeQueries(t);break}case"REFETCH":{t.fetch().catch(()=>{});break}case"INVALIDATE":{s.invalidateQueries(t);break}default:console.warn(`Unknown devtools action: ${r}`)}});return()=>{n.remove()}},[e])},f=e=>{const s=e.observers.map(n=>({queryHash:e.queryHash,options:n.options}));return{state:e.state,queryKey:e.queryKey,queryHash:e.queryHash,observers:s}},p=e=>({mutationId:e.mutationId,state:e.state,options:e.options}),d=e=>({queries:e.getQueryCache().getAll().map(f),mutations:e.getMutationCache().getAll().map(p)}),v=e=>{const s=a.useQueryClient();i.useEffect(()=>{if(!e)return;const n=()=>{const t=d(s);e.send("sync-data",{data:t})},r=s.getMutationCache().subscribe(n),u=s.getQueryCache().subscribe(n);return()=>{r(),u()}},[e,s])},g=e=>{const s=a.useQueryClient();i.useEffect(()=>{if(!e)return;const n=e.onMessage("request-initial-data",()=>{const r=d(s);e.send("sync-data",{data:r})});return()=>{n.remove()}},[e,s])},b=()=>{const e=l.useRozeniteDevToolsClient({pluginId:"@rozenite/tanstack-query-plugin"});y(e),h(e),v(e),g(e)};exports.useTanStackQueryDevTools=void 0;process.env.NODE_ENV!=="production"?exports.useTanStackQueryDevTools=b:exports.useTanStackQueryDevTools=()=>({isConnected:!1});

package/dist/react-native.js

@@ -1,88 +1,152 @@
-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()
-      });
+import { useRozeniteDevToolsClient as p } from "@rozenite/plugin-bridge";
+import { useEffect as i } from "react";
+import { onlineManager as d, useQueryClient as u } from "@tanstack/react-query";
+const f = (e) => {
+  i(() => {
+    if (!e)
+      return;
+    const s = d.subscribe((r) => {
+    }), n = e.onMessage("online-status-changed", ({ online: r }) => {
+      console.log("changed from ", d.isOnline(), "to", r);
     });
-    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)));
+    return () => {
+      s(), n.remove();
+    };
+  }, [e]);
+}, y = (e) => {
+  const s = u();
+  i(() => {
+    if (!e)
+      return;
+    const n = e.onMessage("devtools-action", ({ type: r, queryHash: a }) => {
+      const t = s.getQueryCache().get(a);
+      if (!t) {
+        console.warn(`No active query found for hash: ${a}`);
+        return;
       }
-      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)));
+      switch (r) {
+        case "TRIGGER_ERROR": {
+          const o = t.options, c = new Error("Unknown error from devtools");
+          t.setState({
+            status: "error",
+            error: c,
+            fetchMeta: {
+              ...t.state.fetchMeta,
+              // @ts-expect-error This does exist
+              __previousQueryOptions: o
+            }
+          });
+          break;
+        }
+        case "RESTORE_ERROR": {
+          s.resetQueries(t);
+          break;
+        }
+        case "TRIGGER_LOADING": {
+          if (!t) return;
+          const o = t.options;
+          t.fetch({
+            ...o,
+            queryFn: () => new Promise(() => {
+            }),
+            gcTime: -1
+          }), t.setState({
+            data: void 0,
+            status: "pending",
+            fetchMeta: {
+              ...t.state.fetchMeta,
+              // @ts-expect-error This does exist
+              __previousQueryOptions: o
+            }
+          });
+          break;
+        }
+        case "RESTORE_LOADING": {
+          const o = t.state, c = t.state.fetchMeta ? t.state.fetchMeta.__previousQueryOptions : null;
+          t.cancel({ silent: !0 }), t.setState({
+            ...o,
+            fetchStatus: "idle",
+            fetchMeta: null
+          }), c && t.fetch(c);
+          break;
+        }
+        case "RESET": {
+          s.resetQueries(t);
+          break;
+        }
+        case "REMOVE": {
+          s.removeQueries(t);
+          break;
+        }
+        case "REFETCH": {
+          t.fetch().catch(() => {
+          });
+          break;
+        }
+        case "INVALIDATE": {
+          s.invalidateQueries(t);
+          break;
+        }
+        default:
+          console.warn(`Unknown devtools action: ${r}`);
       }
-      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]);
+    });
+    return () => {
+      n.remove();
+    };
+  }, [e]);
+}, v = (e) => {
+  const s = e.observers.map((n) => ({
+    queryHash: e.queryHash,
+    options: n.options
+  }));
+  return {
+    state: e.state,
+    queryKey: e.queryKey,
+    queryHash: e.queryHash,
+    observers: s
+  };
+}, b = (e) => ({
+  mutationId: e.mutationId,
+  state: e.state,
+  options: e.options
+}), h = (e) => ({
+  queries: e.getQueryCache().getAll().map(v),
+  mutations: e.getMutationCache().getAll().map(b)
+}), g = (e) => {
+  const s = u();
+  i(() => {
+    if (!e)
+      return;
+    const n = () => {
+      const t = h(s);
+      e.send("sync-data", { data: t });
+    }, r = s.getMutationCache().subscribe(n), a = s.getQueryCache().subscribe(n);
+    return () => {
+      r(), a();
+    };
+  }, [e, s]);
+}, S = (e) => {
+  const s = u();
+  i(() => {
+    if (!e)
+      return;
+    const n = e.onMessage("request-initial-data", () => {
+      const r = h(s);
+      e.send("sync-data", { data: r });
+    });
+    return () => {
+      n.remove();
+    };
+  }, [e, s]);
+}, m = () => {
+  const e = p({
+    pluginId: "@rozenite/tanstack-query-plugin"
+  });
+  f(e), y(e), g(e), S(e);
 };
-let d;
-process.env.NODE_ENV !== "production" ? d = I : d = () => ({ isConnected: !1 });
+let l;
+process.env.NODE_ENV !== "production" ? l = m : l = () => ({ isConnected: !1 });
 export {
-  d as useTanStackQueryDevTools
+  l as useTanStackQueryDevTools
 };

package/dist/rozenite.json

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

package/dist/tanstack-query.html

@@ -22,7 +22,7 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="./assets/tanstack-query-CXp_Psxe.js"></script>
+    <script type="module" crossorigin src="./assets/tanstack-query-4kxOTB8B.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/tanstack-query-plugin",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "description": "TanStack Query for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -15,7 +15,7 @@
     "vite": "^6.0.0",
     "react": "*",
     "react-native": "*",
-    "rozenite": "1.0.0-alpha.2",
+    "rozenite": "1.0.0-alpha.0",
     "@rozenite/vite-plugin": "1.0.0-alpha.1"
   },
   "peerDependencies": {

package/src/react-native/useHandleDevToolsMessages.ts

@@ -0,0 +1,120 @@
+import { useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+
+export const useHandleDevToolsMessages = (
+  client: TanStackQueryPluginClient | null
+) => {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscription = client.onMessage(
+      'devtools-action',
+      ({ type, queryHash }) => {
+        const activeQuery = queryClient.getQueryCache().get(queryHash);
+
+        if (!activeQuery) {
+          console.warn(`No active query found for hash: ${queryHash}`);
+          return;
+        }
+
+        switch (type) {
+          case 'TRIGGER_ERROR': {
+            const __previousQueryOptions = activeQuery.options;
+            const error = new Error('Unknown error from devtools');
+
+            activeQuery.setState({
+              status: 'error',
+              error,
+              fetchMeta: {
+                ...activeQuery.state.fetchMeta,
+                // @ts-expect-error This does exist
+                __previousQueryOptions,
+              },
+            });
+            break;
+          }
+          case 'RESTORE_ERROR': {
+            queryClient.resetQueries(activeQuery);
+            break;
+          }
+          case 'TRIGGER_LOADING': {
+            if (!activeQuery) return;
+            const __previousQueryOptions = activeQuery.options;
+            // Trigger a fetch in order to trigger suspense as well.
+            activeQuery.fetch({
+              ...__previousQueryOptions,
+              queryFn: () => {
+                return new Promise(() => {
+                  // Never resolve - simulates perpetual loading
+                });
+              },
+              gcTime: -1,
+            });
+            activeQuery.setState({
+              data: undefined,
+              status: 'pending',
+              fetchMeta: {
+                ...activeQuery.state.fetchMeta,
+                // @ts-expect-error This does exist
+                __previousQueryOptions,
+              },
+            });
+            break;
+          }
+          case 'RESTORE_LOADING': {
+            const previousState = activeQuery.state;
+            const previousOptions = activeQuery.state.fetchMeta
+              ? (
+                  activeQuery.state.fetchMeta as unknown as {
+                    __previousQueryOptions: unknown;
+                  }
+                ).__previousQueryOptions
+              : null;
+
+            activeQuery.cancel({ silent: true });
+            activeQuery.setState({
+              ...previousState,
+              fetchStatus: 'idle',
+              fetchMeta: null,
+            });
+
+            if (previousOptions) {
+              activeQuery.fetch(previousOptions);
+            }
+            break;
+          }
+          case 'RESET': {
+            queryClient.resetQueries(activeQuery);
+            break;
+          }
+          case 'REMOVE': {
+            queryClient.removeQueries(activeQuery);
+            break;
+          }
+          case 'REFETCH': {
+            activeQuery.fetch().catch(() => {
+              // Ignore errors
+            });
+            break;
+          }
+          case 'INVALIDATE': {
+            queryClient.invalidateQueries(activeQuery);
+            break;
+          }
+          default: {
+            console.warn(`Unknown devtools action: ${type}`);
+          }
+        }
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [client]);
+};

package/src/react-native/useHandleInitialData.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+import { useQueryClient } from '@tanstack/react-query';
+import { dehydrateQueryClient } from '../shared/dehydrate';
+
+export const useHandleInitialData = (
+  client: TanStackQueryPluginClient | null
+) => {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscription = client.onMessage('request-initial-data', () => {
+      const dehydratedState = dehydrateQueryClient(queryClient);
+      client.send('sync-data', { data: dehydratedState });
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [client, queryClient]);
+};

package/src/react-native/useSyncTanStackCache.ts

@@ -0,0 +1,33 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { TanStackQueryPluginClient } from '../shared/messaging';
+import { dehydrateQueryClient } from '../shared/dehydrate';
+
+export const useSyncTanStackCache = (
+  client: TanStackQueryPluginClient | null
+) => {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const handler = (): void => {
+      const dehydratedState = dehydrateQueryClient(queryClient);
+      client.send('sync-data', { data: dehydratedState });
+    };
+
+    const mutationCacheSubscription = queryClient
+      .getMutationCache()
+      .subscribe(handler);
+    const queryCacheSubscription = queryClient
+      .getQueryCache()
+      .subscribe(handler);
+
+    return () => {
+      mutationCacheSubscription();
+      queryCacheSubscription();
+    };
+  }, [client, queryClient]);
+};