@vingy/vuebugger 0.1.2 → 0.3.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { ComponentInternalInstance, Plugin } from "vue";
 
-//#region node_modules/.pnpm/hookable@6.0.1/node_modules/hookable/dist/index.d.mts
+//#region ../../node_modules/.pnpm/hookable@6.0.1/node_modules/hookable/dist/index.d.mts
 type CreateTask = (name?: string) => {
   run: (function_: () => Promise<any> | any) => Promise<any> | any;
 };
@@ -19,11 +19,14 @@ type VuebuggerEntry = {
   componentInstance: ComponentInternalInstance | null;
   debugState: Record<string, any>;
 };
+type PluginOptions = {
+  uidFn?: () => string;
+};
 //#endregion
 //#region src/debug.d.ts
-declare function debug<T extends Record<string, any>>(groupId: VuebuggerEntry['groupId'], state: T): T;
+declare const debug: <T extends Record<string, any>>(groupId: VuebuggerEntry["groupId"], state: T) => T;
 //#endregion
 //#region src/index.d.ts
-declare const plugin$1: Plugin<any[], any[]>;
+declare const plugin$1: Plugin<PluginOptions | undefined>;
 //#endregion
 export { plugin$1 as DebugPlugin, plugin$1 as default, debug };

package/dist/index.mjs

@@ -1,6 +1,69 @@
-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
+//#region src/registry.ts
+const byUid = /* @__PURE__ */ new Map();
+const byGroupId = /* @__PURE__ */ new Map();
+const callbacks = [];
+const runCallbacks = (entry) => callbacks.forEach((cb) => cb(entry));
+const withCallbacks = (fn) => (entry) => {
+	fn(entry);
+	runCallbacks(entry);
+};
+const upsert = withCallbacks((entry) => {
+	const { uid, groupId } = entry;
+	byUid.set(uid, entry);
+	const group = byGroupId.get(groupId);
+	if (!group) byGroupId.set(groupId, new Set([uid]));
+	else group.add(uid);
+});
+const remove = withCallbacks((entry) => {
+	const { uid, groupId } = entry;
+	byUid.delete(uid);
+	const group = byGroupId.get(groupId);
+	group?.delete(uid);
+	if (group?.size === 0) byGroupId.delete(groupId);
+});
+const onUpdate = (fn) => {
+	callbacks.push(fn);
+};
+
+//#endregion
+//#region src/debug.ts
+let getUid = () => Math.random().toString(36).slice(2, 9);
+const setUidGenerator = (fn) => {
+	getUid = fn;
+};
+const debug = (groupId, state) => {
+	if (!import.meta.env.DEV) return state;
+	const instance = getCurrentInstance();
+	const componentName = instance?.type.name || instance?.type.__name || "No component";
+	const uid = `${componentName}/${groupId}-${getUid()}`;
+	(getCurrentScope() ?? effectScope()).run(() => {
+		onScopeDispose(() => remove({
+			groupId,
+			uid,
+			componentName,
+			componentInstance: instance,
+			debugState: state
+		}));
+		watch(() => state, (value, _) => {
+			upsert({
+				groupId,
+				uid,
+				componentName,
+				componentInstance: instance,
+				debugState: value
+			});
+		}, {
+			immediate: true,
+			deep: true
+		});
+	});
+	return state;
+};
+
+//#endregion
+//#region ../../node_modules/.pnpm/@vue+devtools-shared@8.0.5/node_modules/@vue/devtools-shared/dist/index.js
 var __create$1 = Object.create;
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -188,7 +251,7 @@ function basename(filename, ext) {
 const deepClone = (0, import_rfdc.default)({ circles: true });
 
 //#endregion
-//#region node_modules/.pnpm/perfect-debounce@2.1.0/node_modules/perfect-debounce/dist/index.mjs
+//#region ../../node_modules/.pnpm/perfect-debounce@2.1.0/node_modules/perfect-debounce/dist/index.mjs
 const DEBOUNCE_DEFAULTS = { trailing: true };
 /**
 Debounce functions
@@ -276,7 +339,7 @@ async function _applyPromised(fn, _this, args) {
 }
 
 //#endregion
-//#region node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
+//#region ../../node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
 function flatHooks(configHooks, hooks = {}, parentName) {
 	for (const key in configHooks) {
 		const subHook = configHooks[key];
@@ -433,7 +496,7 @@ function createHooks() {
 }
 
 //#endregion
-//#region node_modules/.pnpm/@vue+devtools-kit@8.0.5/node_modules/@vue/devtools-kit/dist/index.js
+//#region ../../node_modules/.pnpm/@vue+devtools-kit@8.0.5/node_modules/@vue/devtools-kit/dist/index.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -837,14 +900,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) {
@@ -3780,39 +3843,12 @@ target.__VUE_DEVTOOLS_KIT_BROADCAST_RPC_SERVER__ ??= null;
 const MAX_SERIALIZED_SIZE = 2 * 1024 * 1024;
 
 //#endregion
-//#region src/registry.ts
-const byUid = /* @__PURE__ */ new Map();
-const byGroupId = /* @__PURE__ */ new Map();
-const callbacks = [];
-const runCallbacks = (entry) => callbacks.forEach((cb) => cb(entry));
-const withCallbacks = (fn) => (entry) => {
-	fn(entry);
-	runCallbacks(entry);
-};
-const upsert = withCallbacks((entry) => {
-	const { uid, groupId } = entry;
-	byUid.set(uid, 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;
-	byUid.delete(uid);
-	const group = byGroupId.get(groupId);
-	group?.delete(uid);
-	if (group?.size === 0) byGroupId.delete(groupId);
-	console.log("remove");
-});
-const onUpdate = (fn) => {
-	callbacks.push(fn);
-};
+//#region src/constants.ts
+const INSPECTOR_ID = "vuebugger-inspector";
+const TIMELINE_ID = "vuebugger-timeline";
 
 //#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 +3881,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 +3893,20 @@ const handleInspectComponent = (payload) => {
 		return Object.entries(entry.debugState).map(([key, value]) => ({
 			type: entry.uid,
 			key,
-			value: toValue(value),
-			editable: true
+			value,
+			editable: false
 		}));
 	}).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,52 +3936,22 @@ 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);
 	});
 }
 
-//#endregion
-//#region src/debug.ts
-function debug(groupId, state) {
-	if (!import.meta.env.DEV) return 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({
-			groupId,
-			uid,
-			componentName,
-			componentInstance: instance,
-			debugState: state
-		}));
-		watch(() => state, (value, _) => {
-			upsert({
-				groupId,
-				uid,
-				componentName,
-				componentInstance: instance,
-				debugState: value
-			});
-		}, {
-			immediate: true,
-			deep: true
-		});
-	});
-	return state;
-}
-
 //#endregion
 //#region src/index.ts
-const plugin = { install: (app) => {
+const plugin = { install: (app, options) => {
 	if (!import.meta.env.DEV) return;
+	if (options?.uidFn) setUidGenerator(options.uidFn);
 	setupComposableDevtools(app);
 } };
 var src_default = plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vingy/vuebugger",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "Vue devtools plugin to debug anything.",
   "keywords": [
     "composable",
@@ -34,19 +34,14 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/node": "^25.0.10",
-    "@vue/devtools-api": "^8.0.5",
-    "oxfmt": "^0.27.0",
-    "oxlint": "^1.42.0",
-    "tsdown": "^0.20.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "@vue/devtools-api": "^8.0.5"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
   "scripts": {
     "test": "vitest",
+    "test:ci": "vitest run --coverage",
     "build": "tsdown",
     "dev": "tsdown -w"
   }

package/README.md

@@ -1,48 +0,0 @@
-# Vuebugger
-
-Vue devtools provide an easy way to inspect component state. But when having something like a composable, you actually need to catch all the returned values in order for them to show up in the devtools. This is where this package can come in handy.
-
-## Features
-
-- Debug composables and reactive state easily
-- Tree-shakable with zero runtime overhead
-- Simple API: just call `debug(name, state)`
-
-## Quick start
-
-```bash
-pnpm add -D @vingy/vuebugger
-```
-
-Register the plugin in your app:
-
-```ts
-import Vuebugger from '@vingy/vuebugger'
-
-createApp(App).use(Vuebugger)
-```
-
-## Usage
-
-`debug()` registers values from composables so they show up in Vue Devtools.
-
-```ts
-import { debug } from '@vingy/vuebugger'
-
-export const useFoo = (initial: number) => {
-  const multiplier = ref(1) // not easy to debug if something goes wrong
-
-  const inc = () => multiplier.value++
-  const dec = () => multiplier.value--
-
-  const value = computed(() => initial * multiplier)
-
-  debug('useFoo', { multiplier }) // now visible in devtools
-
-  return { value, inc, dec }
-}
-```
-
-See the demo app in [demo/](demo).
-
-> **Note:** This plugin is tree-shakable and has zero runtime overhead when `debug()` calls are not used.