@motionone/svelte - npm Package Compare versions

Comparing version 10.14.0 to 10.14.1

dist/index.js

@@ -434,35 +434,2 @@ function noop$1() { }
 
-/**
- * The MotionValue tracks the state of a single animatable
- * value. Currently, updatedAt and current are unused. The
- * long term idea is to use this to minimise the number
- * of DOM reads, and to abstract the DOM interactions here.
- */
-class MotionValue {
-    setAnimation(animation) {
-        this.animation = animation;
-        animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => { });
-    }
-    clearAnimation() {
-        this.animation = this.generator = undefined;
-    }
-}
-
-const data = new WeakMap();
-function getAnimationData(element) {
-    if (!data.has(element)) {
-        data.set(element, {
-            transforms: [],
-            values: new Map(),
-        });
-    }
-    return data.get(element);
-}
-function getMotionValue(motionValues, name) {
-    if (!motionValues.has(name)) {
-        motionValues.set(name, new MotionValue());
-    }
-    return motionValues.get(name);
-}
-
 function addUniqueItem(array, item) {
@@ -558,95 +525,2 @@ array.indexOf(item) === -1 && array.push(item);
 
-/**
- * A list of all transformable axes. We'll use this list to generated a version
- * of each axes for each transform.
- */
-const axes = ["", "X", "Y", "Z"];
-/**
- * An ordered array of each transformable value. By default, transform values
- * will be sorted to this order.
- */
-const order = ["translate", "scale", "rotate", "skew"];
-const transformAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-};
-const rotation = {
-    syntax: "<angle>",
-    initialValue: "0deg",
-    toDefaultUnit: (v) => v + "deg",
-};
-const baseTransformProperties = {
-    translate: {
-        syntax: "<length-percentage>",
-        initialValue: "0px",
-        toDefaultUnit: (v) => v + "px",
-    },
-    rotate: rotation,
-    scale: {
-        syntax: "<number>",
-        initialValue: 1,
-        toDefaultUnit: noopReturn,
-    },
-    skew: rotation,
-};
-const transformDefinitions = new Map();
-const asTransformCssVar = (name) => `--motion-${name}`;
-/**
- * Generate a list of every possible transform key
- */
-const transforms = ["x", "y", "z"];
-order.forEach((name) => {
-    axes.forEach((axis) => {
-        transforms.push(name + axis);
-        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-    });
-});
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-/**
- * Provide a quick way to check if a string is the name of a transform
- */
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const addTransformToElement = (element, name) => {
-    // Map x to translateX etc
-    if (transformAlias[name])
-        name = transformAlias[name];
-    const { transforms } = getAnimationData(element);
-    addUniqueItem(transforms, name);
-    /**
-     * TODO: An optimisation here could be to cache the transform in element data
-     * and only update if this has changed.
-     */
-    element.style.transform = buildTransformTemplate(transforms);
-};
-const buildTransformTemplate = (transforms) => transforms
-    .sort(compareTransformOrder)
-    .reduce(transformListToString, "")
-    .trim();
-const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-const isCssVar = (name) => name.startsWith("--");
-const registeredProperties = new Set();
-function registerCssVariable(name) {
-    if (registeredProperties.has(name))
-        return;
-    registeredProperties.add(name);
-    try {
-        const { syntax, initialValue } = transformDefinitions.has(name)
-            ? transformDefinitions.get(name)
-            : {};
-        CSS.registerProperty({
-            name,
-            inherits: false,
-            syntax,
-            initialValue,
-        });
-    }
-    catch (e) { }
-}
-
 /*
@@ -898,2 +772,128 @@ Bezier function generator
 
+/**
+ * The MotionValue tracks the state of a single animatable
+ * value. Currently, updatedAt and current are unused. The
+ * long term idea is to use this to minimise the number
+ * of DOM reads, and to abstract the DOM interactions here.
+ */
+class MotionValue {
+    setAnimation(animation) {
+        this.animation = animation;
+        animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => { });
+    }
+    clearAnimation() {
+        this.animation = this.generator = undefined;
+    }
+}
+
+const data = new WeakMap();
+function getAnimationData(element) {
+    if (!data.has(element)) {
+        data.set(element, {
+            transforms: [],
+            values: new Map(),
+        });
+    }
+    return data.get(element);
+}
+function getMotionValue(motionValues, name) {
+    if (!motionValues.has(name)) {
+        motionValues.set(name, new MotionValue());
+    }
+    return motionValues.get(name);
+}
+
+/**
+ * A list of all transformable axes. We'll use this list to generated a version
+ * of each axes for each transform.
+ */
+const axes = ["", "X", "Y", "Z"];
+/**
+ * An ordered array of each transformable value. By default, transform values
+ * will be sorted to this order.
+ */
+const order = ["translate", "scale", "rotate", "skew"];
+const transformAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+};
+const rotation = {
+    syntax: "<angle>",
+    initialValue: "0deg",
+    toDefaultUnit: (v) => v + "deg",
+};
+const baseTransformProperties = {
+    translate: {
+        syntax: "<length-percentage>",
+        initialValue: "0px",
+        toDefaultUnit: (v) => v + "px",
+    },
+    rotate: rotation,
+    scale: {
+        syntax: "<number>",
+        initialValue: 1,
+        toDefaultUnit: noopReturn,
+    },
+    skew: rotation,
+};
+const transformDefinitions = new Map();
+const asTransformCssVar = (name) => `--motion-${name}`;
+/**
+ * Generate a list of every possible transform key
+ */
+const transforms = ["x", "y", "z"];
+order.forEach((name) => {
+    axes.forEach((axis) => {
+        transforms.push(name + axis);
+        transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
+    });
+});
+/**
+ * A function to use with Array.sort to sort transform keys by their default order.
+ */
+const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
+/**
+ * Provide a quick way to check if a string is the name of a transform
+ */
+const transformLookup = new Set(transforms);
+const isTransform = (name) => transformLookup.has(name);
+const addTransformToElement = (element, name) => {
+    // Map x to translateX etc
+    if (transformAlias[name])
+        name = transformAlias[name];
+    const { transforms } = getAnimationData(element);
+    addUniqueItem(transforms, name);
+    /**
+     * TODO: An optimisation here could be to cache the transform in element data
+     * and only update if this has changed.
+     */
+    element.style.transform = buildTransformTemplate(transforms);
+};
+const buildTransformTemplate = (transforms) => transforms
+    .sort(compareTransformOrder)
+    .reduce(transformListToString, "")
+    .trim();
+const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
+
+const isCssVar = (name) => name.startsWith("--");
+const registeredProperties = new Set();
+function registerCssVariable(name) {
+    if (registeredProperties.has(name))
+        return;
+    registeredProperties.add(name);
+    try {
+        const { syntax, initialValue } = transformDefinitions.has(name)
+            ? transformDefinitions.get(name)
+            : {};
+        CSS.registerProperty({
+            name,
+            inherits: false,
+            syntax,
+            initialValue,
+        });
+    }
+    catch (e) { }
+}
+
 const testAnimation = (keyframes, options) => document.createElement("div").animate(keyframes, options);
@@ -1027,3 +1027,3 @@ const featureTests = {
 }
-function animateStyle(element, key, keyframesDefinition, options = {}) {
+function animateStyle(element, key, keyframesDefinition, options = {}, AnimationPolyfill) {
     const record = getDevToolsRecord();
@@ -1171,3 +1171,3 @@ const isRecording = options.record !== false && record;
         }
-        else if (valueIsTransform) {
+        else if (AnimationPolyfill && valueIsTransform) {
             /**
@@ -1185,3 +1185,3 @@ * If any keyframe is a string (because we measured it from the DOM), we need to convert
             }
-            animation = new Animation((latest) => {
+            animation = new AnimationPolyfill((latest) => {
                 style.set(element, name, toUnit ? toUnit(latest) : latest);
@@ -1541,3 +1541,3 @@ }, keyframes, Object.assign(Object.assign({}, options), { duration,
                 (_a = baseTarget[key]) !== null && _a !== void 0 ? _a : (baseTarget[key] = style.get(element, key));
-                animationFactories.push(animateStyle(element, key, target[key], animationOptions[key]));
+                animationFactories.push(animateStyle(element, key, target[key], animationOptions[key], Animation));
             }
@@ -1544,0 +1544,0 @@ });

package.json

 {
   "name": "@motionone/svelte",
-  "version": "10.14.0",
+  "version": "10.14.1",
   "description": "A tiny, performant animation library for Svelte",
@@ -17,3 +17,3 @@ "author": "Matt Perry",
   "dependencies": {
-    "@motionone/dom": "^10.14.0",
+    "@motionone/dom": "^10.14.1",
     "tslib": "^2.3.1"
@@ -34,3 +34,3 @@ },
   },
-  "gitHead": "4c59ce9e5539899722427bd00f857dc80f29fc09"
+  "gitHead": "24292336e5c7f797e9fbfa6e42160337968a9afe"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

262527

increased by0.06%

Dependency changes

• Updated@motionone/dom@^10.14.1