@studiometa/js-toolkit 2.0.0-alpha.9 → 2.0.0-beta.11

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,
@@ -33,13 +33,14 @@ export default class ServicesManager {
     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;
     }
 
@@ -55,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() {};
     }
 
@@ -70,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);
@@ -99,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) {
@@ -108,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;
+};

package/decorators/withVue2.js

@@ -0,0 +1,45 @@
+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; }
+
+export default ((BaseClass, Vue) => {
+  var _class, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config$ref, _BaseClass$config2;
+
+  return _temp = _class = class WithVue2 extends BaseClass {
+    constructor(element) {
+      super(element);
+
+      _defineProperty(this, "$vue", void 0);
+
+      var {
+        vueConfig
+      } = this.constructor;
+
+      if (!vueConfig) {
+        throw new Error('[withVue] You must define a `vueConfig` object.');
+      }
+
+      if (typeof vueConfig.render !== 'function') {
+        throw new Error('[withVue] You must define a `render` function in vueConfig.');
+      }
+
+      this.$vue = new Vue(vueConfig);
+      this.$on('mounted', () => {
+        if (!(this.$refs.vue instanceof HTMLElement)) {
+          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');
+        }
+
+        this.$vue.$mount(this.$refs.vue);
+      });
+      this.$on('destroyed', () => {
+        this.$vue.$destroy();
+      });
+    }
+
+  }, _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 : '', "WithVue"),
+    refs: [...((_BaseClass$config$ref = BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config2 = BaseClass.config) === null || _BaseClass$config2 === void 0 ? void 0 : _BaseClass$config2.refs) !== null && _BaseClass$config$ref !== void 0 ? _BaseClass$config$ref : []), 'vue']
+  })), _defineProperty(_class, "vueConfig", void 0), _temp;
+});

package/helpers/index.d.ts

@@ -1,5 +1,4 @@
-import createApp from "./createApp.js";
-import importOnInteraction from "./importOnInteraction.js";
-import importWhenIdle from "./importWhenIdle.js";
-import importWhenVisible from "./importWhenVisible.js";
-export { createApp, importOnInteraction, importWhenIdle, importWhenVisible };
+export { default as createApp } from "./createApp.js";
+export { default as importOnInteraction } from "./importOnInteraction.js";
+export { default as importWhenIdle } from "./importWhenIdle.js";
+export { default as importWhenVisible } from "./importWhenVisible.js";

package/helpers/index.js

@@ -1,5 +1,4 @@
-import createApp from './createApp.js';
-import importOnInteraction from './importOnInteraction.js';
-import importWhenIdle from './importWhenIdle.js';
-import importWhenVisible from './importWhenVisible.js';
-export { createApp, importOnInteraction, importWhenIdle, importWhenVisible };
+export { default as createApp } from './createApp.js';
+export { default as importOnInteraction } from './importOnInteraction.js';
+export { default as importWhenIdle } from './importWhenIdle.js';
+export { default as importWhenVisible } from './importWhenVisible.js';