Skip to content

Commit 469e1b7

Browse files
andreypoppandreypopp
committed
React.DOM: move all DOM UI components there
1 parent 418a29a commit 469e1b7

4 files changed

Lines changed: 162 additions & 35 deletions

File tree

‎Makefile‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ clean:
1313
rm -f lib/React.js example/app.js
1414
rm -rf example/bower_components/
1515

16-
lib/React.js: src/React.purs
16+
lib/React.js: src/React.purs src/React/DOM.purs
1717
mkdir -p $(@D)
18-
psc $(PSC_OPTS) $< \
18+
psc $(PSC_OPTS) $^ \
1919
--output $@ \
20-
--module React
20+
--module React --module React.DOM
2121

22-
example/app.js: src/React.purs example/app.purs
22+
example/app.js: src/React.purs src/React/DOM.purs example/app.purs
2323
psc $(PSC_OPTS) $^ \
2424
--output $@ \
2525
--main --module Main

‎example/app.purs‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
module Main where
22

33
import React
4+
import qualified React.DOM as DOM
45

56
hello = mkUI \props ->
6-
div {className: "Hello"} [text "Hello, ", text props.name]
7+
DOM.div {className: "Hello"} [
8+
DOM.text "Hello, ",
9+
DOM.text props.name
10+
]
711

812
incrementCounter = do
913
val <- readState
1014
writeState (val + 1)
1115

1216
counter = mkStatefulUI 0 \props -> do
1317
val <- readState
14-
return (div {className: "Counter", onClick: handle incrementCounter} [text (show val), text " Click me to increment!"])
18+
return $ DOM.div {className: "Counter", onClick: handle incrementCounter} [
19+
DOM.text (show val),
20+
DOM.text " Click me to increment!"
21+
]
1522

1623
main = do
17-
let component = div {} [counter {}, hello {name: "World"}, counter {}]
24+
let component = DOM.div {} [counter {}, hello {name: "World"}, counter {}]
1825
renderToBody component

‎src/React.purs‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,6 @@ foreign import data WriteReactState :: * -> !
88
foreign import data UI :: *
99
foreign import data EventHandler :: * -> *
1010

11-
foreign import mkDOM
12-
" function mkDOM(tagName) { \
13-
\ var ctor = React.DOM[tagName]; \
14-
\ return function(props) { \
15-
\ return function(children) { \
16-
\ return ctor.apply(ctor, [props].concat(children)); \
17-
\ } \
18-
\ } \
19-
\ }"
20-
:: forall props. String -> props -> [UI] -> UI
21-
22-
foreign import text
23-
"function text(text) { \
24-
\ return text; \
25-
\}"
26-
:: String -> UI
27-
2811
foreign import mkUI
2912
" function mkUI(render) { \
3013
\ return React.createClass({ \
@@ -131,14 +114,3 @@ foreign import renderToElementById
131114
\ } \
132115
\ }"
133116
:: forall eff. String -> UI -> Eff (dom :: DOM | eff) UI
134-
135-
div = mkDOM "div"
136-
span = mkDOM "span"
137-
html = mkDOM "html"
138-
body = mkDOM "body"
139-
a = mkDOM "a"
140-
section = mkDOM "section"
141-
ul = mkDOM "ul"
142-
li = mkDOM "li"
143-
ol = mkDOM "ol"
144-
footer = mkDOM "footer"

‎src/React/DOM.purs‎

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

0 commit comments

Comments
 (0)