@razaman2/reactive-view 0.0.1

package/dist/index.mjs

@@ -0,0 +1,493 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+import { formatInTimeZone } from "date-fns-tz";
+
+// src/Subscription.ts
+var Subscription = class _Subscription {
+  constructor() {
+    this.subscriptions = [];
+    this.data = {};
+  }
+  static create() {
+    return new _Subscription();
+  }
+  subscribe(name2, handler, data) {
+    if (this.isNameAvailable(name2)) {
+      this.subscriptions.push({
+        name: name2,
+        handler
+      });
+      this.data[name2] = data;
+    }
+    return this;
+  }
+  replace(name2, handler, data) {
+    this.unsubscribe(name2);
+    return this.subscribe(name2, handler, data);
+  }
+  unsubscribe(subscriptions) {
+    if (!Array.isArray(subscriptions)) {
+      subscriptions = subscriptions ? [subscriptions] : [];
+    }
+    if (subscriptions.length) {
+      subscriptions.forEach((name2) => {
+        const subscription = this.find(name2);
+        if (subscription) {
+          subscription.handler();
+          this.remove(subscription);
+          console.log(`%cUnsubscribed From Subscription (${name2})`, "background-color: yellow; color: green; font-weight: bold; padding: 3px;");
+        }
+      });
+    } else {
+      this.subscriptions.forEach((subscription) => {
+        subscription.handler();
+        console.log(`%cUnsubscribed From Subscription (${subscription.name})`, "background-color: yellow; color: red; font-weight: bold; padding: 3px;");
+      });
+      this.subscriptions = [];
+    }
+    return this;
+  }
+  size() {
+    return this.subscriptions.length;
+  }
+  hasSubscription(name2) {
+    return Boolean(this.find(name2));
+  }
+  remove(subscription) {
+    this.subscriptions.splice(this.subscriptions.indexOf(subscription), 1);
+  }
+  find(name2) {
+    return this.subscriptions.find((subscription) => {
+      return subscription.name === name2;
+    });
+  }
+  isNameAvailable(name2) {
+    if (this.hasSubscription(name2)) {
+      throw new Error(`There is already a subscription called "${name2}".`);
+    } else {
+      return true;
+    }
+  }
+  registrations() {
+    return this.subscriptions;
+  }
+  get(name2) {
+    const subscription = this.find(name2);
+    if (subscription) {
+      return subscription;
+    } else {
+      throw new Error(`Subscription "${name2}" doesn't exist!`);
+    }
+  }
+};
+
+// src/Subscriptions.ts
+var _Subscriptions = class _Subscriptions extends Subscription {
+  static get() {
+    return this.subscriptions;
+  }
+};
+_Subscriptions.subscriptions = _Subscriptions.create();
+var Subscriptions = _Subscriptions;
+
+// src/ReactiveView.ts
+import ObjectManager from "@razaman2/object-manager";
+import DataManager from "@razaman2/data-manager";
+import { h, ref, watch, onBeforeUnmount } from "vue";
+
+// package.json
+var name = "@razaman2/reactive-view";
+var version = "0.0.1";
+
+// src/ReactiveView.ts
+import { v4 as uuid } from "uuid";
+var props = {
+  defaultData: {},
+  getDefaultData: {
+    type: Function,
+    default: (data = {}) => data
+  },
+  logging: {
+    validator: (logging) => {
+      return typeof logging === "boolean";
+    }
+  },
+  model: {},
+  modelName: {
+    type: String,
+    default: "ReactiveView"
+  },
+  notifications: { type: Object },
+  root: { type: Function },
+  state: {},
+  subscriptions: {
+    type: Object,
+    default: getSubscription()
+  }
+};
+var setup = {
+  setup: {
+    type: Function,
+    default: (param1 = {}, param2 = {}) => {
+      return Object.assign(param1, param2);
+    }
+  }
+};
+var ReactiveView_default = {
+  props: __spreadValues(__spreadValues({}, setup), props),
+  setup(props2, context) {
+    var _a, _b, _c, _d;
+    const template = (vue, options2) => {
+      var _a2, _b2, _c2;
+      const vnode = context.slots.default ? h(
+        "div",
+        context.attrs,
+        context.slots.default({ vue, options: options2, 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, vnode })) != null ? _c2 : vnode;
+    };
+    const isValid = 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 stateRef = ref(DataManager.transform((_c = props2.state) != null ? _c : defaultType));
+    const config = {
+      defaultData,
+      data: stateRef.value,
+      name: props2.modelName,
+      logging: props2.logging,
+      notifications: props2.notifications
+    };
+    const getState = props2.model ? typeof props2.model === "function" ? props2.model(config) : props2.model : new DataManager(config);
+    const options = {
+      parent: { self: props2 },
+      self: { template, isValid, getState, stateRef }
+    };
+    const setup2 = (_d = props2.setup(options)) != null ? _d : options;
+    const _e = setup2, { parent = {}, self = {} } = _e, rest = __objRest(_e, ["parent", "self"]);
+    let sync = false;
+    if (context.attrs["onUpdate:modelState"]) {
+      const config2 = typeof context.attrs["onUpdate:modelState"] === "function" ? { callback: context.attrs["onUpdate:modelState"] } : context.attrs["onUpdate:modelState"];
+      const subscriptionName = `
+${props2.modelName}
+onUpdate:modelState
+${uuid()}`;
+      const subscription = watch(() => ObjectManager.on(stateRef.value).clone(), (after, before) => {
+        var _a2;
+        const transform = (_a2 = config2.transform) != null ? _a2 : access(setup2).$transform;
+        const diff = {
+          before: (before == null ? void 0 : before.hasOwnProperty("")) ? before[""] : before,
+          after: (after == null ? void 0 : after.hasOwnProperty("")) ? after[""] : after
+        };
+        if (sync) {
+          sync = false;
+        } else {
+          config2.callback(transform ? transform(diff) : diff, getState);
+        }
+      }, config2.options);
+      props2.subscriptions.addSubscription(subscriptionName, subscription);
+      onBeforeUnmount(() => props2.subscriptions.removeSubscription(subscriptionName, false));
+    }
+    if (context.attrs["onUpdate:propsState"]) {
+      const config2 = typeof context.attrs["onUpdate:propsState"] === "function" ? { callback: context.attrs["onUpdate:propsState"] } : context.attrs["onUpdate:propsState"];
+      const subscriptionName = `
+${props2.modelName}
+onUpdate:propsState
+${uuid()}`;
+      const subscription = watch(() => props2.state, (after, before) => {
+        config2.callback({ before, after }, getState);
+        sync = true;
+      }, config2.options);
+      props2.subscriptions.addSubscription(subscriptionName, subscription);
+      onBeforeUnmount(() => props2.subscriptions.removeSubscription(subscriptionName, false));
+    }
+    return ($vue) => {
+      const setup3 = { $vue, options: parent };
+      while (setup3.options) {
+        Object.defineProperties(setup3.$vue, Object.assign({
+          access: {
+            configurable: true,
+            value: () => {
+              return access({ parent, self });
+            }
+          }
+        }, rest));
+        setup3.options = setup3.options.parent;
+        setup3.$vue = setup3.$vue.$parent;
+      }
+      return access($vue).template($vue, { parent, self });
+    };
+  }
+};
+
+// src/AsyncComponent.ts
+import { h as h2, ref as ref2, watch as watch2, isRef, isReactive, onMounted } from "vue";
+var AsyncComponent_default = {
+  props: __spreadProps(__spreadValues({}, setup), {
+    resolve: {
+      required: true
+    },
+    delay: {
+      type: Number,
+      default: 200
+    },
+    timeout: {
+      type: Number,
+      default: 2e3
+    },
+    loading: {
+      default: h2("div")
+    },
+    options: {
+      type: Object
+    },
+    error: {
+      required: false
+    }
+  }),
+  setup() {
+    return ($vue) => {
+      return h2(
+        src_default,
+        {
+          setup: (parent) => {
+            const componentRef = ref2($vue.loading);
+            const template = () => {
+              var _a, _b, _c;
+              const vnode = componentRef.value;
+              return (_c = (_b = (_a = $vue.$slots).template) == null ? void 0 : _b.call(_a, { $vue, vnode })) != null ? _c : vnode;
+            };
+            const self = { template };
+            onMounted(() => __async(this, null, function* () {
+              try {
+                if ($vue.resolve) {
+                  const target = yield $vue.resolve;
+                  target.hasOwnProperty("property") ? watch2(isRef(target.property) || isReactive(target.property) ? target.property : () => __async(this, null, function* () {
+                    return (yield $vue.resolve).property;
+                  }), (after, before) => {
+                    setTimeout(() => __async(this, null, function* () {
+                      return componentRef.value = yield target.onChange({ before: yield before, after: yield after });
+                    }), $vue.delay);
+                  }, $vue.options) : setTimeout(() => __async(this, null, function* () {
+                    return componentRef.value = target;
+                  }), $vue.delay);
+                }
+              } catch (error) {
+                if ($vue.error) {
+                  componentRef.value = h2(yield $vue.error, { error });
+                }
+              }
+            }));
+            return { parent, self };
+          }
+        }
+      );
+    };
+  }
+};
+
+// src/index.ts
+var src_default = ReactiveView_default;
+function ucf(string) {
+  return string.split(/\s+/).map((string2) => {
+    return string2.toLowerCase().replace(/^(\w)/, ($1) => $1.toUpperCase());
+  }).join(" ");
+}
+function ucfat(string, tokens) {
+  const pattern = RegExp(`(?<=(?:${tokens.join("|")}))(\\w)(\\w*)`, "g");
+  return string.replace(pattern, ($1, $2, $3) => `${$2.toUpperCase()}${$3.toLowerCase()}`);
+}
+function safeRequest(request) {
+  return new Promise((resolve) => __async(this, null, function* () {
+    var _a, _b, _c, _d;
+    const { message } = (_a = request.loading) != null ? _a : {};
+    if (request.loading) {
+      request.loading.status = true;
+      if (request.message) {
+        request.loading.message = request.message;
+      }
+    }
+    try {
+      resolve(yield request.try());
+    } catch (e) {
+      if ((_b = request.alternative) != null ? _b : true) {
+        resolve(request.catch ? yield request.catch(e) : console.log(e));
+      }
+    } finally {
+      yield (_c = request.finally) == null ? void 0 : _c.call(request);
+      if (request.loading) {
+        request.loading.status = false;
+      }
+      if (request.loading && message) {
+        request.loading.message = message;
+      }
+      yield (_d = request.complete) == null ? void 0 : _d.call(request);
+    }
+  }));
+}
+function getRoot(vue) {
+  var _a, _b, _c;
+  return (_c = (_a = typeof vue.$attrs.root === "function" ? vue.$attrs.root() : vue.$attrs.root) != null ? _a : vue.$root) != null ? _c : (_b = vue.$parent) == null ? void 0 : _b.$root;
+}
+function getProps(props2, param2) {
+  var _a;
+  const exclude = Array.isArray(param2) || typeof param2 === "string" ? param2 : param2.exclude;
+  const exclusions = (Array.isArray(exclude) ? exclude : [exclude]).join("|");
+  const include = (_a = param2.include) != null ? _a : {};
+  return Object.entries(include).reduce((props3, [key, val]) => {
+    props3[key] = val;
+    return props3;
+  }, Object.entries(props2).reduce((props3, [key, val]) => {
+    if (!RegExp(`(^|\\|)${key}($|\\|)`, "i").test(exclusions)) {
+      props3[key] = val;
+    }
+    return props3;
+  }, {}));
+}
+function getDate(param1, param2) {
+  var _a, _b;
+  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const format = "MM/dd/yyyy h:mm a";
+  const options = typeof param2 === "string" ? { format: param2, timezone } : { format: (_a = param2 == null ? void 0 : param2.format) != null ? _a : format, timezone: (_b = param2 == null ? void 0 : param2.timezone) != null ? _b : timezone };
+  const datetime = () => {
+    try {
+      return param1 instanceof Date ? param1 : param1.toDate();
+    } catch (e) {
+      return /* @__PURE__ */ new Date();
+    }
+  };
+  return formatInTimeZone(datetime(), options.timezone, options.format);
+}
+function getRef(component, ref3) {
+  safeRequest({
+    try: () => __async(this, null, function* () {
+      return component.$props.ref.value = component;
+    }),
+    alternative: false
+  });
+  return ref3.value = component;
+}
+function expose(vue, props2) {
+  Object.entries(Object.getOwnPropertyDescriptors(props2)).forEach(([key, val]) => {
+    Object.defineProperty(vue, key, val);
+  });
+  return props2;
+}
+function getSubscription() {
+  const subscriptions = [];
+  const subscription = Subscriptions.get();
+  return {
+    addSubscription(name2, handler = () => false, data) {
+      subscription.subscribe(name2, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name2));
+    },
+    replaceSubscription(name2, handler = () => false, data) {
+      subscription.replace(name2, handler, data);
+      subscriptions.push(() => subscription.unsubscribe(name2));
+    },
+    removeSubscriptions() {
+      subscriptions.forEach((subscription2) => safeRequest({
+        try: () => subscription2()
+      }));
+    },
+    removeSubscription(name2) {
+      subscription.unsubscribe(name2);
+    },
+    hasSubscription(name2) {
+      return subscription.hasSubscription(name2);
+    },
+    subscriptions,
+    subscription
+  };
+}
+function access($vue = {}) {
+  var _a, _b;
+  const target = typeof $vue.access === "function" ? $vue.access() : (_b = (_a = $vue.value && typeof $vue.value.access === "function" ? $vue.value.access() : $vue.value) != null ? _a : $vue) != null ? _b : {};
+  return new Proxy(target, {
+    get(target2, key) {
+      var _a2, _b2;
+      const component = { $vue: target2 };
+      do {
+        if ((_a2 = component.$vue) == null ? void 0 : _a2[key]) {
+          return component.$vue[key];
+        } else if ((_b2 = component.$vue.self) == null ? void 0 : _b2[key]) {
+          return component.$vue.self[key];
+        } else {
+          component.$vue = component.$vue.parent;
+        }
+      } while (component.$vue);
+    }
+  });
+}
+export {
+  AsyncComponent_default as AsyncComponent,
+  access,
+  src_default as default,
+  expose,
+  getDate,
+  getProps,
+  getRef,
+  getRoot,
+  getSubscription,
+  safeRequest,
+  setup,
+  ucf,
+  ucfat
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@razaman2/reactive-view",
+    "version": "0.0.1",
+    "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"
+    },
+    "keywords": [
+        "vue",
+        "vue-helper",
+        "reactive-view",
+        "vue-class-component"
+    ],
+    "author": "razaman2",
+    "license": "MIT",
+    "dependencies": {
+        "@razaman2/data-manager": "^3.2.5",
+        "@razaman2/collection-proxy": "^0.0.1",
+        "@razaman2/object-manager": "^3.3.7",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
+        "uuid": "^9.0.1",
+        "vue": "^3.3.13"
+    },
+    "devDependencies": {
+        "@types/uuid": "^9.0.7",
+        "tsup": "^8.0.1",
+        "typescript": "^5.3.3",
+        "vitest": "^1.1.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/razaman2/reactive-view.git"
+    }
+}