@razaman2/reactive-view 0.0.33 → 0.0.34-beta.2

package/dist/index.d.mts

@@ -48,14 +48,12 @@ declare const _default: {
             default: boolean;
         };
         instance: {
-            default: vue.Ref<any, any>;
+            default: () => vue.Ref<any, any>;
         };
         notifications: ObjectConstructor;
         subscriptions: ObjectConstructor;
         beforeSetData: FunctionConstructor;
-        data: {
-            default: {};
-        };
+        data: {};
         defaultData: {};
         getDefaultData: {
             type: FunctionConstructor;

package/dist/index.d.ts

@@ -48,14 +48,12 @@ declare const _default: {
             default: boolean;
         };
         instance: {
-            default: vue.Ref<any, any>;
+            default: () => vue.Ref<any, any>;
         };
         notifications: ObjectConstructor;
         subscriptions: ObjectConstructor;
         beforeSetData: FunctionConstructor;
-        data: {
-            default: {};
-        };
+        data: {};
         defaultData: {};
         getDefaultData: {
             type: FunctionConstructor;

package/dist/index.js

@@ -168,7 +168,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.33";
+var version = "0.0.34-beta.2";
 
 // src/ReactiveView.ts
 var setup = {
@@ -184,14 +184,12 @@ var ReactiveView_default = {
       default: true
     },
     instance: {
-      default: (0, import_vue.ref)()
+      default: () => (0, import_vue.ref)()
     },
     notifications: Object,
     subscriptions: Object,
     beforeSetData: Function,
-    data: {
-      default: {}
-    },
+    data: {},
     defaultData: {},
     getDefaultData: {
       type: Function,
@@ -214,7 +212,7 @@ var ReactiveView_default = {
     }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const template = (component2, vue2) => {
       return (0, import_vue.createVNode)(
         "div",
@@ -225,25 +223,23 @@ var ReactiveView_default = {
       );
     };
     const isValid = (0, import_vue.ref)(false);
-    const ready = (0, import_vue.ref)(false);
-    const vue = (0, import_vue.getCurrentInstance)();
+    const isReady = (0, import_vue.ref)(false);
+    const isFunctionData = ["Function"].includes(((_a = props.data) != null ? _a : {}).constructor.name);
+    const isAsyncFunctionData = ["AsyncFunction"].includes(((_b = props.data) != null ? _b : {}).constructor.name);
+    const isPromiseData = ["Promise"].includes(((_c = props.data) != null ? _c : {}).constructor.name) || isAsyncFunctionData;
     const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
-    const data = typeof props.data === "function" ? props.data() : props.data;
-    const async = data instanceof Promise;
-    if (props.debug) {
-      console.log("[ReactiveView]:", { props, context, isValid, ready, vue, defer, data, async });
-    }
-    if (async && !((_a = vue.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
-      console.error("[ReactiveView]: defaultData is required for async data.");
+    const vue = (0, import_vue.getCurrentInstance)();
+    if ((isPromiseData || isFunctionData) && !("defaultData" in vue.vnode.props)) {
+      console.error("[ReactiveView]: defaultData is required for promise or async function data.");
     }
     const defaultData = props.getDefaultData(
-      ((_b = vue.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : typeof ((_c = vue.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(vue.vnode.props.data) ? [] : {} : ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = vue.vnode.props) == null ? void 0 : _e.data : {}
+      ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : ((_e = vue.vnode.props) == null ? void 0 : _e.hasOwnProperty("data")) ? Array.isArray(vue.vnode.props.data) ? [] : {} : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
     const config = {
-      data: (0, import_vue.reactive)(
-        import_object_manager.default.on(async ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? typeof data === "function" ? datatype : data : datatype).clone()
-      ),
+      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 : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? props.data : datatype
+      ).clone()),
       defaultData: import_object_manager.default.on(defaultData).clone(),
       notifications: props.notifications,
       subscriptions: props.subscriptions,
@@ -257,9 +253,11 @@ var ReactiveView_default = {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              const after = import_object_manager.default.on(datatype).set(...params.length ? params : [defaultData]).get();
               const before = target.getData();
-              beforeSetData({ before, after }, target);
+              const after = (params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData)).get();
+              if (beforeSetData({ before, after }, target)) {
+                target[key](...params);
+              }
             } else {
               target[key](...params);
             }
@@ -270,20 +268,20 @@ var ReactiveView_default = {
         }
       }
     });
+    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, isValid } });
+    if (props.debug) {
+      console.log("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
+    }
     const watchDataProp = (dataProp) => {
       var _a2, _b2, _c2;
       const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
         callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
-        options: Object.assign({
-          immediate: context.attrs["data:immediate"],
-          deep: context.attrs["data:deep"],
-          once: context.attrs["data:once"]
-        }, ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
+        options: Object.assign(__spreadValues(__spreadValues(__spreadValues({}, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:deep"] ? { deep: context.attrs["data:deep"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
       };
       if (context.attrs["data:log"]) {
-        console.log(`[data:prop]:`, config2);
+        console.log(`[ReactiveView]:data`, { config: config2, dataProp });
       }
-      (0, import_vue.watch)(typeof dataProp === "function" || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
+      (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
         const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
         if (typeof config2.callback === "function") {
@@ -293,25 +291,30 @@ var ReactiveView_default = {
         }
       }, config2.options);
     };
-    setTimeout(async () => {
-      var _a2;
-      const [dataProp] = await Promise.all([data, (_a2 = defer.value) != null ? _a2 : true]);
-      watchDataProp(dataProp);
-    });
-    setTimeout(async () => {
-      var _a2;
-      ready.value = (_a2 = await defer.value) != null ? _a2 : true;
-    });
-    if (context.attrs["onUpdate:model"]) {
+    if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
       const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
-        callback: context.attrs["onUpdate:model"]
-      } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
+        callback: context.attrs["onUpdate:model"],
+        options: Object.assign(__spreadValues(__spreadValues({
+          deep: (_g = context.attrs["model:deep"]) != null ? _g : true
+        }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_h = context.attrs["onUpdate:model"]) != null ? _h : {}).options)
+      } : (_i = context.attrs["onUpdate:model"]) != null ? _i : {};
+      if (context.attrs["model:log"]) {
+        console.log(`[ReactiveView]:model`, { config: config2 });
+      }
       (0, import_vue.watch)(() => model.getData(), (after, before) => {
         const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
         config2.callback(diff, { component });
       }, config2.options);
     }
-    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, isValid } });
+    setTimeout(async () => {
+      var _a2;
+      const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
+      watchDataProp(data);
+    });
+    setTimeout(async () => {
+      var _a2;
+      isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
+    });
     component.value = [access(component)].reduce((options, parent) => {
       var _a2;
       while (parent) {
@@ -331,7 +334,7 @@ var ReactiveView_default = {
     props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
     return (vue2) => {
       var _a2, _b2;
-      if (ready.value) {
+      if (isReady.value) {
         return access(component).template(component, vue2);
       } else {
         return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });

package/dist/index.mjs

@@ -125,7 +125,7 @@ import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstanc
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.33";
+var version = "0.0.34-beta.2";
 
 // src/ReactiveView.ts
 var setup = {
@@ -141,14 +141,12 @@ var ReactiveView_default = {
       default: true
     },
     instance: {
-      default: ref()
+      default: () => ref()
     },
     notifications: Object,
     subscriptions: Object,
     beforeSetData: Function,
-    data: {
-      default: {}
-    },
+    data: {},
     defaultData: {},
     getDefaultData: {
       type: Function,
@@ -171,7 +169,7 @@ var ReactiveView_default = {
     }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const template = (component2, vue2) => {
       return createVNode(
         "div",
@@ -182,25 +180,23 @@ var ReactiveView_default = {
       );
     };
     const isValid = ref(false);
-    const ready = ref(false);
-    const vue = getCurrentInstance();
+    const isReady = ref(false);
+    const isFunctionData = ["Function"].includes(((_a = props.data) != null ? _a : {}).constructor.name);
+    const isAsyncFunctionData = ["AsyncFunction"].includes(((_b = props.data) != null ? _b : {}).constructor.name);
+    const isPromiseData = ["Promise"].includes(((_c = props.data) != null ? _c : {}).constructor.name) || isAsyncFunctionData;
     const defer = ref(typeof props.defer === "function" ? props.defer() : props.defer);
-    const data = typeof props.data === "function" ? props.data() : props.data;
-    const async = data instanceof Promise;
-    if (props.debug) {
-      console.log("[ReactiveView]:", { props, context, isValid, ready, vue, defer, data, async });
-    }
-    if (async && !((_a = vue.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
-      console.error("[ReactiveView]: defaultData is required for async data.");
+    const vue = getCurrentInstance();
+    if ((isPromiseData || isFunctionData) && !("defaultData" in vue.vnode.props)) {
+      console.error("[ReactiveView]: defaultData is required for promise or async function data.");
     }
     const defaultData = props.getDefaultData(
-      ((_b = vue.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : typeof ((_c = vue.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(vue.vnode.props.data) ? [] : {} : ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = vue.vnode.props) == null ? void 0 : _e.data : {}
+      ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : ((_e = vue.vnode.props) == null ? void 0 : _e.hasOwnProperty("data")) ? Array.isArray(vue.vnode.props.data) ? [] : {} : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
     const config = {
-      data: reactive(
-        ObjectManager.on(async ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? typeof data === "function" ? datatype : data : datatype).clone()
-      ),
+      data: reactive(ObjectManager.on(
+        isPromiseData || isFunctionData || isRef(props.data) || isReactive(props.data) ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? props.data : datatype
+      ).clone()),
       defaultData: ObjectManager.on(defaultData).clone(),
       notifications: props.notifications,
       subscriptions: props.subscriptions,
@@ -214,9 +210,11 @@ var ReactiveView_default = {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              const after = ObjectManager.on(datatype).set(...params.length ? params : [defaultData]).get();
               const before = target.getData();
-              beforeSetData({ before, after }, target);
+              const after = (params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData)).get();
+              if (beforeSetData({ before, after }, target)) {
+                target[key](...params);
+              }
             } else {
               target[key](...params);
             }
@@ -227,20 +225,20 @@ var ReactiveView_default = {
         }
       }
     });
+    const component = ref({ parent: { self: vue.proxy }, self: { template, model, isValid } });
+    if (props.debug) {
+      console.log("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
+    }
     const watchDataProp = (dataProp) => {
       var _a2, _b2, _c2;
       const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
         callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
-        options: Object.assign({
-          immediate: context.attrs["data:immediate"],
-          deep: context.attrs["data:deep"],
-          once: context.attrs["data:once"]
-        }, ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
+        options: Object.assign(__spreadValues(__spreadValues(__spreadValues({}, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:deep"] ? { deep: context.attrs["data:deep"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
       };
       if (context.attrs["data:log"]) {
-        console.log(`[data:prop]:`, config2);
+        console.log(`[ReactiveView]:data`, { config: config2, dataProp });
       }
-      watch(typeof dataProp === "function" || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
+      watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
         const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
         if (typeof config2.callback === "function") {
@@ -250,25 +248,30 @@ var ReactiveView_default = {
         }
       }, config2.options);
     };
-    setTimeout(async () => {
-      var _a2;
-      const [dataProp] = await Promise.all([data, (_a2 = defer.value) != null ? _a2 : true]);
-      watchDataProp(dataProp);
-    });
-    setTimeout(async () => {
-      var _a2;
-      ready.value = (_a2 = await defer.value) != null ? _a2 : true;
-    });
-    if (context.attrs["onUpdate:model"]) {
+    if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
       const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
-        callback: context.attrs["onUpdate:model"]
-      } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
+        callback: context.attrs["onUpdate:model"],
+        options: Object.assign(__spreadValues(__spreadValues({
+          deep: (_g = context.attrs["model:deep"]) != null ? _g : true
+        }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_h = context.attrs["onUpdate:model"]) != null ? _h : {}).options)
+      } : (_i = context.attrs["onUpdate:model"]) != null ? _i : {};
+      if (context.attrs["model:log"]) {
+        console.log(`[ReactiveView]:model`, { config: config2 });
+      }
       watch(() => model.getData(), (after, before) => {
         const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
         config2.callback(diff, { component });
       }, config2.options);
     }
-    const component = ref({ parent: { self: vue.proxy }, self: { template, model, isValid } });
+    setTimeout(async () => {
+      var _a2;
+      const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
+      watchDataProp(data);
+    });
+    setTimeout(async () => {
+      var _a2;
+      isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
+    });
     component.value = [access(component)].reduce((options, parent) => {
       var _a2;
       while (parent) {
@@ -288,7 +291,7 @@ var ReactiveView_default = {
     props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
     return (vue2) => {
       var _a2, _b2;
-      if (ready.value) {
+      if (isReady.value) {
         return access(component).template(component, vue2);
       } else {
         return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.33",
+    "version": "0.0.34-beta.2",
     "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",
@@ -29,13 +29,13 @@
         "uuid": "^11.1.0"
     },
     "peerDependencies": {
-        "vue": "^3.5.16"
+        "vue": "^3.5.18"
     },
     "devDependencies": {
         "@types/uuid": "^10.0.0",
         "tsup": "^8.5.0",
-        "typescript": "^5.8.3",
-        "vitest": "^3.2.3"
+        "typescript": "^5.9.2",
+        "vitest": "^3.2.4"
     },
     "publishConfig": {
         "access": "public"