@razaman2/reactive-view 0.0.34-beta.26 → 0.0.34-beta.27

package/dist/index.d.mts

@@ -120,7 +120,7 @@ declare function useSubscription(): {
 };
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
-declare const extendVnode: (...params: [Record<string, any>, any]) => Record<string, (props: Record<string, any>, slots?: any | ((slots1: any) => any)) => any>;
+declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
 declare function defineReactiveView(): ReturnType<typeof defineComponent>;
 declare function defineReactiveView(options: Record<string, any>): ReturnType<typeof defineComponent>;
 declare function defineReactiveView(options: Record<string, any>, component: typeof _default): ReturnType<typeof defineComponent>;

package/dist/index.d.ts

@@ -120,7 +120,7 @@ declare function useSubscription(): {
 };
 declare function StyleParser(styles?: Array<string> | Record<string, boolean> | string): {};
 declare function MergeStyles(...params: any): any;
-declare const extendVnode: (...params: [Record<string, any>, any]) => Record<string, (props: Record<string, any>, slots?: any | ((slots1: any) => any)) => any>;
+declare const extendVnode: (component: Record<string, any>, element: any) => Record<string, (props?: Record<string, any>, slots?: Record<string, any> | ((slots: Record<string, any>) => Record<string, any>)) => any>;
 declare function defineReactiveView(): ReturnType<typeof defineComponent>;
 declare function defineReactiveView(options: Record<string, any>): ReturnType<typeof defineComponent>;
 declare function defineReactiveView(options: Record<string, any>, component: typeof _default): ReturnType<typeof defineComponent>;

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.26";
+var version = "0.0.34-beta.27";
 
 // src/ReactiveView.ts
 var setup = {
@@ -262,30 +262,21 @@ var ReactiveView_default = {
       if (props.debug) {
         console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, ref: (0, import_vue.isRef)(data), reactive: (0, import_vue.isReactive)(data) });
       }
-      if ((0, import_vue.isReactive)(data)) {
+      if ((0, import_vue.isRef)(data) || (0, import_vue.isReactive)(data)) {
         return data;
-      } else if ((0, import_vue.isRef)(data)) {
-        try {
-          if (["Array", "Object"].includes((0, import_vue.unref)(data).constructor.name)) {
-            return (0, import_vue.unref)(data);
-          } else {
-            return (0, import_vue.reactive)({ "": (0, import_vue.unref)(data) });
-          }
-        } catch (e) {
-          return (0, import_vue.reactive)({ "": (0, import_vue.unref)(data) });
-        }
       } else {
         if (isFunctionData || isPromiseData) {
           return (0, import_vue.reactive)(datatype);
         } else {
+          const props2 = "data" in vue.vnode.props;
           try {
             if (["Array", "Object"].includes(data.constructor.name)) {
-              return (0, import_vue.reactive)("data" in vue.vnode.props ? data : defaultData);
+              return (0, import_vue.reactive)(props2 ? data : datatype);
             } else {
-              return (0, import_vue.reactive)("data" in vue.vnode.props ? { "": data } : defaultData);
+              return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
             }
           } catch (e) {
-            return (0, import_vue.reactive)("data" in vue.vnode.props ? { "": data } : defaultData);
+            return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
           }
         }
       }
@@ -297,17 +288,17 @@ var ReactiveView_default = {
       defaultData: import_object_manager.default.on(defaultData).clone(),
       notifications: props.notifications,
       subscriptions: props.subscriptions,
-      logging: props.logging,
-      name: props.modelName
+      name: props.modelName,
+      logging: props.logging
     };
     const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
       get(target, key, receiver) {
-        if (key === "setData" || key === "replaceData") {
+        if (["setData", "replaceData"].includes(key.toString())) {
           return (...params) => {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              const before = import_object_manager.default.on(target.getData()).clone();
+              const before = import_object_manager.default.on(target.getData());
               const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
               if (beforeSetData(access(component).diff(before, after), target)) {
                 target[key](...params);
@@ -360,16 +351,38 @@ var ReactiveView_default = {
         config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
       }, config2.options);
     }
-    if (!props.beta) {
+    if (props.beta) {
+      if (isFunctionData || isPromiseData) {
+        setTimeout(async () => {
+          var _a2, _b2;
+          const [data] = isPromiseData ? await Promise.all([
+            isAsyncFunctionData ? props.data() : props.data,
+            (_a2 = defer.value) != null ? _a2 : true
+          ]) : [props.data];
+          (0, import_vue.watch)(isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
+            var _a3;
+            const callback = context.attrs["data:callback"];
+            if (typeof callback === "function") {
+              model.replaceData((_a3 = callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a3 : after);
+            } else {
+              model.replaceData(after);
+            }
+          }, {
+            immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
+            deep: context.attrs["data:deep"],
+            once: context.attrs["data:once"]
+          });
+        });
+      }
+    } else {
       setTimeout(async () => {
         var _a2;
-        const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
+        const [data] = await Promise.all([
+          isAsyncFunctionData ? props.data() : props.data,
+          (_a2 = defer.value) != null ? _a2 : true
+        ]);
         watchDataProp(data);
       });
-    } else if (props.beta && (isFunctionData || isPromiseData)) {
-      (0, import_vue.watch)(props.data, (data) => {
-        model.replaceData(data);
-      });
     }
     setTimeout(async () => {
       var _a2;
@@ -575,8 +588,8 @@ function MergeStyles(...params) {
     }
   });
 }
-var extendVnode = (...params) => {
-  return new Proxy(access(params[0]), {
+var extendVnode = (component, element) => {
+  return new Proxy(access(component), {
     get: (target, key) => {
       const getVnode = () => {
         try {
@@ -587,25 +600,23 @@ var extendVnode = (...params) => {
       };
       const vnode = getVnode();
       return (props = {}, slots) => {
-        var _b;
-        const _a = props, { class: providedClasses, style: providedStyles } = _a, providedProps = __objRest(_a, ["class", "style"]);
-        const _c = (_b = vnode.props) != null ? _b : {}, { class: vnodeClasses, style: vnodeStyles } = _c, vnodeProps = __objRest(_c, ["class", "style"]);
-        const isFunctionClass = typeof providedClasses === "function";
-        const isFunctionStyle = typeof providedStyles === "function";
-        const isFunctionSlots = typeof slots === "function";
-        const functionalProps = Object.entries(providedProps).reduce((props2, [key2, value]) => {
-          if (typeof value === "function" && !["setup"].includes(key2)) {
-            props2[key2] = value(vnodeProps[key2]);
+        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, 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") {
+            props2[key2] = value((_a2 = vnode.props) == null ? void 0 : _a2[key2]);
           }
           return props2;
-        }, providedProps);
-        const finalClasses = (0, import_tailwind_merge.twMerge)(isFunctionClass ? "" : vnodeClasses, MergeStyles(isFunctionClass ? providedClasses(vnodeClasses) : providedClasses).string);
-        const finalStyles = isFunctionStyle ? providedStyles(vnodeStyles) : providedStyles;
-        {
-          const props2 = Object.assign({}, vnodeProps, functionalProps, { class: finalClasses, style: finalStyles });
-          const children = slots ? isFunctionSlots ? slots(vnode.children) : slots : vnode.children;
-          return (0, import_vue2.createVNode)(params.length > 1 ? params[1] : vnode, props2, children);
-        }
+        }, props);
+        const finalProps = Object.assign(rest, functionalProps, { class: finalClasses, style: finalStyles });
+        const finalSlots = slots ? typeof slots === "function" ? slots(vnode.children) : slots : vnode.children;
+        const finalElement = ["undefined"].includes(typeof element) ? vnode.type : element;
+        return (0, import_vue2.h)(finalElement, finalProps, finalSlots);
       };
     }
   });

package/dist/index.mjs

@@ -124,11 +124,11 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { ref, reactive, watch, unref, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
+import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.26";
+var version = "0.0.34-beta.27";
 
 // src/ReactiveView.ts
 var setup = {
@@ -216,30 +216,21 @@ var ReactiveView_default = {
       if (props.debug) {
         console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, ref: isRef(data), reactive: isReactive(data) });
       }
-      if (isReactive(data)) {
+      if (isRef(data) || isReactive(data)) {
         return data;
-      } else if (isRef(data)) {
-        try {
-          if (["Array", "Object"].includes(unref(data).constructor.name)) {
-            return unref(data);
-          } else {
-            return reactive({ "": unref(data) });
-          }
-        } catch (e) {
-          return reactive({ "": unref(data) });
-        }
       } else {
         if (isFunctionData || isPromiseData) {
           return reactive(datatype);
         } else {
+          const props2 = "data" in vue.vnode.props;
           try {
             if (["Array", "Object"].includes(data.constructor.name)) {
-              return reactive("data" in vue.vnode.props ? data : defaultData);
+              return reactive(props2 ? data : datatype);
             } else {
-              return reactive("data" in vue.vnode.props ? { "": data } : defaultData);
+              return reactive(props2 ? { "": data } : datatype);
             }
           } catch (e) {
-            return reactive("data" in vue.vnode.props ? { "": data } : defaultData);
+            return reactive(props2 ? { "": data } : datatype);
           }
         }
       }
@@ -251,17 +242,17 @@ var ReactiveView_default = {
       defaultData: ObjectManager.on(defaultData).clone(),
       notifications: props.notifications,
       subscriptions: props.subscriptions,
-      logging: props.logging,
-      name: props.modelName
+      name: props.modelName,
+      logging: props.logging
     };
     const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
       get(target, key, receiver) {
-        if (key === "setData" || key === "replaceData") {
+        if (["setData", "replaceData"].includes(key.toString())) {
           return (...params) => {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              const before = ObjectManager.on(target.getData()).clone();
+              const before = ObjectManager.on(target.getData());
               const after = params.length ? ObjectManager.on(datatype).set(...params) : ObjectManager.on(datatype).set(defaultData);
               if (beforeSetData(access(component).diff(before, after), target)) {
                 target[key](...params);
@@ -314,16 +305,38 @@ var ReactiveView_default = {
         config2.callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component });
       }, config2.options);
     }
-    if (!props.beta) {
+    if (props.beta) {
+      if (isFunctionData || isPromiseData) {
+        setTimeout(async () => {
+          var _a2, _b2;
+          const [data] = isPromiseData ? await Promise.all([
+            isAsyncFunctionData ? props.data() : props.data,
+            (_a2 = defer.value) != null ? _a2 : true
+          ]) : [props.data];
+          watch(isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
+            var _a3;
+            const callback = context.attrs["data:callback"];
+            if (typeof callback === "function") {
+              model.replaceData((_a3 = callback(access(component).diff(ObjectManager.on(before), ObjectManager.on(after)), { component })) != null ? _a3 : after);
+            } else {
+              model.replaceData(after);
+            }
+          }, {
+            immediate: (_b2 = context.attrs["data:immediate"]) != null ? _b2 : true,
+            deep: context.attrs["data:deep"],
+            once: context.attrs["data:once"]
+          });
+        });
+      }
+    } else {
       setTimeout(async () => {
         var _a2;
-        const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
+        const [data] = await Promise.all([
+          isAsyncFunctionData ? props.data() : props.data,
+          (_a2 = defer.value) != null ? _a2 : true
+        ]);
         watchDataProp(data);
       });
-    } else if (props.beta && (isFunctionData || isPromiseData)) {
-      watch(props.data, (data) => {
-        model.replaceData(data);
-      });
     }
     setTimeout(async () => {
       var _a2;
@@ -358,7 +371,7 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-import { unref as unref2, toRaw as toRaw2, createApp, createVNode as createVNode2, defineComponent } from "vue";
+import { h, unref, toRaw, createApp, createVNode as createVNode2, defineComponent } from "vue";
 import { formatInTimeZone } from "date-fns-tz";
 import { twMerge } from "tailwind-merge";
 console.log(`%c[ReactiveView]: ${version}`, "background-color: red; color: yellow;");
@@ -437,7 +450,7 @@ function getDate(param1, param2) {
 function access(view = {}, alternative) {
   var _a;
   const resolve = (target) => {
-    return new Proxy(toRaw2(target), {
+    return new Proxy(toRaw(target), {
       get(target2, key) {
         const component = { tree: target2 };
         do {
@@ -458,7 +471,7 @@ function access(view = {}, alternative) {
     });
   };
   try {
-    const component = (_a = unref2(typeof view === "function" ? view() : view)) != null ? _a : {};
+    const component = (_a = unref(typeof view === "function" ? view() : view)) != null ? _a : {};
     return resolve("instance" in component ? component.instance : component);
   } catch (e) {
     return resolve(view);
@@ -529,8 +542,8 @@ function MergeStyles(...params) {
     }
   });
 }
-var extendVnode = (...params) => {
-  return new Proxy(access(params[0]), {
+var extendVnode = (component, element) => {
+  return new Proxy(access(component), {
     get: (target, key) => {
       const getVnode = () => {
         try {
@@ -541,25 +554,23 @@ var extendVnode = (...params) => {
       };
       const vnode = getVnode();
       return (props = {}, slots) => {
-        var _b;
-        const _a = props, { class: providedClasses, style: providedStyles } = _a, providedProps = __objRest(_a, ["class", "style"]);
-        const _c = (_b = vnode.props) != null ? _b : {}, { class: vnodeClasses, style: vnodeStyles } = _c, vnodeProps = __objRest(_c, ["class", "style"]);
-        const isFunctionClass = typeof providedClasses === "function";
-        const isFunctionStyle = typeof providedStyles === "function";
-        const isFunctionSlots = typeof slots === "function";
-        const functionalProps = Object.entries(providedProps).reduce((props2, [key2, value]) => {
-          if (typeof value === "function" && !["setup"].includes(key2)) {
-            props2[key2] = value(vnodeProps[key2]);
+        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, 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") {
+            props2[key2] = value((_a2 = vnode.props) == null ? void 0 : _a2[key2]);
           }
           return props2;
-        }, providedProps);
-        const finalClasses = twMerge(isFunctionClass ? "" : vnodeClasses, MergeStyles(isFunctionClass ? providedClasses(vnodeClasses) : providedClasses).string);
-        const finalStyles = isFunctionStyle ? providedStyles(vnodeStyles) : providedStyles;
-        {
-          const props2 = Object.assign({}, vnodeProps, functionalProps, { class: finalClasses, style: finalStyles });
-          const children = slots ? isFunctionSlots ? slots(vnode.children) : slots : vnode.children;
-          return createVNode2(params.length > 1 ? params[1] : vnode, props2, children);
-        }
+        }, props);
+        const finalProps = Object.assign(rest, functionalProps, { class: finalClasses, style: finalStyles });
+        const finalSlots = slots ? typeof slots === "function" ? slots(vnode.children) : slots : vnode.children;
+        const finalElement = ["undefined"].includes(typeof element) ? vnode.type : element;
+        return h(finalElement, finalProps, finalSlots);
       };
     }
   });
@@ -634,7 +645,7 @@ var setData = (component, data, path) => {
   return "state" in vue ? diff : vue.$emit("update:state", diff);
 };
 var componentState = (component) => {
-  return unref2("state" in component ? component.state : component.$attrs.state);
+  return unref("state" in component ? component.state : component.$attrs.state);
 };
 var dataPath = (component, path) => {
   return typeof component.$attrs["data:path"] === "function" ? component.$attrs["data:path"](path) : path;

package/package.json

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