@gluestack-style/animation-resolver - npm Package Compare versions

Comparing version 1.0.2-alpha.0 to 1.0.2

lib/commonjs/AnimatedComponents/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.AnimatedView = exports.AnimatedTextPath = exports.AnimatedText = exports.AnimatedTSpan = exports.AnimatedSvg = exports.AnimatedSectionList = exports.AnimatedScrollView = exports.AnimatedSafeAreaView = exports.AnimatedRect = exports.AnimatedRadialGradient = exports.AnimatedPressable = exports.AnimatedPolyline = exports.AnimatedPath = exports.AnimatedLinearGradient = exports.AnimatedLine = exports.AnimatedImage = exports.AnimatedG = exports.AnimatedFlatList = exports.AnimatedEllipse = exports.AnimatedClipPath = exports.AnimatedCircle = exports.AnimatePresence = void 0;
+exports.AnimatedView = exports.AnimatedTextPath = exports.AnimatedText = exports.AnimatedTSpan = exports.AnimatedSvg = exports.AnimatedSectionList = exports.AnimatedScrollView = exports.AnimatedSafeAreaView = exports.AnimatedRect = exports.AnimatedPressable = exports.AnimatedPolyline = exports.AnimatedPath = exports.AnimatedLine = exports.AnimatedImage = exports.AnimatedG = exports.AnimatedFlatList = exports.AnimatedEllipse = exports.AnimatedClipPath = exports.AnimatedCircle = exports.AnimatePresence = void 0;
 var _react = _interopRequireDefault(require("react"));
@@ -83,13 +83,2 @@ var _react2 = require("@gluestack-style/react");
 exports.AnimatedSectionList = AnimatedSectionList;
-const AnimatePresence = animatedComponent('AnimatePresence', {});
-exports.AnimatePresence = AnimatePresence;
-AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
-AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView';
-AnimatedPressable.displayName = 'Gluestack-AnimatedResolver-AnimatedPressable';
-AnimatedImage.displayName = 'Gluestack-AnimatedResolver-AnimatedImage';
-AnimatedScrollView.displayName = 'Gluestack-AnimatedResolver-AnimatedScrollView';
-AnimatedSafeAreaView.displayName = 'Gluestack-AnimatedResolver-AnimatedSafeAreaView';
-AnimatedFlatList.displayName = 'Gluestack-AnimatedResolver-AnimatedFlatList';
-AnimatedSectionList.displayName = 'Gluestack-AnimatedResolver-AnimatedSectionList';
-AnimatePresence.displayName = 'Gluestack-AnimatedResolver-AnimatedAnimatePresence';
 const AnimatedSvg = props => {
@@ -150,12 +139,24 @@ const Component = animatedComponent('Svg', props);
 exports.AnimatedClipPath = AnimatedClipPath;
-const AnimatedLinearGradient = props => {
-  const Component = animatedComponent('LinearGradient', props);
-  return /*#__PURE__*/_react.default.createElement(Component, props);
-};
-exports.AnimatedLinearGradient = AnimatedLinearGradient;
-const AnimatedRadialGradient = props => {
-  const Component = animatedComponent('RadialGradient', props);
-  return /*#__PURE__*/_react.default.createElement(Component, props);
-};
-exports.AnimatedRadialGradient = AnimatedRadialGradient;
+const AnimatePresence = animatedComponent('AnimatePresence', {});
+exports.AnimatePresence = AnimatePresence;
+AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
+AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView';
+AnimatedPressable.displayName = 'Gluestack-AnimatedResolver-AnimatedPressable';
+AnimatedImage.displayName = 'Gluestack-AnimatedResolver-AnimatedImage';
+AnimatedScrollView.displayName = 'Gluestack-AnimatedResolver-AnimatedScrollView';
+AnimatedSafeAreaView.displayName = 'Gluestack-AnimatedResolver-AnimatedSafeAreaView';
+AnimatedFlatList.displayName = 'Gluestack-AnimatedResolver-AnimatedFlatList';
+AnimatedSectionList.displayName = 'Gluestack-AnimatedResolver-AnimatedSectionList';
+AnimatePresence.displayName = 'Gluestack-AnimatedResolver-AnimatedAnimatePresence';
+AnimatedSvg.displayName = 'Gluestack-AnimatedResolver-AnimatedSvg';
+AnimatedRect.displayName = 'Gluestack-AnimatedResolver-AnimatedRect';
+AnimatedCircle.displayName = 'Gluestack-AnimatedResolver-AnimatedCircle';
+AnimatedEllipse.displayName = 'Gluestack-AnimatedResolver-AnimatedEllipse';
+AnimatedLine.displayName = 'Gluestack-AnimatedResolver-AnimatedLine';
+AnimatedPolyline.displayName = 'Gluestack-AnimatedResolver-AnimatedPolyline';
+AnimatedPath.displayName = 'Gluestack-AnimatedResolver-AnimatedPath';
+AnimatedTSpan.displayName = 'Gluestack-AnimatedResolver-AnimatedTSpan';
+AnimatedTextPath.displayName = 'Gluestack-AnimatedResolver-AnimatedTextPath';
+AnimatedG.displayName = 'Gluestack-AnimatedResolver-AnimatedG';
+AnimatedClipPath.displayName = 'Gluestack-AnimatedResolver-AnimatedClipPath';
 //# sourceMappingURL=index.js.map

lib/commonjs/index.js

@@ -190,18 +190,14 @@ "use strict";
     for (const prop in styledObject) {
-      if (typeof styledObject[prop] === 'object') {
-        keyPath.push(prop);
-        this.updateStyledObject(styledObject[prop], shouldUpdateConfig, resolvedStyledObject, keyPath);
-        keyPath.pop();
-      }
-
-      // @ts-ignore
       if (aliases && aliases !== null && aliases !== void 0 && aliases[prop]) {
+        let isStyleKey = false;
         if (shouldUpdateConfig) {
           // this.#childrenExitPropsMap[prop] = styledObject[prop];
+          if (keyPath[keyPath.length - 1] === 'style') {
+            isStyleKey = true;
+            keyPath.pop();
+          }
           (0, _utils.setObjectKeyValue)(this.#childrenExitPropsMap, [...keyPath, prop], styledObject[prop]);
         }
         const value = styledObject[prop];
-        if (keyPath[keyPath.length - 1] === 'style') {
-          keyPath.pop();
-        }
+
         // @ts-ignore
@@ -214,5 +210,12 @@ keyPath.push('props', aliases[prop]);
         keyPath.pop();
-        // delete styledObject[prop];
+        if (isStyleKey) keyPath.push('style');
+        delete styledObject[prop];
+      } else if (typeof styledObject[prop] === 'object') {
+        keyPath.push(prop);
+        this.updateStyledObject(styledObject[prop], shouldUpdateConfig, resolvedStyledObject, keyPath);
+        keyPath.pop();
       }
 
+      // @ts-ignore
+
       if (animatedPropMap && animatedPropMap[prop]) {
@@ -278,5 +281,3 @@ this.renameObjectKey(styledObject, prop, animatedPropMap[prop]);
         resolvedAnimatedStyledWithStyledObject === null || resolvedAnimatedStyledWithStyledObject === void 0 ? void 0 : resolvedAnimatedStyledWithStyledObject.props : {};
-        return /*#__PURE__*/_react.default.createElement(Component, _extends({}, animatedProps, {
-          sx: resolvedAnimatedStyledWithStyledObject
-        }, restProps, {
+        return /*#__PURE__*/_react.default.createElement(Component, _extends({}, animatedProps, restProps, {
           ref: ref
@@ -286,2 +287,3 @@ }));
       if (NewComponent) {
+        var _Component$styled;
         //@ts-ignore
@@ -291,4 +293,8 @@ NewComponent.styled = {};
         NewComponent.styled.config = {};
+
         //@ts-ignore
-        NewComponent.styled.config = styledConfig;
+        NewComponent.styled.config = {
+          ...(Component === null || Component === void 0 || (_Component$styled = Component.styled) === null || _Component$styled === void 0 ? void 0 : _Component$styled.config),
+          ...styledConfig
+        };
         //@ts-ignore
@@ -295,0 +301,0 @@ NewComponent.isStyledComponent = Component === null || Component === void 0 ? void 0 : Component.isStyledComponent;

lib/module/AnimatedComponents/index.js

@@ -67,65 +67,68 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 };
-const AnimatePresence = animatedComponent('AnimatePresence', {});
-AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
-AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView';
-AnimatedPressable.displayName = 'Gluestack-AnimatedResolver-AnimatedPressable';
-AnimatedImage.displayName = 'Gluestack-AnimatedResolver-AnimatedImage';
-AnimatedScrollView.displayName = 'Gluestack-AnimatedResolver-AnimatedScrollView';
-AnimatedSafeAreaView.displayName = 'Gluestack-AnimatedResolver-AnimatedSafeAreaView';
-AnimatedFlatList.displayName = 'Gluestack-AnimatedResolver-AnimatedFlatList';
-AnimatedSectionList.displayName = 'Gluestack-AnimatedResolver-AnimatedSectionList';
-AnimatePresence.displayName = 'Gluestack-AnimatedResolver-AnimatedAnimatePresence';
-export { AnimatedText, AnimatedView, AnimatedPressable, AnimatedImage, AnimatedScrollView, AnimatedSafeAreaView, AnimatedFlatList, AnimatedSectionList, AnimatePresence };
-export const AnimatedSvg = props => {
+const AnimatedSvg = props => {
   const Component = animatedComponent('Svg', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedRect = props => {
+const AnimatedRect = props => {
   const Component = animatedComponent('Rect', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedCircle = props => {
+const AnimatedCircle = props => {
   const Component = animatedComponent('Circle', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedEllipse = props => {
+const AnimatedEllipse = props => {
   const Component = animatedComponent('Ellipse', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedLine = props => {
+const AnimatedLine = props => {
   const Component = animatedComponent('Line', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedPolyline = props => {
+const AnimatedPolyline = props => {
   const Component = animatedComponent('Polyline', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedPath = props => {
+const AnimatedPath = props => {
   const Component = animatedComponent('Path', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedTSpan = props => {
+const AnimatedTSpan = props => {
   const Component = animatedComponent('TSpan', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedTextPath = props => {
+const AnimatedTextPath = props => {
   const Component = animatedComponent('TextPath', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedG = props => {
+const AnimatedG = props => {
   const Component = animatedComponent('G', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedClipPath = props => {
+const AnimatedClipPath = props => {
   const Component = animatedComponent('ClipPath', props);
   return /*#__PURE__*/React.createElement(Component, props);
 };
-export const AnimatedLinearGradient = props => {
-  const Component = animatedComponent('LinearGradient', props);
-  return /*#__PURE__*/React.createElement(Component, props);
-};
-export const AnimatedRadialGradient = props => {
-  const Component = animatedComponent('RadialGradient', props);
-  return /*#__PURE__*/React.createElement(Component, props);
-};
+const AnimatePresence = animatedComponent('AnimatePresence', {});
+AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
+AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView';
+AnimatedPressable.displayName = 'Gluestack-AnimatedResolver-AnimatedPressable';
+AnimatedImage.displayName = 'Gluestack-AnimatedResolver-AnimatedImage';
+AnimatedScrollView.displayName = 'Gluestack-AnimatedResolver-AnimatedScrollView';
+AnimatedSafeAreaView.displayName = 'Gluestack-AnimatedResolver-AnimatedSafeAreaView';
+AnimatedFlatList.displayName = 'Gluestack-AnimatedResolver-AnimatedFlatList';
+AnimatedSectionList.displayName = 'Gluestack-AnimatedResolver-AnimatedSectionList';
+AnimatePresence.displayName = 'Gluestack-AnimatedResolver-AnimatedAnimatePresence';
+AnimatedSvg.displayName = 'Gluestack-AnimatedResolver-AnimatedSvg';
+AnimatedRect.displayName = 'Gluestack-AnimatedResolver-AnimatedRect';
+AnimatedCircle.displayName = 'Gluestack-AnimatedResolver-AnimatedCircle';
+AnimatedEllipse.displayName = 'Gluestack-AnimatedResolver-AnimatedEllipse';
+AnimatedLine.displayName = 'Gluestack-AnimatedResolver-AnimatedLine';
+AnimatedPolyline.displayName = 'Gluestack-AnimatedResolver-AnimatedPolyline';
+AnimatedPath.displayName = 'Gluestack-AnimatedResolver-AnimatedPath';
+AnimatedTSpan.displayName = 'Gluestack-AnimatedResolver-AnimatedTSpan';
+AnimatedTextPath.displayName = 'Gluestack-AnimatedResolver-AnimatedTextPath';
+AnimatedG.displayName = 'Gluestack-AnimatedResolver-AnimatedG';
+AnimatedClipPath.displayName = 'Gluestack-AnimatedResolver-AnimatedClipPath';
+export { AnimatedText, AnimatedView, AnimatedPressable, AnimatedImage, AnimatedScrollView, AnimatedSafeAreaView, AnimatedFlatList, AnimatedSectionList, AnimatePresence, AnimatedSvg, AnimatedRect, AnimatedCircle, AnimatedEllipse, AnimatedLine, AnimatedPolyline, AnimatedPath, AnimatedTSpan, AnimatedTextPath, AnimatedG, AnimatedClipPath };
 //# sourceMappingURL=index.js.map

lib/module/index.js

@@ -167,18 +167,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     for (const prop in styledObject) {
-      if (typeof styledObject[prop] === 'object') {
-        keyPath.push(prop);
-        this.updateStyledObject(styledObject[prop], shouldUpdateConfig, resolvedStyledObject, keyPath);
-        keyPath.pop();
-      }
-
-      // @ts-ignore
       if (aliases && aliases !== null && aliases !== void 0 && aliases[prop]) {
+        let isStyleKey = false;
         if (shouldUpdateConfig) {
           // this.#childrenExitPropsMap[prop] = styledObject[prop];
+          if (keyPath[keyPath.length - 1] === 'style') {
+            isStyleKey = true;
+            keyPath.pop();
+          }
           setObjectKeyValue(this.#childrenExitPropsMap, [...keyPath, prop], styledObject[prop]);
         }
         const value = styledObject[prop];
-        if (keyPath[keyPath.length - 1] === 'style') {
-          keyPath.pop();
-        }
+
         // @ts-ignore
@@ -191,5 +187,12 @@ keyPath.push('props', aliases[prop]);
         keyPath.pop();
-        // delete styledObject[prop];
+        if (isStyleKey) keyPath.push('style');
+        delete styledObject[prop];
+      } else if (typeof styledObject[prop] === 'object') {
+        keyPath.push(prop);
+        this.updateStyledObject(styledObject[prop], shouldUpdateConfig, resolvedStyledObject, keyPath);
+        keyPath.pop();
       }
 
+      // @ts-ignore
+
       if (animatedPropMap && animatedPropMap[prop]) {
@@ -255,5 +258,3 @@ this.renameObjectKey(styledObject, prop, animatedPropMap[prop]);
         resolvedAnimatedStyledWithStyledObject === null || resolvedAnimatedStyledWithStyledObject === void 0 ? void 0 : resolvedAnimatedStyledWithStyledObject.props : {};
-        return /*#__PURE__*/React.createElement(Component, _extends({}, animatedProps, {
-          sx: resolvedAnimatedStyledWithStyledObject
-        }, restProps, {
+        return /*#__PURE__*/React.createElement(Component, _extends({}, animatedProps, restProps, {
           ref: ref
@@ -263,2 +264,3 @@ }));
       if (NewComponent) {
+        var _Component$styled;
         //@ts-ignore
@@ -268,4 +270,8 @@ NewComponent.styled = {};
         NewComponent.styled.config = {};
+
         //@ts-ignore
-        NewComponent.styled.config = styledConfig;
+        NewComponent.styled.config = {
+          ...(Component === null || Component === void 0 || (_Component$styled = Component.styled) === null || _Component$styled === void 0 ? void 0 : _Component$styled.config),
+          ...styledConfig
+        };
         //@ts-ignore
@@ -272,0 +278,0 @@ NewComponent.isStyledComponent = Component === null || Component === void 0 ? void 0 : Component.isStyledComponent;

lib/typescript/AnimatedComponents/index.d.ts

 import React from 'react';
 import type { ImageProps, PressableProps, ViewProps, TextProps, ScrollViewProps, FlatListProps, SectionListProps } from 'react-native';
+import type { SvgProps, GProps, ClipPathProps, RectProps, PolylineProps, CircleProps, EllipseProps, LineProps, PathProps, TSpanProps, TextPathProps } from 'react-native-svg';
 declare const AnimatedText: {
@@ -49,43 +50,70 @@ (props: TextProps & {
 };
+declare const AnimatedSvg: {
+    (props: SvgProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedRect: {
+    (props: RectProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedCircle: {
+    (props: CircleProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedEllipse: {
+    (props: EllipseProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedLine: {
+    (props: LineProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedPolyline: {
+    (props: PolylineProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedPath: {
+    (props: PathProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedTSpan: {
+    (props: TSpanProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedTextPath: {
+    (props: TextPathProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedG: {
+    (props: GProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
+declare const AnimatedClipPath: {
+    (props: ClipPathProps & {
+        animationComponentGluestack: true;
+    }): React.JSX.Element;
+    displayName: string;
+};
 declare const AnimatePresence: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
-export { AnimatedText, AnimatedView, AnimatedPressable, AnimatedImage, AnimatedScrollView, AnimatedSafeAreaView, AnimatedFlatList, AnimatedSectionList, AnimatePresence, };
-export declare const AnimatedSvg: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedRect: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedCircle: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedEllipse: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedLine: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedPolyline: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedPath: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedTSpan: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedTextPath: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedG: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedClipPath: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedLinearGradient: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
-export declare const AnimatedRadialGradient: (props: ViewProps & {
-    animationComponentGluestack: true;
-}) => React.JSX.Element;
+export { AnimatedText, AnimatedView, AnimatedPressable, AnimatedImage, AnimatedScrollView, AnimatedSafeAreaView, AnimatedFlatList, AnimatedSectionList, AnimatePresence, AnimatedSvg, AnimatedRect, AnimatedCircle, AnimatedEllipse, AnimatedLine, AnimatedPolyline, AnimatedPath, AnimatedTSpan, AnimatedTextPath, AnimatedG, AnimatedClipPath, };
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@gluestack-style/animation-resolver",
-  "version": "1.0.2-alpha.0",
+  "version": "1.0.2",
   "description": "A gluestack-style plugin for resolving animation properties, utilizing animation libraries.",
@@ -5,0 +5,0 @@ "keywords": [

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181066

increased by1.83%

Lines of code

2828

increased by2.09%

Number of low quality alerts

1

decreased by-50%

No dependency changes