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

package/services/pointer.js

@@ -1,158 +1,128 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import Service from './Service.js';
-
+import Service from "./Service.js";
 function isTouchEvent(event) {
-  return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;
+  return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
 }
-
 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, "hasRaf", false);
-  }
-
+  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
+    }
+  };
+  hasRaf = false;
   init() {
-    document.documentElement.addEventListener('mouseenter', this, {
+    document.documentElement.addEventListener("mouseenter", this, {
       once: true,
       capture: true
     });
-    var options = {
-      passive: true,
-      capture: true
-    };
-    document.addEventListener('mousemove', this, options);
-    document.addEventListener('touchmove', this, options);
-    document.addEventListener('mousedown', this, options);
-    document.addEventListener('touchstart', this, options);
-    document.addEventListener('mouseup', this, options);
-    document.addEventListener('touchend', this, options);
+    const options = { passive: true, capture: true };
+    document.addEventListener("mousemove", this, options);
+    document.addEventListener("touchmove", this, options);
+    document.addEventListener("mousedown", this, options);
+    document.addEventListener("touchstart", this, options);
+    document.addEventListener("mouseup", this, options);
+    document.addEventListener("touchend", this, options);
     return this;
   }
-
   handleEvent(event) {
     switch (event.type) {
-      case 'mouseenter':
-      case 'mousemove':
-      case 'touchmove':
+      case "mouseenter":
+      case "mousemove":
+      case "touchmove":
         this.handler(event);
         break;
-
-      case 'mousedown':
-      case 'touchstart':
+      case "mousedown":
+      case "touchstart":
         this.downHandler();
         break;
-
-      case 'mouseup':
-      case 'touchend':
+      case "mouseup":
+      case "touchend":
         this.upHandler();
         break;
     }
   }
-
   kill() {
-    document.removeEventListener('mousemove', this);
-    document.removeEventListener('touchmove', this);
-    document.removeEventListener('mousedown', this);
-    document.removeEventListener('touchstart', this);
-    document.removeEventListener('mouseup', this);
-    document.removeEventListener('touchend', this);
+    document.removeEventListener("mousemove", this);
+    document.removeEventListener("touchmove", this);
+    document.removeEventListener("mousedown", this);
+    document.removeEventListener("touchstart", this);
+    document.removeEventListener("mouseup", this);
+    document.removeEventListener("touchend", this);
     return this;
   }
-
   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) {
-    var _event$touches$, _event$touches$2;
-
-    this.event = event;
-    this.yLast = this.y;
-    this.xLast = this.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;
+  updateProps(event) {
+    this.props.event = event;
+    const yLast = this.props.y;
+    const xLast = this.props.x;
+    const y = isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
+    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;
+    const x = isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
+    if (x !== this.props.x) {
+      this.props.x = x;
     }
+    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;
   }
-
-  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
-      }
-    };
-  }
-
 }
-
-var pointer = null;
-export default function usePointer() {
+let instance;
+let pointer;
+function usePointer() {
   if (!pointer) {
-    pointer = new Pointer();
+    if (!instance) {
+      instance = new Pointer();
+    }
+    pointer = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
   }
-
-  var add = pointer.add.bind(pointer);
-  var remove = pointer.remove.bind(pointer);
-  var has = pointer.has.bind(pointer);
-
-  var props = () => pointer.props;
-
-  return {
-    add,
-    remove,
-    has,
-    props
-  };
-}
+  return pointer;
+}
+export {
+  usePointer as default
+};

package/services/raf.cjs

@@ -0,0 +1,81 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/services/raf.js
+var raf_exports = {};
+__export(raf_exports, {
+  default: () => useRaf
+});
+var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_nextFrame = require("../utils/nextFrame.cjs");
+var Raf = class extends import_Service.default {
+  isTicking = false;
+  id = 0;
+  raf = (0, import_nextFrame.getRaf)();
+  cancelRaf = (0, import_nextFrame.getCancelRaf)();
+  props = {
+    time: performance.now()
+  };
+  init() {
+    this.isTicking = true;
+    this.loop();
+  }
+  loop() {
+    this.updateProps();
+    this.trigger(this.props);
+    if (!this.isTicking) {
+      return;
+    }
+    this.id = this.raf(() => this.loop());
+  }
+  kill() {
+    this.cancelRaf(this.id);
+    this.isTicking = false;
+  }
+  updateProps() {
+    this.props.time = window.performance.now();
+    return this.props;
+  }
+};
+var instance;
+var raf;
+function useRaf() {
+  if (!raf) {
+    if (!instance) {
+      instance = new Raf();
+    }
+    raf = {
+      add: instance.add.bind(instance),
+      remove: instance.remove.bind(instance),
+      has: instance.has.bind(instance),
+      props: instance.updateProps.bind(instance)
+    };
+  }
+  return raf;
+}
+module.exports = __toCommonJS(raf_exports);

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

@@ -1,70 +1,50 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import Service from './Service.js';
-import { getRaf, getCancelRaf } from '../utils/nextFrame.js';
-
+import Service from "./Service.js";
+import { getRaf, getCancelRaf } from "../utils/nextFrame.js";
 class Raf extends Service {
-  constructor() {
-    super();
-
-    _defineProperty(this, "isTicking", false);
-
-    _defineProperty(this, "id", 0);
-
-    _defineProperty(this, "raf", getRaf());
-
-    _defineProperty(this, "cancelRaf", getCancelRaf());
-
-    this.loop = this.loop.bind(this);
-  }
-
+  isTicking = false;
+  id = 0;
+  raf = getRaf();
+  cancelRaf = getCancelRaf();
+  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;
-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);
-
-  function props() {
-    return instance.props;
+let instance;
+let raf;
+function useRaf() {
+  if (!raf) {
+    if (!instance) {
+      instance = new Raf();
+    }
+    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;
+}
+export {
+  useRaf as default
+};

package/services/resize.cjs

@@ -0,0 +1,106 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/services/resize.js
+var resize_exports = {};
+__export(resize_exports, {
+  default: () => useResize
+});
+var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_debounce = __toESM(require("../utils/debounce.cjs"), 1);
+var Resize = class extends import_Service.default {
+  props = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    ratio: window.innerWidth / window.innerHeight,
+    orientation: "square"
+  };
+  handler;
+  init() {
+    this.handler = (0, import_debounce.default)(() => {
+      this.updateProps();
+      this.trigger(this.props);
+    }).bind(this);
+    window.addEventListener("resize", this.handler);
+    return this;
+  }
+  kill() {
+    window.removeEventListener("resize", this.handler);
+  }
+  updateProps() {
+    this.props.width = window.innerWidth;
+    this.props.height = window.innerHeight;
+    this.props.ratio = window.innerWidth / window.innerHeight;
+    this.props.orientation = "square";
+    if (this.props.ratio > 1) {
+      this.props.orientation = "landscape";
+    }
+    if (this.props.ratio < 1) {
+      this.props.orientation = "portrait";
+    }
+    if (this.breakpointElement) {
+      this.props.breakpoint = this.breakpoint;
+      this.props.breakpoints = this.breakpoints;
+    } else {
+      this.props.breakpoint = void 0;
+      this.props.breakpoints = void 0;
+    }
+    return this.props;
+  }
+  get breakpointElement() {
+    return document.querySelector("[data-breakpoint]");
+  }
+  get breakpoint() {
+    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
+  }
+  get breakpoints() {
+    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
+    return breakpoints.split(",");
+  }
+};
+var instance;
+var resize;
+function useResize() {
+  if (!resize) {
+    if (!instance) {
+      instance = new Resize();
+    }
+    const add = instance.add.bind(instance);
+    const remove = instance.remove.bind(instance);
+    const has = instance.has.bind(instance);
+    const props = instance.updateProps.bind(instance);
+    resize = {
+      add,
+      remove,
+      has,
+      props
+    };
+  }
+  return resize;
+}
+module.exports = __toCommonJS(resize_exports);

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