@react-spring/animated - npm Package Compare versions

Comparing version 9.0.0-beta.25 to 9.0.0-beta.27

index.cjs.js

@@ -393,2 +393,7 @@ 'use strict';
 
+var cacheKey = Symbol.for('AnimatedComponent');
+var withAnimated = function withAnimated(Component) {
+  return shared.is.str(Component) ? createAnimatedComponent(Component) : Component[cacheKey] || (Component[cacheKey] = createAnimatedComponent(Component));
+};
+
 var createAnimatedComponent = function createAnimatedComponent(Component) {
@@ -441,43 +446,24 @@ return React.forwardRef(function (rawProps, ref) {
 }
-/** Add an `extend` method to your `animated` factory function */
+/**
+ * Pass the given components to `withAnimated` and add the newly animated
+ * components to `withAnimated` as properties.
+ */
 
 
-function withExtend(animated, options) {
-  if (options === void 0) {
-    options = {};
-  }
+var extendAnimated = function extendAnimated(withAnimated, components, lowercase) {
+  components.forEach(function (Component) {
+    var key = getDisplayName(Component);
 
-  var self = animated;
-
-  var extend = function extend(arg, overrideKey) {
-    if (shared.is.arr(arg) || shared.is.obj(arg)) {
-      return shared.each(arg, extend);
-    } // Use the `overrideKey` or inspect the value for a key
-
-
-    var key = shared.is.str(overrideKey) ? overrideKey : shared.is.str(arg) ? arg : arg && shared.is.str(arg.displayName) ? arg.displayName : shared.is.fun(arg) ? arg.name : ''; // This lowercases the first letter of the key
-
-    if (options.lowercase) {
+    if (lowercase) {
       key = key[0].toLowerCase() + key.slice(1);
-    } // NOTE(typescript): Properties are not yet inferred from the arguments of
-    // the `extend` method and then attached to the `animated` function via
-    // the return type.
-
-
-    self[key] = animated(arg);
-  };
-
-  self.extend = function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
     }
 
-    shared.each(args, function (arg) {
-      return extend(arg);
-    });
-    return self;
-  };
+    withAnimated[key] = withAnimated(Component);
+  });
+  return withAnimated;
+};
 
-  return self;
-}
+var getDisplayName = function getDisplayName(arg) {
+  return shared.is.str(arg) ? arg : arg && shared.is.str(arg.displayName) ? arg.displayName : shared.is.fun(arg) && arg.name || null;
+};
 
@@ -499,7 +485,7 @@ Object.defineProperty(exports, 'interpolate', {
 exports.animatedTag = animatedTag;
-exports.createAnimatedComponent = createAnimatedComponent;
+exports.extendAnimated = extendAnimated;
 exports.isAnimated = isAnimated;
 exports.removeChild = removeChild;
 exports.toPayload = toPayload;
-exports.withExtend = withExtend;
+exports.withAnimated = withAnimated;
 //# sourceMappingURL=index.cjs.js.map

index.d.ts

@@ -97,16 +97,16 @@ import { SpringValue, Animatable, InterpolatorArgs, Indexable, Interpolatable, OneOrMore, Interpolator, ElementType } from '@react-spring/shared';
 
-declare const createAnimatedComponent: CreateAnimated;
-declare type WithExtend<T> = T & {
-    extend: (...args: Array<AnimatedTarget | Array<AnimatedTarget>>) => WithExtend<T>;
+declare type AnimatableComponent = string | (Extract<ElementType, object> & {
+    [cacheKey]?: any;
+});
+declare type WithAnimated = {
+    (Component: AnimatableComponent): any;
+    [key: string]: any;
 };
-/** Strings like "div", or components, or a map of components, or an array of those */
-declare type AnimatedTarget = string | ElementType | {
-    [key: string]: ElementType;
-};
-declare type CreateAnimated = (Component: string | ElementType) => any;
-/** Add an `extend` method to your `animated` factory function */
-declare function withExtend<T extends CreateAnimated>(animated: T, options?: {
-    lowercase?: boolean;
-}): WithExtend<T>;
+declare const withAnimated: WithAnimated;
+/**
+ * Pass the given components to `withAnimated` and add the newly animated
+ * components to `withAnimated` as properties.
+ */
+declare const extendAnimated: (withAnimated: WithAnimated, components: AnimatableComponent[], lowercase?: boolean | undefined) => any;
 
-export { Animated, AnimatedArray, AnimatedInterpolation, AnimatedObject, AnimatedProps, AnimatedStyle, AnimatedValue, WithExtend, addChild, animatedTag, createAnimatedComponent, isAnimated, removeChild, toPayload, withExtend };
+export { Animated, AnimatedArray, AnimatedInterpolation, AnimatedObject, AnimatedProps, AnimatedStyle, AnimatedValue, addChild, animatedTag, extendAnimated, isAnimated, removeChild, toPayload, withAnimated };

index.js

@@ -311,2 +311,5 @@ import { each, createInterpolator, is, toArray, Globals, useForceUpdate, useOnce } from '@react-spring/shared';
 
+const cacheKey = Symbol.for('AnimatedComponent');
+const withAnimated = Component => is.str(Component) ? createAnimatedComponent(Component) : Component[cacheKey] || (Component[cacheKey] = createAnimatedComponent(Component));
+
 const createAnimatedComponent = Component => forwardRef((rawProps, ref) => {
@@ -353,43 +356,24 @@ const node = useRef(null);
 }
-/** Add an `extend` method to your `animated` factory function */
+/**
+ * Pass the given components to `withAnimated` and add the newly animated
+ * components to `withAnimated` as properties.
+ */
 
 
-function withExtend(animated, options) {
-  if (options === void 0) {
-    options = {};
-  }
+const extendAnimated = (withAnimated, components, lowercase) => {
+  components.forEach(Component => {
+    let key = getDisplayName(Component);
 
-  const self = animated;
-
-  const extend = (arg, overrideKey) => {
-    if (is.arr(arg) || is.obj(arg)) {
-      return each(arg, extend);
-    } // Use the `overrideKey` or inspect the value for a key
-
-
-    let key = is.str(overrideKey) ? overrideKey : is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) ? arg.name : ''; // This lowercases the first letter of the key
-
-    if (options.lowercase) {
+    if (lowercase) {
       key = key[0].toLowerCase() + key.slice(1);
-    } // NOTE(typescript): Properties are not yet inferred from the arguments of
-    // the `extend` method and then attached to the `animated` function via
-    // the return type.
-
-
-    self[key] = animated(arg);
-  };
-
-  self.extend = function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
     }
 
-    each(args, arg => extend(arg));
-    return self;
-  };
+    withAnimated[key] = withAnimated(Component);
+  });
+  return withAnimated;
+};
 
-  return self;
-}
+const getDisplayName = arg => is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;
 
-export { Animated, AnimatedArray, AnimatedInterpolation, AnimatedObject, AnimatedProps, AnimatedStyle, AnimatedValue, addChild, animatedTag, createAnimatedComponent, isAnimated, removeChild, toPayload, withExtend };
+export { Animated, AnimatedArray, AnimatedInterpolation, AnimatedObject, AnimatedProps, AnimatedStyle, AnimatedValue, addChild, animatedTag, extendAnimated, isAnimated, removeChild, toPayload, withAnimated };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@react-spring/animated",
-  "version": "9.0.0-beta.25",
+  "version": "9.0.0-beta.27",
   "description": "Animated component props for React",
@@ -31,3 +31,3 @@ "keywords": [
     "@babel/runtime": "^7.3.1",
-    "@react-spring/shared": "^9.0.0-beta.25"
+    "@react-spring/shared": "^9.0.0-beta.27"
   },
@@ -34,0 +34,0 @@ "devDependencies": {

src/index.ts

@@ -9,3 +9,3 @@ import './globals'
 export * from './AnimatedStyle'
-export * from './createAnimatedComponent'
+export * from './withAnimated'
 export * from './interpolate'

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66209

increased by3.54%

Number of package files

21

increased by5%

Lines of code

1338

increased by5.35%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@react-spring/shared@^9.0.0-beta.27