@vue/devtools-kit 8.0.2 → 8.0.3

package/dist/index.cjs

@@ -111,9 +111,7 @@ function getInstanceName(instance) {
 * @param {Vue} instance
 */
 function getUniqueComponentId(instance) {
-	const appId = instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0;
-	const instanceId = instance === instance?.root ? "root" : instance.uid;
-	return `${appId}:${instanceId}`;
+	return `${instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0}:${instance === instance?.root ? "root" : instance.uid}`;
 }
 function getRenderKey(value) {
 	if (value == null) return "";
@@ -356,10 +354,7 @@ function inspectFn(e) {
 function selectComponentFn(e, cb) {
 	e.preventDefault();
 	e.stopPropagation();
-	if (inspectInstance) {
-		const uniqueComponentId = getUniqueComponentId(inspectInstance);
-		cb(uniqueComponentId);
-	}
+	if (inspectInstance) cb(getUniqueComponentId(inspectInstance));
 }
 let inspectComponentHighLighterSelectFn = null;
 function cancelInspectComponentHighLighter() {
@@ -640,7 +635,7 @@ function getTimelineLayersStateFromStorage() {
 		performanceEventEnabled: false,
 		selected: ""
 	};
-	const state = localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID);
+	const state = typeof localStorage.getItem !== "undefined" ? localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID) : null;
 	return state ? JSON.parse(state) : {
 		recordingState: false,
 		mouseEventEnabled: false,
@@ -1079,10 +1074,7 @@ function getPluginSettings(pluginId, fallbackValue) {
 		const localSettings = localStorage.getItem(localKey);
 		if (localSettings) return JSON.parse(localSettings);
 	}
-	if (pluginId) {
-		const item = devtoolsPluginBuffer.find((item$1) => item$1[0].id === pluginId)?.[0] ?? null;
-		return _getSettings(item?.settings ?? {});
-	}
+	if (pluginId) return _getSettings((devtoolsPluginBuffer.find((item) => item[0].id === pluginId)?.[0] ?? null)?.settings ?? {});
 	return _getSettings(fallbackValue);
 }
 function initPluginSettings(pluginId, settings) {
@@ -1616,10 +1608,9 @@ function processState(instance) {
 }
 function getStateTypeAndName(info) {
 	const stateType = info.computed ? "computed" : info.ref ? "ref" : info.reactive ? "reactive" : null;
-	const stateTypeName = stateType ? `${stateType.charAt(0).toUpperCase()}${stateType.slice(1)}` : null;
 	return {
 		stateType,
-		stateTypeName
+		stateTypeName: stateType ? `${stateType.charAt(0).toUpperCase()}${stateType.slice(1)}` : null
 	};
 }
 function processSetupState(instance) {
@@ -1753,15 +1744,11 @@ function processInstanceState(instance) {
 //#region src/core/component/state/index.ts
 function getInstanceState(params) {
 	const instance = getComponentInstance(activeAppRecord.value, params.instanceId);
-	const id = getUniqueComponentId(instance);
-	const name = getInstanceName(instance);
-	const file = instance?.type?.__file;
-	const state = processInstanceState(instance);
 	return {
-		id,
-		name,
-		file,
-		state,
+		id: getUniqueComponentId(instance),
+		name: getInstanceName(instance),
+		file: instance?.type?.__file,
+		state: processInstanceState(instance),
 		instance
 	};
 }
@@ -2008,8 +1995,7 @@ function performanceMarkEnd(api, app, uid, vm, type, time) {
 	const groupInfo = appRecord.perfGroupIds.get(groupKey);
 	if (groupInfo) {
 		const groupId = groupInfo.groupId;
-		const startTime = groupInfo.time;
-		const duration = time - startTime;
+		const duration = time - groupInfo.time;
 		api.addTimelineEvent({
 			layerId: PERFORMANCE_EVENT_LAYER_ID,
 			event: {
@@ -2196,10 +2182,9 @@ function createComponentsDevToolsPlugin(app) {
 			if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
 				const result = getInstanceState({ instanceId: payload.nodeId });
 				const componentInstance = result.instance;
-				const app$1 = result.instance?.appContext.app;
 				const _payload = {
 					componentInstance,
-					app: app$1,
+					app: result.instance?.appContext.app,
 					instanceData: result
 				};
 				devtoolsContext.hooks.callHookWith((callbacks) => {
@@ -4343,8 +4328,7 @@ function updateDevToolsClientDetected(params) {
 		...devtoolsState.devtoolsClientDetected,
 		...params
 	};
-	const devtoolsClientVisible = Object.values(devtoolsState.devtoolsClientDetected).some(Boolean);
-	toggleHighPerfMode(!devtoolsClientVisible);
+	toggleHighPerfMode(!Object.values(devtoolsState.devtoolsClientDetected).some(Boolean));
 }
 __vue_devtools_shared.target.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__ ??= updateDevToolsClientDetected;
 
@@ -4906,8 +4890,7 @@ function copy(target$21, options = {}) {
 	return [...props, ...symbols].reduce((carry, key) => {
 		if (isArray$1(options.props) && !options.props.includes(key)) return carry;
 		const val = target$21[key];
-		const newVal = copy(val, options);
-		assignProp(carry, key, newVal, target$21, options.nonenumerable);
+		assignProp(carry, key, copy(val, options), target$21, options.nonenumerable);
 		return carry;
 	}, {});
 }
@@ -5414,10 +5397,9 @@ function getFunctionDetails(func) {
 	} catch (e) {}
 	const match = matches && matches[0];
 	const args = typeof match === "string" ? match : "(?)";
-	const name = typeof func.name === "string" ? func.name : "";
 	return { _custom: {
 		type: "function",
-		displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
+		displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(typeof func.name === "string" ? func.name : "")}${args}</span>`,
 		tooltipText: string.trim() ? `<pre>${string}</pre>` : null
 	} };
 }

package/dist/index.js

@@ -107,9 +107,7 @@ function getInstanceName(instance) {
 * @param {Vue} instance
 */
 function getUniqueComponentId(instance) {
-	const appId = instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0;
-	const instanceId = instance === instance?.root ? "root" : instance.uid;
-	return `${appId}:${instanceId}`;
+	return `${instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0}:${instance === instance?.root ? "root" : instance.uid}`;
 }
 function getRenderKey(value) {
 	if (value == null) return "";
@@ -352,10 +350,7 @@ function inspectFn(e) {
 function selectComponentFn(e, cb) {
 	e.preventDefault();
 	e.stopPropagation();
-	if (inspectInstance) {
-		const uniqueComponentId = getUniqueComponentId(inspectInstance);
-		cb(uniqueComponentId);
-	}
+	if (inspectInstance) cb(getUniqueComponentId(inspectInstance));
 }
 let inspectComponentHighLighterSelectFn = null;
 function cancelInspectComponentHighLighter() {
@@ -636,7 +631,7 @@ function getTimelineLayersStateFromStorage() {
 		performanceEventEnabled: false,
 		selected: ""
 	};
-	const state = localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID);
+	const state = typeof localStorage.getItem !== "undefined" ? localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID) : null;
 	return state ? JSON.parse(state) : {
 		recordingState: false,
 		mouseEventEnabled: false,
@@ -1075,10 +1070,7 @@ function getPluginSettings(pluginId, fallbackValue) {
 		const localSettings = localStorage.getItem(localKey);
 		if (localSettings) return JSON.parse(localSettings);
 	}
-	if (pluginId) {
-		const item = devtoolsPluginBuffer.find((item$1) => item$1[0].id === pluginId)?.[0] ?? null;
-		return _getSettings(item?.settings ?? {});
-	}
+	if (pluginId) return _getSettings((devtoolsPluginBuffer.find((item) => item[0].id === pluginId)?.[0] ?? null)?.settings ?? {});
 	return _getSettings(fallbackValue);
 }
 function initPluginSettings(pluginId, settings) {
@@ -1612,10 +1604,9 @@ function processState(instance) {
 }
 function getStateTypeAndName(info) {
 	const stateType = info.computed ? "computed" : info.ref ? "ref" : info.reactive ? "reactive" : null;
-	const stateTypeName = stateType ? `${stateType.charAt(0).toUpperCase()}${stateType.slice(1)}` : null;
 	return {
 		stateType,
-		stateTypeName
+		stateTypeName: stateType ? `${stateType.charAt(0).toUpperCase()}${stateType.slice(1)}` : null
 	};
 }
 function processSetupState(instance) {
@@ -1749,15 +1740,11 @@ function processInstanceState(instance) {
 //#region src/core/component/state/index.ts
 function getInstanceState(params) {
 	const instance = getComponentInstance(activeAppRecord.value, params.instanceId);
-	const id = getUniqueComponentId(instance);
-	const name = getInstanceName(instance);
-	const file = instance?.type?.__file;
-	const state = processInstanceState(instance);
 	return {
-		id,
-		name,
-		file,
-		state,
+		id: getUniqueComponentId(instance),
+		name: getInstanceName(instance),
+		file: instance?.type?.__file,
+		state: processInstanceState(instance),
 		instance
 	};
 }
@@ -2004,8 +1991,7 @@ function performanceMarkEnd(api, app, uid, vm, type, time) {
 	const groupInfo = appRecord.perfGroupIds.get(groupKey);
 	if (groupInfo) {
 		const groupId = groupInfo.groupId;
-		const startTime = groupInfo.time;
-		const duration = time - startTime;
+		const duration = time - groupInfo.time;
 		api.addTimelineEvent({
 			layerId: PERFORMANCE_EVENT_LAYER_ID,
 			event: {
@@ -2192,10 +2178,9 @@ function createComponentsDevToolsPlugin(app) {
 			if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
 				const result = getInstanceState({ instanceId: payload.nodeId });
 				const componentInstance = result.instance;
-				const app$1 = result.instance?.appContext.app;
 				const _payload = {
 					componentInstance,
-					app: app$1,
+					app: result.instance?.appContext.app,
 					instanceData: result
 				};
 				devtoolsContext.hooks.callHookWith((callbacks) => {
@@ -4339,8 +4324,7 @@ function updateDevToolsClientDetected(params) {
 		...devtoolsState.devtoolsClientDetected,
 		...params
 	};
-	const devtoolsClientVisible = Object.values(devtoolsState.devtoolsClientDetected).some(Boolean);
-	toggleHighPerfMode(!devtoolsClientVisible);
+	toggleHighPerfMode(!Object.values(devtoolsState.devtoolsClientDetected).some(Boolean));
 }
 target.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__ ??= updateDevToolsClientDetected;
 
@@ -4902,8 +4886,7 @@ function copy(target$1, options = {}) {
 	return [...props, ...symbols].reduce((carry, key) => {
 		if (isArray$1(options.props) && !options.props.includes(key)) return carry;
 		const val = target$1[key];
-		const newVal = copy(val, options);
-		assignProp(carry, key, newVal, target$1, options.nonenumerable);
+		assignProp(carry, key, copy(val, options), target$1, options.nonenumerable);
 		return carry;
 	}, {});
 }
@@ -5410,10 +5393,9 @@ function getFunctionDetails(func) {
 	} catch (e) {}
 	const match = matches && matches[0];
 	const args = typeof match === "string" ? match : "(?)";
-	const name = typeof func.name === "string" ? func.name : "";
 	return { _custom: {
 		type: "function",
-		displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
+		displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(typeof func.name === "string" ? func.name : "")}${args}</span>`,
 		tooltipText: string.trim() ? `<pre>${string}</pre>` : null
 	} };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "8.0.2",
+  "version": "8.0.3",
   "author": "webfansplz",
   "license": "MIT",
   "repository": {
@@ -23,18 +23,18 @@
     "dist"
   ],
   "dependencies": {
-    "birpc": "^2.5.0",
+    "birpc": "^2.6.1",
     "hookable": "^5.5.3",
     "mitt": "^3.0.1",
     "perfect-debounce": "^2.0.0",
     "speakingurl": "^14.0.1",
     "superjson": "^2.2.2",
-    "@vue/devtools-shared": "^8.0.2"
+    "@vue/devtools-shared": "^8.0.3"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
-    "vue": "^3.5.21",
-    "vue-router": "^4.5.1"
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.0"
   },
   "scripts": {
     "build": "tsdown --clean",