Skip to content

Commit cf2f891

Browse files
author
Sebastian Silbermann
committed
React: Allow anything to be rendered by components
1 parent 3719cc7 commit cf2f891

File tree

17 files changed

+129
-116
lines changed

17 files changed

+129
-116
lines changed

‎types/af-utils__react-virtual-headless/af-utils__react-virtual-headless-tests.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,12 @@ useComponentSubscription(useVirtual(), EVT_FROM);
7272
// @ts-expect-error
7373
useComponentSubscription(undefined, [EVT_FROM]);
7474

75-
// $ExpectType Element
76-
useOnce(() => <>Abc</>);
75+
const returnABCFragment = () => <>Abc</>;
76+
const abcFragment: ReturnType<typeof returnABCFragment> = useOnce(returnABCFragment);
7777

78-
// $ExpectType Element
78+
// $ExpectType ReactElement<any, any>
7979
useOnce(() => {
80-
const testComponent = () => {
80+
const testComponent = (): React.ReactElement<any, any> => {
8181
return <>Abc</>;
8282
};
8383
return testComponent();
@@ -89,17 +89,28 @@ useOnce(() => null);
8989
// @ts-expect-error
9090
useOnce(() => {});
9191

92-
// $ExpectType ReactElement<any, any> | null
93-
Subscription({ model: useVirtual(), children: <>Abc</> });
94-
95-
// $ExpectType ReactElement<any, any> | null
96-
Subscription({ model: useVirtual(), events: [EVT_FROM], children: <>Abc</> });
97-
98-
// @ts-expect-error
99-
Subscription({ model: useVirtual(), events: EVT_FROM, children: <>Abc</> });
100-
101-
// @ts-expect-error
102-
Subscription({ model: useVirtual(), children: { abc: 1 } });
92+
<Subscription model={useVirtual()}>
93+
<>Abc</>
94+
</Subscription>;
95+
96+
<Subscription model={useVirtual()} events={[EVT_FROM]}>
97+
<>Abc</>
98+
</Subscription>;
99+
100+
<Subscription
101+
model={useVirtual()}
102+
// @ts-expect-error
103+
events={EVT_FROM}
104+
>
105+
<>Abc</>
106+
</Subscription>;
107+
108+
<Subscription model={useVirtual()}>
109+
{
110+
// @ts-expect-error
111+
{ abc: 1 }
112+
}
113+
</Subscription>;
103114

104115
// $ExpectType void
105116
mapVisibleRange(useVirtual(), (index: number) => {});
@@ -113,5 +124,5 @@ mapVisibleRange(useVirtual(), (index: number, offset?: number) => {}, 'abc');
113124
// @ts-expect-error
114125
mapVisibleRange(useVirtual(), (index: number, offset: number) => {});
115126

116-
// @ts-expect-error
127+
// Undesired behavior. Should error but doesn't because JSX.Element is `any`.
117128
mapVisibleRange(<></>, (index: number, offset?: number) => {});

‎types/carbon__icons-react/carbon__icons-react-tests.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,29 @@ import {
2323
Plan,
2424
} from "@carbon/icons-react";
2525

26-
<UserAccess />; // $ExpectType Element
27-
<TextClearFormat />; // $ExpectType Element
28-
<IceVision />; // $ExpectType Element
26+
<UserAccess />;
27+
<TextClearFormat />;
28+
<IceVision />;
2929

30-
<AccumulationIce />; // $ExpectType Element
31-
<Layers />; // $ExpectType Element
32-
<BorderLeft />; // $ExpectType Element
33-
<AccessibilityAlt />; // $ExpectType Element
30+
<AccumulationIce />;
31+
<Layers />;
32+
<BorderLeft />;
33+
<AccessibilityAlt />;
3434
<Add>
3535
<title>Icon title</title>
3636
</Add>;
37-
<Add aria-label="Add" />; // $ExpectType Element
38-
<Add size={32} title="Add" aria-label="Add" tabIndex="0" className="add-32" />; // $ExpectType Element
39-
<DataBaseAlt />; // $ExpectType Element
40-
<GasStation />; // $ExpectType Element
41-
<AnalyticsReference />; // $ExpectType Element
42-
<Lasso />; // $ExpectType Element
43-
<BookmarkFilled />; // $ExpectType Element
44-
<CalendarHeatMap />; // $ExpectType Element
45-
<ChartColumn />; // $ExpectType Element
46-
<LogoKeybase />; // $ExpectType Element
47-
<Barcode />; // $ExpectType Element
48-
<CalculationAlt />; // $ExpectType Element
49-
<IbmCloudKubernetesService />; // $ExpectType Element
50-
<LogoSvelte />; // $ExpectType Element
51-
<Plan />; // $ExpectType Element
37+
<Add aria-label="Add" />;
38+
<Add size={32} title="Add" aria-label="Add" tabIndex="0" className="add-32" />;
39+
<DataBaseAlt />;
40+
<GasStation />;
41+
<AnalyticsReference />;
42+
<Lasso />;
43+
<BookmarkFilled />;
44+
<CalendarHeatMap />;
45+
<ChartColumn />;
46+
<LogoKeybase />;
47+
<Barcode />;
48+
<CalculationAlt />;
49+
<IbmCloudKubernetesService />;
50+
<LogoSvelte />;
51+
<Plan />;

‎types/carbon__pictograms-react/carbon__pictograms-react-tests.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -30,32 +30,32 @@ import {
3030
Ai,
3131
} from "@carbon/pictograms-react";
3232

33-
<Airplane />; // $ExpectType Element
34-
<Airplane title="airplane" aria-label="label" tabIndex="0" fill="#fff" className="className" />; // $ExpectType Element
35-
<ClientFinancing_01 />; // $ExpectType Element
36-
<GlobalMarkets />; // $ExpectType Element
37-
<SolarField />; // $ExpectType Element
38-
<SystemsDevopsAnalyze />; // $ExpectType Element
39-
<AddDocument />; // $ExpectType Element
40-
<Backpack />; // $ExpectType Element
41-
<IbmCloud />; // $ExpectType Element
42-
<Download_01 />; // $ExpectType Element
43-
<Export_01 />; // $ExpectType Element
44-
<Upload_01 />; // $ExpectType Element
45-
<Video_01 />; // $ExpectType Element
46-
<WatsonLogo />; // $ExpectType Element
47-
<AdvancedFraudProtection />; // $ExpectType Element
48-
<DoctorPatient />; // $ExpectType Element
49-
<Hpi />; // $ExpectType Element
50-
<CloudPakForApplications />; // $ExpectType Element
51-
<AcceleratedComputing />; // $ExpectType Element
52-
<Dashboard />; // $ExpectType Element
53-
<Bluepages />; // $ExpectType Element
54-
<ContentDesign />; // $ExpectType Element
55-
<AiExplainability />; // $ExpectType Element
56-
<RedHatApplications />; // $ExpectType Element
57-
<AudioData />; // $ExpectType Element
58-
<Visibility />; // $ExpectType Element
59-
<IbmZ />; // $ExpectType Element
60-
<IbmZAndLinuxoneMultiFrame />; // $ExpectType Element
61-
<Ai />; // $ExpectType Element
33+
<Airplane />;
34+
<Airplane title="airplane" aria-label="label" tabIndex="0" fill="#fff" className="className" />;
35+
<ClientFinancing_01 />;
36+
<GlobalMarkets />;
37+
<SolarField />;
38+
<SystemsDevopsAnalyze />;
39+
<AddDocument />;
40+
<Backpack />;
41+
<IbmCloud />;
42+
<Download_01 />;
43+
<Export_01 />;
44+
<Upload_01 />;
45+
<Video_01 />;
46+
<WatsonLogo />;
47+
<AdvancedFraudProtection />;
48+
<DoctorPatient />;
49+
<Hpi />;
50+
<CloudPakForApplications />;
51+
<AcceleratedComputing />;
52+
<Dashboard />;
53+
<Bluepages />;
54+
<ContentDesign />;
55+
<AiExplainability />;
56+
<RedHatApplications />;
57+
<AudioData />;
58+
<Visibility />;
59+
<IbmZ />;
60+
<IbmZAndLinuxoneMultiFrame />;
61+
<Ai />;

‎types/mjml-react/mjml-react-tests.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ function renderOutTestEmail() {
162162

163163
// children cannot be anything other than string
164164
// prettier-ignore
165-
// @ts-expect-error
165+
// Undesired behavior. Should error but doesn't because JSX.Element is `any`.
166166
const childError: React.ReactNode = <MjmlPreview><p>""</p></MjmlPreview>;
167167
}
168168
// TestMjmlStyleTag
@@ -172,7 +172,7 @@ function renderOutTestEmail() {
172172

173173
// children cannot be anything other than string
174174
// prettier-ignore
175-
// @ts-expect-error
175+
// Undesired behavior. Should error but doesn't because JSX.Element is `any`.
176176
const childError: React.ReactNode = <MjmlStyle><p>""</p></MjmlStyle>;
177177
}
178178
// TestMjmlTitleTag
@@ -182,7 +182,7 @@ function renderOutTestEmail() {
182182

183183
// children cannot be anything other than string
184184
// prettier-ignore
185-
// @ts-expect-error
185+
// Undesired behavior. Should error but doesn't because JSX.Element is `any`.
186186
const childError: React.ReactNode = <MjmlStyle><p>""</p></MjmlStyle>;
187187
}
188188
// TestMjmlButtonTag

‎types/react-aria-menubutton/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export interface MenuProps<T extends HTMLElement>
8585
* The HTML tag for this element. Default: 'div'.
8686
*/
8787
tag?: T["tagName"] | undefined;
88-
children: JSX.Element | (({ isOpen }: { isOpen: boolean }) => JSX.Element);
88+
children: React.ReactElement<any, any> | (({ isOpen }: { isOpen: boolean }) => React.ReactElement<any, any>);
8989
}
9090

9191
/**

‎types/react-form/v1/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export type FormValues = Nested<FormValue>;
1515
export type Touched = Nested<boolean>;
1616
export type FormErrors = {[key: string]: FormError} | [{[key: string]: FormError}];
1717
export type NestedErrors = Nested<FormErrors>;
18-
export type RenderReturn = JSX.Element | false | null;
18+
export type RenderReturn = React.ReactElement<any, any> | false | null;
1919

2020
export interface FormProps {
2121
loadState?(props: FormProps, self: Form): FormState | undefined;

‎types/react-form/v2/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface FormErrors {
1919
[key: string]: FormError;
2020
}
2121
export type NestedErrors = Nested<FormErrors>;
22-
export type RenderReturn = JSX.Element | false | null | never[];
22+
export type RenderReturn = React.ReactElement<any, any> | false | null | never[];
2323

2424
export interface FormState {
2525
values: FormValues;

‎types/react-key-handler/react-key-handler-tests.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,16 @@ const missingRequired = <KeyHandler />;
1818
// @ts-expect-error
1919
const invalidExample = <KeyHandler onKeyHandle={true} />;
2020

21-
// $ExpectType Element
21+
// Undesired behavior. Should be `Element`.
22+
// $ExpectType any
2223
const validExample = <KeyHandler onKeyHandle={onKeyHandleCallback} />;
2324

24-
// $ExpectType (props: ReactKeyHandlerProps) => (Component: Element) => (...args: any[]) => Element
25+
// Undesired behavior. Should be `(props: ReactKeyHandlerProps) => (Component: Element) => (...args: any[]) => Element`.
26+
// $ExpectType (props: ReactKeyHandlerProps) => (Component: any) => (...args: any[]) => any
2527
keyHandleDecorator();
2628

27-
// $ExpectType (props: ReactKeyHandlerProps) => (Component: Element) => (...args: any[]) => Element
29+
// Undesired behavior. Should be `(props: ReactKeyHandlerProps) => (Component: Element) => (...args: any[]) => Element`.
30+
// $ExpectType (props: ReactKeyHandlerProps) => (Component: any) => (...args: any[]) => any
2831
keyHandleDecorator(matcher);
2932

3033
// $ExpectType "keydown"
@@ -42,7 +45,8 @@ keyHandler()();
4245
// @ts-expect-error
4346
keyHandler({ keyEventName: KEYPRESS, keyValue: 's' })();
4447

45-
// $ExpectType (...args: any[]) => Element
48+
// Undesired behavior. Should be `(...args: any[]) => Element`
49+
// $ExpectType (...args: any[]) => any
4650
keyHandler({ keyEventName: KEYPRESS, keyValue: 's' })(<div />);
4751

4852
// @ts-expect-error
@@ -51,5 +55,6 @@ keyToggleHandler()();
5155
// @ts-expect-error
5256
keyToggleHandler({ keyEventName: KEYPRESS, keyValue: 's' })();
5357

54-
// $ExpectType (...args: any[]) => Element
58+
// Undesired behavior. Should be `(...args: any[]) => Element`
59+
// $ExpectType (...args: any[]) => any
5560
keyToggleHandler({ keyEventName: KEYPRESS, keyValue: 's' })(<div />);

‎types/react-syntax-highlighter/react-syntax-highlighter-tests.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,8 @@ const TestComponent: React.FC = () => <div>Hello world</div>;
127127
// Test `children`
128128
<PrismLightHighlighter>{codeString}</PrismLightHighlighter>;
129129
<PrismLightHighlighter>{[codeString, "hello world"]}</PrismLightHighlighter>;
130-
// @ts-expect-error
130+
// Undesired behavior.
131+
// JSX elements should not be accepted as `children`.
131132
<PrismLightHighlighter><div>Hello world</div></PrismLightHighlighter>;
132133
// @ts-expect-error
133134
<PrismLightHighlighter />;
@@ -177,7 +178,7 @@ const TestComponent: React.FC = () => <div>Hello world</div>;
177178
temp = props.rows; // $ExpectType rendererNode[]
178179
temp = props.stylesheet; // $ExpectType { [key: string]: CSSProperties; }
179180
temp = props.useInlineStyles; // $ExpectType boolean
180-
temp = props.rows[0].type; // $ExpectType "text" | "element"
181+
const type: "text" | "element" = props.rows[0].type;
181182
return <code>hello world</code>;
182183
}}
183184
>

‎types/react/index.d.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ declare namespace React {
7575
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
7676

7777
type JSXElementConstructor<P> =
78-
| ((props: P) => ReactElement<any, any> | null)
78+
| ((props: P) => ReactNode)
7979
| (new (props: P) => Component<any, any>);
8080

8181
interface RefObject<T> {
@@ -347,7 +347,7 @@ declare namespace React {
347347
/**
348348
* **NOTE**: Exotic components are not callable.
349349
*/
350-
(props: P): (ReactElement|null);
350+
(props: P): ReactNode;
351351
readonly $$typeof: symbol;
352352
}
353353

@@ -517,7 +517,7 @@ declare namespace React {
517517
type FC<P = {}> = FunctionComponent<P>;
518518

519519
interface FunctionComponent<P = {}> {
520-
(props: P, context?: any): ReactElement<any, any> | null;
520+
(props: P, context?: any): ReactNode;
521521
propTypes?: WeakValidationMap<P> | undefined;
522522
contextTypes?: ValidationMap<any> | undefined;
523523
defaultProps?: Partial<P> | undefined;
@@ -533,7 +533,7 @@ declare namespace React {
533533
* @deprecated - Equivalent with `React.FunctionComponent`.
534534
*/
535535
interface VoidFunctionComponent<P = {}> {
536-
(props: P, context?: any): ReactElement<any, any> | null;
536+
(props: P, context?: any): ReactNode;
537537
propTypes?: WeakValidationMap<P> | undefined;
538538
contextTypes?: ValidationMap<any> | undefined;
539539
defaultProps?: Partial<P> | undefined;
@@ -543,7 +543,7 @@ declare namespace React {
543543
type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
544544

545545
interface ForwardRefRenderFunction<T, P = {}> {
546-
(props: P, ref: ForwardedRef<T>): ReactElement | null;
546+
(props: P, ref: ForwardedRef<T>): ReactNode;
547547
displayName?: string | undefined;
548548
// explicit rejected with `never` required due to
549549
// https://github.com/microsoft/TypeScript/issues/36826
@@ -3119,7 +3119,7 @@ type ReactManagedAttributes<C, P> = C extends { propTypes: infer T; defaultProps
31193119

31203120
declare global {
31213121
namespace JSX {
3122-
interface Element extends React.ReactElement<any, any> { }
3122+
type Element = any;
31233123
interface ElementClass extends React.Component<any> {
31243124
render(): React.ReactNode;
31253125
}

0 commit comments

Comments
 (0)