@tanstack/preact-query-devtools 0.0.1 → 5.94.4

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/package.json

@@ -1,10 +1,95 @@
 {
   "name": "@tanstack/preact-query-devtools",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/preact-query-devtools",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+  "version": "5.94.4",
+  "description": "Developer tools to interact with and visualize the TanStack/preact-query cache",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/query.git",
+    "directory": "packages/preact-query-devtools"
+  },
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "build/legacy/index.d.ts",
+  "main": "build/legacy/index.cjs",
+  "module": "build/legacy/index.js",
+  "exports": {
+    ".": {
+      "@tanstack/custom-condition": "./src/index.ts",
+      "import": {
+        "types": "./build/modern/index.d.ts",
+        "default": "./build/modern/index.js"
+      },
+      "require": {
+        "types": "./build/modern/index.d.cts",
+        "default": "./build/modern/index.cjs"
+      }
+    },
+    "./production": {
+      "import": {
+        "types": "./build/modern/production.d.ts",
+        "default": "./build/modern/production.js"
+      },
+      "require": {
+        "types": "./build/modern/production.d.cts",
+        "default": "./build/modern/production.cjs"
+      }
+    },
+    "./build/modern/production.js": {
+      "import": {
+        "types": "./build/modern/production.d.ts",
+        "default": "./build/modern/production.js"
+      },
+      "require": {
+        "types": "./build/modern/production.d.cts",
+        "default": "./build/modern/production.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src",
+    "!src/__tests__"
+  ],
+  "dependencies": {
+    "@tanstack/query-devtools": "5.94.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "@testing-library/preact": "^3.2.4",
+    "eslint-config-preact": "^2.0.0",
+    "npm-run-all2": "^5.0.0",
+    "preact": "^10.28.0",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "@tanstack/preact-query": "5.94.4"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0",
+    "@tanstack/preact-query": "^5.94.4"
+  },
+  "scripts": {
+    "clean": "premove ./build ./coverage ./dist-ts",
+    "compile": "tsc --build",
+    "test:eslint": "eslint --concurrency=auto ./src",
+    "test:types": "npm-run-all --serial test:types:*",
+    "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --build tsconfig.legacy.json",
+    "test:types:tscurrent": "tsc --build",
+    "test:types:ts60": "node ../../node_modules/typescript60/lib/tsc.js --build tsconfig.legacy.json",
+    "test:build": "publint --strict && attw --pack",
+    "build": "tsup --tsconfig tsconfig.prod.json",
+    "build:dev": "tsup --watch"
+  }
+}

package/src/PreactQueryDevtools.tsx

@@ -0,0 +1,127 @@
+import { useRef, useState, useEffect } from 'preact/hooks'
+import { onlineManager, useQueryClient } from '@tanstack/preact-query'
+import { TanstackQueryDevtools } from '@tanstack/query-devtools'
+import type {
+  DevtoolsButtonPosition,
+  DevtoolsErrorType,
+  DevtoolsPosition,
+  Theme,
+} from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/preact-query'
+import type { VNode } from 'preact'
+
+export interface DevtoolsOptions {
+  /**
+   * Set this true if you want the dev tools to default to being open
+   */
+  initialIsOpen?: boolean
+  /**
+   * The position of the TanStack logo to open and close the devtools panel.
+   * Defaults to 'bottom-right'.
+   */
+  buttonPosition?: DevtoolsButtonPosition
+  /**
+   * The position of the Preact Query devtools panel.
+   * Defaults to 'bottom'.
+   */
+  position?: DevtoolsPosition
+  /**
+   * Use this to provide a custom QueryClient. Otherwise, the one from the
+   * nearest QueryClientProvider will be used.
+   */
+  client?: QueryClient
+  /**
+   * Use this to provide custom error type handlers for the devtools panel.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document
+   * head. This is useful if you are using a Content Security Policy (CSP)
+   * nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this to render the devtools inside a Shadow DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+  /**
+   * Use this to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Use this to set the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export function PreactQueryDevtools(props: DevtoolsOptions): VNode | null {
+  const queryClient = useQueryClient(props.client)
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
+  const [devtools] = useState(
+    () =>
+      new TanstackQueryDevtools({
+        client: queryClient,
+        queryFlavor: 'Preact Query',
+        version: '5',
+        onlineManager,
+        buttonPosition,
+        position,
+        initialIsOpen,
+        errorTypes,
+        styleNonce,
+        shadowDOMTarget,
+        hideDisabledQueries,
+        theme,
+      }),
+  )
+
+  useEffect(() => {
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
+
+  useEffect(() => {
+    if (buttonPosition) {
+      devtools.setButtonPosition(buttonPosition)
+    }
+  }, [buttonPosition, devtools])
+
+  useEffect(() => {
+    if (position) {
+      devtools.setPosition(position)
+    }
+  }, [position, devtools])
+
+  useEffect(() => {
+    devtools.setInitialIsOpen(initialIsOpen || false)
+  }, [initialIsOpen, devtools])
+
+  useEffect(() => {
+    devtools.setErrorTypes(errorTypes || [])
+  }, [errorTypes, devtools])
+
+  useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current)
+    }
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return <div dir="ltr" className="tsqd-parent-container" ref={ref} />
+}

package/src/PreactQueryDevtoolsPanel.tsx

@@ -0,0 +1,110 @@
+import { useRef, useState, useEffect } from 'preact/hooks'
+import { onlineManager, useQueryClient } from '@tanstack/preact-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/preact-query'
+import type { JSX, VNode } from 'preact'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Use this to provide a custom QueryClient. Otherwise, the one from the
+   * nearest QueryClientProvider will be used.
+   */
+  client?: QueryClient
+  /**
+   * Custom error types to be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document
+   * head. This is useful if you are using a Content Security Policy (CSP)
+   * nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this to render the devtools inside a Shadow DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+  /**
+   * Custom styles for the devtools panel container.
+   */
+  style?: JSX.CSSProperties
+  /**
+   * Callback function when the devtools panel is closed.
+   */
+  onClose?: () => unknown
+  /**
+   * Use this to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Use this to set the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export function PreactQueryDevtoolsPanel(
+  props: DevtoolsPanelOptions,
+): VNode | null {
+  const queryClient = useQueryClient(props.client)
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
+  const [devtools] = useState(
+    () =>
+      new TanstackQueryDevtoolsPanel({
+        client: queryClient,
+        queryFlavor: 'Preact Query',
+        version: '5',
+        onlineManager,
+        buttonPosition: 'bottom-left',
+        position: 'bottom',
+        initialIsOpen: true,
+        errorTypes,
+        styleNonce,
+        shadowDOMTarget,
+        onClose: props.onClose,
+        hideDisabledQueries,
+        theme,
+      }),
+  )
+
+  useEffect(() => {
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
+
+  useEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  }, [props.onClose, devtools])
+
+  useEffect(() => {
+    devtools.setErrorTypes(errorTypes || [])
+  }, [errorTypes, devtools])
+
+  useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current)
+    }
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      className="tsqd-parent-container"
+      ref={ref}
+    />
+  )
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+import * as Devtools from './PreactQueryDevtools'
+import * as DevtoolsPanel from './PreactQueryDevtoolsPanel'
+
+export const PreactQueryDevtools: (typeof Devtools)['PreactQueryDevtools'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : Devtools.PreactQueryDevtools
+
+export const PreactQueryDevtoolsPanel: (typeof DevtoolsPanel)['PreactQueryDevtoolsPanel'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : DevtoolsPanel.PreactQueryDevtoolsPanel
+
+export type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions

package/src/production.ts

@@ -0,0 +1,5 @@
+import * as Devtools from './PreactQueryDevtools'
+import * as DevtoolsPanel from './PreactQueryDevtoolsPanel'
+
+export const PreactQueryDevtools = Devtools.PreactQueryDevtools
+export const PreactQueryDevtoolsPanel = DevtoolsPanel.PreactQueryDevtoolsPanel

package/README.md

@@ -1,45 +0,0 @@
-# @tanstack/preact-query-devtools
-
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/preact-query-devtools`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**