@studiometa/js-toolkit 2.0.0-beta.5 → 2.0.0-beta.9

package/services/index.js

@@ -1,8 +1,7 @@
-import useDrag from './drag.js';
-import useKey from './key.js';
-import useLoad from './load.js';
-import usePointer from './pointer.js';
-import useRaf from './raf.js';
-import useResize from './resize.js';
-import useScroll from './scroll.js';
-export { useKey, usePointer, useDrag, useLoad, useRaf, useResize, useScroll };
+export { default as useDrag } from './drag.js';
+export { default as useKey } from './key.js';
+export { default as useLoad } from './load.js';
+export { default as usePointer } from './pointer.js';
+export { default as useRaf } from './raf.js';
+export { default as useResize } from './resize.js';
+export { default as useScroll } from './scroll.js';

package/services/key.d.ts

@@ -9,13 +9,14 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & KeyService}
+ * @return {KeyService}
  */
-export default function useKey(): ServiceInterface & KeyService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useKey(): KeyService;
+export type KeyService = import('./index').ServiceInterface<KeyServiceProps>;
 export type KeyServiceProps = {
     event: KeyboardEvent;
     triggered: number;
+    direction: 'up' | 'down' | 'none';
     isUp: boolean;
     isDown: boolean;
     ENTER: boolean;
@@ -27,13 +28,3 @@ export type KeyServiceProps = {
     RIGHT: boolean;
     DOWN: boolean;
 };
-export type KeyService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: KeyServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => KeyServiceProps;
-};

package/services/key.js

@@ -1,9 +1,4 @@
 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 _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; }
-
 import Service from './Service.js';
 import keyCodes from '../utils/keyCodes.js';
 
@@ -11,79 +6,83 @@ class Key extends Service {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "event", {});
-
-    _defineProperty(this, "triggered", 0);
-
-    _defineProperty(this, "previousEvent", {});
+    _defineProperty(this, "previousEvent", void 0);
+
+    _defineProperty(this, "props", {
+      event: null,
+      triggered: 0,
+      isUp: false,
+      isDown: false,
+      ENTER: false,
+      SPACE: false,
+      TAB: false,
+      ESC: false,
+      LEFT: false,
+      UP: false,
+      RIGHT: false,
+      DOWN: false,
+      direction: 'none'
+    });
   }
 
   init() {
-    this.handler = event => {
-      this.event = event;
-      this.trigger(this.props);
-    };
+    document.addEventListener('keydown', this);
+    document.addEventListener('keyup', this);
+  }
 
-    document.addEventListener('keydown', this.handler, {
-      passive: false
-    });
-    document.addEventListener('keyup', this.handler, {
-      passive: false
-    });
-    return this;
+  handleEvent(event) {
+    this.updateProps(event);
+    this.trigger(this.props);
   }
 
   kill() {
-    document.removeEventListener('keydown', this.handler);
-    document.removeEventListener('keyup', this.handler);
-    return this;
+    document.removeEventListener('keydown', this);
+    document.removeEventListener('keyup', this);
   }
 
-  get props() {
-    var keys = Object.entries(keyCodes).reduce((acc, _ref) => {
+  updateProps(event) {
+    var _this$previousEvent;
+
+    this.props.event = event;
+    Object.entries(keyCodes).forEach(_ref => {
       var [name, code] = _ref;
-      acc[name] = code === this.event.keyCode;
-      return acc;
-    }, {});
+      this.props[name] = code === event.keyCode;
+    });
 
-    if (!this.previousEvent.type) {
-      this.triggered = 0;
+    if (!this.previousEvent) {
+      this.props.triggered = 0;
     }
 
-    if (this.event.type === 'keydown' && this.previousEvent.type === 'keydown') {
-      this.triggered += 1;
+    if (this.props.event.type === 'keydown' && ((_this$previousEvent = this.previousEvent) === null || _this$previousEvent === void 0 ? void 0 : _this$previousEvent.type) === 'keydown') {
+      this.props.triggered += 1;
     } else {
-      this.triggered = 1;
+      this.props.triggered = 1;
     }
 
-    this.previousEvent = this.event;
-    return _objectSpread({
-      event: this.event,
-      triggered: this.triggered,
-      direction: this.event.type === 'keydown' ? 'down' : 'up',
-      isUp: this.event.type === 'keyup',
-      isDown: this.event.type === 'keydown'
-    }, keys);
+    this.previousEvent = this.props.event;
+    this.props.direction = this.props.event.type === 'keydown' ? 'down' : 'up';
+    this.props.isUp = this.props.event.type === 'keyup';
+    this.props.isDown = this.props.event.type === 'keydown';
+    return this.props;
   }
 
 }
 
-var key = null;
+var instance;
+var key;
 export default function useKey() {
   if (!key) {
-    key = new Key();
-  }
-
-  var add = key.add.bind(key);
-  var remove = key.remove.bind(key);
-  var has = key.has.bind(key);
+    if (!instance) {
+      instance = new Key();
+    }
 
-  var props = () => key.props;
+    key = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
+  }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return key;
 }

package/services/load.d.ts

@@ -9,20 +9,10 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & LoadService}
+ * @return {LoadService}
  */
-export default function useLoad(): ServiceInterface & LoadService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useLoad(): LoadService;
+export type LoadService = import('./index').ServiceInterface<LoadServiceProps>;
 export type LoadServiceProps = {
     time: DOMHighResTimeStamp;
 };
-export type LoadService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: LoadServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => LoadServiceProps;
-};

package/services/load.js

@@ -1,44 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Service from './Service.js';
 
 class Load extends Service {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "props", {
+      time: window.performance.now()
+    });
+  }
+
   init() {
-    this.handler = () => {
-      this.trigger(this.props);
-    };
+    window.addEventListener('load', this);
+  }
 
-    window.addEventListener('load', this.handler);
-    return this;
+  handleEvent() {
+    this.updateProps();
+    this.trigger(this.props);
   }
 
   kill() {
-    window.removeEventListener('load', this.handler);
-    return this;
+    window.removeEventListener('load', this);
   }
 
-  get props() {
-    return {};
+  updateProps() {
+    this.props.time = window.performance.now();
+    return this.props;
   }
 
 }
 
-var instance = null;
+var instance;
+var load;
 export default function useLoad() {
-  if (!instance) {
-    instance = new Load();
-  }
-
-  var add = instance.add.bind(instance);
-  var remove = instance.remove.bind(instance);
-  var has = instance.has.bind(instance);
-
-  function props() {
-    return instance.props;
+  if (!load) {
+    if (!instance) {
+      instance = new Load();
+    }
+
+    load = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
   }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return load;
 }

package/services/pointer.d.ts

@@ -9,10 +9,11 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & PointerService}
+ * @todo Add element as parameter to get the pointer position relatively from.
+ * @return {PointerService}
  */
-export default function usePointer(): ServiceInterface & PointerService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function usePointer(): PointerService;
+export type PointerService = import('./index').ServiceInterface<PointerServiceProps>;
 export type PointerServiceProps = {
     event: MouseEvent | TouchEvent;
     isDown: boolean;
@@ -39,13 +40,3 @@ export type PointerServiceProps = {
         y: number;
     };
 };
-export type PointerService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: PointerServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => PointerServiceProps;
-};

package/services/pointer.js

@@ -9,17 +9,32 @@ class Pointer extends Service {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "isDown", false);
-
-    _defineProperty(this, "y", window.innerHeight / 2);
-
-    _defineProperty(this, "yLast", window.innerHeight / 2);
-
-    _defineProperty(this, "x", window.innerWidth / 2);
-
-    _defineProperty(this, "xLast", window.innerWidth / 2);
-
-    _defineProperty(this, "event", void 0);
+    _defineProperty(this, "props", {
+      event: null,
+      isDown: false,
+      x: window.innerWidth / 2,
+      y: window.innerHeight / 2,
+      changed: {
+        x: false,
+        y: false
+      },
+      last: {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2
+      },
+      delta: {
+        x: 0,
+        y: 0
+      },
+      progress: {
+        x: 0.5,
+        y: 0.5
+      },
+      max: {
+        x: window.innerWidth,
+        y: window.innerHeight
+      }
+    });
 
     _defineProperty(this, "hasRaf", false);
   }
@@ -73,86 +88,68 @@ class Pointer extends Service {
   }
 
   handler(event) {
-    this.updateValues(event);
+    this.updateProps(event);
     this.trigger(this.props);
   }
 
   downHandler() {
-    this.isDown = true;
+    this.props.isDown = true;
     this.trigger(this.props);
   }
 
   upHandler() {
-    this.isDown = false;
+    this.props.isDown = false;
     this.trigger(this.props);
   }
 
-  updateValues(event) {
+  updateProps(event) {
     var _event$touches$, _event$touches$2;
 
-    this.event = event;
-    this.yLast = this.y;
-    this.xLast = this.x;
+    this.props.event = event;
+    var yLast = this.props.y;
+    var xLast = this.props.x;
     var y = isTouchEvent(event) ? (_event$touches$ = event.touches[0]) === null || _event$touches$ === void 0 ? void 0 : _event$touches$.clientY : event.clientY;
 
-    if (y !== this.y) {
-      this.y = y;
+    if (y !== this.props.y) {
+      this.props.y = y;
     }
 
     var x = isTouchEvent(event) ? (_event$touches$2 = event.touches[0]) === null || _event$touches$2 === void 0 ? void 0 : _event$touches$2.clientX : event.clientX;
 
-    if (x !== this.x) {
-      this.x = x;
+    if (x !== this.props.x) {
+      this.props.x = x;
     }
-  }
 
-  get props() {
-    return {
-      event: this.event,
-      isDown: this.isDown,
-      x: this.x,
-      y: this.y,
-      changed: {
-        x: this.x !== this.xLast,
-        y: this.y !== this.yLast
-      },
-      last: {
-        x: this.xLast,
-        y: this.yLast
-      },
-      delta: {
-        x: this.x - this.xLast,
-        y: this.y - this.yLast
-      },
-      progress: {
-        x: this.x / window.innerWidth,
-        y: this.y / window.innerHeight
-      },
-      max: {
-        x: window.innerWidth,
-        y: window.innerHeight
-      }
-    };
+    this.props.changed.x = this.props.x !== xLast;
+    this.props.changed.y = this.props.y !== yLast;
+    this.props.last.x = xLast;
+    this.props.last.y = yLast;
+    this.props.delta.x = this.props.x - xLast;
+    this.props.delta.y = this.props.y - yLast;
+    this.props.max.x = window.innerWidth;
+    this.props.max.y = window.innerHeight;
+    this.props.progress.x = this.props.x / this.props.max.x;
+    this.props.progress.y = this.props.y / this.props.max.y;
+    return this.props;
   }
 
 }
 
-var pointer = null;
+var instance;
+var pointer;
 export default function usePointer() {
   if (!pointer) {
-    pointer = new Pointer();
-  }
-
-  var add = pointer.add.bind(pointer);
-  var remove = pointer.remove.bind(pointer);
-  var has = pointer.has.bind(pointer);
+    if (!instance) {
+      instance = new Pointer();
+    }
 
-  var props = () => pointer.props;
+    pointer = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
+  }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return pointer;
 }

package/services/raf.d.ts

@@ -9,20 +9,10 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & RafService}
+ * @return {RafService}
  */
-export default function useRaf(): ServiceInterface & RafService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useRaf(): RafService;
+export type RafService = import('./index').ServiceInterface<RafServiceProps>;
 export type RafServiceProps = {
     time: DOMHighResTimeStamp;
 };
-export type RafService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: RafServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => RafServiceProps;
-};

package/services/raf.js

@@ -4,7 +4,7 @@ import { getRaf, getCancelRaf } from '../utils/nextFrame.js';
 
 class Raf extends Service {
   constructor() {
-    super();
+    super(...arguments);
 
     _defineProperty(this, "isTicking", false);
 
@@ -14,57 +14,54 @@ class Raf extends Service {
 
     _defineProperty(this, "cancelRaf", getCancelRaf());
 
-    this.loop = this.loop.bind(this);
+    _defineProperty(this, "props", {
+      time: performance.now()
+    });
   }
 
   init() {
     this.isTicking = true;
     this.loop();
-    return this;
   }
 
   loop() {
+    this.updateProps();
     this.trigger(this.props);
 
     if (!this.isTicking) {
       return;
     }
 
-    this.id = this.raf(this.loop);
+    this.id = this.raf(() => this.loop());
   }
 
   kill() {
     this.cancelRaf(this.id);
     this.isTicking = false;
-    return this;
   }
 
-  get props() {
-    return {
-      time: window.performance.now()
-    };
+  updateProps() {
+    this.props.time = window.performance.now();
+    return this.props;
   }
 
 }
 
-var instance = null;
+var instance;
+var raf;
 export default function useRaf() {
-  if (!instance) {
-    instance = new Raf();
-  }
-
-  var add = instance.add.bind(instance);
-  var remove = instance.remove.bind(instance);
-  var has = instance.has.bind(instance);
+  if (!raf) {
+    if (!instance) {
+      instance = new Raf();
+    }
 
-  function props() {
-    return instance.props;
+    raf = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
   }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return raf;
 }

package/services/resize.d.ts

@@ -8,10 +8,10 @@
  * remove(key);
  * props();
  * ```
- * @return {ServiceInterface & ResizeService}
+ * @return {ResizeService}
  */
-export default function useResize(): ServiceInterface & ResizeService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useResize(): ResizeService;
+export type ResizeService = import('./index').ServiceInterface<ResizeServiceProps>;
 export type ResizeServiceProps = {
     width: number;
     height: number;
@@ -20,13 +20,3 @@ export type ResizeServiceProps = {
     breakpoint?: string;
     breakpoints?: string[];
 };
-export type ResizeService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: ResizeServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => ResizeServiceProps;
-};