Feat/vite plugin (#53)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/two-paths-remain.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools-event-bus': patch
+---
+
+Add devtools vite plugin for enhanced functionalities

docs/installation.md

@@ -11,6 +11,7 @@ Only install one of the following packages depending on your use case:
 
 ```sh
 npm install @tanstack/react-devtools
+npm install -D @tanstack/devtools-vite
 ```
 
 TanStack Devtools is compatible with React v16.8+
@@ -19,6 +20,7 @@ TanStack Devtools is compatible with React v16.8+
 
 ```sh
 npm install @tanstack/solid-devtools
+npm install -D @tanstack/devtools-vite
 ```
 
 TanStack Devtools is compatible with Solid v1.9.5+

docs/quick-start.md

@@ -7,8 +7,8 @@ TanStack Devtools is a framework-agnostic devtool for managing and debugging *de
 
 To get up and running install the correct adapter for your framework:
 
-- **React**: `npm install @tanstack/react-devtools`
-- **Solid**: `npm install @tanstack/solid-devtools`
+- **React**: `npm install @tanstack/react-devtools @tanstack/devtools-vite`
+- **Solid**: `npm install @tanstack/solid-devtools @tanstack/devtools-vite`
 
 Then import the devtools into the root of your application:
 
@@ -25,6 +25,19 @@ function App() {
 }
 ```
 
+And plug the vite plugin as the first plugin in your plugin array in `vite.config.ts`:
+
+```javascript
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools(),
+    // ... rest of your plugins here
+  ],
+}
+```
+
 And you're done! If you want to add custom plugins, you can do so by using the `plugins` prop:
 
 ```javascript

docs/vite-plugin.md

@@ -0,0 +1,94 @@
+---
+title: Vite Plugin
+id: vite-plugin
+---
+
+The Vite Plugin for TanStack Devtools provides a seamless integration for using the devtools in your Vite-powered applications. With this plugin, you get complementary features on top of the
+existing features built into the devtools like better console logs, server event bus, and enhanced debugging capabilities.
+
+## Installation
+
+To add the devtools vite plugin you need to install it as a development dependency:
+
+```sh
+npm install -D @tanstack/devtools-vite
+```
+
+Then add it as the *FIRST* plugin in your Vite config:
+
+```javascript
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools(),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+And you're done! 
+
+## Configuration
+
+You can configure the devtools plugin by passing options to the `devtools` function:
+
+```javascript
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    devtools({
+      // options here
+    }),
+    // ... rest of your plugins here
+  ],
+}
+```
+
+- `eventBusConfig` - Configuration for the event bus that the devtools use to communicate with the client
+
+```ts
+{ 
+  eventBusConfig: {
+    // port to run the event bus on
+    port: 1234,
+    // console log debug logs or not
+    debug: false
+  }, 
+}
+```
+
+- `appDir` - The directory where the react router app is located. Defaults to the "./src" relative to where vite.config is being defined.
+
+```javascript
+{
+  appDir: './src',
+}
+```
+
+- `editor` - The open in editor configuration which has two fields, `name` and `open`,
+`name` is the name of your editor, and `open` is a function that opens the editor with the given file and line number. You can implement your version for your editor as follows:
+
+```ts
+const open = (file: string, line: number) => {
+  // implement your editor opening logic here
+}
+
+{
+  editor: {
+    name: 'vscode',
+    open
+  }
+}
+```
+
+
+- `enhancedLogs` - Configuration for enhanced logging. Defaults to enabled.
+
+```ts
+{
+  enhancedLogs: {
+    enabled: true
+  }
+}

examples/react/basic/package.json

@@ -20,6 +20,7 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
+    "@tanstack/devtools-vite": "0.2.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.5.2",

examples/react/basic/vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-
+import { devtools } from '@tanstack/devtools-vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    devtools(),
     react({
       // babel: {
       //   plugins: [['babel-plugin-react-compiler', { target: '19' }]],

examples/react/start/package.json

@@ -36,6 +36,7 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
+    "@tanstack/devtools-vite": "0.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.1.2",

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

@@ -13,7 +13,8 @@ export default function DevtoolsExample() {
       <QueryClientProvider client={queryClient}>
         <TanStackDevtools
           eventBusConfig={{
-            debug: true,
+            debug: false,
+            connectToServerBus: true,
           }}
           plugins={[
             {

examples/react/start/src/plugin.ts

@@ -19,7 +19,7 @@ class QueryDevtoolsClient extends EventClient<EventMap> {
   constructor() {
     super({
       pluginId: 'query-devtools',
-      debug: true,
+      debug: false,
     })
   }
 }

examples/react/start/src/routes/__root.tsx

@@ -29,6 +29,7 @@ export const Route = createRootRoute({
 })
 
 function RootDocument({ children }: { children: React.ReactNode }) {
+  console.log('hello in root document')
   return (
     <html lang="en">
       <head>