animejs 4.1.2 → 4.2.0-beta.0

package/dist/modules/waapi/waapi.js

@@ -0,0 +1,470 @@
+/**
+ * Anime.js - waapi - ESM
+ * @version v4.2.0
+ * @license MIT
+ * @copyright 2025 - Julian Garnier
+ */
+
+import { isNil, isUnd, stringStartsWith, isKey, isObj, isArr, isStr, toLowerCase, isFnc, isNum } from '../core/helpers.js';
+import { scope, globals } from '../core/globals.js';
+import { registerTargets } from '../core/targets.js';
+import { setValue, getFunctionValue } from '../core/values.js';
+import { isBrowser, validTransforms, noop, transformsSymbol, shortTransforms, transformsFragmentStrings, emptyString, K } from '../core/consts.js';
+import { none } from '../easings/none.js';
+import { parseEaseString, easeTypes, easeInPower } from '../easings/parser.js';
+import { addWAAPIAnimation } from './composition.js';
+
+/**
+ * @import {
+ *   Callback,
+ *   EasingFunction,
+ *   EasingParam,
+ *   DOMTarget,
+ *   DOMTargetsParam,
+ *   DOMTargetsArray,
+ *   WAAPIAnimationParams,
+ *   WAAPITweenOptions,
+ *   WAAPIKeyframeValue,
+ *   WAAPICallback,
+ *   WAAPITweenValue
+ * } from '../types/index.js'
+*/
+
+/**
+ * @import {
+ *   Spring,
+ * } from '../spring/spring.js'
+*/
+
+/**
+ * @import {
+ *   ScrollObserver,
+ * } from '../events/scroll.js'
+*/
+
+/**
+ * Converts an easing function into a valid CSS linear() timing function string
+ * @param {EasingFunction} fn
+ * @param {number} [samples=100]
+ * @returns {string} CSS linear() timing function
+ */
+const easingToLinear = (fn, samples = 100) => {
+  const points = [];
+  for (let i = 0; i <= samples; i++) points.push(fn(i / samples));
+  return `linear(${points.join(', ')})`;
+};
+
+const WAAPIEasesLookups = {
+  in: 'ease-in',
+  out: 'ease-out',
+  inOut: 'ease-in-out',
+};
+
+const WAAPIeases = /*#__PURE__*/(() => {
+  const list = {};
+  for (let type in easeTypes) list[type] = (/** @type {String|Number} */p) => easeTypes[type](easeInPower(p));
+  return /** @type {Record<String, EasingFunction>} */(list);
+})();
+
+/**
+ * @param  {EasingParam} ease
+ * @return {String}
+ */
+const parseWAAPIEasing = (ease) => {
+  let parsedEase = WAAPIEasesLookups[ease];
+  if (parsedEase) return parsedEase;
+  parsedEase = 'linear';
+  if (isStr(ease)) {
+    if (
+      stringStartsWith(ease, 'linear') ||
+      stringStartsWith(ease, 'cubic-') ||
+      stringStartsWith(ease, 'steps') ||
+      stringStartsWith(ease, 'ease')
+    ) {
+      parsedEase = ease;
+    } else if (stringStartsWith(ease, 'cubicB')) {
+      parsedEase = toLowerCase(ease);
+    } else {
+      const parsed = parseEaseString(ease, WAAPIeases, WAAPIEasesLookups);
+      if (isFnc(parsed)) parsedEase = parsed === none ? 'linear' : easingToLinear(parsed);
+    }
+    WAAPIEasesLookups[ease] = parsedEase;
+  } else if (isFnc(ease)) {
+    const easing = easingToLinear(ease);
+    if (easing) parsedEase = easing;
+  } else if (/** @type {Spring} */(ease).ease) {
+    parsedEase = easingToLinear(/** @type {Spring} */(ease).ease);
+  }
+  return parsedEase;
+};
+
+const transformsShorthands = ['x', 'y', 'z'];
+const commonDefaultPXProperties = [
+  'perspective',
+  'width',
+  'height',
+  'margin',
+  'padding',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'borderWidth',
+  'fontSize',
+  'borderRadius',
+  ...transformsShorthands
+];
+
+const validIndividualTransforms = /*#__PURE__*/ (() => [...transformsShorthands, ...validTransforms.filter(t => ['X', 'Y', 'Z'].some(axis => t.endsWith(axis)))])();
+
+let transformsPropertiesRegistered = null;
+
+/**
+ * @param  {String} propName
+ * @param  {WAAPIKeyframeValue} value
+ * @param  {DOMTarget} $el
+ * @param  {Number} i
+ * @param  {Number} targetsLength
+ * @return {String}
+ */
+const normalizeTweenValue = (propName, value, $el, i, targetsLength) => {
+  let v = getFunctionValue(/** @type {any} */(value), $el, i, targetsLength);
+  if (!isNum(v)) return v;
+  if (commonDefaultPXProperties.includes(propName) || stringStartsWith(propName, 'translate')) return `${v}px`;
+  if (stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew')) return `${v}deg`;
+  return `${v}`;
+};
+
+/**
+ * @param  {DOMTarget} $el
+ * @param  {String} propName
+ * @param  {WAAPIKeyframeValue} from
+ * @param  {WAAPIKeyframeValue} to
+ * @param  {Number} i
+ * @param  {Number} targetsLength
+ * @return {WAAPITweenValue}
+ */
+const parseIndividualTweenValue = ($el, propName, from, to, i, targetsLength) => {
+  /** @type {WAAPITweenValue} */
+  let tweenValue = '0';
+  const computedTo = !isUnd(to) ? normalizeTweenValue(propName, to, $el, i, targetsLength) : getComputedStyle($el)[propName];
+  if (!isUnd(from)) {
+    const computedFrom = normalizeTweenValue(propName, from, $el, i, targetsLength);
+    tweenValue = [computedFrom, computedTo];
+  } else {
+    tweenValue = isArr(to) ? to.map((/** @type {any} */v) => normalizeTweenValue(propName, v, $el, i, targetsLength)) : computedTo;
+  }
+  return tweenValue;
+};
+
+class WAAPIAnimation {
+/**
+ * @param {DOMTargetsParam} targets
+ * @param {WAAPIAnimationParams} params
+ */
+  constructor(targets, params) {
+
+    if (scope.current) scope.current.register(this);
+
+    // Skip the registration and fallback to no animation in case CSS.registerProperty is not supported
+    if (isNil(transformsPropertiesRegistered)) {
+      if (isBrowser && (isUnd(CSS) || !Object.hasOwnProperty.call(CSS, 'registerProperty'))) {
+        transformsPropertiesRegistered = false;
+      } else {
+        validTransforms.forEach(t => {
+          const isSkew = stringStartsWith(t, 'skew');
+          const isScale = stringStartsWith(t, 'scale');
+          const isRotate = stringStartsWith(t, 'rotate');
+          const isTranslate = stringStartsWith(t, 'translate');
+          const isAngle = isRotate || isSkew;
+          const syntax = isAngle ? '<angle>' : isScale ? "<number>" : isTranslate ? "<length-percentage>" : "*";
+          try {
+            CSS.registerProperty({
+              name: '--' + t,
+              syntax,
+              inherits: false,
+              initialValue: isTranslate ? '0px' : isAngle ? '0deg' : isScale ? '1' : '0',
+            });
+          } catch {}        });
+        transformsPropertiesRegistered = true;
+      }
+    }
+
+    const parsedTargets = registerTargets(targets);
+    const targetsLength = parsedTargets.length;
+
+    if (!targetsLength) {
+      console.warn(`No target found. Make sure the element you're trying to animate is accessible before creating your animation.`);
+    }
+
+    const ease = setValue(params.ease, parseWAAPIEasing(globals.defaults.ease));
+    const spring = /** @type {Spring} */(ease).ease && ease;
+    const autoplay = setValue(params.autoplay, globals.defaults.autoplay);
+    const scroll = autoplay && /** @type {ScrollObserver} */(autoplay).link ? autoplay : false;
+    const alternate = params.alternate && /** @type {Boolean} */(params.alternate) === true;
+    const reversed = params.reversed && /** @type {Boolean} */(params.reversed) === true;
+    const loop = setValue(params.loop, globals.defaults.loop);
+    const iterations = /** @type {Number} */((loop === true || loop === Infinity) ? Infinity : isNum(loop) ? loop + 1 : 1);
+    /** @type {PlaybackDirection} */
+    const direction = alternate ? reversed ? 'alternate-reverse' : 'alternate' : reversed ? 'reverse' : 'normal';
+    /** @type {FillMode} */
+    const fill = 'forwards';
+    /** @type {String} */
+    const easing = parseWAAPIEasing(ease);
+    const timeScale = (globals.timeScale === 1 ? 1 : K);
+
+    /** @type {DOMTargetsArray}] */
+    this.targets = parsedTargets;
+    /** @type {Array<globalThis.Animation>}] */
+    this.animations = [];
+    /** @type {globalThis.Animation}] */
+    this.controlAnimation = null;
+    /** @type {Callback<this>} */
+    this.onComplete = params.onComplete || noop;
+    /** @type {Number} */
+    this.duration = 0;
+    /** @type {Boolean} */
+    this.muteCallbacks = false;
+    /** @type {Boolean} */
+    this.completed = false;
+    /** @type {Boolean} */
+    this.paused = !autoplay || scroll !== false;
+    /** @type {Boolean} */
+    this.reversed = reversed;
+    /** @type {Boolean|ScrollObserver} */
+    this.autoplay = autoplay;
+    /** @type {Number} */
+    this._speed = setValue(params.playbackRate, globals.defaults.playbackRate);
+    /** @type {Function} */
+    this._resolve = noop; // Used by .then()
+    /** @type {Number} */
+    this._completed = 0;
+    /** @type {Array<Object>}] */
+    this._inlineStyles = parsedTargets.map($el => $el.getAttribute('style'));
+
+    parsedTargets.forEach(($el, i) => {
+
+      const cachedTransforms = $el[transformsSymbol];
+
+      const hasIndividualTransforms = validIndividualTransforms.some(t => params.hasOwnProperty(t));
+
+      /** @type {Number} */
+      const duration = (spring ? /** @type {Spring} */(spring).duration : getFunctionValue(setValue(params.duration, globals.defaults.duration), $el, i, targetsLength)) * timeScale;
+      /** @type {Number} */
+      const delay = getFunctionValue(setValue(params.delay, globals.defaults.delay), $el, i, targetsLength) * timeScale;
+      /** @type {CompositeOperation} */
+      const composite = /** @type {CompositeOperation} */(setValue(params.composition, 'replace'));
+
+      for (let name in params) {
+        if (!isKey(name)) continue;
+        /** @type {PropertyIndexedKeyframes} */
+        const keyframes = {};
+        /** @type {KeyframeAnimationOptions} */
+        const tweenParams = { iterations, direction, fill, easing, duration, delay, composite };
+        const propertyValue = params[name];
+        const individualTransformProperty = hasIndividualTransforms ? validTransforms.includes(name) ? name : shortTransforms.get(name) : false;
+        let parsedPropertyValue;
+        if (isObj(propertyValue)) {
+          const tweenOptions = /** @type {WAAPITweenOptions} */(propertyValue);
+          const tweenOptionsEase = setValue(tweenOptions.ease, ease);
+          const tweenOptionsSpring = /** @type {Spring} */(tweenOptionsEase).ease && tweenOptionsEase;
+          const to = /** @type {WAAPITweenOptions} */(tweenOptions).to;
+          const from = /** @type {WAAPITweenOptions} */(tweenOptions).from;
+          /** @type {Number} */
+          tweenParams.duration = (tweenOptionsSpring ? /** @type {Spring} */(tweenOptionsSpring).duration : getFunctionValue(setValue(tweenOptions.duration, duration), $el, i, targetsLength)) * timeScale;
+          /** @type {Number} */
+          tweenParams.delay = getFunctionValue(setValue(tweenOptions.delay, delay), $el, i, targetsLength) * timeScale;
+          /** @type {CompositeOperation} */
+          tweenParams.composite = /** @type {CompositeOperation} */(setValue(tweenOptions.composition, composite));
+          /** @type {String} */
+          tweenParams.easing = parseWAAPIEasing(tweenOptionsEase);
+          parsedPropertyValue = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+          if (individualTransformProperty) {
+            keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
+            cachedTransforms[individualTransformProperty] = parsedPropertyValue;
+          } else {
+            keyframes[name] = parseIndividualTweenValue($el, name, from, to, i, targetsLength);
+          }
+          addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
+          if (!isUnd(from)) {
+            if (!individualTransformProperty) {
+              $el.style[name] = keyframes[name][0];
+            } else {
+              const key = `--${individualTransformProperty}`;
+              $el.style.setProperty(key, keyframes[key][0]);
+            }
+          }
+        } else {
+          parsedPropertyValue = isArr(propertyValue) ?
+                                propertyValue.map((/** @type {any} */v) => normalizeTweenValue(name, v, $el, i, targetsLength)) :
+                                normalizeTweenValue(name, /** @type {any} */(propertyValue), $el, i, targetsLength);
+          if (individualTransformProperty) {
+            keyframes[`--${individualTransformProperty}`] = parsedPropertyValue;
+            cachedTransforms[individualTransformProperty] = parsedPropertyValue;
+          } else {
+            keyframes[name] = parsedPropertyValue;
+          }
+          addWAAPIAnimation(this, $el, name, keyframes, tweenParams);
+        }
+      }
+      if (hasIndividualTransforms) {
+        let transforms = emptyString;
+        for (let t in cachedTransforms) {
+          transforms += `${transformsFragmentStrings[t]}var(--${t})) `;
+        }
+        $el.style.transform = transforms;
+      }
+    });
+
+    if (scroll) {
+      /** @type {ScrollObserver} */(this.autoplay).link(this);
+    }
+  }
+
+  /**
+   * @callback forEachCallback
+   * @param {globalThis.Animation} animation
+   */
+
+  /**
+   * @param  {forEachCallback|String} callback
+   * @return {this}
+   */
+  forEach(callback) {
+    const cb = isStr(callback) ? (/** @type {globalThis.Animation} */a) => a[callback]() : callback;
+    this.animations.forEach(cb);
+    return this;
+  }
+
+  get speed() {
+    return this._speed;
+  }
+
+  set speed(speed) {
+    this._speed = +speed;
+    this.forEach(anim => anim.playbackRate = speed);
+  }
+
+  get currentTime() {
+    const controlAnimation = this.controlAnimation;
+    const timeScale = globals.timeScale;
+    return this.completed ? this.duration : controlAnimation ? +controlAnimation.currentTime * (timeScale === 1 ? 1 : timeScale) : 0;
+  }
+
+  set currentTime(time) {
+    const t = time * (globals.timeScale === 1 ? 1 : K);
+    this.forEach(anim => {
+      // Make sure the animation playState is not 'paused' in order to properly trigger an onfinish callback.
+      // The "paused" play state supersedes the "finished" play state; if the animation is both paused and finished, the "paused" state is the one that will be reported.
+      // https://developer.mozilla.org/en-US/docs/Web/API/Animation/finish_event
+      if (t >= this.duration) anim.play();
+      anim.currentTime = t;
+    });
+  }
+
+  get progress() {
+    return this.currentTime / this.duration;
+  }
+
+  set progress(progress) {
+    this.forEach(anim => anim.currentTime = progress * this.duration || 0);
+  }
+
+  resume() {
+    if (!this.paused) return this;
+    this.paused = false;
+    // TODO: Store the current time, and seek back to the last position
+    return this.forEach('play');
+  }
+
+  pause() {
+    if (this.paused) return this;
+    this.paused = true;
+    return this.forEach('pause');
+  }
+
+  alternate() {
+    this.reversed = !this.reversed;
+    this.forEach('reverse');
+    if (this.paused) this.forEach('pause');
+    return this;
+  }
+
+  play() {
+    if (this.reversed) this.alternate();
+    return this.resume();
+  }
+
+  reverse() {
+    if (!this.reversed) this.alternate();
+    return this.resume();
+  }
+
+ /**
+  * @param {Number} time
+  * @param {Boolean} muteCallbacks
+  */
+  seek(time, muteCallbacks = false) {
+    if (muteCallbacks) this.muteCallbacks = true;
+    if (time < this.duration) this.completed = false;
+    this.currentTime = time;
+    this.muteCallbacks = false;
+    if (this.paused) this.pause();
+    return this;
+  }
+
+  restart() {
+    this.completed = false;
+    return this.seek(0, true).resume();
+  }
+
+  commitStyles() {
+    return this.forEach('commitStyles');
+  }
+
+  complete() {
+    return this.seek(this.duration);
+  }
+
+  cancel() {
+    this.forEach('cancel');
+    return this.pause();
+  }
+
+  revert() {
+    this.cancel();
+    this.targets.forEach(($el, i) => $el.setAttribute('style', this._inlineStyles[i]) );
+    return this;
+  }
+
+  /**
+   * @param  {WAAPICallback} [callback]
+   * @return {Promise}
+   */
+  then(callback = noop) {
+    const then = this.then;
+    const onResolve = () => {
+      this.then = null;
+      callback(this);
+      this.then = then;
+      this._resolve = noop;
+    };
+    return new Promise(r => {
+      this._resolve = () => r(onResolve());
+      if (this.completed) this._resolve();
+      return this;
+    });
+  }
+}
+
+const waapi = {
+/**
+ * @param {DOMTargetsParam} targets
+ * @param {WAAPIAnimationParams} params
+ * @return {WAAPIAnimation}
+ */
+  animate: (targets, params) => new WAAPIAnimation(targets, params),
+  convertEase: easingToLinear
+};
+
+export { WAAPIAnimation, waapi };

package/package.json

@@ -1,62 +1,159 @@
 {
   "name": "animejs",
-  "version": "4.1.2",
+  "version": "4.2.0-beta.0",
+  "description": "JavaScript animation engine",
   "homepage": "https://animejs.com",
+  "author": "Julian Garnier <julian@animejs.com>",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/juliangarnier/anime.git"
   },
-  "description": "JavaScript animation engine",
-  "main": "lib/anime.umd.js",
-  "module": "lib/anime.esm.js",
-  "types": "types/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./lib/anime.esm.js",
-      "require": "./lib/anime.cjs"
-    },
-    "./package.json": "./package.json"
-  },
-  "license": "MIT",
-  "author": "Julian Garnier <hello@julian.gr>",
-  "sideEffects": false,
   "bugs": {
     "url": "https://github.com/juliangarnier/anime/issues"
   },
-  "files": [
-    "lib",
-    "types"
-  ],
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/juliangarnier"
+  },
   "keywords": [
     "anime",
+    "animejs",
     "anime.js",
     "animation",
+    "timeline",
+    "easings",
+    "spring",
+    "scroll",
+    "drag",
+    "text",
     "JavaScript",
     "CSS",
-    "transforms",
     "SVG",
-    "canvas"
+    "WAAPI",
+    "Canvas",
+    "WebGL"
   ],
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/modules/index.cjs",
+  "module": "./dist/modules/index.js",
+  "types": "./dist/modules/index.d.ts",
+  "jsdelivr": "./dist/bundles/anime.umd.min.js",
+  "unpkg": "./dist/bundles/anime.umd.min.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/modules/index.d.ts",
+      "require": "./dist/modules/index.cjs",
+      "import": "./dist/modules/index.js",
+      "default": "./dist/modules/index.cjs"
+    },
+    "./timer": {
+      "types": "./dist/modules/timer/index.d.ts",
+      "require": "./dist/modules/timer/index.cjs",
+      "import": "./dist/modules/timer/index.js",
+      "default": "./dist/modules/timer/index.cjs"
+    },
+    "./animation": {
+      "types": "./dist/modules/animation/index.d.ts",
+      "require": "./dist/modules/animation/index.cjs",
+      "import": "./dist/modules/animation/index.js",
+      "default": "./dist/modules/animation/index.cjs"
+    },
+    "./timeline": {
+      "types": "./dist/modules/timeline/index.d.ts",
+      "require": "./dist/modules/timeline/index.cjs",
+      "import": "./dist/modules/timeline/index.js",
+      "default": "./dist/modules/timeline/index.cjs"
+    },
+    "./animatable": {
+      "types": "./dist/modules/animatable/index.d.ts",
+      "require": "./dist/modules/animatable/index.cjs",
+      "import": "./dist/modules/animatable/index.js",
+      "default": "./dist/modules/animatable/index.cjs"
+    },
+    "./draggable": {
+      "types": "./dist/modules/draggable/index.d.ts",
+      "require": "./dist/modules/draggable/index.cjs",
+      "import": "./dist/modules/draggable/index.js",
+      "default": "./dist/modules/draggable/index.cjs"
+    },
+    "./scope": {
+      "types": "./dist/modules/scope/index.d.ts",
+      "require": "./dist/modules/scope/index.cjs",
+      "import": "./dist/modules/scope/index.js",
+      "default": "./dist/modules/scope/index.cjs"
+    },
+    "./engine": {
+      "types": "./dist/modules/engine/index.d.ts",
+      "require": "./dist/modules/engine/index.cjs",
+      "import": "./dist/modules/engine/index.js",
+      "default": "./dist/modules/engine/index.cjs"
+    },
+    "./events": {
+      "types": "./dist/modules/events/index.d.ts",
+      "require": "./dist/modules/events/index.cjs",
+      "import": "./dist/modules/events/index.js",
+      "default": "./dist/modules/events/index.cjs"
+    },
+    "./spring": {
+      "types": "./dist/modules/spring/index.d.ts",
+      "require": "./dist/modules/spring/index.cjs",
+      "import": "./dist/modules/spring/index.js",
+      "default": "./dist/modules/spring/index.cjs"
+    },
+    "./easings": {
+      "types": "./dist/modules/easings/index.d.ts",
+      "require": "./dist/modules/easings/index.cjs",
+      "import": "./dist/modules/easings/index.js",
+      "default": "./dist/modules/easings/index.cjs"
+    },
+    "./utils": {
+      "types": "./dist/modules/utils/index.d.ts",
+      "require": "./dist/modules/utils/index.cjs",
+      "import": "./dist/modules/utils/index.js",
+      "default": "./dist/modules/utils/index.cjs"
+    },
+    "./svg": {
+      "types": "./dist/modules/svg/index.d.ts",
+      "require": "./dist/modules/svg/index.cjs",
+      "import": "./dist/modules/svg/index.js",
+      "default": "./dist/modules/svg/index.cjs"
+    },
+    "./text": {
+      "types": "./dist/modules/text/index.d.ts",
+      "require": "./dist/modules/text/index.cjs",
+      "import": "./dist/modules/text/index.js",
+      "default": "./dist/modules/text/index.cjs"
+    },
+    "./waapi": {
+      "types": "./dist/modules/waapi/index.d.ts",
+      "require": "./dist/modules/waapi/index.cjs",
+      "import": "./dist/modules/waapi/index.js",
+      "default": "./dist/modules/waapi/index.cjs"
+    }
+  },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
+    "@types/node": "^24.3.0",
     "browser-sync": "^2.29.3",
     "chai": "^4.3.10",
     "mocha": "^10.2.0",
+    "nodemon": "^3.1.10",
     "rollup": "^4.9.1",
-    "rollup-plugin-filesize": "^10.0.0",
-    "rollup-plugin-ts": "^3.4.5",
     "three": "^0.160.0",
-    "typescript": "5.1.6"
+    "typescript": "^5.9.2"
   },
   "scripts": {
-    "dev": "rollup -c -w",
-    "dev-types": "types=true rollup -c -w",
-    "build": "build=true types=true rollup -c",
-    "release": "build=true release=true types=true rollup -c",
-    "open-examples": "browser-sync start --startPath examples --server --no-notify --directory --files '**/*.js'",
-    "test-browser": "browser-sync start --startPath tests/index.html --server --files '**/*.js' --no-notify --directory",
-    "test-node": "node --allow-natives-syntax \"node_modules/.bin/mocha\" -u tdd --timeout 20000 \"./tests/suites/node.test.js\""
+    "dev": "nodemon --quiet --watch src --ext js --exec \"rollup -c && tsc -p tsconfig.types.json && echo '\\n\\033[32m✓ modules and types compiled\\n\\033[36m⊙ watching for changes...\\n\\033[0m'\"",
+    "dev:test": "npm run dev & npm run test:browser",
+    "build": "rm -rf dist && build=true rollup -c && tsc -p tsconfig.types.json && echo '\\n\\033[32m✓ build completed\\n\\033[0m'",
+    "test:browser": "browser-sync start --startPath tests/index.html --server --files 'dist/modules/**/*.js' 'tests/suites/**/*.js' --no-notify --directory",
+    "test:node": "node --allow-natives-syntax \"node_modules/.bin/mocha\" -u tdd --timeout 20000 \"./tests/suites/node.test.js\"",
+    "open:examples": "browser-sync start --startPath examples --server --no-notify --directory --files '**/*.js'"
   }
 }