@vingy/vuebugger 0.1.0 → 0.1.2

package/README.md

@@ -1,3 +1,48 @@
-# vue-composable-devtools
+# Vuebugger
 
-Vue devtools for composables
+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.

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { getCurrentInstance, toValue, watch } from "vue";
+import { getCurrentInstance, getCurrentScope, onBeforeUnmount, 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;
@@ -3784,10 +3784,10 @@ const MAX_SERIALIZED_SIZE = 2 * 1024 * 1024;
 const byUid = /* @__PURE__ */ new Map();
 const byGroupId = /* @__PURE__ */ new Map();
 const callbacks = [];
-const runCallbacks = (componentInstance) => callbacks.forEach((cb) => cb(componentInstance));
+const runCallbacks = (entry) => callbacks.forEach((cb) => cb(entry));
 const withCallbacks = (fn) => (entry) => {
 	fn(entry);
-	runCallbacks(entry.componentInstance);
+	runCallbacks(entry);
 };
 const upsert = withCallbacks((entry) => {
 	const { uid, groupId } = entry;
@@ -3795,6 +3795,7 @@ 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;
@@ -3802,6 +3803,7 @@ 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);
@@ -3809,7 +3811,8 @@ const onUpdate = (fn) => {
 
 //#endregion
 //#region src/devtools.ts
-const INSPECTOR_ID = "composables";
+const INSPECTOR_ID = "vuebugger-inspector";
+const TIMELINE_ID = "vuebugger-timeline";
 const handleGetInspectorTree = (payload) => {
 	if (payload.inspectorId === INSPECTOR_ID) {
 		const term = payload.filter;
@@ -3874,10 +3877,25 @@ function setupComposableDevtools(app) {
 			icon: "https://raw.githubusercontent.com/vinpogo/vuebugger/main/logo.png",
 			treeFilterPlaceholder: "Search by composable or component name..."
 		});
-		onUpdate((componentInstance) => {
+		api.addTimelineLayer({
+			id: TIMELINE_ID,
+			label: "Vuebugger",
+			color: 155
+		});
+		onUpdate((entry) => {
 			api.sendInspectorTree(INSPECTOR_ID);
 			api.sendInspectorState(INSPECTOR_ID);
-			api.notifyComponentUpdate(componentInstance);
+			api.notifyComponentUpdate(entry.componentInstance);
+			api.addTimelineEvent({
+				layerId: TIMELINE_ID,
+				event: {
+					time: api.now(),
+					data: entry,
+					title: `${entry.uid} state change`,
+					groupId: entry.uid,
+					meta: { vin: "was here" }
+				}
+			});
 		});
 		api.on.getInspectorTree(handleGetInspectorTree);
 		api.on.getInspectorState(handleGetInspectorState(api));
@@ -3892,24 +3910,27 @@ 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)}`;
-	watch(() => state, (value, _, onCleanup) => {
-		upsert({
+	getCurrentScope()?.run(() => {
+		onBeforeUnmount(() => remove({
 			groupId,
 			uid,
 			componentName,
 			componentInstance: instance,
-			debugState: value
-		});
-		onCleanup(() => {
-			remove({
+			debugState: state
+		}));
+		watch(() => state, (value, _) => {
+			upsert({
 				groupId,
 				uid,
 				componentName,
 				componentInstance: instance,
 				debugState: value
 			});
+		}, {
+			immediate: true,
+			deep: true
 		});
-	}, { deep: true });
+	});
 	return state;
 }
 

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "@vingy/vuebugger",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vue devtools plugin to debug anything.",
   "keywords": [
+    "composable",
+    "composition-api",
+    "debugging",
     "devtools",
+    "plugin",
+    "state",
     "vue"
   ],
   "license": "MIT",
   "author": "vingy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vinpogo/vuebugger"
+  },
   "files": [
     "dist"
   ],