@razaman2/reactive-view 0.0.34 → 0.1.0-beta.10

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -32,8 +35,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var __export = (target, all) => {
-  for (var name2 in all)
-    __defProp(target, name2, { get: all[name2], enumerable: true });
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -57,18 +60,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   MergeStyles: () => MergeStyles,
+  Prop: () => Prop,
   StyleParser: () => StyleParser,
   access: () => access,
+  dataPath: () => dataPath,
   default: () => index_default,
+  defineReactiveView: () => defineReactiveView,
   extendVnode: () => extendVnode,
+  getData: () => getData,
   getDate: () => getDate,
   getProps: () => getProps,
   getReactiveViewComponent: () => getReactiveViewComponent,
   safeRequest: () => safeRequest,
+  setData: () => setData,
   setup: () => setup,
+  showComponent: () => showComponent,
   useSubscription: () => useSubscription
 });
 module.exports = __toCommonJS(index_exports);
+var import_object_manager2 = __toESM(require("@razaman2/object-manager"));
 
 // src/Subscription.ts
 var Subscription = class _Subscription {
@@ -79,34 +89,34 @@ var Subscription = class _Subscription {
   static create() {
     return new _Subscription();
   }
-  subscribe(name2, handler, data) {
-    if (this.isNameAvailable(name2)) {
+  subscribe(name, handler, data) {
+    if (this.isNameAvailable(name)) {
       this.subscriptions.push({
-        name: name2,
+        name,
         handler
       });
-      this.data[name2] = data;
+      this.data[name] = data;
     }
     return this;
   }
-  replace(name2, handler, data) {
-    this.unsubscribe(name2);
-    return this.subscribe(name2, handler, data);
+  replace(name, handler, data) {
+    this.unsubscribe(name);
+    return this.subscribe(name, handler, data);
   }
   unsubscribe(param1) {
     if (!Array.isArray(param1)) {
       param1 = param1 ? [param1] : [];
     }
-    const log = (name2) => {
-      return console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+    const log = (name) => {
+      return console.log(`%cUnsubscribed From Subscription (${name})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
     };
     if (param1.length) {
-      param1.forEach((name2) => {
-        const subscription = this.find(name2);
+      param1.forEach((name) => {
+        const subscription = this.find(name);
         if (subscription) {
           subscription.handler();
           this.remove(subscription);
-          log(name2);
+          log(name);
         }
       });
     } else {
@@ -121,20 +131,20 @@ var Subscription = class _Subscription {
   size() {
     return this.subscriptions.length;
   }
-  hasSubscription(name2) {
-    return Boolean(this.find(name2));
+  hasSubscription(name) {
+    return Boolean(this.find(name));
   }
   remove(subscription) {
     this.subscriptions.splice(this.subscriptions.indexOf(subscription), 1);
   }
-  find(name2) {
+  find(name) {
     return this.subscriptions.find((subscription) => {
-      return subscription.name === name2;
+      return subscription.name === name;
     });
   }
-  isNameAvailable(name2) {
-    if (this.hasSubscription(name2)) {
-      throw new Error(`There is already a subscription called "${name2}".`);
+  isNameAvailable(name) {
+    if (this.hasSubscription(name)) {
+      throw new Error(`There is already a subscription called "${name}".`);
     } else {
       return true;
     }
@@ -142,12 +152,12 @@ var Subscription = class _Subscription {
   registrations() {
     return this.subscriptions;
   }
-  get(name2) {
-    const subscription = this.find(name2);
+  get(name) {
+    const subscription = this.find(name);
     if (subscription) {
       return subscription;
     } else {
-      throw new Error(`Subscription "${name2}" doesn't exist!`);
+      throw new Error(`Subscription "${name}" doesn't exist!`);
     }
   }
 };
@@ -167,8 +177,55 @@ 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.34";
+var version = "0.1.0-beta.10";
+var package_default = {
+  name: "@razaman2/reactive-view",
+  version,
+  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",
+    pr: "sh pr.sh"
+  },
+  keywords: [
+    "vue",
+    "vue-helper",
+    "reactive-view",
+    "vue-class-component",
+    "reactive-ui"
+  ],
+  author: "razaman2",
+  license: "MIT",
+  dependencies: {
+    "@razaman2/data-manager": "^3.3.8",
+    "@razaman2/event-emitter": "^2.1.1",
+    "@razaman2/object-manager": "^3.4.7",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "tailwind-merge": "^3.5.0",
+    uuid: "^13.0.0"
+  },
+  peerDependencies: {
+    vue: ">=3.0.0"
+  },
+  devDependencies: {
+    "@types/uuid": "^11.0.0",
+    tsup: "^8.5.1",
+    typescript: "^5.9.3",
+    vitest: "^4.1.2"
+  },
+  publishConfig: {
+    access: "public"
+  },
+  files: [
+    "dist"
+  ]
+};
 
 // src/ReactiveView.ts
 var setup = {
@@ -179,17 +236,16 @@ var setup = {
 var ReactiveView_default = {
   props: {
     setup: {},
+    beta: [Boolean, String],
     ReactiveView: {
       type: Boolean,
       default: true
     },
-    instance: {
-      default: (0, import_vue.ref)()
-    },
+    instance: { default: (0, import_vue.ref)() },
     notifications: Object,
     subscriptions: Object,
     beforeSetData: Function,
-    data: {},
+    data: { default: (0, import_vue.reactive)({}) },
     defaultData: {},
     getDefaultData: {
       type: Function,
@@ -209,142 +265,387 @@ var ReactiveView_default = {
     debug: {
       type: Boolean,
       default: false
-    }
+    },
+    state: { default: (0, import_vue.reactive)({}) }
   },
   setup(props, context) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const template = (component2, vue2) => {
-      return (0, import_vue.createVNode)(
-        "div",
-        context.slots.default ? context.attrs : __spreadValues({
-          style: { color: "red", textAlign: "center" }
-        }, context.attrs),
-        context.slots.default ? context.slots.default({ component: component2, vue: vue2, props, context }) : `${props.modelName}: ${name}@${version}`
-      );
+    var _a, _b, _c;
+    const subscriptions = [];
+    (0, import_vue.onBeforeUnmount)(() => subscriptions.forEach((subscription) => subscription()));
+    const diff = (before, after) => {
+      const changed = (0, import_vue.ref)(false);
+      const paths = Array.from(new Set(before.paths().concat(after.paths())));
+      const changes = paths.reduce((changes2, path) => {
+        if (before.get(path) !== after.get(path)) {
+          changes2.set(path, after.get(path));
+          changed.value = true;
+        }
+        return changes2;
+      }, import_object_manager.default.on({}));
+      return { before: before.get(), after: after.get(), changes: changes.get(), changed: changed.value };
+    };
+    const dataPath2 = (path) => {
+      try {
+        return context.attrs["data:path"](path);
+      } catch (e) {
+        return path;
+      }
+    };
+    const template = (component, vue2) => {
+      return (0, import_vue.createVNode)("div", context.slots.default ? context.attrs : __spreadValues({
+        style: { color: "red", textAlign: "center" }
+      }, context.attrs), context.slots.default ? context.slots.default({ component, vue: vue2, props, context }) : `${props.modelName}: ${package_default.name}@${package_default.version}`);
     };
     const isValid = (0, import_vue.ref)(false);
     const isReady = (0, import_vue.ref)(false);
-    const isFunctionData = ["Function"].includes(((_a = props.data) != null ? _a : {}).constructor.name);
-    const isAsyncFunctionData = ["AsyncFunction"].includes(((_b = props.data) != null ? _b : {}).constructor.name);
-    const isPromiseData = ["Promise"].includes(((_c = props.data) != null ? _c : {}).constructor.name) || isAsyncFunctionData;
     const defer = (0, import_vue.ref)(typeof props.defer === "function" ? props.defer() : props.defer);
+    const isFunctionData = ["Function"].includes((_a = props.data) == null ? void 0 : _a.constructor.name);
+    const isAsyncFunctionData = ["AsyncFunction"].includes((_b = props.data) == null ? void 0 : _b.constructor.name);
+    const isAsyncData = ["Promise"].includes((_c = props.data) == null ? void 0 : _c.constructor.name) || isAsyncFunctionData;
     const vue = (0, import_vue.getCurrentInstance)();
-    if (props.debug) {
-      console.log("[ReactiveView]:", { props, context, vue, defer, data: props.data, isValid, isReady, isFunctionData, isAsyncFunctionData, isPromiseData });
-    }
-    if ((isPromiseData || isFunctionData) && !("defaultData" in vue.vnode.props)) {
-      console.error("[ReactiveView]: defaultData is required for function or async data.");
-    }
     const defaultData = props.getDefaultData(
-      ((_d = vue.vnode.props) == null ? void 0 : _d.hasOwnProperty("defaultData")) ? vue.vnode.props.defaultData : ((_e = vue.vnode.props) == null ? void 0 : _e.hasOwnProperty("data")) ? Array.isArray(vue.vnode.props.data) ? [] : {} : {}
+      "defaultData" in vue.vnode.props ? vue.vnode.props.defaultData : "data" in vue.vnode.props ? Array.isArray((0, import_vue.unref)(vue.vnode.props.data)) ? [] : {} : {}
     );
     const datatype = Array.isArray(defaultData) ? [] : {};
-    const config = {
-      data: (0, import_vue.reactive)(import_object_manager.default.on(
-        isPromiseData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : ((_f = vue.vnode.props) == null ? void 0 : _f.hasOwnProperty("data")) ? props.data : datatype
-      ).clone()),
-      defaultData: import_object_manager.default.on(defaultData).clone(),
-      notifications: props.notifications,
-      subscriptions: props.subscriptions,
-      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) {
-        if (key === "setData" || key === "replaceData") {
-          return (...params) => {
-            var _a2;
-            const beforeSetData = (_a2 = access(component).beforeSetData) != null ? _a2 : props.beforeSetData;
-            if (typeof beforeSetData === "function") {
-              const after = import_object_manager.default.on(datatype).set(...params.length ? params : [defaultData]).get();
-              const before = target.getData();
-              beforeSetData({ before, after }, target);
+    const beta = () => {
+      var _a2;
+      const emit = (after, before) => {
+        if (vue && vue.vnode.el) {
+          const event = new CustomEvent("data:emit", {
+            bubbles: true,
+            // Key: allows it to travel up
+            composed: true,
+            // Key: allows it to cross Shadow DOM boundaries
+            detail: { before, after }
+            // Payload goes here
+          });
+          access(component).model.setData(after);
+          vue.vnode.el.dispatchEvent(event);
+        }
+      };
+      const proxy = (data) => {
+        return new Proxy(data, {
+          get(target, key, receiver) {
+            if (["setData", "replaceData"].includes(key.toString())) {
+              return (...params) => {
+                var _a3;
+                const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
+                if (typeof beforeSetData === "function") {
+                  const before = import_object_manager.default.on(target.getData());
+                  const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
+                  const diff2 = access(component).diff(before, after);
+                  if (beforeSetData(diff2, target)) {
+                    target[key](...params);
+                  }
+                } else {
+                  target[key](...params);
+                }
+                return target;
+              };
             } else {
-              target[key](...params);
+              return Reflect.get(target, key, receiver);
             }
-            return target;
-          };
+          }
+        });
+      };
+      const normalize = (data) => {
+        if ((0, import_vue.isRef)(data) || (0, import_vue.isReactive)(data)) {
+          return data;
+        } else if (isFunctionData || isAsyncData) {
+          return (0, import_vue.ref)(datatype);
         } else {
-          return Reflect.get(target, key, receiver);
+          const props2 = "data" in vue.vnode.props;
+          try {
+            if (["Array", "Object"].includes(data.constructor.name)) {
+              return (0, import_vue.ref)(data);
+            } else {
+              return (0, import_vue.ref)(props2 ? { "": data } : datatype);
+            }
+          } catch (e) {
+            return (0, import_vue.ref)(props2 ? { "": data } : datatype);
+          }
         }
-      }
-    });
-    const watchDataProp = (dataProp) => {
-      var _a2, _b2, _c2;
-      const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
-        callback: (_b2 = ((_a2 = context.attrs["onUpdate:data"]) != null ? _a2 : {}).callback) != null ? _b2 : context.attrs["data:callback"],
-        options: Object.assign({
-          immediate: context.attrs["data:immediate"],
-          deep: context.attrs["data:deep"],
-          once: context.attrs["data:once"]
-        }, ((_c2 = context.attrs["onUpdate:data"]) != null ? _c2 : {}).options)
       };
-      if (context.attrs["data:log"]) {
-        console.log(`[ReactiveView]:data`, { config: config2, dataProp });
+      const config = {
+        data: normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data),
+        defaultData: import_object_manager.default.on(defaultData).clone(),
+        notifications: props.notifications,
+        subscriptions: props.subscriptions,
+        name: props.modelName,
+        logging: props.logging
+      };
+      const model = props.model ? typeof props.model === "function" ? props.model(config) : props.model : import_data_manager.default.setConfig({ beforeGetData: (data) => (0, import_vue.isRef)(data) ? (0, import_vue.unref)(data) : data }, config);
+      const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, diff, emit, dataPath: dataPath2, model: proxy(model), isValid } });
+      if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
+        const config2 = {
+          callback: typeof context.attrs["onUpdate:model"] === "function" ? context.attrs["onUpdate:model"] : context.attrs["update:model"],
+          options: {
+            immediate: context.attrs["model:immediate"],
+            deep: context.attrs["model:deep"],
+            once: context.attrs["model:once"]
+          }
+        };
+        const source = () => import_object_manager.default.on(model.getData()).clone();
+        subscriptions.push((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));
       }
-      (0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
+      const track = (source, options = {}) => {
+        var _a3, _b2, _c2, _d, _e;
+        subscriptions.push((0, import_vue.watch)(source, async (after, before) => {
+          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, callback, before, after, props, context, component });
+          }
+          if (typeof callback === "function") {
+            callback(diff2, { component });
+          } else {
+            model.replaceData(after);
+          }
+        }, {
+          immediate: (_b2 = (_a3 = context.attrs["data:immediate"]) != null ? _a3 : options.immediate) != null ? _b2 : true,
+          deep: (_d = (_c2 = context.attrs["data:deep"]) != null ? _c2 : options.deep) != null ? _d : true,
+          once: (_e = context.attrs["data:once"]) != null ? _e : options.once
+        }));
+      };
+      setTimeout(async () => {
+        var _a3;
+        if (props.model !== false) {
+          if (isFunctionData || isAsyncData) {
+            if (!("defaultData" in vue.vnode.props)) {
+              console.warn(`${props.modelName}: defaultData is required for promise or function data.`, props.data);
+            }
+            const [data] = isAsyncData ? await Promise.all([
+              isAsyncFunctionData ? props.data() : props.data,
+              (_a3 = defer.value) != null ? _a3 : true
+            ]) : [props.data];
+            track(typeof data === "function" ? data : (() => data));
+          } else {
+            track((0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? props.data : () => props.data, { immediate: false });
+          }
+        }
+      });
+      setTimeout(async () => {
+        var _a3;
+        isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
+      });
+      component.value = [access(component)].reduce((options, parent) => {
         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, { component })) != null ? _a3 : after);
+        while (parent) {
+          if (typeof parent.setup === "function") {
+            options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
+            if (access(parent.$parent).ReactiveView) {
+              break;
+            } else {
+              parent = access(parent.$parent);
+            }
+          } else {
+            break;
+          }
+        }
+        return options;
+      }, component.value);
+      props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
+      return (vue2) => {
+        var _a3, _b2;
+        if (isReady.value) {
+          return access(component).template(component, vue2);
         } else {
-          model.replaceData(after);
+          return (_b2 = (_a3 = context.slots).loading) == null ? void 0 : _b2.call(_a3, { component });
         }
-      }, config2.options);
+      };
     };
-    setTimeout(async () => {
-      var _a2;
-      const [data] = await Promise.all([isAsyncFunctionData ? props.data() : props.data, (_a2 = defer.value) != null ? _a2 : true]);
-      watchDataProp(data);
-    });
-    setTimeout(async () => {
-      var _a2;
-      isReady.value = (_a2 = await defer.value) != null ? _a2 : true;
-    });
-    if (context.attrs["onUpdate:model"]) {
-      const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
-        callback: context.attrs["onUpdate:model"]
-      } : (_g = context.attrs["onUpdate:model"]) != null ? _g : {};
-      if (context.attrs["model:log"]) {
-        console.log(`[ReactiveView]:model`, { config: config2 });
+    const current = () => {
+      var _a2, _b2, _c2, _d;
+      const emit = (after, before) => {
+        if (vue && vue.vnode.el) {
+          const event = new CustomEvent("data:emit", {
+            bubbles: true,
+            // Key: allows it to travel up
+            composed: true,
+            // Key: allows it to cross Shadow DOM boundaries
+            detail: { before, after }
+            // Payload goes here
+          });
+          vue.vnode.el.dispatchEvent(event);
+        }
+      };
+      const normalize = (data) => {
+        if (props.debug) {
+          console.warn(`[ReactiveView]: using beta props data in [${props.modelName}] component`, { vue, data, defaultData, isRef: (0, import_vue.isRef)(data), isReactive: (0, import_vue.isReactive)(data) });
+        }
+        if ((0, import_vue.isReactive)(data)) {
+          return data;
+        } else {
+          if ((0, import_vue.isRef)(data) || isFunctionData || isAsyncData) {
+            return (0, import_vue.reactive)(datatype);
+          } else {
+            const props2 = "data" in vue.vnode.props;
+            try {
+              if (["Array", "Object"].includes(data.constructor.name)) {
+                return (0, import_vue.reactive)(props2 ? data : datatype);
+              } else {
+                return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
+              }
+            } catch (e) {
+              return (0, import_vue.reactive)(props2 ? { "": data } : datatype);
+            }
+          }
+        }
+      };
+      const config = {
+        data: props.beta ? normalize((_a2 = vue.vnode.props) == null ? void 0 : _a2.data) : (0, import_vue.reactive)(import_object_manager.default.on(
+          isAsyncData || isFunctionData || (0, import_vue.isRef)(props.data) || (0, import_vue.isReactive)(props.data) ? datatype : "data" in vue.vnode.props ? props.data : datatype
+        ).clone()),
+        defaultData: import_object_manager.default.on(defaultData).clone(),
+        notifications: props.notifications,
+        subscriptions: props.subscriptions,
+        name: props.modelName,
+        logging: props.logging
+      };
+      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) {
+          if (["setData", "replaceData"].includes(key.toString())) {
+            return (...params) => {
+              var _a3;
+              const beforeSetData = (_a3 = access(component).beforeSetData) != null ? _a3 : props.beforeSetData;
+              if (typeof beforeSetData === "function") {
+                const before = import_object_manager.default.on(target.getData());
+                const after = params.length ? import_object_manager.default.on(datatype).set(...params) : import_object_manager.default.on(datatype).set(defaultData);
+                if (beforeSetData(access(component).diff(before, after), target)) {
+                  target[key](...params);
+                }
+              } else {
+                target[key](...params);
+              }
+              return target;
+            };
+          } else {
+            return Reflect.get(target, key, receiver);
+          }
+        }
+      });
+      const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, diff, emit, dataPath: dataPath2, isValid } });
+      if (props.debug) {
+        console.warn("[ReactiveView]:", { props, context, vue, defer, config, model, component, datatype, defaultData, isValid, isReady, isFunctionData, isAsyncFunctionData, isAsyncData });
       }
-      (0, import_vue.watch)(() => model.getData(), (after, before) => {
-        const diff = { before: import_object_manager.default.on(before).get(), after: import_object_manager.default.on(after).get() };
-        config2.callback(diff, { component });
-      }, config2.options);
-    }
-    const component = (0, import_vue.ref)({ parent: { self: vue.proxy }, self: { template, model, isValid } });
-    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 : {} };
-          if (access(parent.$parent).ReactiveView) {
-            break;
+      const watchDataProp = (dataProp) => {
+        var _a3, _b3, _c3, _d2;
+        const config2 = typeof context.attrs["onUpdate:data"] === "function" ? { callback: context.attrs["onUpdate:data"] } : {
+          callback: (_b3 = ((_a3 = context.attrs["onUpdate:data"]) != null ? _a3 : {}).callback) != null ? _b3 : context.attrs["data:callback"],
+          options: Object.assign(__spreadValues(__spreadValues({
+            deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true
+          }, context.attrs["data:immediate"] ? { immediate: context.attrs["data:immediate"] } : {}), context.attrs["data:once"] ? { once: context.attrs["data:once"] } : {}), ((_d2 = context.attrs["onUpdate:data"]) != null ? _d2 : {}).options)
+        };
+        if (context.attrs["data:log"]) {
+          console.warn(`[ReactiveView]:data`, { config: config2, dataProp });
+        }
+        subscriptions.push((0, import_vue.watch)(isFunctionData || (0, import_vue.isRef)(dataProp) || (0, import_vue.isReactive)(dataProp) ? dataProp : () => dataProp, (after, before) => {
+          var _a4;
+          if (typeof config2.callback === "function") {
+            model.replaceData((_a4 = config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component })) != null ? _a4 : after);
           } else {
-            parent = access(parent.$parent);
+            model.replaceData(after);
           }
-        } else {
-          break;
+        }, config2.options));
+      };
+      if (context.attrs["onUpdate:model"] || context.attrs["update:model"]) {
+        const config2 = typeof context.attrs["onUpdate:model"] === "function" ? {
+          callback: context.attrs["onUpdate:model"],
+          options: Object.assign(__spreadValues(__spreadValues({
+            deep: (_b2 = context.attrs["model:deep"]) != null ? _b2 : true
+          }, context.attrs["model:immediate"] ? { immediate: context.attrs["model:immediate"] } : {}), context.attrs["model:once"] ? { once: context.attrs["model:once"] } : {}), ((_c2 = context.attrs["onUpdate:model"]) != null ? _c2 : {}).options)
+        } : (_d = context.attrs["onUpdate:model"]) != null ? _d : {};
+        if (context.attrs["model:log"]) {
+          console.warn(`[ReactiveView]:model`, { config: config2 });
         }
+        subscriptions.push((0, import_vue.watch)(() => import_object_manager.default.on(model.getData()).clone(), (after, before) => {
+          config2.callback(access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after)), { component });
+        }, config2.options));
       }
-      return options;
-    }, component.value);
-    props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
-    return (vue2) => {
-      var _a2, _b2;
-      if (isReady.value) {
-        return access(component).template(component, vue2);
+      if (props.beta) {
+        const isRefData = (0, import_vue.isRef)(props.data);
+        if (isRefData || isFunctionData || isAsyncData) {
+          setTimeout(async () => {
+            var _a3, _b3, _c3;
+            const [data] = isAsyncData ? await Promise.all([
+              isAsyncFunctionData ? props.data() : props.data,
+              (_a3 = defer.value) != null ? _a3 : true
+            ]) : [props.data];
+            subscriptions.push((0, import_vue.watch)(isRefData ? data : isFunctionData ? data : typeof data === "function" ? data : () => data, (after, before) => {
+              var _a4;
+              if (before !== void 0 || after !== void 0) {
+                const callback = context.attrs["data:callback"];
+                if (typeof callback === "function") {
+                  const diff2 = access(component).diff(import_object_manager.default.on(before), import_object_manager.default.on(after));
+                  model.replaceData((_a4 = callback(diff2, { component })) != null ? _a4 : after);
+                } else {
+                  model.replaceData(after);
+                }
+              }
+            }, {
+              immediate: (_b3 = context.attrs["data:immediate"]) != null ? _b3 : true,
+              deep: (_c3 = context.attrs["data:deep"]) != null ? _c3 : true,
+              once: context.attrs["data:once"]
+            }));
+          });
+        }
       } else {
-        return (_b2 = (_a2 = context.slots).loading) == null ? void 0 : _b2.call(_a2, { component });
+        setTimeout(async () => {
+          var _a3;
+          const [data] = await Promise.all([
+            isAsyncFunctionData ? props.data() : props.data,
+            (_a3 = defer.value) != null ? _a3 : true
+          ]);
+          watchDataProp(data);
+        });
       }
+      setTimeout(async () => {
+        var _a3;
+        isReady.value = (_a3 = await defer.value) != null ? _a3 : true;
+      });
+      component.value = [access(component)].reduce((options, parent) => {
+        var _a3;
+        while (parent) {
+          if (typeof parent.setup === "function") {
+            options = { parent: options, self: (_a3 = parent.setup(component, options)) != null ? _a3 : {} };
+            if (access(parent.$parent).ReactiveView) {
+              break;
+            } else {
+              parent = access(parent.$parent);
+            }
+          } else {
+            break;
+          }
+        }
+        return options;
+      }, component.value);
+      props.instance.value = typeof props.instance === "function" ? props.instance(component.value) : component.value;
+      return (vue2) => {
+        var _a3, _b3;
+        if (isReady.value) {
+          return access(component).template(component, vue2);
+        } else {
+          return (_b3 = (_a3 = context.slots).loading) == null ? void 0 : _b3.call(_a3, { component });
+        }
+      };
     };
+    return props.beta === "next" ? beta() : current();
   }
 };
 
 // src/index.ts
 var import_vue2 = require("vue");
 var import_date_fns_tz = require("date-fns-tz");
+var import_tailwind_merge = require("tailwind-merge");
+console.log(`%c[ReactiveView]: ${version}`, "background-color: red; color: yellow;");
 var index_default = ReactiveView_default;
 function safeRequest(request) {
   return new Promise(async (resolve) => {
@@ -374,7 +675,7 @@ function safeRequest(request) {
     }
   });
 }
-function getProps(props, param2) {
+function getProps(props = {}, param2) {
   var _a;
   const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
   const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
@@ -418,8 +719,9 @@ function getDate(param1, param2) {
   return (0, import_date_fns_tz.formatInTimeZone)(datetime(), options.timezone, options.format);
 }
 function access(view = {}, alternative) {
+  var _a;
   const resolve = (target) => {
-    return new Proxy(target, {
+    return new Proxy((0, import_vue2.toRaw)(target), {
       get(target2, key) {
         const component = { tree: target2 };
         do {
@@ -440,9 +742,8 @@ function access(view = {}, alternative) {
     });
   };
   try {
-    const component = typeof view === "function" ? view() : view;
-    const ref2 = (0, import_vue2.isRef)(component) ? component.value : component;
-    return resolve(ref2.ReactiveView ? access(ref2.instance) : ref2);
+    const component = (_a = (0, import_vue2.unref)(typeof view === "function" ? view() : view)) != null ? _a : {};
+    return resolve("instance" in component ? component.instance : component);
   } catch (e) {
     return resolve(view);
   }
@@ -451,29 +752,41 @@ function useSubscription() {
   const subscriptions = [];
   const subscription = Subscriptions.get();
   return {
-    addSubscription(name2, handler = () => false, data) {
-      subscription.subscribe(name2, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name2));
+    addSubscription(name, handler = () => false, data) {
+      subscription.subscribe(name, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name));
     },
-    replaceSubscription(name2, handler = () => false, data) {
-      subscription.replace(name2, handler, data);
-      subscriptions.push(() => subscription.unsubscribe(name2));
+    replaceSubscription(name, handler = () => false, data) {
+      subscription.replace(name, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name));
     },
     removeSubscriptions() {
       subscriptions.forEach((subscription2) => safeRequest({
         try: () => subscription2()
       }));
     },
-    removeSubscription(name2) {
-      subscription.unsubscribe(name2);
+    removeSubscription(name) {
+      subscription.unsubscribe(name);
     },
-    hasSubscription(name2) {
-      return subscription.hasSubscription(name2);
+    hasSubscription(name) {
+      return subscription.hasSubscription(name);
     },
     subscriptions,
     subscription
   };
 }
+var Prop = ({ 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(/(-{[^}]+})/);
@@ -525,37 +838,126 @@ var extendVnode = (component, element) => {
       const vnode = getVnode();
       return (props = {}, slots) => {
         var _a;
-        const _b = getProps((_a = vnode.props) != null ? _a : {}, []), { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
-        const finalClasses = MergeStyles(classes, typeof props.class === "function" ? props.class(classes) : props.class);
+        const isFunctionClass = typeof props.class === "function";
+        const isFunctionStyle = typeof props.style === "function";
+        const _b = (_a = vnode.props) != null ? _a : {}, { class: classes, style: styles } = _b, rest = __objRest(_b, ["class", "style"]);
+        const finalClasses = (0, import_tailwind_merge.twMerge)(isFunctionClass ? "" : classes, MergeStyles(isFunctionClass ? props.class(classes) : props.class).string);
+        const finalStyles = MergeStyles(styles, isFunctionStyle ? props.style(styles) : props.style);
         const functionalProps = Object.entries(props).reduce((props2, [key2, value]) => {
-          if (![
-            "class"
-            /*, "style"*/
-          ].includes(key2) && typeof value === "function") {
-            props2[key2] = value(vnode.props[key2]);
+          var _a2;
+          if (!["class", "style", "setup"].includes(key2) && typeof value === "function") {
+            props2[key2] = value((_a2 = vnode.props) == null ? void 0 : _a2[key2]);
           }
           return props2;
         }, props);
-        const finalProps = Object.assign(rest, functionalProps, {
-          class: finalClasses
-          /*, style: finalStyles*/
-        });
-        const finalSlots = typeof slots === "function" ? slots(vnode.children) : vnode.children;
-        return (0, import_vue2.h)(["string", "undefined"].includes(typeof element) ? vnode : element, finalProps, finalSlots);
+        const finalProps = Object.assign(rest, functionalProps, { class: finalClasses, style: finalStyles });
+        const finalSlots = slots ? typeof slots === "function" ? slots(vnode.children) : slots : vnode.children;
+        const finalElement = ["undefined"].includes(typeof element) ? vnode.type : element;
+        return (0, import_vue2.h)(finalElement, finalProps, finalSlots);
       };
     }
   });
 };
+function defineReactiveView(param1, param2) {
+  const instance = (0, import_vue2.ref)();
+  return (0, import_vue2.defineComponent)({
+    name: param1 == null ? void 0 : param1.modelName,
+    props: __spreadValues({ setup }, param1 ? param1.props : {}),
+    setup() {
+      const _a = param1 != null ? param1 : {}, { setup: setup2, props } = _a, rest = __objRest(_a, ["setup", "props"]);
+      return (component) => {
+        const props2 = Object.entries(rest).reduce((props3, [key, val]) => {
+          return Object.assign(props3, { [key]: typeof val === "function" ? val(component, instance) : val });
+        }, {});
+        const slots = typeof (param1 == null ? void 0 : param1.slots) === "function" ? param1.slots(component) : Array.isArray(param1 == null ? void 0 : param1.slots) ? () => param1.slots : param1 == null ? void 0 : param1.slots;
+        return (0, import_vue2.createVNode)(param2 != null ? param2 : ReactiveView_default, __spreadProps(__spreadValues(__spreadValues({}, props2), Object.assign({}, props2, typeof setup2 === "function" ? {
+          setup: (self, parent) => setup2(self, parent, component)
+        } : {})), {
+          instance
+        }), slots);
+      };
+    }
+  });
+}
+function showComponent(component, options = {}) {
+  var _a;
+  if (options.router) {
+    console.warn("[ReactiveView]: Deprecated {router} option used with {showComponent()}. \nUse {plugins} option instead.");
+  }
+  if (!options.key || !document.getElementById(options.key)) {
+    const container = options.container || "app-dialogs";
+    const dialogs = document.getElementById(container) || document.createElement("div");
+    if (!dialogs.hasAttribute("id")) {
+      dialogs.setAttribute("id", container);
+      document.body.appendChild(dialogs);
+    }
+    const dialog = document.createElement("div");
+    const id = (_a = options.key) != null ? _a : `dialog_${dialogs.children.length + 1}`;
+    dialog.setAttribute("id", id);
+    dialogs.appendChild(dialog);
+    const app = (0, import_vue2.createApp)(
+      {
+        setup() {
+          return () => component;
+        }
+      },
+      {
+        __cleanup__: () => {
+          document.querySelectorAll(`#${id}`).forEach((element) => element.remove());
+          app.unmount();
+        }
+      }
+    );
+    if (options.router) {
+      return app.use(options.router).mount(`#${id}`);
+    } else if (options.plugins) {
+      return options.plugins.reduce((app2, plugin) => {
+        return app2.use(...Array.isArray(plugin) ? plugin : [plugin]);
+      }, app).mount(`#${id}`);
+    } else {
+      return app.mount(`#${id}`);
+    }
+  }
+}
+var getData = (component, path, alternative) => {
+  const vue = access(component);
+  const data = import_object_manager2.default.on(componentState(vue));
+  if (path) {
+    return data.get(dataPath(vue, path), alternative);
+  } else {
+    return data.get();
+  }
+};
+var setData = (component, data, path) => {
+  const vue = access(component);
+  const diff = {
+    before: import_object_manager2.default.on(componentState(vue)).clone(),
+    after: path ? import_object_manager2.default.on(componentState(vue)).set(dataPath(vue, path), data).get() : import_object_manager2.default.on(componentState(vue)).set(data).get()
+  };
+  return "state" in vue ? diff : vue.$emit("update:state", diff);
+};
+var componentState = (component) => {
+  return (0, import_vue2.unref)("state" in component ? component.state : component.$attrs.state);
+};
+var dataPath = (component, path) => {
+  return typeof component.$attrs["data:path"] === "function" ? component.$attrs["data:path"](path) : path;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MergeStyles,
+  Prop,
   StyleParser,
   access,
+  dataPath,
+  defineReactiveView,
   extendVnode,
+  getData,
   getDate,
   getProps,
   getReactiveViewComponent,
   safeRequest,
+  setData,
   setup,
+  showComponent,
   useSubscription
 });