@vingy/vuebugger 0.1.2 → 0.2.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { getCurrentInstance, getCurrentScope, onBeforeUnmount, toValue, watch } from "vue";
+import { effectScope, getCurrentInstance, getCurrentScope, isReadonly, onScopeDispose, toValue, watch } from "vue";
 
 //#region node_modules/.pnpm/@vue+devtools-shared@8.0.5/node_modules/@vue/devtools-shared/dist/index.js
 var __create$1 = Object.create;
@@ -837,14 +837,14 @@ let ReactiveFlags = /* @__PURE__ */ function(ReactiveFlags$1) {
 /**
 * @from [@vue/reactivity](https://github.com/vuejs/core/blob/1c3327a0fa5983aa9078e3f7bb2330f572435425/packages/reactivity/src/reactive.ts#L330-L332)
 */
-function isReadonly(value) {
+function isReadonly$1(value) {
 	return !!(value && value[ReactiveFlags.IS_READONLY]);
 }
 /**
 * @from [@vue/reactivity](https://github.com/vuejs/core/blob/1c3327a0fa5983aa9078e3f7bb2330f572435425/packages/reactivity/src/reactive.ts#L312-L317)
 */
 function isReactive$1(value) {
-	if (isReadonly(value)) return isReactive$1(value[ReactiveFlags.RAW]);
+	if (isReadonly$1(value)) return isReactive$1(value[ReactiveFlags.RAW]);
 	return !!(value && value[ReactiveFlags.IS_REACTIVE]);
 }
 function isRef$1(r) {
@@ -3779,6 +3779,11 @@ target.__VUE_DEVTOOLS_KIT_VITE_RPC_SERVER__ ??= null;
 target.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__ ??= null;
 const MAX_SERIALIZED_SIZE = 2 * 1024 * 1024;
 
+//#endregion
+//#region src/constants.ts
+const INSPECTOR_ID = "vuebugger-inspector";
+const TIMELINE_ID = "vuebugger-timeline";
+
 //#endregion
 //#region src/registry.ts
 const byUid = /* @__PURE__ */ new Map();
@@ -3795,7 +3800,6 @@ const upsert = withCallbacks((entry) => {
 	const group = byGroupId.get(groupId);
 	if (!group) byGroupId.set(groupId, new Set([uid]));
 	else group.add(uid);
-	console.log("upsert");
 });
 const remove = withCallbacks((entry) => {
 	const { uid, groupId } = entry;
@@ -3803,7 +3807,6 @@ const remove = withCallbacks((entry) => {
 	const group = byGroupId.get(groupId);
 	group?.delete(uid);
 	if (group?.size === 0) byGroupId.delete(groupId);
-	console.log("remove");
 });
 const onUpdate = (fn) => {
 	callbacks.push(fn);
@@ -3811,8 +3814,6 @@ const onUpdate = (fn) => {
 
 //#endregion
 //#region src/devtools.ts
-const INSPECTOR_ID = "vuebugger-inspector";
-const TIMELINE_ID = "vuebugger-timeline";
 const handleGetInspectorTree = (payload) => {
 	if (payload.inspectorId === INSPECTOR_ID) {
 		const term = payload.filter;
@@ -3845,8 +3846,8 @@ const handleGetInspectorState = (api) => (payload) => {
 		if (entry) {
 			payload.state = { [payload.nodeId]: Object.entries(entry.debugState).map(([key, value]) => ({
 				key,
-				value: toValue(value),
-				editable: true
+				value,
+				editable: !isReadonly(value)
 			})) };
 			if (entry.componentInstance) api.highlightElement(entry.componentInstance);
 		}
@@ -3857,12 +3858,20 @@ const handleInspectComponent = (payload) => {
 		return Object.entries(entry.debugState).map(([key, value]) => ({
 			type: entry.uid,
 			key,
-			value: toValue(value),
-			editable: true
+			value,
+			editable: !isReadonly(value)
 		}));
 	}).toArray();
 	payload.instanceData.state.push(...entries);
 };
+const handleEditInspectorState = (payload) => {
+	if (payload.inspectorId === INSPECTOR_ID) {
+		const uid = payload.nodeId;
+		const entry = byUid.get(uid);
+		if (!entry) return;
+		payload.set(entry.debugState);
+	}
+};
 function setupComposableDevtools(app) {
 	console.log("🐞 Vuebugger ready to use");
 	setupDevToolsPlugin({
@@ -3892,14 +3901,14 @@ function setupComposableDevtools(app) {
 					time: api.now(),
 					data: entry,
 					title: `${entry.uid} state change`,
-					groupId: entry.uid,
-					meta: { vin: "was here" }
+					groupId: entry.uid
 				}
 			});
 		});
 		api.on.getInspectorTree(handleGetInspectorTree);
 		api.on.getInspectorState(handleGetInspectorState(api));
 		api.on.inspectComponent(handleInspectComponent);
+		api.on.editInspectorState(handleEditInspectorState);
 	});
 }
 
@@ -3910,8 +3919,8 @@ function debug(groupId, state) {
 	const instance = getCurrentInstance();
 	const componentName = instance?.type.name || instance?.type.__name || "No component";
 	const uid = `${componentName}/${groupId}-${Math.random().toString(36).slice(2, 9)}`;
-	getCurrentScope()?.run(() => {
-		onBeforeUnmount(() => remove({
+	(getCurrentScope() ?? effectScope()).run(() => {
+		onScopeDispose(() => remove({
 			groupId,
 			uid,
 			componentName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vingy/vuebugger",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Vue devtools plugin to debug anything.",
   "keywords": [
     "composable",
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@types/node": "^25.0.10",
+    "@vitest/coverage-v8": "4.0.18",
     "@vue/devtools-api": "^8.0.5",
     "oxfmt": "^0.27.0",
     "oxlint": "^1.42.0",
@@ -47,6 +48,7 @@
   },
   "scripts": {
     "test": "vitest",
+    "test:ci": "vitest run --coverage",
     "build": "tsdown",
     "dev": "tsdown -w"
   }