fix: pass feature to props of component (#402)

* fix pass feature to props

* test(withfeature): add test

* fix(withfeature): add space indent

* ci(bundlesize): change config

Co-authored-by: kwanchanok <kwanchanok.warachanthano@agoda.com>

bundlesize.config.json

@@ -10,7 +10,7 @@
     },
     {
       "path": "./packages/feature-toggle-jsx/lib/featuretogglejsx.umd.js",
-      "maxSize": "840 B"
+      "maxSize": "985 B"
     },
     {
       "path": "./packages/format-to-jsx/lib/formattojsx.umd.js",

packages/feature-toggle-jsx/src/withFeature/withFeature.tsx

@@ -4,14 +4,15 @@ import { FeatureConfig } from '../FeaturesContext';
 import useFeature from '../useFeature';
 import { nameOf } from '../react-utils';
 
+
 export type withFeatureHoC<TFeatureConfig extends FeatureConfig> = <
   TOrigProps extends {},
   TFeatureName extends Extract<keyof TFeatureConfig, string | number>
 >(
   Component: React.ComponentType<TOrigProps>,
   featureName: TFeatureName,
   isEnabled?: (feature: TFeatureConfig[TFeatureName]) => boolean
-) => React.FC<TOrigProps>;
+) => React.FC<TOrigProps & Partial<TFeatureConfig>>;
 
 const withFeature = <
   TOrigProps extends {},
@@ -23,9 +24,9 @@ const withFeature = <
   isEnabled: (feature: TFeatureConfig[TFeatureName]) => boolean = (_) => !!_
 ) => {
   const Wrapped: React.FC<TOrigProps> = React.memo((props) => {
-    const [enabled] = useFeature(featureName, isEnabled);
+    const [enabled, features] = useFeature(featureName, isEnabled);
 
-    if (enabled) return <Component {...props} />;
+    if (enabled) return <Component {...props} {...{ [featureName]: features }} />;
 
     return null;
   });

packages/feature-toggle-jsx/tests/withFeature.test.tsx

@@ -79,4 +79,35 @@ describe('withFeature', () => {
 
     expect(container.textContent).toEqual('This is feature 1');
   });
+
+  it('should pass config to props', () => {
+    const featuresConfig = {
+      someFeat: {
+        someCustomField: 10
+      }
+    } as CustomFeatureConfig;
+
+    const App: React.FC = ({ children }) => <div>{children}</div>;
+    type Props = { someFeat?: { someCustomField: number } }
+    const Feat1: React.FC<Props> = (props) => {
+      const { someFeat } = props;
+      return (<span>This is feature {someFeat ? someFeat.someCustomField : '1'}</span>);
+    };
+
+    const WrappedFeat1 = withFeature(Feat1, 'someFeat');
+
+    const UnderTest: React.FC = () => (
+      <><WrappedFeat1 /></>
+    );
+
+    const WrappedApp = withFeaturesProvider(App, featuresConfig);
+
+    const { container } = render(
+      <WrappedApp>
+        <UnderTest />
+      </WrappedApp>,
+    );
+
+    expect(container.textContent).toEqual('This is feature 10');
+  });
 });