Skip to content

Commit 9279aa7

Browse files
autofix-ci[bot]autofix-ci[bot]
authored
ci: apply automated fixes
1 parent 87af6d8 commit 9279aa7

File tree

17 files changed

+761
-547
lines changed

17 files changed

+761
-547
lines changed

‎_artifacts/skill_spec.md‎

Lines changed: 106 additions & 105 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,100 @@
11
{
2-
"name": "root",
3-
"private": true,
4-
"repository": {
5-
"type": "git",
6-
"url": "git+https://github.com/TanStack/devtools.git"
7-
},
8-
"packageManager": "pnpm@10.24.0",
9-
"type": "module",
10-
"scripts": {
11-
"build": "nx affected --targets=build --exclude=examples/** && size-limit",
12-
"build:all": "nx run-many --targets=build --exclude=examples/** && size-limit",
13-
"build:core": "nx build @tanstack/devtools && size-limit",
14-
"changeset": "changeset",
15-
"changeset:publish": "changeset publish",
16-
"changeset:version": "changeset version && pnpm install --no-frozen-lockfile && pnpm format",
17-
"clean": "find . -name 'dist' -type d -prune -exec rm -rf {} +",
18-
"clean:node_modules": "find . -name 'node_modules' -type d -prune -exec rm -rf {} +",
19-
"clean:all": "pnpm run clean && pnpm run clean:node_modules",
20-
"dev": "pnpm run watch",
21-
"format": "prettier --experimental-cli --ignore-unknown '**/*' --write",
22-
"generate-docs": "node scripts/generate-docs.ts",
23-
"lint:fix": "nx affected --target=lint:fix --exclude=examples/**",
24-
"lint:fix:all": "pnpm run format && nx run-many --targets=lint --fix",
25-
"preinstall": "node -e \"if(process.env.CI == 'true') {console.log('Skipping preinstall...'); process.exit(1)}\" || npx -y only-allow pnpm",
26-
"size": "size-limit",
27-
"test": "pnpm run test:ci",
28-
"test:build": "nx affected --target=test:build --exclude=examples/**",
29-
"test:ci": "nx run-many --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build",
30-
"test:docs": "node scripts/verify-links.ts",
31-
"test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
32-
"test:knip": "knip",
33-
"test:lib": "nx affected --targets=test:lib --exclude=examples/**",
34-
"test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
35-
"test:pr": "nx affected --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build",
36-
"test:sherif": "sherif",
37-
"test:types": "nx affected --targets=test:types --exclude=examples/**",
38-
"watch": "pnpm run build:all && nx watch --all -- pnpm run build:all"
39-
},
40-
"nx": {
41-
"includedScripts": [
42-
"test:docs",
43-
"test:knip",
44-
"test:sherif"
45-
]
46-
},
47-
"size-limit": [
48-
{
49-
"path": "packages/devtools/dist/index.js",
50-
"limit": "60 KB"
51-
},
52-
{
53-
"path": "packages/event-bus-client/dist/esm/plugin.js",
54-
"limit": "1.2 KB"
55-
}
56-
],
57-
"devDependencies": {
58-
"@changesets/cli": "^2.29.7",
59-
"@faker-js/faker": "^9.9.0",
60-
"@size-limit/preset-small-lib": "^11.2.0",
61-
"@svitejs/changesets-changelog-github-compact": "^1.2.0",
62-
"@tanstack/eslint-config": "0.3.2",
63-
"@tanstack/intent": "^0.0.14",
64-
"@tanstack/typedoc-config": "0.2.1",
65-
"@tanstack/vite-config": "0.2.1",
66-
"@testing-library/jest-dom": "^6.8.0",
67-
"@types/node": "^22.15.2",
68-
"eslint": "^9.36.0",
69-
"eslint-plugin-unused-imports": "^4.2.0",
70-
"jsdom": "^27.0.0",
71-
"knip": "^5.64.0",
72-
"markdown-link-extractor": "^4.0.2",
73-
"nx": "22.1.3",
74-
"premove": "^4.0.0",
75-
"prettier": "^3.8.1",
76-
"prettier-plugin-svelte": "^3.4.1",
77-
"publint": "^0.3.13",
78-
"sherif": "^1.7.0",
79-
"size-limit": "^11.2.0",
80-
"tinyglobby": "^0.2.15",
81-
"typescript": "~5.9.2",
82-
"vite": "^7.1.7",
83-
"vitest": "^3.2.4"
84-
},
85-
"overrides": {
86-
"@tanstack/devtools": "workspace:*",
87-
"@tanstack/react-devtools": "workspace:*",
88-
"@tanstack/preact-devtools": "workspace:*",
89-
"@tanstack/solid-devtools": "workspace:*",
90-
"@tanstack/devtools-vite": "workspace:*"
91-
},
92-
"files": [
93-
"skills",
94-
"bin",
95-
"!skills/_artifacts"
96-
],
97-
"bin": {
98-
"intent": "./bin/intent.js"
99-
}
2+
"name": "root",
3+
"private": true,
4+
"repository": {
5+
"type": "git",
6+
"url": "git+https://github.com/TanStack/devtools.git"
7+
},
8+
"packageManager": "pnpm@10.24.0",
9+
"type": "module",
10+
"scripts": {
11+
"build": "nx affected --targets=build --exclude=examples/** && size-limit",
12+
"build:all": "nx run-many --targets=build --exclude=examples/** && size-limit",
13+
"build:core": "nx build @tanstack/devtools && size-limit",
14+
"changeset": "changeset",
15+
"changeset:publish": "changeset publish",
16+
"changeset:version": "changeset version && pnpm install --no-frozen-lockfile && pnpm format",
17+
"clean": "find . -name 'dist' -type d -prune -exec rm -rf {} +",
18+
"clean:node_modules": "find . -name 'node_modules' -type d -prune -exec rm -rf {} +",
19+
"clean:all": "pnpm run clean && pnpm run clean:node_modules",
20+
"dev": "pnpm run watch",
21+
"format": "prettier --experimental-cli --ignore-unknown '**/*' --write",
22+
"generate-docs": "node scripts/generate-docs.ts",
23+
"lint:fix": "nx affected --target=lint:fix --exclude=examples/**",
24+
"lint:fix:all": "pnpm run format && nx run-many --targets=lint --fix",
25+
"preinstall": "node -e \"if(process.env.CI == 'true') {console.log('Skipping preinstall...'); process.exit(1)}\" || npx -y only-allow pnpm",
26+
"size": "size-limit",
27+
"test": "pnpm run test:ci",
28+
"test:build": "nx affected --target=test:build --exclude=examples/**",
29+
"test:ci": "nx run-many --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build",
30+
"test:docs": "node scripts/verify-links.ts",
31+
"test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
32+
"test:knip": "knip",
33+
"test:lib": "nx affected --targets=test:lib --exclude=examples/**",
34+
"test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
35+
"test:pr": "nx affected --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build",
36+
"test:sherif": "sherif",
37+
"test:types": "nx affected --targets=test:types --exclude=examples/**",
38+
"watch": "pnpm run build:all && nx watch --all -- pnpm run build:all"
39+
},
40+
"nx": {
41+
"includedScripts": [
42+
"test:docs",
43+
"test:knip",
44+
"test:sherif"
45+
]
46+
},
47+
"size-limit": [
48+
{
49+
"path": "packages/devtools/dist/index.js",
50+
"limit": "60 KB"
51+
},
52+
{
53+
"path": "packages/event-bus-client/dist/esm/plugin.js",
54+
"limit": "1.2 KB"
55+
}
56+
],
57+
"devDependencies": {
58+
"@changesets/cli": "^2.29.7",
59+
"@faker-js/faker": "^9.9.0",
60+
"@size-limit/preset-small-lib": "^11.2.0",
61+
"@svitejs/changesets-changelog-github-compact": "^1.2.0",
62+
"@tanstack/eslint-config": "0.3.2",
63+
"@tanstack/intent": "^0.0.14",
64+
"@tanstack/typedoc-config": "0.2.1",
65+
"@tanstack/vite-config": "0.2.1",
66+
"@testing-library/jest-dom": "^6.8.0",
67+
"@types/node": "^22.15.2",
68+
"eslint": "^9.36.0",
69+
"eslint-plugin-unused-imports": "^4.2.0",
70+
"jsdom": "^27.0.0",
71+
"knip": "^5.64.0",
72+
"markdown-link-extractor": "^4.0.2",
73+
"nx": "22.1.3",
74+
"premove": "^4.0.0",
75+
"prettier": "^3.8.1",
76+
"prettier-plugin-svelte": "^3.4.1",
77+
"publint": "^0.3.13",
78+
"sherif": "^1.7.0",
79+
"size-limit": "^11.2.0",
80+
"tinyglobby": "^0.2.15",
81+
"typescript": "~5.9.2",
82+
"vite": "^7.1.7",
83+
"vitest": "^3.2.4"
84+
},
85+
"overrides": {
86+
"@tanstack/devtools": "workspace:*",
87+
"@tanstack/react-devtools": "workspace:*",
88+
"@tanstack/preact-devtools": "workspace:*",
89+
"@tanstack/solid-devtools": "workspace:*",
90+
"@tanstack/devtools-vite": "workspace:*"
91+
},
92+
"files": [
93+
"skills",
94+
"bin",
95+
"!skills/_artifacts"
96+
],
97+
"bin": {
98+
"intent": "./bin/intent.js"
99+
}
100100
}

‎packages/devtools-utils/skills/devtools-framework-adapters/SKILL.md‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ description: >
88
Vue uses (name, component) not options object. Solid render must be function.
99
type: framework
1010
library: tanstack-devtools
11-
library_version: "0.10.12"
11+
library_version: '0.10.12'
1212
requires:
1313
- tanstack-devtools/plugin-panel
1414
sources:
15-
- "TanStack/devtools:docs/devtools-utils.md"
16-
- "TanStack/devtools:packages/devtools-utils/src/react/plugin.tsx"
17-
- "TanStack/devtools:packages/devtools-utils/src/vue/plugin.ts"
18-
- "TanStack/devtools:packages/devtools-utils/src/solid/plugin.tsx"
19-
- "TanStack/devtools:packages/devtools-utils/src/preact/plugin.tsx"
15+
- 'TanStack/devtools:docs/devtools-utils.md'
16+
- 'TanStack/devtools:packages/devtools-utils/src/react/plugin.tsx'
17+
- 'TanStack/devtools:packages/devtools-utils/src/vue/plugin.ts'
18+
- 'TanStack/devtools:packages/devtools-utils/src/solid/plugin.tsx'
19+
- 'TanStack/devtools:packages/devtools-utils/src/preact/plugin.tsx'
2020
---
2121

2222
Use `@tanstack/devtools-utils` factory functions to create per-framework devtools plugin adapters. Each framework has a subpath export (`/react`, `/vue`, `/solid`, `/preact`) with two factories:
@@ -43,12 +43,14 @@ All four frameworks follow the same two-factory pattern:
4343
### Plugin Factory
4444

4545
Every `createXPlugin` returns `readonly [Plugin, NoOpPlugin]`:
46+
4647
- **Plugin** -- returns a plugin object with metadata and a `render` function that renders your component.
4748
- **NoOpPlugin** -- returns a plugin object with the same metadata but renders an empty fragment.
4849

4950
### Panel Factory
5051

5152
Every `createXPanel` returns `readonly [Panel, NoOpPanel]`:
53+
5254
- **Panel** -- a framework component that creates a `<div style="height:100%">`, instantiates the core class, calls `core.mount(el, theme)` on mount, and `core.unmount()` on cleanup.
5355
- **NoOpPanel** -- renders an empty fragment.
5456

@@ -67,6 +69,7 @@ interface DevtoolsPanelProps {
6769
```
6870

6971
Import from the framework subpath:
72+
7073
```ts
7174
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
7275
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/vue'
@@ -91,17 +94,25 @@ const [MyPlugin, NoOpPlugin] = createReactPlugin({
9194
})
9295

9396
// Tree-shaking: use NoOp in production
94-
const ActivePlugin = process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
97+
const ActivePlugin =
98+
process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
9599
```
96100

97101
### With Class-Based Panel
98102

99103
```tsx
100-
import { createReactPanel, createReactPlugin } from '@tanstack/devtools-utils/react'
104+
import {
105+
createReactPanel,
106+
createReactPlugin,
107+
} from '@tanstack/devtools-utils/react'
101108

102109
class MyDevtoolsCore {
103-
mount(el: HTMLElement, theme: 'light' | 'dark') { /* render into el */ }
104-
unmount() { /* cleanup */ }
110+
mount(el: HTMLElement, theme: 'light' | 'dark') {
111+
/* render into el */
112+
}
113+
unmount() {
114+
/* cleanup */
115+
}
105116
}
106117

107118
const [MyPanel, NoOpPanel] = createReactPanel(MyDevtoolsCore)
@@ -165,6 +176,7 @@ const [MyPlugin, NoOpPlugin] = createVuePlugin('My Plugin', MyPanel)
165176
```
166177

167178
Vue plugins also work differently at call time -- you pass props:
179+
168180
```ts
169181
// WRONG -- calling Plugin() with no args (React pattern)
170182
const plugin = MyPlugin()
@@ -181,7 +193,7 @@ When using Solid components, `Component` must be a function reference, not raw J
181193
// WRONG -- evaluates immediately, breaks Solid reactivity
182194
createSolidPlugin({
183195
name: 'My Store',
184-
Component: <MyPanel />, // This is JSX.Element, not a component function
196+
Component: <MyPanel />, // This is JSX.Element, not a component function
185197
})
186198

187199
// CORRECT -- pass the component function itself
@@ -210,7 +222,8 @@ const [MyPlugin, NoOpPlugin] = createReactPlugin({
210222
name: 'Store',
211223
Component: MyPanel,
212224
})
213-
const ActivePlugin = process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
225+
const ActivePlugin =
226+
process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
214227
```
215228

216229
### MEDIUM: Not Passing Theme Prop to Panel Component
@@ -223,15 +236,14 @@ const Component = () => <div>My Panel</div>
223236

224237
// CORRECT -- use theme for styling
225238
const Component = ({ theme }: DevtoolsPanelProps) => (
226-
<div className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>
227-
My Panel
228-
</div>
239+
<div className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>My Panel</div>
229240
)
230241
```
231242

232243
## Design Tension
233244

234245
The core architecture is framework-agnostic, but each framework has different idioms:
246+
235247
- React/Preact use an options object with `Component` as a JSX function component.
236248
- Vue uses positional arguments with a `DefineComponent` and passes props through.
237249
- Solid uses the same options API as React but with Solid's JSX and reactivity model.

0 commit comments

Comments
 (0)