@vitejs/devtools 0.0.0-alpha.9 → 0.1.1

package/dist/popup-ffZHGm5D.js

@@ -0,0 +1,358 @@
+import { G as shallowRef, M as watch, V as reactive, z as markRaw } from "./vue.runtime.esm-bundler-D2MZbyFr.js";
+import { createEventEmitter } from "@vitejs/devtools-kit/utils/events";
+//#region src/client/webcomponents/constants.ts
+const BUILTIN_ENTRY_CLIENT_AUTH_NOTICE = Object.freeze({
+	type: "~builtin",
+	id: "~client-auth-notice",
+	title: "Unauthorized",
+	icon: "i-fluent-emoji-flat-warning"
+});
+const BUILTIN_ENTRIES = Object.freeze([BUILTIN_ENTRY_CLIENT_AUTH_NOTICE]);
+const DEFAULT_CATEGORIES_ORDER = {
+	"~viteplus": -1e3,
+	"default": 0,
+	"app": 100,
+	"framework": 200,
+	"web": 300,
+	"advanced": 400,
+	"~builtin": 1e3
+};
+//#endregion
+//#region src/client/webcomponents/state/dock-settings.ts
+/**
+* Group and sort dock entries based on user settings.
+* Filters out hidden entries and categories, sorts by pinned status, custom order, and default order.
+*/
+function docksGroupByCategories(entries, settings, options) {
+	const { docksHidden, docksCategoriesHidden, docksCustomOrder, docksPinned } = settings;
+	const { includeHidden = false } = options ?? {};
+	const map = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		if (entry.isHidden && !includeHidden) continue;
+		if (!includeHidden && docksHidden.includes(entry.id)) continue;
+		const category = entry.category ?? "default";
+		if (!includeHidden && docksCategoriesHidden.includes(category)) continue;
+		if (!map.has(category)) map.set(category, []);
+		map.get(category).push(entry);
+	}
+	const grouped = Array.from(map.entries()).sort(([a], [b]) => {
+		const ia = DEFAULT_CATEGORIES_ORDER[a] || 0;
+		const ib = DEFAULT_CATEGORIES_ORDER[b] || 0;
+		return ib === ia ? b.localeCompare(a) : ia - ib;
+	});
+	grouped.forEach(([_, items]) => {
+		items.sort((a, b) => {
+			const aPinned = docksPinned.includes(a.id);
+			if (aPinned !== docksPinned.includes(b.id)) return aPinned ? -1 : 1;
+			const customOrderA = docksCustomOrder[a.id] ?? 0;
+			const customOrderB = docksCustomOrder[b.id] ?? 0;
+			if (customOrderA !== customOrderB) return customOrderA - customOrderB;
+			const ia = a.defaultOrder ?? 0;
+			const ib = b.defaultOrder ?? 0;
+			return ib === ia ? b.title.localeCompare(a.title) : ia - ib;
+		});
+	});
+	return grouped;
+}
+/**
+* Split grouped entries into visible and overflow based on capacity.
+*/
+function docksSplitGroupsWithCapacity(groups, capacity) {
+	const visible = [];
+	const overflow = [];
+	let left = capacity;
+	for (const [category, items] of groups) if (left <= 0) overflow.push([category, items]);
+	else if (items.length > left) {
+		visible.push([category, items.slice(0, left)]);
+		overflow.push([category, items.slice(left)]);
+		left = 0;
+	} else {
+		left -= items.length;
+		visible.push([category, items]);
+	}
+	return {
+		visible,
+		overflow
+	};
+}
+//#endregion
+//#region src/client/webcomponents/state/docks.ts
+function DEFAULT_DOCK_PANEL_STORE() {
+	return {
+		width: 80,
+		height: 80,
+		top: 0,
+		left: 10,
+		position: "bottom",
+		open: false,
+		inactiveTimeout: 3e3
+	};
+}
+function createDockEntryState(entry, selected) {
+	const events = createEventEmitter();
+	const state = reactive({
+		entryMeta: entry,
+		get isActive() {
+			return selected.value?.id === entry.id;
+		},
+		domElements: {},
+		events: markRaw(events)
+	});
+	watch(() => selected.value?.id, (newSelectedId) => {
+		if (newSelectedId === entry.id) events.emit("entry:activated");
+		else events.emit("entry:deactivated");
+	}, { immediate: true });
+	watch(() => state.domElements.iframe, (newIframe) => {
+		if (newIframe) events.emit("dom:iframe:mounted", newIframe);
+	}, { immediate: true });
+	watch(() => state.domElements.panel, (newPanel) => {
+		if (newPanel) events.emit("dom:panel:mounted", newPanel);
+	}, { immediate: true });
+	return state;
+}
+function sharedStateToRef(sharedState) {
+	const ref = shallowRef(sharedState.value());
+	sharedState.on("updated", (newState) => {
+		ref.value = newState;
+	});
+	return ref;
+}
+const docksEntriesRefByRpc = /* @__PURE__ */ new WeakMap();
+async function useDocksEntries(rpc) {
+	if (docksEntriesRefByRpc.has(rpc)) return docksEntriesRefByRpc.get(rpc);
+	const docksEntriesRef = sharedStateToRef(await rpc.sharedState.get("devtoolskit:internal:docks", { initialValue: [] }));
+	docksEntriesRefByRpc.set(rpc, docksEntriesRef);
+	return docksEntriesRef;
+}
+//#endregion
+//#region src/client/webcomponents/state/floating-tooltip.ts
+const tooltip = shallowRef(null);
+const docksOverflowPanel = shallowRef(null);
+const dockContextMenu = shallowRef(null);
+function setFloatingTooltip(info) {
+	tooltip.value = info;
+}
+function useFloatingTooltip() {
+	return tooltip;
+}
+function setDocksOverflowPanel(info) {
+	docksOverflowPanel.value = info;
+}
+function useDocksOverflowPanel() {
+	return docksOverflowPanel;
+}
+function setDockContextMenu(info) {
+	dockContextMenu.value = info;
+}
+function useDockContextMenu() {
+	return dockContextMenu;
+}
+//#endregion
+//#region src/client/webcomponents/state/popup.ts
+const PANEL_MIN_SIZE = 20;
+const PANEL_MAX_SIZE = 100;
+const POPUP_MIN_WIDTH = 320;
+const POPUP_MIN_HEIGHT = 240;
+const POPUP_DOCK_ID = "~popup";
+const MAIN_FRAME_ACTION_HANDLER_KEY = "__VITE_DEVTOOLS_TRIGGER_DOCK_ACTION__";
+const popupWindow = shallowRef(null);
+const isPopupOpen = shallowRef(false);
+const popupEvents = createEventEmitter();
+let detachPopupListeners;
+let detachColorModeSync;
+let popupDockElement;
+let loadDockStandalone = async () => {
+	return await import("./DockStandalone-CZAqITKs.js").then((m) => m.DockStandalone);
+};
+popupEvents.on("popup:open-requested", (context) => {
+	openDockPopup(context);
+});
+function getDocumentPictureInPicture() {
+	if (typeof window === "undefined") return;
+	return window.documentPictureInPicture;
+}
+function clearListeners() {
+	detachPopupListeners?.();
+	detachPopupListeners = void 0;
+	detachColorModeSync?.();
+	detachColorModeSync = void 0;
+}
+function resolveColorMode() {
+	const sourceWindow = window;
+	const elements = [sourceWindow.document?.documentElement, sourceWindow.document?.body].filter(Boolean);
+	for (const element of elements) {
+		if (element?.classList?.contains("dark")) return "dark";
+		if (element?.classList?.contains("light")) return "light";
+		const dataTheme = element?.getAttribute?.("data-theme");
+		if (dataTheme === "dark" || dataTheme === "light") return dataTheme;
+	}
+	if (sourceWindow.matchMedia?.("(prefers-color-scheme: dark)").matches) return "dark";
+	return "light";
+}
+function applyPopupColorMode(popup, mode) {
+	popup.document.documentElement?.style.setProperty("color-scheme", mode);
+}
+function setupPopupColorModeSync(popup) {
+	const cleanups = [];
+	const update = () => applyPopupColorMode(popup, resolveColorMode());
+	update();
+	const sourceWindow = window;
+	const sourceDocument = sourceWindow.document;
+	if (typeof MutationObserver !== "undefined" && sourceDocument) {
+		const observer = new MutationObserver(update);
+		for (const element of [sourceDocument.documentElement, sourceDocument.body]) {
+			if (!element) continue;
+			observer.observe(element, {
+				attributes: true,
+				attributeFilter: [
+					"class",
+					"data-theme",
+					"style"
+				]
+			});
+		}
+		cleanups.push(() => observer.disconnect());
+	}
+	if (sourceWindow.matchMedia) {
+		const darkQuery = sourceWindow.matchMedia("(prefers-color-scheme: dark)");
+		const lightQuery = sourceWindow.matchMedia("(prefers-color-scheme: light)");
+		darkQuery.addEventListener("change", update);
+		lightQuery.addEventListener("change", update);
+		cleanups.push(() => {
+			darkQuery.removeEventListener("change", update);
+			lightQuery.removeEventListener("change", update);
+		});
+	}
+	return () => {
+		cleanups.forEach((fn) => fn());
+	};
+}
+function unmountPopupElement() {
+	popupDockElement?.remove();
+	popupDockElement = void 0;
+}
+function clearPopupState() {
+	clearListeners();
+	unmountPopupElement();
+	popupWindow.value = null;
+	isPopupOpen.value = false;
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function syncPanelSizeFromPopup(context, popup) {
+	if (window.innerWidth <= 0 || window.innerHeight <= 0) return;
+	context.panel.store.width = clamp(Math.round(popup.innerWidth / window.innerWidth * 100), PANEL_MIN_SIZE, PANEL_MAX_SIZE);
+	context.panel.store.height = clamp(Math.round(popup.innerHeight / window.innerHeight * 100), PANEL_MIN_SIZE, PANEL_MAX_SIZE);
+}
+async function mountStandaloneApp(context, popup) {
+	const DockStandaloneElement = await loadDockStandalone();
+	const baseStyle = popup.document.createElement("style");
+	baseStyle.textContent = [
+		"html, body {",
+		"  margin: 0;",
+		"  padding: 0;",
+		"  width: 100%;",
+		"  height: 100%;",
+		"  overflow: hidden;",
+		"  background: transparent;",
+		"}",
+		"#vite-devtools-popup-root {",
+		"  width: 100vw;",
+		"  height: 100vh;",
+		"}",
+		"#vite-devtools-popup-root > vite-devtools-dock-standalone {",
+		"  display: block;",
+		"  width: 100%;",
+		"  height: 100%;",
+		"}"
+	].join("\n");
+	popup.document.title = "Vite DevTools";
+	popup.document.head?.appendChild(baseStyle);
+	popup.document.body.textContent = "";
+	const appRoot = popup.document.createElement("div");
+	appRoot.id = "vite-devtools-popup-root";
+	popup.document.body.appendChild(appRoot);
+	const dockElement = new DockStandaloneElement({ context });
+	popupDockElement = dockElement;
+	appRoot.appendChild(dockElement);
+}
+function isDockPopupSupported() {
+	return !!getDocumentPictureInPicture()?.requestWindow;
+}
+function registerMainFrameDockActionHandler(clientType, handler) {
+	if (typeof window === "undefined") return;
+	if (clientType === "standalone") return;
+	window[MAIN_FRAME_ACTION_HANDLER_KEY] = handler;
+}
+async function triggerMainFrameDockAction(clientType, entryId) {
+	if (typeof window === "undefined") return void 0;
+	if (clientType !== "standalone") return void 0;
+	try {
+		const opener = window.opener;
+		if (!opener || opener.closed) return void 0;
+		const handler = opener[MAIN_FRAME_ACTION_HANDLER_KEY];
+		if (typeof handler !== "function") return void 0;
+		return await handler(entryId);
+	} catch {
+		return;
+	}
+}
+function isDockPopupEntryVisible(clientType) {
+	return isDockPopupSupported() && !isPopupOpen.value && clientType !== "standalone";
+}
+function filterPopupDockEntry(groups) {
+	return groups.map(([category, entries]) => [category, entries.filter((entry) => entry.id !== POPUP_DOCK_ID)]).filter(([, entries]) => entries.length > 0);
+}
+function useIsDockPopupOpen() {
+	return isPopupOpen;
+}
+function requestDockPopupOpen(context) {
+	popupEvents.emit("popup:open-requested", context);
+}
+function closeDockPopup() {
+	const popup = popupWindow.value;
+	clearPopupState();
+	if (!popup || popup.closed) return;
+	popup.close();
+}
+async function openDockPopup(context) {
+	setDocksOverflowPanel(null);
+	const currentPopup = popupWindow.value;
+	if (currentPopup?.closed) clearPopupState();
+	else if (currentPopup) {
+		currentPopup.focus();
+		return currentPopup;
+	}
+	const documentPictureInPicture = getDocumentPictureInPicture();
+	if (!documentPictureInPicture?.requestWindow) return null;
+	let openedPopup;
+	try {
+		const popup = openedPopup = await documentPictureInPicture.requestWindow({
+			width: Math.max(POPUP_MIN_WIDTH, Math.round(window.innerWidth * context.panel.store.width / 100)),
+			height: Math.max(POPUP_MIN_HEIGHT, Math.round(window.innerHeight * context.panel.store.height / 100))
+		});
+		await mountStandaloneApp(context, popup);
+		detachColorModeSync = setupPopupColorModeSync(popup);
+		const onResize = () => syncPanelSizeFromPopup(context, popup);
+		const onPageHide = () => {
+			if (popupWindow.value !== popup) return;
+			clearPopupState();
+		};
+		popup.addEventListener("resize", onResize);
+		popup.addEventListener("pagehide", onPageHide);
+		detachPopupListeners = () => {
+			popup.removeEventListener("resize", onResize);
+			popup.removeEventListener("pagehide", onPageHide);
+		};
+		popupWindow.value = popup;
+		isPopupOpen.value = true;
+		return popup;
+	} catch {
+		if (openedPopup && !openedPopup.closed) openedPopup.close();
+		clearPopupState();
+		return null;
+	}
+}
+//#endregion
+export { useDocksEntries as _, requestDockPopupOpen as a, BUILTIN_ENTRIES as b, setDockContextMenu as c, useDockContextMenu as d, useDocksOverflowPanel as f, sharedStateToRef as g, createDockEntryState as h, registerMainFrameDockActionHandler as i, setDocksOverflowPanel as l, DEFAULT_DOCK_PANEL_STORE as m, filterPopupDockEntry as n, triggerMainFrameDockAction as o, useFloatingTooltip as p, isDockPopupEntryVisible as r, useIsDockPopupOpen as s, closeDockPopup as t, setFloatingTooltip as u, docksGroupByCategories as v, BUILTIN_ENTRY_CLIENT_AUTH_NOTICE as x, docksSplitGroupsWithCapacity as y };

package/dist/utils-Csuu5uNf.js

@@ -0,0 +1,10 @@
+import { isIP } from "node:net";
+//#region src/node/utils.ts
+function isObject(value) {
+	return Object.prototype.toString.call(value) === "[object Object]";
+}
+function normalizeHttpServerUrl(host, port) {
+	return `http://${host === "127.0.0.1" ? "localhost" : isIP(host) === 6 ? `[${host}]` : host}:${port}`;
+}
+//#endregion
+export { normalizeHttpServerUrl as n, isObject as t };