@vitejs/devtools-kit 0.0.0-alpha.1 → 0.0.0-alpha.11

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import { ConnectionMeta, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from "./rpc-ls6mUIa2.js";
+import { D as DevToolsRpcServerFunctions, E as DevToolsRpcClientFunctions, g as DevToolsDockEntry, u as ConnectionMeta } from "./index-CQIA5hSl.js";
 import { WebSocketRpcClientOptions } from "@vitejs/devtools-rpc/presets/ws/client";
 import { BirpcOptions, BirpcReturn } from "birpc";
 
@@ -9,9 +9,37 @@ interface DevToolsRpcClientOptions {
   wsOptions?: Partial<WebSocketRpcClientOptions>;
   rpcOptions?: Partial<BirpcOptions<DevToolsRpcServerFunctions>>;
 }
+/**
+ * Context for client scripts running in dock entries
+ */
+interface DockClientScriptContext {
+  /**
+   * The dock entry info of the current dock item
+   */
+  dockEntry: DevToolsDockEntry;
+  /**
+   * The current state of the dock
+   */
+  dockState: 'active' | 'inactive';
+  /**
+   * Type of the client environment
+   *
+   * 'embedded' - running inside an embedded floating panel
+   * 'standalone' - running inside a standlone window (no user app)
+   */
+  clientType: 'embedded' | 'standalone';
+  /**
+   * Function to hide the panel, if applicable
+   */
+  hidePanel: () => void;
+  /**
+   * The panel element to mount into, if applicable
+   */
+  elPanel?: HTMLElement | null;
+}
 declare function getDevToolsRpcClient(options?: DevToolsRpcClientOptions): Promise<{
   connectionMeta: ConnectionMeta;
   rpc: BirpcReturn<DevToolsRpcServerFunctions, DevToolsRpcClientFunctions>;
 }>;
 //#endregion
-export { DevToolsRpcClientOptions, getDevToolsRpcClient };
+export { DevToolsRpcClientOptions, DockClientScriptContext, getDevToolsRpcClient };

package/dist/client.js

@@ -7,23 +7,22 @@ function isNumeric(str) {
 	return `${+str}` === `${str}`;
 }
 async function getDevToolsRpcClient(options = {}) {
-	const { baseURL = "/__vite_devtools__/api/" } = options;
+	const { baseURL = "/.devtools/" } = options;
 	const urls = Array.isArray(baseURL) ? baseURL : [baseURL];
 	let connectionMeta = options.connectionMeta;
 	if (!connectionMeta) {
 		const errors = [];
-		for (const url$1 of urls) try {
-			connectionMeta = await fetch(`${url$1}connection.json`).then((r) => r.json());
+		for (const url of urls) try {
+			connectionMeta = await fetch(`${url}.vdt-connection.json`).then((r) => r.json());
 			break;
 		} catch (e) {
 			errors.push(e);
 		}
 		if (!connectionMeta) throw new Error(`Failed to get connection meta from ${urls.join(", ")}`, { cause: errors });
 	}
-	const url = isNumeric(connectionMeta.websocket) ? `${location.protocol.replace("http", "ws")}//${location.hostname}:${connectionMeta.websocket}` : connectionMeta.websocket;
 	const rpc = createRpcClient({}, {
 		preset: createWsRpcPreset({
-			url,
+			url: isNumeric(connectionMeta.websocket) ? `${location.protocol.replace("http", "ws")}//${location.hostname}:${connectionMeta.websocket}` : connectionMeta.websocket,
 			...options.wsOptions
 		}),
 		...options.rpcOptions

package/dist/{rpc-ls6mUIa2.d.ts → index-CQIA5hSl.d.ts}

@@ -1,5 +1,5 @@
 import { BirpcFn, BirpcReturn as BirpcReturn$1 } from "birpc";
-import { ResolvedConfig, ViteDevServer } from "vite";
+import { Plugin, ResolvedConfig, ViteDevServer } from "vite";
 
 //#region src/types/rpc-augments.d.ts
 /**
@@ -17,13 +17,57 @@ type EntriesToObject<T extends readonly [string, any][]> = { [K in T[number] as
 //#endregion
 //#region src/types/views.d.ts
 interface DevToolsDockHost {
+  views: Map<string, DevToolsDockEntry>;
   register: (entry: DevToolsDockEntry) => void;
+  update: (entry: DevToolsDockEntry) => void;
   values: () => DevToolsDockEntry[];
 }
+interface DevToolsViewHost {
+  /**
+   * @internal
+   */
+  buildStaticDirs: {
+    baseUrl: string;
+    distDir: string;
+  }[];
+  /**
+   * Helper to host static files
+   * - In `dev` mode, it will register middleware to `viteServer.middlewares` to host the static files
+   * - In `build` mode, it will copy the static files to the dist directory
+   */
+  hostStatic: (baseUrl: string, distDir: string) => void;
+}
+type DevToolsDockEntryCategory = 'app' | 'framework' | 'web' | 'advanced' | 'default';
 interface DevToolsDockEntryBase {
   id: string;
   title: string;
-  icon: string;
+  icon: string | {
+    light: string;
+    dark: string;
+  };
+  /**
+   * The default order of the entry in the dock.
+   * The higher the number the earlier it appears.
+   * @default 0
+   */
+  defaultOrder?: number;
+  /**
+   * The category of the entry
+   * @default 'default'
+   */
+  category?: DevToolsDockEntryCategory;
+}
+interface ClientScriptEntry {
+  /**
+   * The filepath or module name to import from
+   */
+  importFrom: string;
+  /**
+   * The name to import the module as
+   *
+   * @default 'default'
+   */
+  importName?: string;
 }
 interface DevToolsViewIframe extends DevToolsDockEntryBase {
   type: 'iframe';
@@ -34,21 +78,20 @@ interface DevToolsViewIframe extends DevToolsDockEntryBase {
    * When not provided, it would be treated as a unique frame.
    */
   frameId?: string;
-}
-interface DevToolsViewWebComponent extends DevToolsDockEntryBase {
-  type: 'webcomponent';
-  from: string;
-  import: string;
+  /**
+   * Optional client script to import into the iframe
+   */
+  clientScript?: ClientScriptEntry;
 }
 interface DevToolsViewAction extends DevToolsDockEntryBase {
   type: 'action';
-  importFrom: string;
-  /**
-   * @default 'default'
-   */
-  importName?: string;
+  action: ClientScriptEntry;
+}
+interface DevToolsViewCustomRender extends DevToolsDockEntryBase {
+  type: 'custom-render';
+  renderer: ClientScriptEntry;
 }
-type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewWebComponent | DevToolsViewAction;
+type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender;
 //#endregion
 //#region src/types/vite-plugin.d.ts
 interface DevToolsCapabilities {
@@ -69,16 +112,11 @@ interface DevToolsNodeContext {
   readonly viteServer?: ViteDevServer;
   rpc: RpcFunctionsHost;
   docks: DevToolsDockHost;
-  /**
-   * Helper to host static files
-   * - In `dev` mode, it will register middleware to `viteServer.middlewares` to host the static files
-   * - In `build` mode, it will copy the static files to the dist directory
-   */
-  hostStatic: (baseUrl: string, distDir: string) => void;
-  staticDirs: {
-    baseUrl: string;
-    distDir: string;
-  }[];
+  views: DevToolsViewHost;
+  utils: DevToolsNodeUtils;
+}
+interface DevToolsNodeUtils {
+  clientEntryFromSimpleFunction: (fn: () => void) => ClientScriptEntry;
 }
 interface ConnectionMeta {
   backend: 'websocket' | 'static';
@@ -98,6 +136,7 @@ interface RpcFunctionsHost {
   readonly functions: DevToolsRpcServerFunctions;
   readonly definitions: Map<string, RpcFunctionDefinition<string, any, any, any>>;
   register: (fn: RpcFunctionDefinition<string, any, any, any>) => void;
+  update: (fn: RpcFunctionDefinition<string, any, any, any>) => void;
 }
 interface RpcFunctionSetupResult<ARGS extends any[], RETURN = void> {
   handler: (...args: ARGS) => RETURN;
@@ -115,4 +154,14 @@ type RpcDefinitionsFilter<T extends readonly RpcFunctionDefinition<any, any, any
   type: Type;
 } ? T[K] : never };
 //#endregion
-export { type BirpcFn, type BirpcReturn$1 as BirpcReturn, ConnectionMeta, DevToolsCapabilities, DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockHost, DevToolsNodeContext, DevToolsPluginOptions, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, DevToolsViewAction, DevToolsViewIframe, DevToolsViewWebComponent, EntriesToObject, RpcDefinitionsFilter, RpcDefinitionsToFunctions, RpcFunctionDefinition, RpcFunctionSetupResult, RpcFunctionType, RpcFunctionsHost, Thenable };
+//#region src/types/vite-augment.d.ts
+declare module 'vite' {
+  interface Plugin {
+    devtools?: DevToolsPluginOptions;
+  }
+}
+interface PluginWithDevTools extends Plugin {
+  devtools?: DevToolsPluginOptions;
+}
+//#endregion
+export { DevToolsViewIframe as C, DevToolsRpcServerFunctions as D, DevToolsRpcClientFunctions as E, DevToolsViewHost as S, Thenable as T, DevToolsDockEntryBase as _, RpcDefinitionsToFunctions as a, DevToolsViewAction as b, RpcFunctionType as c, DevToolsCapabilities as d, DevToolsNodeContext as f, DevToolsDockEntry as g, ClientScriptEntry as h, RpcDefinitionsFilter as i, RpcFunctionsHost as l, DevToolsPluginOptions as m, BirpcFn as n, RpcFunctionDefinition as o, DevToolsNodeUtils as p, BirpcReturn$1 as r, RpcFunctionSetupResult as s, PluginWithDevTools as t, ConnectionMeta as u, DevToolsDockEntryCategory as v, EntriesToObject as w, DevToolsViewCustomRender as x, DevToolsDockHost as y };

package/dist/index.d.ts

@@ -1,18 +1,7 @@
-import { BirpcFn, BirpcReturn, ConnectionMeta, DevToolsCapabilities, DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockHost, DevToolsNodeContext, DevToolsPluginOptions, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, DevToolsViewAction, DevToolsViewIframe, DevToolsViewWebComponent, EntriesToObject, RpcDefinitionsFilter, RpcDefinitionsToFunctions, RpcFunctionDefinition, RpcFunctionSetupResult, RpcFunctionType, RpcFunctionsHost, Thenable } from "./rpc-ls6mUIa2.js";
-import { Plugin } from "vite";
+import { C as DevToolsViewIframe, D as DevToolsRpcServerFunctions, E as DevToolsRpcClientFunctions, S as DevToolsViewHost, T as Thenable, _ as DevToolsDockEntryBase, a as RpcDefinitionsToFunctions, b as DevToolsViewAction, c as RpcFunctionType, d as DevToolsCapabilities, f as DevToolsNodeContext, g as DevToolsDockEntry, h as ClientScriptEntry, i as RpcDefinitionsFilter, l as RpcFunctionsHost, m as DevToolsPluginOptions, n as BirpcFn, o as RpcFunctionDefinition, p as DevToolsNodeUtils, r as BirpcReturn, s as RpcFunctionSetupResult, t as PluginWithDevTools, u as ConnectionMeta, v as DevToolsDockEntryCategory, w as EntriesToObject, x as DevToolsViewCustomRender, y as DevToolsDockHost } from "./index-CQIA5hSl.js";
 
-//#region src/types/vite-augment.d.ts
-declare module 'vite' {
-  interface Plugin {
-    devtools?: DevToolsPluginOptions;
-  }
-}
-interface PluginWithDevTools extends Plugin {
-  devtools?: DevToolsPluginOptions;
-}
-//#endregion
 //#region src/utils/rpc.d.ts
 declare function defineRpcFunction<NAME extends string, TYPE extends RpcFunctionType, ARGS extends any[], RETURN = void>(definition: RpcFunctionDefinition<NAME, TYPE, ARGS, RETURN>): RpcFunctionDefinition<NAME, TYPE, ARGS, RETURN>;
 declare function getRpcHandler<NAME extends string, TYPE extends RpcFunctionType, ARGS extends any[], RETURN = void>(definition: RpcFunctionDefinition<NAME, TYPE, ARGS, RETURN>, context: DevToolsNodeContext): Promise<(...args: ARGS) => RETURN>;
 //#endregion
-export { BirpcFn, BirpcReturn, ConnectionMeta, DevToolsCapabilities, DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockHost, DevToolsNodeContext, DevToolsPluginOptions, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, DevToolsViewAction, DevToolsViewIframe, DevToolsViewWebComponent, EntriesToObject, PluginWithDevTools, RpcDefinitionsFilter, RpcDefinitionsToFunctions, RpcFunctionDefinition, RpcFunctionSetupResult, RpcFunctionType, RpcFunctionsHost, Thenable, defineRpcFunction, getRpcHandler };
+export { BirpcFn, BirpcReturn, ClientScriptEntry, ConnectionMeta, DevToolsCapabilities, DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockEntryCategory, DevToolsDockHost, DevToolsNodeContext, DevToolsNodeUtils, DevToolsPluginOptions, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, DevToolsViewAction, DevToolsViewCustomRender, DevToolsViewHost, DevToolsViewIframe, EntriesToObject, PluginWithDevTools, RpcDefinitionsFilter, RpcDefinitionsToFunctions, RpcFunctionDefinition, RpcFunctionSetupResult, RpcFunctionType, RpcFunctionsHost, Thenable, defineRpcFunction, getRpcHandler };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vitejs/devtools-kit",
   "type": "module",
-  "version": "0.0.0-alpha.1",
+  "version": "0.0.0-alpha.11",
   "description": "Vite DevTools Kit",
   "author": "VoidZero Inc.",
   "license": "MIT",
   "homepage": "https://github.com/vitejs/devtools#readme",
   "repository": {
-    "directory": "packages/devtools-kit",
+    "directory": "packages/kit",
     "type": "git",
     "url": "git+https://github.com/vitejs/devtools.git"
   },
@@ -30,15 +30,15 @@
     "dist"
   ],
   "peerDependencies": {
-    "vite": "npm:rolldown-vite@^7.1.14"
+    "vite": "npm:rolldown-vite@^7.1.20"
   },
   "dependencies": {
     "birpc": "^2.6.1",
-    "@vitejs/devtools-rpc": "0.0.0-alpha.1"
+    "@vitejs/devtools-rpc": "0.0.0-alpha.11"
   },
   "devDependencies": {
-    "tsdown": "^0.15.6",
-    "vite": "npm:rolldown-vite@^7.1.14"
+    "tsdown": "^0.15.12",
+    "vite": "npm:rolldown-vite@^7.1.20"
   },
   "scripts": {
     "build": "tsdown",