phecda-vue 3.0.0 → 4.0.1

package/README.md

@@ -1,5 +1,5 @@
 # phecda-vue
-provide store/form/table with phecda function to vue
+provide state management with phecda function to vue
 
 ## store
 ```ts

package/dist/index.d.ts

@@ -1,7 +1,12 @@
-import * as vue from 'vue';
-import { Ref, App, UnwrapNestedRefs, WatchOptions } from 'vue';
-import { Construct, Events } from 'phecda-web';
+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 {
+    install(app: App): void;
+}
+declare function createPhecda(): VuePhecda;
 
 declare const RawSymbol: unique symbol;
 type Raw<T> = T & {
@@ -14,54 +19,19 @@ type SchemaToObj<S> = {
     [P in keyof S]: S[P] extends object ? SchemaToObj<S[P]> : (S[P] extends string ? any : S[P]);
 };
 
-declare const RE: RegExp;
-declare function createFilter<Data extends Record<string, any>>(initState?: Object, option?: {
-    RE?: RegExp;
-    needReturn?: boolean;
-    exclude?: string[];
-    errorHandler?: (error?: Error, errorPath?: string) => any;
-}): {
-    filter: <Schema>(obj: Schema) => SchemaToObj<Schema>;
-    data: [Data] extends [vue.Ref<any>] ? Data : vue.Ref<vue.UnwrapRef<Data>>;
-    init: (params?: Data) => void;
-    setState: <Key extends string>(key: Key, value: Data[Key]) => void;
-    storeState: (key: string, params?: Data) => void;
-    store: {
-        [key: string]: Data;
-    };
-    applyStore: (key: string) => void;
-    dispose: () => void;
-    clearStore: (key: string) => void;
-    delState: (key: string) => void;
-};
-
-declare const phecdaSymbol: unique symbol;
-declare function createPhecda(): vue.Raw<{
-    install(app: App): void;
-    load(state: any): any;
-    unmount(): Promise<void>;
-}>;
-
-type DeepPartial<T> = {
-    [K in keyof T]?: DeepPartial<T[K]>;
-};
-declare function markRaw<T extends object>(value: T): Raw<T>;
-declare function isObject(o: any): boolean;
-declare function mergeReactiveObjects<T extends Record<any, unknown> | Map<unknown, unknown> | Set<unknown>>(target: T, patchToApply: DeepPartial<T>): T;
-declare function createSharedReactive<F extends (...args: any) => any>(composable: F): () => ReturnType<F>;
-
-declare function useO<T extends Construct>(model: T): UnwrapNestedRefs<InstanceType<T>>;
 declare function useRaw<T extends Construct>(model: T): InstanceType<T>;
-declare function usePatch<T extends Construct>(model: T, Data: DeepPartial<InstanceType<T>>): void;
-declare function useR<T extends Construct>(model: T): UnwrapNestedRefs<InstanceType<T>>;
-declare function useV<T extends Construct>(model: T): ReplaceInstanceValues<InstanceType<T>>;
+declare function usePhecda(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 initialize<M extends Construct>(model: M, deleteOtherProperty?: boolean): InstanceType<M> | void;
+declare function useR<T extends Construct>(model: T, phecda?: VuePhecda): UnwrapNestedRefs<InstanceType<T>>;
+declare function useV<T extends Construct>(model: T, phecda?: VuePhecda): ReplaceInstanceValues<InstanceType<T>>;
 
-declare function Shallow(model: any): void;
+declare function Shallow(isShallow?: boolean): (model: any) => void;
 declare function WatchEffect(option?: WatchOptions): (proto: any, key: string) => void;
 
-export { DeepPartial, RE, Raw, RawSymbol, ReplaceInstanceValues, SchemaToObj, Shallow, WatchEffect, createFilter, createPhecda, createSharedReactive, initialize, isObject, markRaw, mergeReactiveObjects, phecdaSymbol, useEvent, useO, usePatch, useR, useRaw, useV };
+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, markRaw, phecdaSymbol, useEvent, usePhecda, useR, useRaw, useV };

package/dist/index.js

@@ -22,181 +22,49 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  RE: () => RE,
   Shallow: () => Shallow,
+  VuePhecda: () => VuePhecda,
   WatchEffect: () => WatchEffect,
-  createFilter: () => createFilter,
   createPhecda: () => createPhecda,
   createSharedReactive: () => createSharedReactive,
-  initialize: () => initialize,
-  isObject: () => isObject,
-  markRaw: () => markRaw2,
-  mergeReactiveObjects: () => mergeReactiveObjects,
+  markRaw: () => markRaw,
   phecdaSymbol: () => phecdaSymbol,
   useEvent: () => useEvent,
-  useO: () => useO,
-  usePatch: () => usePatch,
+  usePhecda: () => usePhecda,
   useR: () => useR,
   useRaw: () => useRaw,
   useV: () => useV
 });
 module.exports = __toCommonJS(src_exports);
-
-// src/filter.ts
-var import_vue = require("vue");
-var RE = /{{(.*)}}/;
-function createFilter(initState = {}, option = {}) {
-  const resolveOption = Object.assign({
-    RE,
-    exclude: []
-  }, option);
-  const scope = (0, import_vue.effectScope)(true);
-  let data = scope.run(() => (0, import_vue.ref)(initState));
-  let store = {};
-  function traverse(obj, path) {
-    for (const i in obj) {
-      if (resolveOption.exclude.includes(i))
-        continue;
-      const errorPath = path ? `${path}.${i}` : i;
-      if (typeof obj[i] === "object" && obj[i])
-        traverse(obj[i], errorPath);
-      if (typeof obj[i] === "string") {
-        if (resolveOption.RE.test(obj[i])) {
-          const body = obj[i].replace(resolveOption.RE, (_, s) => {
-            return s;
-          });
-          Object.defineProperty(obj, i, {
-            get() {
-              return new Function(...Object.keys(data.value), "_eh", resolveOption.errorHandler ? `try{${resolveOption.needReturn ? "" : "return"} ${body}}catch(e){return _eh(e,"${errorPath}")}` : `${resolveOption.needReturn ? "" : "return"} ${body}`)(...Object.values(data.value), resolveOption.errorHandler);
-            },
-            set(value) {
-              try {
-                new Function("_data", "_v", `_data.${body}=_v`)(data.value, value);
-                return true;
-              } catch (e) {
-                resolveOption.errorHandler?.(e);
-                return false;
-              }
-            }
-          });
-        }
-      }
-    }
-  }
-  __name(traverse, "traverse");
-  function filter(obj) {
-    traverse(obj);
-    return obj;
-  }
-  __name(filter, "filter");
-  function setState(key, value) {
-    data.value[key] = value;
-  }
-  __name(setState, "setState");
-  function storeState(key, params) {
-    store[key] = data.value;
-    init(params);
-  }
-  __name(storeState, "storeState");
-  function applyStore(key) {
-    if (!store[key])
-      return;
-    data.value = store[key];
-  }
-  __name(applyStore, "applyStore");
-  function init(params) {
-    data.value = params || initState || {};
-  }
-  __name(init, "init");
-  function delState(key) {
-    delete data.value[key];
-  }
-  __name(delState, "delState");
-  function clearStore(key) {
-    delete store[key];
-  }
-  __name(clearStore, "clearStore");
-  function dispose() {
-    data = null;
-    store = null;
-    scope.stop();
-  }
-  __name(dispose, "dispose");
-  return {
-    filter,
-    data,
-    init,
-    setState,
-    storeState,
-    store,
-    applyStore,
-    dispose,
-    clearStore,
-    delState
-  };
-}
-__name(createFilter, "createFilter");
-
-// src/index.ts
 __reExport(src_exports, require("phecda-web"), module.exports);
 
-// src/phecda.ts
-var import_vue2 = require("vue");
+// src/core.ts
+var import_vue = require("vue");
 var import_phecda_web = require("phecda-web");
-var phecdaSymbol = Symbol("phecda");
+var phecdaSymbol = Symbol(process.env.NODE_ENV === "development" ? "phecda-vue" : void 0);
+var VuePhecda = class extends import_phecda_web.WebPhecda {
+  install(app) {
+    app.provide(phecdaSymbol, this);
+  }
+};
+__name(VuePhecda, "VuePhecda");
 function createPhecda() {
-  (0, import_phecda_web.resetActiveInstance)();
-  const phecda = (0, import_vue2.markRaw)({
-    install(app) {
-      const instance = (0, import_phecda_web.getActiveInstance)();
-      instance.app = app;
-      app.provide(phecdaSymbol, instance);
-      app.config.globalProperties.$phecda = instance;
-    },
-    load(state) {
-      const instance = (0, import_phecda_web.getActiveInstance)();
-      instance.state = state;
-      return this;
-    },
-    async unmount() {
-      const { state } = (0, import_phecda_web.getActiveInstance)();
-      await Object.values(state).map((ins) => (0, import_phecda_web.invokeHandler)("unmount", ins));
-      (0, import_phecda_web.resetActiveInstance)();
-    }
+  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));
   });
-  return phecda;
 }
 __name(createPhecda, "createPhecda");
 
 // src/composable.ts
-var import_vue4 = require("vue");
 var import_phecda_web2 = require("phecda-web");
+var import_vue3 = require("vue");
 
 // src/utils.ts
-var import_vue3 = require("vue");
-function markRaw2(value) {
-  return (0, import_vue3.markRaw)(value);
-}
-__name(markRaw2, "markRaw");
-function isObject(o) {
-  return Object.prototype.toString.call(o) === "[object Object]";
-}
-__name(isObject, "isObject");
-function mergeReactiveObjects(target, patchToApply) {
-  for (const key in patchToApply) {
-    if (!patchToApply.hasOwnProperty(key))
-      continue;
-    const subPatch = patchToApply[key];
-    const targetValue = target[key];
-    if (isObject(targetValue) && isObject(subPatch) && target.hasOwnProperty(key) && !(0, import_vue3.isRef)(subPatch) && !(0, import_vue3.isReactive)(subPatch)) {
-      target[key] = mergeReactiveObjects(targetValue, subPatch);
-    } else {
-      target[key] = subPatch;
-    }
-  }
-  return target;
+var import_vue2 = require("vue");
+function markRaw(value) {
+  return (0, import_vue2.markRaw)(value);
 }
-__name(mergeReactiveObjects, "mergeReactiveObjects");
+__name(markRaw, "markRaw");
 function createSharedReactive(composable) {
   let subscribers = 0;
   let state;
@@ -210,10 +78,10 @@ function createSharedReactive(composable) {
   const cb = /* @__PURE__ */ __name(() => {
     subscribers++;
     if (!state) {
-      scope = (0, import_vue3.effectScope)(true);
+      scope = (0, import_vue2.effectScope)(true);
       state = scope.run(() => composable());
     }
-    (0, import_vue3.onScopeDispose)(dispose);
+    (0, import_vue2.onScopeDispose)(dispose);
     return state;
   }, "cb");
   cb.r = true;
@@ -222,60 +90,44 @@ function createSharedReactive(composable) {
 __name(createSharedReactive, "createSharedReactive");
 
 // src/composable.ts
-var REF_SYMBOL = Symbol("ref");
-function initInstance(model) {
-  const proxyFn = (0, import_phecda_web2.get)(model.prototype, "shallow") ? import_vue4.shallowReactive : import_vue4.reactive;
-  const instance = proxyFn(new model());
-  instance._promise = (0, import_phecda_web2.invokeHandler)("init", instance);
-  return instance;
-}
-__name(initInstance, "initInstance");
-function useO(model) {
-  const { state, origin } = (0, import_phecda_web2.getActiveInstance)();
-  if ((0, import_phecda_web2.get)(model.prototype, "isolate"))
-    return initInstance(model);
-  const tag = (0, import_phecda_web2.getTag)(model);
-  if (tag in state) {
-    if (process.env.NODE_ENV === "development") {
-      if (origin.get(state[tag]) === model)
-        return state[tag];
-    } else {
-      if (origin.get(state[tag]) !== model)
-        console.warn(`Synonym model: Module taged "${String(tag)}" has been loaded before, so won't load Module "${model.name}"`);
-      return state[tag];
-    }
-  }
-  const instance = initInstance(model);
-  state[tag] = instance;
-  origin.set(instance, model);
-  return state[tag];
-}
-__name(useO, "useO");
+var cacheMap = /* @__PURE__ */ new WeakMap();
 function useRaw(model) {
-  return (0, import_vue4.toRaw)(useO(model));
+  return (0, import_vue3.toRaw)(useR(model));
 }
 __name(useRaw, "useRaw");
-function usePatch(model, Data) {
-  const instance = useO(model);
-  mergeReactiveObjects(instance, Data);
+function usePhecda(phecda) {
+  const activePhecda = phecda || (0, import_vue3.hasInjectionContext)() && (0, import_vue3.inject)(phecdaSymbol);
+  if (!activePhecda)
+    throw new Error("[phecda-vue]: must install the vue plugin (if used in setup) or manually inject the phecda instance ");
+  if (!cacheMap.has(activePhecda))
+    cacheMap.set(activePhecda, (0, import_phecda_web2.bindMethod)(activePhecda));
+  return cacheMap.get(activePhecda);
+}
+__name(usePhecda, "usePhecda");
+function useEvent(eventName, cb) {
+  (0, import_vue3.onBeforeUnmount)(() => {
+    import_phecda_web2.emitter.off(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)
+  };
 }
-__name(usePatch, "usePatch");
-function useR(model) {
-  return useO(model);
+__name(useEvent, "useEvent");
+function useR(model, phecda) {
+  return usePhecda(phecda).init(model);
 }
 __name(useR, "useR");
-function useV(model) {
-  const { cache: cacheMap } = (0, import_phecda_web2.getActiveInstance)();
-  const instance = useO(model);
-  const cache = cacheMap.get(instance) || {};
-  if (cache[REF_SYMBOL])
-    return cache[REF_SYMBOL];
+function useV(model, phecda) {
+  const instance = usePhecda(phecda).init(model);
+  if (cacheMap.has(instance))
+    return cacheMap.get(instance);
+  const cache = {};
   const proxy = new Proxy(instance, {
     get(target, key) {
       if (typeof target[key] === "function") {
-        if (!cache[key])
-          cache[key] = target[key].bind(target);
-        return cache[key];
+        return target[key];
       }
       if (target[key]?.__v_skip)
         return target[key];
@@ -283,7 +135,7 @@ function useV(model) {
       if (cacheRef && cacheRef.r)
         return cacheRef();
       cache[key] = createSharedReactive(() => {
-        return (0, import_vue4.toRef)(target, key);
+        return (0, import_vue3.toRef)(target, key);
       });
       return cache[key]();
     },
@@ -291,41 +143,18 @@ function useV(model) {
       return false;
     }
   });
-  cache[REF_SYMBOL] = proxy;
-  if (!cacheMap.has(instance))
-    cacheMap.set(instance, cache);
+  cacheMap.set(instance, proxy);
   return proxy;
 }
 __name(useV, "useV");
-function useEvent(eventName, cb) {
-  (0, import_vue4.onBeforeUnmount)(() => {
-    import_phecda_web2.emitter.off(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)
-  };
-}
-__name(useEvent, "useEvent");
-function initialize(model, deleteOtherProperty = true) {
-  const instance = useO(model);
-  const newInstance = new model();
-  Object.assign(instance, newInstance);
-  if (deleteOtherProperty) {
-    for (const key in instance) {
-      if (!(key in newInstance))
-        delete instance[key];
-    }
-  }
-}
-__name(initialize, "initialize");
 
 // src/decorator.ts
 var import_phecda_web3 = require("phecda-web");
-var import_vue5 = require("vue");
-function Shallow(model) {
-  (0, import_phecda_web3.set)(model.prototype, "shallow", true);
+var import_vue4 = require("vue");
+function Shallow(isShallow = true) {
+  return (model) => {
+    (0, import_phecda_web3.set)(model.prototype, "shallow", isShallow);
+  };
 }
 __name(Shallow, "Shallow");
 function WatchEffect(option) {
@@ -336,7 +165,7 @@ function WatchEffect(option) {
       init(instance) {
         if (typeof instance[key] !== "function")
           throw new Error("WatchEffect must decorate function");
-        stopHandler = (0, import_vue5.watchEffect)(instance[key].bind(instance), option);
+        stopHandler = (0, import_vue4.watchEffect)(instance[key].bind(instance), option);
       },
       unmount() {
         return stopHandler?.();
@@ -347,21 +176,17 @@ function WatchEffect(option) {
 __name(WatchEffect, "WatchEffect");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RE,
   Shallow,
+  VuePhecda,
   WatchEffect,
-  createFilter,
   createPhecda,
   createSharedReactive,
-  initialize,
-  isObject,
   markRaw,
-  mergeReactiveObjects,
   phecdaSymbol,
   useEvent,
-  useO,
-  usePatch,
+  usePhecda,
   useR,
   useRaw,
-  useV
+  useV,
+  ...require("phecda-web")
 });

package/dist/index.mjs

@@ -1,161 +1,36 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// src/filter.ts
-import { effectScope, ref } from "vue";
-var RE = /{{(.*)}}/;
-function createFilter(initState = {}, option = {}) {
-  const resolveOption = Object.assign({
-    RE,
-    exclude: []
-  }, option);
-  const scope = effectScope(true);
-  let data = scope.run(() => ref(initState));
-  let store = {};
-  function traverse(obj, path) {
-    for (const i in obj) {
-      if (resolveOption.exclude.includes(i))
-        continue;
-      const errorPath = path ? `${path}.${i}` : i;
-      if (typeof obj[i] === "object" && obj[i])
-        traverse(obj[i], errorPath);
-      if (typeof obj[i] === "string") {
-        if (resolveOption.RE.test(obj[i])) {
-          const body = obj[i].replace(resolveOption.RE, (_, s) => {
-            return s;
-          });
-          Object.defineProperty(obj, i, {
-            get() {
-              return new Function(...Object.keys(data.value), "_eh", resolveOption.errorHandler ? `try{${resolveOption.needReturn ? "" : "return"} ${body}}catch(e){return _eh(e,"${errorPath}")}` : `${resolveOption.needReturn ? "" : "return"} ${body}`)(...Object.values(data.value), resolveOption.errorHandler);
-            },
-            set(value) {
-              try {
-                new Function("_data", "_v", `_data.${body}=_v`)(data.value, value);
-                return true;
-              } catch (e) {
-                resolveOption.errorHandler?.(e);
-                return false;
-              }
-            }
-          });
-        }
-      }
-    }
-  }
-  __name(traverse, "traverse");
-  function filter(obj) {
-    traverse(obj);
-    return obj;
-  }
-  __name(filter, "filter");
-  function setState(key, value) {
-    data.value[key] = value;
-  }
-  __name(setState, "setState");
-  function storeState(key, params) {
-    store[key] = data.value;
-    init(params);
-  }
-  __name(storeState, "storeState");
-  function applyStore(key) {
-    if (!store[key])
-      return;
-    data.value = store[key];
-  }
-  __name(applyStore, "applyStore");
-  function init(params) {
-    data.value = params || initState || {};
-  }
-  __name(init, "init");
-  function delState(key) {
-    delete data.value[key];
-  }
-  __name(delState, "delState");
-  function clearStore(key) {
-    delete store[key];
-  }
-  __name(clearStore, "clearStore");
-  function dispose() {
-    data = null;
-    store = null;
-    scope.stop();
-  }
-  __name(dispose, "dispose");
-  return {
-    filter,
-    data,
-    init,
-    setState,
-    storeState,
-    store,
-    applyStore,
-    dispose,
-    clearStore,
-    delState
-  };
-}
-__name(createFilter, "createFilter");
-
 // src/index.ts
 export * from "phecda-web";
 
-// src/phecda.ts
-import { markRaw } from "vue";
-import { getActiveInstance, invokeHandler, resetActiveInstance } from "phecda-web";
-var phecdaSymbol = Symbol("phecda");
+// src/core.ts
+import { reactive, shallowReactive } from "vue";
+import { WebPhecda, bindMethod, get } from "phecda-web";
+var phecdaSymbol = Symbol(process.env.NODE_ENV === "development" ? "phecda-vue" : void 0);
+var VuePhecda = class extends WebPhecda {
+  install(app) {
+    app.provide(phecdaSymbol, this);
+  }
+};
+__name(VuePhecda, "VuePhecda");
 function createPhecda() {
-  resetActiveInstance();
-  const phecda = markRaw({
-    install(app) {
-      const instance = getActiveInstance();
-      instance.app = app;
-      app.provide(phecdaSymbol, instance);
-      app.config.globalProperties.$phecda = instance;
-    },
-    load(state) {
-      const instance = getActiveInstance();
-      instance.state = state;
-      return this;
-    },
-    async unmount() {
-      const { state } = getActiveInstance();
-      await Object.values(state).map((ins) => invokeHandler("unmount", ins));
-      resetActiveInstance();
-    }
+  return new VuePhecda((instance) => {
+    return bindMethod(get(instance, "shallow") ? shallowReactive(instance) : reactive(instance));
   });
-  return phecda;
 }
 __name(createPhecda, "createPhecda");
 
 // src/composable.ts
-import { onBeforeUnmount, reactive, shallowReactive, toRaw, toRef } from "vue";
-import { emitter, get, getActiveInstance as getActiveInstance2, getTag, invokeHandler as invokeHandler2 } from "phecda-web";
+import { bindMethod as bindMethod2, emitter } from "phecda-web";
+import { hasInjectionContext, inject, onBeforeUnmount, toRaw, toRef } from "vue";
 
 // src/utils.ts
-import { effectScope as effectScope2, isReactive, isRef, onScopeDispose, markRaw as raw } from "vue";
-function markRaw2(value) {
+import { effectScope, onScopeDispose, markRaw as raw } from "vue";
+function markRaw(value) {
   return raw(value);
 }
-__name(markRaw2, "markRaw");
-function isObject(o) {
-  return Object.prototype.toString.call(o) === "[object Object]";
-}
-__name(isObject, "isObject");
-function mergeReactiveObjects(target, patchToApply) {
-  for (const key in patchToApply) {
-    if (!patchToApply.hasOwnProperty(key))
-      continue;
-    const subPatch = patchToApply[key];
-    const targetValue = target[key];
-    if (isObject(targetValue) && isObject(subPatch) && target.hasOwnProperty(key) && !isRef(subPatch) && !isReactive(subPatch)) {
-      target[key] = mergeReactiveObjects(targetValue, subPatch);
-    } else {
-      target[key] = subPatch;
-    }
-  }
-  return target;
-}
-__name(mergeReactiveObjects, "mergeReactiveObjects");
+__name(markRaw, "markRaw");
 function createSharedReactive(composable) {
   let subscribers = 0;
   let state;
@@ -169,7 +44,7 @@ function createSharedReactive(composable) {
   const cb = /* @__PURE__ */ __name(() => {
     subscribers++;
     if (!state) {
-      scope = effectScope2(true);
+      scope = effectScope(true);
       state = scope.run(() => composable());
     }
     onScopeDispose(dispose);
@@ -181,60 +56,44 @@ function createSharedReactive(composable) {
 __name(createSharedReactive, "createSharedReactive");
 
 // src/composable.ts
-var REF_SYMBOL = Symbol("ref");
-function initInstance(model) {
-  const proxyFn = get(model.prototype, "shallow") ? shallowReactive : reactive;
-  const instance = proxyFn(new model());
-  instance._promise = invokeHandler2("init", instance);
-  return instance;
-}
-__name(initInstance, "initInstance");
-function useO(model) {
-  const { state, origin } = getActiveInstance2();
-  if (get(model.prototype, "isolate"))
-    return initInstance(model);
-  const tag = getTag(model);
-  if (tag in state) {
-    if (process.env.NODE_ENV === "development") {
-      if (origin.get(state[tag]) === model)
-        return state[tag];
-    } else {
-      if (origin.get(state[tag]) !== model)
-        console.warn(`Synonym model: Module taged "${String(tag)}" has been loaded before, so won't load Module "${model.name}"`);
-      return state[tag];
-    }
-  }
-  const instance = initInstance(model);
-  state[tag] = instance;
-  origin.set(instance, model);
-  return state[tag];
-}
-__name(useO, "useO");
+var cacheMap = /* @__PURE__ */ new WeakMap();
 function useRaw(model) {
-  return toRaw(useO(model));
+  return toRaw(useR(model));
 }
 __name(useRaw, "useRaw");
-function usePatch(model, Data) {
-  const instance = useO(model);
-  mergeReactiveObjects(instance, Data);
+function usePhecda(phecda) {
+  const activePhecda = phecda || hasInjectionContext() && inject(phecdaSymbol);
+  if (!activePhecda)
+    throw new Error("[phecda-vue]: must install the vue plugin (if used in setup) or manually inject the phecda instance ");
+  if (!cacheMap.has(activePhecda))
+    cacheMap.set(activePhecda, bindMethod2(activePhecda));
+  return cacheMap.get(activePhecda);
+}
+__name(usePhecda, "usePhecda");
+function useEvent(eventName, cb) {
+  onBeforeUnmount(() => {
+    emitter.off(eventName, cb);
+  });
+  emitter.on(eventName, cb);
+  return {
+    emit: (arg) => emitter.emit(eventName, arg),
+    cancel: () => emitter.off(eventName, cb)
+  };
 }
-__name(usePatch, "usePatch");
-function useR(model) {
-  return useO(model);
+__name(useEvent, "useEvent");
+function useR(model, phecda) {
+  return usePhecda(phecda).init(model);
 }
 __name(useR, "useR");
-function useV(model) {
-  const { cache: cacheMap } = getActiveInstance2();
-  const instance = useO(model);
-  const cache = cacheMap.get(instance) || {};
-  if (cache[REF_SYMBOL])
-    return cache[REF_SYMBOL];
+function useV(model, phecda) {
+  const instance = usePhecda(phecda).init(model);
+  if (cacheMap.has(instance))
+    return cacheMap.get(instance);
+  const cache = {};
   const proxy = new Proxy(instance, {
     get(target, key) {
       if (typeof target[key] === "function") {
-        if (!cache[key])
-          cache[key] = target[key].bind(target);
-        return cache[key];
+        return target[key];
       }
       if (target[key]?.__v_skip)
         return target[key];
@@ -250,41 +109,18 @@ function useV(model) {
       return false;
     }
   });
-  cache[REF_SYMBOL] = proxy;
-  if (!cacheMap.has(instance))
-    cacheMap.set(instance, cache);
+  cacheMap.set(instance, proxy);
   return proxy;
 }
 __name(useV, "useV");
-function useEvent(eventName, cb) {
-  onBeforeUnmount(() => {
-    emitter.off(eventName, cb);
-  });
-  emitter.on(eventName, cb);
-  return {
-    emit: (arg) => emitter.emit(eventName, arg),
-    cancel: () => emitter.off(eventName, cb)
-  };
-}
-__name(useEvent, "useEvent");
-function initialize(model, deleteOtherProperty = true) {
-  const instance = useO(model);
-  const newInstance = new model();
-  Object.assign(instance, newInstance);
-  if (deleteOtherProperty) {
-    for (const key in instance) {
-      if (!(key in newInstance))
-        delete instance[key];
-    }
-  }
-}
-__name(initialize, "initialize");
 
 // src/decorator.ts
 import { set, setHandler, setStateKey } from "phecda-web";
 import { watchEffect } from "vue";
-function Shallow(model) {
-  set(model.prototype, "shallow", true);
+function Shallow(isShallow = true) {
+  return (model) => {
+    set(model.prototype, "shallow", isShallow);
+  };
 }
 __name(Shallow, "Shallow");
 function WatchEffect(option) {
@@ -305,20 +141,15 @@ function WatchEffect(option) {
 }
 __name(WatchEffect, "WatchEffect");
 export {
-  RE,
   Shallow,
+  VuePhecda,
   WatchEffect,
-  createFilter,
   createPhecda,
   createSharedReactive,
-  initialize,
-  isObject,
-  markRaw2 as markRaw,
-  mergeReactiveObjects,
+  markRaw,
   phecdaSymbol,
   useEvent,
-  useO,
-  usePatch,
+  usePhecda,
   useR,
   useRaw,
   useV

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "phecda-vue",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "description": "provide phecda function to vue",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "phecda",
+    "vue"
+  ],
+  "author": "fgsreally",
+  "repository": "https://github.com/fgsreally/phecda/tree/main/packages/vue",
   "files": [
     "dist"
   ],
   "license": "MIT",
   "dependencies": {
     "vue": "^3.2.45",
-    "phecda-web": "1.0.1"
+    "phecda-web": "2.0.1"
   },
   "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
     "tsup": "^6.5.0"
   },
   "scripts": {