phecda-vue 2.1.3-alpha.5 → 3.0.0-alpha.11

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import { Events, Construct } from 'phecda-core';
-export * from 'phecda-core';
-import { Ref, App, UnwrapNestedRefs } from 'vue';
 import * as _vue_reactivity from '@vue/reactivity';
-import { Handler } from 'mitt';
+import { Ref, App, UnwrapNestedRefs } from 'vue';
+import { Events, Construct } from 'phecda-web';
+export * from 'phecda-web';
 
 type ReplaceInstanceValues<I> = {
     [P in keyof I]: I[P] extends (...args: any[]) => any ? I[P] : Ref<I[P]>;
@@ -10,44 +9,6 @@ type ReplaceInstanceValues<I> = {
 type SchemaToObj<S> = {
     [P in keyof S]: S[P] extends object ? SchemaToObj<S[P]> : (S[P] extends string ? any : S[P]);
 };
-interface PhecdaInstance {
-    useOMap: Map<any, any>;
-    useVMap: WeakMap<any, any>;
-    useRMap: WeakMap<any, any>;
-    fnMap: WeakMap<any, any>;
-    computedMap: WeakMap<any, any>;
-}
-interface PhecdaEmitter {
-    on<N extends keyof Events>(eventName: N, cb: (args: Events[N]) => void): void;
-    off<N extends keyof Events>(eventName: N, cb?: (args: Events[N]) => void): void;
-    emit<N extends keyof Events>(eventName: N, param: Events[N]): void;
-}
-
-declare const emitter: PhecdaEmitter;
-
-declare const phecdaSymbol: unique symbol;
-declare const interval: any;
-declare function createPhecda(symbol?: string): _vue_reactivity.Raw<{
-    install(app: App): void;
-}>;
-declare function setActivePhecda(phecda: PhecdaInstance): void;
-declare function getActivePhecda(): PhecdaInstance;
-declare function getReactiveMap(symbol: string): Map<string, any> | null;
-
-type DeepPartial<T> = {
-    [K in keyof T]?: DeepPartial<T[K]>;
-};
-
-declare function useO<T extends Construct>(module: T): UnwrapNestedRefs<InstanceType<T>>;
-declare function useRaw<T extends Construct>(module: T): InstanceType<T>;
-declare function usePatch<T extends Construct>(module: T, Data: DeepPartial<InstanceType<T>>): void;
-declare function useR<T extends Construct>(module: T): UnwrapNestedRefs<InstanceType<T>>;
-declare function useV<T extends Construct>(module: T): ReplaceInstanceValues<InstanceType<T>>;
-declare function useEvent<Key extends keyof Events>(eventName: Key, cb: Handler<Events[Key]>): () => void;
-declare function initialize<M extends Construct>(module: M, deleteOtherProperty?: boolean): InstanceType<M> | void;
-declare function waitUntilInit(...modules: Construct[]): Promise<void>;
-
-declare function Isolate(): (target: any) => void;
 
 declare const RE: RegExp;
 declare function createFilter<Data extends Record<string, any>>(initState?: Object, option?: {
@@ -78,4 +39,26 @@ declare class PV {
     off<Key extends keyof Events>(type: Key, handler?: (arg: Events[Key]) => void): void;
 }
 
-export { Isolate, PV, PhecdaEmitter, PhecdaInstance, RE, ReplaceInstanceValues, SchemaToObj, createFilter, createPhecda, emitter, getActivePhecda, getReactiveMap, initialize, interval, phecdaSymbol, setActivePhecda, useEvent, useO, usePatch, useR, useRaw, useV, waitUntilInit };
+declare const phecdaSymbol: unique symbol;
+declare function createPhecda(): _vue_reactivity.Raw<{
+    install(app: App): void;
+    load(state: any): any;
+    unmount(): Promise<void>;
+}>;
+
+type DeepPartial<T> = {
+    [K in keyof T]?: DeepPartial<T[K]>;
+};
+
+declare function useO<T extends Construct>(module: T): UnwrapNestedRefs<InstanceType<T>>;
+declare function useRaw<T extends Construct>(module: T): InstanceType<T>;
+declare function usePatch<T extends Construct>(module: T, Data: DeepPartial<InstanceType<T>>): void;
+declare function useR<T extends Construct>(module: T): UnwrapNestedRefs<InstanceType<T>>;
+declare function useV<T extends Construct>(module: T): ReplaceInstanceValues<InstanceType<T>>;
+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>(module: M, deleteOtherProperty?: boolean): InstanceType<M> | void;
+
+export { PV, RE, createFilter, createPhecda, initialize, phecdaSymbol, useEvent, useO, usePatch, useR, useRaw, useV };

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
@@ -19,158 +17,178 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Isolate: () => Isolate,
   PV: () => PV,
   RE: () => RE,
   createFilter: () => createFilter,
   createPhecda: () => createPhecda,
-  emitter: () => emitter,
-  getActivePhecda: () => getActivePhecda,
-  getReactiveMap: () => getReactiveMap,
   initialize: () => initialize,
-  interval: () => interval,
   phecdaSymbol: () => phecdaSymbol,
-  setActivePhecda: () => setActivePhecda,
   useEvent: () => useEvent,
   useO: () => useO,
   usePatch: () => usePatch,
   useR: () => useR,
   useRaw: () => useRaw,
-  useV: () => useV,
-  waitUntilInit: () => waitUntilInit
+  useV: () => useV
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/emitter.ts
-var import_mitt = __toESM(require("mitt"));
-var emitter = (0, import_mitt.default)();
-
-// src/vue/phecda.ts
+// src/filter.ts
 var import_vue = require("vue");
-var import_phecda_core = require("phecda-core");
-var phecdaSymbol = Symbol("phecda");
-var interval = {};
-function createPhecda(symbol) {
-  const phecda = (0, import_vue.markRaw)({
-    install(app) {
-      interval.app = app;
-      app.provide(phecdaSymbol, phecda);
-      app.config.globalProperties.$phecda = phecda;
-      if (!window.__PHECDA_VUE__)
-        window.__PHECDA_VUE__ = {};
-      if (symbol) {
-        window.__PHECDA_VUE__[symbol] = {
-          instance: phecda,
-          snapshot: () => {
-            const ret = [];
-            const { useOMap } = getActivePhecda();
-            for (const [key, value] of useOMap)
-              ret.push({
-                key: (0, import_phecda_core.getTag)(key) || key.name,
-                value
-              });
-            return ret;
-          }
-        };
-      }
-      let eventRecord = [];
-      if (!(0, import_phecda_core.getProperty)("watcher")) {
-        (0, import_phecda_core.injectProperty)("watcher", ({ eventName, instance, key, options }) => {
-          const fn = typeof instance[key] === "function" ? instance[key].bind(instance) : (v) => instance[key] = v;
-          if (options?.once) {
-            const handler = /* @__PURE__ */ __name((...args) => {
-              fn(...args);
-              emitter.off(eventName, handler);
-            }, "handler");
-            emitter.on(eventName, handler);
-            eventRecord.push([
-              eventName,
-              handler
-            ]);
-          } else {
-            eventRecord.push([
-              eventName,
-              fn
-            ]);
-            emitter.on(eventName, fn);
-          }
-        });
-      }
-      if (!(0, import_phecda_core.getProperty)("storage")) {
-        (0, import_phecda_core.injectProperty)("storage", ({ tag, key, instance }) => {
-          if (!tag)
-            return;
-          const initstr = localStorage.getItem(tag);
-          if (initstr) {
-            const data = JSON.parse(initstr);
-            if (key) {
-              instance[key] = data;
-            } else {
-              for (const i in data) {
-                if (i)
-                  instance[i] = data[i];
+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;
               }
             }
-          }
-          globalThis.addEventListener("beforeunload", () => {
-            localStorage.setItem(tag, JSON.stringify(key ? instance[key] : instance));
           });
-        });
+        }
       }
-      const originUnmount = app.unmount.bind(app);
-      app.unmount = () => {
-        eventRecord.forEach(([eventName, handler]) => emitter.off(eventName, handler));
-        eventRecord = [];
-        if (symbol)
-          delete window.__PHECDA_VUE__[symbol];
-        originUnmount();
-      };
     }
-  });
-  return phecda;
+  }
+  __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(createPhecda, "createPhecda");
-var activePhecda = {
-  useVMap: /* @__PURE__ */ new WeakMap(),
-  useOMap: /* @__PURE__ */ new Map(),
-  useRMap: /* @__PURE__ */ new WeakMap(),
-  fnMap: /* @__PURE__ */ new WeakMap(),
-  computedMap: /* @__PURE__ */ new WeakMap()
+__name(createFilter, "createFilter");
+
+// src/index.ts
+__reExport(src_exports, require("phecda-web"), module.exports);
+
+// src/wrapper.ts
+var import_phecda_web = require("phecda-web");
+var PV = class {
+  constructor() {
+  }
+  get tag() {
+    return this.__TAG__;
+  }
+  on(type, handler) {
+    import_phecda_web.emitter.on(type, handler);
+  }
+  emit(type, param) {
+    import_phecda_web.emitter.emit(type, param);
+  }
+  off(type, handler) {
+    import_phecda_web.emitter.off(type, handler);
+  }
 };
-function setActivePhecda(phecda) {
-  activePhecda = phecda;
-}
-__name(setActivePhecda, "setActivePhecda");
-function getActivePhecda() {
-  return activePhecda;
-}
-__name(getActivePhecda, "getActivePhecda");
-function getReactiveMap(symbol) {
-  if (!window.__PHECDA_VUE__?.[symbol])
-    return null;
-  const ret = /* @__PURE__ */ new Map();
-  window.__PHECDA_VUE__[symbol].snapshot.forEach(({ key, value }) => {
-    ret.set(key, value);
+__name(PV, "PV");
+
+// src/phecda.ts
+var import_vue2 = require("vue");
+var import_phecda_web2 = require("phecda-web");
+var phecdaSymbol = Symbol("phecda");
+function createPhecda() {
+  (0, import_phecda_web2.resetActiveInstance)();
+  const phecda = (0, import_vue2.markRaw)({
+    install(app) {
+      const instance = (0, import_phecda_web2.getActiveInstance)();
+      instance.app = app;
+      app.provide(phecdaSymbol, instance);
+      app.config.globalProperties.$phecda = instance;
+    },
+    load(state) {
+      const instance = (0, import_phecda_web2.getActiveInstance)();
+      instance.state = state;
+      return this;
+    },
+    async unmount() {
+      const { state } = (0, import_phecda_web2.getActiveInstance)();
+      await Object.values(state).map((ins) => (0, import_phecda_web2.unmountParallel)(ins));
+      (0, import_phecda_web2.resetActiveInstance)();
+    }
   });
-  return ret;
+  return phecda;
 }
-__name(getReactiveMap, "getReactiveMap");
+__name(createPhecda, "createPhecda");
 
-// src/vue/composable.ts
-var import_vue3 = require("vue");
-var import_phecda_core2 = require("phecda-core");
+// src/composable.ts
+var import_vue4 = require("vue");
+var import_phecda_web3 = require("phecda-web");
 
-// src/vue/utils.ts
-var import_vue2 = require("vue");
+// src/utils.ts
+var import_vue3 = require("vue");
 function isObject(o) {
   return Object.prototype.toString.call(o) === "[object Object]";
 }
@@ -181,7 +199,7 @@ function mergeReactiveObjects(target, patchToApply) {
       continue;
     const subPatch = patchToApply[key];
     const targetValue = target[key];
-    if (isObject(targetValue) && isObject(subPatch) && target.hasOwnProperty(key) && !(0, import_vue2.isRef)(subPatch) && !(0, import_vue2.isReactive)(subPatch)) {
+    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;
@@ -190,26 +208,6 @@ function mergeReactiveObjects(target, patchToApply) {
   return target;
 }
 __name(mergeReactiveObjects, "mergeReactiveObjects");
-function wrapError(target, key, errorHandler) {
-  if (isAsyncFunc(target[key])) {
-    return (...args) => {
-      return target[key].apply(target, args).catch(errorHandler);
-    };
-  } else {
-    return (...args) => {
-      try {
-        return target[key].apply(target, args);
-      } catch (e) {
-        return errorHandler(e);
-      }
-    };
-  }
-}
-__name(wrapError, "wrapError");
-function isAsyncFunc(fn) {
-  return fn[Symbol.toStringTag] === "AsyncFunction";
-}
-__name(isAsyncFunc, "isAsyncFunc");
 function createSharedReactive(composable) {
   let subscribers = 0;
   let state;
@@ -223,34 +221,38 @@ function createSharedReactive(composable) {
   return () => {
     subscribers++;
     if (!state) {
-      scope = (0, import_vue2.effectScope)(true);
+      scope = (0, import_vue3.effectScope)(true);
       state = scope.run(() => composable());
     }
-    (0, import_vue2.onScopeDispose)(dispose);
+    (0, import_vue3.onScopeDispose)(dispose);
     return state;
   };
 }
 __name(createSharedReactive, "createSharedReactive");
 
-// src/vue/composable.ts
+// src/composable.ts
 function useO(module2) {
-  const { useOMap } = getActivePhecda();
+  const { state, _o: oMap } = (0, import_phecda_web3.getActiveInstance)();
   if (module2.prototype.__ISOLATE__) {
-    const instance = (0, import_vue3.reactive)(new module2());
-    instance._promise = (0, import_phecda_core2.registerAsync)(instance);
+    const instance = (0, import_vue4.reactive)(new module2());
+    instance._promise = (0, import_phecda_web3.registerSerial)(instance);
     return instance;
   }
-  const tag = (0, import_phecda_core2.getTag)(module2) || module2.name;
-  if (!useOMap.has(tag)) {
-    const instance = (0, import_vue3.reactive)(new module2());
-    instance._promise = (0, import_phecda_core2.registerAsync)(instance);
-    useOMap.set(tag, instance);
+  const tag = (0, import_phecda_web3.getTag)(module2);
+  if (!(tag in state)) {
+    const instance = (0, import_vue4.reactive)(new module2());
+    instance._promise = (0, import_phecda_web3.registerSerial)(instance);
+    state[tag] = instance;
+    oMap.set(instance, module2);
+  } else {
+    if (oMap.get(state[tag]) !== module2)
+      console.warn(`Synonym module: Module taged "${String(tag)}" has been loaded before, so won't load Module "${module2.name}"`);
   }
-  return useOMap.get(tag);
+  return state[tag];
 }
 __name(useO, "useO");
 function useRaw(module2) {
-  return (0, import_vue3.toRaw)(useO(module2));
+  return (0, import_vue4.toRaw)(useO(module2));
 }
 __name(useRaw, "useRaw");
 function usePatch(module2, Data) {
@@ -259,20 +261,20 @@ function usePatch(module2, Data) {
 }
 __name(usePatch, "usePatch");
 function useR(module2) {
-  const { useRMap, fnMap } = getActivePhecda();
+  const { _r: rmap, _f: fmap } = (0, import_phecda_web3.getActiveInstance)();
   const instance = useO(module2);
-  if (useRMap.has(instance))
-    return useRMap.get(instance);
+  if (rmap.has(instance))
+    return rmap.get(instance);
   const proxy = new Proxy(instance, {
     get(target, key) {
       if (typeof target[key] === "function") {
-        if (fnMap.has(target[key]))
-          return fnMap.get(target[key]);
-        const errorHandler = (0, import_phecda_core2.getHandler)(target, key).find((item) => item.error)?.error;
+        if (fmap.has(target[key]))
+          return fmap.get(target[key]);
+        const errorHandler = (0, import_phecda_web3.getHandler)(target, key).find((item) => item.error)?.error;
         if (!errorHandler)
           return target[key].bind(target);
-        const wrapper = wrapError(target, key, errorHandler);
-        fnMap.set(target[key], wrapper);
+        const wrapper = (0, import_phecda_web3.wrapError)(target, key, errorHandler);
+        fmap.set(target[key], wrapper);
         return wrapper;
       }
       return target[key];
@@ -282,33 +284,33 @@ function useR(module2) {
       return true;
     }
   });
-  useRMap.set(instance, proxy);
+  rmap.set(instance, proxy);
   return proxy;
 }
 __name(useR, "useR");
 function useV(module2) {
-  const { useVMap, fnMap, computedMap } = getActivePhecda();
+  const { _v: vmap, _f: fmap, _c: cmap } = (0, import_phecda_web3.getActiveInstance)();
   const instance = useO(module2);
-  if (useVMap.has(instance))
-    return useVMap.get(instance);
-  computedMap.set(instance, {});
+  if (vmap.has(instance))
+    return vmap.get(instance);
+  cmap.set(instance, {});
   const proxy = new Proxy(instance, {
     get(target, key) {
       if (typeof target[key] === "function") {
-        if (fnMap.has(target[key]))
-          return fnMap.get(target[key]);
-        const errorHandler = (0, import_phecda_core2.getHandler)(target, key).find((item) => item.error)?.error;
+        if (fmap.has(target[key]))
+          return fmap.get(target[key]);
+        const errorHandler = (0, import_phecda_web3.getHandler)(target, key).find((item) => item.error)?.error;
         if (!errorHandler)
           return target[key].bind(target);
-        const wrapper = wrapError(target, key, errorHandler);
-        fnMap.set(target[key], wrapper);
+        const wrapper = (0, import_phecda_web3.wrapError)(target, key, errorHandler);
+        fmap.set(target[key], wrapper);
         return wrapper;
       }
-      const cache = computedMap.get(instance);
+      const cache = cmap.get(instance);
       if (key in cache)
         return cache[key]();
       cache[key] = createSharedReactive(() => {
-        return (0, import_vue3.toRef)(target, key);
+        return (0, import_vue4.toRef)(target, key);
       });
       return cache[key]();
     },
@@ -316,16 +318,19 @@ function useV(module2) {
       return false;
     }
   });
-  useVMap.set(instance, proxy);
+  vmap.set(instance, proxy);
   return proxy;
 }
 __name(useV, "useV");
 function useEvent(eventName, cb) {
-  (0, import_vue3.onBeforeUnmount)(() => {
-    emitter.off(eventName, cb);
+  (0, import_vue4.onBeforeUnmount)(() => {
+    import_phecda_web3.emitter.off(eventName, cb);
   });
-  emitter.on(eventName, cb);
-  return () => emitter.off(eventName, cb);
+  import_phecda_web3.emitter.on(eventName, cb);
+  return {
+    emit: (arg) => import_phecda_web3.emitter.emit(eventName, arg),
+    cancel: () => import_phecda_web3.emitter.off(eventName, cb)
+  };
 }
 __name(useEvent, "useEvent");
 function initialize(module2, deleteOtherProperty = true) {
@@ -340,154 +345,18 @@ function initialize(module2, deleteOtherProperty = true) {
   }
 }
 __name(initialize, "initialize");
-async function waitUntilInit(...modules) {
-  await Promise.all(modules.map((m) => useO(m)._promise));
-}
-__name(waitUntilInit, "waitUntilInit");
-
-// src/vue/decorator.ts
-function Isolate() {
-  return (target) => {
-    target.prototype.__ISOLATE__ = true;
-  };
-}
-__name(Isolate, "Isolate");
-
-// src/filter.ts
-var import_vue4 = require("vue");
-var RE = /{{(.*)}}/;
-function createFilter(initState = {}, option = {}) {
-  const resolveOption = Object.assign({
-    RE,
-    exclude: []
-  }, option);
-  const scope = (0, import_vue4.effectScope)(true);
-  let data = scope.run(() => (0, import_vue4.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-core"), module.exports);
-
-// src/wrapper.ts
-var PV = class {
-  constructor() {
-  }
-  get tag() {
-    return this.__TAG__;
-  }
-  on(type, handler) {
-    emitter.on(type, handler);
-  }
-  emit(type, param) {
-    emitter.emit(type, param);
-  }
-  off(type, handler) {
-    emitter.off(type, handler);
-  }
-};
-__name(PV, "PV");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Isolate,
   PV,
   RE,
   createFilter,
   createPhecda,
-  emitter,
-  getActivePhecda,
-  getReactiveMap,
   initialize,
-  interval,
   phecdaSymbol,
-  setActivePhecda,
   useEvent,
   useO,
   usePatch,
   useR,
   useRaw,
-  useV,
-  waitUntilInit
+  useV
 });

package/dist/index.mjs

@@ -1,127 +1,158 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
-// src/emitter.ts
-import mitt from "mitt";
-var emitter = mitt();
+// 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/vue/phecda.ts
+// src/wrapper.ts
+import { emitter } from "phecda-web";
+var PV = class {
+  constructor() {
+  }
+  get tag() {
+    return this.__TAG__;
+  }
+  on(type, handler) {
+    emitter.on(type, handler);
+  }
+  emit(type, param) {
+    emitter.emit(type, param);
+  }
+  off(type, handler) {
+    emitter.off(type, handler);
+  }
+};
+__name(PV, "PV");
+
+// src/phecda.ts
 import { markRaw } from "vue";
-import { getProperty, getTag, injectProperty } from "phecda-core";
+import { getActiveInstance, resetActiveInstance, unmountParallel } from "phecda-web";
 var phecdaSymbol = Symbol("phecda");
-var interval = {};
-function createPhecda(symbol) {
+function createPhecda() {
+  resetActiveInstance();
   const phecda = markRaw({
     install(app) {
-      interval.app = app;
-      app.provide(phecdaSymbol, phecda);
-      app.config.globalProperties.$phecda = phecda;
-      if (!window.__PHECDA_VUE__)
-        window.__PHECDA_VUE__ = {};
-      if (symbol) {
-        window.__PHECDA_VUE__[symbol] = {
-          instance: phecda,
-          snapshot: () => {
-            const ret = [];
-            const { useOMap } = getActivePhecda();
-            for (const [key, value] of useOMap)
-              ret.push({
-                key: getTag(key) || key.name,
-                value
-              });
-            return ret;
-          }
-        };
-      }
-      let eventRecord = [];
-      if (!getProperty("watcher")) {
-        injectProperty("watcher", ({ eventName, instance, key, options }) => {
-          const fn = typeof instance[key] === "function" ? instance[key].bind(instance) : (v) => instance[key] = v;
-          if (options?.once) {
-            const handler = /* @__PURE__ */ __name((...args) => {
-              fn(...args);
-              emitter.off(eventName, handler);
-            }, "handler");
-            emitter.on(eventName, handler);
-            eventRecord.push([
-              eventName,
-              handler
-            ]);
-          } else {
-            eventRecord.push([
-              eventName,
-              fn
-            ]);
-            emitter.on(eventName, fn);
-          }
-        });
-      }
-      if (!getProperty("storage")) {
-        injectProperty("storage", ({ tag, key, instance }) => {
-          if (!tag)
-            return;
-          const initstr = localStorage.getItem(tag);
-          if (initstr) {
-            const data = JSON.parse(initstr);
-            if (key) {
-              instance[key] = data;
-            } else {
-              for (const i in data) {
-                if (i)
-                  instance[i] = data[i];
-              }
-            }
-          }
-          globalThis.addEventListener("beforeunload", () => {
-            localStorage.setItem(tag, JSON.stringify(key ? instance[key] : instance));
-          });
-        });
-      }
-      const originUnmount = app.unmount.bind(app);
-      app.unmount = () => {
-        eventRecord.forEach(([eventName, handler]) => emitter.off(eventName, handler));
-        eventRecord = [];
-        if (symbol)
-          delete window.__PHECDA_VUE__[symbol];
-        originUnmount();
-      };
+      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) => unmountParallel(ins));
+      resetActiveInstance();
     }
   });
   return phecda;
 }
 __name(createPhecda, "createPhecda");
-var activePhecda = {
-  useVMap: /* @__PURE__ */ new WeakMap(),
-  useOMap: /* @__PURE__ */ new Map(),
-  useRMap: /* @__PURE__ */ new WeakMap(),
-  fnMap: /* @__PURE__ */ new WeakMap(),
-  computedMap: /* @__PURE__ */ new WeakMap()
-};
-function setActivePhecda(phecda) {
-  activePhecda = phecda;
-}
-__name(setActivePhecda, "setActivePhecda");
-function getActivePhecda() {
-  return activePhecda;
-}
-__name(getActivePhecda, "getActivePhecda");
-function getReactiveMap(symbol) {
-  if (!window.__PHECDA_VUE__?.[symbol])
-    return null;
-  const ret = /* @__PURE__ */ new Map();
-  window.__PHECDA_VUE__[symbol].snapshot.forEach(({ key, value }) => {
-    ret.set(key, value);
-  });
-  return ret;
-}
-__name(getReactiveMap, "getReactiveMap");
 
-// src/vue/composable.ts
+// src/composable.ts
 import { onBeforeUnmount, reactive, toRaw, toRef } from "vue";
-import { getHandler, getTag as getTag2, registerAsync } from "phecda-core";
+import { emitter as emitter2, getActiveInstance as getActiveInstance2, getHandler, getTag, registerSerial, wrapError } from "phecda-web";
 
-// src/vue/utils.ts
-import { effectScope, isReactive, isRef, onScopeDispose } from "vue";
+// src/utils.ts
+import { effectScope as effectScope2, isReactive, isRef, onScopeDispose } from "vue";
 function isObject(o) {
   return Object.prototype.toString.call(o) === "[object Object]";
 }
@@ -141,26 +172,6 @@ function mergeReactiveObjects(target, patchToApply) {
   return target;
 }
 __name(mergeReactiveObjects, "mergeReactiveObjects");
-function wrapError(target, key, errorHandler) {
-  if (isAsyncFunc(target[key])) {
-    return (...args) => {
-      return target[key].apply(target, args).catch(errorHandler);
-    };
-  } else {
-    return (...args) => {
-      try {
-        return target[key].apply(target, args);
-      } catch (e) {
-        return errorHandler(e);
-      }
-    };
-  }
-}
-__name(wrapError, "wrapError");
-function isAsyncFunc(fn) {
-  return fn[Symbol.toStringTag] === "AsyncFunction";
-}
-__name(isAsyncFunc, "isAsyncFunc");
 function createSharedReactive(composable) {
   let subscribers = 0;
   let state;
@@ -174,7 +185,7 @@ function createSharedReactive(composable) {
   return () => {
     subscribers++;
     if (!state) {
-      scope = effectScope(true);
+      scope = effectScope2(true);
       state = scope.run(() => composable());
     }
     onScopeDispose(dispose);
@@ -183,21 +194,25 @@ function createSharedReactive(composable) {
 }
 __name(createSharedReactive, "createSharedReactive");
 
-// src/vue/composable.ts
+// src/composable.ts
 function useO(module) {
-  const { useOMap } = getActivePhecda();
+  const { state, _o: oMap } = getActiveInstance2();
   if (module.prototype.__ISOLATE__) {
     const instance = reactive(new module());
-    instance._promise = registerAsync(instance);
+    instance._promise = registerSerial(instance);
     return instance;
   }
-  const tag = getTag2(module) || module.name;
-  if (!useOMap.has(tag)) {
+  const tag = getTag(module);
+  if (!(tag in state)) {
     const instance = reactive(new module());
-    instance._promise = registerAsync(instance);
-    useOMap.set(tag, instance);
+    instance._promise = registerSerial(instance);
+    state[tag] = instance;
+    oMap.set(instance, module);
+  } else {
+    if (oMap.get(state[tag]) !== module)
+      console.warn(`Synonym module: Module taged "${String(tag)}" has been loaded before, so won't load Module "${module.name}"`);
   }
-  return useOMap.get(tag);
+  return state[tag];
 }
 __name(useO, "useO");
 function useRaw(module) {
@@ -210,20 +225,20 @@ function usePatch(module, Data) {
 }
 __name(usePatch, "usePatch");
 function useR(module) {
-  const { useRMap, fnMap } = getActivePhecda();
+  const { _r: rmap, _f: fmap } = getActiveInstance2();
   const instance = useO(module);
-  if (useRMap.has(instance))
-    return useRMap.get(instance);
+  if (rmap.has(instance))
+    return rmap.get(instance);
   const proxy = new Proxy(instance, {
     get(target, key) {
       if (typeof target[key] === "function") {
-        if (fnMap.has(target[key]))
-          return fnMap.get(target[key]);
+        if (fmap.has(target[key]))
+          return fmap.get(target[key]);
         const errorHandler = getHandler(target, key).find((item) => item.error)?.error;
         if (!errorHandler)
           return target[key].bind(target);
         const wrapper = wrapError(target, key, errorHandler);
-        fnMap.set(target[key], wrapper);
+        fmap.set(target[key], wrapper);
         return wrapper;
       }
       return target[key];
@@ -233,29 +248,29 @@ function useR(module) {
       return true;
     }
   });
-  useRMap.set(instance, proxy);
+  rmap.set(instance, proxy);
   return proxy;
 }
 __name(useR, "useR");
 function useV(module) {
-  const { useVMap, fnMap, computedMap } = getActivePhecda();
+  const { _v: vmap, _f: fmap, _c: cmap } = getActiveInstance2();
   const instance = useO(module);
-  if (useVMap.has(instance))
-    return useVMap.get(instance);
-  computedMap.set(instance, {});
+  if (vmap.has(instance))
+    return vmap.get(instance);
+  cmap.set(instance, {});
   const proxy = new Proxy(instance, {
     get(target, key) {
       if (typeof target[key] === "function") {
-        if (fnMap.has(target[key]))
-          return fnMap.get(target[key]);
+        if (fmap.has(target[key]))
+          return fmap.get(target[key]);
         const errorHandler = getHandler(target, key).find((item) => item.error)?.error;
         if (!errorHandler)
           return target[key].bind(target);
         const wrapper = wrapError(target, key, errorHandler);
-        fnMap.set(target[key], wrapper);
+        fmap.set(target[key], wrapper);
         return wrapper;
       }
-      const cache = computedMap.get(instance);
+      const cache = cmap.get(instance);
       if (key in cache)
         return cache[key]();
       cache[key] = createSharedReactive(() => {
@@ -267,16 +282,19 @@ function useV(module) {
       return false;
     }
   });
-  useVMap.set(instance, proxy);
+  vmap.set(instance, proxy);
   return proxy;
 }
 __name(useV, "useV");
 function useEvent(eventName, cb) {
   onBeforeUnmount(() => {
-    emitter.off(eventName, cb);
+    emitter2.off(eventName, cb);
   });
-  emitter.on(eventName, cb);
-  return () => emitter.off(eventName, cb);
+  emitter2.on(eventName, cb);
+  return {
+    emit: (arg) => emitter2.emit(eventName, arg),
+    cancel: () => emitter2.off(eventName, cb)
+  };
 }
 __name(useEvent, "useEvent");
 function initialize(module, deleteOtherProperty = true) {
@@ -291,153 +309,17 @@ function initialize(module, deleteOtherProperty = true) {
   }
 }
 __name(initialize, "initialize");
-async function waitUntilInit(...modules) {
-  await Promise.all(modules.map((m) => useO(m)._promise));
-}
-__name(waitUntilInit, "waitUntilInit");
-
-// src/vue/decorator.ts
-function Isolate() {
-  return (target) => {
-    target.prototype.__ISOLATE__ = true;
-  };
-}
-__name(Isolate, "Isolate");
-
-// src/filter.ts
-import { effectScope as effectScope2, ref } from "vue";
-var RE = /{{(.*)}}/;
-function createFilter(initState = {}, option = {}) {
-  const resolveOption = Object.assign({
-    RE,
-    exclude: []
-  }, option);
-  const scope = effectScope2(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-core";
-
-// src/wrapper.ts
-var PV = class {
-  constructor() {
-  }
-  get tag() {
-    return this.__TAG__;
-  }
-  on(type, handler) {
-    emitter.on(type, handler);
-  }
-  emit(type, param) {
-    emitter.emit(type, param);
-  }
-  off(type, handler) {
-    emitter.off(type, handler);
-  }
-};
-__name(PV, "PV");
 export {
-  Isolate,
   PV,
   RE,
   createFilter,
   createPhecda,
-  emitter,
-  getActivePhecda,
-  getReactiveMap,
   initialize,
-  interval,
   phecdaSymbol,
-  setActivePhecda,
   useEvent,
   useO,
   usePatch,
   useR,
   useRaw,
-  useV,
-  waitUntilInit
+  useV
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "phecda-vue",
-  "version": "2.1.3-alpha.5",
-  "description": "provide store/form/table with phecda function to vue",
+  "version": "3.0.0-alpha.11",
+  "description": "provide phecda function to vue",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -12,9 +12,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "mitt": "^3.0.0",
     "vue": "^3.2.45",
-    "phecda-core": "3.0.0-alpha.2"
+    "phecda-web": "1.0.1-alpha.5"
   },
   "devDependencies": {
     "tsup": "^6.5.0"