@vitejs/devtools 0.0.0-alpha.3 → 0.0.0-alpha.30

package/dist/cli-commands.d.ts

@@ -0,0 +1,18 @@
+//#region src/node/cli-commands.d.ts
+interface StartOptions {
+  root?: string;
+  config?: string;
+  host: string;
+  port?: string | number;
+  open?: boolean;
+}
+declare function start(options: StartOptions): Promise<void>;
+interface BuildOptions {
+  root: string;
+  config?: string;
+  outDir: string;
+  base: string;
+}
+declare function build(options: BuildOptions): Promise<void>;
+//#endregion
+export { BuildOptions, StartOptions, build, start };

package/dist/cli-commands.js

@@ -0,0 +1,67 @@
+import { i as getPort, n as createDevToolsMiddleware, o as ansis_default, r as MARK_NODE } from "./plugins-BbzqUdpu.js";
+import { dirClientStandalone } from "./dirs.js";
+import { t as startStandaloneDevTools } from "./standalone-DVh1a9tu.js";
+import { join, relative, resolve } from "pathe";
+import { existsSync } from "node:fs";
+import sirv from "sirv";
+import { createApp, eventHandler, fromNodeMiddleware, sendRedirect, toNodeListener } from "h3";
+import fs$1 from "node:fs/promises";
+import { createServer } from "node:http";
+import open from "open";
+
+//#region src/node/cli-commands.ts
+async function start(options) {
+	const { host } = options;
+	const port = await getPort({
+		host,
+		port: options.port == null ? void 0 : +options.port,
+		portRange: [9999, 15e3]
+	});
+	const devtools = await startStandaloneDevTools({ cwd: options.root });
+	const { h3 } = await createDevToolsMiddleware({
+		cwd: devtools.config.root,
+		hostWebSocket: host,
+		context: devtools.context
+	});
+	const app = createApp();
+	for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs) app.use(baseUrl, fromNodeMiddleware(sirv(distDir, {
+		dev: true,
+		single: true
+	})));
+	app.use("/.devtools/", h3.handler);
+	app.use("/", eventHandler(async (event) => {
+		if (event.node.req.url === "/") return sendRedirect(event, "/.devtools/");
+	}));
+	createServer(toNodeListener(app)).listen(port, host, async () => {
+		console.log(ansis_default.green`${MARK_NODE} Vite DevTools started at`, ansis_default.green(`http://${host === "127.0.0.1" ? "localhost" : host}:${port}`), "\n");
+		if (options.open) await open(`http://${host === "127.0.0.1" ? "localhost" : host}:${port}`);
+	});
+}
+async function build(options) {
+	console.log(ansis_default.cyan`${MARK_NODE} Building static Vite DevTools...`);
+	const devtools = await startStandaloneDevTools({
+		cwd: options.root,
+		config: options.config
+	});
+	const outDir = resolve(devtools.config.root, options.outDir);
+	if (existsSync(outDir)) await fs$1.rm(outDir, { recursive: true });
+	const devToolsRoot = join(outDir, ".devtools");
+	await fs$1.mkdir(devToolsRoot, { recursive: true });
+	await fs$1.cp(dirClientStandalone, devToolsRoot, { recursive: true });
+	for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs) {
+		console.log(ansis_default.cyan`${MARK_NODE} Copying static files from ${distDir} to ${join(outDir, baseUrl)}`);
+		await fs$1.mkdir(join(outDir, baseUrl), { recursive: true });
+		await fs$1.cp(distDir, join(outDir, baseUrl), { recursive: true });
+	}
+	await fs$1.mkdir(resolve(devToolsRoot, "api"), { recursive: true });
+	await fs$1.writeFile(resolve(devToolsRoot, ".vdt-connection.json"), JSON.stringify({ backend: "static" }, null, 2), "utf-8");
+	console.log(ansis_default.cyan`${MARK_NODE} Writing RPC dump to ${resolve(devToolsRoot, ".vdt-rpc-dump.json")}`);
+	const dump = {};
+	for (const [key, value] of Object.entries(devtools.context.rpc.functions)) if (value.type === "static") dump[key] = await value.handler?.();
+	await fs$1.writeFile(resolve(devToolsRoot, ".vdt-rpc-dump.json"), JSON.stringify(dump, null, 2), "utf-8");
+	console.log(ansis_default.green`${MARK_NODE} Built to ${relative(devtools.config.root, outDir)}`);
+	throw new Error("[Vite DevTools] Build mode of Vite DevTools is not yet complete");
+}
+
+//#endregion
+export { build, start };

package/dist/cli.js

@@ -1,98 +1,15 @@
-import { DevTools, MARK_NODE, ansis_default, createApp, createDevToolsContext, createDevToolsMiddleware, eventHandler, getPort, sendRedirect, toNodeListener } from "./plugins-DDjui9Ga.js";
-import { dirClientStandalone } from "./dirs-B7dOX6eI.js";
-import { existsSync } from "node:fs";
+import "./plugins-BbzqUdpu.js";
+import { build, start } from "./cli-commands.js";
 import process from "node:process";
-import { loadConfigFromFile, resolveConfig } from "vite";
-import fs from "node:fs/promises";
-import { createServer } from "node:http";
 import cac from "cac";
-import open from "open";
-import { join, relative, resolve } from "pathe";
 
-//#region src/node/standalone.ts
-async function startStandaloneDevTools(options = {}) {
-	const { cwd = process.cwd(), command = "build", mode = "production" } = options;
-	const config = (await loadConfigFromFile({
-		command,
-		mode
-	}, options.config, cwd))?.config || {};
-	config.plugins ||= [];
-	config.plugins.push(DevTools());
-	dedupeVitePlugins(config.plugins, (plugin) => plugin.name?.startsWith("vite:devtools"));
-	const resolved = await resolveConfig(config, command, mode);
-	const context = await createDevToolsContext(resolved);
-	return {
-		config: resolved,
-		context
-	};
-}
-function dedupeVitePlugins(plugins, include) {
-	const toDelete = [];
-	const map = /* @__PURE__ */ new Map();
-	for (let i = 0; i < plugins.length; i++) {
-		const plugin = plugins[i];
-		if (!plugin || !include(plugin)) continue;
-		if (map.has(plugin.name)) toDelete.push(i);
-		else map.set(plugin.name, plugin);
-	}
-	toDelete.sort((a, b) => b - a);
-	for (const i of toDelete) plugins.splice(i, 1);
-	return plugins;
-}
-
-//#endregion
 //#region src/node/cli.ts
 const cli = cac("vite-devtools");
 process.on("SIGINT", () => {
 	process.exit(0);
 });
-cli.command("build", "Build devtools with current config file for static hosting").option("--root <root>", "Root directory", { default: process.cwd() }).option("--config <config>", "Vite config file").option("--base <baseURL>", "Base URL for deployment", { default: "/" }).option("--outDir <dir>", "Output directory", { default: ".vite-devtools" }).action(async (options) => {
-	console.log(ansis_default.cyan`${MARK_NODE} Building static Vite DevTools...`);
-	const devtools = await startStandaloneDevTools({
-		cwd: options.root,
-		config: options.config
-	});
-	const outDir = resolve(devtools.config.root, options.outDir);
-	if (existsSync(outDir)) await fs.rm(outDir, { recursive: true });
-	const devToolsRoot = join(outDir, "__vite_devtools__");
-	await fs.mkdir(devToolsRoot, { recursive: true });
-	await fs.cp(dirClientStandalone, devToolsRoot, { recursive: true });
-	for (const { baseUrl, distDir } of devtools.context.staticDirs) {
-		console.log(ansis_default.cyan`${MARK_NODE} Copying static files from ${distDir} to ${join(outDir, baseUrl)}`);
-		await fs.mkdir(join(outDir, baseUrl), { recursive: true });
-		await fs.cp(distDir, join(outDir, baseUrl), { recursive: true });
-	}
-	await fs.mkdir(resolve(devToolsRoot, "api"), { recursive: true });
-	await fs.writeFile(resolve(devToolsRoot, "api/connection.json"), JSON.stringify({ backend: "static" }, null, 2), "utf-8");
-	console.log(ansis_default.cyan`${MARK_NODE} Writing RPC dump to ${resolve(devToolsRoot, "api/rpc-dump.json")}`);
-	const dump = {};
-	for (const [key, value] of Object.entries(devtools.context.rpc.functions)) if (value.type === "static") dump[key] = await value.handler?.();
-	await fs.writeFile(resolve(devToolsRoot, "api/rpc-dump.json"), JSON.stringify(dump, null, 2), "utf-8");
-	console.log(ansis_default.green`${MARK_NODE} Built to ${relative(devtools.config.root, outDir)}`);
-	throw new Error("[Vite DevTools] Build mode of Vite DevTools is not yet complete");
-});
-cli.command("", "Start devtools").option("--root <root>", "Root directory", { default: process.cwd() }).option("--config <config>", "Vite config file").option("--host <host>", "Host", { default: process.env.HOST || "127.0.0.1" }).option("--port <port>", "Port", { default: process.env.PORT || 9999 }).option("--open", "Open browser", { default: true }).action(async (options) => {
-	const host = options.host;
-	const port = await getPort({
-		port: options.port,
-		portRange: [9999, 15e3],
-		host
-	});
-	const devtools = await startStandaloneDevTools({ cwd: options.root });
-	const { h3 } = await createDevToolsMiddleware({
-		cwd: devtools.config.root,
-		context: devtools.context
-	});
-	const app = createApp();
-	app.use("/", eventHandler(async (event) => {
-		if (event.node.req.url === "/") return sendRedirect(event, "/__vite_devtools__/");
-	}));
-	app.use("/__vite_devtools__", h3.handler);
-	createServer(toNodeListener(app)).listen(port, host, async () => {
-		console.log(ansis_default.green`${MARK_NODE} Vite DevTools started at`, ansis_default.green(`http://${host === "127.0.0.1" ? "localhost" : host}:${port}`), "\n");
-		if (options.open) await open(`http://${host === "127.0.0.1" ? "localhost" : host}:${port}`);
-	});
-});
+cli.command("build", "Build devtools with current config file for static hosting").option("--root <root>", "Root directory", { default: process.cwd() }).option("--config <config>", "Vite config file").option("--base <baseURL>", "Base URL for deployment", { default: "/" }).option("--outDir <dir>", "Output directory", { default: ".vite-devtools" }).action(build);
+cli.command("", "Start devtools").option("--root <root>", "Root directory", { default: process.cwd() }).option("--config <config>", "Vite config file").option("--host <host>", "Host", { default: process.env.HOST || "127.0.0.1" }).option("--port <port>", "Port", { default: process.env.PORT || 9999 }).option("--open", "Open browser", { default: true }).action(start);
 cli.help();
 cli.parse();
 

package/dist/client/inject.js

@@ -1,29 +1,126 @@
-import { useLocalStorage } from "../core-uTAXYiA1.js";
+import { I as reactive, P as markRaw, R as ref, V as toRefs, k as watchEffect, s as computed } from "../vue.runtime.esm-bundler-DL0i8o0W.js";
+import { i as useLocalStorage } from "../dist-BpFPAu5f.js";
+import { a as docksGroupByCategories, i as useDocksEntries, n as createDockEntryState, s as BUILTIN_ENTRIES, t as DEFAULT_DOCK_PANEL_STORE } from "../docks-CYaKLVhQ.js";
+import { DEFAULT_STATE_USER_SETTINGS } from "@vitejs/devtools-kit/constants";
 import { getDevToolsRpcClient } from "@vitejs/devtools-kit/client";
 
+//#region src/client/webcomponents/state/setup-script.ts
+function _executeSetupScript(entry, context) {
+	const id = `${entry.type}:${entry.id}`;
+	return import(
+		/* @vite-ignore */
+		["/.devtools", "imports"].join("-")
+).then((module) => {
+		const importFn = module.importsMap[id];
+		if (!importFn) return Promise.reject(/* @__PURE__ */ new Error(`[VITE DEVTOOLS] No import found for id: ${id}`));
+		return importFn().then((fn) => fn(context));
+	}).catch((error) => {
+		console.error("[VITE DEVTOOLS] Error executing import action", error);
+		return Promise.reject(error);
+	});
+}
+const _setupPromises = /* @__PURE__ */ new Map();
+function executeSetupScript(entry, context) {
+	if (_setupPromises.has(entry.id)) return _setupPromises.get(entry.id);
+	const promise = _executeSetupScript(entry, context);
+	_setupPromises.set(entry.id, promise);
+	return promise;
+}
+
+//#endregion
+//#region src/client/webcomponents/state/context.ts
+let _docksContext;
+async function createDocksContext(clientType, rpc, panelStore) {
+	if (_docksContext) return _docksContext;
+	const dockEntries = await useDocksEntries(rpc);
+	const selectedId = ref(null);
+	const selected = computed(() => dockEntries.value.find((entry) => entry.id === selectedId.value) ?? BUILTIN_ENTRIES.find((entry) => entry.id === selectedId.value) ?? null);
+	const dockEntryStateMap = reactive(/* @__PURE__ */ new Map());
+	watchEffect(() => {
+		for (const entry of dockEntries.value) {
+			if (dockEntryStateMap.has(entry.id)) {
+				dockEntryStateMap.get(entry.id).entryMeta = entry;
+				continue;
+			}
+			dockEntryStateMap.set(entry.id, createDockEntryState(entry, selected));
+		}
+	});
+	panelStore ||= ref(DEFAULT_DOCK_PANEL_STORE());
+	const switchEntry = async (id = null) => {
+		if (id == null) {
+			selectedId.value = null;
+			return true;
+		}
+		if (id === "~client-auth-notice") {
+			selectedId.value = id;
+			panelStore.value.open = true;
+			return true;
+		}
+		const entry = dockEntries.value.find((e) => e.id === id);
+		if (!entry) return false;
+		if (entry.type === "action" || entry.type === "custom-render" || entry.type === "iframe" && entry.clientScript) {
+			const current = dockEntryStateMap.get(id);
+			await executeSetupScript(entry, reactive({
+				...toRefs(_docksContext),
+				current
+			}));
+		}
+		selectedId.value = entry.id;
+		panelStore.value.open = true;
+		return true;
+	};
+	const toggleEntry = async (id) => {
+		if (selectedId.value === id) return switchEntry(null);
+		return switchEntry(id);
+	};
+	let _settingsStorePromise;
+	const getSettingsStore = async () => {
+		if (!_settingsStorePromise) _settingsStorePromise = rpc.sharedState.get("devtoolskit:internal:user-settings", { initialValue: DEFAULT_STATE_USER_SETTINGS() });
+		return _settingsStorePromise;
+	};
+	const settingsStore = markRaw(await getSettingsStore());
+	const groupedEntries = computed(() => {
+		return docksGroupByCategories(dockEntries.value, settingsStore.value());
+	});
+	_docksContext = reactive({
+		panel: {
+			store: panelStore,
+			isDragging: false,
+			isResizing: false,
+			isVertical: computed(() => panelStore.value.position === "left" || panelStore.value.position === "right")
+		},
+		docks: {
+			selectedId,
+			selected,
+			entries: dockEntries,
+			entryToStateMap: markRaw(dockEntryStateMap),
+			groupedEntries,
+			settings: settingsStore,
+			getStateById: (id) => dockEntryStateMap.get(id),
+			switchEntry,
+			toggleEntry
+		},
+		rpc,
+		clientType
+	});
+	return _docksContext;
+}
+
+//#endregion
 //#region src/client/inject/index.ts
 async function init() {
 	console.log("[VITE DEVTOOLS] Client injected");
-	const { rpc } = await getDevToolsRpcClient();
-	console.log("[VITE DEVTOOLS] RPC", rpc);
-	const docks = await rpc["vite:core:list-dock-entries"]();
-	console.log("[VITE DEVTOOLS] Docks", docks);
-	const rpcFunctions = await rpc["vite:core:list-rpc-functions"]();
-	console.log("[VITE DEVTOOLS] RPC Functions", rpcFunctions);
-	const state = useLocalStorage("vite-devtools-dock-state", {
+	const context = await createDocksContext("embedded", await getDevToolsRpcClient(), useLocalStorage("vite-devtools-dock-state", {
 		width: 80,
 		height: 80,
 		top: 0,
 		left: 0,
 		position: "left",
 		open: false,
-		minimizePanelInactive: 3e3
-	}, { mergeDefaults: true });
+		inactiveTimeout: 3e3
+	}, { mergeDefaults: true }));
 	const { DockEmbedded } = await import("@vitejs/devtools/client/webcomponents");
-	const dockEl = new DockEmbedded({
-		state,
-		docks
-	});
+	const dockEl = new DockEmbedded({ context });
 	document.body.appendChild(dockEl);
 }
 if (window.parent !== window) console.log("[VITE DEVTOOLS] Skipping in iframe");

package/dist/client/standalone/assets/ViewBuiltinLogs-CYvdMq-7.js

@@ -0,0 +1 @@
+import{c as e,m as t,n}from"./index-DWC0UjCz.js";var r={};function i(n,r){return t(),e(`div`,null,` Logs // TODO: `)}var a=n(r,[[`render`,i]]);export{a as default};