separate event client

Author: AlemTuzlak

examples/react/basic/package.json

@@ -9,6 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/devtools-client": "0.0.1",
     "@tanstack/devtools-event-client": "0.3.2",
     "@tanstack/react-devtools": "^0.7.4",
     "@tanstack/react-query": "^5.90.1",
@@ -41,4 +42,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

examples/react/basic/src/package-json-panel.tsx

@@ -1,4 +1,4 @@
-import { devtoolsEventClient } from '@tanstack/devtools-vite/client'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { useEffect, useState } from 'react'
 import type { CSSProperties } from 'react'
 
@@ -22,12 +22,10 @@ export const PackageJsonPanel = () => {
       setPackageJson(event.payload.packageJson)
       setOutdatedDeps(event.payload.outdatedDeps || {})
     })
-    return () => {
-      off?.()
-    }
+    return off
   }, [])
 
-  const hasOutdated = Object.keys(outdatedDeps || {}).length > 0
+  const hasOutdated = Object.keys(outdatedDeps).length > 0
 
   // Helpers
   const stripRange = (v?: string) => (v ?? '').replace(/^[~^><=v\s]*/, '')
@@ -120,7 +118,12 @@ export const PackageJsonPanel = () => {
     dep: string
     specified: string
   }) => {
-    const info = outdatedDeps[dep]
+    const info = outdatedDeps[dep] as {
+      current: string
+      wanted: string
+      latest: string
+      type?: 'dependencies' | 'devDependencies'
+    } | undefined
     const current = info?.current ?? specified
     const latest = info?.latest
     const dt = info ? diffType(current, latest) : null
@@ -140,7 +143,12 @@ export const PackageJsonPanel = () => {
   }
 
   const UpgradeRowActions = ({ name }: { name: string }) => {
-    const info = outdatedDeps[name]
+    const info = outdatedDeps[name] as {
+      current: string
+      wanted: string
+      latest: string
+      type?: 'dependencies' | 'devDependencies'
+    } | undefined
     if (!info) return null
     return (
       <div style={{ display: 'flex', gap: 6 }}>
@@ -163,7 +171,7 @@ export const PackageJsonPanel = () => {
     )
   }
 
-  const makeLists = (names?: string[]) => {
+  const makeLists = (names?: Array<string>) => {
     const entries = Object.entries(outdatedDeps).filter(
       ([n]) => !names || names.includes(n),
     )
@@ -178,7 +186,7 @@ export const PackageJsonPanel = () => {
     return { wantedList, latestList }
   }
 
-  const BulkActions = ({ names }: { names?: string[] }) => {
+  const BulkActions = ({ names }: { names?: Array<string> }) => {
     const { wantedList, latestList } = makeLists(names)
     if (wantedList.length === 0 && latestList.length === 0) return null
     return (
@@ -202,6 +210,7 @@ export const PackageJsonPanel = () => {
 
   const renderDeps = (title: string, deps?: Record<string, string>) => {
     const names = Object.keys(deps || {})
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const someOutdatedInSection = names.some((n) => !!outdatedDeps[n])
     return (
       <div style={sectionStyle}>
@@ -227,13 +236,18 @@ export const PackageJsonPanel = () => {
           </thead>
           <tbody>
             {Object.entries(deps || {}).map(([dep, version]) => {
-              const info = outdatedDeps[dep]
+              const info = outdatedDeps[dep] as {
+                current: string
+                wanted: string
+                latest: string
+                type?: 'dependencies' | 'devDependencies'
+              } | undefined
               const isOutdated = !!info && info.current !== info.latest
               return (
                 <tr key={dep}>
                   <td style={thtd}>{dep}</td>
                   <td style={thtd}>
-                    <VersionCell dep={dep} specified={version as string} />
+                    <VersionCell dep={dep} specified={version} />
                   </td>
                   <td style={thtd}>
                     {isOutdated

packages/devtools-client/README.md

@@ -0,0 +1,3 @@
+# @tanstack/devtools-utils
+
+This package is still under active development and might have breaking changes in the future. Please use it with caution.

packages/devtools-client/eslint.config.js

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

packages/devtools-client/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tanstack/devtools-client",
+  "version": "0.0.1",
+  "description": "TanStack Devtools client that is used to interact with the event system produced by the Devtools.",
+  "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",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@tanstack/devtools-event-client": "workspace:^"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "tsup-preset-solid": "^2.2.0",
+    "vite-plugin-solid": "^2.11.8"
+  }
+}

packages/devtools-vite/src/event.ts packages/devtools-client/src/index.tspackages/devtools-vite/src/event.ts renamed to packages/devtools-client/src/index.ts

@@ -1,7 +1,7 @@
 import { EventClient } from '@tanstack/devtools-event-client'
 
 interface EventMap {
-  'tanstack-devtools-vite:ready': {
+  'tanstack-devtools-core:ready': {
     packageJson: {
       name?: string
       version?: string
@@ -21,13 +21,13 @@ interface EventMap {
       }
     > | null
   }
-  'tanstack-devtools-vite:mounted': void
+  'tanstack-devtools-core:mounted': void
 }
 
 export class DevtoolsEventClient extends EventClient<EventMap> {
   constructor() {
     super({
-      pluginId: 'tanstack-devtools-vite',
+      pluginId: 'tanstack-devtools-core',
     })
   }
 }

packages/devtools-client/tests/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

packages/devtools-client/tsconfig.docs.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["tests", "src"]
+}

packages/devtools-client/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  },
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src",
+    "tsup.config.ts",
+    "eslint.config.js",
+    "vite.config.ts",
+    "tests",
+    "vite.config.solid.ts"
+  ]
+}

packages/devtools-client/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/config/vite'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  plugins: [],
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['./tests/test-setup.ts'],
+    globals: true,
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: ['./src/index.ts'],
+    srcDir: './src',
+    cjs: false,
+  }),
+)