@razaman2/reactive-view 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/index.d.mts

@@ -16,6 +16,12 @@ type SubscriptionItem = {
     handler: Function;
     data?: any;
 };
+type PropType = {
+    default: any;
+    required: boolean;
+    validator: ((value: any) => boolean);
+    type: any | Array<any>;
+};
 type PropExclusions = Array<string> | string;
 
 declare class Subscription {
@@ -118,6 +124,11 @@ declare function useSubscription(): {
     subscriptions: any[];
     subscription: Subscription;
 };
+declare const Prop: ({ default: value, type, validator, required }?: Partial<PropType>) => {
+    required: boolean | undefined;
+    validator: (value: any) => boolean;
+    default?: vue.Ref<any, any> | undefined;
+};
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
 declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
@@ -134,4 +145,4 @@ declare const getData: (component: any, path: number | string, alternative: any)
 declare const setData: (component: any, data: any, path?: string) => any;
 declare const dataPath: (component: any, path: string | number) => any;
 
-export { MergeStyles, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };
+export { MergeStyles, Prop, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };

package/dist/index.d.ts

@@ -16,6 +16,12 @@ type SubscriptionItem = {
     handler: Function;
     data?: any;
 };
+type PropType = {
+    default: any;
+    required: boolean;
+    validator: ((value: any) => boolean);
+    type: any | Array<any>;
+};
 type PropExclusions = Array<string> | string;
 
 declare class Subscription {
@@ -118,6 +124,11 @@ declare function useSubscription(): {
     subscriptions: any[];
     subscription: Subscription;
 };
+declare const Prop: ({ default: value, type, validator, required }?: Partial<PropType>) => {
+    required: boolean | undefined;
+    validator: (value: any) => boolean;
+    default?: vue.Ref<any, any> | undefined;
+};
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
 declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
@@ -134,4 +145,4 @@ declare const getData: (component: any, path: number | string, alternative: any)
 declare const setData: (component: any, data: any, path?: string) => any;
 declare const dataPath: (component: any, path: string | number) => any;
 
-export { MergeStyles, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };
+export { MergeStyles, Prop, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };

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") {
@@ -60,6 +60,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   MergeStyles: () => MergeStyles,
+  Prop: () => Prop,
   StyleParser: () => StyleParser,
   access: () => access,
   dataPath: () => dataPath,
@@ -88,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 {
@@ -130,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;
     }
@@ -151,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!`);
     }
   }
 };
@@ -176,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.1";
+var version = "0.1.0-beta.11";
+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 = {
@@ -222,17 +270,19 @@ 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())));
-      let changed = false;
-      const change = paths.reduce((change2, path) => {
+      const changes = paths.reduce((changes2, path) => {
         if (before.get(path) !== after.get(path)) {
-          change2.set(path, after.get(path));
-          changed = true;
+          changes2.set(path, after.get(path));
+          changed.value = true;
         }
-        return change2;
+        return changes2;
       }, import_object_manager.default.on({}));
-      return { before: before.get(), after: after.get(), changes: change.get(), changed };
+      return { before: before.get(), after: after.get(), changes: changes.get(), changed: changed.value };
     };
     const dataPath2 = (path) => {
       try {
@@ -244,18 +294,15 @@ 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)();
-    if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
-      console.warn(`${props.modelName}: defaultData is required for promise or async function data.`, props.data);
-    }
     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)) ? [] : {} : {}
     );
@@ -302,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);
           }
         }
       };
@@ -326,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 = {
@@ -338,36 +386,54 @@ 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 });
+          }
           if (diff2.changed) {
             config2.callback(diff2, { component });
           }
-        });
+        }, config2.options));
       }
-      setTimeout(async () => {
-        var _a3, _b2, _c2;
-        const [data] = isPromiseData ? 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 track = (source, options = {}) => {
+        var _a3, _b2, _c2, _d, _e;
+        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, 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);
           }
         }, {
-          immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
-          deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
-          once: context.attrs["data:once"]
-        });
+          immediate: (_b2 = (_a3 = context.attrs["data:immediate"]) != null ? _a3 : options.immediate) != null ? _b2 : true,
+          deep: (_d = (_c2 = context.attrs["data:deep"]) != null ? _c2 : options.deep) != null ? _d : true,
+          once: (_e = context.attrs["data:once"]) != null ? _e : options.once
+        }));
+      };
+      setTimeout(async () => {
+        var _a3;
+        if (props.model !== false) {
+          if (isFunctionData || isAsyncData) {
+            if (!("defaultData" in vue.vnode.props)) {
+              console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
+            }
+            const [data] = isAsyncData ? await Promise.all([
+              isAsyncFunctionData ? props.data() : props.data,
+              (_a3 = defer.value) != null ? _a3 : true
+            ]) : [props.data];
+            track(typeof data === "function" ? data : (() => data));
+          } else {
+            if (props.debug) {
+              console.log(`log output:`, props, (0, import_vue.isRef)(props.data), (0, import_vue.isReactive)(props.data));
+            }
+            track((0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? props.data : () => props.data, { immediate: false, deep: false });
+          }
+        }
       });
       setTimeout(async () => {
         var _a3;
@@ -421,7 +487,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;
@@ -439,7 +505,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,
@@ -471,7 +537,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;
@@ -484,14 +550,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" ? {
@@ -503,20 +569,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"];
@@ -531,7 +597,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 {
@@ -689,29 +755,41 @@ 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
   };
 }
+var Prop = ({ default: value, type, validator, required } = {}) => {
+  const types1 = Array.isArray(type) ? type : [type != null ? type : Array];
+  const types2 = types1.includes(Object) ? types1 : types1.concat(Object);
+  return __spreadProps(__spreadValues({}, value ? { default: (0, import_vue2.ref)(value) } : {}), {
+    required,
+    validator: (value2) => {
+      return validator ? validator((0, import_vue2.unref)(value2)) : Array.from(new Set(types2.map((type2) => {
+        return typeof type2 === "function" ? type2().constructor.name : type2;
+      }))).includes((0, import_vue2.unref)(value2).constructor.name);
+    }
+  });
+};
 function StyleParser(styles = {}) {
   const transform = (style, status = true) => {
     const remove = style.split(/(-{[^}]+})/);
@@ -870,6 +948,7 @@ var dataPath = (component, path) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MergeStyles,
+  Prop,
   StyleParser,
   access,
   dataPath,

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.1";
+var version = "0.1.0-beta.11";
+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,17 +223,19 @@ 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())));
-      let changed = false;
-      const change = paths.reduce((change2, path) => {
+      const changes = paths.reduce((changes2, path) => {
         if (before.get(path) !== after.get(path)) {
-          change2.set(path, after.get(path));
-          changed = true;
+          changes2.set(path, after.get(path));
+          changed.value = true;
         }
-        return change2;
+        return changes2;
       }, ObjectManager.on({}));
-      return { before: before.get(), after: after.get(), changes: change.get(), changed };
+      return { before: before.get(), after: after.get(), changes: changes.get(), changed: changed.value };
     };
     const dataPath2 = (path) => {
       try {
@@ -198,18 +247,15 @@ 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();
-    if ((isFunctionData || isPromiseData) && !("defaultData" in vue.vnode.props)) {
-      console.warn(`${props.modelName}: defaultData is required for promise or async function data.`, props.data);
-    }
     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)) ? [] : {} : {}
     );
@@ -256,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);
           }
         }
       };
@@ -280,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 = {
@@ -292,36 +339,54 @@ 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 });
+          }
           if (diff2.changed) {
             config2.callback(diff2, { component });
           }
-        });
+        }, config2.options));
       }
-      setTimeout(async () => {
-        var _a3, _b2, _c2;
-        const [data] = isPromiseData ? 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 track = (source, options = {}) => {
+        var _a3, _b2, _c2, _d, _e;
+        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, 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);
           }
         }, {
-          immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
-          deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
-          once: context.attrs["data:once"]
-        });
+          immediate: (_b2 = (_a3 = context.attrs["data:immediate"]) != null ? _a3 : options.immediate) != null ? _b2 : true,
+          deep: (_d = (_c2 = context.attrs["data:deep"]) != null ? _c2 : options.deep) != null ? _d : true,
+          once: (_e = context.attrs["data:once"]) != null ? _e : options.once
+        }));
+      };
+      setTimeout(async () => {
+        var _a3;
+        if (props.model !== false) {
+          if (isFunctionData || isAsyncData) {
+            if (!("defaultData" in vue.vnode.props)) {
+              console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
+            }
+            const [data] = isAsyncData ? await Promise.all([
+              isAsyncFunctionData ? props.data() : props.data,
+              (_a3 = defer.value) != null ? _a3 : true
+            ]) : [props.data];
+            track(typeof data === "function" ? data : (() => data));
+          } else {
+            if (props.debug) {
+              console.log(`log output:`, props, isRef(props.data), isReactive(props.data));
+            }
+            track(isRef(props.data) || isReactive(props.data) ? props.data : () => props.data, { immediate: false, deep: false });
+          }
+        }
       });
       setTimeout(async () => {
         var _a3;
@@ -375,7 +440,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;
@@ -393,7 +458,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,
@@ -425,7 +490,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;
@@ -438,14 +503,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" ? {
@@ -457,20 +522,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"];
@@ -485,7 +550,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 {
@@ -643,29 +708,41 @@ 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
   };
 }
+var Prop = ({ default: value, type, validator, required } = {}) => {
+  const types1 = Array.isArray(type) ? type : [type != null ? type : Array];
+  const types2 = types1.includes(Object) ? types1 : types1.concat(Object);
+  return __spreadProps(__spreadValues({}, value ? { default: ref2(value) } : {}), {
+    required,
+    validator: (value2) => {
+      return validator ? validator(unref2(value2)) : Array.from(new Set(types2.map((type2) => {
+        return typeof type2 === "function" ? type2().constructor.name : type2;
+      }))).includes(unref2(value2).constructor.name);
+    }
+  });
+};
 function StyleParser(styles = {}) {
   const transform = (style, status = true) => {
     const remove = style.split(/(-{[^}]+})/);
@@ -823,6 +900,7 @@ var dataPath = (component, path) => {
 };
 export {
   MergeStyles,
+  Prop,
   StyleParser,
   access,
   dataPath,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.1.0-beta.1",
+    "version": "0.1.0-beta.11",
     "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",
@@ -22,12 +22,12 @@
     "author": "razaman2",
     "license": "MIT",
     "dependencies": {
-        "@razaman2/data-manager": "^3.2.12",
+        "@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.3.1",
+        "tailwind-merge": "^3.5.0",
         "uuid": "^13.0.0"
     },
     "peerDependencies": {
@@ -35,9 +35,9 @@
     },
     "devDependencies": {
         "@types/uuid": "^11.0.0",
-        "tsup": "^8.5.0",
+        "tsup": "^8.5.1",
         "typescript": "^5.9.3",
-        "vitest": "^4.0.5"
+        "vitest": "^4.1.2"
     },
     "publishConfig": {
         "access": "public"