Vaadin Flow 5.0.0.alpha1 is a prerelease of the Java Framework for Vaadin 18. To try it out, use the latest Vaadin 18 prerelease available from the Maven central or create a new project from start.vaadin.com.
New features in 5.0
LitElement support (#8957 #8988 #9007 #9008 #9031 #9026 #8979)
There is a new default template format people should use instead of Polymer when using Java UI logic. Feature set is bit more limited than before, and the template format users shouldn’t mix client and server side logic (but to choose either TS development model or pure server side UI logic).
Add HasHelper interface (#8922)
A new HasHelper interface has been added to be used for field components that have a "helper" feature (such as TextField), i.e. a slot below/above input fields for supplying additional information or content related to the field.
Add client-side authentication features (#8806)
The following TypeScript helpers have been added for Spring Security based authentication: login, logout and session expiration handling.
Support TypeScript form binding with optional fields and objects (#8847)
In terms of forms, an object field could be used in both ways: as
an individual field or a grouping for the object’s nested fields.
Previously, the optional fields in empty form value objects were initialised
by the client-side binder with a generated value when BinderNode or
form binding is created for such fields. Such a behavior works well with
grouping object fields, but makes it problematic to bind an individual
optional field of object type by making empty value already defined.
With this change, the client-side form binder skips initialising
optional fields, keeping their values undefined, unless there is
a binding for a nested field inside an optional parent object.
For example: with a binding for model.optionalObject will have
a corresponding empty form value of {"optionalObject": undefined},
however, with a binding of model.optionalObject.nestedString, the
empty form value will contain a generated object: {"optioanlObject": {"nestedString": ""}}.
Simpler CSS import for TypeScript views and CSS @import support (#8843)
This modifies the default webpack loader configuration for all *.css files. Instead of the previous raw-loader only, this will use a loader chain of ['lit-css-loader', 'extract-loader', 'css-loader'].
lit-css-loader gives us a nice DX of importing styles to TS views like this:
import styles from './list-view.css';
@customElement('list-view')
export class ListView extends LitElement {
static styles = [Lumo, styles];css-loader gives the additional benefit of resolving CSS @import "file.css"; syntax in CSS files. This is a new features that works both for TS views and also when using @CssImport() annotation in Java.
extract-loader is needed in the middle to convert the JS output of css-loader into a plain CSS string.
Add an API for disabling data fetching in DataCommunicator (#9070)
Supports the components to postpone the calls to data provider until some event. ComboBox, for instance, now postpones the item count calls until it's drop down is opened.
Deprecations and Incompatible Changes since 4.0
LitElement support deprecations and breaking changes:
Polymer Templaterelated classes are now deprecated and moved to a separate maven module.LitElement Templaterelated classes are moved to a separate maven module and extended with an extra classes/interfaces for the following features: read text for template element, set enable state based on template element attribute, read template attributes as properties, read attribute value from template, implementLitElement Templateparser, and more.Usesannotation is now deprecated, becausePolymer templatesupport is deprecated.
Read more details here https://vaadin.com/blog/future-of-html-templates-in-vaadin
Optional type for value property of BinderNode
The value property of BinderNode now has optionally undefined type for non-initialised optional fields.
New method in Component class
Component extended with isAttached which checks whether this component is currently attached to a UI.
New methods in DataCommunicator class
DataCommunicator extended with a new methods and a new inner class to provide a postponed item count calls in the components.