Pages
Introduction
Getting Started
Recipes
Reference
Literals
Arrays
Tuples
Type System
Functions
Modules
Records
Enums
Built-in Types
Constants
Equality
Stores
Routing
Comments
Control Expressions
Components
Properties
Computed Properties
Styling Elements
Connecting Stores
Using Providers
Internal State
Referencing Entities
Global Components
Lifecycle Functions
Directives
JavaScript Interop
Environment Variables
Packages
Global Components
Components can be declared as
global
, which means they are:
- globally accessible
- only rendered once
-
rendered automatically alongside the
Main
component
Why are they useful?
There are some UI features that require one global entity that other entities can interact with from anywhere, for example notifications or modals.
What does it look like in practice?
Below you can find a basic implementation of a confirmation modal.
global component ConfirmModal {
state callback : Function(Promise(Never, Void)) = Promise.never
state message : String = ""
state open : Bool = false
style base {
background: rgba(0,0,0,0.8);
color: white;
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
justify-content: center;
flex-direction: column;
align-items: center;
display: flex;
}
fun show (
message : String,
callback : Function(Promise(Never, Void))
) : Promise(Never, Void) {
next
{
callback = callback,
message = message,
open = true
}
}
fun handleClick : Promise(Never, Void) {
sequence {
callback()
next { open = false }
}
}
fun render : Html {
if (open) {
<div::base>
<{ message }>
<button onClick={handleClick}>
"OK"
</button>
</div>
} else {
<></>
}
}
}
component Main {
fun handleClick : Promise(Never, Void) {
ConfirmModal.show("Hello There!", Promise.never)
}
fun render : Html {
<div onClick={handleClick}>
"Click ME!"
</div>
}
}