@studiometa/js-toolkit 2.0.1 → 2.2.0-alpha.1

package/utils/css/getOffsetSizes.cjs

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/css/getOffsetSizes.js
+var getOffsetSizes_exports = {};
+__export(getOffsetSizes_exports, {
+  default: () => getOffsetSizes
+});
+module.exports = __toCommonJS(getOffsetSizes_exports);
+function getOffsetSizes(element) {
+  let parent = element;
+  let x = -window.pageXOffset;
+  let y = -window.pageYOffset;
+  while (parent) {
+    x += parent.offsetLeft;
+    y += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  const width = element.offsetWidth;
+  const height = element.offsetWidth;
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: width + x,
+    bottom: height + y,
+    left: x
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/getOffsetSizes.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Get a `DOMRect` like `Object` for an element, without its transforms.
+ * @param   {HTMLElement} element
+ * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}
+ */
+export default function getOffsetSizes(element: HTMLElement): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/utils/css/getOffsetSizes.js

@@ -0,0 +1,25 @@
+function getOffsetSizes(element) {
+  let parent = element;
+  let x = -window.pageXOffset;
+  let y = -window.pageYOffset;
+  while (parent) {
+    x += parent.offsetLeft;
+    y += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  const width = element.offsetWidth;
+  const height = element.offsetWidth;
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: width + x,
+    bottom: height + y,
+    left: x
+  };
+}
+export {
+  getOffsetSizes as default
+};

package/utils/css/index.cjs

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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);
 
@@ -24,15 +25,20 @@ var css_exports = {};
 __export(css_exports, {
   addClass: () => import_classes.add,
   addStyle: () => import_styles.add,
+  getOffsetSizes: () => import_getOffsetSizes.default,
   matrix: () => import_matrix.default,
   removeClass: () => import_classes.remove,
   removeStyle: () => import_styles.remove,
   toggleClass: () => import_classes.toggle,
+  transform: () => import_transform.default,
   transition: () => import_transition.default
 });
 module.exports = __toCommonJS(css_exports);
+__reExport(css_exports, require("./animate.cjs"), module.exports);
 var import_classes = require("./classes.cjs");
 var import_styles = require("./styles.cjs");
+var import_getOffsetSizes = __toESM(require("./getOffsetSizes.cjs"), 1);
 var import_matrix = __toESM(require("./matrix.cjs"), 1);
+var import_transform = __toESM(require("./transform.cjs"), 1);
 var import_transition = __toESM(require("./transition.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/index.d.ts

@@ -1,4 +1,7 @@
+export * from "./animate.js";
+export { default as getOffsetSizes } from "./getOffsetSizes.js";
 export { default as matrix } from "./matrix.js";
+export { default as transform } from "./transform.js";
 export { default as transition } from "./transition.js";
 export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
 export { add as addStyle, remove as removeStyle } from "./styles.js";

package/utils/css/index.js

@@ -1,13 +1,18 @@
+export * from "./animate.js";
 import { add, remove, toggle } from "./classes.js";
 import { add as add2, remove as remove2 } from "./styles.js";
-import { default as default2 } from "./matrix.js";
-import { default as default3 } from "./transition.js";
+import { default as default2 } from "./getOffsetSizes.js";
+import { default as default3 } from "./matrix.js";
+import { default as default4 } from "./transform.js";
+import { default as default5 } from "./transition.js";
 export {
   add as addClass,
   add2 as addStyle,
-  default2 as matrix,
+  default2 as getOffsetSizes,
+  default3 as matrix,
   remove as removeClass,
   remove2 as removeStyle,
   toggle as toggleClass,
-  default3 as transition
+  default4 as transform,
+  default5 as transition
 };

package/utils/css/transform.cjs

@@ -0,0 +1,91 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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);
+
+// packages/js-toolkit/utils/css/transform.js
+var transform_exports = {};
+__export(transform_exports, {
+  TRANSFORM_PROPS: () => TRANSFORM_PROPS,
+  default: () => transform
+});
+module.exports = __toCommonJS(transform_exports);
+var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
+var TRANSFORM_PROPS = [
+  "x",
+  "y",
+  "z",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+  "skew",
+  "skewX",
+  "skewY"
+];
+function transform(element, props) {
+  var _a, _b, _c;
+  let value = "";
+  if ((0, import_isDefined.default)(props.x) || (0, import_isDefined.default)(props.y) || (0, import_isDefined.default)(props.z)) {
+    value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
+  }
+  if ((0, import_isDefined.default)(props.rotate)) {
+    value += `rotate(${props.rotate}deg) `;
+  } else {
+    if ((0, import_isDefined.default)(props.rotateX)) {
+      value += `rotateX(${props.rotateX}deg) `;
+    }
+    if ((0, import_isDefined.default)(props.rotateY)) {
+      value += `rotateY(${props.rotateY}deg) `;
+    }
+    if ((0, import_isDefined.default)(props.rotateZ)) {
+      value += `rotateZ(${props.rotateZ}deg) `;
+    }
+  }
+  if ((0, import_isDefined.default)(props.scale)) {
+    value += `scale(${props.scale}) `;
+  } else {
+    if ((0, import_isDefined.default)(props.scaleX)) {
+      value += `scaleX(${props.scaleX}) `;
+    }
+    if ((0, import_isDefined.default)(props.scaleY)) {
+      value += `scaleY(${props.scaleY}) `;
+    }
+    if ((0, import_isDefined.default)(props.scaleZ)) {
+      value += `scaleZ(${props.scaleZ}) `;
+    }
+  }
+  if ((0, import_isDefined.default)(props.skew)) {
+    value += `skew(${props.skew}deg) `;
+  } else {
+    if ((0, import_isDefined.default)(props.skewX)) {
+      value += `skewX(${props.skewX}deg) `;
+    }
+    if ((0, import_isDefined.default)(props.skewY)) {
+      value += `skewY(${props.skewY}deg) `;
+    }
+  }
+  element.style.transform = value;
+  return value;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/transform.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Generate a CSS transform.
+ *
+ * @param   {HTMLElement} element
+ * @param   {TransformProps} props
+ * @returns {string}
+ */
+export default function transform(element: HTMLElement, props: TransformProps): string;
+/**
+ * @typedef {Partial<{
+ *  x: number;
+ *  y: number;
+ *  z: number;
+ *  rotate: number;
+ *  rotateX: number;
+ *  rotateY: number;
+ *  rotateZ: number;
+ *  scale: number;
+ *  scaleX: number;
+ *  scaleY: number;
+ *  scaleZ: number;
+ *  skew: number;
+ *  skewX: number;
+ *  skewY: number;
+ * }>} TransformProps
+ */
+export const TRANSFORM_PROPS: string[];
+export type TransformProps = Partial<{
+    x: number;
+    y: number;
+    z: number;
+    rotate: number;
+    rotateX: number;
+    rotateY: number;
+    rotateZ: number;
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    scaleZ: number;
+    skew: number;
+    skewX: number;
+    skewY: number;
+}>;

package/utils/css/transform.js

@@ -0,0 +1,66 @@
+import isDefined from "../isDefined.js";
+const TRANSFORM_PROPS = [
+  "x",
+  "y",
+  "z",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+  "skew",
+  "skewX",
+  "skewY"
+];
+function transform(element, props) {
+  var _a, _b, _c;
+  let value = "";
+  if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {
+    value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
+  }
+  if (isDefined(props.rotate)) {
+    value += `rotate(${props.rotate}deg) `;
+  } else {
+    if (isDefined(props.rotateX)) {
+      value += `rotateX(${props.rotateX}deg) `;
+    }
+    if (isDefined(props.rotateY)) {
+      value += `rotateY(${props.rotateY}deg) `;
+    }
+    if (isDefined(props.rotateZ)) {
+      value += `rotateZ(${props.rotateZ}deg) `;
+    }
+  }
+  if (isDefined(props.scale)) {
+    value += `scale(${props.scale}) `;
+  } else {
+    if (isDefined(props.scaleX)) {
+      value += `scaleX(${props.scaleX}) `;
+    }
+    if (isDefined(props.scaleY)) {
+      value += `scaleY(${props.scaleY}) `;
+    }
+    if (isDefined(props.scaleZ)) {
+      value += `scaleZ(${props.scaleZ}) `;
+    }
+  }
+  if (isDefined(props.skew)) {
+    value += `skew(${props.skew}deg) `;
+  } else {
+    if (isDefined(props.skewX)) {
+      value += `skewX(${props.skewX}deg) `;
+    }
+    if (isDefined(props.skewY)) {
+      value += `skewY(${props.skewY}deg) `;
+    }
+  }
+  element.style.transform = value;
+  return value;
+}
+export {
+  TRANSFORM_PROPS,
+  transform as default
+};

package/utils/index.cjs

@@ -27,6 +27,8 @@ __export(utils_exports, {
   focusTrap: () => import_focusTrap.default,
   historyPush: () => import_history.push,
   historyReplace: () => import_history.replace,
+  isDefined: () => import_isDefined.default,
+  isFunction: () => import_isFunction.default,
   keyCodes: () => import_keyCodes.default,
   memoize: () => import_memoize.default,
   nextFrame: () => import_nextFrame.default,
@@ -46,9 +48,12 @@ var import_nextTick = __toESM(require("./nextTick.cjs"), 1);
 var import_nextMicrotask = __toESM(require("./nextMicrotask.cjs"), 1);
 var import_throttle = __toESM(require("./throttle.cjs"), 1);
 var import_scrollTo = __toESM(require("./scrollTo.cjs"), 1);
+var import_isDefined = __toESM(require("./isDefined.cjs"), 1);
+var import_isFunction = __toESM(require("./isFunction.cjs"), 1);
 __reExport(utils_exports, require("./css/index.cjs"), module.exports);
 var import_history = require("./history.cjs");
 __reExport(utils_exports, require("./collide/index.cjs"), module.exports);
 __reExport(utils_exports, require("./math/index.cjs"), module.exports);
 __reExport(utils_exports, require("./string/index.cjs"), module.exports);
+__reExport(utils_exports, require("./scheduler.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/index.d.ts

@@ -7,8 +7,11 @@ export { default as nextTick } from "./nextTick.js";
 export { default as nextMicrotask } from "./nextMicrotask.js";
 export { default as throttle } from "./throttle.js";
 export { default as scrollTo } from "./scrollTo.js";
+export { default as isDefined } from "./isDefined.js";
+export { default as isFunction } from "./isFunction.js";
 export * from "./css/index.js";
 export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
+export * from "./scheduler.js";
 export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";

package/utils/index.js

@@ -7,6 +7,8 @@ import { default as default7 } from "./nextTick.js";
 import { default as default8 } from "./nextMicrotask.js";
 import { default as default9 } from "./throttle.js";
 import { default as default10 } from "./scrollTo.js";
+import { default as default11 } from "./isDefined.js";
+import { default as default12 } from "./isFunction.js";
 export * from "./css/index.js";
 import {
   objectToURLSearchParams,
@@ -16,11 +18,14 @@ import {
 export * from "./collide/index.js";
 export * from "./math/index.js";
 export * from "./string/index.js";
+export * from "./scheduler.js";
 export {
   default2 as debounce,
   default3 as focusTrap,
   push as historyPush,
   replace as historyReplace,
+  default11 as isDefined,
+  default12 as isFunction,
   default4 as keyCodes,
   default5 as memoize,
   default6 as nextFrame,

package/utils/isDefined.cjs

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/isDefined.js
+var isDefined_exports = {};
+__export(isDefined_exports, {
+  default: () => isDefined
+});
+module.exports = __toCommonJS(isDefined_exports);
+function isDefined(value) {
+  return typeof value !== "undefined";
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/isDefined.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Test if a value is defined or not.
+ *
+ * @param   {any} value
+ * @returns {boolean}
+ */
+export default function isDefined(value: any): boolean;

package/utils/isDefined.js

@@ -0,0 +1,6 @@
+function isDefined(value) {
+  return typeof value !== "undefined";
+}
+export {
+  isDefined as default
+};

package/utils/isFunction.cjs

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/isFunction.js
+var isFunction_exports = {};
+__export(isFunction_exports, {
+  default: () => isFunction
+});
+module.exports = __toCommonJS(isFunction_exports);
+function isFunction(fn) {
+  return typeof fn === "function";
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/isFunction.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Test if the given value is a function.
+ *
+ * @param   {any} fn
+ * @returns {boolean}
+ */
+export default function isFunction(fn: any): boolean;

package/utils/isFunction.js

@@ -0,0 +1,6 @@
+function isFunction(fn) {
+  return typeof fn === "function";
+}
+export {
+  isFunction as default
+};

package/utils/math/index.cjs

@@ -26,6 +26,7 @@ __export(math_exports, {
   clamp: () => import_clamp.default,
   clamp01: () => import_clamp01.default,
   damp: () => import_damp.default,
+  ease: () => ease,
   inertiaFinalValue: () => import_inertiaFinalValue.default,
   lerp: () => import_lerp.default,
   map: () => import_map.default,
@@ -40,4 +41,5 @@ var import_lerp = __toESM(require("./lerp.cjs"), 1);
 var import_map = __toESM(require("./map.cjs"), 1);
 var import_round = __toESM(require("./round.cjs"), 1);
 __reExport(math_exports, require("./ease.cjs"), module.exports);
+var ease = __toESM(require("./ease.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/utils/math/index.d.ts

@@ -6,3 +6,4 @@ export { default as lerp } from "./lerp.js";
 export { default as map } from "./map.js";
 export { default as round } from "./round.js";
 export * from "./ease.js";
+export * as ease from "./ease.js";

package/utils/math/index.js

@@ -6,10 +6,12 @@ import { default as default6 } from "./lerp.js";
 import { default as default7 } from "./map.js";
 import { default as default8 } from "./round.js";
 export * from "./ease.js";
+import * as ease from "./ease.js";
 export {
   default2 as clamp,
   default3 as clamp01,
   default4 as damp,
+  ease,
   default5 as inertiaFinalValue,
   default6 as lerp,
   default7 as map,

package/utils/scheduler.cjs

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/scheduler.js
+var scheduler_exports = {};
+__export(scheduler_exports, {
+  domScheduler: () => domScheduler,
+  useScheduler: () => useScheduler
+});
+module.exports = __toCommonJS(scheduler_exports);
+function getScheduler(steps) {
+  const stepsFns = {};
+  const api = {};
+  let isScheduled = false;
+  const resolvedPromise = Promise.resolve();
+  function run(tasks) {
+    let task;
+    while (task = tasks.shift()) {
+      task();
+    }
+  }
+  function flush() {
+    steps.forEach(function runStep(step) {
+      run(stepsFns[step]);
+    });
+    isScheduled = false;
+    if (steps.reduce((length, step) => length + stepsFns[step].length, 0) > 0) {
+      scheduleFlush();
+    }
+  }
+  function scheduleFlush() {
+    if (isScheduled) {
+      return;
+    }
+    isScheduled = true;
+    resolvedPromise.then(flush);
+  }
+  steps.forEach((step) => {
+    stepsFns[step] = [];
+    api[step] = function add(fn) {
+      stepsFns[step].push(fn);
+      scheduleFlush();
+    };
+  });
+  return api;
+}
+var instances = /* @__PURE__ */ new Map();
+function useScheduler(steps = ["read", "write"]) {
+  const key = steps.join("-");
+  if (instances.has(key)) {
+    return instances.get(key);
+  }
+  const scheduler = getScheduler(steps);
+  instances.set(key, scheduler);
+  return scheduler;
+}
+var domScheduler = useScheduler(["read", "write", "afterWrite"]);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/scheduler.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Use a scheduler based on the given steps.
+ * @param   {string[]}  steps
+ * @returns {ReturnType<getScheduler>}
+ */
+export function useScheduler(steps?: string[]): ReturnType<typeof getScheduler>;
+export const domScheduler: Record<string, (fn: () => void) => void>;
+/**
+ * Generate a scheduler.
+ */
+export type T = string;
+/**
+ * Generate a scheduler.
+ * @typedef {string} T
+ * @param   {T[]} steps
+ * @returns {Record<T, (fn: () => void) => void>}
+ */
+declare function getScheduler(steps: T[]): Record<string, (fn: () => void) => void>;
+export {};