Skip to content

Commit 3d9bd38

Browse files
JoviDeCroockJoviDeCroock
committed
Add preact devtools
1 parent 29466c1 commit 3d9bd38

File tree

13 files changed

+470
-0
lines changed

13 files changed

+470
-0
lines changed

‎.changeset/slow-falcons-leave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/preact-ai-devtools': minor
3+
---
4+
5+
Initial release

‎docs/getting-started/devtools.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ Or the `@tanstack/solid-ai-devtools` package for SolidJS:
2424
npm install -D @tanstack/solid-ai-devtools @tanstack/solid-devtools
2525
```
2626

27+
Or the `@tanstack/preact-ai-devtools` package for Preact:
28+
```bash
29+
npm install -D @tanstack/preact-ai-devtools @tanstack/preact-devtools
30+
```
31+
2732
## Usage
2833

2934
Import and include the Devtools component in your application:

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# @tanstack/preact-ai-devtools

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<div align="center">
2+
<img src="./media/header_ai.png" >
3+
</div>
4+
5+
<br />
6+
7+
<div align="center">
8+
<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
9+
<img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
10+
</a>
11+
<a href="https://github.com/TanStack/ai" target="\_parent">
12+
<img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
13+
</a>
14+
<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
15+
<img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
16+
</a>
17+
</div>
18+
19+
<div align="center">
20+
<a href="#badge">
21+
<img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
22+
</a>
23+
<a href="#badge">
24+
<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
25+
</a>
26+
<a href="https://twitter.com/tan_stack">
27+
<img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
28+
</a>
29+
</div>
30+
31+
<div align="center">
32+
33+
### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
34+
</div>
35+
36+
# TanStack Preact AI Devtools
37+
38+
Developer tools for TanStack AI in Preact applications.
39+
40+
## Installation
41+
42+
```bash
43+
npm install @tanstack/preact-ai-devtools
44+
# or
45+
pnpm add @tanstack/preact-ai-devtools
46+
# or
47+
yarn add @tanstack/preact-ai-devtools
48+
```
49+
50+
## Usage
51+
52+
### Using the Panel Component
53+
54+
Add the `AiDevtoolsPanel` component to your app:
55+
56+
```tsx
57+
import { AiDevtoolsPanel } from '@tanstack/preact-ai-devtools'
58+
59+
function App() {
60+
return (
61+
<>
62+
<YourApp />
63+
<AiDevtoolsPanel />
64+
</>
65+
)
66+
}
67+
```
68+
69+
### Using the Plugin
70+
71+
You can also use the devtools as a plugin:
72+
73+
```tsx
74+
import { aiDevtoolsPlugin } from '@tanstack/preact-ai-devtools'
75+
import { useAIProvider } from '@tanstack/ai-preact'
76+
77+
function App() {
78+
const ai = useAIProvider({
79+
// your config
80+
plugins: [aiDevtoolsPlugin()],
81+
})
82+
83+
return <YourApp />
84+
}
85+
```
86+
87+
## Production Builds
88+
89+
For production builds, import from the production entry point to exclude devtools code:
90+
91+
```tsx
92+
import { AiDevtoolsPanel } from '@tanstack/preact-ai-devtools/production'
93+
```
94+
95+
The devtools will automatically be disabled in production environments when using the main entry point.
96+
97+
## Get Involved
98+
99+
- [Join the Discord](https://tlinz.com/discord)
100+
- [Read the docs](https://tanstack.com/ai)
101+
- [Report an issue](https://github.com/TanStack/ai/issues)

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"name": "@tanstack/preact-ai-devtools",
3+
"version": "0.0.0",
4+
"description": "Preact Devtools for TanStack AI.",
5+
"author": "tannerlinsley",
6+
"license": "MIT",
7+
"homepage": "https://tanstack.com/ai",
8+
"repository": {
9+
"type": "git",
10+
"url": "git+https://github.com/TanStack/ai.git",
11+
"directory": "packages/typescript/ai"
12+
},
13+
"funding": {
14+
"type": "github",
15+
"url": "https://github.com/sponsors/tannerlinsley"
16+
},
17+
"scripts": {
18+
"clean": "premove ./build ./dist",
19+
"lint:fix": "eslint ./src --fix",
20+
"test:eslint": "eslint ./src",
21+
"test:lib": "vitest --passWithNoTests",
22+
"test:lib:dev": "pnpm test:lib --watch",
23+
"test:types": "tsc",
24+
"test:build": "publint --strict",
25+
"build": "vite build"
26+
},
27+
"type": "module",
28+
"types": "./dist/esm/index.d.ts",
29+
"module": "./dist/esm/index.js",
30+
"exports": {
31+
".": {
32+
"import": {
33+
"types": "./dist/esm/index.d.ts",
34+
"default": "./dist/esm/index.js"
35+
}
36+
},
37+
"./production": {
38+
"import": {
39+
"types": "./dist/esm/production.d.ts",
40+
"default": "./dist/esm/production.js"
41+
}
42+
},
43+
"./package.json": "./package.json"
44+
},
45+
"sideEffects": false,
46+
"files": [
47+
"dist",
48+
"src"
49+
],
50+
"dependencies": {
51+
"@tanstack/ai-devtools-core": "workspace:*",
52+
"@tanstack/devtools-utils": "^0.2.0"
53+
},
54+
"devDependencies": {
55+
"@vitest/coverage-v8": "4.0.14",
56+
"vite": "^7.2.7",
57+
"@preact/preset-vite": "^2.9.3"
58+
},
59+
"peerDependencies": {
60+
"preact": "^10.0.0"
61+
}
62+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createPreactPanel } from '@tanstack/devtools-utils/preact'
2+
import { AiDevtoolsCore } from '@tanstack/ai-devtools-core'
3+
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
4+
5+
const [AiDevtoolsPanel, AiDevtoolsPanelNoOp] = createPreactPanel(AiDevtoolsCore)
6+
7+
export interface AiDevtoolsPreactInit extends DevtoolsPanelProps {}
8+
9+
export { AiDevtoolsPanel, AiDevtoolsPanelNoOp }

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as Devtools from './AiDevtools'
2+
import * as plugin from './plugin'
3+
4+
export const AiDevtoolsPanel =
5+
process.env.NODE_ENV !== 'development'
6+
? Devtools.AiDevtoolsPanelNoOp
7+
: Devtools.AiDevtoolsPanel
8+
9+
export const aiDevtoolsPlugin =
10+
process.env.NODE_ENV !== 'development'
11+
? plugin.aiDevtoolsNoOpPlugin
12+
: plugin.aiDevtoolsPlugin
13+
14+
export type { AiDevtoolsPreactInit } from './AiDevtools'

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { createPreactPlugin } from '@tanstack/devtools-utils/preact'
2+
import { AiDevtoolsPanel } from './AiDevtools'
3+
4+
const [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({
5+
Component: AiDevtoolsPanel,
6+
name: 'TanStack AI',
7+
id: 'tanstack-ai',
8+
defaultOpen: true,
9+
})
10+
11+
export { aiDevtoolsPlugin, aiDevtoolsNoOpPlugin }

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export { AiDevtoolsPanel } from './AiDevtools'
2+
3+
export type { AiDevtoolsPreactInit } from './AiDevtools'
4+
5+
export { aiDevtoolsPlugin } from './plugin'

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": "../../../tsconfig.json",
3+
"compilerOptions": {
4+
"jsx": "preserve",
5+
"jsxFactory": "h",
6+
"jsxFragmentFactory": "Fragment",
7+
"moduleResolution": "bundler",
8+
"strictNullChecks": true
9+
},
10+
"include": ["eslint.config.js", "prettier.config.js", "src"]
11+
}

0 commit comments

Comments
 (0)