motion 12.23.0 → 12.23.2

package/dist/motion.dev.js

@@ -35,14 +35,19 @@
     exports.warning = () => { };
     exports.invariant = () => { };
     {
-        exports.warning = (check, message) => {
+        const formatMessage = (message, errorCode) => {
+            return errorCode
+                ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
+                : message;
+        };
+        exports.warning = (check, message, errorCode) => {
             if (!check && typeof console !== "undefined") {
-                console.warn(message);
+                console.warn(formatMessage(message, errorCode));
             }
         };
-        exports.invariant = (check, message) => {
+        exports.invariant = (check, message, errorCode) => {
             if (!check) {
-                throw new Error(message);
+                throw new Error(formatMessage(message, errorCode));
             }
         };
     }
@@ -291,13 +296,13 @@
     const easingDefinitionToFunction = (definition) => {
         if (isBezierDefinition(definition)) {
             // If cubic bezier definition, create bezier curve
-            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
             const [x1, y1, x2, y2] = definition;
             return cubicBezier(x1, y1, x2, y2);
         }
         else if (isValidEasing(definition)) {
             // Else lookup from table
-            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type");
             return easingLookup[definition];
         }
         return definition;
@@ -857,7 +862,7 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     function asRGBA(color) {
         const type = getColorType(color);
-        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
         if (!Boolean(type))
             return false;
         let model = type.parse(color);
@@ -975,7 +980,7 @@
             return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
         }
         else {
-            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different");
             return mixImmediate(origin, target);
         }
     };
@@ -1081,7 +1086,7 @@
     function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
         let envelope;
         let derivative;
-        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
         let dampingRatio = 1 - bounce;
         /**
          * Restrict dampingRatio and duration to within acceptable ranges.
@@ -1441,7 +1446,7 @@
      */
     function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
         const inputLength = input.length;
-        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length", "range-length");
         /**
          * If we're only provided a single input, we can just make a function
          * that returns the output.
@@ -1633,7 +1638,7 @@
             let { keyframes: keyframes$1 } = options;
             const generatorFactory = type || keyframes;
             if (generatorFactory !== keyframes) {
-                exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+                exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, "spring-two-frames");
             }
             if (generatorFactory !== keyframes &&
                 typeof keyframes$1[0] !== "number") {
@@ -2334,7 +2339,7 @@
             this.isPseudoElement = Boolean(pseudoElement);
             this.allowFlatten = allowFlatten;
             this.options = options;
-            exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+            exports.invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
             const transition = applyGeneratorOptions(options);
             this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
             if (transition.autoplay === false) {
@@ -2550,7 +2555,7 @@
      * @internal
      */
     const isAnimatable = (value, name) => {
-        // If the list of keys tat might be non-animatable grows, replace with Set
+        // If the list of keys that might be non-animatable grows, replace with Set
         if (name === "zIndex")
             return false;
         // If it's a number or a keyframes array, we can animate it. We might at some point
@@ -2595,7 +2600,7 @@
         const targetKeyframe = keyframes[keyframes.length - 1];
         const isOriginAnimatable = isAnimatable(originKeyframe, name);
         const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable");
         // Always skip if any of these are true
         if (!isOriginAnimatable || !isTargetAnimatable) {
             return false;
@@ -2925,7 +2930,7 @@
     }
     const maxDepth = 4;
     function getVariableValue(current, element, depth = 1) {
-        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
         const [token, fallback] = parseCSSVariable(current);
         // No CSS variable detected
         if (!token)
@@ -5134,7 +5139,7 @@
                  * Handle repeat options
                  */
                 if (repeat) {
-                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                     duration = calculateRepeatDuration(duration, repeat);
                     const originalKeyframes = [...valueKeyframesAsList];
                     const originalTimes = [...times];
@@ -6710,7 +6715,7 @@
         else {
             const subjects = resolveSubjects(subject, keyframes, scope);
             const numSubjects = subjects.length;
-            exports.invariant(Boolean(numSubjects), "No valid elements provided.");
+            exports.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
             for (let i = 0; i < numSubjects; i++) {
                 const thisSubject = subjects[i];
                 const createVisualElement = thisSubject instanceof Element
@@ -6778,7 +6783,7 @@
     function animateElements(elementOrSelector, keyframes, options, scope) {
         const elements = resolveElements(elementOrSelector, scope);
         const numElements = elements.length;
-        exports.invariant(Boolean(numElements), "No valid element provided.");
+        exports.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
         /**
          * WAAPI doesn't support interrupting animations.
          *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "motion",
-    "version": "12.23.0",
+    "version": "12.23.2",
     "description": "An animation library for JavaScript and React.",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -76,7 +76,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^12.23.0",
+        "framer-motion": "^12.23.2",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
@@ -95,5 +95,5 @@
             "optional": true
         }
     },
-    "gitHead": "a373936bc35696ea3f7335d58aaa6b0be71a1fb7"
+    "gitHead": "17e0e4150c125139bb41f16e2db297683b9e6513"
 }