@razaman2/reactive-view 0.0.1 → 0.0.4

package/dist/index.d.mts

@@ -63,6 +63,10 @@ declare const _default$1: {
                 subscription: Subscription;
             };
         };
+        sync: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         setup: {
             type: FunctionConstructor;
             default: (param1?: {}, param2?: {}) => {};

package/dist/index.d.ts

@@ -63,6 +63,10 @@ declare const _default$1: {
                 subscription: Subscription;
             };
         };
+        sync: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         setup: {
             type: FunctionConstructor;
             default: (param1?: {}, param2?: {}) => {};

package/dist/index.js

@@ -191,10 +191,9 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.1";
+var version = "0.0.4";
 
 // src/ReactiveView.ts
-var import_uuid = require("uuid");
 var props = {
   defaultData: {},
   getDefaultData: {
@@ -217,6 +216,10 @@ var props = {
   subscriptions: {
     type: Object,
     default: getSubscription()
+  },
+  sync: {
+    type: Boolean,
+    default: true
   }
 };
 var setup = {
@@ -265,13 +268,9 @@ var ReactiveView_default = {
     };
     const setup2 = (_d = props2.setup(options)) != null ? _d : options;
     const _e = setup2, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
-    let sync = false;
+    const sync = (0, import_vue.ref)(false);
     if (context.attrs["onUpdate:modelState"]) {
       const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
-      const subscriptionName = `
-${props2.modelName}
-onUpdate:modelState
-${(0, import_uuid.v4)()}`;
       const subscription = (0, import_vue.watch)(() => import_object_manager.default.on(stateRef.value).clone(), (after, before) => {
         var _a2;
         const transform = (_a2 = config2.transform) != null ? _a2 : access(setup2).$transform;
@@ -279,27 +278,23 @@ ${(0, import_uuid.v4)()}`;
           before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
           after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
         };
-        if (sync) {
-          sync = false;
+        if (sync.value) {
+          sync.value = false;
         } else {
           config2.callback(transform ? transform(diff) : diff, getState);
         }
       }, config2.options);
-      props2.subscriptions.addSubscription(subscriptionName, subscription);
-      (0, import_vue.onBeforeUnmount)(() => props2.subscriptions.removeSubscription(subscriptionName, false));
     }
-    if (context.attrs["onUpdate:propsState"]) {
+    if (context.attrs["onUpdate:propsState"] || props2.sync) {
       const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"];
-      const subscriptionName = `
-${props2.modelName}
-onUpdate:propsState
-${(0, import_uuid.v4)()}`;
       const subscription = (0, import_vue.watch)(() => props2.state, (after, before) => {
-        config2.callback({ before, after }, getState);
-        sync = true;
+        if (props2.sync && typeof config2.callback !== "function") {
+          getState.replaceData(after);
+        } else if (typeof config2.callback === "function") {
+          config2.callback({ before, after }, getState);
+        }
+        sync.value = true;
       }, config2.options);
-      props2.subscriptions.addSubscription(subscriptionName, subscription);
-      (0, import_vue.onBeforeUnmount)(() => props2.subscriptions.removeSubscription(subscriptionName, false));
     }
     return ($vue) => {
       const setup3 = { $vue, options: parent };

package/dist/index.mjs

@@ -144,14 +144,13 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { h, ref, watch, onBeforeUnmount } from "vue";
+import { h, ref, watch } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.1";
+var version = "0.0.4";
 
 // src/ReactiveView.ts
-import { v4 as uuid } from "uuid";
 var props = {
   defaultData: {},
   getDefaultData: {
@@ -174,6 +173,10 @@ var props = {
   subscriptions: {
     type: Object,
     default: getSubscription()
+  },
+  sync: {
+    type: Boolean,
+    default: true
   }
 };
 var setup = {
@@ -222,13 +225,9 @@ var ReactiveView_default = {
     };
     const setup2 = (_d = props2.setup(options)) != null ? _d : options;
     const _e = setup2, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
-    let sync = false;
+    const sync = ref(false);
     if (context.attrs["onUpdate:modelState"]) {
       const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
-      const subscriptionName = `
-${props2.modelName}
-onUpdate:modelState
-${uuid()}`;
       const subscription = watch(() => ObjectManager.on(stateRef.value).clone(), (after, before) => {
         var _a2;
         const transform = (_a2 = config2.transform) != null ? _a2 : access(setup2).$transform;
@@ -236,27 +235,23 @@ ${uuid()}`;
           before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
           after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
         };
-        if (sync) {
-          sync = false;
+        if (sync.value) {
+          sync.value = false;
         } else {
           config2.callback(transform ? transform(diff) : diff, getState);
         }
       }, config2.options);
-      props2.subscriptions.addSubscription(subscriptionName, subscription);
-      onBeforeUnmount(() => props2.subscriptions.removeSubscription(subscriptionName, false));
     }
-    if (context.attrs["onUpdate:propsState"]) {
+    if (context.attrs["onUpdate:propsState"] || props2.sync) {
       const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"];
-      const subscriptionName = `
-${props2.modelName}
-onUpdate:propsState
-${uuid()}`;
       const subscription = watch(() => props2.state, (after, before) => {
-        config2.callback({ before, after }, getState);
-        sync = true;
+        if (props2.sync && typeof config2.callback !== "function") {
+          getState.replaceData(after);
+        } else if (typeof config2.callback === "function") {
+          config2.callback({ before, after }, getState);
+        }
+        sync.value = true;
       }, config2.options);
-      props2.subscriptions.addSubscription(subscriptionName, subscription);
-      onBeforeUnmount(() => props2.subscriptions.removeSubscription(subscriptionName, false));
     }
     return ($vue) => {
       const setup3 = { $vue, options: parent };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.1",
+    "version": "0.0.4",
     "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",