Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ createRoot(document.getElementById('root')!).render(
<App />

<TanStackDevtools
config={{ hideUntilHover: true, }}
config={{ hideUntilHover: true }}
eventBusConfig={{ debug: true }}
plugins={[
{
Expand Down
20 changes: 10 additions & 10 deletions docs/framework/react/guides/custom-plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,18 @@ This is our library code:
counter.ts
```tsx
export function createCounter() {
let count = 0;
const history = [];
let count = 0
const history = []

return {
getCount: () => count,
increment: () => {
history.push(count);
count++;
history.push(count)
count++
},
decrement: () => {
history.push(count);
count--;
history.push(count)
count--
},
};
}
Expand All @@ -49,11 +49,11 @@ import { EventClient } from '@tanstack/devtools-event-client'
type EventMap = {
// The key of the event map is a combination of {pluginId}:{eventSuffix}
// The value is the expected type of the event payload
'custom-devtools:counter-state': { count: number, history: number[], }
'custom-devtools:counter-state': { count: number, history: number[] }
}

class CustomEventClient extends EventClient<EventMap> {
constructor() {
constructor() {
super({
// The pluginId must match that of the event map key
pluginId: 'custom-devtools',
Expand Down Expand Up @@ -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 (
<div>
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/solid/basic-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
14 changes: 7 additions & 7 deletions docs/production.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -39,9 +39,9 @@ Here's an example using environment variables:
import { TanStackDevtools } from '@tanstack/react-devtools'

export default function Devtools(){
return <TanStackDevtools plugins={[
return <TanStackDevtools plugins={[
// Add your custom plugins here
]} />
]} />
}

// App.tsx
Expand All @@ -55,7 +55,7 @@ function App() {
</>
)
}
```
```

## Where to install the Devtools

Expand All @@ -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.
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.
25 changes: 13 additions & 12 deletions docs/vite-plugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default {
}
```

And you're done!
And you're done!

## Configuration

Expand Down Expand Up @@ -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`,
Expand All @@ -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.
Expand All @@ -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({
Expand All @@ -136,7 +137,7 @@ export default {

### logging
Whether to log information to the console. Defaults to true.

```ts
import { devtools } from '@tanstack/devtools-vite'

Expand All @@ -150,7 +151,7 @@ export default {
}
```

### injectSource
### injectSource

Configuration for source injection. Defaults to enabled.

Expand Down Expand Up @@ -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
Allows you to go directly to the console log location directly from the browser/terminal