@tanstack/query-devtools 5.0.0-alpha.54 → 5.0.0-alpha.56

package/dist/esm/index.js

@@ -0,0 +1,100 @@
+import { render, createComponent, mergeProps } from 'solid-js/web';
+import { createSignal, lazy } from 'solid-js';
+
+class TanstackQueryDevtools {
+  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-a6a9d5b5.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 };
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.tsx"],"sourcesContent":["import type {\n  QueryClient,\n  onlineManager as TonlineManager,\n} from '@tanstack/query-core'\nimport type { DevtoolsComponent } from './Devtools'\nimport { render } from 'solid-js/web'\nimport type {\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n  QueryDevtoolsProps,\n  DevToolsErrorType,\n} from './Context'\nimport type { Signal } from 'solid-js'\nimport { createSignal, lazy } from 'solid-js'\n\nexport type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }\nexport interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {}\n\nclass TanstackQueryDevtools {\n  client: Signal<QueryClient>\n  onlineManager: typeof TonlineManager\n  queryFlavor: string\n  version: string\n  isMounted = false\n  buttonPosition: Signal<DevtoolsButtonPosition | undefined>\n  position: Signal<DevtoolsPosition | undefined>\n  initialIsOpen: Signal<boolean | undefined>\n  errorTypes: Signal<DevToolsErrorType[] | undefined>\n  Component: typeof DevtoolsComponent | undefined\n  dispose?: () => void\n\n  constructor(config: TanstackQueryDevtoolsConfig) {\n    const {\n      client,\n      queryFlavor,\n      version,\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n    } = config\n    this.client = createSignal(client)\n    this.queryFlavor = queryFlavor\n    this.version = version\n    this.onlineManager = onlineManager\n    this.buttonPosition = createSignal(buttonPosition)\n    this.position = createSignal(position)\n    this.initialIsOpen = createSignal(initialIsOpen)\n    this.errorTypes = createSignal(errorTypes)\n  }\n\n  setButtonPosition(position: DevtoolsButtonPosition) {\n    this.buttonPosition[1](position)\n  }\n\n  setPosition(position: DevtoolsPosition) {\n    this.position[1](position)\n  }\n\n  setInitialIsOpen(isOpen: boolean) {\n    this.initialIsOpen[1](isOpen)\n  }\n\n  setErrorTypes(errorTypes: DevToolsErrorType[]) {\n    this.errorTypes[1](errorTypes)\n  }\n\n  setClient(client: QueryClient) {\n    this.client[1](client)\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n    const dispose = render(() => {\n      const [btnPosition] = this.buttonPosition\n      const [pos] = this.position\n      const [isOpen] = this.initialIsOpen\n      const [errors] = this.errorTypes\n      const [queryClient] = this.client\n\n      let Devtools: typeof DevtoolsComponent\n\n      if (this.Component) {\n        Devtools = this.Component\n      } else {\n        Devtools = lazy(() => import('./Devtools'))\n        this.Component = Devtools\n      }\n\n      return (\n        <Devtools\n          queryFlavor={this.queryFlavor}\n          version={this.version}\n          onlineManager={this.onlineManager}\n          {...{\n            get client() {\n              return queryClient()\n            },\n            get buttonPosition() {\n              return btnPosition()\n            },\n            get position() {\n              return pos()\n            },\n            get initialIsOpen() {\n              return isOpen()\n            },\n            get errorTypes() {\n              return errors()\n            },\n          }}\n        />\n      )\n    }, el)\n    this.isMounted = true\n    this.dispose = dispose\n  }\n\n  unmount() {\n    if (!this.isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.dispose?.()\n    this.isMounted = false\n  }\n}\n\nexport { TanstackQueryDevtools }\n"],"names":["TanstackQueryDevtools","isMounted","constructor","config","client","queryFlavor","version","onlineManager","buttonPosition","position","initialIsOpen","errorTypes","createSignal","setButtonPosition","setPosition","setInitialIsOpen","isOpen","setErrorTypes","setClient","mount","el","Error","dispose","render","btnPosition","pos","errors","queryClient","Devtools","Component","lazy","_self$","_$createComponent","_$mergeProps","unmount"],"mappings":";;;AAkBA,MAAMA,qBAAqB,CAAC;AAK1BC,EAAAA,SAAS,GAAG,KAAK,CAAA;EAQjBC,WAAWA,CAACC,MAAmC,EAAE;IAC/C,MAAM;MACJC,MAAM;MACNC,WAAW;MACXC,OAAO;MACPC,aAAa;MACbC,cAAc;MACdC,QAAQ;MACRC,aAAa;AACbC,MAAAA,UAAAA;AACF,KAAC,GAAGR,MAAM,CAAA;AACV,IAAA,IAAI,CAACC,MAAM,GAAGQ,YAAY,CAACR,MAAM,CAAC,CAAA;IAClC,IAAI,CAACC,WAAW,GAAGA,WAAW,CAAA;IAC9B,IAAI,CAACC,OAAO,GAAGA,OAAO,CAAA;IACtB,IAAI,CAACC,aAAa,GAAGA,aAAa,CAAA;AAClC,IAAA,IAAI,CAACC,cAAc,GAAGI,YAAY,CAACJ,cAAc,CAAC,CAAA;AAClD,IAAA,IAAI,CAACC,QAAQ,GAAGG,YAAY,CAACH,QAAQ,CAAC,CAAA;AACtC,IAAA,IAAI,CAACC,aAAa,GAAGE,YAAY,CAACF,aAAa,CAAC,CAAA;AAChD,IAAA,IAAI,CAACC,UAAU,GAAGC,YAAY,CAACD,UAAU,CAAC,CAAA;AAC5C,GAAA;EAEAE,iBAAiBA,CAACJ,QAAgC,EAAE;AAClD,IAAA,IAAI,CAACD,cAAc,CAAC,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAA;AAClC,GAAA;EAEAK,WAAWA,CAACL,QAA0B,EAAE;AACtC,IAAA,IAAI,CAACA,QAAQ,CAAC,CAAC,CAAC,CAACA,QAAQ,CAAC,CAAA;AAC5B,GAAA;EAEAM,gBAAgBA,CAACC,MAAe,EAAE;AAChC,IAAA,IAAI,CAACN,aAAa,CAAC,CAAC,CAAC,CAACM,MAAM,CAAC,CAAA;AAC/B,GAAA;EAEAC,aAAaA,CAACN,UAA+B,EAAE;AAC7C,IAAA,IAAI,CAACA,UAAU,CAAC,CAAC,CAAC,CAACA,UAAU,CAAC,CAAA;AAChC,GAAA;EAEAO,SAASA,CAACd,MAAmB,EAAE;AAC7B,IAAA,IAAI,CAACA,MAAM,CAAC,CAAC,CAAC,CAACA,MAAM,CAAC,CAAA;AACxB,GAAA;EAEAe,KAAKA,CAAwBC,EAAK,EAAE;IAClC,IAAI,IAAI,CAACnB,SAAS,EAAE;AAClB,MAAA,MAAM,IAAIoB,KAAK,CAAC,6BAA6B,CAAC,CAAA;AAChD,KAAA;AACA,IAAA,MAAMC,OAAO,GAAGC,MAAM,CAAC,MAAM;AAC3B,MAAA,MAAM,CAACC,WAAW,CAAC,GAAG,IAAI,CAAChB,cAAc,CAAA;AACzC,MAAA,MAAM,CAACiB,GAAG,CAAC,GAAG,IAAI,CAAChB,QAAQ,CAAA;AAC3B,MAAA,MAAM,CAACO,MAAM,CAAC,GAAG,IAAI,CAACN,aAAa,CAAA;AACnC,MAAA,MAAM,CAACgB,MAAM,CAAC,GAAG,IAAI,CAACf,UAAU,CAAA;AAChC,MAAA,MAAM,CAACgB,WAAW,CAAC,GAAG,IAAI,CAACvB,MAAM,CAAA;AAEjC,MAAA,IAAIwB,QAAkC,CAAA;MAEtC,IAAI,IAAI,CAACC,SAAS,EAAE;QAClBD,QAAQ,GAAG,IAAI,CAACC,SAAS,CAAA;AAC3B,OAAC,MAAM;QACLD,QAAQ,GAAGE,IAAI,CAAC,MAAM,OAAO,wBAAY,CAAC,CAAC,CAAA;QAC3C,IAAI,CAACD,SAAS,GAAGD,QAAQ,CAAA;AAC3B,OAAA;AAAC,MAAA,MAAAG,MAAA,GAAA,IAAA,CAAA;AAED,MAAA,OAAAC,eAAA,CACGJ,QAAQ,EAAAK,UAAA,CAAA;AAAA,QAAA,IACP5B,WAAWA,GAAA;UAAA,OAAE0B,MAAA,CAAK1B,WAAW,CAAA;AAAA,SAAA;AAAA,QAAA,IAC7BC,OAAOA,GAAA;UAAA,OAAEyB,MAAA,CAAKzB,OAAO,CAAA;AAAA,SAAA;AAAA,QAAA,IACrBC,aAAaA,GAAA;UAAA,OAAEwB,MAAA,CAAKxB,aAAa,CAAA;AAAA,SAAA;OAC7B,EAAA;QACF,IAAIH,MAAMA,GAAG;UACX,OAAOuB,WAAW,EAAE,CAAA;SACrB;QACD,IAAInB,cAAcA,GAAG;UACnB,OAAOgB,WAAW,EAAE,CAAA;SACrB;QACD,IAAIf,QAAQA,GAAG;UACb,OAAOgB,GAAG,EAAE,CAAA;SACb;QACD,IAAIf,aAAaA,GAAG;UAClB,OAAOM,MAAM,EAAE,CAAA;SAChB;QACD,IAAIL,UAAUA,GAAG;UACf,OAAOe,MAAM,EAAE,CAAA;AACjB,SAAA;OACD,CAAA,CAAA,CAAA;KAGN,EAAEN,EAAE,CAAC,CAAA;IACN,IAAI,CAACnB,SAAS,GAAG,IAAI,CAAA;IACrB,IAAI,CAACqB,OAAO,GAAGA,OAAO,CAAA;AACxB,GAAA;AAEAY,EAAAA,OAAOA,GAAG;AACR,IAAA,IAAI,CAAC,IAAI,CAACjC,SAAS,EAAE;AACnB,MAAA,MAAM,IAAIoB,KAAK,CAAC,yBAAyB,CAAC,CAAA;AAC5C,KAAA;IACA,IAAI,CAACC,OAAO,IAAI,CAAA;IAChB,IAAI,CAACrB,SAAS,GAAG,KAAK,CAAA;AACxB,GAAA;AACF;;;;"}

package/{build → dist}/source/Devtools.jsx

@@ -307,6 +307,7 @@ export const DevtoolsPanel = (props) => {
             else {
                 onlineManager().setOnline(false);
                 setOffline(true);
+                window.dispatchEvent(new Event('offline'));
             }
         }} class={styles.actionsBtn} aria-label={`${offline()
             ? 'Unset offline mocking behavior'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.0.0-alpha.54",
+  "version": "5.0.0-alpha.56",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -11,25 +11,25 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "build/types/index.d.ts",
-  "main": "build/cjs/index.js",
-  "module": "build/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "types": "./build/types/index.d.ts",
-      "solid": "./build/source/index.jsx",
-      "import": "./build/esm/index.js",
+      "types": "./dist/types/index.d.ts",
+      "solid": "./dist/source/index.jsx",
+      "import": "./dist/esm/index.js",
       "browser": {
-        "import": "./build/esm/index.js",
-        "require": "./build/cjs/index.js"
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.cjs"
       },
-      "require": "./build/cjs/index.js",
-      "node": "./build/cjs/index.js"
+      "require": "./dist/cjs/index.cjs",
+      "node": "./dist/cjs/index.cjs"
     },
     "./package.json": "./package.json"
   },
   "files": [
-    "build",
+    "dist",
     "src"
   ],
   "dependencies": {
@@ -53,10 +53,8 @@
     "test:types": "tsc --noEmit",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "test:build": "publint",
-    "build": "pnpm build:rollup && pnpm rename-build-dir",
-    "rename-build-dir": "rimraf ./build && mv ./dist ./build",
-    "build:rollup": "rollup --config rollup.config.js",
-    "build:types": "tsc --emitDeclarationOnly"
+    "test:build": "publint --strict",
+    "build": "pnpm build:rollup",
+    "build:rollup": "rollup --config rollup.config.js"
   }
 }

package/src/Devtools.tsx

@@ -492,6 +492,7 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
                 } else {
                   onlineManager().setOnline(false)
                   setOffline(true)
+                  window.dispatchEvent(new Event('offline'))
                 }
               }}
               class={styles.actionsBtn}