@studiometa/js-toolkit 2.2.3 → 2.4.1

package/decorators/withVue2.js

@@ -4,6 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+import { isDev, isFunction } from "../utils/index.js";
 var withVue2_default = (BaseClass, Vue) => {
   var _a, _b, _c;
   return _c = class extends BaseClass {
@@ -13,10 +14,16 @@ var withVue2_default = (BaseClass, Vue) => {
       __publicField(this, "$vue");
       const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
       if (!vueConfig) {
-        throw new Error("[withVue] You must define a `vueConfig` object.");
+        if (isDev) {
+          throw new Error("[withVue] You must define a `vueConfig` object.");
+        }
+        return;
       }
-      if (typeof vueConfig.render !== "function") {
-        throw new Error("[withVue] You must define a `render` function in vueConfig.");
+      if (!isFunction(vueConfig.render)) {
+        if (isDev) {
+          throw new Error("[withVue] You must define a `render` function in vueConfig.");
+        }
+        return;
       }
       this.$vue = new Vue(vueConfig);
       this.$on("mounted", () => {

package/helpers/getDirectChildren.cjs

@@ -0,0 +1,46 @@
+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/helpers/getDirectChildren.js
+var getDirectChildren_exports = {};
+__export(getDirectChildren_exports, {
+  getDirectChildren: () => getDirectChildren,
+  isDirectChild: () => isDirectChild
+});
+module.exports = __toCommonJS(getDirectChildren_exports);
+var import_utils = require("../utils/index.cjs");
+function getDirectChildren(parentInstance, parentName, childrenName) {
+  const children = parentInstance.$children[childrenName];
+  const nestedParents = parentInstance.$children[parentName];
+  if (!(0, import_utils.isArray)(children)) {
+    return [];
+  }
+  if (!(0, import_utils.isArray)(nestedParents) || nestedParents.length <= 0) {
+    return children;
+  }
+  return children.filter((child) => {
+    return nestedParents.every((nestedParent) => {
+      const nestedChildren = nestedParent.$children[childrenName];
+      return (0, import_utils.isArray)(nestedChildren) ? !nestedChildren.includes(child) : true;
+    });
+  });
+}
+function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
+  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
+}
+if (module.exports.default) module.exports = module.exports.default;

package/helpers/getDirectChildren.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @typedef {import('../Base/index.js').default} Base
+ */
+/**
+ * Get direct children from a parent when working with nested components.
+ *
+ * @template {Base} T
+ * @param   {Base} parentInstance
+ * @param   {string} parentName
+ * @param   {string} childrenName
+ * @returns {Array<T>}
+ */
+export function getDirectChildren<T extends import("../Base/index.js").default>(parentInstance: Base, parentName: string, childrenName: string): T[];
+/**
+ * Test if a component instance is a direct child from the given component.
+ *
+ * @param   {Base}    parentInstance
+ * @param   {string}  parentName
+ * @param   {string}  childrenName
+ * @param   {Base}    childInstance
+ * @returns {boolean}
+ */
+export function isDirectChild(parentInstance: Base, parentName: string, childrenName: string, childInstance: Base): boolean;
+export type Base = import('../Base/index.js').default;

package/helpers/getDirectChildren.js

@@ -0,0 +1,24 @@
+import { isArray } from "../utils/index.js";
+function getDirectChildren(parentInstance, parentName, childrenName) {
+  const children = parentInstance.$children[childrenName];
+  const nestedParents = parentInstance.$children[parentName];
+  if (!isArray(children)) {
+    return [];
+  }
+  if (!isArray(nestedParents) || nestedParents.length <= 0) {
+    return children;
+  }
+  return children.filter((child) => {
+    return nestedParents.every((nestedParent) => {
+      const nestedChildren = nestedParent.$children[childrenName];
+      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;
+    });
+  });
+}
+function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
+  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);
+}
+export {
+  getDirectChildren,
+  isDirectChild
+};

package/helpers/importOnInteraction.cjs

@@ -23,8 +23,9 @@ __export(importOnInteraction_exports, {
 });
 module.exports = __toCommonJS(importOnInteraction_exports);
 var import_utils = require("./utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
-  const normalizedEvents = typeof events === "string" ? [events] : events;
+  const normalizedEvents = (0, import_utils2.isString)(events) ? [events] : events;
   let ResolvedClass;
   const resolver = (resolve) => {
     fn().then((module2) => {

package/helpers/importOnInteraction.js

@@ -1,6 +1,7 @@
 import { getTargetElements } from "./utils.js";
+import { isString } from "../utils/index.js";
 function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
-  const normalizedEvents = typeof events === "string" ? [events] : events;
+  const normalizedEvents = isString(events) ? [events] : events;
   let ResolvedClass;
   const resolver = (resolve) => {
     fn().then((module) => {

package/helpers/importWhenVisible.cjs

@@ -23,13 +23,14 @@ __export(importWhenVisible_exports, {
 });
 module.exports = __toCommonJS(importWhenVisible_exports);
 var import_utils = require("./utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
   let ResolvedClass;
   const resolver = (resolve, cb) => {
     fn().then((module2) => {
       ResolvedClass = "default" in module2 ? module2.default : module2;
       resolve(ResolvedClass);
-      if (typeof cb === "function") {
+      if ((0, import_utils2.isFunction)(cb)) {
         cb();
       }
     });

package/helpers/importWhenVisible.js

@@ -1,11 +1,12 @@
 import { getTargetElements } from "./utils.js";
+import { isFunction } from "../utils/index.js";
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
   let ResolvedClass;
   const resolver = (resolve, cb) => {
     fn().then((module) => {
       ResolvedClass = "default" in module ? module.default : module;
       resolve(ResolvedClass);
-      if (typeof cb === "function") {
+      if (isFunction(cb)) {
         cb();
       }
     });

package/helpers/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);
 
@@ -30,6 +31,7 @@ __export(helpers_exports, {
 });
 module.exports = __toCommonJS(helpers_exports);
 var import_createApp = __toESM(require("./createApp.cjs"), 1);
+__reExport(helpers_exports, require("./getDirectChildren.cjs"), module.exports);
 var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cjs"), 1);
 var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1);
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);

package/helpers/index.d.ts

@@ -1,4 +1,5 @@
 export { default as createApp } from "./createApp.js";
+export * from "./getDirectChildren.js";
 export { default as getInstanceFromElement } from "./getInstanceFromElement.js";
 export { default as importOnInteraction } from "./importOnInteraction.js";
 export { default as importWhenIdle } from "./importWhenIdle.js";

package/helpers/index.js

@@ -1,4 +1,5 @@
 import { default as default2 } from "./createApp.js";
+export * from "./getDirectChildren.js";
 import { default as default3 } from "./getInstanceFromElement.js";
 import { default as default4 } from "./importOnInteraction.js";
 import { default as default5 } from "./importWhenIdle.js";

package/helpers/utils.cjs

@@ -23,11 +23,12 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 var import_utils = require("../Base/utils.cjs");
+var import_utils2 = require("../utils/index.cjs");
 function getTargetElements(nameOrSelectorOrElement, context) {
-  if (typeof nameOrSelectorOrElement === "string") {
+  if ((0, import_utils2.isString)(nameOrSelectorOrElement)) {
     return (0, import_utils.getComponentElements)(nameOrSelectorOrElement, context);
   }
-  if (!Array.isArray(nameOrSelectorOrElement)) {
+  if (!(0, import_utils2.isArray)(nameOrSelectorOrElement)) {
     return [nameOrSelectorOrElement];
   }
   return nameOrSelectorOrElement;

package/helpers/utils.js

@@ -1,9 +1,10 @@
 import { getComponentElements } from "../Base/utils.js";
+import { isString, isArray } from "../utils/index.js";
 function getTargetElements(nameOrSelectorOrElement, context) {
-  if (typeof nameOrSelectorOrElement === "string") {
+  if (isString(nameOrSelectorOrElement)) {
     return getComponentElements(nameOrSelectorOrElement, context);
   }
-  if (!Array.isArray(nameOrSelectorOrElement)) {
+  if (!isArray(nameOrSelectorOrElement)) {
     return [nameOrSelectorOrElement];
   }
   return nameOrSelectorOrElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.2.3",
+  "version": "2.4.1",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -41,5 +41,8 @@
   "dependencies": {
     "@motionone/easing": "^10.9.0",
     "deepmerge": "^4.2.2"
+  },
+  "devDependencies": {
+    "vue": "2.6"
   }
 }

package/services/raf.cjs

@@ -1,8 +1,6 @@
-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)
@@ -16,7 +14,6 @@ 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);
 
 // packages/js-toolkit/services/raf.js
@@ -28,7 +25,7 @@ module.exports = __toCommonJS(raf_exports);
 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"]);
 function createRafService() {
   let isTicking = false;
@@ -37,7 +34,7 @@ function createRafService() {
     callbacks.forEach(function forEachCallback(callback) {
       scheduler.update(function rafUpdate() {
         const render = callback(props2);
-        if ((0, import_isFunction.default)(render)) {
+        if ((0, import_is.isFunction)(render)) {
           scheduler.render(function rafRender() {
             render(props2);
           });

package/services/raf.js

@@ -1,7 +1,7 @@
 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"]);
 function createRafService() {
   let isTicking = false;

package/utils/css/animate.cjs

@@ -25,16 +25,13 @@ __export(animate_exports, {
   animate: () => animate
 });
 module.exports = __toCommonJS(animate_exports);
-var import_easing = require("@motionone/easing");
 var import_math = require("../math/index.cjs");
-var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
+var import_is = require("../is.cjs");
 var import_transform = __toESM(require("./transform.cjs"), 1);
-var import_raf = __toESM(require("../../services/raf.cjs"), 1);
 var import_scheduler = require("../scheduler.cjs");
-var import_noop = require("../noop.cjs");
+var import_tween = require("../tween.cjs");
 var id = 0;
 var running = /* @__PURE__ */ new WeakMap();
-var PROGRESS_PRECISION = 1e-4;
 var CSSUnitConverter = {
   "%": (value, getSizeRef) => value * getSizeRef() / 100,
   vh: (value) => value * window.innerHeight / 100,
@@ -43,7 +40,7 @@ var CSSUnitConverter = {
   vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
 };
 function getAnimationStepValue(val, getSizeRef) {
-  if (typeof val === "number") {
+  if ((0, import_is.isNumber)(val)) {
     return val;
   }
   if (!val[1] || !CSSUnitConverter[val[1]]) {
@@ -51,15 +48,6 @@ function getAnimationStepValue(val, getSizeRef) {
   }
   return CSSUnitConverter[val[1]](val[0], getSizeRef);
 }
-function normalizeEase(ease) {
-  if (!(0, import_isDefined.default)(ease)) {
-    return import_noop.noopValue;
-  }
-  if (Array.isArray(ease)) {
-    return (0, import_easing.cubicBezier)(...ease);
-  }
-  return ease;
-}
 var generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => (0, import_math.lerp)(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
 var widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
 var heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
@@ -87,18 +75,18 @@ function render(element, from, to, progress) {
   import_scheduler.domScheduler.read(function renderRead() {
     var _a, _b;
     let opacity = false;
-    if ((0, import_isDefined.default)(from.opacity) || (0, import_isDefined.default)(to.opacity)) {
+    if ((0, import_is.isDefined)(from.opacity) || (0, import_is.isDefined)(to.opacity)) {
       opacity = (0, import_math.map)(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
     } else if (element.style.opacity) {
       opacity = "";
     }
     let transformOrigin = false;
-    if ((0, import_isDefined.default)(to.transformOrigin)) {
+    if ((0, import_is.isDefined)(to.transformOrigin)) {
       transformOrigin = to.transformOrigin;
     } else if (element.style.transformOrigin) {
       transformOrigin = "";
     }
-    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_isDefined.default)(from[name]) || (0, import_isDefined.default)(to[name])).map((name) => {
+    const props = Object.fromEntries(import_transform.TRANSFORM_PROPS.filter((name) => (0, import_is.isDefined)(from[name]) || (0, import_is.isDefined)(to[name])).map((name) => {
       return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
     }));
     import_scheduler.domScheduler.write(function renderWrite() {
@@ -113,91 +101,42 @@ function render(element, from, to, progress) {
   });
 }
 function animate(element, keyframes, options = {}) {
-  var _a;
-  const raf = (0, import_raf.default)();
-  let progressValue = 0;
-  let easedProgress = 0;
-  if (!running.has(element)) {
-    running.set(element, /* @__PURE__ */ new Map());
-  }
-  const ease = normalizeEase(options.easing);
-  let duration = (_a = options.duration) != null ? _a : 1;
-  duration *= 1e3;
-  let startTime = performance.now();
-  let endTime = startTime + duration;
-  const key = `animate-${id}`;
-  id += 1;
-  const { onProgress = import_noop.noop, onFinish = import_noop.noop } = options;
-  let isRunning = false;
   const keyframesCount = keyframes.length - 1;
   const normalizedKeyframes = keyframes.map((keyframe, index) => {
-    var _a2;
+    var _a;
     return {
       ...keyframe,
-      offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
-      easing: normalizeEase(keyframe.easing)
+      offset: (_a = keyframe.offset) != null ? _a : index / keyframesCount,
+      easing: (0, import_tween.normalizeEase)(keyframe.easing)
     };
   });
-  function pause() {
-    isRunning = false;
-    raf.remove(key);
+  if (!running.has(element)) {
+    running.set(element, /* @__PURE__ */ new Map());
   }
-  function progress(newProgress) {
-    if (typeof newProgress === "undefined") {
-      return progressValue;
-    }
-    progressValue = newProgress;
-    if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
-      progressValue = 1;
-      pause();
-      import_scheduler.domScheduler.afterWrite(() => onFinish(progressValue, easedProgress));
-    }
-    easedProgress = ease(progressValue);
+  const key = `animate-${id}`;
+  id += 1;
+  function callback(progress) {
     let toIndex = 0;
-    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
+    while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= progress && normalizedKeyframes[toIndex].offset !== 1) {
       toIndex += 1;
     }
-    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
-    onProgress(progressValue, easedProgress);
-    return progressValue;
-  }
-  function tick(props) {
-    if (!isRunning) {
-      raf.remove(key);
-      return;
-    }
-    progress((0, import_math.clamp01)((0, import_math.map)(props.time, startTime, endTime, 0, 1)));
+    render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], progress);
   }
-  function start() {
-    const runningKeys = running.get(element);
-    runningKeys.forEach((runningPause, runningKey) => {
-      runningPause();
-      runningKeys.delete(runningKey);
-    });
-    runningKeys.set(key, pause);
-    running.set(element, runningKeys);
-    startTime = performance.now();
-    endTime = startTime + duration;
-    progressValue = 0;
-    easedProgress = 0;
-    isRunning = true;
-    raf.add(key, tick);
-  }
-  function play() {
-    if (isRunning) {
-      return;
+  const controls = (0, import_tween.tween)(callback, {
+    ...options,
+    onStart() {
+      if ((0, import_is.isFunction)(options.onStart)) {
+        options.onStart();
+      }
+      const runningKeys = running.get(element);
+      runningKeys.forEach((runningPause, runningKey) => {
+        runningPause();
+        runningKeys.delete(runningKey);
+      });
+      runningKeys.set(key, controls.pause);
+      running.set(element, runningKeys);
     }
-    startTime = performance.now() - (0, import_math.lerp)(0, duration, progressValue);
-    endTime = startTime + duration;
-    isRunning = true;
-    raf.add(key, tick);
-  }
-  return {
-    start,
-    finish: () => progress(1),
-    pause,
-    play,
-    progress
-  };
+  });
+  return controls;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/utils/css/animate.d.ts

@@ -1,10 +1,9 @@
 /**
  * @typedef {import('./transform.js').TransformProps} TransformProps
- * @typedef {[number, number, number, number]} BezierCurve
  * @typedef {TransformProps & {
  *   opacity?: number;
  *   transformOrigin?: string;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
+ *   easing?: import('../math/createEases.js').EasingFunction|import('../tween.js').BezierCurve;
  *   offset?: number;
  * }} Keyframe
  * @typedef {Keyframe & {
@@ -23,26 +22,15 @@
  * Animate an element.
  * @param   {HTMLElement} element
  * @param   {Keyframe[]} keyframes
- * @param   {{
- *   duration?: number;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
- *   onProgress?: (progress: number, easedProgress: number) => void;
- *   onFinish?: (progress: number, easedProgress: number) => void;
- *  }} [options]
+ * @param   {import('../tween.js').TweenOptions} [options]
  * @returns {Animate}
  */
-export function animate(element: HTMLElement, keyframes: Keyframe[], options?: {
-    duration?: number;
-    easing?: import('../math/createEases.js').EasingFunction | BezierCurve;
-    onProgress?: (progress: number, easedProgress: number) => void;
-    onFinish?: (progress: number, easedProgress: number) => void;
-}): Animate;
+export function animate(element: HTMLElement, keyframes: Keyframe[], options?: import('../tween.js').TweenOptions): Animate;
 export type TransformProps = import('./transform.js').TransformProps;
-export type BezierCurve = [number, number, number, number];
 export type Keyframe = TransformProps & {
     opacity?: number;
     transformOrigin?: string;
-    easing?: import('../math/createEases.js').EasingFunction | [number, number, number, number];
+    easing?: import('../math/createEases.js').EasingFunction | import('../tween.js').BezierCurve;
     offset?: number;
 };
 export type NormalizedKeyframe = Keyframe & {