Merge pull request #472 from gluestack/fix/plugin-component-middle-ware

Fix/plugin component middle ware
gluestack · Oct 11, 2023 · 18a3a91 · 18a3a91
2 parents f0a368d + 4043a70
commit 18a3a91
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 173 deletions.
diff --git a/packages/animation-legend-motion-driver/src/index.tsx b/packages/animation-legend-motion-driver/src/index.tsx
@@ -1,63 +1,16 @@
-import { useStyled } from '@gluestack-style/react';
 import type {
   IAnimationDriverPlugin,
   IAnimationResolver,
 } from '@gluestack-style/react';
-import React, { useMemo } from 'react';
-import {
-  deepMerge,
-  deepMergeObjects,
-  setObjectKeyValue,
-  resolvedTokenization,
-} from './utils';
+import React from 'react';
+import { deepMerge } from './utils';
 import {
   Motion,
   AnimatePresence as MotionAnimatePresence,
   createMotionAnimatedComponent,
 } from '@legendapp/motion';
-import { propertyTokenMap } from './propertyTokenMap';
 import { Pressable } from 'react-native';
 
-function tokenizeAnimationPropsFromConfig(
-  props: any = {},
-  config: any,
-  animationAliases: any,
-  path: any = [],
-  tokenizedAnimatedProps: any = {}
-) {
-  for (const prop in props) {
-    if (Array.isArray(props[prop])) {
-      path.push(prop);
-      setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
-      path.pop();
-    } else if (animationAliases[prop]) {
-      path.push(prop);
-      const tokenizedValue = resolvedTokenization(props[prop], config);
-      setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
-      path.pop();
-    } else if (typeof props[prop] === 'object') {
-      path.push(prop);
-      const tokenizedValue = resolvedTokenization(props[prop], config);
-      setObjectKeyValue(tokenizedAnimatedProps, path, tokenizedValue);
-      // path.pop();
-      tokenizeAnimationPropsFromConfig(
-        props[prop],
-        config,
-        animationAliases,
-        path,
-        tokenizedAnimatedProps
-      );
-      path.pop();
-    } else {
-      path.push(prop);
-      setObjectKeyValue(tokenizedAnimatedProps, path, props[prop]);
-      path.pop();
-    }
-  }
-
-  return tokenizedAnimatedProps;
-}
-
 function getVariantProps(props: any, theme: any) {
   const variantTypes = theme?.variants ? Object.keys(theme.variants) : [];
 
@@ -91,65 +44,38 @@ function resolveVariantAnimationProps(variantProps: any, styledObject: any) {
 
 const AnimatePresence = React.forwardRef(
   ({ children, ...props }: any, ref?: any) => {
-    const ctx = useStyled();
     const clonedChildren: any = [];
-    const CONFIG = useMemo(
-      () => ({
-        ...ctx.config,
-        propertyTokenMap,
-      }),
-      [ctx.config]
-    );
 
     React.Children.toArray(children).forEach((child: any) => {
       if (
         (child?.type?.displayName &&
           child?.type?.displayName.includes('Gluestack-AnimatedResolver')) ||
         child?.type?.isStyledComponent
       ) {
-        let tokenizedAnimatedProps: any = {};
-        const animationAliases = {};
-
         const componentStyledObject = child?.type?.getStyledData()?.config;
 
         const { variantProps, restProps } = getVariantProps(
-          child?.props,
+          { ...componentStyledObject?.props, ...child?.props },
           componentStyledObject
         );
 
-        const config = CONFIG;
-
-        const variantStyledObject = resolveVariantAnimationProps(
+        const variantStyledObject: any = resolveVariantAnimationProps(
           variantProps,
           componentStyledObject
         );
 
-        const componentStyledObjectWithVariants = deepMergeObjects(
-          componentStyledObject,
-          variantStyledObject
-        );
-        tokenizedAnimatedProps = tokenizeAnimationPropsFromConfig(
-          componentStyledObjectWithVariants,
-          config,
-          animationAliases
-        );
-
-        const tokenizedSxAnimationProps: any = tokenizeAnimationPropsFromConfig(
-          child?.props?.sx,
-          config,
-          animationAliases
-        );
-
-        const mergedAnimatedProps = deepMergeObjects(
-          {},
-          tokenizedSxAnimationProps,
-          tokenizedAnimatedProps
-        );
+        const exit = {
+          ...componentStyledObject?.[':exit'],
+          ...variantStyledObject?.[':exit'],
+          ...restProps?.sx?.[':exit'],
+          ...restProps?.exit,
+        };
 
         const clonedChild = React.cloneElement(child, {
+          exit,
           ...restProps,
-          exit: mergedAnimatedProps?.baseStyle?.[':exit'],
         });
+
         clonedChildren.push(clonedChild);
       } else {
         clonedChildren.push(child);

diff --git a/packages/animation-resolver/src/index.tsx b/packages/animation-resolver/src/index.tsx
@@ -210,24 +210,18 @@ export class AnimationResolver implements IStyledPlugin {
     resolvedStyledObject: any = {},
     keyPath: string[] = []
   ) {
-    const aliases = this.config?.aliases;
+    const aliases: any = this.config?.aliases;
     const animatedPropMap = this.config?.animatedPropMap;
-    for (const prop in styledObject) {
-      if (typeof styledObject[prop] === 'object') {
-        keyPath.push(prop);
-        this.updateStyledObject(
-          styledObject[prop],
-          shouldUpdateConfig,
-          resolvedStyledObject,
-          keyPath
-        );
-        keyPath.pop();
-      }
 
-      // @ts-ignore
+    for (const prop in styledObject) {
       if (aliases && 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],
@@ -236,19 +230,29 @@ export class AnimationResolver implements IStyledPlugin {
         }
         const value = styledObject[prop];
 
-        if (keyPath[keyPath.length - 1] === 'style') {
-          keyPath.pop();
-        }
         // @ts-ignore
         keyPath.push('props', aliases[prop]);
         // setObjectKeyValue(resolvedStyledObject, keyPath, value);
 
         setObjectKeyValue(resolvedStyledObject, keyPath, value);
         keyPath.pop();
         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]) {
         this.renameObjectKey(styledObject, prop, animatedPropMap[prop]);
       }
@@ -334,29 +338,27 @@ export class AnimationResolver implements IStyledPlugin {
             resolvedAnimatedStyledWithStyledObject?.props
           : {};
 
-        return (
-          <Component
-            {...animatedProps}
-            sx={resolvedAnimatedStyledWithStyledObject}
-            {...restProps}
-            ref={ref}
-          />
-        );
+        return <Component {...animatedProps} {...restProps} ref={ref} />;
       });
 
       if (NewComponent) {
         //@ts-ignore
         NewComponent.styled = {};
         //@ts-ignore
         NewComponent.styled.config = {};
+
         //@ts-ignore
-        NewComponent.styled.config = styledConfig;
+        NewComponent.styled.config = {
+          ...Component?.styled?.config,
+          ...styledConfig,
+        };
         //@ts-ignore
         NewComponent.isStyledComponent = Component?.isStyledComponent;
         //@ts-ignore
         NewComponent.isComposedComponent = Component?.isComposedComponent;
 
         NewComponent.displayName = Component?.displayName;
+
         return NewComponent;
       }
     } else {

diff --git a/packages/react/src/createConfig.ts b/packages/react/src/createConfig.ts
@@ -11,21 +11,21 @@ import { Platform } from 'react-native';
 
 /********************* PLUGINS *****************************/
 
-var globalPluginStore: never[] = [];
-function setGlobalPluginStore(plugins: any) {
-  if (plugins) {
-    // @ts-ignore
-    globalPluginStore.push(...plugins);
-  }
-  return getGlobalPluginStore();
-}
-function getGlobalPluginStore() {
-  return globalPluginStore;
-}
+// var globalPluginStore: never[] = [];
+// function setGlobalPluginStore(plugins: any) {
+//   if (plugins) {
+//     // @ts-ignore
+//     globalPluginStore.push(...plugins);
+//   }
+//   return getGlobalPluginStore();
+// }
+// function getGlobalPluginStore() {
+//   return globalPluginStore;
+// }
 
-export function getInstalledPlugins() {
-  return getGlobalPluginStore();
-}
+// export function getInstalledPlugins() {
+//   return getGlobalPluginStore();
+// }
 
 /********************* CREATE COMPONENTS *****************************/
 
@@ -74,7 +74,7 @@ export const createConfig = <
       >
 ): T => {
   if (config.plugins) {
-    config.plugins = setGlobalPluginStore(config.plugins);
+    // config.plugins = setGlobalPluginStore(config.plugins);
   }
   // delete config.plugins;
 

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -92,9 +92,9 @@ export { createStyle } from './createStyle';
 export { INTERNAL_updateCSSStyleInOrderedResolved } from './updateCSSStyleInOrderedResolved';
 export {
   createConfig,
-  getInstalledPlugins,
+  // getInstalledPlugins,
   createComponents,
-  getInstalledComponents,
+  // getInstalledComponents,
 } from './createConfig';
 export * from './core';
 export * from './hooks';