@vingy/vuebugger 0.2.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.d.mts +6 -3
- package/dist/index.mjs +71 -67
- package/package.json +3 -12
package/README.md
CHANGED
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentInternalInstance, Plugin } from "vue";
|
|
2
2
|
|
|
3
|
-
//#region node_modules/.pnpm/hookable@6.0.1/node_modules/hookable/dist/index.d.mts
|
|
3
|
+
//#region ../../node_modules/.pnpm/hookable@6.0.1/node_modules/hookable/dist/index.d.mts
|
|
4
4
|
type CreateTask = (name?: string) => {
|
|
5
5
|
run: (function_: () => Promise<any> | any) => Promise<any> | any;
|
|
6
6
|
};
|
|
@@ -19,11 +19,14 @@ type VuebuggerEntry = {
|
|
|
19
19
|
componentInstance: ComponentInternalInstance | null;
|
|
20
20
|
debugState: Record<string, any>;
|
|
21
21
|
};
|
|
22
|
+
type PluginOptions = {
|
|
23
|
+
uidFn?: () => string;
|
|
24
|
+
};
|
|
22
25
|
//#endregion
|
|
23
26
|
//#region src/debug.d.ts
|
|
24
|
-
declare
|
|
27
|
+
declare const debug: <T extends Record<string, any>>(groupId: VuebuggerEntry["groupId"], state: T) => T;
|
|
25
28
|
//#endregion
|
|
26
29
|
//#region src/index.d.ts
|
|
27
|
-
declare const plugin$1: Plugin<
|
|
30
|
+
declare const plugin$1: Plugin<[PluginOptions?]>;
|
|
28
31
|
//#endregion
|
|
29
32
|
export { plugin$1 as DebugPlugin, plugin$1 as default, debug };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,69 @@
|
|
|
1
1
|
import { effectScope, getCurrentInstance, getCurrentScope, isReadonly, onScopeDispose, toValue, watch } from "vue";
|
|
2
2
|
|
|
3
|
-
//#region
|
|
3
|
+
//#region src/registry.ts
|
|
4
|
+
const byUid = /* @__PURE__ */ new Map();
|
|
5
|
+
const byGroupId = /* @__PURE__ */ new Map();
|
|
6
|
+
const callbacks = [];
|
|
7
|
+
const runCallbacks = (entry) => callbacks.forEach((cb) => cb(entry));
|
|
8
|
+
const withCallbacks = (fn) => (entry) => {
|
|
9
|
+
fn(entry);
|
|
10
|
+
runCallbacks(entry);
|
|
11
|
+
};
|
|
12
|
+
const upsert = withCallbacks((entry) => {
|
|
13
|
+
const { uid, groupId } = entry;
|
|
14
|
+
byUid.set(uid, entry);
|
|
15
|
+
const group = byGroupId.get(groupId);
|
|
16
|
+
if (!group) byGroupId.set(groupId, new Set([uid]));
|
|
17
|
+
else group.add(uid);
|
|
18
|
+
});
|
|
19
|
+
const remove = withCallbacks((entry) => {
|
|
20
|
+
const { uid, groupId } = entry;
|
|
21
|
+
byUid.delete(uid);
|
|
22
|
+
const group = byGroupId.get(groupId);
|
|
23
|
+
group?.delete(uid);
|
|
24
|
+
if (group?.size === 0) byGroupId.delete(groupId);
|
|
25
|
+
});
|
|
26
|
+
const onUpdate = (fn) => {
|
|
27
|
+
callbacks.push(fn);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region src/debug.ts
|
|
32
|
+
let getUid = () => Math.random().toString(36).slice(2, 9);
|
|
33
|
+
const setUidGenerator = (fn) => {
|
|
34
|
+
getUid = fn;
|
|
35
|
+
};
|
|
36
|
+
const debug = (groupId, state) => {
|
|
37
|
+
if (!import.meta.env.DEV) return state;
|
|
38
|
+
const instance = getCurrentInstance();
|
|
39
|
+
const componentName = instance?.type.name || instance?.type.__name || "No component";
|
|
40
|
+
const uid = `${componentName}/${groupId}-${getUid()}`;
|
|
41
|
+
(getCurrentScope() ?? effectScope()).run(() => {
|
|
42
|
+
onScopeDispose(() => remove({
|
|
43
|
+
groupId,
|
|
44
|
+
uid,
|
|
45
|
+
componentName,
|
|
46
|
+
componentInstance: instance,
|
|
47
|
+
debugState: state
|
|
48
|
+
}));
|
|
49
|
+
watch(() => state, (value, _) => {
|
|
50
|
+
upsert({
|
|
51
|
+
groupId,
|
|
52
|
+
uid,
|
|
53
|
+
componentName,
|
|
54
|
+
componentInstance: instance,
|
|
55
|
+
debugState: value
|
|
56
|
+
});
|
|
57
|
+
}, {
|
|
58
|
+
immediate: true,
|
|
59
|
+
deep: true
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
return state;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
//#endregion
|
|
66
|
+
//#region ../../node_modules/.pnpm/@vue+devtools-shared@8.0.6/node_modules/@vue/devtools-shared/dist/index.js
|
|
4
67
|
var __create$1 = Object.create;
|
|
5
68
|
var __defProp$1 = Object.defineProperty;
|
|
6
69
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -188,7 +251,7 @@ function basename(filename, ext) {
|
|
|
188
251
|
const deepClone = (0, import_rfdc.default)({ circles: true });
|
|
189
252
|
|
|
190
253
|
//#endregion
|
|
191
|
-
//#region node_modules/.pnpm/perfect-debounce@2.1.0/node_modules/perfect-debounce/dist/index.mjs
|
|
254
|
+
//#region ../../node_modules/.pnpm/perfect-debounce@2.1.0/node_modules/perfect-debounce/dist/index.mjs
|
|
192
255
|
const DEBOUNCE_DEFAULTS = { trailing: true };
|
|
193
256
|
/**
|
|
194
257
|
Debounce functions
|
|
@@ -276,7 +339,7 @@ async function _applyPromised(fn, _this, args) {
|
|
|
276
339
|
}
|
|
277
340
|
|
|
278
341
|
//#endregion
|
|
279
|
-
//#region node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
|
|
342
|
+
//#region ../../node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
|
|
280
343
|
function flatHooks(configHooks, hooks = {}, parentName) {
|
|
281
344
|
for (const key in configHooks) {
|
|
282
345
|
const subHook = configHooks[key];
|
|
@@ -433,7 +496,7 @@ function createHooks() {
|
|
|
433
496
|
}
|
|
434
497
|
|
|
435
498
|
//#endregion
|
|
436
|
-
//#region node_modules/.pnpm/@vue+devtools-kit@8.0.
|
|
499
|
+
//#region ../../node_modules/.pnpm/@vue+devtools-kit@8.0.6/node_modules/@vue/devtools-kit/dist/index.js
|
|
437
500
|
var __create = Object.create;
|
|
438
501
|
var __defProp = Object.defineProperty;
|
|
439
502
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -3784,34 +3847,6 @@ const MAX_SERIALIZED_SIZE = 2 * 1024 * 1024;
|
|
|
3784
3847
|
const INSPECTOR_ID = "vuebugger-inspector";
|
|
3785
3848
|
const TIMELINE_ID = "vuebugger-timeline";
|
|
3786
3849
|
|
|
3787
|
-
//#endregion
|
|
3788
|
-
//#region src/registry.ts
|
|
3789
|
-
const byUid = /* @__PURE__ */ new Map();
|
|
3790
|
-
const byGroupId = /* @__PURE__ */ new Map();
|
|
3791
|
-
const callbacks = [];
|
|
3792
|
-
const runCallbacks = (entry) => callbacks.forEach((cb) => cb(entry));
|
|
3793
|
-
const withCallbacks = (fn) => (entry) => {
|
|
3794
|
-
fn(entry);
|
|
3795
|
-
runCallbacks(entry);
|
|
3796
|
-
};
|
|
3797
|
-
const upsert = withCallbacks((entry) => {
|
|
3798
|
-
const { uid, groupId } = entry;
|
|
3799
|
-
byUid.set(uid, entry);
|
|
3800
|
-
const group = byGroupId.get(groupId);
|
|
3801
|
-
if (!group) byGroupId.set(groupId, new Set([uid]));
|
|
3802
|
-
else group.add(uid);
|
|
3803
|
-
});
|
|
3804
|
-
const remove = withCallbacks((entry) => {
|
|
3805
|
-
const { uid, groupId } = entry;
|
|
3806
|
-
byUid.delete(uid);
|
|
3807
|
-
const group = byGroupId.get(groupId);
|
|
3808
|
-
group?.delete(uid);
|
|
3809
|
-
if (group?.size === 0) byGroupId.delete(groupId);
|
|
3810
|
-
});
|
|
3811
|
-
const onUpdate = (fn) => {
|
|
3812
|
-
callbacks.push(fn);
|
|
3813
|
-
};
|
|
3814
|
-
|
|
3815
3850
|
//#endregion
|
|
3816
3851
|
//#region src/devtools.ts
|
|
3817
3852
|
const handleGetInspectorTree = (payload) => {
|
|
@@ -3859,7 +3894,7 @@ const handleInspectComponent = (payload) => {
|
|
|
3859
3894
|
type: entry.uid,
|
|
3860
3895
|
key,
|
|
3861
3896
|
value,
|
|
3862
|
-
editable:
|
|
3897
|
+
editable: false
|
|
3863
3898
|
}));
|
|
3864
3899
|
}).toArray();
|
|
3865
3900
|
payload.instanceData.state.push(...entries);
|
|
@@ -3912,44 +3947,13 @@ function setupComposableDevtools(app) {
|
|
|
3912
3947
|
});
|
|
3913
3948
|
}
|
|
3914
3949
|
|
|
3915
|
-
//#endregion
|
|
3916
|
-
//#region src/debug.ts
|
|
3917
|
-
function debug(groupId, state) {
|
|
3918
|
-
if (!import.meta.env.DEV) return state;
|
|
3919
|
-
const instance = getCurrentInstance();
|
|
3920
|
-
const componentName = instance?.type.name || instance?.type.__name || "No component";
|
|
3921
|
-
const uid = `${componentName}/${groupId}-${Math.random().toString(36).slice(2, 9)}`;
|
|
3922
|
-
(getCurrentScope() ?? effectScope()).run(() => {
|
|
3923
|
-
onScopeDispose(() => remove({
|
|
3924
|
-
groupId,
|
|
3925
|
-
uid,
|
|
3926
|
-
componentName,
|
|
3927
|
-
componentInstance: instance,
|
|
3928
|
-
debugState: state
|
|
3929
|
-
}));
|
|
3930
|
-
watch(() => state, (value, _) => {
|
|
3931
|
-
upsert({
|
|
3932
|
-
groupId,
|
|
3933
|
-
uid,
|
|
3934
|
-
componentName,
|
|
3935
|
-
componentInstance: instance,
|
|
3936
|
-
debugState: value
|
|
3937
|
-
});
|
|
3938
|
-
}, {
|
|
3939
|
-
immediate: true,
|
|
3940
|
-
deep: true
|
|
3941
|
-
});
|
|
3942
|
-
});
|
|
3943
|
-
return state;
|
|
3944
|
-
}
|
|
3945
|
-
|
|
3946
3950
|
//#endregion
|
|
3947
3951
|
//#region src/index.ts
|
|
3948
|
-
const plugin = { install: (app) => {
|
|
3952
|
+
const plugin = { install: (app, options) => {
|
|
3949
3953
|
if (!import.meta.env.DEV) return;
|
|
3954
|
+
if (options?.uidFn) setUidGenerator(options.uidFn);
|
|
3950
3955
|
setupComposableDevtools(app);
|
|
3951
3956
|
} };
|
|
3952
|
-
var src_default = plugin;
|
|
3953
3957
|
|
|
3954
3958
|
//#endregion
|
|
3955
|
-
export { plugin as DebugPlugin,
|
|
3959
|
+
export { plugin as DebugPlugin, plugin as default, debug };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vingy/vuebugger",
|
|
3
|
-
"version": "0.2
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "Vue devtools plugin to debug anything.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"composable",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"author": "vingy",
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
18
|
-
"url": "https://github.com/vinpogo/
|
|
18
|
+
"url": "https://github.com/vinpogo/vue-utils"
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
21
|
"dist"
|
|
@@ -34,21 +34,12 @@
|
|
|
34
34
|
"access": "public"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@
|
|
38
|
-
"@vitest/coverage-v8": "4.0.18",
|
|
39
|
-
"@vue/devtools-api": "^8.0.5",
|
|
40
|
-
"oxfmt": "^0.27.0",
|
|
41
|
-
"oxlint": "^1.42.0",
|
|
42
|
-
"tsdown": "^0.20.1",
|
|
43
|
-
"typescript": "^5.9.3",
|
|
44
|
-
"vitest": "^4.0.18"
|
|
37
|
+
"@vue/devtools-api": "^8.0.5"
|
|
45
38
|
},
|
|
46
39
|
"peerDependencies": {
|
|
47
40
|
"vue": "^3.5.0"
|
|
48
41
|
},
|
|
49
42
|
"scripts": {
|
|
50
|
-
"test": "vitest",
|
|
51
|
-
"test:ci": "vitest run --coverage",
|
|
52
43
|
"build": "tsdown",
|
|
53
44
|
"dev": "tsdown -w"
|
|
54
45
|
}
|