diff --git a/docs/configuration.md b/docs/configuration.md index 8fc8831f..523d2e7a 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -106,7 +106,7 @@ createRoot(document.getElementById('root')!).render( count, increment: () => { - history.push(count); - count++; + history.push(count) + count++ }, decrement: () => { - history.push(count); - count--; + history.push(count) + count-- }, }; } @@ -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 { -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