@tanstack/solid-query-devtools 5.0.0-rc.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/chunk/NZRUORJU.jsx

@@ -0,0 +1,78 @@
+// src/devtools.tsx
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack
+} from "solid-js";
+import { onlineManager, useQueryClient } from "@tanstack/solid-query";
+import { isServer } from "solid-js/web";
+import { TanstackQueryDevtools } from "@tanstack/query-devtools";
+function SolidQueryDevtools(props) {
+  const queryClient = useQueryClient();
+  const client = createMemo(() => props.client || queryClient);
+  let ref;
+  const devtools = new TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  onMount(() => {
+    devtools.mount(ref);
+    onCleanup(() => devtools.unmount());
+  });
+  return <div class="tsqd-parent-container" ref={ref} />;
+}
+function clientOnly(fn) {
+  if (isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context)
+      return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(
+      () => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback))
+    );
+  };
+}
+
+export {
+  SolidQueryDevtools,
+  clientOnly
+};

package/build/chunk/PEJHNLUR.js

@@ -0,0 +1,71 @@
+import { use, isServer, template } from 'solid-js/web';
+import { createMemo, createEffect, onMount, onCleanup, createSignal, splitProps, sharedConfig, untrack } from 'solid-js';
+import { useQueryClient, onlineManager } from '@tanstack/solid-query';
+import { TanstackQueryDevtools } from '@tanstack/query-devtools';
+
+// src/devtools.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div class="tsqd-parent-container">`);
+function SolidQueryDevtools(props) {
+  const queryClient = useQueryClient();
+  const client = createMemo(() => props.client || queryClient);
+  let ref;
+  const devtools = new TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  onMount(() => {
+    devtools.mount(ref);
+    onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    const _el$ = _tmpl$();
+    const _ref$ = ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+    return _el$;
+  })();
+}
+function clientOnly(fn) {
+  if (isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context)
+      return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+
+export { SolidQueryDevtools, clientOnly };

package/build/dev.cjs

@@ -0,0 +1,97 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidQuery = require('@tanstack/solid-query');
+var queryDevtools = require('@tanstack/query-devtools');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/devtools.tsx
+var devtools_exports = {};
+__export(devtools_exports, {
+  clientOnly: () => clientOnly,
+  default: () => SolidQueryDevtools
+});
+function SolidQueryDevtools(props) {
+  const queryClient = solidQuery.useQueryClient();
+  const client = solidJs.createMemo(() => props.client || queryClient);
+  let ref;
+  const devtools = new queryDevtools.TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager: solidQuery.onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  solidJs.createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  solidJs.createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  solidJs.onMount(() => {
+    devtools.mount(ref);
+    solidJs.onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    const _el$ = _tmpl$();
+    const _ref$ = ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : ref = _el$;
+    return _el$;
+  })();
+}
+function clientOnly(fn) {
+  if (web.isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = solidJs.createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = solidJs.splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !solidJs.sharedConfig.context)
+      return Comp(rest);
+    const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.context);
+    solidJs.onMount(() => setMounted(true));
+    return solidJs.createMemo(() => (Comp = comp(), m = mounted(), solidJs.untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+var _tmpl$;
+var init_devtools = __esm({
+  "src/devtools.tsx"() {
+    _tmpl$ = /* @__PURE__ */ web.template(`<div class="tsqd-parent-container">`);
+  }
+});
+
+// src/index.tsx
+init_devtools();
+exports.SolidQueryDevtools = web.isDev ? clientOnly(() => Promise.resolve().then(() => (init_devtools(), devtools_exports))) : function() {
+  return null;
+};

package/build/dev.js

@@ -0,0 +1,8 @@
+import { clientOnly } from './chunk/PEJHNLUR.js';
+import { isDev } from 'solid-js/web';
+
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/AEMLXMNO.js')) : function() {
+  return null;
+};
+
+export { SolidQueryDevtools };

package/build/dev.jsx

@@ -0,0 +1,12 @@
+import {
+  clientOnly
+} from "./chunk/NZRUORJU.jsx";
+
+// src/index.tsx
+import { isDev } from "solid-js/web";
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/3S5YMJYB.jsx")) : function() {
+  return null;
+};
+export {
+  SolidQueryDevtools
+};

package/build/devtools/3S5YMJYB.jsx

@@ -0,0 +1,8 @@
+import {
+  SolidQueryDevtools,
+  clientOnly
+} from "../chunk/NZRUORJU.jsx";
+export {
+  clientOnly,
+  SolidQueryDevtools as default
+};

package/build/devtools/AEMLXMNO.js

@@ -0,0 +1 @@
+export { clientOnly, SolidQueryDevtools as default } from '../chunk/PEJHNLUR.js';

package/build/index.cjs

@@ -0,0 +1,97 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidQuery = require('@tanstack/solid-query');
+var queryDevtools = require('@tanstack/query-devtools');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/devtools.tsx
+var devtools_exports = {};
+__export(devtools_exports, {
+  clientOnly: () => clientOnly,
+  default: () => SolidQueryDevtools
+});
+function SolidQueryDevtools(props) {
+  const queryClient = solidQuery.useQueryClient();
+  const client = solidJs.createMemo(() => props.client || queryClient);
+  let ref;
+  const devtools = new queryDevtools.TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager: solidQuery.onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  solidJs.createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  solidJs.createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  solidJs.onMount(() => {
+    devtools.mount(ref);
+    solidJs.onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    const _el$ = _tmpl$();
+    const _ref$ = ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : ref = _el$;
+    return _el$;
+  })();
+}
+function clientOnly(fn) {
+  if (web.isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = solidJs.createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = solidJs.splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !solidJs.sharedConfig.context)
+      return Comp(rest);
+    const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.context);
+    solidJs.onMount(() => setMounted(true));
+    return solidJs.createMemo(() => (Comp = comp(), m = mounted(), solidJs.untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+var _tmpl$;
+var init_devtools = __esm({
+  "src/devtools.tsx"() {
+    _tmpl$ = /* @__PURE__ */ web.template(`<div class="tsqd-parent-container">`);
+  }
+});
+
+// src/index.tsx
+init_devtools();
+exports.SolidQueryDevtools = web.isDev ? clientOnly(() => Promise.resolve().then(() => (init_devtools(), devtools_exports))) : function() {
+  return null;
+};

package/build/index.d.cts

@@ -0,0 +1,35 @@
+import { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/solid-query';
+import { JSX } from 'solid-js';
+
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-left'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevToolsErrorType>;
+}
+declare function SolidQueryDevtools$1(props: DevtoolsOptions): JSX.Element;
+
+declare const SolidQueryDevtools: typeof SolidQueryDevtools$1;
+
+export { SolidQueryDevtools };

package/build/index.d.ts

@@ -0,0 +1,35 @@
+import { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/solid-query';
+import { JSX } from 'solid-js';
+
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-left'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevToolsErrorType>;
+}
+declare function SolidQueryDevtools$1(props: DevtoolsOptions): JSX.Element;
+
+declare const SolidQueryDevtools: typeof SolidQueryDevtools$1;
+
+export { SolidQueryDevtools };

package/build/index.js

@@ -0,0 +1,8 @@
+import { clientOnly } from './chunk/PEJHNLUR.js';
+import { isDev } from 'solid-js/web';
+
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/AEMLXMNO.js')) : function() {
+  return null;
+};
+
+export { SolidQueryDevtools };

package/build/index.jsx

@@ -0,0 +1,12 @@
+import {
+  clientOnly
+} from "./chunk/NZRUORJU.jsx";
+
+// src/index.tsx
+import { isDev } from "solid-js/web";
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/3S5YMJYB.jsx")) : function() {
+  return null;
+};
+export {
+  SolidQueryDevtools
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@tanstack/solid-query-devtools",
+  "version": "5.0.0-rc.9",
+  "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "browser": {},
+  "exports": {
+    "solid": {
+      "development": "./build/dev.jsx",
+      "import": "./build/index.jsx"
+    },
+    "development": {
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/dev.js"
+      },
+      "require": "./build/dev.cjs"
+    },
+    "import": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "require": "./build/index.cjs"
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/query-devtools": "5.0.0-rc.9"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.7.8",
+    "@tanstack/solid-query": "^5.0.0-rc.8"
+  },
+  "devDependencies": {
+    "solid-js": "^1.7.8",
+    "tsup-preset-solid": "^2.0.1",
+    "vite-plugin-solid": "^2.7.0",
+    "@tanstack/solid-query": "^5.0.0-rc.8"
+  },
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "tsup",
+    "build:dev": "tsup --watch"
+  }
+}

package/src/devtools.tsx

@@ -0,0 +1,129 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack,
+} from 'solid-js'
+import { onlineManager, useQueryClient } from '@tanstack/solid-query'
+import { isServer } from 'solid-js/web'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type {
+  DevToolsErrorType,
+  DevtoolsButtonPosition,
+  DevtoolsPosition,
+} from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/solid-query'
+import type { Component, ComponentProps, JSX } from 'solid-js'
+
+export interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * The position of the React Query logo to open and close the devtools panel.
+   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+   * Defaults to 'bottom-left'.
+   */
+  buttonPosition?: DevtoolsButtonPosition
+  /**
+   * The position of the React Query devtools panel.
+   * 'top' | 'bottom' | 'left' | 'right'
+   * Defaults to 'bottom'.
+   */
+  position?: DevtoolsPosition
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevToolsErrorType>
+}
+
+export default function SolidQueryDevtools(props: DevtoolsOptions) {
+  const queryClient = useQueryClient()
+  const client = createMemo(() => props.client || queryClient)
+  let ref!: HTMLDivElement
+  const devtools = new TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: 'Solid Query',
+    version: '5',
+    onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes,
+  })
+
+  createEffect(() => {
+    devtools.setClient(client())
+  })
+
+  createEffect(() => {
+    const buttonPos = props.buttonPosition
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos)
+    }
+  })
+
+  createEffect(() => {
+    const pos = props.position
+    if (pos) {
+      devtools.setPosition(pos)
+    }
+  })
+
+  createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false)
+  })
+
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || [])
+  })
+
+  onMount(() => {
+    devtools.mount(ref)
+    onCleanup(() => devtools.unmount())
+  })
+
+  return <div class="tsqd-parent-container" ref={ref}></div>
+}
+
+/* 
+  This function has been taken from solid-start's codebase
+  This allows the devtools to be loaded only on the client and bypasses any server side rendering
+  https://github.com/solidjs/solid-start/blob/2967fc2db3f0df826f061020231dbdafdfa0746b/packages/start/islands/clientOnly.tsx
+*/
+export function clientOnly<T extends Component<any>>(
+  fn: () => Promise<{
+    default: T
+  }>,
+) {
+  if (isServer)
+    return (props: ComponentProps<T> & { fallback?: JSX.Element }) =>
+      props.fallback
+
+  const [comp, setComp] = createSignal<T>()
+  fn().then((m) => setComp(() => m.default))
+  return (props: ComponentProps<T>) => {
+    let Comp: T | undefined
+    let m: boolean
+    const [, rest] = splitProps(props, ['fallback'])
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)
+    const [mounted, setMounted] = createSignal(!sharedConfig.context)
+    onMount(() => setMounted(true))
+    return createMemo(
+      () => (
+        (Comp = comp()),
+        (m = mounted()),
+        untrack(() => (Comp && m ? Comp(rest) : props.fallback))
+      ),
+    )
+  }
+}

package/src/index.tsx

@@ -0,0 +1,9 @@
+import { isDev } from 'solid-js/web'
+import { clientOnly } from './devtools'
+import type SolidQueryDevtoolsComp from './devtools'
+
+export const SolidQueryDevtools: typeof SolidQueryDevtoolsComp = isDev
+  ? clientOnly(() => import('./devtools'))
+  : function () {
+      return null
+    }