Merge pull request #25 from harry-whorlow/docs-fix

docs(core, react): fixes to examples package.json, links and typos

Author: AlemTuzlak

docs/config.json

@@ -26,27 +26,37 @@
           "to": "installation"
         }
       ],
+
       "frameworks": [
         {
           "label": "react",
           "children": [
             {
-              "label": "React Adapter",
+              "label": "Basic setup",
               "to": "framework/react/basic-setup"
+            },
+            {
+              "label": "React adapter",
+              "to": "framework/react/adapter"
             }
           ]
         },
         {
           "label": "solid",
           "children": [
             {
-              "label": "Solid Adapter",
+              "label": "Basic setup",
               "to": "framework/solid/basic-setup"
+            },
+            {
+              "label": "Solid Adapter",
+              "to": "framework/solid/adapter"
             }
           ]
         }
       ]
     },
+
     {
       "label": "Guides",
       "children": [],
@@ -55,7 +65,7 @@
           "label": "react",
           "children": [
             {
-              "label": "Implementing a custom client",
+              "label": "Custom plugins",
               "to": "framework/react/guides/custom-plugins"
             }
           ]
@@ -66,6 +76,7 @@
         }
       ]
     },
+
     {
       "label": "API Reference",
       "children": [
@@ -95,6 +106,7 @@
         }
       ]
     },
+
     {
       "label": "Examples",
       "children": [],
@@ -105,6 +117,14 @@
             {
               "label": "Basic",
               "to": "framework/react/examples/basic"
+            },
+            {
+              "label": "TanStack Start",
+              "to": "framework/react/examples/start"
+            },
+            {
+              "label": "Custom devtools",
+              "to": "framework/react/examples/custom-devtools"
             }
           ]
         },
@@ -120,4 +140,4 @@
       ]
     }
   ]
-}
+}

docs/configuration.md

@@ -5,39 +5,39 @@ id: configuration
 
 Both TanStack `DevTools` and `EventClient` can be configured.
 
-> **important** all configuration is optional unless marked (required)
+> [!IMPORTANT] all configuration is optional unless marked (required)
 
-## Devtools Configuration
+## Devtools Component Configuration
 
-With the `Devtools` there are two configuration objects, regardless of Frameworks these are the same and are provided to the Devtools through props.
+The `Devtools` component has two configuration props, regardless of Frameworks these are the same.
 
-- `config` configuration for the devtool panel and interaction with it
-- `eventBusConfig` configuration for the event bus
+- `config` - Configuration for the devtool panel and interaction with it.
+- `eventBusConfig` - Configuration for the event bus.
 
 The `config` object is mainly focused around user interaction with the devtools panel and accepts the following properties:
 
 - `defaultOpen` - If the devtools are open by default
 
 ```ts
-{defaultOpen: boolean}
+{ defaultOpen: boolean }
 ```
 
 - `hideUntilHover` - Hides the TanStack devtools trigger until hovered
 
 ```ts
-{hideUntilHover: boolean}
+{ hideUntilHover: boolean }
 ```
 
 - `position` - The position of the TanStack devtools trigger
 
 ```ts
-{position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'}
+{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }
 ```
 
 - `panelLocation` - The location of the devtools panel
 
 ```ts
-{panelLocation: 'top' | 'bottom'}
+{ panelLocation: 'top' | 'bottom' }
 
 ```
 
@@ -47,40 +47,40 @@ The `config` object is mainly focused around user interaction with the devtools
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
 type KeyboardKey = ModifierKey | (string & {});
 
-{openHotkey: Array<KeyboardKey>}
+{ openHotkey: Array<KeyboardKey> }
 ```
 
 - `requireUrlFlag` - Requires a flag present in the url to enable devtools
 
 ```ts
-{requireUrlFlag: boolean}
+{ requireUrlFlag: boolean }
 
 ```
 
 - `urlFlag` - The required flag that must be present in the url to enable devtools.
 
 ```ts
-{urlFlag: string}
+{ urlFlag: string }
 ```
 
 The `eventBusConfig` is configuration for the back bone of the devtools, the ``, and accepts the following properties:
 
 - `debug` - Enables debug mode for the EventBus
 
 ```ts
-{debug: boolean}
+{ debug: boolean }
 ```
 
 - `connectToServerBus` - Optional flag to indicate if the devtools server event bus is available to connect to
 
 ```ts
-{connectToServerBus: boolean}
+{ connectToServerBus: boolean }
 ```
 
 - `port` - The port at which the client connects to the devtools server event bus
 
 ```ts
-{port: number}
+{ port: number }
 ```
 
 Put together here is an example in react:
@@ -148,4 +148,4 @@ class customEventClient extends EventClient<EventMap> {
 }
 ```
 
-More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic)
+More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)

docs/framework/react/guides/adapter.md renamed to docs/framework/react/adapter.md

@@ -73,6 +73,6 @@ createRoot(document.getElementById('root')!).render(
 )
 ```
 
-Finally add any additional configuration you desire to the `TanstackDevtools` component, more information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
+Finally add any additional configuration you desire to the `TanstackDevtools` component, more information can be found under the [TanStack Devtools Configuration](../../configuration.md) section.
 
-A complete working example can be found in our [examples section](https://tanstack.com/devtools/latest/docs/framework/react/examples).
+A complete working example can be found in our [basic example](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic).

docs/framework/react/basic-setup.md

@@ -33,7 +33,7 @@ export function createCounter() {
 
 ## Event Client Setup
 
-Install the [TanStack Devtools Event Client](https://tanstack.com/devtools/) utils.
+Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
 
 ```bash
 npm i @tanstack/devtools-event-client
@@ -67,7 +67,7 @@ export const DevtoolsEventClient = new FormEventClient()
 
 ## Event Client Integration
 
-Now we need to hook our `EventClient` into out application code. This can be done in many way's, a UseEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
+Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
 
 Our new library code will looks as follows:
 
@@ -102,13 +102,13 @@ export function createCounter() {
 }
 ```
 
-> **Important** `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
+> [!IMPORTANT] `EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
 
 ## Consuming The Event Client
 
 Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
 
-> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you you can ignore this).
+> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
 
 DevtoolsPanel.ts
 ```tsx
@@ -134,7 +134,7 @@ export function DevtoolPanel() {
 
 ## Application Integration
 
-This step follows what's shown in [../basic-setup] for a more documented guide go check it out. As well as the complete [custom-plugin example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-plugin) in our examples section.
+This step follows what's shown in [basic-setup](../basic-setup.md)  for a more documented guide go check it out. As well as the complete [custom-devtools example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools) in our examples section.
 
 Main.tsx
 ```tsx

docs/framework/react/guides/custom-plugins.md

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/devtools-event-client": "workspace:^",
+    "@tanstack/devtools-event-client": "^0.2.1",
     "@tanstack/react-devtools": "^0.2.2",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.83.0",

docs/framework/solid/guides/adapter.md renamed to docs/framework/solid/adapter.md

@@ -9,8 +9,8 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/devtools-event-client": "https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-event-client@11",
-    "@tanstack/react-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/react-devtools@0a0219b",
+    "@tanstack/devtools-event-client": "^0.2.1",
+    "@tanstack/react-devtools": "^0.2.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

examples/react/basic/package.json

@@ -17,8 +17,8 @@
     "@prisma/extension-accelerate": "^2.0.2",
     "@prisma/studio-core": "^0.5.1",
     "@tailwindcss/vite": "^4.0.6",
-    "@tanstack/devtools-event-bus": "workspace:^",
-    "@tanstack/devtools-event-client": "workspace:^",
+    "@tanstack/devtools-event-bus": "^0.2.1",
+    "@tanstack/devtools-event-client": "^0.2.1",
     "@tanstack/react-devtools": "^0.2.2",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-devtools": "^5.83.0",
@@ -35,7 +35,7 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
-    "@tanstack/devtools": "workspace:^",
+    "@tanstack/devtools": "^0.2.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.1.2",

examples/react/custom-devtools/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/solid-devtools": "^0.2.2",
+    "@tanstack/solid-devtools": "^0.2.1",
     "@tanstack/solid-query": "^5.83.0",
     "@tanstack/solid-query-devtools": "^5.83.0",
     "@tanstack/solid-router": "^1.129.8",