@tanstack/devtools-vite 0.3.4 → 0.3.6

package/dist/esm/plugin.d.ts

@@ -9,7 +9,13 @@ export type TanStackDevtoolsViteConfig = {
     /**
      * The configuration options for the server event bus
      */
-    eventBusConfig?: ServerEventBusConfig;
+    eventBusConfig?: ServerEventBusConfig & {
+        /**
+         * Should the server event bus be enabled or not
+         * @default true
+         */
+        enabled?: boolean;
+    };
     /**
      * Configuration for enhanced logging.
      */

package/dist/esm/plugin.js

@@ -1,18 +1,37 @@
+import { exec } from "node:child_process";
+import { devtoolsEventClient } from "@tanstack/devtools-client";
 import { ServerEventBus } from "@tanstack/devtools-event-bus/server";
 import { normalizePath } from "vite";
 import chalk from "chalk";
-import { handleDevToolsViteRequest } from "./utils.js";
+import { handleDevToolsViteRequest, readPackageJson, tryParseJson } from "./utils.js";
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from "./editor.js";
 import { removeDevtools } from "./remove-devtools.js";
 import { addSourceToJsx } from "./inject-source.js";
 import { enhanceConsoleLog } from "./enhance-logs.js";
 const defineDevtoolsConfig = (config) => config;
+const emitOutdatedDeps = async () => {
+  return await new Promise((resolve) => {
+    exec("npm outdated --json", (_, stdout) => {
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson(stdout);
+        if (!newOutdatedDeps) {
+          return;
+        }
+        devtoolsEventClient.emit("outdated-deps-read", {
+          outdatedDeps: newOutdatedDeps
+        });
+        resolve(newOutdatedDeps);
+      }
+    });
+  });
+};
 const devtools = (args) => {
   let port = 5173;
   const logging = args?.logging ?? true;
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true };
   const injectSourceConfig = args?.injectSource ?? { enabled: true };
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true;
+  const serverBusEnabled = args?.eventBusConfig?.enabled ?? true;
   const bus = new ServerEventBus(args?.eventBusConfig);
   return [
     {
@@ -34,21 +53,6 @@ const devtools = (args) => {
         if (command !== "serve") {
           return;
         }
-        const solidDedupeDeps = [
-          "solid-js",
-          "solid-js/web",
-          "solid-js/store",
-          "solid-js/html",
-          "solid-js/h"
-        ];
-        return {
-          resolve: {
-            dedupe: solidDedupeDeps
-          },
-          optimizeDeps: {
-            include: solidDedupeDeps
-          }
-        };
       }
     },
     {
@@ -58,7 +62,9 @@ const devtools = (args) => {
         return config.mode === "development";
       },
       configureServer(server) {
-        bus.start();
+        if (serverBusEnabled) {
+          bus.start();
+        }
         server.middlewares.use((req, _res, next) => {
           if (req.socket.localPort && req.socket.localPort !== port) {
             port = req.socket.localPort;
@@ -113,6 +119,35 @@ ${chalk.greenBright(`[@tanstack/devtools-vite]`)} Removed devtools code from: ${
         return transform;
       }
     },
+    {
+      name: "@tanstack/devtools:event-client-setup",
+      apply(config, { command }) {
+        if (process.env.CI || process.env.NODE_ENV !== "development" || command !== "serve")
+          return false;
+        return config.mode === "development";
+      },
+      async configureServer() {
+        const packageJson = await readPackageJson();
+        const outdatedDeps = emitOutdatedDeps().then((deps) => deps);
+        devtoolsEventClient.on("mounted", async () => {
+          devtoolsEventClient.emit("outdated-deps-read", {
+            outdatedDeps: await outdatedDeps
+          });
+          devtoolsEventClient.emit("package-json-read", {
+            packageJson
+          });
+        });
+      },
+      async handleHotUpdate({ file }) {
+        if (file.endsWith("package.json")) {
+          const newPackageJson = await readPackageJson();
+          devtoolsEventClient.emit("package-json-read", {
+            packageJson: newPackageJson
+          });
+          emitOutdatedDeps();
+        }
+      }
+    },
     {
       name: "@tanstack/devtools:better-console-logs",
       enforce: "pre",

package/dist/esm/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../../src/plugin.ts"],"sourcesContent":["import { ServerEventBus } from '@tanstack/devtools-event-bus/server'\nimport { normalizePath } from 'vite'\nimport chalk from 'chalk'\nimport { handleDevToolsViteRequest } from './utils'\nimport { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'\nimport { removeDevtools } from './remove-devtools'\nimport { addSourceToJsx } from './inject-source'\nimport { enhanceConsoleLog } from './enhance-logs'\nimport type { Plugin } from 'vite'\nimport type { EditorConfig } from './editor'\nimport type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'\n\nexport type TanStackDevtoolsViteConfig = {\n  /**\n   * Configuration for the editor integration. Defaults to opening in VS code\n   */\n  editor?: EditorConfig\n  /**\n   * The configuration options for the server event bus\n   */\n  eventBusConfig?: ServerEventBusConfig\n  /**\n   * Configuration for enhanced logging.\n   */\n  enhancedLogs?: {\n    /**\n     * Whether to enable enhanced logging.\n     * @default true\n     */\n    enabled: boolean\n  }\n  /**\n   * Whether to remove devtools from the production build.\n   * @default true\n   */\n  removeDevtoolsOnBuild?: boolean\n\n  /**\n   * Whether to log information to the console.\n   * @default true\n   */\n  logging?: boolean\n  /**\n   * Configuration for source injection.\n   */\n  injectSource?: {\n    /**\n     * Whether to enable source injection via data-tsd-source.\n     * @default true\n     */\n    enabled: boolean\n  }\n}\n\nexport const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>\n  config\n\nexport const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {\n  let port = 5173\n  const logging = args?.logging ?? true\n  const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }\n  const injectSourceConfig = args?.injectSource ?? { enabled: true }\n  const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true\n  const bus = new ServerEventBus(args?.eventBusConfig)\n\n  return [\n    {\n      enforce: 'pre',\n      name: '@tanstack/devtools:inject-source',\n      apply(config) {\n        return config.mode === 'development' && injectSourceConfig.enabled\n      },\n      transform(code, id) {\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build')\n        )\n          return\n\n        return addSourceToJsx(code, id)\n      },\n    },\n    {\n      name: '@tanstack/devtools:config',\n      enforce: 'pre',\n      config(_, { command }) {\n        // we do not apply any config changes for build\n        if (command !== 'serve') {\n          return\n        }\n\n        const solidDedupeDeps = [\n          'solid-js',\n          'solid-js/web',\n          'solid-js/store',\n          'solid-js/html',\n          'solid-js/h',\n        ]\n\n        return {\n          resolve: {\n            dedupe: solidDedupeDeps,\n          },\n          optimizeDeps: {\n            include: solidDedupeDeps,\n          },\n        }\n      },\n    },\n    {\n      enforce: 'pre',\n      name: '@tanstack/devtools:custom-server',\n      apply(config) {\n        // Custom server is only needed in development for piping events to the client\n        return config.mode === 'development'\n      },\n      configureServer(server) {\n        bus.start()\n\n        server.middlewares.use((req, _res, next) => {\n          if (req.socket.localPort && req.socket.localPort !== port) {\n            port = req.socket.localPort\n          }\n          next()\n        })\n        if (server.config.server.port) {\n          port = server.config.server.port\n        }\n\n        server.httpServer?.on('listening', () => {\n          port = server.config.server.port\n        })\n\n        const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG\n        const openInEditor: EditorConfig['open'] = async (\n          path,\n          lineNum,\n          columnNum,\n        ) => {\n          if (!path) {\n            return\n          }\n          await editor.open(path, lineNum, columnNum)\n        }\n        server.middlewares.use((req, res, next) =>\n          handleDevToolsViteRequest(req, res, next, (parsedData) => {\n            const { data, routine } = parsedData\n            if (routine === 'open-source') {\n              return handleOpenSource({\n                data: { type: data.type, data },\n                openInEditor,\n              })\n            }\n            return\n          }),\n        )\n      },\n    },\n    {\n      name: '@tanstack/devtools:remove-devtools-on-build',\n      apply(_, { command }) {\n        return command === 'build' && removeDevtoolsOnBuild\n      },\n      enforce: 'pre',\n      transform(code, id) {\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build')\n        )\n          return\n        const transform = removeDevtools(code, id)\n        if (!transform) return\n        if (logging) {\n          console.log(\n            `\\n${chalk.greenBright(`[@tanstack/devtools-vite]`)} Removed devtools code from: ${id.replace(normalizePath(process.cwd()), '')}\\n`,\n          )\n        }\n        return transform\n      },\n    },\n    {\n      name: '@tanstack/devtools:better-console-logs',\n      enforce: 'pre',\n      apply(config) {\n        return config.mode === 'development' && enhancedLogsConfig.enabled\n      },\n      transform(code, id) {\n        // Ignore anything external\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build') ||\n          !code.includes('console.')\n        )\n          return\n\n        return enhanceConsoleLog(code, id, port)\n      },\n    },\n  ]\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"plugin.js","sources":["../../src/plugin.ts"],"sourcesContent":["import { exec } from 'node:child_process'\nimport { devtoolsEventClient } from '@tanstack/devtools-client'\nimport { ServerEventBus } from '@tanstack/devtools-event-bus/server'\nimport { normalizePath } from 'vite'\nimport chalk from 'chalk'\nimport {\n  handleDevToolsViteRequest,\n  readPackageJson,\n  tryParseJson,\n} from './utils'\nimport { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'\nimport { removeDevtools } from './remove-devtools'\nimport { addSourceToJsx } from './inject-source'\nimport { enhanceConsoleLog } from './enhance-logs'\nimport type { OutdatedDeps } from '@tanstack/devtools-client'\nimport type { Plugin } from 'vite'\nimport type { EditorConfig } from './editor'\nimport type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'\n\nexport type TanStackDevtoolsViteConfig = {\n  /**\n   * Configuration for the editor integration. Defaults to opening in VS code\n   */\n  editor?: EditorConfig\n  /**\n   * The configuration options for the server event bus\n   */\n  eventBusConfig?: ServerEventBusConfig & {\n    /**\n     * Should the server event bus be enabled or not\n     * @default true\n     */\n    enabled?: boolean // defaults to true\n  }\n  /**\n   * Configuration for enhanced logging.\n   */\n  enhancedLogs?: {\n    /**\n     * Whether to enable enhanced logging.\n     * @default true\n     */\n    enabled: boolean\n  }\n  /**\n   * Whether to remove devtools from the production build.\n   * @default true\n   */\n  removeDevtoolsOnBuild?: boolean\n\n  /**\n   * Whether to log information to the console.\n   * @default true\n   */\n  logging?: boolean\n  /**\n   * Configuration for source injection.\n   */\n  injectSource?: {\n    /**\n     * Whether to enable source injection via data-tsd-source.\n     * @default true\n     */\n    enabled: boolean\n  }\n}\n\nexport const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>\n  config\n\nconst emitOutdatedDeps = async () => {\n  return await new Promise<OutdatedDeps | null>((resolve) => {\n    exec('npm outdated --json', (_, stdout) => {\n      // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON\n      if (stdout) {\n        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)\n        if (!newOutdatedDeps) {\n          return\n        }\n        devtoolsEventClient.emit('outdated-deps-read', {\n          outdatedDeps: newOutdatedDeps,\n        })\n        resolve(newOutdatedDeps)\n      }\n    })\n  })\n}\n\nexport const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {\n  let port = 5173\n  const logging = args?.logging ?? true\n  const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }\n  const injectSourceConfig = args?.injectSource ?? { enabled: true }\n  const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true\n  const serverBusEnabled = args?.eventBusConfig?.enabled ?? true\n  const bus = new ServerEventBus(args?.eventBusConfig)\n\n  return [\n    {\n      enforce: 'pre',\n      name: '@tanstack/devtools:inject-source',\n      apply(config) {\n        return config.mode === 'development' && injectSourceConfig.enabled\n      },\n      transform(code, id) {\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build')\n        )\n          return\n\n        return addSourceToJsx(code, id)\n      },\n    },\n    {\n      name: '@tanstack/devtools:config',\n      enforce: 'pre',\n      config(_, { command }) {\n        // we do not apply any config changes for build\n        if (command !== 'serve') {\n          return\n        }\n\n        /*  const solidDedupeDeps = [\n          'solid-js',\n          'solid-js/web',\n          'solid-js/store',\n          'solid-js/html',\n          'solid-js/h',\n        ]\n\n        return {\n          resolve: {\n            dedupe: solidDedupeDeps,\n          },\n          optimizeDeps: {\n            include: solidDedupeDeps,\n          },\n        } */\n      },\n    },\n    {\n      enforce: 'pre',\n      name: '@tanstack/devtools:custom-server',\n      apply(config) {\n        // Custom server is only needed in development for piping events to the client\n        return config.mode === 'development'\n      },\n      configureServer(server) {\n        if (serverBusEnabled) {\n          bus.start()\n        }\n\n        server.middlewares.use((req, _res, next) => {\n          if (req.socket.localPort && req.socket.localPort !== port) {\n            port = req.socket.localPort\n          }\n          next()\n        })\n        if (server.config.server.port) {\n          port = server.config.server.port\n        }\n\n        server.httpServer?.on('listening', () => {\n          port = server.config.server.port\n        })\n\n        const editor = args?.editor ?? DEFAULT_EDITOR_CONFIG\n        const openInEditor: EditorConfig['open'] = async (\n          path,\n          lineNum,\n          columnNum,\n        ) => {\n          if (!path) {\n            return\n          }\n          await editor.open(path, lineNum, columnNum)\n        }\n        server.middlewares.use((req, res, next) =>\n          handleDevToolsViteRequest(req, res, next, (parsedData) => {\n            const { data, routine } = parsedData\n            if (routine === 'open-source') {\n              return handleOpenSource({\n                data: { type: data.type, data },\n                openInEditor,\n              })\n            }\n            return\n          }),\n        )\n      },\n    },\n    {\n      name: '@tanstack/devtools:remove-devtools-on-build',\n      apply(_, { command }) {\n        return command === 'build' && removeDevtoolsOnBuild\n      },\n      enforce: 'pre',\n      transform(code, id) {\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build')\n        )\n          return\n        const transform = removeDevtools(code, id)\n        if (!transform) return\n        if (logging) {\n          console.log(\n            `\\n${chalk.greenBright(`[@tanstack/devtools-vite]`)} Removed devtools code from: ${id.replace(normalizePath(process.cwd()), '')}\\n`,\n          )\n        }\n        return transform\n      },\n    },\n    {\n      name: '@tanstack/devtools:event-client-setup',\n      apply(config, { command }) {\n        if (\n          process.env.CI ||\n          process.env.NODE_ENV !== 'development' ||\n          command !== 'serve'\n        )\n          return false\n        return config.mode === 'development'\n      },\n      async configureServer() {\n        const packageJson = await readPackageJson()\n        const outdatedDeps = emitOutdatedDeps().then((deps) => deps)\n\n        // whenever a client mounts we send all the current info to the subscribers\n        devtoolsEventClient.on('mounted', async () => {\n          devtoolsEventClient.emit('outdated-deps-read', {\n            outdatedDeps: await outdatedDeps,\n          })\n          devtoolsEventClient.emit('package-json-read', {\n            packageJson,\n          })\n        })\n      },\n      async handleHotUpdate({ file }) {\n        if (file.endsWith('package.json')) {\n          const newPackageJson = await readPackageJson()\n          devtoolsEventClient.emit('package-json-read', {\n            packageJson: newPackageJson,\n          })\n          emitOutdatedDeps()\n        }\n      },\n    },\n    {\n      name: '@tanstack/devtools:better-console-logs',\n      enforce: 'pre',\n      apply(config) {\n        return config.mode === 'development' && enhancedLogsConfig.enabled\n      },\n      transform(code, id) {\n        // Ignore anything external\n        if (\n          id.includes('node_modules') ||\n          id.includes('?raw') ||\n          id.includes('dist') ||\n          id.includes('build') ||\n          !code.includes('console.')\n        )\n          return\n\n        return enhanceConsoleLog(code, id, port)\n      },\n    },\n  ]\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/utils.d.ts

@@ -1,8 +1,11 @@
 import { Connect } from 'vite';
 import { IncomingMessage, ServerResponse } from 'node:http';
+import { PackageJson } from '@tanstack/devtools-client';
 export declare const handleDevToolsViteRequest: (req: Connect.IncomingMessage, res: ServerResponse<IncomingMessage>, next: Connect.NextFunction, cb: (data: any) => void) => void;
 export declare const parseOpenSourceParam: (source: string) => {
     file: string | undefined;
     line: string | undefined;
     column: string | undefined;
 } | null;
+export declare const tryParseJson: <T extends any>(jsonString: string | null | undefined) => T | null;
+export declare const readPackageJson: () => Promise<PackageJson | null>;

package/dist/esm/utils.js

@@ -1,3 +1,4 @@
+import fs from "node:fs/promises";
 import { normalizePath } from "vite";
 const handleDevToolsViteRequest = (req, res, next, cb) => {
   if (req.url?.includes("__tsd/open-source")) {
@@ -48,8 +49,30 @@ const parseOpenSourceParam = (source) => {
   const [, file, line, column] = parts;
   return { file, line, column };
 };
+const tryReadFile = async (filePath) => {
+  try {
+    const data = await fs.readFile(filePath, "utf-8");
+    return data;
+  } catch (error) {
+    return null;
+  }
+};
+const tryParseJson = (jsonString) => {
+  if (!jsonString) {
+    return null;
+  }
+  try {
+    const result = JSON.parse(jsonString);
+    return result;
+  } catch (error) {
+    return null;
+  }
+};
+const readPackageJson = async () => tryParseJson(await tryReadFile(process.cwd() + "/package.json"));
 export {
   handleDevToolsViteRequest,
-  parseOpenSourceParam
+  parseOpenSourceParam,
+  readPackageJson,
+  tryParseJson
 };
 //# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import { normalizePath } from 'vite'\n// import fs from 'node:fs/promises'\nimport type { Connect } from 'vite'\nimport type { IncomingMessage, ServerResponse } from 'node:http'\n\nexport const handleDevToolsViteRequest = (\n  req: Connect.IncomingMessage,\n  res: ServerResponse<IncomingMessage>,\n  next: Connect.NextFunction,\n  cb: (data: any) => void,\n) => {\n  if (req.url?.includes('__tsd/open-source')) {\n    const searchParams = new URLSearchParams(req.url.split('?')[1])\n\n    const source = searchParams.get('source')\n    if (!source) {\n      return\n    }\n\n    const parsed = parseOpenSourceParam(source)\n    if (!parsed) {\n      return\n    }\n    const { file, line, column } = parsed\n\n    cb({\n      type: 'open-source',\n      routine: 'open-source',\n      data: {\n        source: file ? normalizePath(`${process.cwd()}/${file}`) : undefined,\n        line,\n        column,\n      },\n    })\n    res.setHeader('Content-Type', 'text/html')\n    res.write(`<script> window.close(); </script>`)\n    res.end()\n    return\n  }\n  if (!req.url?.includes('__tsd')) {\n    return next()\n  }\n\n  const chunks: Array<any> = []\n  req.on('data', (chunk) => {\n    chunks.push(chunk)\n  })\n  req.on('end', () => {\n    const dataToParse = Buffer.concat(chunks)\n    try {\n      const parsedData = JSON.parse(dataToParse.toString())\n      cb(parsedData)\n    } catch (e) {}\n    res.write('OK')\n  })\n}\n\nexport const parseOpenSourceParam = (source: string) => {\n  // Capture everything up to the last two colon-separated numeric parts as the file.\n  // This supports filenames that may themselves contain colons.\n  const parts = source.match(/^(.+):(\\d+):(\\d+)$/)\n\n  if (!parts) return null\n\n  const [, file, line, column] = parts\n  return { file, line, column }\n}\n\n/* export const tryReadFile = async (\n  filePath: string\n) => {\n  try {\n    const data = await fs.readFile(filePath, 'utf-8')\n    return data\n  } catch (error) {\n\n    return null\n  }\n}\n\nexport const tryParseJson = (jsonString: string) => {\n  try {\n    const result = JSON.parse(jsonString)\n    return result\n  } catch (error) {\n    return null\n  }\n} */\n"],"names":[],"mappings":";AAKO,MAAM,4BAA4B,CACvC,KACA,KACA,MACA,OACG;AACH,MAAI,IAAI,KAAK,SAAS,mBAAmB,GAAG;AAC1C,UAAM,eAAe,IAAI,gBAAgB,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC;AAE9D,UAAM,SAAS,aAAa,IAAI,QAAQ;AACxC,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,SAAS,qBAAqB,MAAM;AAC1C,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,EAAE,MAAM,MAAM,OAAA,IAAW;AAE/B,OAAG;AAAA,MACD,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ,OAAO,cAAc,GAAG,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI;AAAA,QAC3D;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,QAAI,UAAU,gBAAgB,WAAW;AACzC,QAAI,MAAM,qCAAoC;AAC9C,QAAI,IAAA;AACJ;AAAA,EACF;AACA,MAAI,CAAC,IAAI,KAAK,SAAS,OAAO,GAAG;AAC/B,WAAO,KAAA;AAAA,EACT;AAEA,QAAM,SAAqB,CAAA;AAC3B,MAAI,GAAG,QAAQ,CAAC,UAAU;AACxB,WAAO,KAAK,KAAK;AAAA,EACnB,CAAC;AACD,MAAI,GAAG,OAAO,MAAM;AAClB,UAAM,cAAc,OAAO,OAAO,MAAM;AACxC,QAAI;AACF,YAAM,aAAa,KAAK,MAAM,YAAY,UAAU;AACpD,SAAG,UAAU;AAAA,IACf,SAAS,GAAG;AAAA,IAAC;AACb,QAAI,MAAM,IAAI;AAAA,EAChB,CAAC;AACH;AAEO,MAAM,uBAAuB,CAAC,WAAmB;AAGtD,QAAM,QAAQ,OAAO,MAAM,oBAAoB;AAE/C,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,GAAG,MAAM,MAAM,MAAM,IAAI;AAC/B,SAAO,EAAE,MAAM,MAAM,OAAA;AACvB;"}
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import fs from 'node:fs/promises'\nimport { normalizePath } from 'vite'\nimport type { Connect } from 'vite'\nimport type { IncomingMessage, ServerResponse } from 'node:http'\nimport type { PackageJson } from '@tanstack/devtools-client'\n\nexport const handleDevToolsViteRequest = (\n  req: Connect.IncomingMessage,\n  res: ServerResponse<IncomingMessage>,\n  next: Connect.NextFunction,\n  cb: (data: any) => void,\n) => {\n  if (req.url?.includes('__tsd/open-source')) {\n    const searchParams = new URLSearchParams(req.url.split('?')[1])\n\n    const source = searchParams.get('source')\n    if (!source) {\n      return\n    }\n\n    const parsed = parseOpenSourceParam(source)\n    if (!parsed) {\n      return\n    }\n    const { file, line, column } = parsed\n\n    cb({\n      type: 'open-source',\n      routine: 'open-source',\n      data: {\n        source: file ? normalizePath(`${process.cwd()}/${file}`) : undefined,\n        line,\n        column,\n      },\n    })\n    res.setHeader('Content-Type', 'text/html')\n    res.write(`<script> window.close(); </script>`)\n    res.end()\n    return\n  }\n  if (!req.url?.includes('__tsd')) {\n    return next()\n  }\n\n  const chunks: Array<any> = []\n  req.on('data', (chunk) => {\n    chunks.push(chunk)\n  })\n  req.on('end', () => {\n    const dataToParse = Buffer.concat(chunks)\n    try {\n      const parsedData = JSON.parse(dataToParse.toString())\n      cb(parsedData)\n    } catch (e) {}\n    res.write('OK')\n  })\n}\n\nexport const parseOpenSourceParam = (source: string) => {\n  // Capture everything up to the last two colon-separated numeric parts as the file.\n  // This supports filenames that may themselves contain colons.\n  const parts = source.match(/^(.+):(\\d+):(\\d+)$/)\n\n  if (!parts) return null\n\n  const [, file, line, column] = parts\n  return { file, line, column }\n}\n\nconst tryReadFile = async (filePath: string) => {\n  try {\n    const data = await fs.readFile(filePath, 'utf-8')\n    return data\n  } catch (error) {\n    return null\n  }\n}\n\nexport const tryParseJson = <T extends any>(\n  jsonString: string | null | undefined,\n) => {\n  if (!jsonString) {\n    return null\n  }\n  try {\n    const result = JSON.parse(jsonString)\n    return result as T\n  } catch (error) {\n    return null\n  }\n}\n\nexport const readPackageJson = async () =>\n  tryParseJson<PackageJson>(await tryReadFile(process.cwd() + '/package.json'))\n"],"names":[],"mappings":";;AAMO,MAAM,4BAA4B,CACvC,KACA,KACA,MACA,OACG;AACH,MAAI,IAAI,KAAK,SAAS,mBAAmB,GAAG;AAC1C,UAAM,eAAe,IAAI,gBAAgB,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC;AAE9D,UAAM,SAAS,aAAa,IAAI,QAAQ;AACxC,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,SAAS,qBAAqB,MAAM;AAC1C,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,UAAM,EAAE,MAAM,MAAM,OAAA,IAAW;AAE/B,OAAG;AAAA,MACD,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ,OAAO,cAAc,GAAG,QAAQ,KAAK,IAAI,IAAI,EAAE,IAAI;AAAA,QAC3D;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,QAAI,UAAU,gBAAgB,WAAW;AACzC,QAAI,MAAM,qCAAoC;AAC9C,QAAI,IAAA;AACJ;AAAA,EACF;AACA,MAAI,CAAC,IAAI,KAAK,SAAS,OAAO,GAAG;AAC/B,WAAO,KAAA;AAAA,EACT;AAEA,QAAM,SAAqB,CAAA;AAC3B,MAAI,GAAG,QAAQ,CAAC,UAAU;AACxB,WAAO,KAAK,KAAK;AAAA,EACnB,CAAC;AACD,MAAI,GAAG,OAAO,MAAM;AAClB,UAAM,cAAc,OAAO,OAAO,MAAM;AACxC,QAAI;AACF,YAAM,aAAa,KAAK,MAAM,YAAY,UAAU;AACpD,SAAG,UAAU;AAAA,IACf,SAAS,GAAG;AAAA,IAAC;AACb,QAAI,MAAM,IAAI;AAAA,EAChB,CAAC;AACH;AAEO,MAAM,uBAAuB,CAAC,WAAmB;AAGtD,QAAM,QAAQ,OAAO,MAAM,oBAAoB;AAE/C,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,GAAG,MAAM,MAAM,MAAM,IAAI;AAC/B,SAAO,EAAE,MAAM,MAAM,OAAA;AACvB;AAEA,MAAM,cAAc,OAAO,aAAqB;AAC9C,MAAI;AACF,UAAM,OAAO,MAAM,GAAG,SAAS,UAAU,OAAO;AAChD,WAAO;AAAA,EACT,SAAS,OAAO;AACd,WAAO;AAAA,EACT;AACF;AAEO,MAAM,eAAe,CAC1B,eACG;AACH,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,MAAI;AACF,UAAM,SAAS,KAAK,MAAM,UAAU;AACpC,WAAO;AAAA,EACT,SAAS,OAAO;AACd,WAAO;AAAA,EACT;AACF;AAEO,MAAM,kBAAkB,YAC7B,aAA0B,MAAM,YAAY,QAAQ,IAAA,IAAQ,eAAe,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-vite",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "@babel/types": "^7.28.4",
     "chalk": "^5.6.2",
     "launch-editor": "^2.11.1",
+    "@tanstack/devtools-client": "0.0.2",
     "@tanstack/devtools-event-bus": "0.3.2"
   },
   "devDependencies": {

package/src/plugin.ts

@@ -1,11 +1,18 @@
+import { exec } from 'node:child_process'
+import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import { handleDevToolsViteRequest } from './utils'
+import {
+  handleDevToolsViteRequest,
+  readPackageJson,
+  tryParseJson,
+} from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
 import { enhanceConsoleLog } from './enhance-logs'
+import type { OutdatedDeps } from '@tanstack/devtools-client'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
@@ -18,7 +25,13 @@ export type TanStackDevtoolsViteConfig = {
   /**
    * The configuration options for the server event bus
    */
-  eventBusConfig?: ServerEventBusConfig
+  eventBusConfig?: ServerEventBusConfig & {
+    /**
+     * Should the server event bus be enabled or not
+     * @default true
+     */
+    enabled?: boolean // defaults to true
+  }
   /**
    * Configuration for enhanced logging.
    */
@@ -55,12 +68,31 @@ export type TanStackDevtoolsViteConfig = {
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
   config
 
+const emitOutdatedDeps = async () => {
+  return await new Promise<OutdatedDeps | null>((resolve) => {
+    exec('npm outdated --json', (_, stdout) => {
+      // npm outdated exits with code 1 if there are outdated packages, but still outputs valid JSON
+      if (stdout) {
+        const newOutdatedDeps = tryParseJson<OutdatedDeps>(stdout)
+        if (!newOutdatedDeps) {
+          return
+        }
+        devtoolsEventClient.emit('outdated-deps-read', {
+          outdatedDeps: newOutdatedDeps,
+        })
+        resolve(newOutdatedDeps)
+      }
+    })
+  })
+}
+
 export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   let port = 5173
   const logging = args?.logging ?? true
   const enhancedLogsConfig = args?.enhancedLogs ?? { enabled: true }
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
+  const serverBusEnabled = args?.eventBusConfig?.enabled ?? true
   const bus = new ServerEventBus(args?.eventBusConfig)
 
   return [
@@ -91,7 +123,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           return
         }
 
-        const solidDedupeDeps = [
+        /*  const solidDedupeDeps = [
           'solid-js',
           'solid-js/web',
           'solid-js/store',
@@ -106,7 +138,7 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           optimizeDeps: {
             include: solidDedupeDeps,
           },
-        }
+        } */
       },
     },
     {
@@ -117,7 +149,9 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return config.mode === 'development'
       },
       configureServer(server) {
-        bus.start()
+        if (serverBusEnabled) {
+          bus.start()
+        }
 
         server.middlewares.use((req, _res, next) => {
           if (req.socket.localPort && req.socket.localPort !== port) {
@@ -182,6 +216,41 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         return transform
       },
     },
+    {
+      name: '@tanstack/devtools:event-client-setup',
+      apply(config, { command }) {
+        if (
+          process.env.CI ||
+          process.env.NODE_ENV !== 'development' ||
+          command !== 'serve'
+        )
+          return false
+        return config.mode === 'development'
+      },
+      async configureServer() {
+        const packageJson = await readPackageJson()
+        const outdatedDeps = emitOutdatedDeps().then((deps) => deps)
+
+        // whenever a client mounts we send all the current info to the subscribers
+        devtoolsEventClient.on('mounted', async () => {
+          devtoolsEventClient.emit('outdated-deps-read', {
+            outdatedDeps: await outdatedDeps,
+          })
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson,
+          })
+        })
+      },
+      async handleHotUpdate({ file }) {
+        if (file.endsWith('package.json')) {
+          const newPackageJson = await readPackageJson()
+          devtoolsEventClient.emit('package-json-read', {
+            packageJson: newPackageJson,
+          })
+          emitOutdatedDeps()
+        }
+      },
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',

package/src/utils.ts

@@ -1,7 +1,8 @@
+import fs from 'node:fs/promises'
 import { normalizePath } from 'vite'
-// import fs from 'node:fs/promises'
 import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { PackageJson } from '@tanstack/devtools-client'
 
 export const handleDevToolsViteRequest = (
   req: Connect.IncomingMessage,
@@ -66,23 +67,28 @@ export const parseOpenSourceParam = (source: string) => {
   return { file, line, column }
 }
 
-/* export const tryReadFile = async (
-  filePath: string
-) => {
+const tryReadFile = async (filePath: string) => {
   try {
     const data = await fs.readFile(filePath, 'utf-8')
     return data
   } catch (error) {
-
     return null
   }
 }
 
-export const tryParseJson = (jsonString: string) => {
+export const tryParseJson = <T extends any>(
+  jsonString: string | null | undefined,
+) => {
+  if (!jsonString) {
+    return null
+  }
   try {
     const result = JSON.parse(jsonString)
-    return result
+    return result as T
   } catch (error) {
     return null
   }
-} */
+}
+
+export const readPackageJson = async () =>
+  tryParseJson<PackageJson>(await tryReadFile(process.cwd() + '/package.json'))