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

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: (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 const extendVnode: (...params: [Record<string, any>, any]) => Record<string, (props: Record<string, any>, slots?: any | ((slots1: any) => 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: (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 const extendVnode: (...params: [Record<string, any>, any]) => Record<string, (props: Record<string, any>, slots?: any | ((slots1: any) => 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.24";
+var version = "0.0.34-beta.26";
 
 // src/ReactiveView.ts
 var setup = {
@@ -259,7 +259,9 @@ var ReactiveView_default = {
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
     const normalize = (data) => {
-      console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData });
+      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)) {
         return data;
       } else if ((0, import_vue.isRef)(data)) {
@@ -365,10 +367,8 @@ var ReactiveView_default = {
         watchDataProp(data);
       });
     } else if (props.beta && (isFunctionData || isPromiseData)) {
-      setTimeout(async () => {
-        var _a2;
-        const [data] = await Promise.all([isFunctionData || isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
-        model.replaceData((0, import_vue.toRaw)((0, import_vue.unref)(data)));
+      (0, import_vue.watch)(props.data, (data) => {
+        model.replaceData(data);
       });
     }
     setTimeout(async () => {
@@ -481,6 +481,7 @@ function getDate(param1, param2) {
   return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
 }
 function access(view = {}, alternative) {
+  var _a;
   const resolve = (target) => {
     return new Proxy((0, import_vue2.toRaw)(target), {
       get(target2, key) {
@@ -503,7 +504,7 @@ function access(view = {}, alternative) {
     });
   };
   try {
-    const component = (0, import_vue2.unref)(typeof view === "function" ? view() : view);
+    const component = (_a = (0, import_vue2.unref)(typeof view === "function" ? view() : view)) != null ? _a : {};
     return resolve("instance" in component ? component.instance : component);
   } catch (e) {
     return resolve(view);
@@ -574,8 +575,8 @@ function MergeStyles(...params) {
     }
   });
 }
-var extendVnode = (component, element) => {
-  return new Proxy(access(component), {
+var extendVnode = (...params) => {
+  return new Proxy(access(params[0]), {
     get: (target, key) => {
       const getVnode = () => {
         try {
@@ -586,23 +587,25 @@ var extendVnode = (component, element) => {
       };
       const vnode = getVnode();
       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, 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]);
+        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]);
           }
           return props2;
-        }, 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);
+        }, 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);
+        }
       };
     }
   });

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, toRaw, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
+import { ref, reactive, watch, unref, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.34-beta.24";
+var version = "0.0.34-beta.26";
 
 // src/ReactiveView.ts
 var setup = {
@@ -213,7 +213,9 @@ var ReactiveView_default = {
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
     const normalize = (data) => {
-      console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData });
+      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)) {
         return data;
       } else if (isRef(data)) {
@@ -319,10 +321,8 @@ var ReactiveView_default = {
         watchDataProp(data);
       });
     } else if (props.beta && (isFunctionData || isPromiseData)) {
-      setTimeout(async () => {
-        var _a2;
-        const [data] = await Promise.all([isFunctionData || isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
-        model.replaceData(toRaw(unref(data)));
+      watch(props.data, (data) => {
+        model.replaceData(data);
       });
     }
     setTimeout(async () => {
@@ -358,7 +358,7 @@ var ReactiveView_default = {
 };
 
 // src/index.ts
-import { h, unref as unref2, toRaw as toRaw2, createApp, createVNode as createVNode2, defineComponent } from "vue";
+import { unref as unref2, toRaw as toRaw2, 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;");
@@ -435,6 +435,7 @@ function getDate(param1, param2) {
   return formatInTimeZone(datetime(), options.timezone, options.format);
 }
 function access(view = {}, alternative) {
+  var _a;
   const resolve = (target) => {
     return new Proxy(toRaw2(target), {
       get(target2, key) {
@@ -457,7 +458,7 @@ function access(view = {}, alternative) {
     });
   };
   try {
-    const component = unref2(typeof view === "function" ? view() : view);
+    const component = (_a = unref2(typeof view === "function" ? view() : view)) != null ? _a : {};
     return resolve("instance" in component ? component.instance : component);
   } catch (e) {
     return resolve(view);
@@ -528,8 +529,8 @@ function MergeStyles(...params) {
     }
   });
 }
-var extendVnode = (component, element) => {
-  return new Proxy(access(component), {
+var extendVnode = (...params) => {
+  return new Proxy(access(params[0]), {
     get: (target, key) => {
       const getVnode = () => {
         try {
@@ -540,23 +541,25 @@ var extendVnode = (component, element) => {
       };
       const vnode = getVnode();
       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, 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]);
+        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]);
           }
           return props2;
-        }, 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);
+        }, 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);
+        }
       };
     }
   });

package/package.json

@@ -1,48 +1,48 @@
-{
-    "name": "@razaman2/reactive-view",
-    "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",
-    "types": "dist/index.d.ts",
-    "scripts": {
-        "prepublishOnly": "npm run build",
-        "build": "tsup src/index.ts --format cjs,esm --dts",
-        "lint": "tsc",
-        "test": "cd tests/vue-ts && npm run dev",
-        "pr": "sh pr.sh"
-    },
-    "keywords": [
-        "vue",
-        "vue-helper",
-        "reactive-view",
-        "vue-class-component",
-        "reactive-ui"
-    ],
-    "author": "razaman2",
-    "license": "MIT",
-    "dependencies": {
-        "@razaman2/data-manager": "^3.2.12",
-        "@razaman2/event-emitter": "^2.1.1",
-        "@razaman2/object-manager": "^3.4.5",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "tailwind-merge": "^3.3.1",
-        "uuid": "^11.1.0"
-    },
-    "peerDependencies": {
-        "vue": "^3.5.20"
-    },
-    "devDependencies": {
-        "@types/uuid": "^10.0.0",
-        "tsup": "^8.5.0",
-        "typescript": "^5.9.2",
-        "vitest": "^3.2.4"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.0.34-beta.26",
+    "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",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "prepublishOnly": "npm run build",
+        "build": "tsup src/index.ts --format cjs,esm --dts",
+        "lint": "tsc",
+        "test": "cd tests/vue-ts && npm run dev",
+        "pr": "sh pr.sh"
+    },
+    "keywords": [
+        "vue",
+        "vue-helper",
+        "reactive-view",
+        "vue-class-component",
+        "reactive-ui"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.2.12",
+        "@razaman2/event-emitter": "^2.1.1",
+        "@razaman2/object-manager": "^3.4.7",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "tailwind-merge": "^3.3.1",
+        "uuid": "^13.0.0"
+    },
+    "peerDependencies": {
+        "vue": ">=3.0.0"
+    },
+    "devDependencies": {
+        "@types/uuid": "^11.0.0",
+        "tsup": "^8.5.0",
+        "typescript": "^5.9.3",
+        "vitest": "^4.0.5"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}