phecda-vue 4.0.2 → 4.0.4

package/dist/index.d.mts

@@ -0,0 +1,41 @@
+import { WebPhecda, Construct, Events } from 'phecda-web';
+export * from 'phecda-web';
+import { App, Ref, UnwrapNestedRefs, WatchOptions } from 'vue';
+
+declare const phecdaSymbol: unique symbol;
+declare class VuePhecda extends WebPhecda {
+    vueApp: App;
+    install(app: App): void;
+}
+declare function createPhecda(): VuePhecda;
+
+declare const RawSymbol: unique symbol;
+type Raw<T> = T & {
+    [RawSymbol]: true;
+};
+type ReplaceInstanceValues<I> = {
+    [P in keyof I]: I[P] extends (...args: any[]) => any ? I[P] : I[P] extends Raw<infer O> ? O : Ref<I[P]>;
+};
+type SchemaToObj<S> = {
+    [P in keyof S]: S[P] extends object ? SchemaToObj<S[P]> : (S[P] extends string ? any : S[P]);
+};
+
+declare function useRaw<T extends Construct>(model: T): InstanceType<T>;
+declare function usePhecda(): VuePhecda;
+declare function getPhecda(phecda?: VuePhecda): VuePhecda;
+declare function useEvent<Key extends keyof Events>(eventName: Key, cb: (event: Events[Key]) => void): {
+    emit: (arg: Events[Key]) => void;
+    cancel: () => void;
+};
+declare function useR<T extends Construct>(model: T): UnwrapNestedRefs<InstanceType<T>>;
+declare function getR<T extends Construct>(model: T, phecda?: VuePhecda): UnwrapNestedRefs<InstanceType<T>>;
+declare function useV<T extends Construct>(model: T): ReplaceInstanceValues<InstanceType<T>>;
+declare function getV<T extends Construct>(model: T, phecda?: VuePhecda): ReplaceInstanceValues<InstanceType<T>>;
+
+declare function Shallow(model: any): void;
+declare function WatchEffect(option?: WatchOptions): (proto: any, key: string) => void;
+
+declare function markRaw<T extends object>(value: T): Raw<T>;
+declare function createSharedReactive<F extends (...args: any) => any>(composable: F): () => ReturnType<F>;
+
+export { type Raw, RawSymbol, type ReplaceInstanceValues, type SchemaToObj, Shallow, VuePhecda, WatchEffect, createPhecda, createSharedReactive, getPhecda, getR, getV, markRaw, phecdaSymbol, useEvent, usePhecda, useR, useRaw, useV };

package/dist/index.d.ts

@@ -32,10 +32,10 @@ declare function getR<T extends Construct>(model: T, phecda?: VuePhecda): Unwrap
 declare function useV<T extends Construct>(model: T): ReplaceInstanceValues<InstanceType<T>>;
 declare function getV<T extends Construct>(model: T, phecda?: VuePhecda): ReplaceInstanceValues<InstanceType<T>>;
 
-declare function Shallow(isShallow?: boolean): (model: any) => void;
+declare function Shallow(model: any): void;
 declare function WatchEffect(option?: WatchOptions): (proto: any, key: string) => void;
 
 declare function markRaw<T extends object>(value: T): Raw<T>;
 declare function createSharedReactive<F extends (...args: any) => any>(composable: F): () => ReturnType<F>;
 
-export { Raw, RawSymbol, ReplaceInstanceValues, SchemaToObj, Shallow, VuePhecda, WatchEffect, createPhecda, createSharedReactive, getPhecda, getR, getV, markRaw, phecdaSymbol, useEvent, usePhecda, useR, useRaw, useV };
+export { type Raw, RawSymbol, type ReplaceInstanceValues, type SchemaToObj, Shallow, VuePhecda, WatchEffect, createPhecda, createSharedReactive, getPhecda, getR, getV, markRaw, phecdaSymbol, useEvent, usePhecda, useR, useRaw, useV };

package/dist/index.js

@@ -44,21 +44,335 @@ __reExport(src_exports, require("phecda-web"), module.exports);
 // src/core.ts
 var import_vue = require("vue");
 var import_phecda_web = require("phecda-web");
+var import_devtools_api = require("@vue/devtools-api");
+
+// src/devtools.ts
+var componentStateTypes = [];
+var MUTATIONS_LAYER_ID = "phecda-vue:mutations";
+var INSPECTOR_ID = "phecda-vue";
+function toastMessage(message, type) {
+  const piniaMessage = `[phecda-vue]: ${message}`;
+  if (type === "error") console.error(piniaMessage);
+  else if (type === "warn") console.warn(piniaMessage);
+  else console.log(piniaMessage);
+}
+__name(toastMessage, "toastMessage");
+var USE_DEVTOOLS = process.env.NODE_ENV === "development" && typeof window;
+
+// src/core.ts
 var phecdaSymbol = Symbol(process.env.NODE_ENV === "development" ? "phecda-vue" : void 0);
 var VuePhecda = class extends import_phecda_web.WebPhecda {
+  static {
+    __name(this, "VuePhecda");
+  }
   vueApp;
   install(app) {
     app.provide(phecdaSymbol, this);
     this.vueApp = app;
+    if (USE_DEVTOOLS) {
+      (0, import_devtools_api.setupDevtoolsPlugin)({
+        settings: {
+          sendTrigger: {
+            label: "send DebuggerEvent in onTrigger to timeline",
+            type: "boolean",
+            defaultValue: false
+          },
+          triggerEventSync: {
+            label: "send trigger event to timeline Synchronously",
+            type: "boolean",
+            defaultValue: false
+          },
+          sendUpdate: {
+            label: "Record view update caused by model to timeline",
+            type: "boolean",
+            defaultValue: false
+          }
+        },
+        id: "dev.esm.phecda",
+        label: "Phecda Vue",
+        packageName: "phecda",
+        // @todo
+        // logo: 'https://phecda.vuejs.org/logo.svg',
+        // homepage: 'https://phecda.vuejs.org',
+        componentStateTypes,
+        app
+      }, (api) => {
+        const now = typeof api.now === "function" ? api.now.bind(api) : Date.now;
+        api.addTimelineLayer({
+          id: MUTATIONS_LAYER_ID,
+          label: "Phecda Vue",
+          color: 9089261
+        });
+        const watchModule = /* @__PURE__ */ __name((tag) => {
+          (0, import_vue.watch)(this.get(tag), (data) => {
+            const { sendUpdate } = api.getSettings();
+            if (sendUpdate) {
+              api.addTimelineEvent({
+                layerId: MUTATIONS_LAYER_ID,
+                event: {
+                  time: now(),
+                  title: "Update",
+                  subtitle: String(tag),
+                  data: {
+                    ...data
+                  }
+                }
+              });
+            }
+            api.notifyComponentUpdate();
+            api.sendInspectorState(INSPECTOR_ID);
+          }, {
+            deep: true,
+            onTrigger(event) {
+              const { triggerEventSync, sendTrigger } = api.getSettings();
+              if (sendTrigger && !triggerEventSync) {
+                api.addTimelineEvent({
+                  layerId: MUTATIONS_LAYER_ID,
+                  event: {
+                    time: now(),
+                    title: "Trigger",
+                    subtitle: String(tag),
+                    data: event
+                  }
+                });
+              }
+            }
+          });
+          (0, import_vue.watch)(this.get(tag), () => {
+          }, {
+            deep: true,
+            flush: "sync",
+            onTrigger(event) {
+              const { triggerEventSync, sendTrigger } = api.getSettings();
+              if (sendTrigger && triggerEventSync) {
+                api.addTimelineEvent({
+                  layerId: MUTATIONS_LAYER_ID,
+                  event: {
+                    time: now(),
+                    title: "Trigger",
+                    subtitle: String(tag),
+                    data: event
+                  }
+                });
+              }
+            }
+          });
+        }, "watchModule");
+        for (const tag in this.state) watchModule(tag);
+        this.on("Instantiate", ({ tag }) => {
+          api.sendInspectorTree(INSPECTOR_ID);
+          watchModule(tag);
+        });
+        this.on("*", (type, event) => {
+          api.addTimelineEvent({
+            layerId: MUTATIONS_LAYER_ID,
+            event: {
+              time: now(),
+              title: type,
+              subtitle: event.tag,
+              data: event
+            }
+          });
+        });
+        api.addInspector({
+          id: INSPECTOR_ID,
+          label: "Phecda Vue",
+          icon: "storage",
+          treeFilterPlaceholder: "Search",
+          actions: [
+            {
+              icon: "content_copy",
+              action: /* @__PURE__ */ __name(async () => {
+                toastMessage("Global state copied to clipboard.");
+                await navigator.clipboard.writeText(this.serialize());
+              }, "action"),
+              tooltip: "Serialize and copy the state"
+            },
+            {
+              icon: "content_paste",
+              action: /* @__PURE__ */ __name(async () => {
+                toastMessage("Global state pasted from clipboard.");
+                await this.load(await navigator.clipboard.readText());
+                api.sendInspectorTree(INSPECTOR_ID);
+                api.sendInspectorState(INSPECTOR_ID);
+              }, "action"),
+              tooltip: "Replace the state with the content of your clipboard"
+            }
+          ],
+          nodeActions: [
+            {
+              icon: "restore",
+              tooltip: "Reset the state ",
+              action: /* @__PURE__ */ __name((nodeId) => {
+                this.reset(this.getModel(nodeId));
+              }, "action")
+            }
+          ]
+        });
+        api.on.inspectComponent((payload) => {
+          const proxy = payload.componentInstance && payload.componentInstance.proxy;
+          if (proxy && proxy._phecda_vue) {
+            for (const tag in proxy._phecda_vue) {
+              payload.instanceData.state.push({
+                type: "phecda-vue",
+                key: tag,
+                editable: true,
+                value: proxy._phecda_vue[tag]
+              });
+            }
+          }
+        });
+        api.on.getInspectorTree((payload) => {
+          if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+            payload.rootNodes = Object.keys(this.state).map((tag) => {
+              return {
+                id: tag,
+                label: tag
+              };
+            });
+          }
+        });
+        api.on.getInspectorState((payload) => {
+          if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+            if (this.has(payload.nodeId)) {
+              const instance = this.get(payload.nodeId);
+              payload.state = {
+                state: [],
+                methods: [],
+                getters: [],
+                internals: [],
+                memory: Object.entries(this.memory[payload.nodeId] || {}).map(([key, value]) => {
+                  return {
+                    editable: false,
+                    key,
+                    value
+                  };
+                })
+              };
+              Object.entries(instance).forEach(([key, value]) => {
+                if (this.modelMap.has(value)) {
+                  const tag = String((0, import_phecda_web.getTag)((0, import_vue.toRaw)(value)));
+                  payload.state.state.unshift({
+                    editable: false,
+                    key,
+                    value: `[PV] ${tag}`,
+                    raw: `Phecda Vue Module [${tag}]`
+                  });
+                  return;
+                }
+                if (!key.startsWith("__")) payload.state.state.push({
+                  editable: true,
+                  key,
+                  value
+                });
+                else payload.state.internals.push({
+                  editable: false,
+                  key,
+                  value
+                });
+              });
+              getAllGetters(instance).forEach((item) => {
+                payload.state.getters.push({
+                  editable: false,
+                  key: item,
+                  value: instance[item]
+                });
+              });
+              getAllMethods(instance).forEach((item) => {
+                if (typeof instance[item] === "function") payload.state[item.startsWith("__") ? "internals" : "methods"].push({
+                  editable: false,
+                  key: item,
+                  value: Object.getPrototypeOf(instance)[item]
+                });
+              });
+            }
+          }
+        });
+        api.on.editInspectorState((payload) => {
+          if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+            const state = this.get(payload.nodeId);
+            const { path } = payload;
+            payload.set(state, path, payload.state.value);
+          }
+        });
+        api.on.editComponentState((payload) => {
+          const { path, type } = payload;
+          if (type === "phecda-vue") payload.set(this.get(path.shift()), path, payload.state.value);
+        });
+      });
+    }
   }
 };
-__name(VuePhecda, "VuePhecda");
 function createPhecda() {
-  return new VuePhecda((instance) => {
-    return (0, import_phecda_web.bindMethod)((0, import_phecda_web.get)(instance, "shallow") ? (0, import_vue.shallowReactive)(instance) : (0, import_vue.reactive)(instance));
+  const phecda = new VuePhecda("vue", (instance) => {
+    return (0, import_phecda_web.bindMethod)((0, import_phecda_web.get)(instance, "shallow") ? (0, import_vue.shallowReactive)(instance) : (0, import_vue.reactive)(instance), USE_DEVTOOLS ? (instance2, key) => {
+      const cb = instance2[key].bind(instance2);
+      if (findPrototypeWithMethod(instance2, key).constructor.name === "Object") return cb;
+      const tag = (0, import_phecda_web.getTag)(instance2);
+      return (...args) => {
+        const name = `${tag}.${key}`;
+        phecda.emit(`Invoke ${name}`, {
+          args,
+          tag,
+          key
+        });
+        const ret = cb(...args);
+        if (ret instanceof Promise) ret.then(() => phecda.emit(`End ${name}(Async)`, {
+          args,
+          tag,
+          key
+        }));
+        else phecda.emit(`End ${name}`, {
+          args,
+          tag,
+          key
+        });
+        return ret;
+      };
+    } : void 0);
   });
+  return phecda;
 }
 __name(createPhecda, "createPhecda");
+function findPrototypeWithMethod(instance, method) {
+  let proto = Object.getPrototypeOf(instance);
+  while (proto) {
+    if (proto.hasOwnProperty(method)) return proto;
+    proto = Object.getPrototypeOf(proto);
+  }
+  return null;
+}
+__name(findPrototypeWithMethod, "findPrototypeWithMethod");
+function getAllMethods(obj) {
+  const methods = /* @__PURE__ */ new Set();
+  obj = Object.getPrototypeOf(obj);
+  while (obj.constructor.name !== "Object") {
+    Object.getOwnPropertyNames(obj).forEach((prop) => {
+      const propDescriptor = Object.getOwnPropertyDescriptor(obj, prop);
+      if (typeof propDescriptor.value === "function" && prop !== "constructor") methods.add(prop);
+    });
+    obj = Object.getPrototypeOf(obj);
+  }
+  return [
+    ...methods
+  ];
+}
+__name(getAllMethods, "getAllMethods");
+function getAllGetters(obj) {
+  const getters = /* @__PURE__ */ new Set();
+  obj = Object.getPrototypeOf(obj);
+  while (obj.constructor.name !== "Object") {
+    Object.getOwnPropertyNames(obj).forEach((prop) => {
+      const propDescriptor = Object.getOwnPropertyDescriptor(obj, prop);
+      if (typeof propDescriptor.get === "function") getters.add(prop);
+    });
+    obj = Object.getPrototypeOf(obj);
+  }
+  return [
+    ...getters
+  ];
+}
+__name(getAllGetters, "getAllGetters");
 
 // src/composable.ts
 var import_phecda_web2 = require("phecda-web");
@@ -101,22 +415,29 @@ function useRaw(model) {
 }
 __name(useRaw, "useRaw");
 function usePhecda() {
-  if (!(0, import_vue3.hasInjectionContext)())
-    throw new Error("[phecda-vue]: use hook inside component setup function");
+  if (!(0, import_vue3.hasInjectionContext)()) throw new Error("[phecda-vue]: use hook inside component setup function");
   const activePhecda = (0, import_vue3.inject)(phecdaSymbol);
-  if (!activePhecda)
-    throw new Error("[phecda-vue]: must install the vue plugin ");
-  if (!cacheMap.has(activePhecda))
-    cacheMap.set(activePhecda, (0, import_phecda_web2.bindMethod)(activePhecda));
+  if (!activePhecda) throw new Error("[phecda-vue]: must install the vue plugin ");
+  if (!cacheMap.has(activePhecda)) cacheMap.set(activePhecda, (0, import_phecda_web2.bindMethod)(activePhecda));
   return cacheMap.get(activePhecda);
 }
 __name(usePhecda, "usePhecda");
+function setStateToComponent(model) {
+  if (USE_DEVTOOLS) {
+    const currentInstance = (0, import_vue3.getCurrentInstance)();
+    if (currentInstance && currentInstance.proxy) {
+      const vm = currentInstance.proxy;
+      const cache = "_phecda_vue" in vm ? vm._phecda_vue : vm._phecda_vue = {};
+      const tag = (0, import_phecda_web2.getTag)(model);
+      cache[tag] = usePhecda().init(model);
+    }
+  }
+}
+__name(setStateToComponent, "setStateToComponent");
 function getPhecda(phecda) {
-  const activePhecda = phecda || (0, import_phecda_web2.getDefaultPhecda)();
-  if (!activePhecda)
-    throw new Error("[phecda-vue]:  manually inject the phecda instance if there is no default phecda");
-  if (!cacheMap.has(activePhecda))
-    cacheMap.set(activePhecda, (0, import_phecda_web2.bindMethod)(activePhecda));
+  const activePhecda = phecda || (0, import_phecda_web2.getDefaultPhecda)("vue");
+  if (!activePhecda) throw new Error("[phecda-vue]:  manually inject the phecda instance if there is no default phecda");
+  if (!cacheMap.has(activePhecda)) cacheMap.set(activePhecda, (0, import_phecda_web2.bindMethod)(activePhecda));
   return cacheMap.get(activePhecda);
 }
 __name(getPhecda, "getPhecda");
@@ -126,12 +447,13 @@ function useEvent(eventName, cb) {
   });
   import_phecda_web2.emitter.on(eventName, cb);
   return {
-    emit: (arg) => import_phecda_web2.emitter.emit(eventName, arg),
-    cancel: () => import_phecda_web2.emitter.off(eventName, cb)
+    emit: /* @__PURE__ */ __name((arg) => import_phecda_web2.emitter.emit(eventName, arg), "emit"),
+    cancel: /* @__PURE__ */ __name(() => import_phecda_web2.emitter.off(eventName, cb), "cancel")
   };
 }
 __name(useEvent, "useEvent");
 function useR(model) {
+  setStateToComponent(model);
   return usePhecda().init(model);
 }
 __name(useR, "useR");
@@ -140,19 +462,16 @@ function getR(model, phecda) {
 }
 __name(getR, "getR");
 function useV(model) {
+  setStateToComponent(model);
   const instance = usePhecda().init(model);
-  if (cacheMap.has(instance))
-    return cacheMap.get(instance);
+  if (cacheMap.has(instance)) return cacheMap.get(instance);
   const cache = {};
   const proxy = new Proxy(instance, {
     get(target, key) {
-      if (typeof target[key] === "function")
-        return target[key];
-      if (target[key]?.__v_skip)
-        return target[key];
+      if (typeof target[key] === "function") return target[key];
+      if (target[key]?.__v_skip) return target[key];
       const cacheRef = cache[key];
-      if (cacheRef && cacheRef.r)
-        return cacheRef();
+      if (cacheRef && cacheRef.r) return cacheRef();
       cache[key] = createSharedReactive(() => {
         return (0, import_vue3.toRef)(target, key);
       });
@@ -168,18 +487,14 @@ function useV(model) {
 __name(useV, "useV");
 function getV(model, phecda) {
   const instance = getPhecda(phecda).init(model);
-  if (cacheMap.has(instance))
-    return cacheMap.get(instance);
+  if (cacheMap.has(instance)) return cacheMap.get(instance);
   const cache = {};
   const proxy = new Proxy(instance, {
     get(target, key) {
-      if (typeof target[key] === "function")
-        return target[key];
-      if (target[key]?.__v_skip)
-        return target[key];
+      if (typeof target[key] === "function") return target[key];
+      if (target[key]?.__v_skip) return target[key];
       const cacheRef = cache[key];
-      if (cacheRef && cacheRef.r)
-        return cacheRef();
+      if (cacheRef && cacheRef.r) return cacheRef();
       cache[key] = createSharedReactive(() => {
         return (0, import_vue3.toRef)(target, key);
       });
@@ -197,10 +512,8 @@ __name(getV, "getV");
 // src/decorator.ts
 var import_phecda_web3 = require("phecda-web");
 var import_vue4 = require("vue");
-function Shallow(isShallow = true) {
-  return (model) => {
-    (0, import_phecda_web3.set)(model.prototype, "shallow", isShallow);
-  };
+function Shallow(model) {
+  (0, import_phecda_web3.set)(model.prototype, "shallow", true);
 }
 __name(Shallow, "Shallow");
 function WatchEffect(option) {
@@ -209,8 +522,7 @@ function WatchEffect(option) {
     let stopHandler;
     (0, import_phecda_web3.setHandler)(proto, key, {
       init(instance) {
-        if (typeof instance[key] !== "function")
-          throw new Error("WatchEffect must decorate function");
+        if (typeof instance[key] !== "function") throw new Error("WatchEffect must decorate function");
         stopHandler = (0, import_vue4.watchEffect)(instance[key].bind(instance), option);
       },
       unmount() {

package/dist/index.mjs

@@ -5,27 +5,341 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 export * from "phecda-web";
 
 // src/core.ts
-import { reactive, shallowReactive } from "vue";
-import { WebPhecda, bindMethod, get } from "phecda-web";
+import { reactive, shallowReactive, toRaw, watch } from "vue";
+import { WebPhecda, bindMethod, get, getTag } from "phecda-web";
+import { setupDevtoolsPlugin } from "@vue/devtools-api";
+
+// src/devtools.ts
+var componentStateTypes = [];
+var MUTATIONS_LAYER_ID = "phecda-vue:mutations";
+var INSPECTOR_ID = "phecda-vue";
+function toastMessage(message, type) {
+  const piniaMessage = `[phecda-vue]: ${message}`;
+  if (type === "error") console.error(piniaMessage);
+  else if (type === "warn") console.warn(piniaMessage);
+  else console.log(piniaMessage);
+}
+__name(toastMessage, "toastMessage");
+var USE_DEVTOOLS = process.env.NODE_ENV === "development" && typeof window;
+
+// src/core.ts
 var phecdaSymbol = Symbol(process.env.NODE_ENV === "development" ? "phecda-vue" : void 0);
 var VuePhecda = class extends WebPhecda {
+  static {
+    __name(this, "VuePhecda");
+  }
   vueApp;
   install(app) {
     app.provide(phecdaSymbol, this);
     this.vueApp = app;
+    if (USE_DEVTOOLS) {
+      setupDevtoolsPlugin({
+        settings: {
+          sendTrigger: {
+            label: "send DebuggerEvent in onTrigger to timeline",
+            type: "boolean",
+            defaultValue: false
+          },
+          triggerEventSync: {
+            label: "send trigger event to timeline Synchronously",
+            type: "boolean",
+            defaultValue: false
+          },
+          sendUpdate: {
+            label: "Record view update caused by model to timeline",
+            type: "boolean",
+            defaultValue: false
+          }
+        },
+        id: "dev.esm.phecda",
+        label: "Phecda Vue",
+        packageName: "phecda",
+        // @todo
+        // logo: 'https://phecda.vuejs.org/logo.svg',
+        // homepage: 'https://phecda.vuejs.org',
+        componentStateTypes,
+        app
+      }, (api) => {
+        const now = typeof api.now === "function" ? api.now.bind(api) : Date.now;
+        api.addTimelineLayer({
+          id: MUTATIONS_LAYER_ID,
+          label: "Phecda Vue",
+          color: 9089261
+        });
+        const watchModule = /* @__PURE__ */ __name((tag) => {
+          watch(this.get(tag), (data) => {
+            const { sendUpdate } = api.getSettings();
+            if (sendUpdate) {
+              api.addTimelineEvent({
+                layerId: MUTATIONS_LAYER_ID,
+                event: {
+                  time: now(),
+                  title: "Update",
+                  subtitle: String(tag),
+                  data: {
+                    ...data
+                  }
+                }
+              });
+            }
+            api.notifyComponentUpdate();
+            api.sendInspectorState(INSPECTOR_ID);
+          }, {
+            deep: true,
+            onTrigger(event) {
+              const { triggerEventSync, sendTrigger } = api.getSettings();
+              if (sendTrigger && !triggerEventSync) {
+                api.addTimelineEvent({
+                  layerId: MUTATIONS_LAYER_ID,
+                  event: {
+                    time: now(),
+                    title: "Trigger",
+                    subtitle: String(tag),
+                    data: event
+                  }
+                });
+              }
+            }
+          });
+          watch(this.get(tag), () => {
+          }, {
+            deep: true,
+            flush: "sync",
+            onTrigger(event) {
+              const { triggerEventSync, sendTrigger } = api.getSettings();
+              if (sendTrigger && triggerEventSync) {
+                api.addTimelineEvent({
+                  layerId: MUTATIONS_LAYER_ID,
+                  event: {
+                    time: now(),
+                    title: "Trigger",
+                    subtitle: String(tag),
+                    data: event
+                  }
+                });
+              }
+            }
+          });
+        }, "watchModule");
+        for (const tag in this.state) watchModule(tag);
+        this.on("Instantiate", ({ tag }) => {
+          api.sendInspectorTree(INSPECTOR_ID);
+          watchModule(tag);
+        });
+        this.on("*", (type, event) => {
+          api.addTimelineEvent({
+            layerId: MUTATIONS_LAYER_ID,
+            event: {
+              time: now(),
+              title: type,
+              subtitle: event.tag,
+              data: event
+            }
+          });
+        });
+        api.addInspector({
+          id: INSPECTOR_ID,
+          label: "Phecda Vue",
+          icon: "storage",
+          treeFilterPlaceholder: "Search",
+          actions: [
+            {
+              icon: "content_copy",
+              action: /* @__PURE__ */ __name(async () => {
+                toastMessage("Global state copied to clipboard.");
+                await navigator.clipboard.writeText(this.serialize());
+              }, "action"),
+              tooltip: "Serialize and copy the state"
+            },
+            {
+              icon: "content_paste",
+              action: /* @__PURE__ */ __name(async () => {
+                toastMessage("Global state pasted from clipboard.");
+                await this.load(await navigator.clipboard.readText());
+                api.sendInspectorTree(INSPECTOR_ID);
+                api.sendInspectorState(INSPECTOR_ID);
+              }, "action"),
+              tooltip: "Replace the state with the content of your clipboard"
+            }
+          ],
+          nodeActions: [
+            {
+              icon: "restore",
+              tooltip: "Reset the state ",
+              action: /* @__PURE__ */ __name((nodeId) => {
+                this.reset(this.getModel(nodeId));
+              }, "action")
+            }
+          ]
+        });
+        api.on.inspectComponent((payload) => {
+          const proxy = payload.componentInstance && payload.componentInstance.proxy;
+          if (proxy && proxy._phecda_vue) {
+            for (const tag in proxy._phecda_vue) {
+              payload.instanceData.state.push({
+                type: "phecda-vue",
+                key: tag,
+                editable: true,
+                value: proxy._phecda_vue[tag]
+              });
+            }
+          }
+        });
+        api.on.getInspectorTree((payload) => {
+          if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+            payload.rootNodes = Object.keys(this.state).map((tag) => {
+              return {
+                id: tag,
+                label: tag
+              };
+            });
+          }
+        });
+        api.on.getInspectorState((payload) => {
+          if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+            if (this.has(payload.nodeId)) {
+              const instance = this.get(payload.nodeId);
+              payload.state = {
+                state: [],
+                methods: [],
+                getters: [],
+                internals: [],
+                memory: Object.entries(this.memory[payload.nodeId] || {}).map(([key, value]) => {
+                  return {
+                    editable: false,
+                    key,
+                    value
+                  };
+                })
+              };
+              Object.entries(instance).forEach(([key, value]) => {
+                if (this.modelMap.has(value)) {
+                  const tag = String(getTag(toRaw(value)));
+                  payload.state.state.unshift({
+                    editable: false,
+                    key,
+                    value: `[PV] ${tag}`,
+                    raw: `Phecda Vue Module [${tag}]`
+                  });
+                  return;
+                }
+                if (!key.startsWith("__")) payload.state.state.push({
+                  editable: true,
+                  key,
+                  value
+                });
+                else payload.state.internals.push({
+                  editable: false,
+                  key,
+                  value
+                });
+              });
+              getAllGetters(instance).forEach((item) => {
+                payload.state.getters.push({
+                  editable: false,
+                  key: item,
+                  value: instance[item]
+                });
+              });
+              getAllMethods(instance).forEach((item) => {
+                if (typeof instance[item] === "function") payload.state[item.startsWith("__") ? "internals" : "methods"].push({
+                  editable: false,
+                  key: item,
+                  value: Object.getPrototypeOf(instance)[item]
+                });
+              });
+            }
+          }
+        });
+        api.on.editInspectorState((payload) => {
+          if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
+            const state = this.get(payload.nodeId);
+            const { path } = payload;
+            payload.set(state, path, payload.state.value);
+          }
+        });
+        api.on.editComponentState((payload) => {
+          const { path, type } = payload;
+          if (type === "phecda-vue") payload.set(this.get(path.shift()), path, payload.state.value);
+        });
+      });
+    }
   }
 };
-__name(VuePhecda, "VuePhecda");
 function createPhecda() {
-  return new VuePhecda((instance) => {
-    return bindMethod(get(instance, "shallow") ? shallowReactive(instance) : reactive(instance));
+  const phecda = new VuePhecda("vue", (instance) => {
+    return bindMethod(get(instance, "shallow") ? shallowReactive(instance) : reactive(instance), USE_DEVTOOLS ? (instance2, key) => {
+      const cb = instance2[key].bind(instance2);
+      if (findPrototypeWithMethod(instance2, key).constructor.name === "Object") return cb;
+      const tag = getTag(instance2);
+      return (...args) => {
+        const name = `${tag}.${key}`;
+        phecda.emit(`Invoke ${name}`, {
+          args,
+          tag,
+          key
+        });
+        const ret = cb(...args);
+        if (ret instanceof Promise) ret.then(() => phecda.emit(`End ${name}(Async)`, {
+          args,
+          tag,
+          key
+        }));
+        else phecda.emit(`End ${name}`, {
+          args,
+          tag,
+          key
+        });
+        return ret;
+      };
+    } : void 0);
   });
+  return phecda;
 }
 __name(createPhecda, "createPhecda");
+function findPrototypeWithMethod(instance, method) {
+  let proto = Object.getPrototypeOf(instance);
+  while (proto) {
+    if (proto.hasOwnProperty(method)) return proto;
+    proto = Object.getPrototypeOf(proto);
+  }
+  return null;
+}
+__name(findPrototypeWithMethod, "findPrototypeWithMethod");
+function getAllMethods(obj) {
+  const methods = /* @__PURE__ */ new Set();
+  obj = Object.getPrototypeOf(obj);
+  while (obj.constructor.name !== "Object") {
+    Object.getOwnPropertyNames(obj).forEach((prop) => {
+      const propDescriptor = Object.getOwnPropertyDescriptor(obj, prop);
+      if (typeof propDescriptor.value === "function" && prop !== "constructor") methods.add(prop);
+    });
+    obj = Object.getPrototypeOf(obj);
+  }
+  return [
+    ...methods
+  ];
+}
+__name(getAllMethods, "getAllMethods");
+function getAllGetters(obj) {
+  const getters = /* @__PURE__ */ new Set();
+  obj = Object.getPrototypeOf(obj);
+  while (obj.constructor.name !== "Object") {
+    Object.getOwnPropertyNames(obj).forEach((prop) => {
+      const propDescriptor = Object.getOwnPropertyDescriptor(obj, prop);
+      if (typeof propDescriptor.get === "function") getters.add(prop);
+    });
+    obj = Object.getPrototypeOf(obj);
+  }
+  return [
+    ...getters
+  ];
+}
+__name(getAllGetters, "getAllGetters");
 
 // src/composable.ts
-import { bindMethod as bindMethod2, emitter, getDefaultPhecda } from "phecda-web";
-import { hasInjectionContext, inject, onBeforeUnmount, toRaw, toRef } from "vue";
+import { bindMethod as bindMethod2, emitter, getDefaultPhecda, getTag as getTag2 } from "phecda-web";
+import { getCurrentInstance, hasInjectionContext, inject, onBeforeUnmount, toRaw as toRaw2, toRef } from "vue";
 
 // src/utils.ts
 import { effectScope, onScopeDispose, markRaw as raw } from "vue";
@@ -60,26 +374,33 @@ __name(createSharedReactive, "createSharedReactive");
 // src/composable.ts
 var cacheMap = /* @__PURE__ */ new WeakMap();
 function useRaw(model) {
-  return toRaw(useR(model));
+  return toRaw2(useR(model));
 }
 __name(useRaw, "useRaw");
 function usePhecda() {
-  if (!hasInjectionContext())
-    throw new Error("[phecda-vue]: use hook inside component setup function");
+  if (!hasInjectionContext()) throw new Error("[phecda-vue]: use hook inside component setup function");
   const activePhecda = inject(phecdaSymbol);
-  if (!activePhecda)
-    throw new Error("[phecda-vue]: must install the vue plugin ");
-  if (!cacheMap.has(activePhecda))
-    cacheMap.set(activePhecda, bindMethod2(activePhecda));
+  if (!activePhecda) throw new Error("[phecda-vue]: must install the vue plugin ");
+  if (!cacheMap.has(activePhecda)) cacheMap.set(activePhecda, bindMethod2(activePhecda));
   return cacheMap.get(activePhecda);
 }
 __name(usePhecda, "usePhecda");
+function setStateToComponent(model) {
+  if (USE_DEVTOOLS) {
+    const currentInstance = getCurrentInstance();
+    if (currentInstance && currentInstance.proxy) {
+      const vm = currentInstance.proxy;
+      const cache = "_phecda_vue" in vm ? vm._phecda_vue : vm._phecda_vue = {};
+      const tag = getTag2(model);
+      cache[tag] = usePhecda().init(model);
+    }
+  }
+}
+__name(setStateToComponent, "setStateToComponent");
 function getPhecda(phecda) {
-  const activePhecda = phecda || getDefaultPhecda();
-  if (!activePhecda)
-    throw new Error("[phecda-vue]:  manually inject the phecda instance if there is no default phecda");
-  if (!cacheMap.has(activePhecda))
-    cacheMap.set(activePhecda, bindMethod2(activePhecda));
+  const activePhecda = phecda || getDefaultPhecda("vue");
+  if (!activePhecda) throw new Error("[phecda-vue]:  manually inject the phecda instance if there is no default phecda");
+  if (!cacheMap.has(activePhecda)) cacheMap.set(activePhecda, bindMethod2(activePhecda));
   return cacheMap.get(activePhecda);
 }
 __name(getPhecda, "getPhecda");
@@ -89,12 +410,13 @@ function useEvent(eventName, cb) {
   });
   emitter.on(eventName, cb);
   return {
-    emit: (arg) => emitter.emit(eventName, arg),
-    cancel: () => emitter.off(eventName, cb)
+    emit: /* @__PURE__ */ __name((arg) => emitter.emit(eventName, arg), "emit"),
+    cancel: /* @__PURE__ */ __name(() => emitter.off(eventName, cb), "cancel")
   };
 }
 __name(useEvent, "useEvent");
 function useR(model) {
+  setStateToComponent(model);
   return usePhecda().init(model);
 }
 __name(useR, "useR");
@@ -103,19 +425,16 @@ function getR(model, phecda) {
 }
 __name(getR, "getR");
 function useV(model) {
+  setStateToComponent(model);
   const instance = usePhecda().init(model);
-  if (cacheMap.has(instance))
-    return cacheMap.get(instance);
+  if (cacheMap.has(instance)) return cacheMap.get(instance);
   const cache = {};
   const proxy = new Proxy(instance, {
     get(target, key) {
-      if (typeof target[key] === "function")
-        return target[key];
-      if (target[key]?.__v_skip)
-        return target[key];
+      if (typeof target[key] === "function") return target[key];
+      if (target[key]?.__v_skip) return target[key];
       const cacheRef = cache[key];
-      if (cacheRef && cacheRef.r)
-        return cacheRef();
+      if (cacheRef && cacheRef.r) return cacheRef();
       cache[key] = createSharedReactive(() => {
         return toRef(target, key);
       });
@@ -131,18 +450,14 @@ function useV(model) {
 __name(useV, "useV");
 function getV(model, phecda) {
   const instance = getPhecda(phecda).init(model);
-  if (cacheMap.has(instance))
-    return cacheMap.get(instance);
+  if (cacheMap.has(instance)) return cacheMap.get(instance);
   const cache = {};
   const proxy = new Proxy(instance, {
     get(target, key) {
-      if (typeof target[key] === "function")
-        return target[key];
-      if (target[key]?.__v_skip)
-        return target[key];
+      if (typeof target[key] === "function") return target[key];
+      if (target[key]?.__v_skip) return target[key];
       const cacheRef = cache[key];
-      if (cacheRef && cacheRef.r)
-        return cacheRef();
+      if (cacheRef && cacheRef.r) return cacheRef();
       cache[key] = createSharedReactive(() => {
         return toRef(target, key);
       });
@@ -160,10 +475,8 @@ __name(getV, "getV");
 // src/decorator.ts
 import { set, setHandler, setStateKey } from "phecda-web";
 import { watchEffect } from "vue";
-function Shallow(isShallow = true) {
-  return (model) => {
-    set(model.prototype, "shallow", isShallow);
-  };
+function Shallow(model) {
+  set(model.prototype, "shallow", true);
 }
 __name(Shallow, "Shallow");
 function WatchEffect(option) {
@@ -172,8 +485,7 @@ function WatchEffect(option) {
     let stopHandler;
     setHandler(proto, key, {
       init(instance) {
-        if (typeof instance[key] !== "function")
-          throw new Error("WatchEffect must decorate function");
+        if (typeof instance[key] !== "function") throw new Error("WatchEffect must decorate function");
         stopHandler = watchEffect(instance[key].bind(instance), option);
       },
       unmount() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phecda-vue",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "provide phecda function to vue",
   "author": "fgsreally",
   "license": "MIT",
@@ -16,12 +16,13 @@
     "dist"
   ],
   "dependencies": {
+    "@vue/devtools-api": "^6.6.3",
     "vue": "^3.2.45",
-    "phecda-web": "2.0.2"
+    "phecda-web": "2.0.4"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
-    "tsup": "^6.5.0"
+    "tsup": "^8.1.0"
   },
   "scripts": {
     "build": "tsup",