phecda-vue 4.0.0 → 4.0.2

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

@@ -4,6 +4,7 @@ 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;
@@ -20,18 +21,21 @@ type SchemaToObj<S> = {
 };
 
 declare function useRaw<T extends Construct>(model: T): InstanceType<T>;
-declare function usePhecda(phecda?: VuePhecda): VuePhecda;
+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, phecda?: VuePhecda): UnwrapNestedRefs<InstanceType<T>>;
-declare function useV<T extends Construct>(model: T, phecda?: VuePhecda): ReplaceInstanceValues<InstanceType<T>>;
+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 Shallow(isShallow?: boolean): (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, markRaw, phecdaSymbol, useEvent, usePhecda, useR, useRaw, useV };
+export { Raw, RawSymbol, ReplaceInstanceValues, SchemaToObj, Shallow, VuePhecda, WatchEffect, createPhecda, createSharedReactive, getPhecda, getR, getV, markRaw, phecdaSymbol, useEvent, usePhecda, useR, useRaw, useV };

package/dist/index.js

@@ -27,6 +27,9 @@ __export(src_exports, {
   WatchEffect: () => WatchEffect,
   createPhecda: () => createPhecda,
   createSharedReactive: () => createSharedReactive,
+  getPhecda: () => getPhecda,
+  getR: () => getR,
+  getV: () => getV,
   markRaw: () => markRaw,
   phecdaSymbol: () => phecdaSymbol,
   useEvent: () => useEvent,
@@ -41,16 +44,18 @@ __reExport(src_exports, require("phecda-web"), module.exports);
 // src/core.ts
 var import_vue = require("vue");
 var import_phecda_web = require("phecda-web");
-var phecdaSymbol = Symbol("phecda-vue");
+var phecdaSymbol = Symbol(process.env.NODE_ENV === "development" ? "phecda-vue" : void 0);
 var VuePhecda = class extends import_phecda_web.WebPhecda {
+  vueApp;
   install(app) {
     app.provide(phecdaSymbol, this);
+    this.vueApp = app;
   }
 };
 __name(VuePhecda, "VuePhecda");
 function createPhecda() {
   return new VuePhecda((instance) => {
-    return (0, import_phecda_web.get)(instance, "shallow") ? (0, import_vue.shallowReactive)(instance) : (0, import_vue.reactive)(instance);
+    return (0, import_phecda_web.bindMethod)((0, import_phecda_web.get)(instance, "shallow") ? (0, import_vue.shallowReactive)(instance) : (0, import_vue.reactive)(instance));
   });
 }
 __name(createPhecda, "createPhecda");
@@ -95,15 +100,26 @@ function useRaw(model) {
   return (0, import_vue3.toRaw)(useR(model));
 }
 __name(useRaw, "useRaw");
-function usePhecda(phecda) {
-  const activePhecda = phecda || (0, import_vue3.hasInjectionContext)() && (0, import_vue3.inject)(phecdaSymbol);
+function usePhecda() {
+  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 used in setup) or manually inject the phecda instance ");
+    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 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));
+  return cacheMap.get(activePhecda);
+}
+__name(getPhecda, "getPhecda");
 function useEvent(eventName, cb) {
   (0, import_vue3.onBeforeUnmount)(() => {
     import_phecda_web2.emitter.off(eventName, cb);
@@ -115,24 +131,23 @@ function useEvent(eventName, cb) {
   };
 }
 __name(useEvent, "useEvent");
-function useR(model, phecda) {
-  return usePhecda(phecda).init(model);
+function useR(model) {
+  return usePhecda().init(model);
 }
 __name(useR, "useR");
-function useV(model, phecda) {
-  const instance = usePhecda(phecda).init(model);
+function getR(model, phecda) {
+  return getPhecda(phecda).init(model);
+}
+__name(getR, "getR");
+function useV(model) {
+  const instance = usePhecda().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 (target[key].toString().startsWith("("))
-          return target[key];
-        if (!cache[key])
-          cache[key] = target[key].bind(target);
-        return cache[key];
-      }
+      if (typeof target[key] === "function")
+        return target[key];
       if (target[key]?.__v_skip)
         return target[key];
       const cacheRef = cache[key];
@@ -151,12 +166,41 @@ function useV(model, phecda) {
   return proxy;
 }
 __name(useV, "useV");
+function getV(model, phecda) {
+  const instance = getPhecda(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")
+        return target[key];
+      if (target[key]?.__v_skip)
+        return target[key];
+      const cacheRef = cache[key];
+      if (cacheRef && cacheRef.r)
+        return cacheRef();
+      cache[key] = createSharedReactive(() => {
+        return (0, import_vue3.toRef)(target, key);
+      });
+      return cache[key]();
+    },
+    set() {
+      return false;
+    }
+  });
+  cacheMap.set(instance, proxy);
+  return proxy;
+}
+__name(getV, "getV");
 
 // src/decorator.ts
 var import_phecda_web3 = require("phecda-web");
 var import_vue4 = require("vue");
-function Shallow(model) {
-  (0, import_phecda_web3.set)(model.prototype, "shallow", true);
+function Shallow(isShallow = true) {
+  return (model) => {
+    (0, import_phecda_web3.set)(model.prototype, "shallow", isShallow);
+  };
 }
 __name(Shallow, "Shallow");
 function WatchEffect(option) {
@@ -183,6 +227,9 @@ __name(WatchEffect, "WatchEffect");
   WatchEffect,
   createPhecda,
   createSharedReactive,
+  getPhecda,
+  getR,
+  getV,
   markRaw,
   phecdaSymbol,
   useEvent,

package/dist/index.mjs

@@ -6,23 +6,25 @@ export * from "phecda-web";
 
 // src/core.ts
 import { reactive, shallowReactive } from "vue";
-import { WebPhecda, get } from "phecda-web";
-var phecdaSymbol = Symbol("phecda-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 {
+  vueApp;
   install(app) {
     app.provide(phecdaSymbol, this);
+    this.vueApp = app;
   }
 };
 __name(VuePhecda, "VuePhecda");
 function createPhecda() {
   return new VuePhecda((instance) => {
-    return get(instance, "shallow") ? shallowReactive(instance) : reactive(instance);
+    return bindMethod(get(instance, "shallow") ? shallowReactive(instance) : reactive(instance));
   });
 }
 __name(createPhecda, "createPhecda");
 
 // src/composable.ts
-import { bindMethod, emitter } from "phecda-web";
+import { bindMethod as bindMethod2, emitter, getDefaultPhecda } from "phecda-web";
 import { hasInjectionContext, inject, onBeforeUnmount, toRaw, toRef } from "vue";
 
 // src/utils.ts
@@ -61,15 +63,26 @@ function useRaw(model) {
   return toRaw(useR(model));
 }
 __name(useRaw, "useRaw");
-function usePhecda(phecda) {
-  const activePhecda = phecda || hasInjectionContext() && inject(phecdaSymbol);
+function usePhecda() {
+  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 used in setup) or manually inject the phecda instance ");
+    throw new Error("[phecda-vue]: must install the vue plugin ");
   if (!cacheMap.has(activePhecda))
-    cacheMap.set(activePhecda, bindMethod(activePhecda));
+    cacheMap.set(activePhecda, bindMethod2(activePhecda));
   return cacheMap.get(activePhecda);
 }
 __name(usePhecda, "usePhecda");
+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));
+  return cacheMap.get(activePhecda);
+}
+__name(getPhecda, "getPhecda");
 function useEvent(eventName, cb) {
   onBeforeUnmount(() => {
     emitter.off(eventName, cb);
@@ -81,24 +94,23 @@ function useEvent(eventName, cb) {
   };
 }
 __name(useEvent, "useEvent");
-function useR(model, phecda) {
-  return usePhecda(phecda).init(model);
+function useR(model) {
+  return usePhecda().init(model);
 }
 __name(useR, "useR");
-function useV(model, phecda) {
-  const instance = usePhecda(phecda).init(model);
+function getR(model, phecda) {
+  return getPhecda(phecda).init(model);
+}
+__name(getR, "getR");
+function useV(model) {
+  const instance = usePhecda().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 (target[key].toString().startsWith("("))
-          return target[key];
-        if (!cache[key])
-          cache[key] = target[key].bind(target);
-        return cache[key];
-      }
+      if (typeof target[key] === "function")
+        return target[key];
       if (target[key]?.__v_skip)
         return target[key];
       const cacheRef = cache[key];
@@ -117,12 +129,41 @@ function useV(model, phecda) {
   return proxy;
 }
 __name(useV, "useV");
+function getV(model, phecda) {
+  const instance = getPhecda(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")
+        return target[key];
+      if (target[key]?.__v_skip)
+        return target[key];
+      const cacheRef = cache[key];
+      if (cacheRef && cacheRef.r)
+        return cacheRef();
+      cache[key] = createSharedReactive(() => {
+        return toRef(target, key);
+      });
+      return cache[key]();
+    },
+    set() {
+      return false;
+    }
+  });
+  cacheMap.set(instance, proxy);
+  return proxy;
+}
+__name(getV, "getV");
 
 // 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) {
@@ -148,6 +189,9 @@ export {
   WatchEffect,
   createPhecda,
   createSharedReactive,
+  getPhecda,
+  getR,
+  getV,
   markRaw,
   phecdaSymbol,
   useEvent,

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "phecda-vue",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "provide phecda function to vue",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "author": "fgsreally",
+  "license": "MIT",
+  "repository": "https://github.com/fgsreally/phecda/tree/main/packages/vue",
   "keywords": [
     "phecda",
     "vue"
   ],
-  "author": "fgsreally",
-  "repository": "https://github.com/fgsreally/phecda/tree/main/packages/vue",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "license": "MIT",
   "dependencies": {
     "vue": "^3.2.45",
-    "phecda-web": "2.0.0"
+    "phecda-web": "2.0.2"
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",