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

package/dist/index.js

@@ -177,7 +177,7 @@ 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.2";
 
 // src/ReactiveView.ts
 var setup = {
@@ -223,16 +223,16 @@ var ReactiveView_default = {
   setup(props, context) {
     var _a, _b, _c;
     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 {
@@ -253,9 +253,6 @@ var ReactiveView_default = {
     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 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)) ? [] : {} : {}
     );
@@ -340,34 +337,45 @@ var ReactiveView_default = {
         const source = () => import_object_manager.default.on(model.getData()).clone();
         (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 diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
-          const callback = context.attrs["data:callback"];
-          if (typeof callback === "function") {
-            model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
-          } else {
-            model.replaceData(after);
+        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);
           }
-        }, {
-          immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
-          deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
-          once: context.attrs["data:once"]
-        });
+          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 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, isRefData, isReactiveData });
+            }
+            if (typeof callback === "function") {
+              model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
+            } 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"]
+          });
+        }
       });
       setTimeout(async () => {
         var _a3;

package/dist/index.mjs

@@ -131,7 +131,7 @@ import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstanc
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.1.0-beta.1";
+var version = "0.1.0-beta.2";
 
 // src/ReactiveView.ts
 var setup = {
@@ -177,16 +177,16 @@ var ReactiveView_default = {
   setup(props, context) {
     var _a, _b, _c;
     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 {
@@ -207,9 +207,6 @@ var ReactiveView_default = {
     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 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)) ? [] : {} : {}
     );
@@ -294,34 +291,45 @@ var ReactiveView_default = {
         const source = () => ObjectManager.on(model.getData()).clone();
         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 diff2 = access(component).diff(ObjectManager.on(before), ObjectManager.on(after));
-          const callback = context.attrs["data:callback"];
-          if (typeof callback === "function") {
-            model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
-          } else {
-            model.replaceData(after);
+        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);
           }
-        }, {
-          immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
-          deep: (_c2 = context.attrs["data:deep"]) != null ? _c2 : true,
-          once: context.attrs["data:once"]
-        });
+          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 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, isRefData, isReactiveData });
+            }
+            if (typeof callback === "function") {
+              model.replaceData((_a4 = await callback(diff2, { component })) != null ? _a4 : after);
+            } 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"]
+          });
+        }
       });
       setTimeout(async () => {
         var _a3;

package/package.json

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