@razaman2/reactive-view 0.0.13 → 0.0.15

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import * as vue from 'vue';
 import { SetupContext, ComponentPublicInstance, WatchOptions, UnwrapRef } from 'vue';
 
 type SubscriptionItem = {
@@ -93,6 +94,9 @@ declare function safeRequest(request: {
 }): Promise<any>;
 declare function getProps(props: Record<string, any>, exclude: PropExclusions): Record<string, any>;
 declare function getProps(props: Record<string, any>, options: PropOptions): Record<string, any>;
+declare function getReactiveViewComponent(component: any, options?: Record<string, any>): vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>;
 declare function getDate(timestamp: {
     toDate: () => Date;
 } | Date, format?: string): string;
@@ -113,4 +117,4 @@ declare function getSubscription(): {
     subscription: Subscription;
 };
 
-export { type StateUpdate, access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
+export { type StateUpdate, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as vue from 'vue';
 import { SetupContext, ComponentPublicInstance, WatchOptions, UnwrapRef } from 'vue';
 
 type SubscriptionItem = {
@@ -93,6 +94,9 @@ declare function safeRequest(request: {
 }): Promise<any>;
 declare function getProps(props: Record<string, any>, exclude: PropExclusions): Record<string, any>;
 declare function getProps(props: Record<string, any>, options: PropOptions): Record<string, any>;
+declare function getReactiveViewComponent(component: any, options?: Record<string, any>): vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>;
 declare function getDate(timestamp: {
     toDate: () => Date;
 } | Date, format?: string): string;
@@ -113,4 +117,4 @@ declare function getSubscription(): {
     subscription: Subscription;
 };
 
-export { type StateUpdate, access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
+export { type StateUpdate, access, _default as default, getDate, getProps, getReactiveViewComponent, getSubscription, safeRequest, setup };

package/dist/index.js

@@ -60,12 +60,14 @@ __export(src_exports, {
   default: () => src_default,
   getDate: () => getDate,
   getProps: () => getProps,
+  getReactiveViewComponent: () => getReactiveViewComponent,
   getSubscription: () => getSubscription,
   safeRequest: () => safeRequest,
   setup: () => setup
 });
 module.exports = __toCommonJS(src_exports);
 var import_date_fns_tz = require("date-fns-tz");
+var import_vue2 = require("vue");
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -162,7 +164,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.13";
+var version = "0.0.15";
 
 // src/ReactiveView.ts
 var props = {
@@ -202,7 +204,7 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _f;
+    var _a, _b, _c, _d, _e;
     const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? (0, import_vue.h)(
@@ -215,14 +217,17 @@ var ReactiveView_default = {
           textAlign: "center"
         }
       }, context.attrs), `${props2.modelName}: ${name}@${version}`);
-      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
+      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options: options2, props: props2, context })) != null ? _c2 : vnode;
     };
     const isValid = (0, import_vue.ref)(false);
+    const sync = (0, import_vue.ref)(false);
+    const rendered = (0, import_vue.ref)(false);
+    const component = (0, import_vue.ref)((_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.proxy);
     const defaultData = props2.getDefaultData(
-      Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
+      Array.isArray(props2.state) ? (_b = props2.defaultData) != null ? _b : [] : (_c = props2.defaultData) != null ? _c : {}
     );
-    const defaultType = Array.isArray(defaultData) ? [] : {};
-    const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? defaultType : (_c = props2.state) != null ? _c : defaultType));
+    const type = Array.isArray(defaultData) ? [] : {};
+    const state = (0, import_vue.reactive)(import_data_manager.default.transform(props2.await ? type : (_d = props2.state) != null ? _d : type));
     const config = {
       defaultData,
       data: state,
@@ -231,56 +236,69 @@ var ReactiveView_default = {
       notifications: props2.notifications,
       subscriptions: props2.subscriptions
     };
-    const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config);
-    const sync = (0, import_vue.ref)(false);
-    const rendered = (0, import_vue.ref)(false);
+    const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new import_data_manager.default(config), {
+      get(target, property, receiver) {
+        var _a2, _b2;
+        const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
+        if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
+          return (...params) => {
+            const type2 = Array.isArray(defaultData) ? [] : {};
+            beforeSetData(import_object_manager.default.on(type2).set(...params).get(), target);
+          };
+        } else {
+          return Reflect.get(target, property, receiver);
+        }
+      }
+    });
     const options = {
-      parent: { self: (0, import_vue.getCurrentInstance)().proxy },
-      self: { template, isValid, getState }
+      parent: { self: component },
+      self: { template, getState, isValid }
     };
-    const _e = (_d = props2.setup(options)) != null ? _d : options, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
-    if (props2.await instanceof Promise) {
-      (0, import_vue.nextTick)(async () => {
-        getState.replaceData(await props2.await);
-      });
-    }
-    if (props2.defer instanceof Promise) {
-      (0, import_vue.nextTick)(async () => {
-        var _a2;
-        rendered.value = (_a2 = await props2.defer) != null ? _a2 : true;
-      });
-    } else {
-      rendered.value = true;
-    }
-    if (context.attrs["onUpdate:modelState"]) {
-      const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
-      (0, import_vue.onMounted)(() => {
+    const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
+    return ($vue) => {
+      var _a2, _b2;
+      if (props2.await instanceof Promise) {
+        (0, import_vue.nextTick)(async () => {
+          getState.replaceData(await props2.await);
+        });
+      }
+      if (props2.defer instanceof Promise) {
+        (0, import_vue.nextTick)(async () => {
+          var _a3;
+          rendered.value = (_a3 = await props2.defer) != null ? _a3 : true;
+        });
+      } else {
+        rendered.value = true;
+      }
+      if (context.attrs["onUpdate:modelState"]) {
+        const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
+          callback: context.attrs["onUpdate:modelState"]
+        } : (_a2 = context.attrs["onUpdate:modelState"]) != null ? _a2 : {};
         (0, import_vue.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
-          var _a2;
-          const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access({ parent, self }).beforeStateUpdate;
+          var _a3;
           const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
+          const beforeStateUpdate = (_a3 = config2.beforeStateUpdate) != null ? _a3 : access({ parent, self }).beforeStateUpdate;
           if (sync.value) {
             sync.value = false;
-          } else {
+          } else if (typeof config2.callback === "function") {
             config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
           }
         }, config2.options);
-      });
-    }
-    if (context.attrs["onUpdate:propsState"] || props2.sync) {
-      const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
-      (0, import_vue.onMounted)(() => {
+      }
+      if (context.attrs["onUpdate:propsState"] || props2.sync) {
+        const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
+          callback: context.attrs["onUpdate:propsState"]
+        } : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
         (0, import_vue.watch)(() => import_object_manager.default.on(props2.state).clone(), (after, before) => {
+          const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
           if (props2.sync && typeof config2.callback !== "function") {
             getState.replaceData(after);
           } else if (typeof config2.callback === "function") {
-            config2.callback({ before, after }, getState);
+            config2.callback(diff, getState);
           }
           sync.value = true;
         }, config2.options);
-      });
-    }
-    return ($vue) => {
+      }
       const setup2 = { $vue, options: parent };
       while (setup2.options) {
         Object.defineProperties(setup2.$vue, Object.assign({
@@ -344,6 +362,20 @@ function getProps(props2, param2) {
     return props3;
   }, {}));
 }
+function getReactiveViewComponent(component, options = {}) {
+  const model = (component2) => {
+    try {
+      return (component2.type || component2).props.hasOwnProperty("model");
+    } catch (e) {
+      return false;
+    }
+  };
+  const props2 = getProps(options, "setup");
+  const slots = typeof component === "function" ? component : () => {
+    return (component.type || component).setup ? (0, import_vue2.createVNode)(component, component.setup ? {} : props2) : component;
+  };
+  return model(component) ? (0, import_vue2.createVNode)(component, props2) : (0, import_vue2.createVNode)(ReactiveView_default, props2, slots);
+}
 function getDate(param1, param2) {
   var _a, _b;
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -419,6 +451,7 @@ function getSubscription() {
   access,
   getDate,
   getProps,
+  getReactiveViewComponent,
   getSubscription,
   safeRequest,
   setup

package/dist/index.mjs

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
 
 // src/index.ts
 import { formatInTimeZone } from "date-fns-tz";
+import { createVNode as createVNode2 } from "vue";
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -121,11 +122,11 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { h, ref, reactive, watch, nextTick, getCurrentInstance, onMounted } from "vue";
+import { h, ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.13";
+var version = "0.0.15";
 
 // src/ReactiveView.ts
 var props = {
@@ -165,7 +166,7 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _f;
+    var _a, _b, _c, _d, _e;
     const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? h(
@@ -178,14 +179,17 @@ var ReactiveView_default = {
           textAlign: "center"
         }
       }, context.attrs), `${props2.modelName}: ${name}@${version}`);
-      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
+      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { vue, options: options2, props: props2, context })) != null ? _c2 : vnode;
     };
     const isValid = ref(false);
+    const sync = ref(false);
+    const rendered = ref(false);
+    const component = ref((_a = getCurrentInstance()) == null ? void 0 : _a.proxy);
     const defaultData = props2.getDefaultData(
-      Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
+      Array.isArray(props2.state) ? (_b = props2.defaultData) != null ? _b : [] : (_c = props2.defaultData) != null ? _c : {}
     );
-    const defaultType = Array.isArray(defaultData) ? [] : {};
-    const state = reactive(DataManager.transform(props2.await ? defaultType : (_c = props2.state) != null ? _c : defaultType));
+    const type = Array.isArray(defaultData) ? [] : {};
+    const state = reactive(DataManager.transform(props2.await ? type : (_d = props2.state) != null ? _d : type));
     const config = {
       defaultData,
       data: state,
@@ -194,56 +198,69 @@ var ReactiveView_default = {
       notifications: props2.notifications,
       subscriptions: props2.subscriptions
     };
-    const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config);
-    const sync = ref(false);
-    const rendered = ref(false);
+    const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config), {
+      get(target, property, receiver) {
+        var _a2, _b2;
+        const beforeSetData = (_b2 = (_a2 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a2.beforeSetData) != null ? _b2 : access(component).beforeSetData;
+        if (["setData", "replaceData"].includes(property) && typeof beforeSetData === "function") {
+          return (...params) => {
+            const type2 = Array.isArray(defaultData) ? [] : {};
+            beforeSetData(ObjectManager.on(type2).set(...params).get(), target);
+          };
+        } else {
+          return Reflect.get(target, property, receiver);
+        }
+      }
+    });
     const options = {
-      parent: { self: getCurrentInstance().proxy },
-      self: { template, isValid, getState }
+      parent: { self: component },
+      self: { template, getState, isValid }
     };
-    const _e = (_d = props2.setup(options)) != null ? _d : options, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
-    if (props2.await instanceof Promise) {
-      nextTick(async () => {
-        getState.replaceData(await props2.await);
-      });
-    }
-    if (props2.defer instanceof Promise) {
-      nextTick(async () => {
-        var _a2;
-        rendered.value = (_a2 = await props2.defer) != null ? _a2 : true;
-      });
-    } else {
-      rendered.value = true;
-    }
-    if (context.attrs["onUpdate:modelState"]) {
-      const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
-      onMounted(() => {
+    const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
+    return ($vue) => {
+      var _a2, _b2;
+      if (props2.await instanceof Promise) {
+        nextTick(async () => {
+          getState.replaceData(await props2.await);
+        });
+      }
+      if (props2.defer instanceof Promise) {
+        nextTick(async () => {
+          var _a3;
+          rendered.value = (_a3 = await props2.defer) != null ? _a3 : true;
+        });
+      } else {
+        rendered.value = true;
+      }
+      if (context.attrs["onUpdate:modelState"]) {
+        const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
+          callback: context.attrs["onUpdate:modelState"]
+        } : (_a2 = context.attrs["onUpdate:modelState"]) != null ? _a2 : {};
         watch(() => ObjectManager.on(state).clone(), (after, before) => {
-          var _a2;
-          const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access({ parent, self }).beforeStateUpdate;
+          var _a3;
           const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
+          const beforeStateUpdate = (_a3 = config2.beforeStateUpdate) != null ? _a3 : access({ parent, self }).beforeStateUpdate;
           if (sync.value) {
             sync.value = false;
-          } else {
+          } else if (typeof config2.callback === "function") {
             config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
           }
         }, config2.options);
-      });
-    }
-    if (context.attrs["onUpdate:propsState"] || props2.sync) {
-      const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
-      onMounted(() => {
+      }
+      if (context.attrs["onUpdate:propsState"] || props2.sync) {
+        const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? {
+          callback: context.attrs["onUpdate:propsState"]
+        } : (_b2 = context.attrs["onUpdate:propsState"]) != null ? _b2 : {};
         watch(() => ObjectManager.on(props2.state).clone(), (after, before) => {
+          const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
           if (props2.sync && typeof config2.callback !== "function") {
             getState.replaceData(after);
           } else if (typeof config2.callback === "function") {
-            config2.callback({ before, after }, getState);
+            config2.callback(diff, getState);
           }
           sync.value = true;
         }, config2.options);
-      });
-    }
-    return ($vue) => {
+      }
       const setup2 = { $vue, options: parent };
       while (setup2.options) {
         Object.defineProperties(setup2.$vue, Object.assign({
@@ -307,6 +324,20 @@ function getProps(props2, param2) {
     return props3;
   }, {}));
 }
+function getReactiveViewComponent(component, options = {}) {
+  const model = (component2) => {
+    try {
+      return (component2.type || component2).props.hasOwnProperty("model");
+    } catch (e) {
+      return false;
+    }
+  };
+  const props2 = getProps(options, "setup");
+  const slots = typeof component === "function" ? component : () => {
+    return (component.type || component).setup ? createVNode2(component, component.setup ? {} : props2) : component;
+  };
+  return model(component) ? createVNode2(component, props2) : createVNode2(ReactiveView_default, props2, slots);
+}
 function getDate(param1, param2) {
   var _a, _b;
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -382,6 +413,7 @@ export {
   src_default as default,
   getDate,
   getProps,
+  getReactiveViewComponent,
   getSubscription,
   safeRequest,
   setup

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.13",
+    "version": "0.0.15",
     "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",