@studiometa/js-toolkit 2.0.0-beta.10 → 2.0.0-beta.14

package/decorators/withBreakpointObserver.js

@@ -1,133 +1,85 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import useResize from '../services/resize.js';
-
-function testBreakpoints(instance) {
-  var breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : useResize().props().breakpoint;
-  var {
-    activeBreakpoints,
-    inactiveBreakpoints
-  } = instance.$options;
-  var isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);
-  var isInInactiveBreakpoint = inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);
-
+import useResize from "../services/resize.js";
+function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
+  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
+  const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
+  const isInInactiveBreakpoint = inactiveBreakpoints && inactiveBreakpoints.split(" ").includes(breakpoint);
   if (activeBreakpoints && isInActiveBreakpoint || inactiveBreakpoints && !isInInactiveBreakpoint) {
-    return '$mount';
+    return "$mount";
   }
-
-  return '$destroy';
+  return "$destroy";
 }
-
 function hasBreakpointConfiguration(instance) {
-  var {
-    activeBreakpoints,
-    inactiveBreakpoints
-  } = instance.$options;
+  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
   return Boolean(activeBreakpoints || inactiveBreakpoints);
 }
-
 function testConflictingBreakpointConfiguration(instance) {
-  var {
-    activeBreakpoints,
-    inactiveBreakpoints,
-    name
-  } = instance.$options;
-
+  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;
   if (activeBreakpoints && inactiveBreakpoints) {
-    throw new Error("[".concat(name, "] Incorrect configuration: the `activeBreakpoints` and `inactiveBreakpoints` are not compatible."));
+    throw new Error(`[${name}] Incorrect configuration: the \`activeBreakpoints\` and \`inactiveBreakpoints\` are not compatible.`);
   }
 }
-
 function addToResize(key, instance) {
   testConflictingBreakpointConfiguration(instance);
-  var {
-    add,
-    has
-  } = useResize();
-
+  const { add, has } = useResize();
   if (!has(key)) {
-    add(key, function onResize(_ref) {
-      var {
-        breakpoint
-      } = _ref;
-      var action = testBreakpoints(instance, breakpoint);
-
-      if (action === '$destroy' && instance.$isMounted) {
+    add(key, function onResize({ breakpoint }) {
+      const action = testBreakpoints(instance, breakpoint);
+      if (action === "$destroy" && instance.$isMounted) {
         instance[action]();
-      } else if (action === '$mount' && !instance.$isMounted) {
+      } else if (action === "$mount" && !instance.$isMounted) {
         setTimeout(() => instance[action](), 0);
       }
     });
   }
 }
-
-export default function withBreakpointObserver(BaseClass) {
-  var _class, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config2;
-
-  return _temp = _class = class extends BaseClass {
+function withBreakpointObserver(BaseClass) {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config || {},
+      name: `${BaseClass?.config?.name ?? ""}WithBreakpointObserver`,
+      options: {
+        ...BaseClass?.config?.options || {},
+        activeBreakpoints: String,
+        inactiveBreakpoints: String
+      }
+    };
     constructor(element) {
       super(element);
-      var {
-        remove,
-        props
-      } = useResize();
-      var {
-        name
-      } = this.$options;
-
+      const { remove, props } = useResize();
+      const { name } = this.$options;
       if (!props().breakpoint) {
-        throw new Error("[".concat(name, "] The `BreakpointObserver` class requires breakpoints to be defined."));
+        throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
       }
-
-      var key = "BreakpointObserver-".concat(this.$id);
-      var mutationObserver = new MutationObserver(_ref2 => {
-        var [mutation] = _ref2;
-
-        if (mutation.type === 'attributes' && (mutation.attributeName === 'data-options' || mutation.attributeName.startsWith('data-option-'))) {
+      const key = `BreakpointObserver-${this.$id}`;
+      const mutationObserver = new MutationObserver(([mutation]) => {
+        if (mutation.type === "attributes" && (mutation.attributeName === "data-options" || mutation.attributeName.startsWith("data-option-"))) {
           if (!hasBreakpointConfiguration(this)) {
             this.$mount();
             remove(key);
             return;
           }
-
           addToResize(key, this);
         }
       });
-      mutationObserver.observe(this.$el, {
-        attributes: true
-      });
-
+      mutationObserver.observe(this.$el, { attributes: true });
       if (!hasBreakpointConfiguration(this)) {
         return this;
       }
-
       addToResize(key, this);
       return this;
     }
-
     $mount() {
       if (!hasBreakpointConfiguration(this)) {
         return super.$mount();
       }
-
-      var action = testBreakpoints(this);
-
-      if (action === '$mount') {
+      const action = testBreakpoints(this);
+      if (action === "$mount") {
         return super.$mount();
       }
-
       return this;
     }
-
-  }, _defineProperty(_class, "config", _objectSpread(_objectSpread({}, BaseClass.config || {}), {}, {
-    name: "".concat((_BaseClass$config$nam = BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config = BaseClass.config) === null || _BaseClass$config === void 0 ? void 0 : _BaseClass$config.name) !== null && _BaseClass$config$nam !== void 0 ? _BaseClass$config$nam : '', "WithBreakpointObserver"),
-    options: _objectSpread(_objectSpread({}, (BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config2 = BaseClass.config) === null || _BaseClass$config2 === void 0 ? void 0 : _BaseClass$config2.options) || {}), {}, {
-      activeBreakpoints: String,
-      inactiveBreakpoints: String
-    })
-  })), _temp;
-}
+  };
+}
+export {
+  withBreakpointObserver as default
+};

package/decorators/withDrag.cjs

@@ -0,0 +1,55 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/decorators/withDrag.js
+var withDrag_exports = {};
+__export(withDrag_exports, {
+  default: () => withDrag
+});
+var import_drag = __toESM(require("../services/drag.cjs"), 1);
+function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
+  return class extends BaseClass {
+    static config = {
+      name: `${BaseClass.config.name}WithDrag`,
+      emits: ["dragged"]
+    };
+    constructor(el) {
+      super(el);
+      this.$on("mounted", () => {
+        this.$services.register("dragged", import_drag.default.bind(void 0, target.call(this, this), options));
+        this.$services.enable("dragged");
+      });
+      this.$on("destroyed", () => {
+        this.$services.disable("dragged");
+        this.$services.unregister("dragged");
+      });
+    }
+  };
+}
+module.exports = __toCommonJS(withDrag_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withDrag.js

@@ -1,31 +1,23 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["target"];
-import useDrag from '../services/drag.js';
-export default function withDrag(BaseClass) {
-  var _class, _temp;
-
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      {
-    target = instance => instance.$el
-  } = _ref,
-      options = _objectWithoutProperties(_ref, _excluded);
-
-  return _temp = _class = class extends BaseClass {
+import useDrag from "../services/drag.js";
+function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
+  return class extends BaseClass {
+    static config = {
+      name: `${BaseClass.config.name}WithDrag`,
+      emits: ["dragged"]
+    };
     constructor(el) {
       super(el);
-      this.$on('mounted', () => {
-        this.$services.register('dragged', useDrag.bind(undefined, target.call(this, this), options));
-        this.$services.enable('dragged');
+      this.$on("mounted", () => {
+        this.$services.register("dragged", useDrag.bind(void 0, target.call(this, this), options));
+        this.$services.enable("dragged");
       });
-      this.$on('destroyed', () => {
-        this.$services.disable('dragged');
-        this.$services.unregister('dragged');
+      this.$on("destroyed", () => {
+        this.$services.disable("dragged");
+        this.$services.unregister("dragged");
       });
     }
-
-  }, _defineProperty(_class, "config", {
-    name: "".concat(BaseClass.config.name, "WithDrag"),
-    emits: ['dragged']
-  }), _temp;
-}
+  };
+}
+export {
+  withDrag as default
+};

package/decorators/withExtraConfig.cjs

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/decorators/withExtraConfig.js
+var withExtraConfig_exports = {};
+__export(withExtraConfig_exports, {
+  default: () => withExtraConfig
+});
+var import_deepmerge = __toESM(require("deepmerge"), 1);
+function withExtraConfig(BaseClass, config, options = {}) {
+  const newConfig = (0, import_deepmerge.default)(BaseClass.config, config, options);
+  if (newConfig.name === BaseClass.config.name) {
+    newConfig.name = `${BaseClass.config.name}WithExtraConfig`;
+  }
+  return class extends BaseClass {
+    static config = newConfig;
+  };
+}
+module.exports = __toCommonJS(withExtraConfig_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withExtraConfig.js

@@ -1,14 +1,13 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import merge from 'deepmerge';
-export default function withExtraConfig(BaseClass, config) {
-  var _class, _temp;
-
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var newConfig = merge(BaseClass.config, config, options);
-
+import merge from "deepmerge";
+function withExtraConfig(BaseClass, config, options = {}) {
+  const newConfig = merge(BaseClass.config, config, options);
   if (newConfig.name === BaseClass.config.name) {
-    newConfig.name = "".concat(BaseClass.config.name, "WithExtraConfig");
+    newConfig.name = `${BaseClass.config.name}WithExtraConfig`;
   }
-
-  return _temp = _class = class extends BaseClass {}, _defineProperty(_class, "config", newConfig), _temp;
-}
+  return class extends BaseClass {
+    static config = newConfig;
+  };
+}
+export {
+  withExtraConfig as default
+};

package/decorators/withIntersectionObserver.cjs

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/decorators/withIntersectionObserver.js
+var withIntersectionObserver_exports = {};
+__export(withIntersectionObserver_exports, {
+  default: () => withIntersectionObserver
+});
+function createArrayOfNumber(length) {
+  return [...new Array(length + 1)].map((val, index) => index / length);
+}
+function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config || {},
+      name: `${BaseClass?.config?.name ?? ""}WithIntersectionObserver`,
+      options: {
+        ...BaseClass?.config?.options || {},
+        intersectionObserver: Object
+      },
+      emits: ["intersected"]
+    };
+    constructor(element) {
+      super(element);
+      if (!this.intersected || typeof this.intersected !== "function") {
+        throw new Error("[withIntersectionObserver] The `intersected` method must be defined.");
+      }
+      this.$observer = new IntersectionObserver((entries) => {
+        this.__callMethod("intersected", entries);
+      }, { ...defaultOptions, ...this.$options.intersectionObserver || {} });
+      this.$on("mounted", () => {
+        this.$observer.observe(this.$el);
+      });
+      this.$on("destroyed", () => {
+        this.$observer.unobserve(this.$el);
+      });
+      return this;
+    }
+  };
+}
+module.exports = __toCommonJS(withIntersectionObserver_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withIntersectionObserver.js

@@ -1,44 +1,35 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function createArrayOfNumber(length) {
   return [...new Array(length + 1)].map((val, index) => index / length);
 }
-
-export default function withIntersectionObserver(BaseClass) {
-  var _class, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config2;
-
-  var defaultOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    threshold: createArrayOfNumber(100)
-  };
-  return _temp = _class = class extends BaseClass {
+function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config || {},
+      name: `${BaseClass?.config?.name ?? ""}WithIntersectionObserver`,
+      options: {
+        ...BaseClass?.config?.options || {},
+        intersectionObserver: Object
+      },
+      emits: ["intersected"]
+    };
     constructor(element) {
       super(element);
-
-      if (!this.intersected || typeof this.intersected !== 'function') {
-        throw new Error('[withIntersectionObserver] The `intersected` method must be defined.');
+      if (!this.intersected || typeof this.intersected !== "function") {
+        throw new Error("[withIntersectionObserver] The `intersected` method must be defined.");
       }
-
-      this.$observer = new IntersectionObserver(entries => {
-        this.__callMethod('intersected', entries);
-      }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver || {}));
-      this.$on('mounted', () => {
+      this.$observer = new IntersectionObserver((entries) => {
+        this.__callMethod("intersected", entries);
+      }, { ...defaultOptions, ...this.$options.intersectionObserver || {} });
+      this.$on("mounted", () => {
         this.$observer.observe(this.$el);
       });
-      this.$on('destroyed', () => {
+      this.$on("destroyed", () => {
         this.$observer.unobserve(this.$el);
       });
       return this;
     }
-
-  }, _defineProperty(_class, "config", _objectSpread(_objectSpread({}, BaseClass.config || {}), {}, {
-    name: "".concat((_BaseClass$config$nam = BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config = BaseClass.config) === null || _BaseClass$config === void 0 ? void 0 : _BaseClass$config.name) !== null && _BaseClass$config$nam !== void 0 ? _BaseClass$config$nam : '', "WithIntersectionObserver"),
-    options: _objectSpread(_objectSpread({}, (BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config2 = BaseClass.config) === null || _BaseClass$config2 === void 0 ? void 0 : _BaseClass$config2.options) || {}), {}, {
-      intersectionObserver: Object
-    }),
-    emits: ['intersected']
-  })), _temp;
-}
+  };
+}
+export {
+  withIntersectionObserver as default
+};

package/decorators/withMountWhenInView.cjs

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/decorators/withMountWhenInView.js
+var withMountWhenInView_exports = {};
+__export(withMountWhenInView_exports, {
+  default: () => withMountWhenInView
+});
+function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] }) {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config || {},
+      name: `${BaseClass?.config?.name ?? ""}WithMountWhenInView`,
+      options: {
+        ...BaseClass?.config?.options || {},
+        intersectionObserver: Object
+      }
+    };
+    #isVisible = false;
+    #observer;
+    constructor(element) {
+      super(element);
+      this.#observer = new IntersectionObserver((entries) => {
+        const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
+        if (this.#isVisible !== isVisible) {
+          this.#isVisible = isVisible;
+          if (isVisible) {
+            this.$mount();
+          } else {
+            setTimeout(() => this.$destroy());
+          }
+        }
+      }, { ...defaultOptions, ...this.$options.intersectionObserver });
+      this.#observer.observe(this.$el);
+      this.$on("terminated", () => {
+        this.#observer.disconnect();
+      });
+      return this;
+    }
+    $mount() {
+      if (this.#isVisible) {
+        super.$mount();
+      }
+      return this;
+    }
+  };
+}
+module.exports = __toCommonJS(withMountWhenInView_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withMountWhenInView.js

@@ -1,69 +1,42 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
-import _classPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-export default function withMountWhenInView(BaseClass) {
-  var _class, _isVisible, _observer, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config2;
-
-  var defaultOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    threshold: [0, 1]
-  };
-  return _temp = (_isVisible = new WeakMap(), _observer = new WeakMap(), _class = class extends BaseClass {
+function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] }) {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config || {},
+      name: `${BaseClass?.config?.name ?? ""}WithMountWhenInView`,
+      options: {
+        ...BaseClass?.config?.options || {},
+        intersectionObserver: Object
+      }
+    };
+    #isVisible = false;
+    #observer;
     constructor(element) {
       super(element);
-
-      _classPrivateFieldInitSpec(this, _isVisible, {
-        writable: true,
-        value: false
-      });
-
-      _classPrivateFieldInitSpec(this, _observer, {
-        writable: true,
-        value: void 0
-      });
-
-      _classPrivateFieldSet(this, _observer, new IntersectionObserver(entries => {
-        var isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
-
-        if (_classPrivateFieldGet(this, _isVisible) !== isVisible) {
-          _classPrivateFieldSet(this, _isVisible, isVisible);
-
+      this.#observer = new IntersectionObserver((entries) => {
+        const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
+        if (this.#isVisible !== isVisible) {
+          this.#isVisible = isVisible;
           if (isVisible) {
             this.$mount();
           } else {
             setTimeout(() => this.$destroy());
           }
         }
-      }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver)));
-
-      _classPrivateFieldGet(this, _observer).observe(this.$el);
-
-      this.$on('terminated', () => {
-        _classPrivateFieldGet(this, _observer).disconnect();
+      }, { ...defaultOptions, ...this.$options.intersectionObserver });
+      this.#observer.observe(this.$el);
+      this.$on("terminated", () => {
+        this.#observer.disconnect();
       });
       return this;
     }
-
     $mount() {
-      if (_classPrivateFieldGet(this, _isVisible)) {
+      if (this.#isVisible) {
         super.$mount();
       }
-
       return this;
     }
-
-  }), _defineProperty(_class, "config", _objectSpread(_objectSpread({}, BaseClass.config || {}), {}, {
-    name: "".concat((_BaseClass$config$nam = BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config = BaseClass.config) === null || _BaseClass$config === void 0 ? void 0 : _BaseClass$config.name) !== null && _BaseClass$config$nam !== void 0 ? _BaseClass$config$nam : '', "WithMountWhenInView"),
-    options: _objectSpread(_objectSpread({}, (BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config2 = BaseClass.config) === null || _BaseClass$config2 === void 0 ? void 0 : _BaseClass$config2.options) || {}), {}, {
-      intersectionObserver: Object
-    })
-  })), _temp;
-}
+  };
+}
+export {
+  withMountWhenInView as default
+};