From 01cff6a9fb5d2dc070b9d7fd1c952d10fff455b9 Mon Sep 17 00:00:00 2001 From: TakhyunKim Date: Sun, 21 Sep 2025 09:46:46 +0900 Subject: [PATCH 1/6] fix: delete unused code of configuration docs --- docs/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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( Date: Sun, 21 Sep 2025 09:47:59 +0900 Subject: [PATCH 2/6] fix: delete semicolons and update missing tap of CustomEventClient --- docs/framework/react/guides/custom-plugins.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/framework/react/guides/custom-plugins.md b/docs/framework/react/guides/custom-plugins.md index b5dd18ac..17db0043 100644 --- a/docs/framework/react/guides/custom-plugins.md +++ b/docs/framework/react/guides/custom-plugins.md @@ -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-- }, }; } @@ -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 (
From f5da1d6bb463c0fb626efb80852f8ba927ebb184 Mon Sep 17 00:00:00 2001 From: TakhyunKim Date: Sun, 21 Sep 2025 09:48:26 +0900 Subject: [PATCH 3/6] fix: delete semicolon of solid basic setup docs --- docs/framework/solid/basic-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From e2bfab4d0db11fa3280137dbba9aeef004490e56 Mon Sep 17 00:00:00 2001 From: TakhyunKim Date: Sun, 21 Sep 2025 09:48:53 +0900 Subject: [PATCH 4/6] fix: delete unused space of production docs --- docs/production.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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. From bd1aebcde8ad56ba9962b29df7beed94c2f7b4e0 Mon Sep 17 00:00:00 2001 From: TakhyunKim Date: Sun, 21 Sep 2025 09:50:08 +0900 Subject: [PATCH 5/6] fix: apply empty space removeDevtoolsOnBuild and delete unused space --- docs/vite-plugin.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) 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 From d872553fa4c2ec4c1df0f29c52ccfb4931e1a3e8 Mon Sep 17 00:00:00 2001 From: TakhyunKim Date: Sun, 21 Sep 2025 13:12:44 +0900 Subject: [PATCH 6/6] fix: apply space to setState of custom plugin docs --- docs/framework/react/guides/custom-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/react/guides/custom-plugins.md b/docs/framework/react/guides/custom-plugins.md index 17db0043..d6aefe2f 100644 --- a/docs/framework/react/guides/custom-plugins.md +++ b/docs/framework/react/guides/custom-plugins.md @@ -115,7 +115,7 @@ DevtoolsPanel.ts import { DevtoolsEventClient } from './eventClient.ts' export function DevtoolPanel() { - const [state,setState] = useState() + const [state, setState] = useState() useEffect(() => { // subscribe to the emitted event