TanStack · AlemTuzlak · Jul 14, 2026 · Jul 14, 2026 · Jul 14, 2026 · Jul 14, 2026
diff --git a/.changeset/devtools-bundler-core.md b/.changeset/devtools-bundler-core.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-bundler-core': minor
+---
+
+Introduce `@tanstack/devtools-bundler-core`, the framework-agnostic core (transforms, editor integration, package-manager, dev-state) shared by the TanStack devtools bundler plugins.
diff --git a/.changeset/devtools-vite-bundler-core-refactor.md b/.changeset/devtools-vite-bundler-core-refactor.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-vite': patch
+---
+
+Internal refactor: consume `@tanstack/devtools-bundler-core` for shared logic. No public API or behavior change.
diff --git a/.changeset/rspack-plugin.md b/.changeset/rspack-plugin.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-rspack': minor
+---
+
+Add `@tanstack/devtools-rspack` — Rspack plugin with 1:1 feature parity to `@tanstack/devtools-vite` (source injection, enhanced logs, console piping, devtools removal on build, editor integration, event bus, package manager).
diff --git a/examples/react-rspack/index.html b/examples/react-rspack/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Rspack Example - TanStack Devtools</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/react-rspack/package.json b/examples/react-rspack/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-rspack-example",
+  "private": true,
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build --mode=production"
+  },
+  "dependencies": {
+    "@tanstack/devtools-rspack": "workspace:*",
+    "@tanstack/react-devtools": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^1.5.0",
+    "@rspack/core": "^1.5.0",
+    "@rspack/dev-server": "^1.1.4",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "typescript": "^5.9.2"
+  }
+}
diff --git a/examples/react-rspack/rspack.config.mjs b/examples/react-rspack/rspack.config.mjs
@@ -0,0 +1,48 @@
+// @ts-check
+import { HtmlRspackPlugin } from '@rspack/core'
+import { devtools } from '@tanstack/devtools-rspack'
+
+// NOTE: `@tanstack/devtools-rspack` ships as an ESM-only package, so this
+// config is authored as ESM (`rspack.config.mjs`). A CommonJS config would
+// need `const { devtools } = await import('@tanstack/devtools-rspack')`.
+
+/** @type {(env: unknown, argv: { mode?: string }) => import('@rspack/core').Configuration} */
+export default (_env, argv) => ({
+  mode: argv.mode === 'production' ? 'production' : 'development',
+  entry: './src/main.tsx',
+  // No source maps in production so the devtools-strip check is unambiguous
+  // (a source map would embed the original, un-stripped `TanStackDevtools` source).
+  devtool: argv.mode === 'production' ? false : 'eval-source-map',
+  plugins: [devtools(), new HtmlRspackPlugin({ template: './index.html' })],
+  devServer: {
+    port: 3100,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  development: true,
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+  },
+})
diff --git a/examples/react-rspack/src/App.tsx b/examples/react-rspack/src/App.tsx
@@ -0,0 +1,16 @@
+import { useState } from 'react'
+
+export default function App() {
+  const [count, setCount] = useState(0)
+
+  // enhanced-logs has something to transform
+  console.log('React Rspack example mounted, count =', count)
+
+  return (
+    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
+      <h1>TanStack Devtools React + Rspack Example</h1>
+      <p>Current count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
+    </div>
+  )
+}
diff --git a/examples/react-rspack/src/main.tsx b/examples/react-rspack/src/main.tsx
@@ -0,0 +1,15 @@
+import { createRoot } from 'react-dom/client'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import App from './App'
+
+function Root() {
+  return (
+    <>
+      <App />
+      <TanStackDevtools />
+    </>
+  )
+}
+
+const root = createRoot(document.getElementById('root')!)
+root.render(<Root />)
diff --git a/examples/react-rspack/tsconfig.json b/examples/react-rspack/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/devtools-bundler-core/eslint.config.js b/packages/devtools-bundler-core/eslint.config.js
@@ -0,0 +1,10 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    rules: {},
+  },
+]
diff --git a/packages/devtools-bundler-core/package.json b/packages/devtools-bundler-core/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@tanstack/devtools-bundler-core",
+  "version": "0.0.1",
+  "description": "Framework-agnostic core shared by TanStack devtools bundler plugins",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools-bundler-core"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "bugs": {
+    "url": "https://github.com/TanStack/devtools/issues"
+  },
+  "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"
+  },
+  "dependencies": {
+    "@tanstack/devtools-client": "workspace:*",
+    "@tanstack/devtools-event-bus": "workspace:*",
+    "chalk": "^5.6.2",
+    "launch-editor": "^2.11.1",
+    "magic-string": "^0.30.0",
+    "oxc-parser": "^0.120.0",
+    "picomatch": "^4.0.3"
+  },
+  "devDependencies": {
+    "@types/picomatch": "^4.0.2",
+    "happy-dom": "^20.0.0"
+  }
+}
diff --git a/packages/devtools-vite/src/ast-utils.test.ts → ...vtools-bundler-core/src/ast-utils.test.ts b/packages/devtools-vite/src/ast-utils.test.ts → ...vtools-bundler-core/src/ast-utils.test.ts
diff --git a/packages/devtools-vite/src/ast-utils.ts → ...es/devtools-bundler-core/src/ast-utils.ts b/packages/devtools-vite/src/ast-utils.ts → ...es/devtools-bundler-core/src/ast-utils.ts
diff --git a/packages/devtools-bundler-core/src/connection.test.ts b/packages/devtools-bundler-core/src/connection.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getDevtoolsConnection,
+  getDevtoolsFileId,
+  setDevtoolsConnection,
+  setDevtoolsFileId,
+} from './connection'
+
+describe('connection singleton', () => {
+  it('returns sensible defaults before anything is set', () => {
+    expect(getDevtoolsConnection()).toEqual({
+      port: 4206,
+      host: 'localhost',
+      protocol: 'http',
+    })
+    expect(getDevtoolsFileId()).toBeNull()
+  })
+  it('round-trips connection and file id', () => {
+    setDevtoolsConnection({ port: 5000, host: '0.0.0.0', protocol: 'https' })
+    expect(getDevtoolsConnection()).toEqual({
+      port: 5000,
+      host: '0.0.0.0',
+      protocol: 'https',
+    })
+    setDevtoolsFileId('/app/src/main.tsx')
+    expect(getDevtoolsFileId()).toBe('/app/src/main.tsx')
+  })
+})
diff --git a/packages/devtools-bundler-core/src/connection.ts b/packages/devtools-bundler-core/src/connection.ts
@@ -0,0 +1,40 @@
+export type DevtoolsConnection = {
+  port: number
+  host: string
+  protocol: 'http' | 'https'
+}
+
+let connection: DevtoolsConnection = {
+  port: 4206,
+  host: 'localhost',
+  protocol: 'http',
+}
+let devtoolsFileId: string | null = null
+
+export const setDevtoolsConnection = (c: DevtoolsConnection) => {
+  connection = c
+}
+export const getDevtoolsConnection = (): DevtoolsConnection => connection
+export const setDevtoolsFileId = (id: string | null) => {
+  devtoolsFileId = id
+}
+export const getDevtoolsFileId = (): string | null => devtoolsFileId
+
+/**
+ * Origin of the bundler dev server (e.g. rspack-dev-server). This is where the
+ * `__tsd/*` middleware endpoints are mounted, and it is DISTINCT from the event
+ * bus connection above (which the devtools client connects to on port 4206).
+ * The dev-server origin is used to build the absolute `/__tsd/open-source` URL
+ * baked into enhanced console logs and the SSR-side `/__tsd/console-pipe/server`
+ * POST target.
+ */
+export type DevServerOrigin = {
+  port: number
+  host: string
+  protocol: 'http' | 'https'
+}
+let devServerOrigin: DevServerOrigin | null = null
+export const setDevServerOrigin = (o: DevServerOrigin) => {
+  devServerOrigin = o
+}
+export const getDevServerOrigin = (): DevServerOrigin | null => devServerOrigin
diff --git a/...vtools-vite/src/devtools-packages.test.ts → ...undler-core/src/devtools-packages.test.ts b/...vtools-vite/src/devtools-packages.test.ts → ...undler-core/src/devtools-packages.test.ts
diff --git a/...es/devtools-vite/src/devtools-packages.ts → ...ols-bundler-core/src/devtools-packages.ts b/...es/devtools-vite/src/devtools-packages.ts → ...ols-bundler-core/src/devtools-packages.ts
diff --git a/packages/devtools-vite/src/editor.test.ts → .../devtools-bundler-core/src/editor.test.ts b/packages/devtools-vite/src/editor.test.ts → .../devtools-bundler-core/src/editor.test.ts
diff --git a/packages/devtools-vite/src/editor.ts → packages/devtools-bundler-core/src/editor.ts b/packages/devtools-vite/src/editor.ts → packages/devtools-bundler-core/src/editor.ts
diff --git a/...es/devtools-vite/src/enhance-logs.test.ts → ...ols-bundler-core/src/enhance-logs.test.ts b/...es/devtools-vite/src/enhance-logs.test.ts → ...ols-bundler-core/src/enhance-logs.test.ts
diff --git a/packages/devtools-vite/src/enhance-logs.ts → ...devtools-bundler-core/src/enhance-logs.ts b/packages/devtools-vite/src/enhance-logs.ts → ...devtools-bundler-core/src/enhance-logs.ts
@@ -1,7 +1,7 @@
 import chalk from 'chalk'
-import { normalizePath } from 'vite'
 import MagicString from 'magic-string'
 import { parseSync } from 'oxc-parser'
+import { normalizePath } from './normalize-path'
 import { createLocMapper } from './offset-to-loc'
 import { walk } from './ast-utils'
 

diff --git a/packages/devtools-bundler-core/src/index.ts b/packages/devtools-bundler-core/src/index.ts
@@ -0,0 +1,16 @@
+export * from './normalize-path'
+export * from './types'
+export * from './ast-utils'
+export * from './connection'
+export * from './devtools-packages'
+export * from './editor'
+export * from './enhance-logs'
+export * from './inject-plugin'
+export * from './inject-source'
+export * from './matcher'
+export * from './offset-to-loc'
+export * from './package-manager'
+export * from './remove-devtools'
+export * from './runtime-bridge'
+export * from './virtual-console'
+export * from './utils'
diff --git a/...s/devtools-vite/src/inject-plugin.test.ts → ...ls-bundler-core/src/inject-plugin.test.ts b/...s/devtools-vite/src/inject-plugin.test.ts → ...ls-bundler-core/src/inject-plugin.test.ts
diff --git a/packages/devtools-vite/src/inject-plugin.ts → ...evtools-bundler-core/src/inject-plugin.ts b/packages/devtools-vite/src/inject-plugin.ts → ...evtools-bundler-core/src/inject-plugin.ts
diff --git a/...s/devtools-vite/src/inject-source.test.ts → ...ls-bundler-core/src/inject-source.test.ts b/...s/devtools-vite/src/inject-source.test.ts → ...ls-bundler-core/src/inject-source.test.ts
diff --git a/packages/devtools-vite/src/inject-source.ts → ...evtools-bundler-core/src/inject-source.ts b/packages/devtools-vite/src/inject-source.ts → ...evtools-bundler-core/src/inject-source.ts
@@ -1,6 +1,6 @@
-import { normalizePath } from 'vite'
 import MagicString from 'magic-string'
 import { parseSync } from 'oxc-parser'
+import { normalizePath } from './normalize-path'
 import { createLocMapper } from './offset-to-loc'
 import { matcher } from './matcher'
 import { forEachChild } from './ast-utils'

diff --git a/packages/devtools-vite/src/matcher.test.ts → ...devtools-bundler-core/src/matcher.test.ts b/packages/devtools-vite/src/matcher.test.ts → ...devtools-bundler-core/src/matcher.test.ts
diff --git a/packages/devtools-vite/src/matcher.ts → ...ages/devtools-bundler-core/src/matcher.ts b/packages/devtools-vite/src/matcher.ts → ...ages/devtools-bundler-core/src/matcher.ts
diff --git a/packages/devtools-bundler-core/src/normalize-path.ts b/packages/devtools-bundler-core/src/normalize-path.ts
@@ -0,0 +1,4 @@
+// Matches the backslash -> forward-slash half of Vite's normalizePath. Vite
+// additionally runs path.posix.normalize, which we don't need for these
+// substring checks.
+export const normalizePath = (p: string): string => p.replace(/\\/g, '/')
diff --git a/...s/devtools-vite/src/offset-to-loc.test.ts → ...ls-bundler-core/src/offset-to-loc.test.ts b/...s/devtools-vite/src/offset-to-loc.test.ts → ...ls-bundler-core/src/offset-to-loc.test.ts
diff --git a/packages/devtools-vite/src/offset-to-loc.ts → ...evtools-bundler-core/src/offset-to-loc.ts b/packages/devtools-vite/src/offset-to-loc.ts → ...evtools-bundler-core/src/offset-to-loc.ts
diff --git a/...ages/devtools-vite/src/package-manager.ts → ...tools-bundler-core/src/package-manager.ts b/...ages/devtools-vite/src/package-manager.ts → ...tools-bundler-core/src/package-manager.ts
diff --git a/...devtools-vite/src/remove-devtools.test.ts → ...-bundler-core/src/remove-devtools.test.ts b/...devtools-vite/src/remove-devtools.test.ts → ...-bundler-core/src/remove-devtools.test.ts
diff --git a/...ages/devtools-vite/src/remove-devtools.ts → ...tools-bundler-core/src/remove-devtools.ts b/...ages/devtools-vite/src/remove-devtools.ts → ...tools-bundler-core/src/remove-devtools.ts
diff --git a/.../devtools-vite/src/runtime-bridge.test.ts → ...s-bundler-core/src/runtime-bridge.test.ts b/.../devtools-vite/src/runtime-bridge.test.ts → ...s-bundler-core/src/runtime-bridge.test.ts
diff --git a/packages/devtools-vite/src/runtime-bridge.ts → ...vtools-bundler-core/src/runtime-bridge.ts b/packages/devtools-vite/src/runtime-bridge.ts → ...vtools-bundler-core/src/runtime-bridge.ts