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

Comparing version 1.0.2 to 1.0.3-alpha.0

lib/commonjs/AnimatedComponents/index.js

@@ -137,4 +137,3 @@ "use strict";
 exports.AnimatedClipPath = AnimatedClipPath;
-const AnimatePresence = animatedComponent('AnimatePresence', {});
-exports.AnimatePresence = AnimatePresence;
+const AnimatePresence = exports.AnimatePresence = animatedComponent('AnimatePresence', {});
 AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
@@ -141,0 +140,0 @@ AnimatedView.displayName = 'Gluestack-AnimatedResolver-AnimatedView';

lib/commonjs/index.js

@@ -26,4 +26,4 @@ "use strict";
 });
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
@@ -73,3 +73,2 @@ function tokenizeAnimationPropsFromConfig() {
   });
-
   return {
@@ -154,17 +153,8 @@ variantProps,
     let Component = arguments.length > 3 ? arguments[3] : undefined;
+    const ignoreKeys = new Set();
     if (Component && ((_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 && _Component$displayNam.startsWith('Gluestack-AnimatedResolver-Animated') ||
     // @ts-ignore
     Component.isAnimatedComponent)) {
-      var _Component$displayNam2;
-      let AnimatedComponent = this.componentDriver.engine[// @ts-ignore
-      (_Component$displayNam2 = Component.displayName) === null || _Component$displayNam2 === void 0 ? void 0 : _Component$displayNam2.replace('Gluestack-AnimatedResolver-Animated', '')];
-      if (AnimatedComponent) {
-        AnimatedComponent.isAnimatedComponent = true;
-      }
-      if (!AnimatedComponent) {
-        AnimatedComponent = Component;
-      }
-
       // this.#childrenExitPropsMap = deepClone(styledObj);
-      const resolvedAnimatedProps = this.updateStyledObject(styledObj, shouldUpdateConfig);
+      const resolvedAnimatedProps = this.updateStyledObject(styledObj, shouldUpdateConfig, ignoreKeys);
       const resolvedStyledObjectWithAnimatedProps = (0, _utils.deepMerge)(styledObj, resolvedAnimatedProps);
@@ -179,6 +169,6 @@
 
-      return [resolvedStyledObjectWithAnimatedProps, shouldUpdateConfig, _, AnimatedComponent];
+      return [resolvedStyledObjectWithAnimatedProps, shouldUpdateConfig, _, Component, ignoreKeys];
     }
     // @ts-ignore
-    return [styledObj, shouldUpdateConfig, _, Component];
+    return [styledObj, shouldUpdateConfig, _, Component, ignoreKeys];
   }
@@ -189,4 +179,5 @@ updateStyledObject() {
     let shouldUpdateConfig = arguments.length > 1 ? arguments[1] : undefined;
-    let resolvedStyledObject = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    let keyPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+    let ignoreKeys = arguments.length > 2 ? arguments[2] : undefined;
+    let resolvedStyledObject = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    let keyPath = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
     const aliases = (_this$config4 = this.config) === null || _this$config4 === void 0 ? void 0 : _this$config4.aliases;
@@ -196,9 +187,6 @@ const animatedPropMap = (_this$config5 = this.config) === null || _this$config5 === void 0 ? void 0 : _this$config5.animatedPropMap;
       if (aliases && aliases !== null && aliases !== void 0 && aliases[prop]) {
-        let isStyleKey = false;
+        ignoreKeys.add(prop);
         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]);
@@ -215,3 +203,2 @@ }
         keyPath.pop();
-        if (isStyleKey) keyPath.push('style');
         delete styledObject[prop];
@@ -238,2 +225,3 @@ } else if (typeof styledObject[prop] === 'object') {
   componentMiddleWare(_ref) {
+    var _Component$displayNam2;
     let {
@@ -243,3 +231,14 @@ Component,
     } = _ref;
-    if (Component && Component !== null && Component !== void 0 && Component.isAnimatedComponent) {
+    if (Component && ((_Component$displayNam2 = Component.displayName) !== null && _Component$displayNam2 !== void 0 && _Component$displayNam2.startsWith('Gluestack-AnimatedResolver-Animated') ||
+    // @ts-ignore
+    Component.isAnimatedComponent)) {
+      var _Component$displayNam3;
+      let AnimatedComponent = this.componentDriver.engine[// @ts-ignore
+      (_Component$displayNam3 = Component.displayName) === null || _Component$displayNam3 === void 0 ? void 0 : _Component$displayNam3.replace('Gluestack-AnimatedResolver-Animated', '')];
+      if (AnimatedComponent) {
+        AnimatedComponent.isAnimatedComponent = true;
+      }
+      if (!AnimatedComponent) {
+        AnimatedComponent = Component;
+      }
       const styledConfig = this.#childrenExitPropsMap;
@@ -281,3 +280,3 @@ this.#childrenExitPropsMap = {};
         // @ts-ignore
-        const [resolvedAnimatedStyledWithStyledObject,,,] = this.inputMiddleWare(mergedAnimatedProps, false, false, Component);
+        const [resolvedAnimatedStyledWithStyledObject,,,] = this.inputMiddleWare(mergedAnimatedProps, true, false, Component);
         let isState = false;
@@ -289,3 +288,3 @@ Object.keys((restProps === null || restProps === void 0 ? void 0 : restProps.states) ?? {}).forEach(state => {
         resolvedAnimatedStyledWithStyledObject === null || resolvedAnimatedStyledWithStyledObject === void 0 ? void 0 : resolvedAnimatedStyledWithStyledObject.props : {};
-        return /*#__PURE__*/_react.default.createElement(Component, _extends({}, animatedProps, restProps, {
+        return /*#__PURE__*/_react.default.createElement(AnimatedComponent, _extends({}, rest, animatedProps, {
           ref: ref
@@ -295,3 +294,3 @@ }));
       if (NewComponent) {
-        var _Component$styled;
+        var _Component$styled, _AnimatedComponent, _AnimatedComponent2, _AnimatedComponent3;
         //@ts-ignore
@@ -308,6 +307,6 @@ NewComponent.styled = {};
         //@ts-ignore
-        NewComponent.isStyledComponent = Component === null || Component === void 0 ? void 0 : Component.isStyledComponent;
+        NewComponent.isStyledComponent = (_AnimatedComponent = AnimatedComponent) === null || _AnimatedComponent === void 0 ? void 0 : _AnimatedComponent.isStyledComponent;
         //@ts-ignore
-        NewComponent.isComposedComponent = Component === null || Component === void 0 ? void 0 : Component.isComposedComponent;
-        NewComponent.displayName = Component === null || Component === void 0 ? void 0 : Component.displayName;
+        NewComponent.isComposedComponent = (_AnimatedComponent2 = AnimatedComponent) === null || _AnimatedComponent2 === void 0 ? void 0 : _AnimatedComponent2.isComposedComponent;
+        NewComponent.displayName = (_AnimatedComponent3 = AnimatedComponent) === null || _AnimatedComponent3 === void 0 ? void 0 : _AnimatedComponent3.displayName;
         return NewComponent;
@@ -314,0 +313,0 @@ }

lib/commonjs/propertyTokenMap.js

@@ -23,3 +23,3 @@ "use strict";
 const zIndices = 'zIndices';
-const propertyTokenMap = {
+const propertyTokenMap = exports.propertyTokenMap = {
   gap: space,
@@ -172,3 +172,2 @@ gridGap: space,
 };
-exports.propertyTokenMap = propertyTokenMap;
 //# sourceMappingURL=propertyTokenMap.js.map

lib/commonjs/utils.js

@@ -155,3 +155,2 @@ "use strict";
   }
-
   return token;
@@ -164,3 +163,2 @@ };
 }
-
 function resolveStringToken(string, config, tokenScaleMap, propName, scale) {
@@ -167,0 +165,0 @@ let typeofResult = 'string';

lib/module/index.js

@@ -49,3 +49,2 @@ 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); }
   });
-
   return {
@@ -130,17 +129,8 @@ variantProps,
     let Component = arguments.length > 3 ? arguments[3] : undefined;
+    const ignoreKeys = new Set();
     if (Component && ((_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 && _Component$displayNam.startsWith('Gluestack-AnimatedResolver-Animated') ||
     // @ts-ignore
     Component.isAnimatedComponent)) {
-      var _Component$displayNam2;
-      let AnimatedComponent = this.componentDriver.engine[// @ts-ignore
-      (_Component$displayNam2 = Component.displayName) === null || _Component$displayNam2 === void 0 ? void 0 : _Component$displayNam2.replace('Gluestack-AnimatedResolver-Animated', '')];
-      if (AnimatedComponent) {
-        AnimatedComponent.isAnimatedComponent = true;
-      }
-      if (!AnimatedComponent) {
-        AnimatedComponent = Component;
-      }
-
       // this.#childrenExitPropsMap = deepClone(styledObj);
-      const resolvedAnimatedProps = this.updateStyledObject(styledObj, shouldUpdateConfig);
+      const resolvedAnimatedProps = this.updateStyledObject(styledObj, shouldUpdateConfig, ignoreKeys);
       const resolvedStyledObjectWithAnimatedProps = deepMerge(styledObj, resolvedAnimatedProps);
@@ -155,6 +145,6 @@
 
-      return [resolvedStyledObjectWithAnimatedProps, shouldUpdateConfig, _, AnimatedComponent];
+      return [resolvedStyledObjectWithAnimatedProps, shouldUpdateConfig, _, Component, ignoreKeys];
     }
     // @ts-ignore
-    return [styledObj, shouldUpdateConfig, _, Component];
+    return [styledObj, shouldUpdateConfig, _, Component, ignoreKeys];
   }
@@ -165,4 +155,5 @@ updateStyledObject() {
     let shouldUpdateConfig = arguments.length > 1 ? arguments[1] : undefined;
-    let resolvedStyledObject = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    let keyPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+    let ignoreKeys = arguments.length > 2 ? arguments[2] : undefined;
+    let resolvedStyledObject = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    let keyPath = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
     const aliases = (_this$config4 = this.config) === null || _this$config4 === void 0 ? void 0 : _this$config4.aliases;
@@ -172,9 +163,6 @@ const animatedPropMap = (_this$config5 = this.config) === null || _this$config5 === void 0 ? void 0 : _this$config5.animatedPropMap;
       if (aliases && aliases !== null && aliases !== void 0 && aliases[prop]) {
-        let isStyleKey = false;
+        ignoreKeys.add(prop);
         if (shouldUpdateConfig) {
           // this.#childrenExitPropsMap[prop] = styledObject[prop];
-          if (keyPath[keyPath.length - 1] === 'style') {
-            isStyleKey = true;
-            keyPath.pop();
-          }
+
           setObjectKeyValue(this.#childrenExitPropsMap, [...keyPath, prop], styledObject[prop]);
@@ -191,3 +179,2 @@ }
         keyPath.pop();
-        if (isStyleKey) keyPath.push('style');
         delete styledObject[prop];
@@ -214,2 +201,3 @@ } else if (typeof styledObject[prop] === 'object') {
   componentMiddleWare(_ref) {
+    var _Component$displayNam2;
     let {
@@ -219,3 +207,14 @@ Component,
     } = _ref;
-    if (Component && Component !== null && Component !== void 0 && Component.isAnimatedComponent) {
+    if (Component && ((_Component$displayNam2 = Component.displayName) !== null && _Component$displayNam2 !== void 0 && _Component$displayNam2.startsWith('Gluestack-AnimatedResolver-Animated') ||
+    // @ts-ignore
+    Component.isAnimatedComponent)) {
+      var _Component$displayNam3;
+      let AnimatedComponent = this.componentDriver.engine[// @ts-ignore
+      (_Component$displayNam3 = Component.displayName) === null || _Component$displayNam3 === void 0 ? void 0 : _Component$displayNam3.replace('Gluestack-AnimatedResolver-Animated', '')];
+      if (AnimatedComponent) {
+        AnimatedComponent.isAnimatedComponent = true;
+      }
+      if (!AnimatedComponent) {
+        AnimatedComponent = Component;
+      }
       const styledConfig = this.#childrenExitPropsMap;
@@ -257,3 +256,3 @@ this.#childrenExitPropsMap = {};
         // @ts-ignore
-        const [resolvedAnimatedStyledWithStyledObject,,,] = this.inputMiddleWare(mergedAnimatedProps, false, false, Component);
+        const [resolvedAnimatedStyledWithStyledObject,,,] = this.inputMiddleWare(mergedAnimatedProps, true, false, Component);
         let isState = false;
@@ -265,3 +264,3 @@ Object.keys((restProps === null || restProps === void 0 ? void 0 : restProps.states) ?? {}).forEach(state => {
         resolvedAnimatedStyledWithStyledObject === null || resolvedAnimatedStyledWithStyledObject === void 0 ? void 0 : resolvedAnimatedStyledWithStyledObject.props : {};
-        return /*#__PURE__*/React.createElement(Component, _extends({}, animatedProps, restProps, {
+        return /*#__PURE__*/React.createElement(AnimatedComponent, _extends({}, rest, animatedProps, {
           ref: ref
@@ -271,3 +270,3 @@ }));
       if (NewComponent) {
-        var _Component$styled;
+        var _Component$styled, _AnimatedComponent, _AnimatedComponent2, _AnimatedComponent3;
         //@ts-ignore
@@ -284,6 +283,6 @@ NewComponent.styled = {};
         //@ts-ignore
-        NewComponent.isStyledComponent = Component === null || Component === void 0 ? void 0 : Component.isStyledComponent;
+        NewComponent.isStyledComponent = (_AnimatedComponent = AnimatedComponent) === null || _AnimatedComponent === void 0 ? void 0 : _AnimatedComponent.isStyledComponent;
         //@ts-ignore
-        NewComponent.isComposedComponent = Component === null || Component === void 0 ? void 0 : Component.isComposedComponent;
-        NewComponent.displayName = Component === null || Component === void 0 ? void 0 : Component.displayName;
+        NewComponent.isComposedComponent = (_AnimatedComponent2 = AnimatedComponent) === null || _AnimatedComponent2 === void 0 ? void 0 : _AnimatedComponent2.isComposedComponent;
+        NewComponent.displayName = (_AnimatedComponent3 = AnimatedComponent) === null || _AnimatedComponent3 === void 0 ? void 0 : _AnimatedComponent3.displayName;
         return NewComponent;
@@ -290,0 +289,0 @@ }

lib/module/utils.js

@@ -137,3 +137,2 @@ export const deepClone = obj => JSON.parse(JSON.stringify(obj));
   }
-
   return token;
@@ -145,3 +144,2 @@ };
 }
-
 export function resolveStringToken(string, config, tokenScaleMap, propName, scale) {
@@ -148,0 +146,0 @@ let typeofResult = 'string';

lib/typescript/index.d.ts

@@ -31,3 +31,3 @@ import React from 'react';
     };
-    updateStyledObject(styledObject: any, shouldUpdateConfig: boolean, resolvedStyledObject?: any, keyPath?: string[]): any;
+    updateStyledObject(styledObject: any, shouldUpdateConfig: boolean, ignoreKeys: Set<any>, resolvedStyledObject?: any, keyPath?: string[]): any;
     renameObjectKey(obj: any, from: string, to: string): any;
@@ -34,0 +34,0 @@ componentMiddleWare({ Component, ExtendedConfig }: any): any;

package.json

 {
   "name": "@gluestack-style/animation-resolver",
-  "version": "1.0.2",
+  "version": "1.0.3-alpha.0",
   "description": "A gluestack-style plugin for resolving animation properties, utilizing animation libraries.",
@@ -25,6 +25,6 @@ "keywords": [
   "peerDependencies": {
-    "@gluestack-style/react": ">=0.2"
+    "@gluestack-style/react": ">=1.0.7"
   },
   "devDependencies": {
-    "@gluestack-style/react": "^0.2.49",
+    "@gluestack-style/react": "^1.0.7",
     "@types/react": "^18.0.22",
@@ -31,0 +31,0 @@ "@types/react-native": "^0.69.15",

New 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

182036

increased by0.54%

Lines of code

2831

increased by0.11%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes