Merge pull request #6 from TanStack/feat/document-devtools-in-readme

chore: cleanup package exports and add basic docs

Author: AlemTuzlak

.changeset/ninety-badgers-feel.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+'@tanstack/devtools': minor
+---
+
+Initial alpha release of @tanstack/devtools

README.md

@@ -65,9 +65,40 @@ Install one of the following packages based on your framework of choice:
 ```bash
 # Npm
 npm install @tanstack/react-devtools
+npm install @tanstack/solid-devtools
 npm install @tanstack/devtools # no framework, just vanilla js
 ```
 
+## Usage
+
+### React
+
+```tsx
+import { TanstackDevtools } from '@tanstack/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <TanstackDevtools
+        plugins={[
+          {
+            name: 'Tanstack Query',
+            render: <ReactQueryDevtoolsPanel />,
+          },
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
+```
+
 ## Development
 
 To contribute to the development of TanStack Devtools, you can clone the repository and run the following commands:

docs/framework/solid/reference/functions/tanstackdevtools.md

@@ -0,0 +1,24 @@
+---
+id: TanstackDevtools
+title: TanstackDevtools
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Function: TanstackDevtools()
+
+```ts
+function TanstackDevtools(__namedParameters): Element
+```
+
+Defined in: [devtools.tsx:32](https://github.com/TanStack/devtools/blob/main/packages/solid-devtools/src/devtools.tsx#L32)
+
+## Parameters
+
+### \_\_namedParameters
+
+`TanstackDevtoolsInit`
+
+## Returns
+
+`Element`

docs/framework/solid/reference/index.md

@@ -6,3 +6,11 @@ title: "@tanstack/solid-devtools"
 <!-- DO NOT EDIT: this page is autogenerated from the type comments -->
 
 # @tanstack/solid-devtools
+
+## Type Aliases
+
+- [TanStackDevtoolsSolidPlugin](type-aliases/tanstackdevtoolssolidplugin.md)
+
+## Functions
+
+- [TanstackDevtools](functions/tanstackdevtools.md)

docs/framework/solid/reference/type-aliases/tanstackdevtoolssolidplugin.md

@@ -0,0 +1,28 @@
+---
+id: TanStackDevtoolsSolidPlugin
+title: TanStackDevtoolsSolidPlugin
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Type Alias: TanStackDevtoolsSolidPlugin
+
+```ts
+type TanStackDevtoolsSolidPlugin = Omit<TanStackDevtoolsPlugin, "render" | "name"> & object;
+```
+
+Defined in: [devtools.tsx:20](https://github.com/TanStack/devtools/blob/main/packages/solid-devtools/src/devtools.tsx#L20)
+
+## Type declaration
+
+### name
+
+```ts
+name: string | SolidPluginRender;
+```
+
+### render
+
+```ts
+render: SolidPluginRender;
+```

docs/reference/classes/tanstackdevtoolscore.md

@@ -0,0 +1,88 @@
+---
+id: TanStackDevtoolsCore
+title: TanStackDevtoolsCore
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Class: TanStackDevtoolsCore
+
+Defined in: [core.tsx:15](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L15)
+
+## Constructors
+
+### new TanStackDevtoolsCore()
+
+```ts
+new TanStackDevtoolsCore(init): TanStackDevtoolsCore
+```
+
+Defined in: [core.tsx:24](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L24)
+
+#### Parameters
+
+##### init
+
+[`TanStackDevtoolsInit`](../interfaces/tanstackdevtoolsinit.md)
+
+#### Returns
+
+[`TanStackDevtoolsCore`](tanstackdevtoolscore.md)
+
+## Methods
+
+### mount()
+
+```ts
+mount<T>(el): void
+```
+
+Defined in: [core.tsx:32](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L32)
+
+#### Type Parameters
+
+• **T** *extends* `HTMLElement`
+
+#### Parameters
+
+##### el
+
+`T`
+
+#### Returns
+
+`void`
+
+***
+
+### setConfig()
+
+```ts
+setConfig(config): void
+```
+
+Defined in: [core.tsx:63](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L63)
+
+#### Parameters
+
+##### config
+
+`Partial`\<[`TanStackDevtoolsInit`](../interfaces/tanstackdevtoolsinit.md)\>
+
+#### Returns
+
+`void`
+
+***
+
+### unmount()
+
+```ts
+unmount(): void
+```
+
+Defined in: [core.tsx:55](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L55)
+
+#### Returns
+
+`void`

docs/reference/index.md

@@ -7,6 +7,20 @@ title: "@tanstack/devtools"
 
 # @tanstack/devtools
 
+## Classes
+
+- [TanStackDevtoolsCore](classes/tanstackdevtoolscore.md)
+
+## Interfaces
+
+- [TanStackDevtoolsInit](interfaces/tanstackdevtoolsinit.md)
+- [TanStackDevtoolsPlugin](interfaces/tanstackdevtoolsplugin.md)
+
+## Type Aliases
+
+- [TanStackDevtoolsConfig](type-aliases/tanstackdevtoolsconfig.md)
+
 ## Variables
 
-- [devtools](variables/devtools.md)
+- [PLUGIN\_CONTAINER\_ID](variables/plugin_container_id.md)
+- [PLUGIN\_TITLE\_CONTAINER\_ID](variables/plugin_title_container_id.md)

docs/reference/interfaces/tanstackdevtoolsinit.md

@@ -0,0 +1,38 @@
+---
+id: TanStackDevtoolsInit
+title: TanStackDevtoolsInit
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Interface: TanStackDevtoolsInit
+
+Defined in: [core.tsx:10](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L10)
+
+## Properties
+
+### config?
+
+```ts
+optional config: Partial<{
+  defaultOpen: boolean;
+  hideUntilHover: boolean;
+  openHotkey: KeyboardKey[];
+  panelLocation: "top" | "bottom";
+  position: TriggerPosition;
+  requireUrlFlag: boolean;
+  urlFlag: string;
+}>;
+```
+
+Defined in: [core.tsx:11](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L11)
+
+***
+
+### plugins?
+
+```ts
+optional plugins: TanStackDevtoolsPlugin[];
+```
+
+Defined in: [core.tsx:12](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/core.tsx#L12)

docs/reference/interfaces/tanstackdevtoolsplugin.md

@@ -0,0 +1,50 @@
+---
+id: TanStackDevtoolsPlugin
+title: TanStackDevtoolsPlugin
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Interface: TanStackDevtoolsPlugin
+
+Defined in: [context/devtools-context.tsx:15](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L15)
+
+## Properties
+
+### id?
+
+```ts
+optional id: string;
+```
+
+Defined in: [context/devtools-context.tsx:17](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L17)
+
+***
+
+### name
+
+```ts
+name: string | (el) => void;
+```
+
+Defined in: [context/devtools-context.tsx:16](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L16)
+
+***
+
+### render()
+
+```ts
+render: (el) => void;
+```
+
+Defined in: [context/devtools-context.tsx:18](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L18)
+
+#### Parameters
+
+##### el
+
+`HTMLDivElement`
+
+#### Returns
+
+`void`

docs/reference/type-aliases/tanstackdevtoolsconfig.md

@@ -0,0 +1,14 @@
+---
+id: TanStackDevtoolsConfig
+title: TanStackDevtoolsConfig
+---
+
+<!-- DO NOT EDIT: this page is autogenerated from the type comments -->
+
+# Type Alias: TanStackDevtoolsConfig
+
+```ts
+type TanStackDevtoolsConfig = DevtoolsStore["settings"];
+```
+
+Defined in: [context/devtools-context.tsx:82](https://github.com/TanStack/devtools/blob/main/packages/devtools/src/context/devtools-context.tsx#L82)