github vaadin/flow 24.4.0.beta1
Vaadin Flow 24.4.0.beta1
on GitHub

latest releases: 24.4.0.beta4, 23.3.31, 24.3.11...
pre-release21 days ago

All Changes since Vaadin Flow 24.3

Changes since 24.4.0.alpha32

New and Noteworthy Since Vaadin Flow 24.3:

  • 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

Breaking changes Since Vaadin 24.3:

Known Issues In Vaadin 24.4.0.beta1:

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:

  • Flow page title is not propagated to the top part of the app layout in a Hilla main layout
    Issue

  • Split Vaadin React components into free and commercial
    Issue

  • Move hilla-dev from vaadin to vaadin-spring-boot-starter artifact in Vaadin 24.4
    Issue

Check out latest releases or
releases around vaadin/flow 24.4.0.beta1

Don't miss a new flow release

NewReleases is sending notifications on new releases.

Get notifications