@tanstack/query-devtools 5.0.0-alpha.84 → 5.0.0-alpha.87

package/build/index.d.cts

@@ -0,0 +1,55 @@
+import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
+import { Component, Signal } from 'solid-js';
+
+type XPosition = 'left' | 'right';
+type YPosition = 'top' | 'bottom';
+type DevtoolsPosition = XPosition | YPosition;
+type DevtoolsButtonPosition = `${YPosition}-${XPosition}`;
+interface DevToolsErrorType {
+    /**
+     * The name of the error.
+     */
+    name: string;
+    /**
+     * How the error is initialized.
+     */
+    initializer: (query: Query) => Error;
+}
+interface QueryDevtoolsProps {
+    readonly client: QueryClient;
+    queryFlavor: string;
+    version: string;
+    onlineManager: typeof onlineManager;
+    buttonPosition?: DevtoolsButtonPosition;
+    position?: DevtoolsPosition;
+    initialIsOpen?: boolean;
+    errorTypes?: DevToolsErrorType[];
+}
+
+declare const DevtoolsComponent: Component<QueryDevtoolsProps>;
+
+interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
+}
+declare class TanstackQueryDevtools {
+    client: Signal<QueryClient>;
+    onlineManager: typeof onlineManager;
+    queryFlavor: string;
+    version: string;
+    isMounted: boolean;
+    buttonPosition: Signal<DevtoolsButtonPosition | undefined>;
+    position: Signal<DevtoolsPosition | undefined>;
+    initialIsOpen: Signal<boolean | undefined>;
+    errorTypes: Signal<DevToolsErrorType[] | undefined>;
+    Component: typeof DevtoolsComponent | undefined;
+    dispose?: () => void;
+    constructor(config: TanstackQueryDevtoolsConfig);
+    setButtonPosition(position: DevtoolsButtonPosition): void;
+    setPosition(position: DevtoolsPosition): void;
+    setInitialIsOpen(isOpen: boolean): void;
+    setErrorTypes(errorTypes: DevToolsErrorType[]): void;
+    setClient(client: QueryClient): void;
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+}
+
+export { DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition, TanstackQueryDevtools, TanstackQueryDevtoolsConfig };

package/build/index.d.ts

@@ -0,0 +1,55 @@
+import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
+import { Component, Signal } from 'solid-js';
+
+type XPosition = 'left' | 'right';
+type YPosition = 'top' | 'bottom';
+type DevtoolsPosition = XPosition | YPosition;
+type DevtoolsButtonPosition = `${YPosition}-${XPosition}`;
+interface DevToolsErrorType {
+    /**
+     * The name of the error.
+     */
+    name: string;
+    /**
+     * How the error is initialized.
+     */
+    initializer: (query: Query) => Error;
+}
+interface QueryDevtoolsProps {
+    readonly client: QueryClient;
+    queryFlavor: string;
+    version: string;
+    onlineManager: typeof onlineManager;
+    buttonPosition?: DevtoolsButtonPosition;
+    position?: DevtoolsPosition;
+    initialIsOpen?: boolean;
+    errorTypes?: DevToolsErrorType[];
+}
+
+declare const DevtoolsComponent: Component<QueryDevtoolsProps>;
+
+interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
+}
+declare class TanstackQueryDevtools {
+    client: Signal<QueryClient>;
+    onlineManager: typeof onlineManager;
+    queryFlavor: string;
+    version: string;
+    isMounted: boolean;
+    buttonPosition: Signal<DevtoolsButtonPosition | undefined>;
+    position: Signal<DevtoolsPosition | undefined>;
+    initialIsOpen: Signal<boolean | undefined>;
+    errorTypes: Signal<DevToolsErrorType[] | undefined>;
+    Component: typeof DevtoolsComponent | undefined;
+    dispose?: () => void;
+    constructor(config: TanstackQueryDevtoolsConfig);
+    setButtonPosition(position: DevtoolsButtonPosition): void;
+    setPosition(position: DevtoolsPosition): void;
+    setInitialIsOpen(isOpen: boolean): void;
+    setErrorTypes(errorTypes: DevToolsErrorType[]): void;
+    setClient(client: QueryClient): void;
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+}
+
+export { DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition, TanstackQueryDevtools, TanstackQueryDevtoolsConfig };

package/build/index.js

@@ -0,0 +1,99 @@
+import { createSignal, render, lazy, createComponent, mergeProps } from './chunk/MZOCHHZD.js';
+
+// src/index.tsx
+var TanstackQueryDevtools = class {
+  isMounted = false;
+  constructor(config) {
+    const {
+      client,
+      queryFlavor,
+      version,
+      onlineManager,
+      buttonPosition,
+      position,
+      initialIsOpen,
+      errorTypes
+    } = config;
+    this.client = createSignal(client);
+    this.queryFlavor = queryFlavor;
+    this.version = version;
+    this.onlineManager = onlineManager;
+    this.buttonPosition = createSignal(buttonPosition);
+    this.position = createSignal(position);
+    this.initialIsOpen = createSignal(initialIsOpen);
+    this.errorTypes = createSignal(errorTypes);
+  }
+  setButtonPosition(position) {
+    this.buttonPosition[1](position);
+  }
+  setPosition(position) {
+    this.position[1](position);
+  }
+  setInitialIsOpen(isOpen) {
+    this.initialIsOpen[1](isOpen);
+  }
+  setErrorTypes(errorTypes) {
+    this.errorTypes[1](errorTypes);
+  }
+  setClient(client) {
+    this.client[1](client);
+  }
+  mount(el) {
+    if (this.isMounted) {
+      throw new Error("Devtools is already mounted");
+    }
+    const dispose = render(() => {
+      const [btnPosition] = this.buttonPosition;
+      const [pos] = this.position;
+      const [isOpen] = this.initialIsOpen;
+      const [errors] = this.errorTypes;
+      const [queryClient] = this.client;
+      let Devtools;
+      if (this.Component) {
+        Devtools = this.Component;
+      } else {
+        Devtools = lazy(() => import('./Devtools/QBS7PB6D.js'));
+        this.Component = Devtools;
+      }
+      const _self$ = this;
+      return createComponent(Devtools, mergeProps({
+        get queryFlavor() {
+          return _self$.queryFlavor;
+        },
+        get version() {
+          return _self$.version;
+        },
+        get onlineManager() {
+          return _self$.onlineManager;
+        }
+      }, {
+        get client() {
+          return queryClient();
+        },
+        get buttonPosition() {
+          return btnPosition();
+        },
+        get position() {
+          return pos();
+        },
+        get initialIsOpen() {
+          return isOpen();
+        },
+        get errorTypes() {
+          return errors();
+        }
+      }));
+    }, el);
+    this.isMounted = true;
+    this.dispose = dispose;
+  }
+  unmount() {
+    if (!this.isMounted) {
+      throw new Error("Devtools is not mounted");
+    }
+    this.dispose?.();
+    this.isMounted = false;
+  }
+};
+
+export { TanstackQueryDevtools };

package/build/index.jsx

@@ -0,0 +1,98 @@
+import {
+  createSignal,
+  lazy,
+  render
+} from "./chunk/LOJK4LQB.jsx";
+
+// src/index.tsx
+var TanstackQueryDevtools = class {
+  constructor(config) {
+    this.isMounted = false;
+    const {
+      client,
+      queryFlavor,
+      version,
+      onlineManager,
+      buttonPosition,
+      position,
+      initialIsOpen,
+      errorTypes
+    } = config;
+    this.client = createSignal(client);
+    this.queryFlavor = queryFlavor;
+    this.version = version;
+    this.onlineManager = onlineManager;
+    this.buttonPosition = createSignal(buttonPosition);
+    this.position = createSignal(position);
+    this.initialIsOpen = createSignal(initialIsOpen);
+    this.errorTypes = createSignal(errorTypes);
+  }
+  setButtonPosition(position) {
+    this.buttonPosition[1](position);
+  }
+  setPosition(position) {
+    this.position[1](position);
+  }
+  setInitialIsOpen(isOpen) {
+    this.initialIsOpen[1](isOpen);
+  }
+  setErrorTypes(errorTypes) {
+    this.errorTypes[1](errorTypes);
+  }
+  setClient(client) {
+    this.client[1](client);
+  }
+  mount(el) {
+    if (this.isMounted) {
+      throw new Error("Devtools is already mounted");
+    }
+    const dispose = render(() => {
+      const [btnPosition] = this.buttonPosition;
+      const [pos] = this.position;
+      const [isOpen] = this.initialIsOpen;
+      const [errors] = this.errorTypes;
+      const [queryClient] = this.client;
+      let Devtools;
+      if (this.Component) {
+        Devtools = this.Component;
+      } else {
+        Devtools = lazy(() => import("./Devtools/RZF5MSB2.jsx"));
+        this.Component = Devtools;
+      }
+      return <Devtools
+        queryFlavor={this.queryFlavor}
+        version={this.version}
+        onlineManager={this.onlineManager}
+        {...{
+          get client() {
+            return queryClient();
+          },
+          get buttonPosition() {
+            return btnPosition();
+          },
+          get position() {
+            return pos();
+          },
+          get initialIsOpen() {
+            return isOpen();
+          },
+          get errorTypes() {
+            return errors();
+          }
+        }}
+      />;
+    }, el);
+    this.isMounted = true;
+    this.dispose = dispose;
+  }
+  unmount() {
+    if (!this.isMounted) {
+      throw new Error("Devtools is not mounted");
+    }
+    this.dispose?.();
+    this.isMounted = false;
+  }
+};
+export {
+  TanstackQueryDevtools
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.0.0-alpha.84",
+  "version": "5.0.0-alpha.87",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -11,25 +11,30 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "dist/types/index.d.ts",
-  "main": "dist/cjs/index.cjs",
-  "module": "dist/esm/index.js",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "browser": {},
   "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "solid": "./dist/source/index.jsx",
-      "import": "./dist/esm/index.js",
-      "browser": {
-        "import": "./dist/esm/index.js",
-        "require": "./dist/cjs/index.cjs"
+    "solid": {
+      "development": "./build/dev.jsx",
+      "import": "./build/index.jsx"
+    },
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
       },
-      "require": "./dist/cjs/index.cjs",
-      "node": "./dist/cjs/index.cjs"
+      "require": "./build/dev.cjs"
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
     },
-    "./package.json": "./package.json"
+    "require": "./build/index.cjs"
   },
   "files": [
-    "dist",
+    "build",
     "src"
   ],
   "dependencies": {
@@ -43,16 +48,17 @@
     "superjson": "^1.12.4"
   },
   "devDependencies": {
+    "tsup-preset-solid": "^0.1.8",
     "vite-plugin-solid": "^2.5.0",
-    "@tanstack/query-core": "5.0.0-alpha.84"
+    "@tanstack/query-core": "5.0.0-alpha.87"
   },
   "scripts": {
-    "clean": "rimraf ./dist && rimraf ./coverage",
+    "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types": "tsc --noEmit",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
-    "build": "rollup --config rollup.config.js"
+    "build": "tsup"
   }
 }

package/src/Devtools.tsx

@@ -485,13 +485,11 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
             <button
               onClick={() => {
                 if (offline()) {
-                  onlineManager().setOnline(undefined)
+                  onlineManager().setOnline(true)
                   setOffline(false)
-                  window.dispatchEvent(new Event('online'))
                 } else {
                   onlineManager().setOnline(false)
                   setOffline(true)
-                  window.dispatchEvent(new Event('offline'))
                 }
               }}
               class={styles.actionsBtn}