Feat/vite plugin

.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>

examples/react/start/vite.config.ts

@@ -3,10 +3,19 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
+import { devtools } from '@tanstack/devtools-vite'
 //import { devtoolsServer } from './src/server-setup'
 
 const config = defineConfig({
   plugins: [
+    devtools({
+      eventBusConfig: {
+        debug: false,
+      },
+      enhancedLogs: {
+        enabled: true,
+      },
+    }),
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],

package.json

@@ -81,6 +81,7 @@
   "overrides": {
     "@tanstack/devtools": "workspace:*",
     "@tanstack/react-devtools": "workspace:*",
-    "@tanstack/solid-devtools": "workspace:*"
+    "@tanstack/solid-devtools": "workspace:*",
+    "@tanstack/devtools-vite": "workspace:*"
   }
 }

packages/devtools-vite/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @tanstack/devtools-event-client
+
+## 0.2.2
+
+### Patch Changes
+
+- exclude from production by default ([#45](https://github.com/TanStack/devtools/pull/45))
+
+## 0.2.1
+
+### Patch Changes
+
+- add queued events to event bus ([#18](https://github.com/TanStack/devtools/pull/18))
+
+## 0.2.0
+
+### Minor Changes
+
+- Added event bus functionality into @tanstack/devtools ([#11](https://github.com/TanStack/devtools/pull/11))
+
+  - @tanstack/devtools now comes with an integrated Event Bus on the Client.
+  - The Event Bus allows for seamless communication between different parts of your running application
+    without tight coupling.
+  - Exposed APIs for publishing and subscribing to events.
+  - Added config for the client event bus

packages/devtools-vite/README.md

@@ -0,0 +1,20 @@
+# @tanstack/devtools-vite
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.
+
+## General Usage
+
+The `@tanstack/devtools-vite` package is designed to work with Vite projects.
+Plug it into your plugins array:
+
+```ts
+import { devtools } from '@tanstack/devtools-vite'
+
+export default {
+  plugins: [
+    // Important to include it first!
+    devtools(),
+    ... //rest of the plugins
+  ],
+}
+```

packages/devtools-vite/eslint.config.js

@@ -0,0 +1,10 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    rules: {},
+  },
+]

packages/devtools-vite/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/devtools-vite",
+  "version": "0.2.2",
+  "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "devtools"
+  ],
+  "type": "module",
+  "types": "dist/esm//index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vite": "^7.0.0"
+  },
+  "dependencies": {
+    "@tanstack/devtools-event-bus": "workspace:*",
+    "chalk": "^5.6.0"
+  }
+}