vaadin/flow 6.0.0

Vaadin Flow 6.0.0

on GitHub

Vaadin Flow 6.0.0

Vaadin Flow 6.0.0 is a major release of the Flow & Fusion frameworks targeted to Vaadin 19. To try it out, use the latest 19 prerelease available from the Vaadin prereleases Maven repository.

New Features in Flow 6.0

Custom Theme

The Custom Theme is a simplified theming system that works for all Vaadin applications and enables developers to

• Define customised themes based on the Lumo theme.
• Use in-app resources such as style sheets, fonts, background images, etc. easily into the custom theme.
• Have multiple theme folders and enable them just by addressing those folder name in @Theme annotation.
• Apply CSS automatically on any components just by putting the css files into a specific folder inside the theme.
• Use resources such as CSS, Fonts, images, etc. from npm dependencies (node_modules).
• Package custom themes into reusable themes and use them in other applications.
• Inherit from other custom themes as the parent theme.

Re-introducing OSGi support

Flow 2.x series only support OSGi in the "compatibility mode" currently. Flow 6.0 now re-introduces OSGi support for npm mode.
With OSGi support implemented, Vaadin applications can be deployed on an OSGi compatible servlet container as a multiple bundles, that can be deployed individually.
OSGi support is provided by Flow, as well as OSGi-specific implementations localised into separate OSGi project.
Get started with either the OSGi base starter or Karaf base starter and documentation.

Note: there is a known issue in the starters as they register the VaadinServlet using HttpWhiteBoard and allow access to all class files inside the web app bundle. This is being fixed, but can be workaround for now by having application classes inside another bundle.

Read more about OSGi support on Vaadin Blog.

Other New Features

• Offline Start Epic:9234
  Flow now precaches frontend assets in the service worker, so that the application shell can be loaded in the browser when the server is not reachable. Client-side views at both / as well as nested routes will be usable offline. Uses the InjectManifest plugin and to load the precached assets into workbox. A default offline.html, is rendered in when navigating to a server-side view in offline mode.
• Connection Indicator Epic:9203
  A new connection indicator replacing the previous loading indicator to also when the server cannot be reached. The visual properties of the indicator can be configured in index.ts via a new TypeScript API.
• ⧉ Support current pnpm versions. PR:9848
  Remove pnpm-lock.yaml when package.json dependencies are updated to work around pnpm/pnpm#2587. Invoke pnpm via npx instead of relying on global installation or installing into ~/.vaadin/node_modules.
• ⧉ Implement NativeDetails as html component. PR:9735
  NativeDetails is based on vaadin-details except that the html property is called open instead of opened and the event is called Toggle like the html dom event. To reduce the API noise NativeDetails extends HtmlComponent instead of HtmlContainer. HasText and HasComponents would interfere with the already set <summary> inside the <details>.
• ⧉ Add HasOrderedComponents in HTML layout elements. PR:9734
  Implements HasOrderedComponents for all common HTML layout elements: - Aside - Article - Div - Footer - Header - Main - Nav - Section The test is created in the base test class to simplify the unit testing of all components. To make sure that the interface isn't removed by accident, every class implements the test explicitly and fails if the interface is removed.
• ⧉ Frontend path alias. PR:9898
  Add a Frontend alias for the frontend directory, so that you can import the frontend assets with import 'Frontend/xxx' instead of having to figure out the path manually like import '../../../frontend/xxx'.
• ⧉ Generate .npmrc with default pnpm option. PR:9956
  Add an .npmrc file so that when installing packages with pnpm, it is no longer necessary to pass the --shamefully-hoist flag.
• ⧉ Add Karaf features via artifacts classifier for Flow. PR:9927
  Adds support for Apache Karaf features.
• ⧉ Allow endpoints to work on non-public classes (Fusion). PR:9592
  Makes accessible all public methods of Endpoint which allows to call them even if class is not public.

Breaking Changes and Deprecations

• ⧉ Rename connect.generated as it now used for Flow as well. PR:9836. Ticket:9687
  Frontend generated folder is now used by Flow to generate a theme files. It's not limited to a Fusion's connect functionality. Thus, this PR proposes to rename it to something more common. As 'vaadin.frontend.generated.folder' parameter name already exists, the new name is proposed to be 'project.frontend.generated' to not mix them up with each other.
• ⧉ Update changed value to field with formatting. PR:9227
  Convert value back to representation and write back to field when changed and validation passes. This ensures correct formatting of the value when a converter is used. This changes existing field binding behavior for binder, but for the better. Some applications might have workarounds in place for this and can now remove them.
• ⧉ Entity field with @id annotation in Java is now optional in the generated TypeScript code. PR:9253. Ticket:9222
  Given an entity with id field, now instead of using entity.id, you might need to change to entity.id! or entity.id?.

Other Notable Fixes

• Fixed regression in CSS importing for Lit (#9550)
• Fix @ServiceRanking is not handled by the OSGi bundle generation tool (#9716)
• Resolve requested range properly after filtering the lazy backend (#10020)
• NumberValidator accepts undefined for optional fields (#10026)

Behaviour Changes

• VaadinService.dependencyFilters made unmodifiable (#9292)
• Element::removeAllChildren behaviour has been changed (#10128) so that the re-attached node persists its state "removed children" between client-server roundtrips. It wasn't a case before that change, the "clear all" event happens only once after first attach of the node.
  That effectively means that if you have a client-side LitElement component and corresponding LitTemplate java-side component, then once you call Element::removeAllChildren on java-side, it will remove all children on client-side on every attach action.

Known Issues and Limitations

• There is an issue with the OSGi integration when the VaadinServlet is registered using HttpWhiteboard as it allows access to class files in the web app bundle. This is being fixed, but can be workaround for now by having application classes inside another bundle.

To see the list of all changes in 6.0, see changes since 5.0.
Changes since 6.0.0.beta1.