@razaman2/reactive-view 0.0.34-beta.22 → 0.0.34-beta.24

package/dist/index.d.mts

@@ -128,7 +128,7 @@ declare function showComponent(component: any, options?: {
     container?: string;
     key?: string;
     router?: any;
-}): void;
+}): ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, vue.ComponentProvideOptions>, {}, {}, "", {}, any> | undefined;
 declare const getData: (component: any, path: number | string, alternative: any) => any;
 declare const setData: (component: any, data: any, path?: string) => any;
 declare const dataPath: (component: any, path: string | number) => any;

package/dist/index.d.ts

@@ -128,7 +128,7 @@ declare function showComponent(component: any, options?: {
     container?: string;
     key?: string;
     router?: any;
-}): void;
+}): ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, vue.ComponentProvideOptions>, {}, {}, "", {}, any> | undefined;
 declare const getData: (component: any, path: number | string, alternative: any) => any;
 declare const setData: (component: any, data: any, path?: string) => any;
 declare const dataPath: (component: any, path: string | number) => any;

package/dist/index.js

@@ -174,7 +174,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.22";
+var version = "0.0.34-beta.24";
 
 // src/ReactiveView.ts
 var setup = {
@@ -305,9 +305,9 @@ var ReactiveView_default = {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              const before = target.getData();
+              const before = import_object_manager.default.on(target.getData()).clone();
               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)) {
+              if (beforeSetData(access(component).diff(before, after), target)) {
                 target[key](...params);
               }
             } else {
@@ -320,7 +320,7 @@ var ReactiveView_default = {
         }
       }
     });
-    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, dataPath: dataPath2, isValid } });
+    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, diff, dataPath: dataPath2, isValid } });
     if (props.debug) {
       console.log("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
     }
@@ -338,7 +338,7 @@ var ReactiveView_default = {
       (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
         if (typeof config2.callback === "function") {
-          model.replaceData((_a3 = config2.callback(diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -354,8 +354,8 @@ var ReactiveView_default = {
       if (context.attrs["model:log"]) {
         console.log(`[ReactiveView]:model`, { config: config2 });
       }
-      (0, import_vue.watch)(() => model.getData(), (after, before) => {
-        config2.callback(diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
+      (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);
     }
     if (!props.beta) {
@@ -588,9 +588,10 @@ var extendVnode = (component, element) => {
       return (props = {}, slots) => {
         var _a;
         const isFunctionClass = typeof props.class === "function";
+        const isFunctionStyle = typeof props.style === "function";
         const _b = (_a = vnode.props) != null ? _a : {}, { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
         const finalClasses = (0, import_tailwind_merge.twMerge)(isFunctionClass ? "" : classes, MergeStyles(isFunctionClass ? props.class(classes) : props.class).string);
-        const finalStyles = MergeStyles(styles, typeof props.style === "function" ? props.style(styles) : props.style);
+        const finalStyles = MergeStyles(styles, isFunctionStyle ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
           var _a2;
           if (!["class", "style", "setup"].includes(key2) && typeof value === "function") {
@@ -647,13 +648,14 @@ function showComponent(component, options = {}) {
       {
         __cleanup__: () => {
           document.querySelectorAll(`#${id}`).forEach((element) => element.remove());
+          app.unmount();
         }
       }
     );
     if (options.router) {
-      app.use(options.router).mount(`#${id}`);
+      return app.use(options.router).mount(`#${id}`);
     } else {
-      app.mount(`#${id}`);
+      return app.mount(`#${id}`);
     }
   }
 }

package/dist/index.mjs

@@ -128,7 +128,7 @@ import { ref, reactive, watch, unref, toRaw, isRef, isReactive, createVNode, get
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.22";
+var version = "0.0.34-beta.24";
 
 // src/ReactiveView.ts
 var setup = {
@@ -259,9 +259,9 @@ var ReactiveView_default = {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              const before = target.getData();
+              const before = ObjectManager.on(target.getData()).clone();
               const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
-              if (beforeSetData(diff(ObjectManager.on(before), after), target)) {
+              if (beforeSetData(access(component).diff(before, after), target)) {
                 target[key](...params);
               }
             } else {
@@ -274,7 +274,7 @@ var ReactiveView_default = {
         }
       }
     });
-    const component = ref({ parent: { self: vue.proxy }, self: { template, model, dataPath: dataPath2, isValid } });
+    const component = ref({ parent: { self: vue.proxy }, self: { template, model, diff, dataPath: dataPath2, isValid } });
     if (props.debug) {
       console.log("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
     }
@@ -292,7 +292,7 @@ var ReactiveView_default = {
       watch(isFunctionData || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
         var _a3;
         if (typeof config2.callback === "function") {
-          model.replaceData((_a3 = config2.callback(diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
+          model.replaceData((_a3 = config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
         } else {
           model.replaceData(after);
         }
@@ -308,8 +308,8 @@ var ReactiveView_default = {
       if (context.attrs["model:log"]) {
         console.log(`[ReactiveView]:model`, { config: config2 });
       }
-      watch(() => model.getData(), (after, before) => {
-        config2.callback(diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
+      watch(() => ObjectManager.on(model.getData()).clone(), (after, before) => {
+        config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
       }, config2.options);
     }
     if (!props.beta) {
@@ -542,9 +542,10 @@ var extendVnode = (component, element) => {
       return (props = {}, slots) => {
         var _a;
         const isFunctionClass = typeof props.class === "function";
+        const isFunctionStyle = typeof props.style === "function";
         const _b = (_a = vnode.props) != null ? _a : {}, { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
         const finalClasses = twMerge(isFunctionClass ? "" : classes, MergeStyles(isFunctionClass ? props.class(classes) : props.class).string);
-        const finalStyles = MergeStyles(styles, typeof props.style === "function" ? props.style(styles) : props.style);
+        const finalStyles = MergeStyles(styles, isFunctionStyle ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
           var _a2;
           if (!["class", "style", "setup"].includes(key2) && typeof value === "function") {
@@ -601,13 +602,14 @@ function showComponent(component, options = {}) {
       {
         __cleanup__: () => {
           document.querySelectorAll(`#${id}`).forEach((element) => element.remove());
+          app.unmount();
         }
       }
     );
     if (options.router) {
-      app.use(options.router).mount(`#${id}`);
+      return app.use(options.router).mount(`#${id}`);
     } else {
-      app.mount(`#${id}`);
+      return app.mount(`#${id}`);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.34-beta.22",
+    "version": "0.0.34-beta.24",
     "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",
@@ -9,7 +9,8 @@
         "prepublishOnly": "npm run build",
         "build": "tsup src/index.ts --format cjs,esm --dts",
         "lint": "tsc",
-        "test": "cd tests/vue-ts && npm run dev"
+        "test": "cd tests/vue-ts && npm run dev",
+        "pr": "sh pr.sh"
     },
     "keywords": [
         "vue",