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

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;
-};

package/services/resize.js

@@ -1,9 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Service from './Service.js';
 import debounce from '../utils/debounce.js';
 
 class Resize extends Service {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "props", {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      ratio: window.innerWidth / window.innerHeight,
+      orientation: 'square'
+    });
+
+    _defineProperty(this, "handler", void 0);
+  }
+
   init() {
     this.handler = debounce(() => {
+      this.updateProps();
       this.trigger(this.props);
     }).bind(this);
     window.addEventListener('resize', this.handler);
@@ -12,35 +27,35 @@ class Resize extends Service {
 
   kill() {
     window.removeEventListener('resize', this.handler);
-    return this;
   }
 
-  get props() {
-    var props = {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      ratio: window.innerWidth / window.innerHeight,
-      orientation: 'square'
-    };
+  updateProps() {
+    this.props.width = window.innerWidth;
+    this.props.height = window.innerHeight;
+    this.props.ratio = window.innerWidth / window.innerHeight;
+    this.props.orientation = 'square';
 
-    if (props.ratio > 1) {
-      props.orientation = 'landscape';
+    if (this.props.ratio > 1) {
+      this.props.orientation = 'landscape';
     }
 
-    if (props.ratio < 1) {
-      props.orientation = 'portrait';
+    if (this.props.ratio < 1) {
+      this.props.orientation = 'portrait';
     }
 
     if (this.breakpointElement) {
-      props.breakpoint = this.breakpoint;
-      props.breakpoints = this.breakpoints;
+      this.props.breakpoint = this.breakpoint;
+      this.props.breakpoints = this.breakpoints;
+    } else {
+      this.props.breakpoint = undefined;
+      this.props.breakpoints = undefined;
     }
 
-    return props;
+    return this.props;
   }
 
   get breakpointElement() {
-    return document.querySelector('[data-breakpoint]') || null;
+    return document.querySelector('[data-breakpoint]');
   }
 
   get breakpoint() {
@@ -54,22 +69,25 @@ class Resize extends Service {
 
 }
 
-var resize = null;
+var instance;
+var resize;
 export default function useResize() {
   if (!resize) {
-    resize = new Resize();
-  }
-
-  var add = resize.add.bind(resize);
-  var remove = resize.remove.bind(resize);
-  var has = resize.has.bind(resize);
+    if (!instance) {
+      instance = new Resize();
+    }
 
-  var props = () => resize.props;
+    var add = instance.add.bind(instance);
+    var remove = instance.remove.bind(instance);
+    var has = instance.has.bind(instance);
+    var props = instance.updateProps.bind(instance);
+    resize = {
+      add,
+      remove,
+      has,
+      props
+    };
+  }
 
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
+  return resize;
 }

package/services/scroll.d.ts

@@ -9,10 +9,10 @@
  * props();
  * ```
  *
- * @return {ServiceInterface & ScrollService}
+ * @return {ScrollService}
  */
-export default function useScroll(): ServiceInterface & ScrollService;
-export type ServiceInterface = import('./index').ServiceInterface;
+export default function useScroll(): ScrollService;
+export type ScrollService = import('./index').ServiceInterface<ScrollServiceProps>;
 export type ScrollServiceProps = {
     x: number;
     y: number;
@@ -41,13 +41,3 @@ export type ScrollServiceProps = {
         y: 'UP' | 'DOWN' | 'NONE';
     };
 };
-export type ScrollService = {
-    /**
-     *   Add a function to the resize service. The key must be uniq.
-     */
-    add: (key: string, callback: (props: ScrollServiceProps) => void) => void;
-    /**
-     *   Get the current values of the resize service props.
-     */
-    props: () => ScrollServiceProps;
-};

package/services/scroll.js

@@ -6,16 +6,38 @@ class Scroll extends Service {
   constructor() {
     super(...arguments);
 
-    _defineProperty(this, "y", window.pageYOffset);
-
-    _defineProperty(this, "yLast", window.pageYOffset);
-
-    _defineProperty(this, "x", window.pageXOffset);
-
-    _defineProperty(this, "xLast", window.pageXOffset);
+    _defineProperty(this, "props", {
+      x: window.pageXOffset,
+      y: window.pageYOffset,
+      changed: {
+        x: false,
+        y: false
+      },
+      last: {
+        x: window.pageXOffset,
+        y: window.pageYOffset
+      },
+      delta: {
+        x: 0,
+        y: 0
+      },
+      max: {
+        x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
+        y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
+      },
+      progress: {
+        x: 0,
+        y: 0
+      },
+      direction: {
+        x: 'NONE',
+        y: 'NONE'
+      }
+    });
   }
 
   init() {
+    this.updateProps();
     document.addEventListener('scroll', this, {
       passive: true,
       capture: true
@@ -25,8 +47,9 @@ class Scroll extends Service {
 
   get debouncedHandler() {
     var debounced = debounce(() => {
+      this.updateProps();
       this.trigger(this.props);
-    }, 0);
+    }, 100);
     Object.defineProperty(this, 'debouncedHandler', {
       value: debounced
     });
@@ -34,6 +57,7 @@ class Scroll extends Service {
   }
 
   handleEvent() {
+    this.updateProps();
     this.trigger(this.props);
     this.debouncedHandler();
   }
@@ -43,70 +67,50 @@ class Scroll extends Service {
     return this;
   }
 
-  get props() {
-    this.yLast = this.y;
-    this.xLast = this.x;
+  updateProps() {
+    var yLast = this.props.y;
+    var xLast = this.props.x;
 
-    if (window.pageYOffset !== this.y) {
-      this.y = window.pageYOffset;
+    if (window.pageYOffset !== this.props.y) {
+      this.props.y = window.pageYOffset;
     }
 
-    if (window.pageXOffset !== this.x) {
-      this.x = window.pageXOffset;
+    if (window.pageXOffset !== this.props.x) {
+      this.props.x = window.pageXOffset;
     }
 
-    return {
-      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.max.x === 0 ? 1 : this.x / this.max.x,
-        y: this.max.y === 0 ? 1 : this.y / this.max.y
-      },
-      direction: {
-        x: this.x > this.xLast ? 'RIGHT' : this.x < this.xLast ? 'LEFT' : 'NONE',
-        y: this.y > this.yLast ? 'DOWN' : this.y < this.yLast ? 'UP' : 'NONE'
-      },
-      max: this.max
-    };
-  }
-
-  get max() {
-    return {
-      x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
-      y: (document.scrollingElement || document.body).scrollHeight - 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 = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
+    this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
+    this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
+    this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
+    this.props.direction.x = this.props.x > xLast ? 'RIGHT' : this.props.x < xLast ? 'LEFT' : 'NONE';
+    this.props.direction.y = this.props.y > yLast ? 'DOWN' : this.props.y < yLast ? 'UP' : 'NONE';
+    return this.props;
   }
 
 }
 
-var scroll = null;
+var instance;
+var scroll;
 export default function useScroll() {
   if (!scroll) {
-    scroll = new Scroll();
-  }
-
-  var add = scroll.add.bind(scroll);
-  var remove = scroll.remove.bind(scroll);
-  var has = scroll.has.bind(scroll);
+    if (!instance) {
+      instance = new Scroll();
+    }
 
-  var props = () => scroll.props;
+    scroll = {
+      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 scroll;
 }

package/utils/collide/index.d.ts

@@ -1,7 +1,6 @@
-import collidePointRect from "./collidePointRect.js";
-import collideRectRect from "./collideRectRect.js";
-import boundingRectToCircle from "./boundingRectToCircle.js";
-import collideCircleRect from "./collideCircleRect.js";
-import collideCircleCircle from "./collideCircleCircle.js";
-import collidePointCircle from "./collidePointCircle.js";
-export { collidePointRect, collideRectRect, boundingRectToCircle, collideCircleRect, collideCircleCircle, collidePointCircle };
+export { default as boundingRectToCircle } from "./boundingRectToCircle.js";
+export { default as collideCircleCircle } from "./collideCircleCircle.js";
+export { default as collideCircleRect } from "./collideCircleRect.js";
+export { default as collidePointCircle } from "./collidePointCircle.js";
+export { default as collidePointRect } from "./collidePointRect.js";
+export { default as collideRectRect } from "./collideRectRect.js";

package/utils/collide/index.js

@@ -1,7 +1,6 @@
-import collidePointRect from './collidePointRect.js';
-import collideRectRect from './collideRectRect.js';
-import boundingRectToCircle from './boundingRectToCircle.js';
-import collideCircleRect from './collideCircleRect.js';
-import collideCircleCircle from './collideCircleCircle.js';
-import collidePointCircle from './collidePointCircle.js';
-export { collidePointRect, collideRectRect, boundingRectToCircle, collideCircleRect, collideCircleCircle, collidePointCircle };
+export { default as boundingRectToCircle } from './boundingRectToCircle.js';
+export { default as collideCircleCircle } from './collideCircleCircle.js';
+export { default as collideCircleRect } from './collideCircleRect.js';
+export { default as collidePointCircle } from './collidePointCircle.js';
+export { default as collidePointRect } from './collidePointRect.js';
+export { default as collideRectRect } from './collideRectRect.js';

package/utils/css/index.d.ts

@@ -1,5 +1,4 @@
-import * as classes from "./classes.js";
-import * as styles from "./styles.js";
-import matrix from "./matrix.js";
-import transition from "./transition.js";
-export { classes, styles, matrix, transition };
+export * as classes from "./classes.js";
+export * as styles from "./styles.js";
+export { default as matrix } from "./matrix.js";
+export { default as transition } from "./transition.js";

package/utils/css/index.js

@@ -1,5 +1,6 @@
-import * as classes from './classes.js';
-import * as styles from './styles.js';
-import matrix from './matrix.js';
-import transition from './transition.js';
-export { classes, styles, matrix, transition };
+import * as _classes from './classes.js';
+export { _classes as classes };
+import * as _styles from './styles.js';
+export { _styles as styles };
+export { default as matrix } from './matrix.js';
+export { default as transition } from './transition.js';