Add preact devtools

.changeset/slow-falcons-leave.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/preact-ai-devtools': minor
+---
+
+Initial release

docs/getting-started/devtools.md

@@ -24,6 +24,11 @@ Or the `@tanstack/solid-ai-devtools` package for SolidJS:
 npm install -D @tanstack/solid-ai-devtools @tanstack/solid-devtools
 ```
 
+Or the `@tanstack/preact-ai-devtools` package for Preact:
+```bash
+npm install -D @tanstack/preact-ai-devtools @tanstack/preact-devtools
+```
+
 ## Usage
 
 Import and include the Devtools component in your application:

packages/typescript/preact-ai-devtools/CHANGELOG.md

@@ -0,0 +1 @@
+# @tanstack/preact-ai-devtools

packages/typescript/preact-ai-devtools/README.md

@@ -0,0 +1,101 @@
+<div align="center">
+  <img src="./media/header_ai.png" >
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
+</a>
+<a href="https://github.com/TanStack/ai" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+	<a href="#badge">
+		<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
+	</a>
+<a href="https://twitter.com/tan_stack">
+  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+</a>
+</div>
+
+<div align="center">
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+</div>
+
+# TanStack Preact AI Devtools
+
+Developer tools for TanStack AI in Preact applications.
+
+## Installation
+
+```bash
+npm install @tanstack/preact-ai-devtools
+# or
+pnpm add @tanstack/preact-ai-devtools
+# or
+yarn add @tanstack/preact-ai-devtools
+```
+
+## Usage
+
+### Using the Panel Component
+
+Add the `AiDevtoolsPanel` component to your app:
+
+```tsx
+import { AiDevtoolsPanel } from '@tanstack/preact-ai-devtools'
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <AiDevtoolsPanel />
+    </>
+  )
+}
+```
+
+### Using the Plugin
+
+You can also use the devtools as a plugin:
+
+```tsx
+import { aiDevtoolsPlugin } from '@tanstack/preact-ai-devtools'
+import { useAIProvider } from '@tanstack/ai-preact'
+
+function App() {
+  const ai = useAIProvider({
+    // your config
+    plugins: [aiDevtoolsPlugin()],
+  })
+
+  return <YourApp />
+}
+```
+
+## Production Builds
+
+For production builds, import from the production entry point to exclude devtools code:
+
+```tsx
+import { AiDevtoolsPanel } from '@tanstack/preact-ai-devtools/production'
+```
+
+The devtools will automatically be disabled in production environments when using the main entry point.
+
+## Get Involved
+
+- [Join the Discord](https://tlinz.com/discord)
+- [Read the docs](https://tanstack.com/ai)
+- [Report an issue](https://github.com/TanStack/ai/issues)

packages/typescript/preact-ai-devtools/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@tanstack/preact-ai-devtools",
+  "version": "0.0.0",
+  "description": "Preact Devtools for TanStack AI.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "homepage": "https://tanstack.com/ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/ai.git",
+    "directory": "packages/typescript/ai"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "type": "module",
+  "types": "./dist/esm/index.d.ts",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./production": {
+      "import": {
+        "types": "./dist/esm/production.d.ts",
+        "default": "./dist/esm/production.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/ai-devtools-core": "workspace:*",
+    "@tanstack/devtools-utils": "^0.2.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "4.0.14",
+    "vite": "^7.2.7",
+    "@preact/preset-vite": "^2.9.3"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  }
+}

packages/typescript/preact-ai-devtools/src/AiDevtools.tsx

@@ -0,0 +1,9 @@
+import { createPreactPanel } from '@tanstack/devtools-utils/preact'
+import { AiDevtoolsCore } from '@tanstack/ai-devtools-core'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
+
+const [AiDevtoolsPanel, AiDevtoolsPanelNoOp] = createPreactPanel(AiDevtoolsCore)
+
+export interface AiDevtoolsPreactInit extends DevtoolsPanelProps {}
+
+export { AiDevtoolsPanel, AiDevtoolsPanelNoOp }

packages/typescript/preact-ai-devtools/src/index.ts

@@ -0,0 +1,14 @@
+import * as Devtools from './AiDevtools'
+import * as plugin from './plugin'
+
+export const AiDevtoolsPanel =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.AiDevtoolsPanelNoOp
+    : Devtools.AiDevtoolsPanel
+
+export const aiDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.aiDevtoolsNoOpPlugin
+    : plugin.aiDevtoolsPlugin
+
+export type { AiDevtoolsPreactInit } from './AiDevtools'

packages/typescript/preact-ai-devtools/src/plugin.tsx

@@ -0,0 +1,11 @@
+import { createPreactPlugin } from '@tanstack/devtools-utils/preact'
+import { AiDevtoolsPanel } from './AiDevtools'
+
+const [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({
+  Component: AiDevtoolsPanel,
+  name: 'TanStack AI',
+  id: 'tanstack-ai',
+  defaultOpen: true,
+})
+
+export { aiDevtoolsPlugin, aiDevtoolsNoOpPlugin }

packages/typescript/preact-ai-devtools/src/production.ts

@@ -0,0 +1,5 @@
+export { AiDevtoolsPanel } from './AiDevtools'
+
+export type { AiDevtoolsPreactInit } from './AiDevtools'
+
+export { aiDevtoolsPlugin } from './plugin'

packages/typescript/preact-ai-devtools/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "moduleResolution": "bundler",
+    "strictNullChecks": true
+  },
+  "include": ["eslint.config.js", "prettier.config.js", "src"]
+}

packages/typescript/preact-ai-devtools/vite.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/vite-config'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        'tests/',
+        '**/*.test.ts',
+        '**/*.config.ts',
+        '**/types.ts',
+      ],
+      include: ['src/**/*.ts'],
+    },
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: ['./src/index.ts', './src/production.ts'],
+    srcDir: './src',
+    cjs: false,
+  }),
+)

packages/typescript/preact-ai-devtools/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    watch: false,
+  },
+})