0.7.0
Global components
Components can be prefixed with the global
keyword, this will add them to the DOM automatically and it's methods can be called the same way as a store or module.
It is useful for components that only need one instance in the application,
like modals and notifications:
global component AlertModal {
state shown : Bool = false
fun open : Promise(Never, Void) {
next { shown = true }
}
fun close : Promise(Never, Void) {
next { shown = flase }
}
style base {
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
fun render : Html {
if (shown) {
<div::base>
<p>
Are you sure?
</p>
<button onClick={close}>
Ok
</button>
</div>
} else {
<></>
}
}
}
/* Later on somewhere else */
AlertModal.open()
Statically compiled components / HTML
In this release the compiler will detect components and HTML fragments that are essentially static, meaning that subsequent renders would always result in the same virtual DOM structure.
These fragments and components will be cached so to speak, they will only rendered once and get reused after that.
To give you an example, the following component will only be rendered once and is reused after that:
component Icons.Checkmark {
fun render : Html {
<svg>
/* The svg data */
</svg>
}
}
component Main {
fun render : Html {
<div>
<Icons.Checkmark/>
<Icons.Checkmark/>
</div>
}
}
New Features
- Allow omitting else branch of if in HTML
- Added command to generate the documentation in JSON format
- Allow "&" for attributes and classes (CSS)
- Allow embedding the Main component without taking over the body
Miscellaneous
- Updated documentation of some functions
Bugfixes:
- Fix compiling of multiple sytles with parameters.
- Fix compiling of interpolations in css values
- Properly merge ifs and cases in a style and preseve their order
- Allow creating records for nested records in encode
- Don't catch and unbox values from the last returning result in a try expression.
- Make sure we scope to the entities correctly.