Skip to content

Commit 9ec9c21

Browse files
jbrantlyjbrantly
committed
Redo JSX test to show native TypeScript support
1 parent 9ce24ae commit 9ec9c21

File tree

9 files changed

+971
-10
lines changed

9 files changed

+971
-10
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,9 @@ will need to use [email protected] in order to use this as 0.4.x and above is not
9090

9191
You may also be interested in using [ts-jsx-loader](https://github.com/jbrantly/ts-jsx-loader).
9292

93+
If you like living on the edge, the nightly version of TypeScript supports JSX natively. See
94+
the [JSX test](test/jsx) for an example.
95+
9396
## Building from source
9497

9598
```

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
"typescript": "~1.5.0-beta"
3434
},
3535
"devDependencies": {
36-
"jsx-typescript": "^1.5.0-alpha.4",
3736
"mocha": "^2.1.0",
3837
"webpack": "^1.9.11"
3938
}

‎test/jsx/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
This test demonstrates the new JSX functionality of TypeScript.
2+
3+
Note that the nightly build of TypeScript is required for this functionality to work.
4+
This test has been configured to use [ntypescript](https://github.com/basarat/ntypescript)
5+
for that purpose. Also note that React is not actually bundled here.
6+
7+
See [this blog post](http://www.jbrantly.com/typescript-and-jsx/) for more information about JSX in TypeScript.

‎test/jsx/app.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎test/jsx/app.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React = require('react');
2+
3+
interface Props {
4+
content: string;
5+
}
6+
7+
class MyComponent extends React.Component<Props, {}> {
8+
render() {
9+
return <div>{this.props.content}</div>
10+
}
11+
}
12+
13+
React.render(<MyComponent content="Hello World" />, document.body);

‎test/jsx/react-jsx.d.ts‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
// Type definitions for React v0.13.1 (JSX support)
2+
// Project: http://facebook.github.io/react/
3+
// Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
4+
// Definitions: https://github.com/borisyankov/DefinitelyTyped
5+
/// <reference path="react.d.ts" />
6+
7+
declare module JSX {
8+
interface Element extends React.ReactElement<any> { }
9+
interface ElementClass extends React.Component<any, any> { }
10+
interface ElementAttributesProperty { props: {}; }
11+
12+
interface IntrinsicElements {
13+
// HTML
14+
a: React.HTMLAttributes;
15+
abbr: React.HTMLAttributes;
16+
address: React.HTMLAttributes;
17+
area: React.HTMLAttributes;
18+
article: React.HTMLAttributes;
19+
aside: React.HTMLAttributes;
20+
audio: React.HTMLAttributes;
21+
b: React.HTMLAttributes;
22+
base: React.HTMLAttributes;
23+
bdi: React.HTMLAttributes;
24+
bdo: React.HTMLAttributes;
25+
big: React.HTMLAttributes;
26+
blockquote: React.HTMLAttributes;
27+
body: React.HTMLAttributes;
28+
br: React.HTMLAttributes;
29+
button: React.HTMLAttributes;
30+
canvas: React.HTMLAttributes;
31+
caption: React.HTMLAttributes;
32+
cite: React.HTMLAttributes;
33+
code: React.HTMLAttributes;
34+
col: React.HTMLAttributes;
35+
colgroup: React.HTMLAttributes;
36+
data: React.HTMLAttributes;
37+
datalist: React.HTMLAttributes;
38+
dd: React.HTMLAttributes;
39+
del: React.HTMLAttributes;
40+
details: React.HTMLAttributes;
41+
dfn: React.HTMLAttributes;
42+
dialog: React.HTMLAttributes;
43+
div: React.HTMLAttributes;
44+
dl: React.HTMLAttributes;
45+
dt: React.HTMLAttributes;
46+
em: React.HTMLAttributes;
47+
embed: React.HTMLAttributes;
48+
fieldset: React.HTMLAttributes;
49+
figcaption: React.HTMLAttributes;
50+
figure: React.HTMLAttributes;
51+
footer: React.HTMLAttributes;
52+
form: React.HTMLAttributes;
53+
h1: React.HTMLAttributes;
54+
h2: React.HTMLAttributes;
55+
h3: React.HTMLAttributes;
56+
h4: React.HTMLAttributes;
57+
h5: React.HTMLAttributes;
58+
h6: React.HTMLAttributes;
59+
head: React.HTMLAttributes;
60+
header: React.HTMLAttributes;
61+
hr: React.HTMLAttributes;
62+
html: React.HTMLAttributes;
63+
i: React.HTMLAttributes;
64+
iframe: React.HTMLAttributes;
65+
img: React.HTMLAttributes;
66+
input: React.HTMLAttributes;
67+
ins: React.HTMLAttributes;
68+
kbd: React.HTMLAttributes;
69+
keygen: React.HTMLAttributes;
70+
label: React.HTMLAttributes;
71+
legend: React.HTMLAttributes;
72+
li: React.HTMLAttributes;
73+
link: React.HTMLAttributes;
74+
main: React.HTMLAttributes;
75+
map: React.HTMLAttributes;
76+
mark: React.HTMLAttributes;
77+
menu: React.HTMLAttributes;
78+
menuitem: React.HTMLAttributes;
79+
meta: React.HTMLAttributes;
80+
meter: React.HTMLAttributes;
81+
nav: React.HTMLAttributes;
82+
noscript: React.HTMLAttributes;
83+
object: React.HTMLAttributes;
84+
ol: React.HTMLAttributes;
85+
optgroup: React.HTMLAttributes;
86+
option: React.HTMLAttributes;
87+
output: React.HTMLAttributes;
88+
p: React.HTMLAttributes;
89+
param: React.HTMLAttributes;
90+
picture: React.HTMLAttributes;
91+
pre: React.HTMLAttributes;
92+
progress: React.HTMLAttributes;
93+
q: React.HTMLAttributes;
94+
rp: React.HTMLAttributes;
95+
rt: React.HTMLAttributes;
96+
ruby: React.HTMLAttributes;
97+
s: React.HTMLAttributes;
98+
samp: React.HTMLAttributes;
99+
script: React.HTMLAttributes;
100+
section: React.HTMLAttributes;
101+
select: React.HTMLAttributes;
102+
small: React.HTMLAttributes;
103+
source: React.HTMLAttributes;
104+
span: React.HTMLAttributes;
105+
strong: React.HTMLAttributes;
106+
style: React.HTMLAttributes;
107+
sub: React.HTMLAttributes;
108+
summary: React.HTMLAttributes;
109+
sup: React.HTMLAttributes;
110+
table: React.HTMLAttributes;
111+
tbody: React.HTMLAttributes;
112+
td: React.HTMLAttributes;
113+
textarea: React.HTMLAttributes;
114+
tfoot: React.HTMLAttributes;
115+
th: React.HTMLAttributes;
116+
thead: React.HTMLAttributes;
117+
time: React.HTMLAttributes;
118+
title: React.HTMLAttributes;
119+
tr: React.HTMLAttributes;
120+
track: React.HTMLAttributes;
121+
u: React.HTMLAttributes;
122+
ul: React.HTMLAttributes;
123+
"var": React.HTMLAttributes;
124+
video: React.HTMLAttributes;
125+
wbr: React.HTMLAttributes;
126+
127+
// SVG
128+
svg: React.SVGElementAttributes;
129+
130+
circle: React.SVGAttributes;
131+
defs: React.SVGAttributes;
132+
ellipse: React.SVGAttributes;
133+
g: React.SVGAttributes;
134+
line: React.SVGAttributes;
135+
linearGradient: React.SVGAttributes;
136+
mask: React.SVGAttributes;
137+
path: React.SVGAttributes;
138+
pattern: React.SVGAttributes;
139+
polygon: React.SVGAttributes;
140+
polyline: React.SVGAttributes;
141+
radialGradient: React.SVGAttributes;
142+
rect: React.SVGAttributes;
143+
stop: React.SVGAttributes;
144+
text: React.SVGAttributes;
145+
tspan: React.SVGAttributes;
146+
}
147+
}

0 commit comments

Comments
 (0)