@razaman2/reactive-view 0.0.34-beta.3 → 0.0.34-beta.5

package/dist/index.js

@@ -168,7 +168,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.3";
+var version = "0.0.34-beta.5";
 
 // src/ReactiveView.ts
 var setup = {
@@ -215,6 +215,15 @@ var ReactiveView_default = {
   },
   setup(props, context) {
     var _a, _b, _c, _d, _e, _f;
+    const diff = (before, after) => {
+      const change = after.paths().reduce((change2, path) => {
+        if (before.get(path) !== after.get(path)) {
+          change2.set(path, after.get(path));
+        }
+        return change2;
+      }, import_object_manager.default.on({}));
+      return { before: before.get(), after: after.get(), change: change.get() };
+    };
     const template = (component2, vue2) => {
       return (0, import_vue.createVNode)(
         "div",
@@ -256,8 +265,8 @@ var ReactiveView_default = {
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
               const before = target.getData();
-              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)) {
+              const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
+              if (beforeSetData(diff(import_object_manager.default.on(before), after), target)) {
                 target[key](...params);
               }
             } else {
@@ -285,9 +294,8 @@ var ReactiveView_default = {
       }
       (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") {
-          model.replaceData((_a3 = config2.callback(diff, { component })) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -304,8 +312,7 @@ var ReactiveView_default = {
         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.callback(diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
       }, config2.options);
     }
     setTimeout(async () => {
@@ -348,6 +355,7 @@ var ReactiveView_default = {
 // src/index.ts
 var import_vue2 = require("vue");
 var import_date_fns_tz = require("date-fns-tz");
+var import_tailwind_merge = require("tailwind-merge");
 var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
@@ -377,7 +385,7 @@ function safeRequest(request) {
     }
   });
 }
-function getProps(props, param2) {
+function getProps(props = {}, param2) {
   var _a;
   const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
   const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
@@ -529,22 +537,18 @@ var extendVnode = (component, element) => {
       return (props = {}, slots) => {
         var _a;
         const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
-        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const finalClasses = (0, import_tailwind_merge.twMerge)(MergeStyles(classes).string, MergeStyles(typeof props.class === "function" ? props.class(classes) : props.class).string);
+        const finalStyles = MergeStyles(styles, typeof props.style === "function" ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
-          if (![
-            "class"
-            /*, "style"*/
-          ].includes(key2) && typeof value === "function") {
-            props2[key2] = value(vnode.props[key2]);
+          var _a2;
+          if (!["class", "style"].includes(key2) && typeof value === "function") {
+            props2[key2] = value((_a2 = vnode.props) == null ? void 0 : _a2[key2]);
           }
           return props2;
         }, props);
-        const finalProps = Object.assign(rest, functionalProps, {
-          class: finalClasses
-          /*, style: finalStyles*/
-        });
-        const finalSlots = typeof slots === "function" ? slots(vnode.children) : vnode.children;
-        return (0, import_vue2.h)(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+        const finalProps = Object.assign(rest, functionalProps, { class: finalClasses, style: finalStyles });
+        const finalSlots = slots ? typeof slots === "function" ? slots(vnode.children) : slots : vnode.children;
+        return (0, import_vue2.h)(["undefined"].includes(typeof element) ? vnode.type : element, finalProps, finalSlots);
       };
     }
   });

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.34-beta.3";
+var version = "0.0.34-beta.5";
 
 // src/ReactiveView.ts
 var setup = {
@@ -172,6 +172,15 @@ var ReactiveView_default = {
   },
   setup(props, context) {
     var _a, _b, _c, _d, _e, _f;
+    const diff = (before, after) => {
+      const change = after.paths().reduce((change2, path) => {
+        if (before.get(path) !== after.get(path)) {
+          change2.set(path, after.get(path));
+        }
+        return change2;
+      }, ObjectManager.on({}));
+      return { before: before.get(), after: after.get(), change: change.get() };
+    };
     const template = (component2, vue2) => {
       return createVNode(
         "div",
@@ -213,8 +222,8 @@ var ReactiveView_default = {
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
               const before = target.getData();
-              const after = (params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData)).get();
-              if (beforeSetData({ before, after }, target)) {
+              const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
+              if (beforeSetData(diff(ObjectManager.on(before), after), target)) {
                 target[key](...params);
               }
             } else {
@@ -242,9 +251,8 @@ var ReactiveView_default = {
       }
       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") {
-          model.replaceData((_a3 = config2.callback(diff, { component })) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -261,8 +269,7 @@ var ReactiveView_default = {
         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.callback(diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
       }, config2.options);
     }
     setTimeout(async () => {
@@ -305,6 +312,7 @@ var ReactiveView_default = {
 // src/index.ts
 import { createVNode as createVNode2, isRef as isRef2, h } from "vue";
 import { formatInTimeZone } from "date-fns-tz";
+import { twMerge } from "tailwind-merge";
 var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
@@ -334,7 +342,7 @@ function safeRequest(request) {
     }
   });
 }
-function getProps(props, param2) {
+function getProps(props = {}, param2) {
   var _a;
   const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
   const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
@@ -486,22 +494,18 @@ var extendVnode = (component, element) => {
       return (props = {}, slots) => {
         var _a;
         const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
-        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const finalClasses = twMerge(MergeStyles(classes).string, MergeStyles(typeof props.class === "function" ? props.class(classes) : props.class).string);
+        const finalStyles = MergeStyles(styles, typeof props.style === "function" ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
-          if (![
-            "class"
-            /*, "style"*/
-          ].includes(key2) && typeof value === "function") {
-            props2[key2] = value(vnode.props[key2]);
+          var _a2;
+          if (!["class", "style"].includes(key2) && typeof value === "function") {
+            props2[key2] = value((_a2 = vnode.props) == null ? void 0 : _a2[key2]);
           }
           return props2;
         }, props);
-        const finalProps = Object.assign(rest, functionalProps, {
-          class: finalClasses
-          /*, style: finalStyles*/
-        });
-        const finalSlots = typeof slots === "function" ? slots(vnode.children) : vnode.children;
-        return h(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+        const finalProps = Object.assign(rest, functionalProps, { class: finalClasses, style: finalStyles });
+        const finalSlots = slots ? typeof slots === "function" ? slots(vnode.children) : slots : vnode.children;
+        return h(["undefined"].includes(typeof element) ? vnode.type : element, finalProps, finalSlots);
       };
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.34-beta.3",
+    "version": "0.0.34-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",
@@ -26,6 +26,7 @@
         "@razaman2/object-manager": "^3.4.2",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
+        "tailwind-merge": "^3.3.1",
         "uuid": "^11.1.0"
     },
     "peerDependencies": {