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,42 @@ 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:

examples/react/basic/src/setup.tsx

@@ -9,7 +9,7 @@ import {
   createRootRoute,
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
-import { Devtools } from '@tanstack/react-devtools'
+import { TanstackDevtools } from '@tanstack/react-devtools'
 
 const rootRoute = createRootRoute({
   component: () => (
@@ -60,7 +60,7 @@ export default function DevtoolsExample() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <Devtools
+        <TanstackDevtools
           plugins={[
             {
               name: 'Tanstack Query',

examples/react/start/src/components/devtools.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { Devtools } from '@tanstack/react-devtools'
+import { TanstackDevtools } from '@tanstack/react-devtools'
 import { StudioPlugin } from './prisma-plugin'
 
 const queryClient = new QueryClient()
@@ -10,7 +10,7 @@ export default function DevtoolsExample() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <Devtools
+        <TanstackDevtools
           plugins={[
             {
               name: 'Tanstack Query',

examples/solid/basic/src/setup.tsx

@@ -8,7 +8,7 @@ import {
   createRootRoute,
 } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
-import { Devtools } from '@tanstack/solid-devtools'
+import { TanstackDevtools } from '@tanstack/solid-devtools'
 const rootRoute = createRootRoute({
   component: () => (
     <>
@@ -49,7 +49,7 @@ const queryClient = new QueryClient()
 export default function DevtoolsExample() {
   return (
     <>
-      <Devtools
+      <TanstackDevtools
         plugins={[
           {
             name: 'Tanstack Query',

packages/devtools/README.md

@@ -0,0 +1,45 @@
+# @tanstack/devtools
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
+
+## General Usage
+
+```tsx
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
+ 
+
+const devtools = new TanStackDevtoolsCore({
+  options: {
+    // your options here
+  },
+  plugins: [
+    // your plugins here
+  ],
+})
+
+devtools.mount(document.getElementById('your-devtools-container')!)
+
+```
+
+## Creating plugins
+
+In order to create a plugin for TanStack Devtools, you can use the `plugins` arg of the `TanStackDevtoolsCore` class. Here's an example of how to create a simple plugin:
+
+```ts
+import { TanStackDevtoolsCore } from '@tanstack/devtools'
+
+const devtools = new TanStackDevtoolsCore({
+  options: {
+    // your options here
+  },
+  plugins: [
+    {
+      id: 'my-plugin',
+      name: 'My Plugin',
+      render: (el) => el.innerHTML = '<div>My Plugin Content</div>',
+    }
+  ]
+})
+
+```
+

packages/devtools/src/context/devtools-context.tsx

@@ -12,7 +12,7 @@ import type { DevtoolsStore } from './devtools-store'
 import type { Setter } from 'solid-js'
 import type { JSX } from 'solid-js/jsx-runtime'
 
-export interface DevtoolsPlugin {
+export interface TanStackDevtoolsPlugin {
   name: string | ((el: HTMLHeadingElement) => void)
   id?: string
   render: (el: HTMLDivElement) => void
@@ -24,8 +24,8 @@ export const DevtoolsContext = createContext<{
 
 interface ContextProps {
   children: JSX.Element
-  plugins?: Array<DevtoolsPlugin>
-  config?: DevtoolsSettings
+  plugins?: Array<TanStackDevtoolsPlugin>
+  config?: TanStackDevtoolsConfig
 }
 
 const getSettings = () => {
@@ -36,7 +36,7 @@ const getSettings = () => {
   }
 }
 
-const generatePluginId = (plugin: DevtoolsPlugin, index: number) => {
+const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
   // if set by user, return the plugin id
   if (plugin.id) {
     return plugin.id
@@ -50,8 +50,8 @@ const generatePluginId = (plugin: DevtoolsPlugin, index: number) => {
 }
 
 const getExistingStateFromStorage = (
-  config?: DevtoolsSettings,
-  plugins?: Array<DevtoolsPlugin>,
+  config?: TanStackDevtoolsConfig,
+  plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
   const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)
   const settings = getSettings()
@@ -79,7 +79,7 @@ const getExistingStateFromStorage = (
   return state
 }
 
-export type DevtoolsSettings = DevtoolsStore['settings']
+export type TanStackDevtoolsConfig = DevtoolsStore['settings']
 
 export const DevtoolsProvider = (props: ContextProps) => {
   const [store, setStore] = createStore(

packages/devtools/src/context/devtools-store.ts

@@ -1,5 +1,5 @@
 import type { TabName } from '../tabs'
-import type { DevtoolsPlugin } from './devtools-context'
+import type { TanStackDevtoolsPlugin } from './devtools-context'
 
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
 type KeyboardKey = ModifierKey | (string & {})
@@ -57,7 +57,7 @@ export type DevtoolsStore = {
     activePlugin?: string | undefined
     persistOpen: boolean
   }
-  plugins?: Array<DevtoolsPlugin>
+  plugins?: Array<TanStackDevtoolsPlugin>
 }
 
 export const initialState: DevtoolsStore = {

packages/devtools/src/core.tsx

@@ -3,29 +3,29 @@ import { Portal, render } from 'solid-js/web'
 import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
 import type {
-  DevtoolsPlugin,
-  DevtoolsSettings,
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
 } from './context/devtools-context'
 
-export interface DevtoolsOptions {
-  options?: Partial<DevtoolsSettings>
-  plugins?: Array<DevtoolsPlugin>
+export interface TanStackDevtoolsInit {
+  config?: Partial<TanStackDevtoolsConfig>
+  plugins?: Array<TanStackDevtoolsPlugin>
 }
 
-class TanStackDevtoolsCore {
-  #options: DevtoolsSettings = {
+export class TanStackDevtoolsCore {
+  #config: TanStackDevtoolsConfig = {
     ...initialState.settings,
   }
-  #plugins: Array<DevtoolsPlugin> = []
+  #plugins: Array<TanStackDevtoolsPlugin> = []
   #isMounted = false
   #dispose?: () => void
   #Component: any
 
-  constructor(config: DevtoolsOptions) {
-    this.#plugins = config.plugins || []
-    this.#options = {
-      ...this.#options,
-      ...config.options,
+  constructor(init: TanStackDevtoolsInit) {
+    this.#plugins = init.plugins || []
+    this.#config = {
+      ...this.#config,
+      ...init.config,
     }
   }
 
@@ -40,7 +40,7 @@ class TanStackDevtoolsCore {
       const Devtools = this.#Component
 
       return (
-        <DevtoolsProvider plugins={this.#plugins} config={this.#options}>
+        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
           <Portal mount={mountTo}>
             <Devtools />
           </Portal>
@@ -60,12 +60,10 @@ class TanStackDevtoolsCore {
     this.#isMounted = false
   }
 
-  setOptions(options: Partial<DevtoolsOptions>) {
-    this.#options = {
-      ...this.#options,
-      ...options,
+  setConfig(config: Partial<TanStackDevtoolsInit>) {
+    this.#config = {
+      ...this.#config,
+      ...config,
     }
   }
 }
-
-export { TanStackDevtoolsCore as TanStackRouterDevtoolsCore }

packages/devtools/src/index.ts

@@ -1,4 +1,7 @@
-export { TanStackRouterDevtoolsCore } from './core'
-export type { DevtoolsOptions } from './core'
-export type { DevtoolsPlugin } from './context/devtools-context'
 export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './constants'
+export { TanStackDevtoolsCore } from './core'
+export type { TanStackDevtoolsInit } from './core'
+export type {
+  TanStackDevtoolsPlugin,
+  TanStackDevtoolsConfig,
+} from './context/devtools-context'