Skip to content

Commit 63c6346

Browse files
andrewbranchandrewbranch
committed
Add React repro to test
1 parent 684b039 commit 63c6346

5 files changed

+325
-17
lines changed

‎tests/baselines/reference/excessiveStackDepthFlatArray.errors.txt

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
tests/cases/compiler/index.tsx(35,13): error TS2322: Type '{ key: string; }' is not assignable to type 'HTMLAttributes<HTMLLIElement>'.
2+
Property 'key' does not exist on type 'HTMLAttributes<HTMLLIElement>'.
3+
4+
5+
==== tests/cases/compiler/index.tsx (1 errors) ====
6+
interface MiddlewareArray<T> extends Array<T> {}
7+
declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
8+
9+
declare const defaultMiddleware: MiddlewareArray<any>;
10+
configureStore({
11+
middleware: [...defaultMiddleware], // Should not error
12+
});
13+
14+
declare namespace React {
15+
type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
16+
interface HTMLAttributes<T> {
17+
children?: ReactNode;
18+
}
19+
type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
20+
type ReactText = string | number;
21+
type ReactChild = ReactText;
22+
type ReactFragment = {} | ReactNodeArray;
23+
interface ReactNodeArray extends Array<ReactNode> {}
24+
}
25+
declare namespace JSX {
26+
interface IntrinsicElements {
27+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
28+
li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
29+
}
30+
}
31+
declare var React: any;
32+
33+
const Component = () => {
34+
const categories = ['Fruit', 'Vegetables'];
35+
36+
return (
37+
<ul>
38+
<li>All</li>
39+
{categories.map((category) => (
40+
<li key={category}>{category}</li> // Error about 'key' only
41+
~~~
42+
!!! error TS2322: Type '{ key: string; }' is not assignable to type 'HTMLAttributes<HTMLLIElement>'.
43+
!!! error TS2322: Property 'key' does not exist on type 'HTMLAttributes<HTMLLIElement>'.
44+
))}
45+
</ul>
46+
);
47+
};
48+

‎tests/baselines/reference/excessiveStackDepthFlatArray.js

+41-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,46 @@
1-
//// [excessiveStackDepthFlatArray.ts]
1+
//// [index.tsx]
22
interface MiddlewareArray<T> extends Array<T> {}
33
declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
44

55
declare const defaultMiddleware: MiddlewareArray<any>;
66
configureStore({
77
middleware: [...defaultMiddleware], // Should not error
88
});
9+
10+
declare namespace React {
11+
type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
12+
interface HTMLAttributes<T> {
13+
children?: ReactNode;
14+
}
15+
type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
16+
type ReactText = string | number;
17+
type ReactChild = ReactText;
18+
type ReactFragment = {} | ReactNodeArray;
19+
interface ReactNodeArray extends Array<ReactNode> {}
20+
}
21+
declare namespace JSX {
22+
interface IntrinsicElements {
23+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
24+
li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
25+
}
26+
}
27+
declare var React: any;
28+
29+
const Component = () => {
30+
const categories = ['Fruit', 'Vegetables'];
31+
32+
return (
33+
<ul>
34+
<li>All</li>
35+
{categories.map((category) => (
36+
<li key={category}>{category}</li> // Error about 'key' only
37+
))}
38+
</ul>
39+
);
40+
};
941

1042

11-
//// [excessiveStackDepthFlatArray.js]
43+
//// [index.js]
1244
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
1345
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
1446
to[j] = from[i];
@@ -17,3 +49,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
1749
configureStore({
1850
middleware: __spreadArray([], defaultMiddleware)
1951
});
52+
var Component = function () {
53+
var categories = ['Fruit', 'Vegetables'];
54+
return (React.createElement("ul", null,
55+
React.createElement("li", null, "All"),
56+
categories.map(function (category) { return (React.createElement("li", { key: category }, category) // Error about 'key' only
57+
); })));
58+
};

‎tests/baselines/reference/excessiveStackDepthFlatArray.symbols

+115-13
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,128 @@
1-
=== tests/cases/compiler/excessiveStackDepthFlatArray.ts ===
1+
=== tests/cases/compiler/index.tsx ===
22
interface MiddlewareArray<T> extends Array<T> {}
3-
>MiddlewareArray : Symbol(MiddlewareArray, Decl(excessiveStackDepthFlatArray.ts, 0, 0))
4-
>T : Symbol(T, Decl(excessiveStackDepthFlatArray.ts, 0, 26))
3+
>MiddlewareArray : Symbol(MiddlewareArray, Decl(index.tsx, 0, 0))
4+
>T : Symbol(T, Decl(index.tsx, 0, 26))
55
>Array : Symbol(Array, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --), Decl(lib.es2015.symbol.wellknown.d.ts, --, --) ... and 2 more)
6-
>T : Symbol(T, Decl(excessiveStackDepthFlatArray.ts, 0, 26))
6+
>T : Symbol(T, Decl(index.tsx, 0, 26))
77

88
declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
9-
>configureStore : Symbol(configureStore, Decl(excessiveStackDepthFlatArray.ts, 0, 48))
10-
>options : Symbol(options, Decl(excessiveStackDepthFlatArray.ts, 1, 32))
11-
>middleware : Symbol(middleware, Decl(excessiveStackDepthFlatArray.ts, 1, 42))
12-
>MiddlewareArray : Symbol(MiddlewareArray, Decl(excessiveStackDepthFlatArray.ts, 0, 0))
9+
>configureStore : Symbol(configureStore, Decl(index.tsx, 0, 48))
10+
>options : Symbol(options, Decl(index.tsx, 1, 32))
11+
>middleware : Symbol(middleware, Decl(index.tsx, 1, 42))
12+
>MiddlewareArray : Symbol(MiddlewareArray, Decl(index.tsx, 0, 0))
1313

1414
declare const defaultMiddleware: MiddlewareArray<any>;
15-
>defaultMiddleware : Symbol(defaultMiddleware, Decl(excessiveStackDepthFlatArray.ts, 3, 13))
16-
>MiddlewareArray : Symbol(MiddlewareArray, Decl(excessiveStackDepthFlatArray.ts, 0, 0))
15+
>defaultMiddleware : Symbol(defaultMiddleware, Decl(index.tsx, 3, 13))
16+
>MiddlewareArray : Symbol(MiddlewareArray, Decl(index.tsx, 0, 0))
1717

1818
configureStore({
19-
>configureStore : Symbol(configureStore, Decl(excessiveStackDepthFlatArray.ts, 0, 48))
19+
>configureStore : Symbol(configureStore, Decl(index.tsx, 0, 48))
2020

2121
middleware: [...defaultMiddleware], // Should not error
22-
>middleware : Symbol(middleware, Decl(excessiveStackDepthFlatArray.ts, 4, 16))
23-
>defaultMiddleware : Symbol(defaultMiddleware, Decl(excessiveStackDepthFlatArray.ts, 3, 13))
22+
>middleware : Symbol(middleware, Decl(index.tsx, 4, 16))
23+
>defaultMiddleware : Symbol(defaultMiddleware, Decl(index.tsx, 3, 13))
2424

2525
});
2626

27+
declare namespace React {
28+
>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
29+
30+
type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
31+
>DetailedHTMLProps : Symbol(DetailedHTMLProps, Decl(index.tsx, 8, 25))
32+
>E : Symbol(E, Decl(index.tsx, 9, 25))
33+
>HTMLAttributes : Symbol(HTMLAttributes, Decl(index.tsx, 9, 61))
34+
>T : Symbol(T, Decl(index.tsx, 9, 53))
35+
>T : Symbol(T, Decl(index.tsx, 9, 53))
36+
>E : Symbol(E, Decl(index.tsx, 9, 25))
37+
38+
interface HTMLAttributes<T> {
39+
>HTMLAttributes : Symbol(HTMLAttributes, Decl(index.tsx, 9, 61))
40+
>T : Symbol(T, Decl(index.tsx, 10, 27))
41+
42+
children?: ReactNode;
43+
>children : Symbol(HTMLAttributes.children, Decl(index.tsx, 10, 31))
44+
>ReactNode : Symbol(ReactNode, Decl(index.tsx, 12, 3))
45+
}
46+
type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
47+
>ReactNode : Symbol(ReactNode, Decl(index.tsx, 12, 3))
48+
>ReactChild : Symbol(ReactChild, Decl(index.tsx, 14, 35))
49+
>ReactFragment : Symbol(ReactFragment, Decl(index.tsx, 15, 30))
50+
51+
type ReactText = string | number;
52+
>ReactText : Symbol(ReactText, Decl(index.tsx, 13, 75))
53+
54+
type ReactChild = ReactText;
55+
>ReactChild : Symbol(ReactChild, Decl(index.tsx, 14, 35))
56+
>ReactText : Symbol(ReactText, Decl(index.tsx, 13, 75))
57+
58+
type ReactFragment = {} | ReactNodeArray;
59+
>ReactFragment : Symbol(ReactFragment, Decl(index.tsx, 15, 30))
60+
>ReactNodeArray : Symbol(ReactNodeArray, Decl(index.tsx, 16, 43))
61+
62+
interface ReactNodeArray extends Array<ReactNode> {}
63+
>ReactNodeArray : Symbol(ReactNodeArray, Decl(index.tsx, 16, 43))
64+
>Array : Symbol(Array, Decl(lib.es5.d.ts, --, --), Decl(lib.es5.d.ts, --, --), Decl(lib.es2015.core.d.ts, --, --), Decl(lib.es2015.iterable.d.ts, --, --), Decl(lib.es2015.symbol.wellknown.d.ts, --, --) ... and 2 more)
65+
>ReactNode : Symbol(ReactNode, Decl(index.tsx, 12, 3))
66+
}
67+
declare namespace JSX {
68+
>JSX : Symbol(JSX, Decl(index.tsx, 18, 1))
69+
70+
interface IntrinsicElements {
71+
>IntrinsicElements : Symbol(IntrinsicElements, Decl(index.tsx, 19, 23))
72+
73+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
74+
>ul : Symbol(IntrinsicElements.ul, Decl(index.tsx, 20, 31))
75+
>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
76+
>DetailedHTMLProps : Symbol(React.DetailedHTMLProps, Decl(index.tsx, 8, 25))
77+
>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
78+
>HTMLAttributes : Symbol(React.HTMLAttributes, Decl(index.tsx, 9, 61))
79+
>HTMLUListElement : Symbol(HTMLUListElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
80+
>HTMLUListElement : Symbol(HTMLUListElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
81+
82+
li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
83+
>li : Symbol(IntrinsicElements.li, Decl(index.tsx, 21, 90))
84+
>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
85+
>DetailedHTMLProps : Symbol(React.DetailedHTMLProps, Decl(index.tsx, 8, 25))
86+
>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
87+
>HTMLAttributes : Symbol(React.HTMLAttributes, Decl(index.tsx, 9, 61))
88+
>HTMLLIElement : Symbol(HTMLLIElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
89+
>HTMLLIElement : Symbol(HTMLLIElement, Decl(lib.dom.d.ts, --, --), Decl(lib.dom.d.ts, --, --))
90+
}
91+
}
92+
declare var React: any;
93+
>React : Symbol(React, Decl(index.tsx, 6, 3), Decl(index.tsx, 25, 11))
94+
95+
const Component = () => {
96+
>Component : Symbol(Component, Decl(index.tsx, 27, 5))
97+
98+
const categories = ['Fruit', 'Vegetables'];
99+
>categories : Symbol(categories, Decl(index.tsx, 28, 7))
100+
101+
return (
102+
<ul>
103+
>ul : Symbol(JSX.IntrinsicElements.ul, Decl(index.tsx, 20, 31))
104+
105+
<li>All</li>
106+
>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
107+
>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
108+
109+
{categories.map((category) => (
110+
>categories.map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
111+
>categories : Symbol(categories, Decl(index.tsx, 28, 7))
112+
>map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
113+
>category : Symbol(category, Decl(index.tsx, 33, 23))
114+
115+
<li key={category}>{category}</li> // Error about 'key' only
116+
>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
117+
>key : Symbol(key, Decl(index.tsx, 34, 11))
118+
>category : Symbol(category, Decl(index.tsx, 33, 23))
119+
>category : Symbol(category, Decl(index.tsx, 33, 23))
120+
>li : Symbol(JSX.IntrinsicElements.li, Decl(index.tsx, 21, 90))
121+
122+
))}
123+
</ul>
124+
>ul : Symbol(JSX.IntrinsicElements.ul, Decl(index.tsx, 20, 31))
125+
126+
);
127+
};
128+

‎tests/baselines/reference/excessiveStackDepthFlatArray.types

+86-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
=== tests/cases/compiler/excessiveStackDepthFlatArray.ts ===
1+
=== tests/cases/compiler/index.tsx ===
22
interface MiddlewareArray<T> extends Array<T> {}
33
declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
44
>configureStore : (options: { middleware: MiddlewareArray<any>;}) => void
@@ -21,3 +21,88 @@ configureStore({
2121

2222
});
2323

24+
declare namespace React {
25+
type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
26+
>DetailedHTMLProps : E
27+
28+
interface HTMLAttributes<T> {
29+
children?: ReactNode;
30+
>children : ReactNode
31+
}
32+
type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
33+
>ReactNode : ReactNode
34+
>null : null
35+
36+
type ReactText = string | number;
37+
>ReactText : ReactText
38+
39+
type ReactChild = ReactText;
40+
>ReactChild : ReactText
41+
42+
type ReactFragment = {} | ReactNodeArray;
43+
>ReactFragment : ReactFragment
44+
45+
interface ReactNodeArray extends Array<ReactNode> {}
46+
}
47+
declare namespace JSX {
48+
interface IntrinsicElements {
49+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
50+
>ul : React.HTMLAttributes<HTMLUListElement>
51+
>React : any
52+
>React : any
53+
54+
li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
55+
>li : React.HTMLAttributes<HTMLLIElement>
56+
>React : any
57+
>React : any
58+
}
59+
}
60+
declare var React: any;
61+
>React : any
62+
63+
const Component = () => {
64+
>Component : () => any
65+
>() => { const categories = ['Fruit', 'Vegetables']; return ( <ul> <li>All</li> {categories.map((category) => ( <li key={category}>{category}</li> // Error about 'key' only ))} </ul> );} : () => any
66+
67+
const categories = ['Fruit', 'Vegetables'];
68+
>categories : string[]
69+
>['Fruit', 'Vegetables'] : string[]
70+
>'Fruit' : "Fruit"
71+
>'Vegetables' : "Vegetables"
72+
73+
return (
74+
>( <ul> <li>All</li> {categories.map((category) => ( <li key={category}>{category}</li> // Error about 'key' only ))} </ul> ) : any
75+
76+
<ul>
77+
><ul> <li>All</li> {categories.map((category) => ( <li key={category}>{category}</li> // Error about 'key' only ))} </ul> : any
78+
>ul : any
79+
80+
<li>All</li>
81+
><li>All</li> : any
82+
>li : any
83+
>li : any
84+
85+
{categories.map((category) => (
86+
>categories.map((category) => ( <li key={category}>{category}</li> // Error about 'key' only )) : any[]
87+
>categories.map : <U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]
88+
>categories : string[]
89+
>map : <U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]
90+
>(category) => ( <li key={category}>{category}</li> // Error about 'key' only ) : (category: string) => any
91+
>category : string
92+
>( <li key={category}>{category}</li> // Error about 'key' only ) : any
93+
94+
<li key={category}>{category}</li> // Error about 'key' only
95+
><li key={category}>{category}</li> : any
96+
>li : any
97+
>key : string
98+
>category : string
99+
>category : string
100+
>li : any
101+
102+
))}
103+
</ul>
104+
>ul : any
105+
106+
);
107+
};
108+

‎tests/cases/compiler/excessiveStackDepthFlatArray.ts

+35-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,43 @@
1-
// @lib: es2019
1+
// @lib: es2019,dom
2+
// @jsx: react
23

4+
// @Filename: index.tsx
35
interface MiddlewareArray<T> extends Array<T> {}
46
declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;
57

68
declare const defaultMiddleware: MiddlewareArray<any>;
79
configureStore({
810
middleware: [...defaultMiddleware], // Should not error
911
});
12+
13+
declare namespace React {
14+
type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = E;
15+
interface HTMLAttributes<T> {
16+
children?: ReactNode;
17+
}
18+
type ReactNode = ReactChild | ReactFragment | boolean | null | undefined;
19+
type ReactText = string | number;
20+
type ReactChild = ReactText;
21+
type ReactFragment = {} | ReactNodeArray;
22+
interface ReactNodeArray extends Array<ReactNode> {}
23+
}
24+
declare namespace JSX {
25+
interface IntrinsicElements {
26+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
27+
li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
28+
}
29+
}
30+
declare var React: any;
31+
32+
const Component = () => {
33+
const categories = ['Fruit', 'Vegetables'];
34+
35+
return (
36+
<ul>
37+
<li>All</li>
38+
{categories.map((category) => (
39+
<li key={category}>{category}</li> // Error about 'key' only
40+
))}
41+
</ul>
42+
);
43+
};

0 commit comments

Comments
 (0)