@razaman2/reactive-view 0.0.13 → 0.0.14

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.14";
 
 // src/ReactiveView.ts
 var props = {
@@ -202,27 +204,29 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _f;
-    const template = (vue, options2) => {
+    var _a, _b, _c;
+    const template = (vue, options) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? (0, import_vue.h)(
         "div",
         context.attrs,
-        context.slots.default({ vue, options: options2, props: props2, context })
+        context.slots.default({ vue, options, props: props2, context })
       ) : (0, import_vue.h)("div", __spreadValues({
         style: {
           color: "red",
           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, 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 defaultData = props2.getDefaultData(
       Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
     );
-    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 : (_c = props2.state) != null ? _c : type));
     const config = {
       defaultData,
       data: state,
@@ -231,56 +235,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 options = {
-      parent: { self: (0, import_vue.getCurrentInstance)().proxy },
-      self: { template, isValid, getState }
-    };
-    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;
+    return ($vue) => {
+      var _a2, _c2, _d;
+      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 _a3, _b3;
+          const beforeSetData = (_b3 = (_a3 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a3.beforeSetData) != null ? _b3 : access($vue).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);
+          }
+        }
       });
-    } 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)(() => {
+      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;
+      }
+      const options = {
+        parent: { self: $vue },
+        self: { template, getState, isValid }
+      };
+      const _b2 = (_a2 = props2.setup(options)) != null ? _a2 : options, { parent = {}, self = {} } = _b2, rest = __objRest(_b2, ["parent", "self"]);
+      if (context.attrs["onUpdate:modelState"]) {
+        const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
+          callback: context.attrs["onUpdate:modelState"]
+        } : (_c2 = context.attrs["onUpdate:modelState"]) != null ? _c2 : {};
         (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"]
+        } : (_d = context.attrs["onUpdate:propsState"]) != null ? _d : {};
         (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 +361,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 +450,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 } 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 } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.13";
+var version = "0.0.14";
 
 // src/ReactiveView.ts
 var props = {
@@ -165,27 +166,29 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _f;
-    const template = (vue, options2) => {
+    var _a, _b, _c;
+    const template = (vue, options) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? h(
         "div",
         context.attrs,
-        context.slots.default({ vue, options: options2, props: props2, context })
+        context.slots.default({ vue, options, props: props2, context })
       ) : h("div", __spreadValues({
         style: {
           color: "red",
           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, props: props2, context })) != null ? _c2 : vnode;
     };
     const isValid = ref(false);
+    const sync = ref(false);
+    const rendered = ref(false);
     const defaultData = props2.getDefaultData(
       Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
     );
-    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 : (_c = props2.state) != null ? _c : type));
     const config = {
       defaultData,
       data: state,
@@ -194,56 +197,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 options = {
-      parent: { self: getCurrentInstance().proxy },
-      self: { template, isValid, getState }
-    };
-    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;
+    return ($vue) => {
+      var _a2, _c2, _d;
+      const getState = new Proxy(props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config), {
+        get(target, property, receiver) {
+          var _a3, _b3;
+          const beforeSetData = (_b3 = (_a3 = context.attrs["onUpdate:modelState"]) == null ? void 0 : _a3.beforeSetData) != null ? _b3 : access($vue).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);
+          }
+        }
       });
-    } 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(() => {
+      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;
+      }
+      const options = {
+        parent: { self: $vue },
+        self: { template, getState, isValid }
+      };
+      const _b2 = (_a2 = props2.setup(options)) != null ? _a2 : options, { parent = {}, self = {} } = _b2, rest = __objRest(_b2, ["parent", "self"]);
+      if (context.attrs["onUpdate:modelState"]) {
+        const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? {
+          callback: context.attrs["onUpdate:modelState"]
+        } : (_c2 = context.attrs["onUpdate:modelState"]) != null ? _c2 : {};
         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"]
+        } : (_d = context.attrs["onUpdate:propsState"]) != null ? _d : {};
         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 +323,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 ? createVNode(component, component.setup ? {} : props2) : component;
+  };
+  return model(component) ? createVNode(component, props2) : createVNode(ReactiveView_default, props2, slots);
+}
 function getDate(param1, param2) {
   var _a, _b;
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -382,6 +412,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.14",
     "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",