@razaman2/reactive-view 0.1.0-beta.5 → 0.1.0-beta.7

package/dist/index.js

@@ -35,8 +35,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var __export = (target, all) => {
-  for (var name2 in all)
-    __defProp(target, name2, { get: all[name2], enumerable: true });
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -89,34 +89,34 @@ var Subscription = class _Subscription {
   static create() {
     return new _Subscription();
   }
-  subscribe(name2, handler, data) {
-    if (this.isNameAvailable(name2)) {
+  subscribe(name, handler, data) {
+    if (this.isNameAvailable(name)) {
       this.subscriptions.push({
-        name: name2,
+        name,
         handler
       });
-      this.data[name2] = data;
+      this.data[name] = data;
     }
     return this;
   }
-  replace(name2, handler, data) {
-    this.unsubscribe(name2);
-    return this.subscribe(name2, handler, data);
+  replace(name, handler, data) {
+    this.unsubscribe(name);
+    return this.subscribe(name, handler, data);
   }
   unsubscribe(param1) {
     if (!Array.isArray(param1)) {
       param1 = param1 ? [param1] : [];
     }
-    const log = (name2) => {
-      return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+    const log = (name) => {
+      return console.log(`%cUnsubscribed From Subscription (${name})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
     };
     if (param1.length) {
-      param1.forEach((name2) => {
-        const subscription = this.find(name2);
+      param1.forEach((name) => {
+        const subscription = this.find(name);
         if (subscription) {
           subscription.handler();
           this.remove(subscription);
-          log(name2);
+          log(name);
         }
       });
     } else {
@@ -131,20 +131,20 @@ var Subscription = class _Subscription {
   size() {
     return this.subscriptions.length;
   }
-  hasSubscription(name2) {
-    return Boolean(this.find(name2));
+  hasSubscription(name) {
+    return Boolean(this.find(name));
   }
   remove(subscription) {
     this.subscriptions.splice(this.subscriptions.indexOf(subscription), 1);
   }
-  find(name2) {
+  find(name) {
     return this.subscriptions.find((subscription) => {
-      return subscription.name === name2;
+      return subscription.name === name;
     });
   }
-  isNameAvailable(name2) {
-    if (this.hasSubscription(name2)) {
-      throw new Error(`There is already a subscription called "${name2}".`);
+  isNameAvailable(name) {
+    if (this.hasSubscription(name)) {
+      throw new Error(`There is already a subscription called "${name}".`);
     } else {
       return true;
     }
@@ -152,12 +152,12 @@ var Subscription = class _Subscription {
   registrations() {
     return this.subscriptions;
   }
-  get(name2) {
-    const subscription = this.find(name2);
+  get(name) {
+    const subscription = this.find(name);
     if (subscription) {
       return subscription;
     } else {
-      throw new Error(`Subscription "${name2}" doesn't exist!`);
+      throw new Error(`Subscription "${name}" doesn't exist!`);
     }
   }
 };
@@ -177,8 +177,55 @@ var import_data_manager = __toESM(require("@razaman2/data-manager"));
 var import_vue = require("vue");
 
 // package.json
-var name = "@razaman2/reactive-view";
-var version = "0.1.0-beta.5";
+var version = "0.1.0-beta.7";
+var package_default = {
+  name: "@razaman2/reactive-view",
+  version,
+  description: "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
+  main: "dist/index.js",
+  module: "dist/index.mjs",
+  types: "dist/index.d.ts",
+  scripts: {
+    prepublishOnly: "npm run build",
+    build: "tsup src/index.ts --format cjs,esm --dts",
+    lint: "tsc",
+    test: "cd tests/vue-ts && npm run dev",
+    pr: "sh pr.sh"
+  },
+  keywords: [
+    "vue",
+    "vue-helper",
+    "reactive-view",
+    "vue-class-component",
+    "reactive-ui"
+  ],
+  author: "razaman2",
+  license: "MIT",
+  dependencies: {
+    "@razaman2/data-manager": "^3.3.8",
+    "@razaman2/event-emitter": "^2.1.1",
+    "@razaman2/object-manager": "^3.4.7",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "tailwind-merge": "^3.5.0",
+    uuid: "^13.0.0"
+  },
+  peerDependencies: {
+    vue: ">=3.0.0"
+  },
+  devDependencies: {
+    "@types/uuid": "^11.0.0",
+    tsup: "^8.5.1",
+    typescript: "^5.9.3",
+    vitest: "^4.1.2"
+  },
+  publishConfig: {
+    access: "public"
+  },
+  files: [
+    "dist"
+  ]
+};
 
 // src/ReactiveView.ts
 var setup = {
@@ -223,6 +270,8 @@ var ReactiveView_default = {
   },
   setup(props, context) {
     var _a, _b, _c;
+    const subscriptions = [];
+    (0, import_vue.onBeforeUnmount)(() => subscriptions.forEach((subscription) => subscription()));
     const diff = (before, after) => {
       const changed = (0, import_vue.ref)(false);
       const paths = Array.from(new Set(before.paths().concat(after.paths())));
@@ -245,14 +294,14 @@ var ReactiveView_default = {
     const template = (component, vue2) => {
       return (0, import_vue.createVNode)("div", context.slots.default ? context.attrs : __spreadValues({
         style: { color: "red", textAlign: "center" }
-      }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`);
+      }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${package_default.name}@${package_default.version}`);
     };
     const isValid = (0, import_vue.ref)(false);
     const isReady = (0, import_vue.ref)(false);
     const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
     const isFunctionData = ["Function"].includes((_a = props.data) == null ? void 0 : _a.constructor.name);
     const isAsyncFunctionData = ["AsyncFunction"].includes((_b = props.data) == null ? void 0 : _b.constructor.name);
-    const isPromiseData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
+    const isAsyncData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
     const vue = (0, import_vue.getCurrentInstance)();
     const defaultData = props.getDefaultData(
       "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray((0, import_vue.unref)(vue.vnode.props.data)) ? [] : {} : {}
@@ -300,19 +349,20 @@ var ReactiveView_default = {
         });
       };
       const normalize = (data) => {
-        const datatype2 = Array.isArray(defaultData) ? [] : {};
-        if ((0, import_vue.isRef)(data) || (0, import_vue.isReactive)(data) || isFunctionData || isPromiseData) {
-          return (0, import_vue.reactive)(datatype2);
+        if ((0, import_vue.isRef)(data) || (0, import_vue.isReactive)(data)) {
+          return data;
+        } else if (isFunctionData || isAsyncData) {
+          return (0, import_vue.ref)(datatype);
         } else {
           const props2 = "data" in vue.vnode.props;
           try {
             if (["Array", "Object"].includes(data.constructor.name)) {
-              return (0, import_vue.reactive)(datatype2);
+              return (0, import_vue.ref)(data);
             } else {
-              return (0, import_vue.reactive)(props2 ? { "": datatype2 } : datatype2);
+              return (0, import_vue.ref)(props2 ? { "": data } : datatype);
             }
           } catch (e) {
-            return (0, import_vue.reactive)(props2 ? { "": datatype2 } : datatype2);
+            return (0, import_vue.ref)(props2 ? { "": data } : datatype);
           }
         }
       };
@@ -324,7 +374,7 @@ var ReactiveView_default = {
         name: props.modelName,
         logging: props.logging
       };
-      const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config);
+      const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : import_data_manager.default.setConfig({ beforeGetData: (data) => (0, import_vue.isRef)(data) ? (0, import_vue.unref)(data) : data }, config);
       const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, diff, emit, dataPath: dataPath2, model: proxy(model), isValid } });
       if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
         const config2 = {
@@ -336,7 +386,7 @@ var ReactiveView_default = {
           }
         };
         const source = () => import_object_manager.default.on(model.getData()).clone();
-        (0, import_vue.watch)(source, (after, before) => {
+        subscriptions.push((0, import_vue.watch)(source, (after, before) => {
           const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
           if (props.debug) {
             console.warn(`[${props.modelName}]:model`, { diff: diff2, before, after });
@@ -344,30 +394,27 @@ var ReactiveView_default = {
           if (diff2.changed) {
             config2.callback(diff2, { component });
           }
-        }, config2.options);
+        }, config2.options));
       }
       setTimeout(async () => {
         var _a3, _b2, _c2;
-        if (props.model !== false) {
-          if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
-            console.warn(`${props.modelName}: defaultData is required for promise or async function data.`, props.data);
+        if (props.model !== false && (isFunctionData || isAsyncData)) {
+          if (!("defaultData" in vue.vnode.props)) {
+            console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
           }
-          const [data] = isPromiseData ? await Promise.all([
+          const [data] = isAsyncData ? await Promise.all([
             isAsyncFunctionData ? props.data() : props.data,
             (_a3 = defer.value) != null ? _a3 : true
           ]) : [props.data];
-          const isRefData = (0, import_vue.isRef)(data);
-          const isReactiveData = (0, import_vue.isReactive)(data);
-          const source = isRefData || isReactiveData || isFunctionData ? data : typeof data === "function" ? data : (() => data);
-          (0, import_vue.watch)(source, async (after, before) => {
-            var _a4;
+          const source = typeof data === "function" ? data : (() => data);
+          subscriptions.push((0, import_vue.watch)(source, async (after, before) => {
             const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
             const callback = context.attrs["data:callback"];
             if (props.debug) {
-              console.warn(`[${props.modelName}]:data`, { diff: diff2, data, callback, before, after, props, context, component, isRefData, isReactiveData });
+              console.warn(`[${props.modelName}]:data`, { diff: diff2, data, callback, before, after, props, context, component });
             }
             if (typeof callback === "function") {
-              model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
+              callback(diff2, { component });
             } else {
               model.replaceData(after);
             }
@@ -375,7 +422,7 @@ var ReactiveView_default = {
             immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
             deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
             once: context.attrs["data:once"]
-          });
+          }));
         }
       });
       setTimeout(async () => {
@@ -430,7 +477,7 @@ var ReactiveView_default = {
         if ((0, import_vue.isReactive)(data)) {
           return data;
         } else {
-          if ((0, import_vue.isRef)(data) || isFunctionData || isPromiseData) {
+          if ((0, import_vue.isRef)(data) || isFunctionData || isAsyncData) {
             return (0, import_vue.reactive)(datatype);
           } else {
             const props2 = "data" in vue.vnode.props;
@@ -448,7 +495,7 @@ var ReactiveView_default = {
       };
       const config = {
         data: props.beta ? normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data) : (0, import_vue.reactive)(import_object_manager.default.on(
-          isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
+          isAsyncData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
         ).clone()),
         defaultData: import_object_manager.default.on(defaultData).clone(),
         notifications: props.notifications,
@@ -480,7 +527,7 @@ var ReactiveView_default = {
       });
       const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
       if (props.debug) {
-        console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
+        console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isAsyncData });
       }
       const watchDataProp = (dataProp) => {
         var _a3, _b3, _c3, _d2;
@@ -493,14 +540,14 @@ var ReactiveView_default = {
         if (context.attrs["data:log"]) {
           console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
         }
-        (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
+        subscriptions.push((0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
           var _a4;
           if (typeof config2.callback === "function") {
             model.replaceData((_a4 = config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a4 : after);
           } else {
             model.replaceData(after);
           }
-        }, config2.options);
+        }, config2.options));
       };
       if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
         const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
@@ -512,20 +559,20 @@ var ReactiveView_default = {
         if (context.attrs["model:log"]) {
           console.warn(`[ReactiveView]:model`, { config: config2 });
         }
-        (0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
+        subscriptions.push((0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
           config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
-        }, config2.options);
+        }, config2.options));
       }
       if (props.beta) {
         const isRefData = (0, import_vue.isRef)(props.data);
-        if (isRefData || isFunctionData || isPromiseData) {
+        if (isRefData || isFunctionData || isAsyncData) {
           setTimeout(async () => {
             var _a3, _b3, _c3;
-            const [data] = isPromiseData ? await Promise.all([
+            const [data] = isAsyncData ? await Promise.all([
               isAsyncFunctionData ? props.data() : props.data,
               (_a3 = defer.value) != null ? _a3 : true
             ]) : [props.data];
-            (0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
+            subscriptions.push((0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
               var _a4;
               if (before !== void 0 || after !== void 0) {
                 const callback = context.attrs["data:callback"];
@@ -540,7 +587,7 @@ var ReactiveView_default = {
               immediate: (_b3 = context.attrs["data:immediate"]) != null ? _b3 : true,
               deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true,
               once: context.attrs["data:once"]
-            });
+            }));
           });
         }
       } else {
@@ -698,24 +745,24 @@ function useSubscription() {
   const subscriptions = [];
   const subscription = Subscriptions.get();
   return {
-    addSubscription(name2, handler = () => false, data) {
-      subscription.subscribe(name2, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name2));
+    addSubscription(name, handler = () => false, data) {
+      subscription.subscribe(name, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name));
     },
-    replaceSubscription(name2, handler = () => false, data) {
-      subscription.replace(name2, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name2));
+    replaceSubscription(name, handler = () => false, data) {
+      subscription.replace(name, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name));
     },
     removeSubscriptions() {
       subscriptions.forEach((subscription2) => safeRequest({
         try: () => subscription2()
       }));
     },
-    removeSubscription(name2) {
-      subscription.unsubscribe(name2);
+    removeSubscription(name) {
+      subscription.unsubscribe(name);
     },
-    hasSubscription(name2) {
-      return subscription.hasSubscription(name2);
+    hasSubscription(name) {
+      return subscription.hasSubscription(name);
     },
     subscriptions,
     subscription

package/dist/index.mjs

@@ -42,34 +42,34 @@ var Subscription = class _Subscription {
   static create() {
     return new _Subscription();
   }
-  subscribe(name2, handler, data) {
-    if (this.isNameAvailable(name2)) {
+  subscribe(name, handler, data) {
+    if (this.isNameAvailable(name)) {
       this.subscriptions.push({
-        name: name2,
+        name,
         handler
       });
-      this.data[name2] = data;
+      this.data[name] = data;
     }
     return this;
   }
-  replace(name2, handler, data) {
-    this.unsubscribe(name2);
-    return this.subscribe(name2, handler, data);
+  replace(name, handler, data) {
+    this.unsubscribe(name);
+    return this.subscribe(name, handler, data);
   }
   unsubscribe(param1) {
     if (!Array.isArray(param1)) {
       param1 = param1 ? [param1] : [];
     }
-    const log = (name2) => {
-      return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+    const log = (name) => {
+      return console.log(`%cUnsubscribed From Subscription (${name})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
     };
     if (param1.length) {
-      param1.forEach((name2) => {
-        const subscription = this.find(name2);
+      param1.forEach((name) => {
+        const subscription = this.find(name);
         if (subscription) {
           subscription.handler();
           this.remove(subscription);
-          log(name2);
+          log(name);
         }
       });
     } else {
@@ -84,20 +84,20 @@ var Subscription = class _Subscription {
   size() {
     return this.subscriptions.length;
   }
-  hasSubscription(name2) {
-    return Boolean(this.find(name2));
+  hasSubscription(name) {
+    return Boolean(this.find(name));
   }
   remove(subscription) {
     this.subscriptions.splice(this.subscriptions.indexOf(subscription), 1);
   }
-  find(name2) {
+  find(name) {
     return this.subscriptions.find((subscription) => {
-      return subscription.name === name2;
+      return subscription.name === name;
     });
   }
-  isNameAvailable(name2) {
-    if (this.hasSubscription(name2)) {
-      throw new Error(`There is already a subscription called "${name2}".`);
+  isNameAvailable(name) {
+    if (this.hasSubscription(name)) {
+      throw new Error(`There is already a subscription called "${name}".`);
     } else {
       return true;
     }
@@ -105,12 +105,12 @@ var Subscription = class _Subscription {
   registrations() {
     return this.subscriptions;
   }
-  get(name2) {
-    const subscription = this.find(name2);
+  get(name) {
+    const subscription = this.find(name);
     if (subscription) {
       return subscription;
     } else {
-      throw new Error(`Subscription "${name2}" doesn't exist!`);
+      throw new Error(`Subscription "${name}" doesn't exist!`);
     }
   }
 };
@@ -127,11 +127,58 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstance, unref } from "vue";
+import { ref, reactive, watch, unref, isRef, isReactive, createVNode, getCurrentInstance, onBeforeUnmount } from "vue";
 
 // package.json
-var name = "@razaman2/reactive-view";
-var version = "0.1.0-beta.5";
+var version = "0.1.0-beta.7";
+var package_default = {
+  name: "@razaman2/reactive-view",
+  version,
+  description: "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
+  main: "dist/index.js",
+  module: "dist/index.mjs",
+  types: "dist/index.d.ts",
+  scripts: {
+    prepublishOnly: "npm run build",
+    build: "tsup src/index.ts --format cjs,esm --dts",
+    lint: "tsc",
+    test: "cd tests/vue-ts && npm run dev",
+    pr: "sh pr.sh"
+  },
+  keywords: [
+    "vue",
+    "vue-helper",
+    "reactive-view",
+    "vue-class-component",
+    "reactive-ui"
+  ],
+  author: "razaman2",
+  license: "MIT",
+  dependencies: {
+    "@razaman2/data-manager": "^3.3.8",
+    "@razaman2/event-emitter": "^2.1.1",
+    "@razaman2/object-manager": "^3.4.7",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "tailwind-merge": "^3.5.0",
+    uuid: "^13.0.0"
+  },
+  peerDependencies: {
+    vue: ">=3.0.0"
+  },
+  devDependencies: {
+    "@types/uuid": "^11.0.0",
+    tsup: "^8.5.1",
+    typescript: "^5.9.3",
+    vitest: "^4.1.2"
+  },
+  publishConfig: {
+    access: "public"
+  },
+  files: [
+    "dist"
+  ]
+};
 
 // src/ReactiveView.ts
 var setup = {
@@ -176,6 +223,8 @@ var ReactiveView_default = {
   },
   setup(props, context) {
     var _a, _b, _c;
+    const subscriptions = [];
+    onBeforeUnmount(() => subscriptions.forEach((subscription) => subscription()));
     const diff = (before, after) => {
       const changed = ref(false);
       const paths = Array.from(new Set(before.paths().concat(after.paths())));
@@ -198,14 +247,14 @@ var ReactiveView_default = {
     const template = (component, vue2) => {
       return createVNode("div", context.slots.default ? context.attrs : __spreadValues({
         style: { color: "red", textAlign: "center" }
-      }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`);
+      }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${package_default.name}@${package_default.version}`);
     };
     const isValid = ref(false);
     const isReady = ref(false);
     const defer = ref(typeof props.defer === "function" ? props.defer() : props.defer);
     const isFunctionData = ["Function"].includes((_a = props.data) == null ? void 0 : _a.constructor.name);
     const isAsyncFunctionData = ["AsyncFunction"].includes((_b = props.data) == null ? void 0 : _b.constructor.name);
-    const isPromiseData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
+    const isAsyncData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
     const vue = getCurrentInstance();
     const defaultData = props.getDefaultData(
       "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray(unref(vue.vnode.props.data)) ? [] : {} : {}
@@ -253,19 +302,20 @@ var ReactiveView_default = {
         });
       };
       const normalize = (data) => {
-        const datatype2 = Array.isArray(defaultData) ? [] : {};
-        if (isRef(data) || isReactive(data) || isFunctionData || isPromiseData) {
-          return reactive(datatype2);
+        if (isRef(data) || isReactive(data)) {
+          return data;
+        } else if (isFunctionData || isAsyncData) {
+          return ref(datatype);
         } else {
           const props2 = "data" in vue.vnode.props;
           try {
             if (["Array", "Object"].includes(data.constructor.name)) {
-              return reactive(datatype2);
+              return ref(data);
             } else {
-              return reactive(props2 ? { "": datatype2 } : datatype2);
+              return ref(props2 ? { "": data } : datatype);
             }
           } catch (e) {
-            return reactive(props2 ? { "": datatype2 } : datatype2);
+            return ref(props2 ? { "": data } : datatype);
           }
         }
       };
@@ -277,7 +327,7 @@ var ReactiveView_default = {
         name: props.modelName,
         logging: props.logging
       };
-      const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config);
+      const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : DataManager.setConfig({ beforeGetData: (data) => isRef(data) ? unref(data) : data }, config);
       const component = ref({ parent: { self: vue.proxy }, self: { template, diff, emit, dataPath: dataPath2, model: proxy(model), isValid } });
       if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
         const config2 = {
@@ -289,7 +339,7 @@ var ReactiveView_default = {
           }
         };
         const source = () => ObjectManager.on(model.getData()).clone();
-        watch(source, (after, before) => {
+        subscriptions.push(watch(source, (after, before) => {
           const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
           if (props.debug) {
             console.warn(`[${props.modelName}]:model`, { diff: diff2, before, after });
@@ -297,30 +347,27 @@ var ReactiveView_default = {
           if (diff2.changed) {
             config2.callback(diff2, { component });
           }
-        }, config2.options);
+        }, config2.options));
       }
       setTimeout(async () => {
         var _a3, _b2, _c2;
-        if (props.model !== false) {
-          if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
-            console.warn(`${props.modelName}: defaultData is required for promise or async function data.`, props.data);
+        if (props.model !== false && (isFunctionData || isAsyncData)) {
+          if (!("defaultData" in vue.vnode.props)) {
+            console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
           }
-          const [data] = isPromiseData ? await Promise.all([
+          const [data] = isAsyncData ? await Promise.all([
             isAsyncFunctionData ? props.data() : props.data,
             (_a3 = defer.value) != null ? _a3 : true
           ]) : [props.data];
-          const isRefData = isRef(data);
-          const isReactiveData = isReactive(data);
-          const source = isRefData || isReactiveData || isFunctionData ? data : typeof data === "function" ? data : (() => data);
-          watch(source, async (after, before) => {
-            var _a4;
+          const source = typeof data === "function" ? data : (() => data);
+          subscriptions.push(watch(source, async (after, before) => {
             const diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
             const callback = context.attrs["data:callback"];
             if (props.debug) {
-              console.warn(`[${props.modelName}]:data`, { diff: diff2, data, callback, before, after, props, context, component, isRefData, isReactiveData });
+              console.warn(`[${props.modelName}]:data`, { diff: diff2, data, callback, before, after, props, context, component });
             }
             if (typeof callback === "function") {
-              model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
+              callback(diff2, { component });
             } else {
               model.replaceData(after);
             }
@@ -328,7 +375,7 @@ var ReactiveView_default = {
             immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
             deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
             once: context.attrs["data:once"]
-          });
+          }));
         }
       });
       setTimeout(async () => {
@@ -383,7 +430,7 @@ var ReactiveView_default = {
         if (isReactive(data)) {
           return data;
         } else {
-          if (isRef(data) || isFunctionData || isPromiseData) {
+          if (isRef(data) || isFunctionData || isAsyncData) {
             return reactive(datatype);
           } else {
             const props2 = "data" in vue.vnode.props;
@@ -401,7 +448,7 @@ var ReactiveView_default = {
       };
       const config = {
         data: props.beta ? normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data) : reactive(ObjectManager.on(
-          isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
+          isAsyncData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
         ).clone()),
         defaultData: ObjectManager.on(defaultData).clone(),
         notifications: props.notifications,
@@ -433,7 +480,7 @@ var ReactiveView_default = {
       });
       const component = ref({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
       if (props.debug) {
-        console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
+        console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isAsyncData });
       }
       const watchDataProp = (dataProp) => {
         var _a3, _b3, _c3, _d2;
@@ -446,14 +493,14 @@ var ReactiveView_default = {
         if (context.attrs["data:log"]) {
           console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
         }
-        watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
+        subscriptions.push(watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
           var _a4;
           if (typeof config2.callback === "function") {
             model.replaceData((_a4 = config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a4 : after);
           } else {
             model.replaceData(after);
           }
-        }, config2.options);
+        }, config2.options));
       };
       if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
         const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
@@ -465,20 +512,20 @@ var ReactiveView_default = {
         if (context.attrs["model:log"]) {
           console.warn(`[ReactiveView]:model`, { config: config2 });
         }
-        watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
+        subscriptions.push(watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
           config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
-        }, config2.options);
+        }, config2.options));
       }
       if (props.beta) {
         const isRefData = isRef(props.data);
-        if (isRefData || isFunctionData || isPromiseData) {
+        if (isRefData || isFunctionData || isAsyncData) {
           setTimeout(async () => {
             var _a3, _b3, _c3;
-            const [data] = isPromiseData ? await Promise.all([
+            const [data] = isAsyncData ? await Promise.all([
               isAsyncFunctionData ? props.data() : props.data,
               (_a3 = defer.value) != null ? _a3 : true
             ]) : [props.data];
-            watch(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
+            subscriptions.push(watch(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
               var _a4;
               if (before !== void 0 || after !== void 0) {
                 const callback = context.attrs["data:callback"];
@@ -493,7 +540,7 @@ var ReactiveView_default = {
               immediate: (_b3 = context.attrs["data:immediate"]) != null ? _b3 : true,
               deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true,
               once: context.attrs["data:once"]
-            });
+            }));
           });
         }
       } else {
@@ -651,24 +698,24 @@ function useSubscription() {
   const subscriptions = [];
   const subscription = Subscriptions.get();
   return {
-    addSubscription(name2, handler = () => false, data) {
-      subscription.subscribe(name2, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name2));
+    addSubscription(name, handler = () => false, data) {
+      subscription.subscribe(name, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name));
     },
-    replaceSubscription(name2, handler = () => false, data) {
-      subscription.replace(name2, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name2));
+    replaceSubscription(name, handler = () => false, data) {
+      subscription.replace(name, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name));
     },
     removeSubscriptions() {
       subscriptions.forEach((subscription2) => safeRequest({
         try: () => subscription2()
       }));
     },
-    removeSubscription(name2) {
-      subscription.unsubscribe(name2);
+    removeSubscription(name) {
+      subscription.unsubscribe(name);
     },
-    hasSubscription(name2) {
-      return subscription.hasSubscription(name2);
+    hasSubscription(name) {
+      return subscription.hasSubscription(name);
     },
     subscriptions,
     subscription

package/package.json

@@ -1,48 +1,48 @@
-{
-    "name": "@razaman2/reactive-view",
-    "version": "0.1.0-beta.5",
-    "description": "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
-    "scripts": {
-        "prepublishOnly": "npm run build",
-        "build": "tsup src/index.ts --format cjs,esm --dts",
-        "lint": "tsc",
-        "test": "cd tests/vue-ts && npm run dev",
-        "pr": "sh pr.sh"
-    },
-    "keywords": [
-        "vue",
-        "vue-helper",
-        "reactive-view",
-        "vue-class-component",
-        "reactive-ui"
-    ],
-    "author": "razaman2",
-    "license": "MIT",
-    "dependencies": {
-        "@razaman2/data-manager": "^3.3.5",
-        "@razaman2/event-emitter": "^2.1.1",
-        "@razaman2/object-manager": "^3.4.7",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "tailwind-merge": "^3.5.0",
-        "uuid": "^13.0.0"
-    },
-    "peerDependencies": {
-        "vue": ">=3.0.0"
-    },
-    "devDependencies": {
-        "@types/uuid": "^11.0.0",
-        "tsup": "^8.5.1",
-        "typescript": "^5.9.3",
-        "vitest": "^4.1.2"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.1.0-beta.7",
+    "description": "This library enables you to build vue apps in an object oriented way. It provides a convenient approach to extend and override ui components. It provides a built in eventing system along with component data management.",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "prepublishOnly": "npm run build",
+        "build": "tsup src/index.ts --format cjs,esm --dts",
+        "lint": "tsc",
+        "test": "cd tests/vue-ts && npm run dev",
+        "pr": "sh pr.sh"
+    },
+    "keywords": [
+        "vue",
+        "vue-helper",
+        "reactive-view",
+        "vue-class-component",
+        "reactive-ui"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.3.8",
+        "@razaman2/event-emitter": "^2.1.1",
+        "@razaman2/object-manager": "^3.4.7",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "tailwind-merge": "^3.5.0",
+        "uuid": "^13.0.0"
+    },
+    "peerDependencies": {
+        "vue": ">=3.0.0"
+    },
+    "devDependencies": {
+        "@types/uuid": "^11.0.0",
+        "tsup": "^8.5.1",
+        "typescript": "^5.9.3",
+        "vitest": "^4.1.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}