Merge pull request #13 from harry-whorlow/docs-basic-setup

docs(react): basic setup

Author: AlemTuzlak

docs/framework/react/basic-setup.md

@@ -0,0 +1,78 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/react-devtools) library, this will install the devtools core as well as provide you framework specific adapters.
+
+```bash
+npm i @tanstack/react-devtools
+```
+
+Next in the root of your application import the `TanstackDevtools` from the required framework adapter (in this case @tanstack/react-devtools).
+
+```tsx
+import { TanstackDevtools } from '@tanstack/react-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanstackDevtools />
+  </StrictMode>,
+)
+```
+
+Import the desired devtools and provide it to the `TanstackDevtools` component along with a label for the menu.
+
+Currently TanStack offers:
+
+- `QueryDevtools`
+- `RouterDevtools`
+- `FormDevtools`
+
+```tsx
+import { createRoot } from 'react-dom/client'
+
+import { TanstackDevtools } from '@tanstack/react-devtools'
+
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { ReactFormDevtoolsPanel } from '@tanstack/react-form'
+
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanstackDevtools
+      plugins={[
+        {
+          name: 'Tanstack Query',
+          render: <ReactQueryDevtoolsPanel />,
+        },
+        {
+          name: 'Tanstack Router',
+          render: <TanStackRouterDevtoolsPanel />,
+        },
+        {
+          name: 'Tanstack Form',
+          render: <ReactFormDevtoolsPanel />,
+        },
+      ]}
+    />
+  </StrictMode>,
+)
+```
+
+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.
+
+A complete working example can be found in our [examples section](https://tanstack.com/devtools/latest/docs/framework/react/examples).

docs/framework/solid/basic-setup.md

@@ -0,0 +1,73 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/solid-devtools) library, this will install the devtools core as well as provide you framework specific adapters.
+
+```bash
+npm i @tanstack/solid-devtools
+```
+
+Next in the root of your application import the `TanstackDevtools` from the required framework adapter (in this case @tanstack/solid-devtools).
+
+```tsx
+import { TanstackDevtools } from '@tanstack/solid-devtools'
+
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+
+    <TanstackDevtools />
+  </StrictMode>,
+)
+```
+
+Import the desired devtools and provide it to the `TanstackDevtools` component along with a label for the menu.
+
+Currently TanStack offers:
+
+- `QueryDevtools`
+- `RouterDevtools`
+- `FormDevtools`
+
+```tsx
+import { render } from 'solid-js/web';
+
+import { TanstackDevtools } from '@tanstack/solid-devtools'
+
+import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
+import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'
+
+import App from './App'
+
+render(() => (
+  <>
+    <App />
+
+    <TanstackDevtools
+      plugins={[
+        {
+          name: 'Tanstack router',
+          render: () => <TanStackRouterDevtoolsPanel />,
+        },
+        {
+          name: 'Tanstack Form',
+          render: () => <SolidFormDevtoolsPanel />,
+        },
+      ]}
+    />
+  </>
+), document.getElementById('root')!);
+```
+
+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.
+
+A complete working example can be found in our [examples section](https://tanstack.com/devtools/latest/docs/framework/solid/examples).

docs/framework/solid/guides/adapter.md

@@ -1,8 +1,16 @@
 ---
 title: TanStack Devtools Solid Adapter
-ref: docs/framework/react/adapter.md
-replace: {
-  "React": "Solid",
-  "react": "solid"
-}
+ref: adapter
 ---
+
+If you are using TanStack Devtools in a Solid application, we recommend using the Solid Adapter. The Solid Adapter provides a set of easy-to-use hooks on top of the core Devtools utilities. If you find yourself wanting to use the core Devtools classes/functions directly, the Solid Adapter will also re-export everything from the core package.
+
+## Installation
+
+```sh
+npm install @tanstack/solid-devtools
+```
+
+## Solid Hooks
+
+TODO

docs/guides/example-guide.md

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import Devtools from './setup'
 import { queryPlugin } from './plugin'
 setTimeout(() => {
@@ -21,5 +21,5 @@ function App() {
   )
 }
 
-const root = ReactDOM.createRoot(document.getElementById('root')!)
+const root = createRoot(document.getElementById('root')!)
 root.render(<App />)