@studiometa/js-toolkit 2.0.0-alpha.8 → 2.0.0-beta.10

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 {
     /**
@@ -56,6 +59,13 @@ export default class ServicesManager {
      * @return {void}
      */
     disable(service: string): void;
+    /**
+     * Toggle a service.
+     * @param  {string}  service    The name of the service.
+     * @param  {boolean} [force] The state to force.
+     * @return {void}
+     */
+    toggle(service: string, force?: boolean): void;
     /**
      * Register a new service to be enabled/disabled.
      *
@@ -74,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';
@@ -10,7 +10,7 @@ import useResize from '../../services/resize.js';
 import useScroll from '../../services/scroll.js';
 import useKey from '../../services/key.js';
 import useLoad from '../../services/load.js';
-import { hasMethod, callMethod } from '../utils.js';
+import { hasMethod } from '../utils.js';
 var SERVICES_MAP = {
   scrolled: useScroll,
   resized: useResize,
@@ -30,11 +30,17 @@ export default class ServicesManager {
 
     _defineProperty(this, "__customServices", {});
 
-    this.__base = instance;
+    Object.defineProperties(this, {
+      __base: {
+        enumerable: false,
+        writable: false,
+        value: instance
+      }
+    });
   }
 
   has(service) {
-    if (!hasMethod(this.__base, service) && !this.__services[service]) {
+    if (!((hasMethod(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
 
@@ -50,7 +56,7 @@ export default class ServicesManager {
       return this.disable.bind(this, service);
     }
 
-    if (!hasMethod(this.__base, service) || !this.__services[service]) {
+    if (!(hasMethod(this.__base, service) || this.__base.__hasEvent(service)) || !this.__services[service]) {
       return function noop() {};
     }
 
@@ -65,7 +71,7 @@ export default class ServicesManager {
         args[_key] = arguments[_key];
       }
 
-      callMethod(self.__base, service, ...args);
+      self.__base.__callMethod(service, ...args);
     }
 
     add(this.__base.$id, serviceHandler);
@@ -94,8 +100,26 @@ export default class ServicesManager {
     remove(this.__base.$id);
   }
 
+  toggle(service, force) {
+    if (typeof force !== 'undefined') {
+      if (force && !this.has(service)) {
+        this.enable(service);
+      }
+
+      if (!force && this.has(service)) {
+        this.disable(service);
+      }
+    } else if (this.has(service)) {
+      this.disable(service);
+    } else {
+      this.enable(service);
+    }
+  }
+
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
+
+    this.__base.__addEmits(name);
   }
 
   unregister(name) {
@@ -103,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/Base/utils.d.ts

@@ -9,14 +9,6 @@
  * @return {Boolean}
  */
 export function hasMethod(obj: any, name: string): boolean;
-/**
- * Call the given method while applying the given arguments.
- *
- * @param {Base}   instance The Base instance on which to trigger the method.
- * @param {String} method   The method to call.
- * @param {...any} args     The arguments to pass to the method.
- */
-export function callMethod(instance: Base, method: string, ...args: any[]): import("./index.js").default;
 /**
  * Get a list of elements based on the name of a component.
  *

package/Base/utils.js

@@ -1,31 +1,6 @@
 export function hasMethod(obj, name) {
   return typeof obj[name] === 'function';
 }
-export function callMethod(instance, method) {
-  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    args[_key - 2] = arguments[_key];
-  }
-
-  instance.__debug('callMethod', method, ...args);
-
-  if (method === 'destroyed' && !instance.$isMounted || method === 'mounted' && instance.$isMounted) {
-    instance.__debug('not', method, 'because the method has already been triggered once.');
-
-    return instance;
-  }
-
-  instance.$emit(method, ...args);
-
-  if (!hasMethod(instance, method)) {
-    return instance;
-  }
-
-  instance[method].call(instance, ...args);
-
-  instance.__debug(method, instance, ...args);
-
-  return instance;
-}
 export function getComponentElements(nameOrSelector) {
   var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
   var selector = "[data-component=\"".concat(nameOrSelector, "\"]");

package/README.md

@@ -15,70 +15,23 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-## Usage
+## Documentation
 
-Import the `Base` class and extend it to create your components:
+This project contains a JavaScript micro-framework and its utility functions whose main objectives are:
 
-```js
-import { Base } from '@studiometa/js-toolkit';
-import Modal from '@studiometa/ui/Modal';
+- Enforcing best-practice and consistency between projects
+- Using elements from the DOM easily
+- Enabling custom behaviours on component initialization or other user events
+- Disabling custom behaviours on component destruction or other user events
+- Initializing components in the right place at the right time
+- Defining dependencies between components
 
-class Component {
-  static config = {
-    name: 'Component',
-  }
-}
+Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more.
 
-class App extends Base {
-  static config = {
-    name: 'App',
-    log: true,
-    debug: true,
-    components: {
-      Modal,
-      Component,
-    },
-    refs: ['btn', 'items[]'],
-    options: {
-      foo: String,
-      bar: { type: String, default: 'bar' },
-    }
-  };
+## Contributing
 
-  mounted() {
-    this.$log('mounted');
-
-    // Options
-    this.$options.name; // 'App'
-    this.$options.log; // true
-    this.$options.debug; // true
-    this.$options.foo // ''
-    this.$options.bar // 'bar'
-
-    // Children
-    this.$children.Modal; // Array<Modal>
-
-    // DOM references
-    this.$refs.btn; // <button data-ref="btn"></button>
-    this.$refs.items; // <li data-ref="items[]"></li>
-  }
-
-  destroyed() {
-    this.$log('destroyed');
-  }
-
-  scrolled(props) {
-    this.$log('scrolled', props);
-  }
-
-  resized(props) {
-    this.$log('resized', props);
-  }
-}
-
-export default new App(document.querySelector('#app'));
-```
-
-Read the [documentation](https://js-toolkit.meta.fr/) to learn more.
+This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features. The packages and their dependencies are managed with NPM workspaces. The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.
 
+## License
 
+See [LICENSE](./LICENSE).

package/decorators/index.d.ts

@@ -1,7 +1,8 @@
-import withBreakpointManager from "./withBreakpointManager.js";
-import withBreakpointObserver from "./withBreakpointObserver.js";
-import withDrag from "./withDrag.js";
-import withExtraConfig from "./withExtraConfig.js";
-import withIntersectionObserver from "./withIntersectionObserver.js";
-import withMountWhenInView from "./withMountWhenInView.js";
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };
+export { default as withBreakpointManager } from "./withBreakpointManager.js";
+export { default as withBreakpointObserver } from "./withBreakpointObserver.js";
+export { default as withDrag } from "./withDrag.js";
+export { default as withExtraConfig } from "./withExtraConfig.js";
+export { default as withIntersectionObserver } from "./withIntersectionObserver.js";
+export { default as withMountWhenInView } from "./withMountWhenInView.js";
+export { default as withScrolledInView } from "./withScrolledInView.js";
+export { default as withVue2 } from "./withVue2.js";

package/decorators/index.js

@@ -1,7 +1,8 @@
-import withBreakpointManager from './withBreakpointManager.js';
-import withBreakpointObserver from './withBreakpointObserver.js';
-import withDrag from './withDrag.js';
-import withExtraConfig from './withExtraConfig.js';
-import withIntersectionObserver from './withIntersectionObserver.js';
-import withMountWhenInView from './withMountWhenInView.js';
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };
+export { default as withBreakpointManager } from './withBreakpointManager.js';
+export { default as withBreakpointObserver } from './withBreakpointObserver.js';
+export { default as withDrag } from './withDrag.js';
+export { default as withExtraConfig } from './withExtraConfig.js';
+export { default as withIntersectionObserver } from './withIntersectionObserver.js';
+export { default as withMountWhenInView } from './withMountWhenInView.js';
+export { default as withScrolledInView } from './withScrolledInView.js';
+export { default as withVue2 } from './withVue2.js';

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.d.ts

@@ -4,7 +4,7 @@
  * @typedef {import('../services/drag').DragServiceOptions} DragServiceOptions
  */
 /**
- * @typedef {DragServiceOptions & { target: (this:Base) => HTMLElement }} DragDecoratorOptions
+ * @typedef {DragServiceOptions & { target?: (this:Base, Base) => HTMLElement }} DragDecoratorOptions
  */
 /**
  * Add dragging capabilities to a component.
@@ -14,10 +14,10 @@
  * @param {DragDecoratorOptions} options
  * @return {T}
  */
-export default function withDrag<T extends typeof import("../Base").default>(BaseClass: T, options?: DragDecoratorOptions): T;
+export default function withDrag<T extends typeof import("../Base").default>(BaseClass: T, { target, ...options }?: DragDecoratorOptions): T;
 export type Base = import('../Base').default;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type DragServiceOptions = import('../services/drag').DragServiceOptions;
 export type DragDecoratorOptions = import("../services/drag.js").DragServiceOptions & {
-    target: (this: Base) => HTMLElement;
+    target?: (this: import("../Base").default, Base: any) => HTMLElement;
 };

package/decorators/withDrag.js

@@ -1,24 +1,21 @@
+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 options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    target() {
-      return this.$el;
-    }
+  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', () => {
-        var {
-          target
-        } = options,
-            otherOptions = _objectWithoutProperties(options, _excluded);
-
-        var boundUseDrag = useDrag.bind(undefined, target.call(this), otherOptions);
-        this.$services.register('dragged', boundUseDrag);
+        this.$services.register('dragged', useDrag.bind(undefined, target.call(this, this), options));
         this.$services.enable('dragged');
       });
       this.$on('destroyed', () => {
@@ -27,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);
@@ -23,10 +23,7 @@ export default function withIntersectionObserver(BaseClass) {
       }
 
       this.$observer = new IntersectionObserver(entries => {
-        this.__debug('intersected', entries);
-
-        this.$emit('intersected', entries);
-        this.intersected(entries);
+        this.__callMethod('intersected', entries);
       }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver || {}));
       this.$on('mounted', () => {
         this.$observer.observe(this.$el);
@@ -41,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.d.ts

@@ -5,7 +5,7 @@
  */
 /**
  * @typedef {Object} WithMountWhenInViewOptions
- * @property {Object} intersectionObserver
+ * @property {IntersectionObserverInit} intersectionObserver
  */
 /**
  * @typedef {Object} WithMountWhenInViewInterface
@@ -17,15 +17,15 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
- * @param {Object} [defaultOptions] The options for the IntersectionObserver instance.
+ * @param {IntersectionObserverInit} [defaultOptions] The options for the IntersectionObserver instance.
  * @return {T}
  */
-export default function withMountWhenInView<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: any): T;
+export default function withMountWhenInView<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: IntersectionObserverInit): T;
 export type Base = import('../Base').default;
 export type BaseOptions = import('../Base').BaseOptions;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type WithMountWhenInViewOptions = {
-    intersectionObserver: any;
+    intersectionObserver: IntersectionObserverInit;
 };
 export type WithMountWhenInViewInterface = {
     terminated: () => void;

package/decorators/withMountWhenInView.js

@@ -2,9 +2,13 @@ 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); }
+
+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;
@@ -16,12 +20,12 @@ export default function withMountWhenInView(BaseClass) {
     constructor(element) {
       super(element);
 
-      _isVisible.set(this, {
+      _classPrivateFieldInitSpec(this, _isVisible, {
         writable: true,
         value: false
       });
 
-      _observer.set(this, {
+      _classPrivateFieldInitSpec(this, _observer, {
         writable: true,
         value: void 0
       });
@@ -32,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

@@ -0,0 +1,17 @@
+/**
+ * @typedef {import('../Base').default} Base
+ * @typedef {import('../Base').BaseConstructor} BaseConstructor
+ * @typedef {import('../Base').BaseConfig} BaseConfig
+ */
+/**
+ * Add scrolled in view capabilities to a component.
+ *
+ * @template {BaseConstructor} T
+ * @param {T} BaseClass
+ * @param {IntersectionObserverInit} options
+ * @return {T}
+ */
+export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T, options: IntersectionObserverInit): T;
+export type Base = import('../Base').default;
+export type BaseConstructor = import('../Base').BaseConstructor;
+export type BaseConfig = import('../Base').BaseConfig;

package/decorators/withScrolledInView.js

@@ -0,0 +1,94 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import withMountWhenInView from './withMountWhenInView.js';
+import { damp, clamp, clamp01 } from '../utils/index.js';
+export default function withScrolledInView(BaseClass, options) {
+  var _class, _temp;
+
+  return _temp = _class = class extends withMountWhenInView(BaseClass, options) {
+    constructor() {
+      super(...arguments);
+
+      _defineProperty(this, "__props", {
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 0,
+          y: 0
+        },
+        current: {
+          x: 0,
+          y: 0
+        },
+        progress: {
+          x: 0,
+          y: 0
+        },
+        dampedProgress: {
+          x: 0,
+          y: 0
+        }
+      });
+
+      _defineProperty(this, "dampFactor", 0.1);
+
+      _defineProperty(this, "dampPrecision", 0.001);
+    }
+
+    mounted() {
+      this.__setProps();
+    }
+
+    resized() {
+      this.__setProps();
+    }
+
+    scrolled(props) {
+      if (!this.$services.has('ticked') && props.changed.y || props.changed.x) {
+        this.$services.enable('ticked');
+      }
+    }
+
+    ticked() {
+      this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
+      this.__props.progress.x = clamp01((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
+      this.__props.dampedProgress.x = damp(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
+      this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
+      this.__props.progress.y = clamp01((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
+      this.__props.dampedProgress.y = damp(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
+
+      if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
+        this.$services.disable('ticked');
+      }
+
+      this.__callMethod('scrolledInView', this.__props);
+    }
+
+    __setProps() {
+      var sizes = this.$el.getBoundingClientRect();
+      var yEnd = sizes.top + window.pageYOffset + sizes.height;
+      var yStart = yEnd - window.innerHeight - sizes.height;
+      var yCurrent = clamp(window.pageYOffset, yStart, yEnd);
+      var yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
+      var xEnd = sizes.left + window.pageXOffset + sizes.width;
+      var xStart = xEnd - window.innerWidth - sizes.width;
+      var xCurrent = clamp(window.pageXOffset, xStart, xEnd);
+      var xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
+      this.__props.start.x = xStart;
+      this.__props.start.y = yStart;
+      this.__props.end.x = xEnd;
+      this.__props.end.y = yEnd;
+      this.__props.current.x = xCurrent;
+      this.__props.current.y = yCurrent;
+      this.__props.progress.x = xProgress;
+      this.__props.progress.y = yProgress;
+      this.__props.dampedProgress.x = damp(xProgress, this.__props.dampedProgress.x);
+      this.__props.dampedProgress.y = damp(yProgress, this.__props.dampedProgress.y);
+    }
+
+  }, _defineProperty(_class, "config", {
+    name: "".concat(BaseClass.config.name, "WithMountWhenInView"),
+    emits: ['scrolledInView']
+  }), _temp;
+}

package/decorators/withVue2.d.ts

@@ -0,0 +1,7 @@
+declare function _default<T extends typeof import("../Base").default>(BaseClass: T, Vue: import('vue').VueConstructor): T;
+export default _default;
+export type Base = import('../Base').default;
+export type BaseConstructor = import('../Base').BaseConstructor;
+export type WithVue2Refs = {
+    vue: HTMLElement;
+};