Vaadin Flow is a Java framework binding Vaadin web components to Java. This is part of Vaadin 10+.
Clear preseved chain cache for inactive UI (#19360) Commit · Pull request
Prevents potential memory leaks caused by UIs being retained by the preserve on refresh cache when the browser page is closed.
Clear preseved chain cache for inactive UI (#19360) (CP: 24.3) Commit · Pull request
Prevents potential memory leaks caused by UIs being retained by the preserve on refresh cache when the browser page is closed.
Prevent exception getting DevModeHandlerManager on application shutdown (#19300) Commit · Pull request · Issue
During the destruction of the web applicationi context, the DevModeStartupListener's context destroy listener is invoked. This listener attempts to locate the DevModeHandlerManager to halt the Vaadin dev-server. However, this process could trigger an exception if the dependency injection container behind the Lookup mechanism has already been stopped. This commit addresses the issue by capturing a reference to the handler during web context start, eliminating the need for a lookup during destruction, thus preventing potential exceptions.
Clear preseved chain cache for inactive UI (#19360) Commit · Pull request
Prevents potential memory leaks caused by UIs being retained by the preserve on refresh cache when the browser page is closed.
Prevent embedded styles to leak main document Commit · Pull request · Issue
When using an exported a themed Flow web-component, Lumo style may leak the embedding document, causing invalid CSS rules to be applied. This change prevents applying Lumo global imports when the theme is applied to a web-component.
Clear preseved chain cache for inactive UI (#19360) Commit · Pull request
Prevents potential memory leaks caused by UIs being retained by the preserve on refresh cache when the browser page is closed.
Prevent embedded styles to leak main document (#19242) Commit · Pull request · Issue
When using an exported a themed Flow web-component, Lumo style may leak the embedding document, causing invalid CSS rules to be applied. This change prevents applying Lumo global imports when the theme is applied to a web-component.
Rename createWebComponent method (#19309) Commit · Pull request
Rename the createWebComponent function as the create gives the impression that the function is heavy.
Provide specific package-lock.json for hybrid applications (#19342) Commit · Pull request · Issue
The package-lock.json provided by the pre-compiled dev-bundle contains no Hilla dependencies, slowing down the first frontend build. This change attempts to extract a package-lock.json file specific to the hybrid application from the bundle, possibly falling back on the standard one.
Set page title to documentTitleSignal (#19329) Commit · Pull request · Issue
UIInternals#setTitle(String) sets page title via JavaScript to document.title and optionally window.Vaadin.documentTitleSignal.value where documentTitleSignal is expected but not limited to be Signal
Change type of Menu order to double (#19332) Commit · Pull request · Issue
Changing Menu#order type double and MenuData#order type to Double to match it with Hilla's ViewConfig type number.
Reload flow after hmr reload in dev mode (#19323) Commit · Pull request · Issue
Reset and reload flow when a template hrm reload happens.
Fix failure when Vite sends many messages in sequence (#19340) Commit · Pull request
Sending multiple messages at the same time resulted in java.lang.IllegalStateException: The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state for called method which originates in calling browserSession.getAsyncRemote().sendText a second time before the complete callback for the first call has been called. Now the getBasicRemote() method is used instead which blocks until the message has been sent.
Prevent exception getting DevModeHandlerManager on application shutdown (#19300) Commit · Pull request · Issue
During the destruction of the web applicationi context, the DevModeStartupListener's context destroy listener is invoked. This listener attempts to locate the DevModeHandlerManager to halt the Vaadin dev-server. However, this process could trigger an exception if the dependency injection container behind the Lookup mechanism has already been stopped. This commit addresses the issue by capturing a reference to the handler during web context start, eliminating the need for a lookup during destruction, thus preventing potential exceptions.
Include filesystem dependencies in gradle plugin class finder (#19287) Commit · Pull request · Issue
Gradle plugin builds a class finder upon the JAR files obtained through the project dependencies resolved artifacts, that however does not include filesystem dependencies. This change adds filesystem dependencis to the list of project JAR files provided to the class finder.
Make property change listener trigger on removeProperty Commit · Pull request · Issue
Removing element property by calling com.vaadin.flow.internal.nodefeature.AbstractPropertyMap#removeProperty does not trigger property change listener because of com.vaadin.flow.internal.nodefeature.ElementPropertyMap#remove method is skipped due to AbstractPropertyMap#removeProperty method calls super: public void removeProperty(String name) { super.remove(name); }
Prevent embedded styles to leak main document Commit · Pull request · Issues 12704, 19265
When using an exported a themed Flow web-component, Lumo style may leak the embedding document, causing invalid CSS rules to be applied. This change prevents applying Lumo global imports when the theme is applied to a web-component.
Include filesystem dependencies in gradle plugin class finder (#19287) (CP: 24.3) Commit · Pull request · Issue
Prevent embedded styles to leak main document (#19274) Commit · Pull request · Issues 12704, 19265
When using an exported a themed Flow web-component, Lumo style may leak the embedding document, causing invalid CSS rules to be applied. This change prevents applying Lumo global imports when the theme is applied to a web-component.
Prevent embedded styles to leak main document (#19221) Commit · Pull request · Issue
When using an exported a themed Flow web-component, Lumo style may leak the embedding document, causing invalid CSS rules to be applied. This change prevents applying Lumo global imports when the theme is applied to a web-component.
Mixing Flow and Hilla views in one single application Docs · Example Project
Vaadin project can now have both server-side and client-side routes, written in Java or React, aka Flow views and Hilla views respectively. This doesn't need any special configuration, Vaadin Flow uses the React Router by default, adds all needed React dependencies and React components, provided by Vaadin.
Start adding Flow views as Route-annotated Java classes in src/main/java/com/example/ and React views written in TypeScript in src/main/frontend/views/.
Use Main annotation for Flow views that have to be shown in the main layout written in React.
Example of a Flow view:
src/main/java/com/example/application/FlowView.java
@Route
@Menu
public class FlowView extends VerticalLayout {
}
See the linked online documentation above for more information.
Using React components from Flow Docs
You can wrap any React component as a Flow component and use it in your Flow view, change the component's state and send events from server to client and vice-versa.
src/main/frontend/rgba-color-picker.tsx:
class RgbaColorPickerElement extends ReactAdapterElement {
protected override render(hooks: RenderHooks): ReactElement | null {
const [color, setColor] = hooks.useState<RgbaColor>("color");
return <RgbaColorPicker color={color} onChange={setColor} />;
}
}
customElements.define("rgba-color-picker", RgbaColorPickerElement);
src/main/java/com/example/application/RgbaColorPicker.java:
@NpmPackage(value = "react-colorful", version = "5.6.1")
@JsModule("./rgba-color-picker.tsx")
@Tag("rgba-color-picker")
class RgbaColorPicker extends ReactAdapterComponent {
public RgbaColorPicker() {
setColor(new RgbaColor(255, 0, 0, 0.5));
}
public RgbaColor getColor() {
return getState("color", RgbaColor.class);
}
public void setColor(RgbaColor color) {
setState("color", color);
}
}
src/main/java/com/example/application/FlowView.java:
@Route
public class FlowView extends VerticalLayout {
public FlowView() {
add(new RgbaColorPicker());
}
}
Using Flow components from React Docs
Flow components can be embedded in a Hilla/React view by using a known WebComponentExporter API and using the exported Web component on the React view:
src/main/java/com/example/application/MyFlowComponentExporter.java:
public class MyFlowComponentExporter
extends WebComponentExporter<CustomComponent> {
public static final String TAG = "my-flow-component";
public MyFlowComponentExporter() {
super(TAG);
}
@Override
protected void configureInstance(WebComponent<CustomComponent> webComponent,
CustomComponent component) {
}
}
src/main/frontend/views/hilla.tsx:
function MyFlowComponent() {
return createWebComponent("my-flow-component");
}
export default function HillaView() {
return (
<>
<VerticalLayout className={'centered-content'}>
<h3>Hilla View</h3>
<MyFlowComponent/>
</VerticalLayout>
</>
);
}
Use React Router by default Docs · Issue
Vaadin Flow uses React Router by default, which gives an opportunity to start adding React components/views immediately into Vaadin application and develop in React.
The legacy @vaadin/router is still supported and can be enabled with the reactEnable=false configuration parameter, see the linked online documentation. E.g. when you develop your client-side views with Lit and Hilla.
Move /frontend directory under /src/main by default Issue · Pull Request
Vaadin now uses src/main/frontend/ directory as a default location of frontend resources, which is more natural for Maven projects. It fallbacks to frontend directory if the src/main/frontend/ does not exist.
Open tab in dev mode less often Docs · Commit · Pull request
After default 30 min Vaadin opens a new tab on server restart. If server is restarted again before timeout, then the browser tab is reused.
Add translation file request handler Commit · Pull request · Issue
This PR adds a request handler to serve translation properties files. For the request to be handled by this handler, the request type should be i18n. There is one optional parameter to construct the locale: langtag. If a translation properties file that corresponds to the locale, the response contains the translation entries in JSON format. Otherwise, it contains the default file or returns a not found response. The default file is the bundle for the root locale. The system default locale is not considered to be the default, and is not used for fallback. The response header also contains information regarding the retrieved file locale.
Add getItemIndex to DataView Commit · Pull request · Issue
New getItemIndex method in DataView affects ListDataView and LazyDataView implementations. LazyDataView introduces in addition a new method setItemIndexProvider(ItemIndexProvider). With ListDataView, getItemIndex works out-of-the-box with the in-memory data. With LazyDataView, it's required to set item index provider first with setItemIndexProvider(ItemIndexProvider). Otherwise getItemIndex will throw UnsupportedOperationException. Provider can be implemented to fetch correct item index using item and Query parameters. Query object is set up to fetch all items with sorting and filter.
Support DataProviderWrapper better in AbstractDataView Commit · Pull request · Issue
Adds in AbstractDataView a better support for wrapper data providers that implements DataProviderWrapper. AbstractDataView won't throw exception anymore if wrapped data container is supported by the data view implementation. Adds public getWrappedDataProvider method in DataProviderWrapper.
Allow disable component tracker Commit · Pull request · Issue
Adds a configuration parameter that allows developers to disable component tracking.
Write source information for React components defined in the project Commit · Pull request
When transpiling tsx/jsx to ts/js, Babel writes the source information for where components are used. This adds the information about where components are defined.
SBOM generation Commit · Pull request
Add skipDefaultValidator API to Binder and BindingBuilder Commit · Pull request · Issue
Provides means to skip default validators of bound fields. Skipping can be done either for the Binder instance (skips all), or per-binding via BindingBuilder.
Section and IFrame implements HasAriaLabel Commit · Pull request · Issue
Implement HasAriaLabel for html elements with a landmark role.
Add method to write only the changed properties to the bean Commit · Pull request
Add methods for checking roles and authorities Commit · Pull request
Wrap the JS snippet in async function Commit · Pull request
Support top-level await Commit · Pull request
Update gradle plugin clean tasks Commit · Pull request · Issue
Updates Vaadin Gradle plugin to clean in same way as Maven plugin cleans. Moved CleanFrontendMojo logic to CleanFrontendUtil in shared flow-plugin-base. Updated VaadinCleanTask and VaadinBuildFrontendTask. Added cleanFrontendFiles property to Gradle plugin.
Check custom header for dev tools connection verification Commit · Pull request
Allows to specify a custom header name to get the client address that is verfied to allow access to dev tools. In addition, validates all hops in the X-Forwaded-For chain.
Add file system router plugin for vite Commit · Pull request · Issue
Adds vitePluginFileSystemRouter to Vite plugins by default when React and Hilla is in use.
Pass all task options to TS modifiers Commit · Pull request
Pass Java class info to browser in dev mode Commit · Pull request
If the mode cannot be determined (missing session or configuration), do not send anything.
Add method for checking if annotation based security is used Commit · Pull request
Pass inline styles to JS Commit · Pull request
Publish node info only for dev mode.
Throttle page resize events Commit · Pull request
Not built with complex JS hacks anymore, but with normal event listening system.
Allow receiving specified dom events for inert elements Commit · Pull request
Record support in beanpropertyset Commit · Pull request
Use React Router by default Commit · Pull request
Enable React Router as default with property to fall back to @vaadin/router.
Reject AppShell classes which extend Component Commit · Pull request · Issue
Rename dev.hilla packages to com.vaadin.hilla
Commit · Pull request
Rename default validator API Commit · Pull request
Bump jackson.version from 2.16.0 to 2.16.1 Commit · Pull request
Upgrade minimum supported Gradle version to 8.4 Commit · Pull request
Vaadin Flow 24.4.0.beta1 has the following known issues in the recently introduced unification between Hilla and Flow, have to be resolved before 24.4.0 GA:
Generate flow imports in the same folder Commit · Pull request
Fix URL rewrite for nested CSS Commit · Pull request · Issue
In addition, CssBundler now tries to guess if a theme relative path that do not match a physical file might be a reference to a theme asset, and in this case it replaces the URL with one resolvable by StaticFileHandler. Refs #19094
Delete only unnecessary generated files Commit · Pull request
Prevents built tool plugins to to delete all frontend genreated files as first step in the prepare-frontend task, moving the login in BuildFrontendUtil and changing it to only delete files that are no longer created by node tasks. Part of #18907
Prevent embedded styles to leak main document (#19242) Commit · Pull request · Issue
When using an exported a themed Flow web-component, Lumo style may leak the embedding document, causing invalid CSS rules to be applied. This change prevents applying Lumo global imports when the theme is applied to a web-component.
Upgrade license-checker to 1.12.8 (#18739) Commit · Pull request