@razaman2/reactive-view 0.0.8 → 0.0.10

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 razamvmt
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021 razamvmt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1 +1 @@
-# reactive-view
+# reactive-view

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
+import { SetupContext, ComponentPublicInstance, WatchOptions, UnwrapRef } from 'vue';
 
 type SubscriptionItem = {
     name: string;
@@ -36,6 +36,7 @@ declare const _default: {
         model: {};
         state: {};
         await: {};
+        defer: {};
         getDefaultData: {
             type: FunctionConstructor;
             default: (data?: {}) => {};
@@ -59,6 +60,11 @@ declare const _default: {
     setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
 };
 
+type StateUpdate = {
+    callback: Function;
+    beforeStateUpdate?: Function;
+    options?: WatchOptions;
+};
 type Accessible = {
     parent: {
         self: Record<string | symbol, any>;
@@ -72,6 +78,7 @@ type PropOptions = {
     include: Record<string, any>;
 };
 type PropExclusions = Array<string> | string;
+
 declare function safeRequest(request: {
     try: () => Promise<any> | any;
     catch?: ((error: any) => Promise<any> | any) | false;
@@ -106,4 +113,4 @@ declare function getSubscription(): {
     subscription: Subscription;
 };
 
-export { access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
+export { type StateUpdate, access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { SetupContext, ComponentPublicInstance, UnwrapRef } from 'vue';
+import { SetupContext, ComponentPublicInstance, WatchOptions, UnwrapRef } from 'vue';
 
 type SubscriptionItem = {
     name: string;
@@ -36,6 +36,7 @@ declare const _default: {
         model: {};
         state: {};
         await: {};
+        defer: {};
         getDefaultData: {
             type: FunctionConstructor;
             default: (data?: {}) => {};
@@ -59,6 +60,11 @@ declare const _default: {
     setup(props: Record<string, any>, context: SetupContext): ($vue: ComponentPublicInstance & any) => any;
 };
 
+type StateUpdate = {
+    callback: Function;
+    beforeStateUpdate?: Function;
+    options?: WatchOptions;
+};
 type Accessible = {
     parent: {
         self: Record<string | symbol, any>;
@@ -72,6 +78,7 @@ type PropOptions = {
     include: Record<string, any>;
 };
 type PropExclusions = Array<string> | string;
+
 declare function safeRequest(request: {
     try: () => Promise<any> | any;
     catch?: ((error: any) => Promise<any> | any) | false;
@@ -106,4 +113,4 @@ declare function getSubscription(): {
     subscription: Subscription;
 };
 
-export { access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };
+export { type StateUpdate, access, _default as default, getDate, getProps, getSubscription, safeRequest, setup };

package/dist/index.js

@@ -158,13 +158,13 @@ var Subscriptions = _Subscriptions;
 // src/ReactiveView.ts
 var import_object_manager = __toESM(require("@razaman2/object-manager"));
 var import_data_manager = __toESM(require("@razaman2/data-manager"));
+var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.8";
+var version = "0.0.10";
 
 // src/ReactiveView.ts
-var import_vue = require("vue");
 var props = {
   notifications: Object,
   subscriptions: Object,
@@ -172,6 +172,7 @@ var props = {
   model: {},
   state: {},
   await: {},
+  defer: {},
   getDefaultData: {
     type: Function,
     default: (data = {}) => data
@@ -201,7 +202,7 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _e, _g;
+    var _a, _b, _c, _d, _f;
     const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? (0, import_vue.h)(
@@ -217,6 +218,7 @@ var ReactiveView_default = {
       return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
     };
     const isValid = (0, import_vue.ref)(false);
+    const isRendered = (0, import_vue.ref)(false);
     const defaultData = props2.getDefaultData(
       Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
     );
@@ -233,41 +235,48 @@ var ReactiveView_default = {
     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 options = {
-      parent: { self: (_d = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _d.proxy },
+      parent: { self: (0, import_vue.getCurrentInstance)().proxy },
       self: { template, isValid, getState }
     };
-    const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
+    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;
+        isRendered.value = (_a2 = await props2.defer) != null ? _a2 : 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.watch)(() => import_object_manager.default.on(state).clone(), (after, before) => {
-        var _a2;
-        const transform = (_a2 = config2.transform) != null ? _a2 : access({ parent, self }).$transform;
-        const diff = {
-          before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
-          after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
-        };
-        if (sync.value) {
-          sync.value = false;
-        } else {
-          config2.callback(transform ? transform(diff) : diff, getState);
-        }
-      }, config2.options);
+      (0, import_vue.onMounted)(() => {
+        (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;
+          const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
+          if (sync.value) {
+            sync.value = false;
+          } else {
+            config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
+          }
+        }, config2.options);
+      });
     }
     if (context.attrs["onUpdate:propsState"] || props2.sync) {
-      const config2 = (_g = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _g : {};
-      (0, import_vue.watch)(() => props2.state, (after, before) => {
-        if (props2.sync && typeof config2.callback !== "function") {
-          getState.replaceData(after);
-        } else if (typeof config2.callback === "function") {
-          config2.callback({ before, after }, getState);
-        }
-        sync.value = true;
-      }, config2.options);
+      const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
+      (0, import_vue.onMounted)(() => {
+        (0, import_vue.watch)(() => props2.state, (after, before) => {
+          if (props2.sync && typeof config2.callback !== "function") {
+            getState.replaceData(after);
+          } else if (typeof config2.callback === "function") {
+            config2.callback({ before, after }, getState);
+          }
+          sync.value = true;
+        }, config2.options);
+      });
     }
     return ($vue) => {
       const setup2 = { $vue, options: parent };
@@ -281,7 +290,9 @@ var ReactiveView_default = {
         setup2.options = setup2.options.parent;
         setup2.$vue = setup2.$vue.$parent;
       }
-      return access($vue).template($vue, { parent, self });
+      if (isRendered.value) {
+        return access($vue).template($vue, { parent, self });
+      }
     };
   }
 };

package/dist/index.mjs

@@ -121,13 +121,13 @@ 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";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.8";
+var version = "0.0.10";
 
 // src/ReactiveView.ts
-import { h, ref, reactive, watch, nextTick, getCurrentInstance } from "vue";
 var props = {
   notifications: Object,
   subscriptions: Object,
@@ -135,6 +135,7 @@ var props = {
   model: {},
   state: {},
   await: {},
+  defer: {},
   getDefaultData: {
     type: Function,
     default: (data = {}) => data
@@ -164,7 +165,7 @@ var setup = {
 var ReactiveView_default = {
   props: __spreadValues(__spreadValues({}, setup), props),
   setup(props2, context) {
-    var _a, _b, _c, _d, _e, _g;
+    var _a, _b, _c, _d, _f;
     const template = (vue, options2) => {
       var _a2, _b2, _c2;
       const vnode = context.slots.default ? h(
@@ -180,6 +181,7 @@ var ReactiveView_default = {
       return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, { $vue: vue, vnode })) != null ? _c2 : vnode;
     };
     const isValid = ref(false);
+    const isRendered = ref(false);
     const defaultData = props2.getDefaultData(
       Array.isArray(props2.state) ? (_a = props2.defaultData) != null ? _a : [] : (_b = props2.defaultData) != null ? _b : {}
     );
@@ -196,41 +198,48 @@ var ReactiveView_default = {
     const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config);
     const sync = ref(false);
     const options = {
-      parent: { self: (_d = getCurrentInstance()) == null ? void 0 : _d.proxy },
+      parent: { self: getCurrentInstance().proxy },
       self: { template, isValid, getState }
     };
-    const _f = (_e = props2.setup(options)) != null ? _e : options, { parent = {}, self = {} } = _f, rest = __objRest(_f, ["parent", "self"]);
+    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;
+        isRendered.value = (_a2 = await props2.defer) != null ? _a2 : true;
+      });
+    }
     if (context.attrs["onUpdate:modelState"]) {
       const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
-      watch(() => ObjectManager.on(state).clone(), (after, before) => {
-        var _a2;
-        const transform = (_a2 = config2.transform) != null ? _a2 : access({ parent, self }).$transform;
-        const diff = {
-          before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
-          after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
-        };
-        if (sync.value) {
-          sync.value = false;
-        } else {
-          config2.callback(transform ? transform(diff) : diff, getState);
-        }
-      }, config2.options);
+      onMounted(() => {
+        watch(() => ObjectManager.on(state).clone(), (after, before) => {
+          var _a2;
+          const beforeStateUpdate = (_a2 = config2.beforeStateUpdate) != null ? _a2 : access({ parent, self }).beforeStateUpdate;
+          const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
+          if (sync.value) {
+            sync.value = false;
+          } else {
+            config2.callback(beforeStateUpdate ? beforeStateUpdate(diff) : diff, getState);
+          }
+        }, config2.options);
+      });
     }
     if (context.attrs["onUpdate:propsState"] || props2.sync) {
-      const config2 = (_g = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _g : {};
-      watch(() => props2.state, (after, before) => {
-        if (props2.sync && typeof config2.callback !== "function") {
-          getState.replaceData(after);
-        } else if (typeof config2.callback === "function") {
-          config2.callback({ before, after }, getState);
-        }
-        sync.value = true;
-      }, config2.options);
+      const config2 = (_f = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"]) != null ? _f : {};
+      onMounted(() => {
+        watch(() => props2.state, (after, before) => {
+          if (props2.sync && typeof config2.callback !== "function") {
+            getState.replaceData(after);
+          } else if (typeof config2.callback === "function") {
+            config2.callback({ before, after }, getState);
+          }
+          sync.value = true;
+        }, config2.options);
+      });
     }
     return ($vue) => {
       const setup2 = { $vue, options: parent };
@@ -244,7 +253,9 @@ var ReactiveView_default = {
         setup2.options = setup2.options.parent;
         setup2.$vue = setup2.$vue.$parent;
       }
-      return access($vue).template($vue, { parent, self });
+      if (isRendered.value) {
+        return access($vue).template($vue, { parent, self });
+      }
     };
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@razaman2/reactive-view",
-    "version": "0.0.8",
+    "version": "0.0.10",
     "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",
@@ -8,7 +8,8 @@
     "scripts": {
         "prepublishOnly": "npm run build",
         "build": "tsup src/index.ts --format cjs,esm --dts",
-        "lint": "tsc"
+        "lint": "tsc",
+        "test": "cd tests/vue-ts && npm run dev"
     },
     "keywords": [
         "vue",
@@ -19,28 +20,24 @@
     "author": "razaman2",
     "license": "MIT",
     "dependencies": {
-        "@razaman2/collection-proxy": "^0.0.11",
-        "@razaman2/data-manager": "^3.2.8",
+        "@razaman2/collection-proxy": "^0.0.29",
+        "@razaman2/data-manager": "^3.2.9",
         "@razaman2/object-manager": "^3.3.9",
         "date-fns": "^3.6.0",
         "date-fns-tz": "^3.1.3",
-        "uuid": "^9.0.1",
-        "vue": "^3.4.27"
+        "uuid": "^10.0.0",
+        "vue": "^3.5.3"
     },
     "devDependencies": {
-        "@types/uuid": "^9.0.8",
-        "tsup": "^8.0.2",
-        "typescript": "^5.4.5",
-        "vitest": "^1.6.0"
+        "@types/uuid": "^10.0.0",
+        "tsup": "^8.2.4",
+        "typescript": "^5.5.4",
+        "vitest": "^2.0.5"
     },
     "publishConfig": {
         "access": "public"
     },
     "files": [
         "dist"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/razaman2/reactive-view.git"
-    }
+    ]
 }