@razaman2/reactive-view 0.0.22 → 0.0.24

package/dist/index.d.mts

@@ -41,10 +41,7 @@ declare const setup: {
 };
 declare const _default: {
     props: {
-        setup: {
-            type: FunctionConstructor;
-            default: (parent?: {}) => {};
-        };
+        setup: {};
         ReactiveView: {
             default: boolean;
         };
@@ -72,6 +69,10 @@ declare const _default: {
             type: StringConstructor;
             default: string;
         };
+        debug: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     };
     setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
 };

package/dist/index.d.ts

@@ -41,10 +41,7 @@ declare const setup: {
 };
 declare const _default: {
     props: {
-        setup: {
-            type: FunctionConstructor;
-            default: (parent?: {}) => {};
-        };
+        setup: {};
         ReactiveView: {
             default: boolean;
         };
@@ -72,6 +69,10 @@ declare const _default: {
             type: StringConstructor;
             default: string;
         };
+        debug: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     };
     setup(props: Record<string, any>, context: SetupContext): (vue: ComponentPublicInstance) => any;
 };

package/dist/index.js

@@ -159,7 +159,7 @@ var import_vue = require("vue");
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.22";
+var version = "0.0.24";
 
 // src/ReactiveView.ts
 var setup = {
@@ -168,7 +168,7 @@ var setup = {
 };
 var ReactiveView_default = {
   props: {
-    setup,
+    setup: {},
     ReactiveView: {
       default: true
     },
@@ -197,33 +197,37 @@ var ReactiveView_default = {
     modelName: {
       type: String,
       default: "ReactiveView"
+    },
+    debug: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const template = (vue, component2) => {
-      var _a2, _b2, _c2;
-      const params = { vue, component: component2, props, context };
-      const vnode = context.slots.default ? (0, import_vue.createVNode)(
+    var _a, _b, _c, _d, _e, _f, _g;
+    const template = (component2, vue) => {
+      return context.slots.default ? (0, import_vue.createVNode)(
         "div",
         context.attrs,
-        context.slots.default(params)
+        context.slots.default({ vue, component: component2, props, context })
       ) : (0, import_vue.createVNode)("div", __spreadValues({
         style: {
           color: "red",
           textAlign: "center"
         }
       }, context.attrs), `${props.modelName}: ${name}@${version}`);
-      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, params)) != null ? _c2 : vnode;
     };
     const isValid = (0, import_vue.ref)(false);
     const ready = (0, import_vue.ref)(false);
     const instance = (0, import_vue.getCurrentInstance)();
     const deferred = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
-    const state = typeof props.data === "function" ? props.data() : props.data;
-    const isAsyncData = state instanceof Promise;
-    if (isAsyncData && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
-      throw new Error("[ReactiveView]: defaultData is required for async data.");
+    const data = typeof props.data === "function" ? props.data() : props.data;
+    const async = data instanceof Promise;
+    if (props.debug) {
+      console.log("[ReactiveView]:", { props, context, isValid, ready, instance, deferred, data, async });
+    }
+    if (async && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
+      console.error("[ReactiveView]: defaultData is required for async data.");
     }
     if (props.loading && !props.defer) {
       console.warn("[ReactiveView]: loading prop should be used with defer prop.");
@@ -232,14 +236,15 @@ var ReactiveView_default = {
       ((_b = instance.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? instance.vnode.props.defaultData : typeof ((_c = instance.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(instance.vnode.props.data) ? [] : {} : ((_d = instance.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = instance.vnode.props) == null ? void 0 : _e.data : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
-    const data = isAsyncData ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? state : datatype;
     const config = {
-      name: props.modelName,
+      data: (0, import_vue.reactive)(
+        import_object_manager.default.on(async ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? data : datatype).clone()
+      ),
       defaultData: import_object_manager.default.on(defaultData).clone(),
-      data: (0, import_vue.reactive)(import_object_manager.default.on(data).clone()),
       notifications: props.notifications,
       subscriptions: props.subscriptions,
-      logging: props.logging
+      logging: props.logging,
+      name: props.modelName
     };
     const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new import_data_manager.default(config), {
       get(target, key, receiver) {
@@ -248,7 +253,9 @@ var ReactiveView_default = {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              beforeSetData(import_object_manager.default.on(datatype).set(...params).get(), target);
+              const after = import_object_manager.default.on(datatype).set(...params).get();
+              const before = target.getData();
+              beforeSetData({ before, after }, target);
             } else {
               target[key](...params);
             }
@@ -259,12 +266,25 @@ var ReactiveView_default = {
         }
       }
     });
-    if (isAsyncData) {
-      (0, import_vue.nextTick)(async () => {
-        model.replaceData(await state);
-      });
-    }
-    (0, import_vue.nextTick)(async () => {
+    const watchDataProp = (dataProp) => {
+      var _a2;
+      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
+        callback: context.attrs["onUpdate:data"]
+      } : (_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {};
+      (0, import_vue.watch)(typeof dataProp === "function" || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
+        var _a3;
+        const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
+        if (typeof config2.callback === "function") {
+          model.replaceData((_a3 = config2.callback(diff, model)) != null ? _a3 : after);
+        } else {
+          model.replaceData(after);
+        }
+      }, config2.options);
+    };
+    setTimeout(async () => {
+      watchDataProp(await data);
+    });
+    setTimeout(async () => {
       var _a2;
       ready.value = (_a2 = await deferred.value) != null ? _a2 : true;
     });
@@ -277,29 +297,32 @@ var ReactiveView_default = {
         config2.callback(diff, model);
       }, config2.options);
     }
-    if ((_h = context.attrs["onUpdate:data"]) != null ? _h : true) {
-      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
-        callback: context.attrs["onUpdate:data"]
-      } : (_i = context.attrs["onUpdate:data"]) != null ? _i : {};
-      (0, import_vue.watch)(async () => typeof props.data === "function" ? await props.data() : await props.data, async (after, before) => {
-        const diff = { before: import_object_manager.default.on(await before).get(), after: import_object_manager.default.on(await after).get() };
-        if (typeof config2.callback === "function") {
-          config2.callback(diff, model);
-        } else {
-          model.replaceData(await after);
-        }
-      }, config2.options);
-    }
     const component = (0, import_vue.ref)({ parent: { self: instance.proxy }, self: { template, model, isValid } });
-    if (typeof props.setup === "function") {
-      component.value = props.setup(component.value, component);
-    }
-    if (props.instance) {
-      props.instance.value = component.value;
+    if (access(component).ReactiveView) {
+      component.value = [access(component)].reduce((options, parent) => {
+        var _a2;
+        while (parent) {
+          if (typeof parent.setup === "function") {
+            options = { parent: options, self: (_a2 = parent.setup(component, options)) != null ? _a2 : {} };
+            console.log("log options:", options);
+            if (access(parent.$parent).ReactiveView) {
+              break;
+            } else {
+              parent = parent.$parent;
+            }
+          } else {
+            break;
+          }
+        }
+        return options;
+      }, component.value);
     }
+    console.log("component before:", component.value);
+    props.instance.value = component.value;
+    console.log("component after:", component.value, props.instance.value);
     return (vue) => {
       if (ready.value) {
-        return access(component).template(vue, component);
+        return access(component).template(component, vue);
       } else {
         return props.loading;
       }
@@ -394,7 +417,11 @@ function access(view = {}, alternative) {
             component.tree = "parent" in component.tree && component.tree.parent;
           }
         } while (component.tree);
-        return alternative;
+        try {
+          return new alternative();
+        } catch (e) {
+          return alternative;
+        }
       }
     });
   };

package/dist/index.mjs

@@ -110,16 +110,16 @@ _Subscriptions.subscriptions = _Subscriptions.create();
 var Subscriptions = _Subscriptions;
 
 // src/index.ts
-import { createVNode as createVNode2, isRef } from "vue";
+import { createVNode as createVNode2, isRef as isRef2 } from "vue";
 
 // src/ReactiveView.ts
 import ObjectManager from "@razaman2/object-manager";
 import DataManager from "@razaman2/data-manager";
-import { ref, reactive, watch, nextTick, createVNode, getCurrentInstance } from "vue";
+import { ref, reactive, watch, isRef, isReactive, createVNode, getCurrentInstance } from "vue";
 
 // package.json
 var name = "@razaman2/reactive-view";
-var version = "0.0.22";
+var version = "0.0.24";
 
 // src/ReactiveView.ts
 var setup = {
@@ -128,7 +128,7 @@ var setup = {
 };
 var ReactiveView_default = {
   props: {
-    setup,
+    setup: {},
     ReactiveView: {
       default: true
     },
@@ -157,33 +157,37 @@ var ReactiveView_default = {
     modelName: {
       type: String,
       default: "ReactiveView"
+    },
+    debug: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const template = (vue, component2) => {
-      var _a2, _b2, _c2;
-      const params = { vue, component: component2, props, context };
-      const vnode = context.slots.default ? createVNode(
+    var _a, _b, _c, _d, _e, _f, _g;
+    const template = (component2, vue) => {
+      return context.slots.default ? createVNode(
         "div",
         context.attrs,
-        context.slots.default(params)
+        context.slots.default({ vue, component: component2, props, context })
       ) : createVNode("div", __spreadValues({
         style: {
           color: "red",
           textAlign: "center"
         }
       }, context.attrs), `${props.modelName}: ${name}@${version}`);
-      return (_c2 = (_b2 = (_a2 = context.slots).template) == null ? void 0 : _b2.call(_a2, params)) != null ? _c2 : vnode;
     };
     const isValid = ref(false);
     const ready = ref(false);
     const instance = getCurrentInstance();
     const deferred = ref(typeof props.defer === "function" ? props.defer() : props.defer);
-    const state = typeof props.data === "function" ? props.data() : props.data;
-    const isAsyncData = state instanceof Promise;
-    if (isAsyncData && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
-      throw new Error("[ReactiveView]: defaultData is required for async data.");
+    const data = typeof props.data === "function" ? props.data() : props.data;
+    const async = data instanceof Promise;
+    if (props.debug) {
+      console.log("[ReactiveView]:", { props, context, isValid, ready, instance, deferred, data, async });
+    }
+    if (async && !((_a = instance.vnode.props) == null ? void 0 : _a.hasOwnProperty("defaultData"))) {
+      console.error("[ReactiveView]: defaultData is required for async data.");
     }
     if (props.loading && !props.defer) {
       console.warn("[ReactiveView]: loading prop should be used with defer prop.");
@@ -192,14 +196,15 @@ var ReactiveView_default = {
       ((_b = instance.vnode.props) == null ? void 0 : _b.hasOwnProperty("defaultData")) ? instance.vnode.props.defaultData : typeof ((_c = instance.vnode.props) == null ? void 0 : _c.data) === "object" ? Array.isArray(instance.vnode.props.data) ? [] : {} : ((_d = instance.vnode.props) == null ? void 0 : _d.hasOwnProperty("data")) ? (_e = instance.vnode.props) == null ? void 0 : _e.data : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
-    const data = isAsyncData ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? state : datatype;
     const config = {
-      name: props.modelName,
+      data: reactive(
+        ObjectManager.on(async ? datatype : ((_f = instance.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? data : datatype).clone()
+      ),
       defaultData: ObjectManager.on(defaultData).clone(),
-      data: reactive(ObjectManager.on(data).clone()),
       notifications: props.notifications,
       subscriptions: props.subscriptions,
-      logging: props.logging
+      logging: props.logging,
+      name: props.modelName
     };
     const model = new Proxy(props.model ? typeof props.model === "function" ? props.model(config) : props.model : new DataManager(config), {
       get(target, key, receiver) {
@@ -208,7 +213,9 @@ var ReactiveView_default = {
             var _a2;
             const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
             if (typeof beforeSetData === "function") {
-              beforeSetData(ObjectManager.on(datatype).set(...params).get(), target);
+              const after = ObjectManager.on(datatype).set(...params).get();
+              const before = target.getData();
+              beforeSetData({ before, after }, target);
             } else {
               target[key](...params);
             }
@@ -219,12 +226,25 @@ var ReactiveView_default = {
         }
       }
     });
-    if (isAsyncData) {
-      nextTick(async () => {
-        model.replaceData(await state);
-      });
-    }
-    nextTick(async () => {
+    const watchDataProp = (dataProp) => {
+      var _a2;
+      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
+        callback: context.attrs["onUpdate:data"]
+      } : (_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {};
+      watch(typeof dataProp === "function" || isRef(dataProp) || isReactive(dataProp) ? dataProp : () => dataProp, (after, before) => {
+        var _a3;
+        const diff = { before: ObjectManager.on(before).get(), after: ObjectManager.on(after).get() };
+        if (typeof config2.callback === "function") {
+          model.replaceData((_a3 = config2.callback(diff, model)) != null ? _a3 : after);
+        } else {
+          model.replaceData(after);
+        }
+      }, config2.options);
+    };
+    setTimeout(async () => {
+      watchDataProp(await data);
+    });
+    setTimeout(async () => {
       var _a2;
       ready.value = (_a2 = await deferred.value) != null ? _a2 : true;
     });
@@ -237,29 +257,32 @@ var ReactiveView_default = {
         config2.callback(diff, model);
       }, config2.options);
     }
-    if ((_h = context.attrs["onUpdate:data"]) != null ? _h : true) {
-      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? {
-        callback: context.attrs["onUpdate:data"]
-      } : (_i = context.attrs["onUpdate:data"]) != null ? _i : {};
-      watch(async () => typeof props.data === "function" ? await props.data() : await props.data, async (after, before) => {
-        const diff = { before: ObjectManager.on(await before).get(), after: ObjectManager.on(await after).get() };
-        if (typeof config2.callback === "function") {
-          config2.callback(diff, model);
-        } else {
-          model.replaceData(await after);
-        }
-      }, config2.options);
-    }
     const component = ref({ parent: { self: instance.proxy }, self: { template, model, isValid } });
-    if (typeof props.setup === "function") {
-      component.value = props.setup(component.value, component);
-    }
-    if (props.instance) {
-      props.instance.value = component.value;
+    if (access(component).ReactiveView) {
+      component.value = [access(component)].reduce((options, parent) => {
+        var _a2;
+        while (parent) {
+          if (typeof parent.setup === "function") {
+            options = { parent: options, self: (_a2 = parent.setup(component, options)) != null ? _a2 : {} };
+            console.log("log options:", options);
+            if (access(parent.$parent).ReactiveView) {
+              break;
+            } else {
+              parent = parent.$parent;
+            }
+          } else {
+            break;
+          }
+        }
+        return options;
+      }, component.value);
     }
+    console.log("component before:", component.value);
+    props.instance.value = component.value;
+    console.log("component after:", component.value, props.instance.value);
     return (vue) => {
       if (ready.value) {
-        return access(component).template(vue, component);
+        return access(component).template(component, vue);
       } else {
         return props.loading;
       }
@@ -354,13 +377,17 @@ function access(view = {}, alternative) {
             component.tree = "parent" in component.tree && component.tree.parent;
           }
         } while (component.tree);
-        return alternative;
+        try {
+          return new alternative();
+        } catch (e) {
+          return alternative;
+        }
       }
     });
   };
   try {
     const component = typeof view === "function" ? view() : view;
-    const ref2 = isRef(component) ? component.value : component;
+    const ref2 = isRef2(component) ? component.value : component;
     return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
   } catch (e) {
     return resolve(view);

package/package.json

@@ -1,45 +1,45 @@
-{
-    "name": "@razaman2/reactive-view",
-    "version": "0.0.22",
-    "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"
-    },
-    "keywords": [
-        "vue",
-        "vue-helper",
-        "reactive-view",
-        "vue-class-component",
-        "reactive-ui"
-    ],
-    "author": "razaman2",
-    "license": "MIT",
-    "dependencies": {
-        "@razaman2/data-manager": "^3.2.11",
-        "@razaman2/object-manager": "^3.4.2",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "uuid": "^11.1.0"
-    },
-    "peerDependencies": {
-        "vue": "^3.5.13"
-    },
-    "devDependencies": {
-        "@types/uuid": "^10.0.0",
-        "tsup": "^8.4.0",
-        "typescript": "^5.8.2",
-        "vitest": "^3.1.1"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.0.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"
+    },
+    "keywords": [
+        "vue",
+        "vue-helper",
+        "reactive-view",
+        "vue-class-component",
+        "reactive-ui"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.2.11",
+        "@razaman2/object-manager": "^3.4.2",
+        "date-fns": "^4.1.0",
+        "date-fns-tz": "^3.2.0",
+        "uuid": "^11.1.0"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.13"
+    },
+    "devDependencies": {
+        "@types/uuid": "^10.0.0",
+        "tsup": "^8.4.0",
+        "typescript": "^5.8.3",
+        "vitest": "^3.1.1"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ]
+}