Skip to content

Commit 4751675

Browse files
zaaackzaaack
committed
Add css for SSRSample
1 parent d048b19 commit 4751675

File tree

5 files changed

+130
-63
lines changed

5 files changed

+130
-63
lines changed

‎Samples/SSRSample/src/Client/View.fs‎

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ type MyReactComp(initProps: MyProp) as self =
6060
do self.setInitState { text="my state" }
6161

6262
override x.render() =
63-
div []
64-
[ span [] [ str (sprintf "prop: %s state: %s" x.props.text x.state.text) ]
65-
span [] [ ofArray x.children ] ]
63+
div [ ClassName "class-comp children-comp" ]
64+
[ div [] [ str (sprintf "prop: %s state: %s" x.props.text x.state.text) ]
65+
div [] [ ofArray x.children ] ]
6666

6767

6868

@@ -71,7 +71,7 @@ type [<Pojo>] FnCompProps = {
7171
}
7272

7373
let fnComp (props: FnCompProps) =
74-
div []
74+
div [ ClassName "fn-comp" ]
7575
[ span [] [ str (sprintf "prop: %s" props.text) ] ]
7676

7777
type [<Pojo>] FnCompWithChildrenProps = {
@@ -80,64 +80,70 @@ type [<Pojo>] FnCompWithChildrenProps = {
8080
}
8181

8282
let fnCompWithChildren (props: FnCompWithChildrenProps) =
83-
div []
84-
[ span [] [ str (sprintf "prop: %s" props.text) ]
85-
span [] [ ofArray props.children ] ]
83+
div [ ClassName "fn-comp children-comp" ]
84+
[ div [] [ str (sprintf "prop: %s" props.text) ]
85+
div [] [ ofArray props.children ] ]
8686

8787
let view (model: Model) (dispatch) =
8888
div []
89-
[ h1 [] [ str "SAFE Template" ]
90-
p [] [ str "The initial counter is fetched from server" ]
91-
p [] [ str "Press buttons to manipulate counter:" ]
92-
button [ OnClick (fun _ -> dispatch Decrement) ] [ str "-" ]
93-
div [] [ str (show model.counter) ]
94-
button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
95-
safeComponents
96-
div [] [
97-
span [] [ str "Test str:" ]
89+
[ h1 [ ClassName "title is-1 has-text-centered"] [ str "Server-Side Rendering Sample" ]
90+
div [ ClassName "intro" ]
91+
[ p [] [ str "The initial state is rendered in html from server." ]
92+
div [ ClassName "counter-app" ]
93+
[ p [] [ str "Press buttons to manipulate counter:" ]
94+
div [ ClassName "counter" ]
95+
[ button [ ClassName "button is-small"; OnClick (fun _ -> dispatch Decrement) ] [ str "-" ]
96+
span [ ClassName "tag is-info" ] [ str (show model.counter) ]
97+
button [ ClassName "button is-small"; OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
98+
]
99+
]
100+
safeComponents
101+
]
102+
div [ ClassName "test-case" ] [
103+
span [ ClassName "label" ] [ str "Test str:" ]
98104
span [] [ str model.someString ]
99105
]
100-
div [] [
101-
span [] [ str "Test ofFloat:" ]
106+
div [ ClassName "test-case" ] [
107+
span [ ClassName "label" ] [ str "Test ofFloat:" ]
102108
span [] [ ofFloat model.someFloat ]
103109
]
104-
div [] [
105-
span [] [ str "Test ofInt:" ]
110+
div [ ClassName "test-case" ] [
111+
span [ ClassName "label" ] [ str "Test ofInt:" ]
106112
span [] [ ofInt model.someInt ]
107113
]
108-
div [] [
109-
span [] [ str "Test html attr:" ]
114+
div [ ClassName "test-case" ] [
115+
span [ ClassName "label" ] [ str "Test html attr:" ]
110116
span [ Id "someId"; Data ("aa", "bb"); HTMLAttr.Custom ("cc", "dd") ] [ str "data-aa" ]
111117
]
112-
div [] [
113-
span [] [ str "Test CSS prop:" ]
118+
div [ ClassName "test-case" ] [
119+
span [ ClassName "label" ] [ str "Test CSS prop:" ]
114120
div [ Style [ Display "block"; CSSProp.Custom ("color", "red") ] ] [ str "Custom CSSProp" ]
115121
]
116-
div [] [
117-
span [] [ str "Test checkbox:" ]
118-
input [ Type "checkbox"; DefaultChecked true ]
119-
input [ Type "checkbox"; DefaultChecked false ]
120-
input [ Type "checkbox"; Checked true; OnChange ignore ]
121-
input [ Type "checkbox"; Checked false; OnChange ignore ]
122+
div [ ClassName "test-case" ] [
123+
span [ ClassName "label" ] [ str "Test checkbox:" ]
124+
input [ ClassName "checkbox"; Type "checkbox"; DefaultChecked true ]
125+
input [ ClassName "checkbox"; Type "checkbox"; DefaultChecked false ]
126+
input [ ClassName "checkbox"; Type "checkbox"; Checked true; OnChange ignore ]
127+
input [ ClassName "checkbox"; Type "checkbox"; Checked false; OnChange ignore ]
122128
]
123-
div [] [
124-
span [] [ str "Test value:" ]
125-
input [ Type "text"; DefaultValue "true" ]
126-
input [ Type "text"; DefaultValue "false" ]
127-
input [ Type "text"; Value "true"; OnChange ignore ]
128-
input [ Type "text"; Value "false"; OnChange ignore ]
129+
div [ ClassName "test-case" ] [
130+
span [ ClassName "label" ] [ str "Test value:" ]
131+
input [ ClassName "input"; Type "text"; DefaultValue "true" ]
132+
input [ ClassName "input"; Type "text"; DefaultValue "false" ]
133+
input [ ClassName "input"; Type "text"; Value "true"; OnChange ignore ]
134+
input [ ClassName "input"; Type "text"; Value "false"; OnChange ignore ]
129135
]
130136

131-
div [] [
132-
span [] [ str "Test textarea:" ]
133-
textarea [ DefaultValue "true" ] []
134-
textarea [ DefaultValue "false" ] []
135-
textarea [ Value "true"; OnChange ignore] []
136-
textarea [ Value "false"; OnChange ignore] []
137+
div [ ClassName "test-case" ] [
138+
span [ ClassName "label" ] [ str "Test textarea:" ]
139+
textarea [ ClassName "textarea"; DefaultValue "true" ] []
140+
textarea [ ClassName "textarea"; DefaultValue "false" ] []
141+
textarea [ ClassName "textarea"; Value "true"; OnChange ignore] []
142+
textarea [ ClassName "textarea"; Value "false"; OnChange ignore] []
137143
]
138144

139-
div [] [
140-
span [] [ str "Test React.Fragment:" ]
145+
div [ ClassName "test-case" ] [
146+
span [ ClassName "label" ] [ str "Test React.Fragment:" ]
141147
fragment []
142148
[ span [] [ str "child 1" ]
143149
span [] [ str "child 2" ]
@@ -146,8 +152,8 @@ let view (model: Model) (dispatch) =
146152
]
147153
]
148154

149-
div [] [
150-
span [] [ str "Test escape:" ]
155+
div [ ClassName "test-case" ] [
156+
span [ ClassName "label" ] [ str "Test escape:" ]
151157
fragment []
152158
[ span
153159
[ Data ("value", "<div>\"\'&</div>");
@@ -157,24 +163,24 @@ let view (model: Model) (dispatch) =
157163
]
158164
]
159165

160-
div [] [
161-
span [] [ str "Test js component:" ]
166+
div [ ClassName "test-case" ] [
167+
span [ ClassName "label" ] [ str "Test js component:" ]
162168
isomorphicView jsComp jsCompServer { text="I'm rendered by a js Component!" }
163169
]
164170

165-
div [] [
166-
span [] [ str "Test ofType:" ]
167-
ofType<MyReactComp, _, _> { text="my prop" } [ span [] [ str "I'm rendered by children!"] ]
171+
div [ ClassName "test-case" ] [
172+
span [ ClassName "label" ] [ str "Test ofType:" ]
173+
ofType<MyReactComp, _, _> { text="my prop" } [ span [] [ str " I'm rendered by children!"] ]
168174
]
169175

170-
div [] [
171-
span [] [ str "Test null:" ]
176+
div [ ClassName "test-case" ] [
177+
span [ ClassName "label" ] [ str "Test null:" ]
172178
null
173179
]
174180

175-
div [] [
176-
span [] [ str "Test ofFunction:" ]
181+
div [ ClassName "test-case" ] [
182+
span [ ClassName "label" ] [ str "Test ofFunction:" ]
177183
ofFunction fnComp { text = "I'm rendered by Function Component!"} []
178-
ofFunction fnCompWithChildren { text = "I'm rendered by Function Component!"; children=[||]} [ span [] [ str "I'm rendered by children!"] ]
184+
ofFunction fnCompWithChildren { text = " I'm rendered by Function Component! "; children=[||]} [ span [] [ str " I'm rendered by children!"] ]
179185
]
180186
]

‎Samples/SSRSample/src/Client/index.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body {
2+
padding: 20px 40px;
3+
}
4+
.counter-app {
5+
margin: 20px 0;
6+
}
7+
.counter {
8+
margin: 10px auto 0;
9+
display: inline-block;
10+
}
11+
12+
.counter .tag {
13+
margin: 0 15px;
14+
}
15+
16+
.intro,
17+
.test-case {
18+
max-width: 600px;
19+
margin: 20px auto;
20+
}
21+
22+
.test-case {
23+
border: 1px solid #ccc;
24+
padding: 10px;
25+
}
26+
27+
.label {
28+
margin-right: 6px;
29+
}
30+
31+
.checkbox, .input, .textarea {
32+
margin-right: 10px;
33+
margin-bottom: 10px;
34+
}
35+
36+
37+
.children-comp,
38+
.class-comp,
39+
.fn-comp,
40+
.js-comp {
41+
margin-bottom: 15px;
42+
padding: 10px;
43+
border: 1px solid #f93;
44+
}
45+
46+
.children-comp > span {
47+
margin-bottom: 5px;
48+
border: 1px solid #0cb3f0;
49+
padding: 5px 10px;
50+
display: block;
51+
}

‎Samples/SSRSample/src/Client/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
<head>
44
<title>SAFE Template</title>
55

6-
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
77
</head>
88
<body>
99
<div id="elmish-app" />
1010
<script src="./public/bundle.js"></script>
1111
</body>
12-
</html>
12+
</html>

‎Samples/SSRSample/src/Client/jsComp.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22

33
export default function JsComp({ text }) {
4-
return React.createElement('div', null, text)
4+
return React.createElement('div', { className: 'js-comp' }, text)
55
}
6-

‎Samples/SSRSample/src/Server/Server.fs‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,25 @@ bench ()
4343
let getInitCounter () : Task<Model> = task { return initState }
4444

4545
let htmlTemplate =
46+
let clientHtml = Fable.Helpers.ReactServer.renderToString(Client.View.view initState ignore)
47+
let stateJson = toJson (toJson initState) // call toJson twice to output json as js string in html
4648
html []
47-
[ head [] []
49+
[ head []
50+
[ link
51+
[ _rel "stylesheet"
52+
_href "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"
53+
]
54+
link
55+
[ _rel "stylesheet"
56+
_href (assetsBaseUrl + "/index.css")
57+
]
58+
]
4859
body []
49-
[ div [_id "elmish-app"] [ rawText (Fable.Helpers.ReactServer.renderToString(Client.View.view initState ignore)) ]
60+
[ div [_id "elmish-app"] [ rawText clientHtml ]
5061
script []
5162
[ rawText (sprintf """
5263
var __INIT_STATE__ = %s
53-
""" (toJson (toJson initState))) ] // call toJson twice to output json as js string in html
64+
""" stateJson) ]
5465
script [ _src (assetsBaseUrl + "/public/bundle.js") ] []
5566
]
5667
]

0 commit comments

Comments
 (0)