-
-
Notifications
You must be signed in to change notification settings - Fork 196
/
index.mld
157 lines (127 loc) · 7.26 KB
/
index.mld
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
{%html:
<a href="https://github.com/revery-ui/revery/blob/master/src/index.mld" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
%}
{1 Revery}
Framework for fast, native code, cross-platform GUI applications.
{%html:
<nav class="toc">
%}
{ul
{li The Basics}
{li
{ul
{li {{:#Overview} Overview}}
{li {{:#Quickstart} Quickstart}}
{li {{:#ComponentModel} Component Model}}
{li
{ul
{li {{:#BasicFunctionalComponent} Basic Components}}
{li {{:#HooksComponent} Components with Hooks}}
}
}
}
}
{li API}
{li
{ul
{li {{:../Revery/Revery_Core/App/index.html} App}}
{li {{:../Revery/Revery_Core/Colors/index.html} Colors}}
{li {{:../Revery/Revery_Core/Environment/index.html} Environment}}
{li {{:../Revery/Revery_Core/Key/index.html} Key}}
{li {{:../Revery/Revery_Core/MouseButton/index.html} MouseButton}}
{li {{:../Revery/Revery_Core/MouseCursors/index.html} MouseCursors}}
{li {{:../Revery/Revery_Core/Tick/index.html} Tick}}
{li {{:../Revery/Revery_Core/Time/index.html} Time}}
{li {{:../Revery/Revery_Core/Window/index.html} Window}}
{li {{:../Revery/Revery_Core/WindowCreateOptions/index.html} WindowCreateOptions}}
}
}
{li Components}
{li
{ul
{li {{:../Revery/Revery_UI_Components/Button/index.html} Button}}
{li {{:../Revery/Revery_UI_Components/Checkbox/index.html} Checkbox}}
{li {{:../Revery/Revery_UI_Components/Clickable/index.html} Clickable}}
{li {{:../Revery/Revery_UI_Components/ClipContainer/index.html} ClipContainer}}
{li {{:../Revery/Revery_UI_Components/Container/index.html} Container}}
{li {{:../Revery/Revery_UI_Components/Dropdown/index.html} Dropdown}}
{li {{:../Revery/Revery_UI_Components/Input/index.html} Input}}
{li {{:../Revery/Revery_UI_Components/Positioned/index.html} Positioned}}
{li {{:../Revery/Revery_UI_Components/RadioButtons/index.html} RadioButtons}}
{li {{:../Revery/Revery_UI_Components/ScrollView/index.html} ScrollView}}
{li {{:../Revery/Revery_UI_Components/Slider/index.html} Slider}}
{li {{:../Revery/Revery_UI_Components/Stack/index.html} Stack}}
{li {{:../Revery/Revery_UI_Components/Ticker/index.html} Ticker}}
{li {{:../Revery/Revery_UI_Components/Tree/index.html} Tree}}
}
}
{li Hooks}
{li
{ul
{li {{:../Revery/Revery_UI_Hooks/index.html#val-animation} animation}}
{li {{:../Revery/Revery_UI_Hooks__/Effect/index.html} effect}}
{li {{:../Revery/Revery_UI_Hooks__/Reducer/index.html} reducer}}
{li {{:../Revery/Revery_UI_Hooks__/Ref/index.html} ref}}
{li {{:../Revery/Revery_UI_Hooks__/State/index.html} state}}
{li {{:../Revery/Revery_UI_Hooks__/Tick/index.html} tick}}
{li {{:../Revery/Revery_UI_Hooks/index.html#val-transition} transition}}
}
}
{li Math}
{li
{ul
{li {{:../Revery/Revery_Math/BoundingBox2d/index.html} BoundingBox2d}}
}
}
{li Platform}
{li
{ul
{li {{:../Revery/Revery/Platform/index.html} Dialog}}
}
}
}
{%html:
</nav>
%}
{2:Overview Overview}
Revery is a framework for building cross-platform GUI applications. Revery provides a React-like, functional approach for modeling UI, as well as scaffolding for managing the application lifecycle.
Revery started as the foundation of {{:https://v2.onivim.io} Onivim 2}, but was factored out into a general toolkit for {{:https://reasonml.github.io} ReasonML} user interfaces.
{2:Quickstart Quickstart}
There are two ways to get started:
{ul
{li Try out the revery {{:https://www.outrunlabs.com/revery/playground} Playground}}
{li Clone and run {{:https://github.com/revery-ui/revery-quick-start} revery-quick-start}
[git clone https://github.com/revery-ui/revery-quick-start]
[cd revery-quick-start]
[esy install]
[esy build]
[esy run]
}
}
{2:ComponentModel Component Model}
{3:BasicFunctionalComponent Basic Components}
The basic component building block is simply a {b pure function}, that returns an {e element}.
Example:
{[
let squareBox = () => <Container width=10 height=10 color=Colors.red />;
]}
Properties can be specified as {b named arguments}.
Example:
{[
let wideBox = (~width: int, ()) => <Container width height=10 color=Colors.red />;
]}
You can accept children through through the [~children] property, for example:
{[
let boxWithChildren = (~children, ()) => <Container width=10 height=10 color=Colors.red>children</Container>;
]}
{3:HooksComponent Components with Hooks}
For components that manage state, or have side effects, you'll want to encapsulate those using {b hooks}!
A component that uses hooks can be created using [let%component], for example:
{[
let%component componentWithHooks = (~children, ()) => {
let%hook (state, setState) = Hooks.state(0);
<Button text=string_of_int(state) onClick={(_) => setState(state => state + 1)}/>;
};
]}
Hooks components still return a function with named arguments representing the properties, but behind the scenes a hooks component is a {i function that takes a hooks object}, and then {i returns a tuple of [(hooks, element)]}. This complexity is hidden away for you using syntax sugar in a manner similar to how async/await hides promises in JavaScript for example.
In effect, Revery components should always be pure functions - given a set of props, and a hooks, the output should always be the same.