/
ControlFlow.fs
114 lines (97 loc) · 3.16 KB
/
ControlFlow.fs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
module UseCases.ControlFlow
open Vide
open type Vide.Html
let ifElseWithForget =
vide {
let! count = ofMutable {0}
button.onclick(fun _ -> count.Set(count.Value + 1)) {
$"Hit me! Count = {count.Value}"
}
if count.Value % 5 = 0 && count.Value <> 0 then
div.class'("the-message") {
$"You have the right to defend yourself!"
}
else
elseForget
}
// TODO: That is not compiling (anymore; which is ok - document this)
let ifElseWithPreserve =
vide {
let! count = ofMutable {0}
button.onclick(fun _ -> count.Set(count.Value + 1)) {
$"Hit me! Count = {count.Value}"
}
if count.Value % 5 = 0 && count.Value <> 0 then
div.class'("the-message") {
$"You have the right to defend yourself!"
}
let! isAcknowledged = ofMutable {false}
input.bind(isAcknowledged)
else
elsePreserve
}
////let yieldConditionalPreserve =
//// vide {
//// let! count = ofMutable {0}
//// button.onclick(fun _ -> count += 1) {
//// $"Hit me! Count = {count.Value}"
//// }
//// // TODO: Why not committing to "is/else" - is that shortcut really good?
//// // Propably it's better to remove the possibility for "yieldConditionalPreserve" in Core
//// (count.Value = 5), p { "YOU DID IT!" }
//// }
let componentWithIntState = vide {
let! state = ofMutable {0}
p { $"Int: {state.Value}" }
button.id("dec").onclick(fun _ -> state.Set(state.Value - 1)) { "dec" }
button.id("inc").onclick(fun _ -> state.Set(state.Value + 1)) { "inc" }
}
let componentWithStringState = vide {
let! state = ofMutable {"Hello"}
p { $"String: {state.Value}" }
input.bind(state)
}
let componentWithBooleanState = vide {
let! state = ofMutable {true}
p { $"Bool: {state.Value}" }
input.bind(state)
}
module MatchWithBranch =
type Union =
| View0 of string
| View1 of int
| View2
let chooseView = vide {
let! count = ofMutable {0}
button.id("dec").onclick(fun _ -> count.Set(count.Value - 1)) { "Previous View" }
button.id("inc").onclick(fun _ -> count.Set(count.Value + 1)) { "Next View" }
$" - View nr. {count.Value}"
return count.Value
}
let view =
vide {
let! data = vide {
let! viewNr = chooseView
return
match viewNr % 3 with
| 0 -> View0 "Test"
| 1 -> View1 42
| _ -> View2
}
match data with
| View0 text ->
B1Of3 <| vide {
let! x = Vide.preserveValue text
$"Case0: {x}"
}
| View1 num ->
B2Of3 <| vide {
let! x = Vide.preserveValue num
$"Case1: {x}"
}
| View2 ->
B3Of3 <| vide {
let! x = Vide.preserveValue ()
$"Case2: {x}"
}
}