fix: remove extra hoc from plugins

gluestack · Oct 11, 2023 · b3e8c23 · b3e8c23
1 parent 00d8b02
commit b3e8c23
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 57 deletions.
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';
diff --git a/packages/react/src/plugins/font-resolver.tsx b/packages/react/src/plugins/font-resolver.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import type { IStyled, IStyledPlugin } from '../types';
 import { useStyled } from '../StyledProvider';
 import { propertyTokenMap } from '../propertyTokenMap';
-import { deepMerge, deepMergeObjects, setObjectKeyValue } from '../utils';
+import { deepMerge, setObjectKeyValue } from '../utils';
 import { getVariantProps } from '../styled';
 
 const fontWeights: any = {
@@ -218,11 +218,11 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
     return styledObject;
   }
 
-  componentMiddleWare({ Component: NewComp, extendedConfig }: any) {
+  componentMiddleWare({ Component: InputComponent, extendedConfig }: any) {
     const styledConfig = this.#fontFamily;
     this.#fontFamily = {};
 
-    const Comp = React.forwardRef((props: any, ref: any) => {
+    const OutputComponent = React.forwardRef((props: any, ref: any) => {
       const styledContext = useStyled();
       const CONFIG = useMemo(
         () => ({
@@ -249,12 +249,9 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
         variantProps,
         styledConfig
       );
-      let componentStyledObject = deepMergeObjects(
-        styledConfig,
-        variantStyledObject
-      );
+      let componentStyledObject = deepMerge(styledConfig, variantStyledObject);
 
-      delete componentStyledObject.variants;
+      // delete componentStyledObject.variants;
 
       const { sx, fontWeight, fontFamily, fontStyle, ...rest } = restProps;
 
@@ -279,35 +276,31 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
         sxPropsWithThemeProps,
         false,
         false,
-        NewComp
+        () => <></>
       );
 
-      const styles = Array.isArray(rest.style)
-        ? [...rest?.style, resolvedSxProps]
-        : resolvedSxProps;
-
-      return <NewComp {...rest} style={styles} ref={ref} />;
+      return <InputComponent {...rest} sx={resolvedSxProps} ref={ref} />;
     });
 
     //@ts-ignore
-    Comp.styled = {};
+    OutputComponent.styled = {};
     //@ts-ignore
-    Comp.styled.config = {};
+    OutputComponent.styled.config = {};
     //@ts-ignore
-    Comp.styled.config = {
+    OutputComponent.styled.config = {
       ...styledConfig?.config,
-      ...NewComp?.styled?.config,
+      ...InputComponent?.styled?.config,
     };
 
     //@ts-ignore
-    Comp.isStyledComponent = NewComp?.isStyledComponent;
+    OutputComponent.isStyledComponent = InputComponent?.isStyledComponent;
     //@ts-ignore
-    Comp.isComposedComponent = NewComp?.isComposedComponent;
+    OutputComponent.isComposedComponent = InputComponent?.isComposedComponent;
     //@ts-ignore
-    Comp.isAnimatedComponent = NewComp?.isAnimatedComponent;
+    OutputComponent.isAnimatedComponent = InputComponent?.isAnimatedComponent;
 
-    Comp.displayName = NewComp?.displayName;
+    OutputComponent.displayName = InputComponent?.displayName;
 
-    return Comp;
+    return OutputComponent;
   }
 }
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -1887,23 +1887,26 @@ export function verboseStyled<P, Variants, ComCon>(
 
     // }
 
-    if (plugins) {
-      for (const pluginName in plugins) {
-        // @ts-ignore
-        if (plugins[pluginName]?.componentMiddleWare) {
+    const ComponentWithPlugin = React.useMemo(() => {
+      if (plugins) {
+        for (const pluginName in plugins) {
           // @ts-ignore
-          Component = plugins[pluginName]?.componentMiddleWare({
-            Component: Component,
-            theme,
-            componentStyleConfig,
-            ExtendedConfig,
-          });
+          if (plugins[pluginName]?.componentMiddleWare) {
+            // @ts-ignore
+            Component = plugins[pluginName]?.componentMiddleWare({
+              Component: Component,
+              theme,
+              componentStyleConfig,
+              ExtendedConfig,
+            });
 
-          //@ts-ignore
-          pluginData = { ...pluginData, ...Component?.styled };
+            //@ts-ignore
+            pluginData = { ...pluginData, ...Component?.styled };
+          }
         }
       }
-    }
+      return Component;
+    }, []);
 
     let component;
 
@@ -1919,15 +1922,15 @@ export function verboseStyled<P, Variants, ComCon>(
       //@ts-ignore
       if (Component.isStyledComponent) {
         component = (
-          <Component
+          <ComponentWithPlugin
             {...resolvedStyleProps}
             {...propsToBePassedInToPlugin}
             style={resolvedStyleMemo}
             as={AsComp}
             ref={ref}
           >
             {children}
-          </Component>
+          </ComponentWithPlugin>
         );
       } else {
         component = (
@@ -1938,14 +1941,14 @@ export function verboseStyled<P, Variants, ComCon>(
       }
     } else {
       component = (
-        <Component
+        <ComponentWithPlugin
           {...resolvedStyleProps}
           {...propsToBePassedInToPlugin}
           style={resolvedStyleMemo}
           ref={ref}
         >
           {children}
-        </Component>
+        </ComponentWithPlugin>
       );
     }