{
-constructor() {
+ constructor() {
super({
// The pluginId must match that of the event map key
pluginId: 'custom-devtools',
@@ -115,13 +115,13 @@ DevtoolsPanel.ts
import { DevtoolsEventClient } from './eventClient.ts'
export function DevtoolPanel() {
- const [state,setState] = useState();
+ const [state, setState] = useState()
useEffect(() => {
// subscribe to the emitted event
const cleanup = client.on("counter-state", e => setState(e.payload)
return cleanup
- }, []);
+ }, [])
return (
diff --git a/docs/framework/solid/basic-setup.md b/docs/framework/solid/basic-setup.md
index 1d6aef32..f497f12d 100644
--- a/docs/framework/solid/basic-setup.md
+++ b/docs/framework/solid/basic-setup.md
@@ -65,7 +65,7 @@ render(() => (
]}
/>
>
-), document.getElementById('root')!);
+), document.getElementById('root')!)
```
Finally add any additional configuration you desire to the `TanStackDevtools` component, more information can be found under the [TanStack Devtools Configuration](../../../configuration.md) section.
diff --git a/docs/production.md b/docs/production.md
index ee7254af..fcc6965d 100644
--- a/docs/production.md
+++ b/docs/production.md
@@ -1,11 +1,11 @@
---
title: Production
id: production
----
-
+---
+
The whole point of devtools is to help you during development, so it's generally not recommended to include them in production builds, but if you know what you're doing, you can.
-
+
## Vite Plugin Configuration
@@ -39,9 +39,9 @@ Here's an example using environment variables:
import { TanStackDevtools } from '@tanstack/react-devtools'
export default function Devtools(){
- return
+ ]} />
}
// App.tsx
@@ -55,7 +55,7 @@ function App() {
>
)
}
-```
+```
## Where to install the Devtools
@@ -69,4 +69,4 @@ This depends on if you are shedding development dependencies in production or no
For Development, you can install the devtools as a development dependency and import them in your application code. The Vite plugin will take care of stripping them out of the production build.
-For Production, you can install the devtools as a regular dependency and import them in your application code using the `/production` sub-export and then you also need to set `removeDevtoolsOnBuild` to `false` in the Vite plugin configuration.
\ No newline at end of file
+For Production, you can install the devtools as a regular dependency and import them in your application code using the `/production` sub-export and then you also need to set `removeDevtoolsOnBuild` to `false` in the Vite plugin configuration.
diff --git a/docs/vite-plugin.md b/docs/vite-plugin.md
index c41175b2..fca34660 100644
--- a/docs/vite-plugin.md
+++ b/docs/vite-plugin.md
@@ -27,7 +27,7 @@ export default {
}
```
-And you're done!
+And you're done!
## Configuration
@@ -61,16 +61,16 @@ export default {
port: 1234,
// console log debug logs or not
debug: false
- },
+ },
}),
// ... rest of your plugins here
],
}
-
+
```
### editor
-
+
> [!IMPORTANT] `editor` is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use `launch-editor` under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors
The open in editor configuration which has two fields, `name` and `open`,
@@ -91,14 +91,14 @@ export default {
`code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,
)
},
- },
+ },
}),
// ... rest of your plugins here
],
}
-
+
```
-
+
### enhancedLogs
Configuration for enhanced logging. Defaults to enabled.
@@ -119,11 +119,12 @@ export default {
```
### removeDevtoolsOnBuild
-
+
Whether to remove devtools from the production build. Defaults to true.
-
+
```ts
import { devtools } from '@tanstack/devtools-vite'
+
export default {
plugins: [
devtools({
@@ -136,7 +137,7 @@ export default {
### logging
Whether to log information to the console. Defaults to true.
-
+
```ts
import { devtools } from '@tanstack/devtools-vite'
@@ -150,7 +151,7 @@ export default {
}
```
-### injectSource
+### injectSource
Configuration for source injection. Defaults to enabled.
@@ -181,4 +182,4 @@ the Panel available on the page. Simply click on any element while holding down
### Advanced console logs
-Allows you to go directly to the console log location directly from the browser/terminal
\ No newline at end of file
+Allows you to go directly to the console log location directly from the browser/terminal