@studiometa/js-toolkit 2.2.1 → 2.3.0

package/services/raf.cjs

@@ -1,10 +1,7 @@
-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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,12 +14,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // packages/js-toolkit/services/raf.js
 var raf_exports = {};
@@ -30,69 +22,57 @@ __export(raf_exports, {
   default: () => useRaf
 });
 module.exports = __toCommonJS(raf_exports);
-var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_service = require("./service.cjs");
 var import_nextFrame = require("../utils/nextFrame.cjs");
 var import_scheduler = require("../utils/scheduler.cjs");
-var import_isFunction = __toESM(require("../utils/isFunction.cjs"), 1);
+var import_is = require("../utils/is.cjs");
 var scheduler = (0, import_scheduler.useScheduler)(["update", "render"]);
-var Raf = class extends import_Service.default {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "isTicking", false);
-    __publicField(this, "id", 0);
-    __publicField(this, "raf", (0, import_nextFrame.getRaf)());
-    __publicField(this, "cancelRaf", (0, import_nextFrame.getCancelRaf)());
-    __publicField(this, "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;
-  }
-  trigger(...args) {
-    this.callbacks.forEach(function forEachCallback(callback) {
+function createRafService() {
+  let isTicking = false;
+  const RAF = (0, import_nextFrame.getRaf)();
+  function trigger(props2) {
+    callbacks.forEach(function forEachCallback(callback) {
       scheduler.update(function rafUpdate() {
-        const render = callback(...args);
-        if ((0, import_isFunction.default)(render)) {
+        const render = callback(props2);
+        if ((0, import_is.isFunction)(render)) {
           scheduler.render(function rafRender() {
-            render(...args);
+            render(props2);
           });
         }
       });
     });
-    return this;
   }
-};
-var instance;
+  function loop() {
+    props.time = performance.now();
+    trigger(props);
+    if (!isTicking) {
+      return;
+    }
+    RAF(loop);
+  }
+  const { add, remove, has, props, callbacks } = (0, import_service.useService)({
+    props: {
+      time: performance.now()
+    },
+    init() {
+      isTicking = true;
+      RAF(loop);
+    },
+    kill() {
+      isTicking = false;
+    }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
+}
 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)
-    };
+    raf = createRafService();
   }
   return raf;
 }

package/services/raf.d.ts

@@ -1,14 +1,6 @@
 /**
  * Use the RequestAnimationFrame (raf) service.
  *
- * ```js
- * import { useRaf } from '@studiometa/js/services';
- * const { add, remove, props } = useRag();
- * add(id, (props) => {});
- * remove(id);
- * props();
- * ```
- *
  * @returns {RafService}
  */
 export default function useRaf(): RafService;

package/services/raf.js

@@ -1,72 +1,54 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import Service from "./Service.js";
-import { getRaf, getCancelRaf } from "../utils/nextFrame.js";
+import { useService } from "./service.js";
+import { getRaf as getRequestAnimationFrame } from "../utils/nextFrame.js";
 import { useScheduler } from "../utils/scheduler.js";
-import isFunction from "../utils/isFunction.js";
+import { isFunction } from "../utils/is.js";
 const scheduler = useScheduler(["update", "render"]);
-class Raf extends Service {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "isTicking", false);
-    __publicField(this, "id", 0);
-    __publicField(this, "raf", getRaf());
-    __publicField(this, "cancelRaf", getCancelRaf());
-    __publicField(this, "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;
-  }
-  trigger(...args) {
-    this.callbacks.forEach(function forEachCallback(callback) {
+function createRafService() {
+  let isTicking = false;
+  const RAF = getRequestAnimationFrame();
+  function trigger(props2) {
+    callbacks.forEach(function forEachCallback(callback) {
       scheduler.update(function rafUpdate() {
-        const render = callback(...args);
+        const render = callback(props2);
         if (isFunction(render)) {
           scheduler.render(function rafRender() {
-            render(...args);
+            render(props2);
           });
         }
       });
     });
-    return this;
   }
+  function loop() {
+    props.time = performance.now();
+    trigger(props);
+    if (!isTicking) {
+      return;
+    }
+    RAF(loop);
+  }
+  const { add, remove, has, props, callbacks } = useService({
+    props: {
+      time: performance.now()
+    },
+    init() {
+      isTicking = true;
+      RAF(loop);
+    },
+    kill() {
+      isTicking = false;
+    }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => 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)
-    };
+    raf = createRafService();
   }
   return raf;
 }

package/services/resize.cjs

@@ -4,7 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 
 // packages/js-toolkit/services/resize.js
 var resize_exports = {};
@@ -30,78 +25,74 @@ __export(resize_exports, {
   default: () => useResize
 });
 module.exports = __toCommonJS(resize_exports);
-var import_Service = __toESM(require("./Service.cjs"), 1);
+var import_service = require("./service.cjs");
 var import_debounce = __toESM(require("../utils/debounce.cjs"), 1);
-var Resize = class extends import_Service.default {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "props", {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      ratio: window.innerWidth / window.innerHeight,
-      orientation: "square"
-    });
-    __publicField(this, "handler");
-  }
-  init() {
-    this.handler = (0, import_debounce.default)(() => {
-      this.updateProps();
-      this.trigger(this.props);
-    }).bind(this);
-    window.addEventListener("resize", this.handler);
-    return this;
+var breakpointElement;
+var breakpoints = [];
+function getBreakpointElement() {
+  if (!breakpointElement) {
+    breakpointElement = document.querySelector("[data-breakpoint]");
   }
-  kill() {
-    window.removeEventListener("resize", this.handler);
+  return breakpointElement;
+}
+function getBreakpoint() {
+  return getBreakpointElement() ? window.getComputedStyle(getBreakpointElement(), "::before").getPropertyValue("content").replaceAll('"', "") : void 0;
+}
+function getBreakpoints() {
+  if (!getBreakpointElement() || breakpoints.length) {
+    return breakpoints;
   }
-  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";
+  breakpoints = window.getComputedStyle(getBreakpointElement(), "::after").getPropertyValue("content").replaceAll('"', "").split(",");
+  return breakpoints;
+}
+function createResizeService() {
+  function updateProps() {
+    props.width = window.innerWidth;
+    props.height = window.innerHeight;
+    props.ratio = window.innerWidth / window.innerHeight;
+    props.orientation = "square";
+    if (props.ratio > 1) {
+      props.orientation = "landscape";
     }
-    if (this.breakpointElement) {
-      this.props.breakpoint = this.breakpoint;
-      this.props.breakpoints = this.breakpoints;
-    } else {
-      this.props.breakpoint = void 0;
-      this.props.breakpoints = void 0;
+    if (props.ratio < 1) {
+      props.orientation = "portrait";
     }
-    return this.props;
-  }
-  get breakpointElement() {
-    return document.querySelector("[data-breakpoint]");
+    return props;
   }
-  get breakpoint() {
-    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replaceAll('"', "");
-  }
-  get breakpoints() {
-    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replaceAll('"', "");
-    return breakpoints.split(",");
-  }
-};
-var instance;
+  const onResize = (0, import_debounce.default)(() => {
+    trigger(updateProps());
+  });
+  const { add, remove, has, trigger, props } = (0, import_service.useService)({
+    props: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      ratio: window.innerWidth / window.innerHeight,
+      orientation: "square",
+      get breakpoint() {
+        return getBreakpoint();
+      },
+      get breakpoints() {
+        return getBreakpoints();
+      }
+    },
+    init() {
+      window.addEventListener("resize", onResize);
+    },
+    kill() {
+      window.removeEventListener("resize", onResize);
+    }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
+}
 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
-    };
+    resize = createResizeService();
   }
   return resize;
 }

package/services/resize.d.ts

@@ -1,13 +1,6 @@
 /**
  * Use the resize service.
  *
- * ```js
- * import useResize from '@studiometa/js-toolkit/services/resize';
- * const { add, remove, props } = useResize();
- * add(key, (props) => {});
- * remove(key);
- * props();
- * ```
  * @returns {ResizeService}
  */
 export default function useResize(): ResizeService;

package/services/resize.js

@@ -1,81 +1,71 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import Service from "./Service.js";
+import { useService } from "./service.js";
 import debounce from "../utils/debounce.js";
-class Resize extends Service {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "props", {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      ratio: window.innerWidth / window.innerHeight,
-      orientation: "square"
-    });
-    __publicField(this, "handler");
-  }
-  init() {
-    this.handler = debounce(() => {
-      this.updateProps();
-      this.trigger(this.props);
-    }).bind(this);
-    window.addEventListener("resize", this.handler);
-    return this;
+let breakpointElement;
+let breakpoints = [];
+function getBreakpointElement() {
+  if (!breakpointElement) {
+    breakpointElement = document.querySelector("[data-breakpoint]");
   }
-  kill() {
-    window.removeEventListener("resize", this.handler);
+  return breakpointElement;
+}
+function getBreakpoint() {
+  return getBreakpointElement() ? window.getComputedStyle(getBreakpointElement(), "::before").getPropertyValue("content").replaceAll('"', "") : void 0;
+}
+function getBreakpoints() {
+  if (!getBreakpointElement() || breakpoints.length) {
+    return breakpoints;
   }
-  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";
+  breakpoints = window.getComputedStyle(getBreakpointElement(), "::after").getPropertyValue("content").replaceAll('"', "").split(",");
+  return breakpoints;
+}
+function createResizeService() {
+  function updateProps() {
+    props.width = window.innerWidth;
+    props.height = window.innerHeight;
+    props.ratio = window.innerWidth / window.innerHeight;
+    props.orientation = "square";
+    if (props.ratio > 1) {
+      props.orientation = "landscape";
     }
-    if (this.breakpointElement) {
-      this.props.breakpoint = this.breakpoint;
-      this.props.breakpoints = this.breakpoints;
-    } else {
-      this.props.breakpoint = void 0;
-      this.props.breakpoints = void 0;
+    if (props.ratio < 1) {
+      props.orientation = "portrait";
     }
-    return this.props;
-  }
-  get breakpointElement() {
-    return document.querySelector("[data-breakpoint]");
-  }
-  get breakpoint() {
-    return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replaceAll('"', "");
-  }
-  get breakpoints() {
-    const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replaceAll('"', "");
-    return breakpoints.split(",");
+    return props;
   }
+  const onResize = debounce(() => {
+    trigger(updateProps());
+  });
+  const { add, remove, has, trigger, props } = useService({
+    props: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      ratio: window.innerWidth / window.innerHeight,
+      orientation: "square",
+      get breakpoint() {
+        return getBreakpoint();
+      },
+      get breakpoints() {
+        return getBreakpoints();
+      }
+    },
+    init() {
+      window.addEventListener("resize", onResize);
+    },
+    kill() {
+      window.removeEventListener("resize", onResize);
+    }
+  });
+  return {
+    add,
+    remove,
+    has,
+    props: () => props
+  };
 }
-let instance;
 let 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
-    };
+    resize = createResizeService();
   }
   return resize;
 }