@studiometa/js-toolkit 2.0.0-beta.1 → 2.0.0-beta.6

package/Base/index.d.ts

@@ -14,13 +14,14 @@
  * @property {Boolean} [debug]
  * @property {Boolean} [log]
  * @property {String[]} [refs]
+ * @property {String[]} emits
  * @property {BaseConfigComponents} [components]
  * @property {BaseConfigOptions} [options]
  */
 /**
  * Base class.
  */
-export default class Base {
+export default class Base extends EventTarget {
     /**
      * This is a Base instance.
      * @type {Boolean}
@@ -174,6 +175,30 @@ export default class Base {
      * @return {void}
      */
     $terminate(): void;
+    /**
+     * Test if the given event is configured and warn otherwise.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __testEventIsDefined;
+    /**
+     * Add an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __addEmits;
+    /**
+     * Remove an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __removeEmits;
     /**
      * Bind a listener function to an event.
      *
@@ -233,6 +258,7 @@ export type BaseConfig = {
     debug?: boolean;
     log?: boolean;
     refs?: string[];
+    emits: string[];
     components?: BaseConfigComponents;
     options?: BaseConfigOptions;
 };

package/Base/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 { getComponentElements } from './utils.js';
 import ChildrenManager from './managers/ChildrenManager.js';
@@ -11,10 +11,11 @@ import ServicesManager from './managers/ServicesManager.js';
 import EventsManager from './managers/EventsManager.js';
 import OptionsManager from './managers/OptionsManager.js';
 var id = 0;
+var isDev = typeof __DEV__ !== 'undefined' && __DEV__;
 
 function noop() {}
 
-export default class Base {
+export default class Base extends EventTarget {
   get $root() {
     if (!this.$parent) {
       return this;
@@ -47,6 +48,10 @@ export default class Base {
         config.options = _objectSpread(_objectSpread({}, proto.constructor.config.options), config.options);
       }
 
+      if (proto.constructor.config.emits && config.emits) {
+        config.emits = [...proto.constructor.config.emits, ...config.emits];
+      }
+
       proto = Object.getPrototypeOf(proto);
     }
 
@@ -54,27 +59,19 @@ export default class Base {
   }
 
   get $services() {
-    var services = this.__services;
-    this.$emit('get:services', services);
-    return services;
+    return this.__services;
   }
 
   get $refs() {
-    var refs = this.__refs;
-    this.$emit('get:refs', refs);
-    return refs;
+    return this.__refs;
   }
 
   get $options() {
-    var options = this.__options;
-    this.$emit('get:options', options);
-    return options;
+    return this.__options;
   }
 
   get $children() {
-    var children = this.__children;
-    this.$emit('get:children', children);
-    return children;
+    return this.__children;
   }
 
   get $log() {
@@ -82,7 +79,7 @@ export default class Base {
   }
 
   get __debug() {
-    return this.__options.debug && typeof window.__DEV__ !== 'undefined' && window.__DEV__ ? window.console.log.bind(window, "[debug] [".concat(this.$id, "]")) : noop;
+    return isDev && this.__options.debug ? window.console.log.bind(window, "[debug] [".concat(this.$id, "]")) : noop;
   }
 
   __callMethod(method) {
@@ -90,12 +87,8 @@ export default class Base {
       args[_key - 1] = arguments[_key];
     }
 
-    this.__debug('callMethod', method, ...args);
-
-    if (method === 'destroyed' && !this.$isMounted || method === 'mounted' && this.$isMounted) {
-      this.__debug('not', method, 'because the method has already been triggered once.');
-
-      return;
+    if (isDev) {
+      this.__debug('callMethod', method, ...args);
     }
 
     this.$emit(method, ...args);
@@ -106,7 +99,9 @@ export default class Base {
 
     this[method].call(this, ...args);
 
-    this.__debug(method, this, ...args);
+    if (isDev) {
+      this.__debug(method, this, ...args);
+    }
   }
 
   __hasEvent(event) {
@@ -116,6 +111,8 @@ export default class Base {
   }
 
   constructor(element) {
+    super();
+
     _defineProperty(this, "$parent", null);
 
     _defineProperty(this, "$id", void 0);
@@ -144,11 +141,7 @@ export default class Base {
       __config
     } = this;
 
-    if (!__config) {
-      throw new Error('The `config` static property must be defined.');
-    }
-
-    if (!__config.name) {
+    if (__config.name === 'Base') {
       throw new Error('The `config.name` property is required.');
     }
 
@@ -169,13 +162,23 @@ export default class Base {
     this.__children = new ChildrenManager(this, element, __config.components || {}, this.__events);
     this.__refs = new RefsManager(this, element, __config.refs || [], this.__events);
 
-    this.__debug('constructor', this);
+    if (isDev) {
+      this.__debug('constructor', this);
+    }
 
     return this;
   }
 
   $mount() {
-    this.__debug('$mount');
+    if (this.$isMounted) {
+      return this;
+    }
+
+    this.$isMounted = true;
+
+    if (isDev) {
+      this.__debug('$mount');
+    }
 
     this.$children.registerAll();
     this.$refs.registerAll();
@@ -187,12 +190,13 @@ export default class Base {
 
     this.__callMethod('mounted');
 
-    this.$isMounted = true;
     return this;
   }
 
   $update() {
-    this.__debug('$update');
+    if (isDev) {
+      this.__debug('$update');
+    }
 
     this.$refs.unregisterAll();
     this.$services.disableAll();
@@ -207,7 +211,15 @@ export default class Base {
   }
 
   $destroy() {
-    this.__debug('$destroy');
+    if (!this.$isMounted) {
+      return this;
+    }
+
+    this.$isMounted = false;
+
+    if (isDev) {
+      this.__debug('$destroy');
+    }
 
     this.__events.unbindRootElement();
 
@@ -217,12 +229,13 @@ export default class Base {
 
     this.__callMethod('destroyed');
 
-    this.$isMounted = false;
     return this;
   }
 
   $terminate() {
-    this.__debug('$terminate');
+    if (isDev) {
+      this.__debug('$terminate');
+    }
 
     this.$destroy();
 
@@ -235,8 +248,36 @@ export default class Base {
     });
   }
 
+  __testEventIsDefined(event) {
+    if (!(Array.isArray(this.__config.emits) && this.__config.emits.includes(event))) {
+      console.warn("[".concat(this.__config.name, "]"), "The \"".concat(event, "\" event is missing from the configuration."));
+    }
+  }
+
+  __addEmits(event) {
+    var ctor = this.constructor;
+
+    if (Array.isArray(ctor.config.emits)) {
+      ctor.config.emits.push(event);
+    } else {
+      ctor.config.emits = [event];
+    }
+  }
+
+  __removeEmits(event) {
+    var ctor = this.constructor;
+    var index = ctor.config.emits.findIndex(value => value === event);
+    ctor.config.emits.splice(index, 1);
+  }
+
   $on(event, listener, options) {
-    this.__debug('$on', event, listener, options);
+    if (isDev) {
+      this.__debug('$on', event, listener, options);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
     var set = this.__eventHandlers.get(event);
 
@@ -247,18 +288,24 @@ export default class Base {
     }
 
     set.add(listener);
-    this.$el.addEventListener(event, listener, options);
+    this.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
     };
   }
 
   $off(event, listener, options) {
-    this.__debug('$off', event, listener);
+    if (isDev) {
+      this.__debug('$off', event, listener);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
     this.__eventHandlers.get(event).delete(listener);
 
-    this.$el.removeEventListener(event, listener, options);
+    this.removeEventListener(event, listener, options);
   }
 
   $emit(event) {
@@ -266,9 +313,15 @@ export default class Base {
       args[_key2 - 1] = arguments[_key2];
     }
 
-    this.__debug('$emit', event, args);
+    if (isDev) {
+      this.__debug('$emit', event, args);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
-    this.$el.dispatchEvent(new CustomEvent(event, {
+    this.dispatchEvent(new CustomEvent(event, {
       detail: args
     }));
   }
@@ -285,4 +338,7 @@ export default class Base {
 
 _defineProperty(Base, "$isBase", true);
 
-_defineProperty(Base, "config", void 0);
+_defineProperty(Base, "config", {
+  name: 'Base',
+  emits: ['mounted', 'updated', 'destroyed', 'terminated', 'ticked', 'scrolled', 'resized', 'moved', 'loaded']
+});

package/Base/managers/EventsManager.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Event management class.
+ * @todo Prevent binding of `onChildOrRefEvent` to the root element
+ * @todo Use event delegation?
  */
 export default class EventsManager {
     /**
@@ -150,7 +152,7 @@ export default class EventsManager {
      * Manage event methods on the root element.
      *
      * @param {'add'|'remove'} [mode]
-     *   The action to perform: add or remove the event listeners.
+     *   The action to perform: add or remove the event listeners, defaults to 'add'.
      *
      * @return {void}
      * @private

package/Base/managers/EventsManager.js

@@ -37,7 +37,7 @@ export default class EventsManager {
 
     _defineProperty(this, "__childrenHandler", {
       handleEvent: event => {
-        var child = event.currentTarget.__base__;
+        var child = event.currentTarget;
         var childName;
         var index = 0;
         var childrenManager = this.__base.$children;
@@ -141,10 +141,14 @@ export default class EventsManager {
 
     var methods = this.__getEventMethodsByName();
 
+    var {
+      emits = []
+    } = this.__base.__config;
     methods.forEach(method => {
       var event = this.__getEventNameByMethod(method);
 
-      this.__rootElement[modeMethod](event, this.__rootElementHandler);
+      var target = emits.includes(event) ? this.__base : this.__rootElement;
+      target[modeMethod](event, this.__rootElementHandler);
     });
   }
 

package/Base/managers/OptionsManager.d.ts

@@ -8,6 +8,8 @@
  */
 /**
  * Class options to manage options as data attributes on an HTML element.
+ *
+ * @todo Use `MutationObserver` to update values? Might be more performant.
  * @augments {OptionsInterface}
  */
 export default class OptionsManager {

package/Base/managers/RefsManager.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Refs Manager
+ *
+ * @todo Use `MutationObserver` to automatically update refs?
  */
 export default class RefsManager {
     /**

package/Base/managers/ServicesManager.d.ts

@@ -1,8 +1,11 @@
 /**
- * @typedef {keyof SERVICES_MAP} ServiceName
+ * @typedef {typeof SERVICES_MAP & Record<string, () => ServiceInterface>} Services
+ * @typedef {keyof SERVICES_MAP|string} ServiceName
  */
 /**
  * Services management for the Base class.
+ *
+ * @todo Add support for disabled services on mount when the method is defined.
  */
 export default class ServicesManager {
     /**
@@ -81,7 +84,29 @@ export default class ServicesManager {
     unregister(name: string): void;
 }
 export type Base = import('../index').default;
-export type ServiceInterface = import('../../services').ServiceInterface;
+export type BaseConstructor = import('../index').BaseConstructor;
+export type ServiceInterface = import('../../services').ServiceInterface<any>;
+export type Services = typeof SERVICES_MAP & Record<string, () => ServiceInterface>;
 export type ServiceName = keyof {
-    [x: string]: () => import("../../services").ServiceInterface;
-};
+    scrolled: typeof useScroll;
+    resized: typeof useResize;
+    ticked: typeof useRaf;
+    moved: typeof usePointer;
+    keyed: typeof useKey;
+    loaded: typeof useLoad;
+} | string;
+declare namespace SERVICES_MAP {
+    export { useScroll as scrolled };
+    export { useResize as resized };
+    export { useRaf as ticked };
+    export { usePointer as moved };
+    export { useKey as keyed };
+    export { useLoad as loaded };
+}
+import useScroll from "../../services/scroll.js";
+import useResize from "../../services/resize.js";
+import useRaf from "../../services/raf.js";
+import usePointer from "../../services/pointer.js";
+import useKey from "../../services/key.js";
+import useLoad from "../../services/load.js";
+export {};

package/Base/managers/ServicesManager.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 usePointer from '../../services/pointer.js';
 import useRaf from '../../services/raf.js';
@@ -118,6 +118,8 @@ export default class ServicesManager {
 
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
+
+    this.__base.__addEmits(name);
   }
 
   unregister(name) {
@@ -125,6 +127,8 @@ export default class ServicesManager {
       throw new Error("[ServicesManager] The `".concat(name, "` core service can not be unregistered."));
     }
 
+    this.__base.__removeEmits(name);
+
     delete this.__customServices[name];
   }
 

package/decorators/withBreakpointObserver.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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';
 

package/decorators/withDrag.js

@@ -1,14 +1,17 @@
+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 class extends BaseClass {
+  return _temp = _class = class extends BaseClass {
     constructor(el) {
       super(el);
       this.$on('mounted', () => {
@@ -21,5 +24,8 @@ export default function withDrag(BaseClass) {
       });
     }
 
-  };
+  }, _defineProperty(_class, "config", {
+    name: "".concat(BaseClass.config.name, "WithDrag"),
+    emits: ['dragged']
+  }), _temp;
 }

package/decorators/withIntersectionObserver.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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);
@@ -38,6 +38,7 @@ export default function withIntersectionObserver(BaseClass) {
     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;
 }

package/decorators/withMountWhenInView.js

@@ -2,9 +2,9 @@ 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }
 
@@ -36,8 +36,11 @@ export default function withMountWhenInView(BaseClass) {
         if (_classPrivateFieldGet(this, _isVisible) !== isVisible) {
           _classPrivateFieldSet(this, _isVisible, isVisible);
 
-          var method = isVisible ? '$mount' : '$destroy';
-          this[method]();
+          if (isVisible) {
+            this.$mount();
+          } else {
+            setTimeout(() => this.$destroy());
+          }
         }
       }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver)));
 

package/decorators/withScrolledInView.d.ts

@@ -1,6 +1,7 @@
 /**
  * @typedef {import('../Base').default} Base
  * @typedef {import('../Base').BaseConstructor} BaseConstructor
+ * @typedef {import('../Base').BaseConfig} BaseConfig
  */
 /**
  * Add scrolled in view capabilities to a component.
@@ -12,3 +13,4 @@
 export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T): T;
 export type Base = import('../Base').default;
 export type BaseConstructor = import('../Base').BaseConstructor;
+export type BaseConfig = import('../Base').BaseConfig;

package/decorators/withScrolledInView.js

@@ -2,7 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import withMountWhenInView from './withMountWhenInView.js';
 import { clamp, clamp01 } from '../utils/index.js';
 export default function withScrolledInView(BaseClass) {
-  return class extends withMountWhenInView(BaseClass) {
+  var _class, _temp;
+
+  return _temp = _class = class extends withMountWhenInView(BaseClass) {
     constructor(element) {
       super(element);
 
@@ -73,5 +75,8 @@ export default function withScrolledInView(BaseClass) {
       };
     }
 
-  };
+  }, _defineProperty(_class, "config", {
+    name: "".concat(BaseClass.config.name, "WithMountWhenInView"),
+    emits: ['scrolledInView']
+  }), _temp;
 }

package/decorators/withVue2.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 export default ((BaseClass, Vue) => {
   var _class, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config$ref, _BaseClass$config2;