@vitejs/devtools 0.0.0-alpha.8 → 0.1.0

package/dist/cli-commands-DRp01A04.js

@@ -0,0 +1,178 @@
+import { a as createDevToolsContext, i as getPort, n as renderDockImportsMap, o as ansis_default, r as createDevToolsMiddleware, t as DevTools } from "./plugins-6tW2SoNv.js";
+import { dirClientStandalone } from "./dirs.js";
+import { resolveConfig } from "vite";
+import { DEVTOOLS_CONNECTION_META_FILENAME, DEVTOOLS_DIRNAME, DEVTOOLS_DOCK_IMPORTS_FILENAME, DEVTOOLS_MOUNT_PATH, DEVTOOLS_RPC_DUMP_DIRNAME, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME } from "@vitejs/devtools-kit/constants";
+import { dirname, join, relative, resolve } from "pathe";
+import { existsSync } from "node:fs";
+import { dumpFunctions, getRpcHandler } from "@vitejs/devtools-rpc";
+import process from "node:process";
+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/standalone.ts
+async function startStandaloneDevTools(options = {}) {
+	const { cwd = process.cwd(), command = "build", mode = "production" } = options;
+	const resolved = await resolveConfig({
+		configFile: options.config,
+		root: cwd,
+		plugins: [DevTools()]
+	}, command, mode);
+	dedupeVitePlugins(resolved.plugins, (plugin) => plugin.name?.startsWith("vite:devtools"));
+	return {
+		config: resolved,
+		context: await createDevToolsContext(resolved)
+	};
+}
+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/static-dump.ts
+function makeDumpKey(name) {
+	return encodeURIComponent(name.replaceAll(":", "~"));
+}
+function makeStaticPath(name) {
+	return `${DEVTOOLS_RPC_DUMP_DIRNAME}/${makeDumpKey(name)}.static.json`;
+}
+function makeQueryRecordPath(name, hash) {
+	return `${DEVTOOLS_RPC_DUMP_DIRNAME}/${makeDumpKey(name)}.record.${hash}.json`;
+}
+function makeQueryFallbackPath(name) {
+	return `${DEVTOOLS_RPC_DUMP_DIRNAME}/${makeDumpKey(name)}.fallback.json`;
+}
+async function resolveRecord(record) {
+	return typeof record === "function" ? await record() : record;
+}
+async function collectStaticRpcDump(definitions, context) {
+	const manifest = {};
+	const files = {};
+	for (const definition of definitions) {
+		const type = definition.type ?? "query";
+		if (type === "static") {
+			const handler = await getRpcHandler(definition, context);
+			const path = makeStaticPath(definition.name);
+			files[path] = { output: await Promise.resolve(handler()) };
+			manifest[definition.name] = {
+				type: "static",
+				path
+			};
+			continue;
+		}
+		if (type !== "query") continue;
+		const store = await dumpFunctions([definition], context);
+		if (!(definition.name in store.definitions)) continue;
+		const queryEntry = {
+			type: "query",
+			records: {}
+		};
+		const prefix = `${definition.name}---`;
+		for (const [recordKey, recordOrGetter] of Object.entries(store.records)) {
+			if (!recordKey.startsWith(prefix)) continue;
+			const key = recordKey.slice(prefix.length);
+			const record = await resolveRecord(recordOrGetter);
+			if (key === "fallback") {
+				const path = makeQueryFallbackPath(definition.name);
+				files[path] = record;
+				queryEntry.fallback = path;
+			} else {
+				const path = makeQueryRecordPath(definition.name, key);
+				files[path] = record;
+				queryEntry.records[key] = path;
+			}
+		}
+		if (!Object.keys(queryEntry.records).length && !queryEntry.fallback) continue;
+		manifest[definition.name] = queryEntry;
+	}
+	return {
+		manifest,
+		files
+	};
+}
+//#endregion
+//#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_MOUNT_PATH, h3.handler);
+	app.use("/", eventHandler(async (event) => {
+		if (event.node.req.url === "/") return sendRedirect(event, DEVTOOLS_MOUNT_PATH);
+	}));
+	createServer(toNodeListener(app)).listen(port, host, async () => {
+		console.log(ansis_default.green`${"⬢"} 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`${"⬢"} 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_DIRNAME);
+	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`${"⬢"} 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, DEVTOOLS_RPC_DUMP_DIRNAME), { recursive: true });
+	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_CONNECTION_META_FILENAME), JSON.stringify({ backend: "static" }, null, 2), "utf-8");
+	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_DOCK_IMPORTS_FILENAME), renderDockImportsMap(devtools.context.docks.values()), "utf-8");
+	console.log(ansis_default.cyan`${"⬢"} Writing RPC dump to ${resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME)}`);
+	const dump = await collectStaticRpcDump(devtools.context.rpc.definitions.values(), devtools.context);
+	for (const [filepath, data] of Object.entries(dump.files)) {
+		const fullpath = resolve(devToolsRoot, filepath);
+		await fs$1.mkdir(dirname(fullpath), { recursive: true });
+		await fs$1.writeFile(fullpath, JSON.stringify(data, null, 2), "utf-8");
+	}
+	await fs$1.writeFile(resolve(devToolsRoot, DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME), JSON.stringify(dump.manifest, null, 2), "utf-8");
+	await fs$1.writeFile(resolve(outDir, "index.html"), [
+		"<!doctype html>",
+		"<html lang=\"en\">",
+		"<head>",
+		"  <meta charset=\"UTF-8\">",
+		"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
+		"  <title>Vite DevTools</title>",
+		`  <meta http-equiv="refresh" content="0; url=${DEVTOOLS_MOUNT_PATH}">`,
+		"</head>",
+		"<body>",
+		`  <script>location.replace(${JSON.stringify(DEVTOOLS_MOUNT_PATH)})<\/script>`,
+		"</body>",
+		"</html>"
+	].join("\n"), "utf-8");
+	console.log(ansis_default.green`${"⬢"} Built to ${relative(devtools.config.root, outDir)}`);
+	console.warn(ansis_default.yellow`${"⬢"} Static build is still experimental and not yet complete.`);
+	console.warn(ansis_default.yellow`${"⬢"} Generated output may be missing features and can change without notice.`);
+}
+//#endregion
+export { start as n, build as t };

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,3 @@
+import "./plugins-6tW2SoNv.js";
+import { n as start, t as build } from "./cli-commands-DRp01A04.js";
+export { build, start };

package/dist/cli.js

@@ -1,103 +1,14 @@
-import { a as ansis_default, c as fromNodeMiddleware, d as createDevToolsContext, i as getPort, l as sendRedirect, n as createDevToolsMiddleware, o as createApp, r as MARK_NODE, s as eventHandler, t as DevTools, u as toNodeListener } from "./plugins-Cj9DSRH1.js";
-import { t as dirClientStandalone } from "./dirs-DcSK9l9L.js";
-import { existsSync } from "node:fs";
-import sirv from "sirv";
+import "./plugins-6tW2SoNv.js";
+import { n as start, t as build } from "./cli-commands-DRp01A04.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);
-	return {
-		config: resolved,
-		context: await createDevToolsContext(resolved)
-	};
-}
-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, ".devtools");
-	await fs.mkdir(devToolsRoot, { recursive: true });
-	await fs.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.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, ".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.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");
-});
-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();
-	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}`);
-	});
-});
+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();
-
-//#endregion
+//#endregion

package/dist/client/inject.js

@@ -1,33 +1,185 @@
-import { r as useLocalStorage } from "../dist-BuuUhVT5.js";
+import { G as toRefs, H as reactive, R as watchEffect, U as ref, V as markRaw, i as useLocalStorage, y as computed } from "../dist-3NIYLDlS.js";
+import { _ as useDocksEntries, a as requestDockPopupOpen, b as BUILTIN_ENTRIES, g as sharedStateToRef, h as createDockEntryState, i as registerMainFrameDockActionHandler, m as DEFAULT_DOCK_PANEL_STORE, o as triggerMainFrameDockAction, v as docksGroupByCategories } from "../popup-EDv_a9nQ.js";
+import { DEFAULT_STATE_USER_SETTINGS, DEVTOOLS_DOCK_IMPORTS_FILENAME, DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID, DEVTOOLS_MOUNT_PATH } from "@vitejs/devtools-kit/constants";
 import { getDevToolsRpcClient } from "@vitejs/devtools-kit/client";
-
+//#region src/client/webcomponents/state/logs-client.ts
+function createRpcHandle(rpc, initialEntry) {
+	let entry = initialEntry;
+	return {
+		get entry() {
+			return entry;
+		},
+		get id() {
+			return entry.id;
+		},
+		async update(patch) {
+			const updated = await rpc.call("devtoolskit:internal:logs:update", entry.id, patch);
+			if (updated) entry = updated;
+			return updated ?? void 0;
+		},
+		async dismiss() {
+			await rpc.call("devtoolskit:internal:logs:remove", entry.id);
+		}
+	};
+}
+function createClientLogsClient(rpc) {
+	return {
+		async add(input) {
+			return createRpcHandle(rpc, await rpc.call("devtoolskit:internal:logs:add", input));
+		},
+		async remove(id) {
+			await rpc.call("devtoolskit:internal:logs:remove", id);
+		},
+		async clear() {
+			await rpc.call("devtoolskit:internal:logs:clear");
+		}
+	};
+}
+//#endregion
+//#region src/client/webcomponents/state/setup-script.ts
+async function loadImportsMapModule(context) {
+	const candidates = context.rpc.connectionMeta.backend === "static" ? [`${DEVTOOLS_MOUNT_PATH}${DEVTOOLS_DOCK_IMPORTS_FILENAME}`, DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID] : [DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID];
+	const errors = [];
+	for (const id of candidates) try {
+		return await import(
+			/* @vite-ignore */
+			id
+);
+	} catch (error) {
+		errors.push(error);
+	}
+	throw new Error("[VITE DEVTOOLS] Failed to load imports map module", { cause: errors });
+}
+function _executeSetupScript(entry, context) {
+	const id = `${entry.type}:${entry.id}`;
+	return loadImportsMapModule(context).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 (entry.type !== "action" && _setupPromises.has(entry.id)) return _setupPromises.get(entry.id);
+	const promise = _executeSetupScript(entry, context);
+	if (entry.type !== "action") _setupPromises.set(entry.id, promise);
+	return promise;
+}
+//#endregion
+//#region src/client/webcomponents/state/context.ts
+const docksContextByRpc = /* @__PURE__ */ new WeakMap();
+async function createDocksContext(clientType, rpc, panelStore) {
+	if (docksContextByRpc.has(rpc)) return docksContextByRpc.get(rpc);
+	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());
+	let docksContext;
+	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;
+		}
+		if (id === "~popup") {
+			requestDockPopupOpen(docksContext);
+			return true;
+		}
+		const entry = dockEntries.value.find((e) => e.id === id);
+		if (!entry) return false;
+		if (entry.type === "action") {
+			if (await triggerMainFrameDockAction(clientType, entry.id) != null) 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,
+				logs: createClientLogsClient(rpc)
+			}));
+		}
+		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 settings = sharedStateToRef(settingsStore);
+	const groupedEntries = computed(() => {
+		return docksGroupByCategories(dockEntries.value, settings.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
+	});
+	registerMainFrameDockActionHandler(clientType, async (id) => {
+		const entry = dockEntries.value.find((e) => e.id === id);
+		if (!entry || entry.type !== "action") return false;
+		return switchEntry(entry.id);
+	});
+	docksContextByRpc.set(rpc, docksContext);
+	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 });
-	const { DockEmbedded } = await import("./webcomponents.js");
-	const dockEl = new DockEmbedded({
-		state,
-		docks
-	});
+		inactiveTimeout: 3e3
+	}, { mergeDefaults: true }));
+	const { DockEmbedded } = await import("@vitejs/devtools/client/webcomponents");
+	const dockEl = new DockEmbedded({ context });
 	document.body.appendChild(dockEl);
 }
 if (window.parent !== window) console.log("[VITE DEVTOOLS] Skipping in iframe");
 else init();
-
 //#endregion
-export { init };
+export { init };