@@ -978,142 +978,142 @@ if (__EXPERIMENTAL__) {
978
978
tests . valid = [
979
979
...tests . valid ,
980
980
`
981
- // Valid because functions created with useEvent can be called in a useEffect.
982
- function MyComponent({ theme }) {
983
- const onClick = useEvent(() => {
984
- showNotification(theme);
985
- });
986
- useEffect(() => {
987
- onClick();
988
- });
989
- }
990
- ` ,
991
- `
992
- // Valid because functions created with useEvent can be called in closures.
993
- function MyComponent({ theme }) {
994
- const onClick = useEvent(() => {
995
- showNotification(theme);
996
- });
997
- return <Child onClick={() => onClick()}></Child>;
998
- }
999
- ` ,
1000
- `
1001
- // Valid because functions created with useEvent can be called in closures.
1002
- function MyComponent({ theme }) {
1003
- const onClick = useEvent(() => {
1004
- showNotification(theme);
1005
- });
1006
- const onClick2 = () => { onClick() };
1007
- const onClick3 = useCallback(() => onClick(), []);
1008
- return <>
1009
- <Child onClick={onClick2}></Child>
1010
- <Child onClick={onClick3}></Child>
1011
- </>;
1012
- }
1013
- ` ,
1014
- `
1015
- // Valid because functions created with useEvent can be passed by reference in useEffect
1016
- // and useEvent.
1017
- function MyComponent({ theme }) {
1018
- const onClick = useEvent(() => {
1019
- showNotification(theme);
1020
- });
1021
- const onClick2 = useEvent(() => {
1022
- debounce(onClick);
1023
- });
1024
- useEffect(() => {
1025
- let id = setInterval(onClick, 100);
1026
- return () => clearInterval(onClick);
1027
- }, []);
1028
- return <Child onClick={() => onClick2()} />
1029
- }
1030
- ` ,
1031
- `
1032
- const MyComponent = ({theme}) => {
1033
- const onClick = useEvent(() => {
1034
- showNotification(theme);
1035
- });
1036
- return <Child onClick={() => onClick()}></Child>;
1037
- };
1038
- ` ,
1039
- `
1040
- function MyComponent({ theme }) {
1041
- const notificationService = useNotifications();
1042
- const showNotification = useEvent((text) => {
1043
- notificationService.notify(theme, text);
1044
- });
1045
- const onClick = useEvent((text) => {
1046
- showNotification(text);
1047
- });
1048
- return <Child onClick={(text) => onClick(text)} />
1049
- }
1050
- ` ,
981
+ // Valid because functions created with useEvent can be called in a useEffect.
982
+ function MyComponent({ theme }) {
983
+ const onClick = useEvent(() => {
984
+ showNotification(theme);
985
+ });
986
+ useEffect(() => {
987
+ onClick();
988
+ });
989
+ }
990
+ ` ,
1051
991
`
1052
- function MyComponent({ theme }) {
1053
- useEffect(() => {
1054
- onClick();
1055
- });
1056
- const onClick = useEvent(() => {
1057
- showNotification(theme);
1058
- });
1059
- }
1060
- ` ,
1061
- ] ;
1062
- tests . invalid = [
1063
- ...tests . invalid ,
1064
- {
1065
- code : `
992
+ // Valid because functions created with useEvent can be called in closures.
1066
993
function MyComponent({ theme }) {
1067
994
const onClick = useEvent(() => {
1068
995
showNotification(theme);
1069
996
});
1070
- return <Child onClick={onClick}></Child>;
997
+ return <Child onClick={() => onClick() }></Child>;
1071
998
}
1072
999
` ,
1073
- errors : [ useEventError ( 'onClick' ) ] ,
1074
- } ,
1075
- {
1076
- code : `
1077
- // This should error even though it shares an identifier name with the below
1078
- function MyComponent({theme}) {
1000
+ `
1001
+ // Valid because functions created with useEvent can be called in closures.
1002
+ function MyComponent({ theme }) {
1079
1003
const onClick = useEvent(() => {
1080
- showNotification(theme)
1004
+ showNotification(theme);
1081
1005
});
1082
- return <Child onClick={onClick} />
1006
+ const onClick2 = () => { onClick() };
1007
+ const onClick3 = useCallback(() => onClick(), []);
1008
+ return <>
1009
+ <Child onClick={onClick2}></Child>
1010
+ <Child onClick={onClick3}></Child>
1011
+ </>;
1083
1012
}
1084
-
1085
- // The useEvent function shares an identifier name with the above
1086
- function MyOtherComponent({theme}) {
1013
+ ` ,
1014
+ `
1015
+ // Valid because functions created with useEvent can be passed by reference in useEffect
1016
+ // and useEvent.
1017
+ function MyComponent({ theme }) {
1087
1018
const onClick = useEvent(() => {
1088
- showNotification(theme)
1019
+ showNotification(theme);
1089
1020
});
1090
- return <Child onClick={() => onClick()} />
1021
+ const onClick2 = useEvent(() => {
1022
+ debounce(onClick);
1023
+ });
1024
+ useEffect(() => {
1025
+ let id = setInterval(onClick, 100);
1026
+ return () => clearInterval(onClick);
1027
+ }, []);
1028
+ return <Child onClick={() => onClick2()} />
1091
1029
}
1092
1030
` ,
1093
- errors : [ { ...useEventError ( 'onClick' ) , line : 7 } ] ,
1094
- } ,
1095
- {
1096
- code : `
1097
- const MyComponent = ({ theme }) => {
1031
+ `
1032
+ const MyComponent = ({theme}) => {
1098
1033
const onClick = useEvent(() => {
1099
1034
showNotification(theme);
1100
1035
});
1101
- return <Child onClick={onClick}></Child>;
1036
+ return <Child onClick={() => onClick()}></Child>;
1037
+ };
1038
+ ` ,
1039
+ `
1040
+ function MyComponent({ theme }) {
1041
+ const notificationService = useNotifications();
1042
+ const showNotification = useEvent((text) => {
1043
+ notificationService.notify(theme, text);
1044
+ });
1045
+ const onClick = useEvent((text) => {
1046
+ showNotification(text);
1047
+ });
1048
+ return <Child onClick={(text) => onClick(text)} />
1102
1049
}
1103
1050
` ,
1104
- errors : [ useEventError ( 'onClick' ) ] ,
1105
- } ,
1106
- {
1107
- code : `
1108
- // Invalid because onClick is being aliased to foo but not invoked
1051
+ `
1109
1052
function MyComponent({ theme }) {
1053
+ useEffect(() => {
1054
+ onClick();
1055
+ });
1110
1056
const onClick = useEvent(() => {
1111
1057
showNotification(theme);
1112
1058
});
1113
- let foo = onClick;
1114
- return <Bar onClick={foo} />
1115
1059
}
1116
1060
` ,
1061
+ ] ;
1062
+ tests . invalid = [
1063
+ ...tests . invalid ,
1064
+ {
1065
+ code : `
1066
+ function MyComponent({ theme }) {
1067
+ const onClick = useEvent(() => {
1068
+ showNotification(theme);
1069
+ });
1070
+ return <Child onClick={onClick}></Child>;
1071
+ }
1072
+ ` ,
1073
+ errors : [ useEventError ( 'onClick' ) ] ,
1074
+ } ,
1075
+ {
1076
+ code : `
1077
+ // This should error even though it shares an identifier name with the below
1078
+ function MyComponent({theme}) {
1079
+ const onClick = useEvent(() => {
1080
+ showNotification(theme)
1081
+ });
1082
+ return <Child onClick={onClick} />
1083
+ }
1084
+
1085
+ // The useEvent function shares an identifier name with the above
1086
+ function MyOtherComponent({theme}) {
1087
+ const onClick = useEvent(() => {
1088
+ showNotification(theme)
1089
+ });
1090
+ return <Child onClick={() => onClick()} />
1091
+ }
1092
+ ` ,
1093
+ errors : [ { ...useEventError ( 'onClick' ) , line : 7 } ] ,
1094
+ } ,
1095
+ {
1096
+ code : `
1097
+ const MyComponent = ({ theme }) => {
1098
+ const onClick = useEvent(() => {
1099
+ showNotification(theme);
1100
+ });
1101
+ return <Child onClick={onClick}></Child>;
1102
+ }
1103
+ ` ,
1104
+ errors : [ useEventError ( 'onClick' ) ] ,
1105
+ } ,
1106
+ {
1107
+ code : `
1108
+ // Invalid because onClick is being aliased to foo but not invoked
1109
+ function MyComponent({ theme }) {
1110
+ const onClick = useEvent(() => {
1111
+ showNotification(theme);
1112
+ });
1113
+ let foo = onClick;
1114
+ return <Bar onClick={foo} />
1115
+ }
1116
+ ` ,
1117
1117
errors : [ { ...useEventError ( 'onClick' ) , line : 7 } ] ,
1118
1118
} ,
1119
1119
{
0 commit comments