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

package/dist/index.d.mts

@@ -16,6 +16,12 @@ type SubscriptionItem = {
     handler: Function;
     data?: any;
 };
+type PropType = {
+    default: any;
+    required: boolean;
+    validator: ((value: any) => boolean);
+    type: any | Array<any>;
+};
 type PropExclusions = Array<string> | string;
 
 declare class Subscription {
@@ -118,6 +124,11 @@ declare function useSubscription(): {
     subscriptions: any[];
     subscription: Subscription;
 };
+declare const Props: ({ default: value, type, validator, required }?: Partial<PropType>) => {
+    required: boolean | undefined;
+    validator: (value: any) => boolean;
+    default?: vue.Ref<any, any> | undefined;
+};
 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>;
@@ -134,4 +145,4 @@ declare const getData: (component: any, path: number | string, alternative: any)
 declare const setData: (component: any, data: any, path?: string) => any;
 declare const dataPath: (component: any, path: string | number) => any;
 
-export { MergeStyles, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };
+export { MergeStyles, Props, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };

package/dist/index.d.ts

@@ -16,6 +16,12 @@ type SubscriptionItem = {
     handler: Function;
     data?: any;
 };
+type PropType = {
+    default: any;
+    required: boolean;
+    validator: ((value: any) => boolean);
+    type: any | Array<any>;
+};
 type PropExclusions = Array<string> | string;
 
 declare class Subscription {
@@ -118,6 +124,11 @@ declare function useSubscription(): {
     subscriptions: any[];
     subscription: Subscription;
 };
+declare const Props: ({ default: value, type, validator, required }?: Partial<PropType>) => {
+    required: boolean | undefined;
+    validator: (value: any) => boolean;
+    default?: vue.Ref<any, any> | undefined;
+};
 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>;
@@ -134,4 +145,4 @@ declare const getData: (component: any, path: number | string, alternative: any)
 declare const setData: (component: any, data: any, path?: string) => any;
 declare const dataPath: (component: any, path: string | number) => any;
 
-export { MergeStyles, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };
+export { MergeStyles, Props, StyleParser, access, dataPath, _default as default, defineReactiveView, extendVnode, getData, getDate, getProps, getReactiveViewComponent, safeRequest, setData, setup, showComponent, useSubscription };

package/dist/index.js

@@ -60,6 +60,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   MergeStyles: () => MergeStyles,
+  Props: () => Props,
   StyleParser: () => StyleParser,
   access: () => access,
   dataPath: () => dataPath,
@@ -177,7 +178,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.3";
 
 // src/ReactiveView.ts
 var setup = {
@@ -223,16 +224,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 +254,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 +338,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, component, 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;
@@ -712,6 +721,18 @@ function useSubscription() {
     subscription
   };
 }
+var Props = ({ default: value, type, validator, required } = {}) => {
+  const types1 = Array.isArray(type) ? type : [type != null ? type : Array];
+  const types2 = types1.includes(Object) ? types1 : types1.concat(Object);
+  return __spreadProps(__spreadValues({}, value ? { default: (0, import_vue2.ref)(value) } : {}), {
+    required,
+    validator: (value2) => {
+      return validator ? validator((0, import_vue2.unref)(value2)) : Array.from(new Set(types2.map((type2) => {
+        return typeof type2 === "function" ? type2().constructor.name : type2;
+      }))).includes((0, import_vue2.unref)(value2).constructor.name);
+    }
+  });
+};
 function StyleParser(styles = {}) {
   const transform = (style, status = true) => {
     const remove = style.split(/(-{[^}]+})/);
@@ -870,6 +891,7 @@ var dataPath = (component, path) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MergeStyles,
+  Props,
   StyleParser,
   access,
   dataPath,

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.3";
 
 // 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, component, 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;
@@ -666,6 +674,18 @@ function useSubscription() {
     subscription
   };
 }
+var Props = ({ default: value, type, validator, required } = {}) => {
+  const types1 = Array.isArray(type) ? type : [type != null ? type : Array];
+  const types2 = types1.includes(Object) ? types1 : types1.concat(Object);
+  return __spreadProps(__spreadValues({}, value ? { default: ref2(value) } : {}), {
+    required,
+    validator: (value2) => {
+      return validator ? validator(unref2(value2)) : Array.from(new Set(types2.map((type2) => {
+        return typeof type2 === "function" ? type2().constructor.name : type2;
+      }))).includes(unref2(value2).constructor.name);
+    }
+  });
+};
 function StyleParser(styles = {}) {
   const transform = (style, status = true) => {
     const remove = style.split(/(-{[^}]+})/);
@@ -823,6 +843,7 @@ var dataPath = (component, path) => {
 };
 export {
   MergeStyles,
+  Props,
   StyleParser,
   access,
   dataPath,

package/package.json

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