Skip to content

Commit dbf36de

Browse files
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 <[email protected]>
1 parent cb29940 commit dbf36de

File tree

3 files changed

+36
-4
lines changed

3 files changed

+36
-4
lines changed

bundlesize.config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
{
1212
"path": "./packages/feature-toggle-jsx/lib/featuretogglejsx.umd.js",
13-
"maxSize": "840 B"
13+
"maxSize": "985 B"
1414
},
1515
{
1616
"path": "./packages/format-to-jsx/lib/formattojsx.umd.js",

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import { FeatureConfig } from '../FeaturesContext';
44
import useFeature from '../useFeature';
55
import { nameOf } from '../react-utils';
66

7+
78
export type withFeatureHoC<TFeatureConfig extends FeatureConfig> = <
89
TOrigProps extends {},
910
TFeatureName extends Extract<keyof TFeatureConfig, string | number>
1011
>(
1112
Component: React.ComponentType<TOrigProps>,
1213
featureName: TFeatureName,
1314
isEnabled?: (feature: TFeatureConfig[TFeatureName]) => boolean
14-
) => React.FC<TOrigProps>;
15+
) => React.FC<TOrigProps & Partial<TFeatureConfig>>;
1516

1617
const withFeature = <
1718
TOrigProps extends {},
@@ -23,9 +24,9 @@ const withFeature = <
2324
isEnabled: (feature: TFeatureConfig[TFeatureName]) => boolean = (_) => !!_
2425
) => {
2526
const Wrapped: React.FC<TOrigProps> = React.memo((props) => {
26-
const [enabled] = useFeature(featureName, isEnabled);
27+
const [enabled, features] = useFeature(featureName, isEnabled);
2728

28-
if (enabled) return <Component {...props} />;
29+
if (enabled) return <Component {...props} {...{ [featureName]: features }} />;
2930

3031
return null;
3132
});

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,35 @@ describe('withFeature', () => {
7979

8080
expect(container.textContent).toEqual('This is feature 1');
8181
});
82+
83+
it('should pass config to props', () => {
84+
const featuresConfig = {
85+
someFeat: {
86+
someCustomField: 10
87+
}
88+
} as CustomFeatureConfig;
89+
90+
const App: React.FC = ({ children }) => <div>{children}</div>;
91+
type Props = { someFeat?: { someCustomField: number } }
92+
const Feat1: React.FC<Props> = (props) => {
93+
const { someFeat } = props;
94+
return (<span>This is feature {someFeat ? someFeat.someCustomField : '1'}</span>);
95+
};
96+
97+
const WrappedFeat1 = withFeature(Feat1, 'someFeat');
98+
99+
const UnderTest: React.FC = () => (
100+
<><WrappedFeat1 /></>
101+
);
102+
103+
const WrappedApp = withFeaturesProvider(App, featuresConfig);
104+
105+
const { container } = render(
106+
<WrappedApp>
107+
<UnderTest />
108+
</WrappedApp>,
109+
);
110+
111+
expect(container.textContent).toEqual('This is feature 10');
112+
});
82113
});

0 commit comments

Comments
 (0)