vaadin/flow 24.1.0.beta1

Vaadin Flow 24.1.0.beta1

on GitHub

Changes since 24.1.0.alpha8

All changes

This is a Flow 24.1 beta pre-release for Vaadin 24.1.

Flow 24.1 is based on Jakarta EE 10 / Servlet 6.0 specifications, uses Spring Framework 6 / Spring-boot 3 and requires JDK 17+.

Breaking changes

• Bump pnpm version to a supported versions (8.3.1)
  Commit · Pull request

  pnpm 8 dropped node 14 support which has no impact on Flow. There are changes to the lockfile and local store format but pnpm should upgrade or redownload as needed. pnpm 8.3.1 also works with Node 20

• Remove fallback chunk
  Commit · Pull request · Issue

  The fallback chunk contained all JavaScript and CSS for classes which cannot be reached from an entry point (route or exported web component). By removing it we improve performance as we do not need to scan all classes, only the reachable ones. We also fix issues with the license checker as it did not really know how to behave with commercial components that may or may not be used. The drawback of removing the fallback chunk is that if you are using a component which is not reachable, as determined by the scanner, then your JS/CSS for the component will be missing. The typical case for this is having a factory that can create components using reflection. The scanner is not able to find the referenced classes as they only appear as a string in the source code. For this case, you need to add @Uses(SomeComponent.class) to the factory, for each component it can create using reflection. To be able to detect unreachable components in development mode, you should set the devmode.optimizeBundle property to true.

• Move generated Flow files into frontend/generated/flow
  Commit · Pull request

  Removes the need for importing from the target folder and simplifies when all generated frontend files are in the same folder.

• Upgrade to TypeScript 5.0.2
  Commit · Pull request

• Remove compatibility mode from API
  Commit · Pull request

New features

• Pre-compiled production bundle
  The pre-compiled production bundle can be used to not have to run front-end tools like npm and Vite if no add-ons or front-end files are used in the application. Flow builds a new production bundle once it decides that pre-compiled bundle can't be used because of front-end customisations.
  Read more about pre-compiled production bundle in documentation draft, this is not a final version and can be modified before GA release.
  To be able to build a new production bundle, one can set force.production.build config parameter, e.g. when you want to lazy load the components to the browser or you experience an issues with pre-compiled bundle:

  • System property -Dforce.production.build=true
  • Configure vaadin-maven-plugin:

    <plugin>
       <groupId>com.vaadin</groupId>
       <artifactId>vaadin-maven-plugin</artifactId>
       <executions>
           <execution>
                <goals>
                     <goal>build-frontend</goal>
                </goals>
           </execution>
        </executions>
       <configuration>
            <forceProductionBuild>true</forceProductionBuild>
       </configuration>
    </plugin>
  

  Includes the following feature commits:

  • Use default prod bundle if possible
    Commit · Pull request · Issues [16627]. (#16627), 16671

    Re-uses re-bundle checker in production mode. Copies default bundle files from JAR to application's resource folder in target and skips re-bundling or executes usual frontend build codes if it sees any customisations. Uses class finder to look for frontend resources from flow plugin.

  • Task to clean generated frontend files
    Commit · Pull request · Issue

    When automatically generating a new frontend bundle clean any frontend files generated specifically for bundle generation. For production vite execution is not a task. Running pnpm will delete package-lock.json and running npm will remove package-lock.yaml

  • Store and use package-lock for bundle
    Commit · Pull request · Issue

    When making a bundle build if no package-lock file exists in project, use the dev bundle package-lock that is stored when a dev bundle is built. Acceptance order of lock files is: project lock, src/dev-bundle, jar bundle. Use constant in file name

  • Enable custom theme for pre-compiled prod bundle
    Commit · Pull request

  • Add usage statistics for pre-compiled production bundle
    Commit · Pull request

  • Add parameter to force prod build
    Commit · Pull request

    Add a parameter that forces a production bundle build even when an applicable bundle exists.

  • Add license check for production bundle
    Commit · Pull request

    Collect pro-components from stats.json which are used in the project and check license for those. Closes #16720

  • Make "" and "login" eager and the rest lazy by default
    Commit · Pull request

• Production bundle loading optimisations
  The production bundle can be optimised to use lazy loading of components (on demand, once the route/page is opened) by forcing a build of the production bundle. With the pre-compiled production bundle all components are loaded eagerly apart from the heavy components Map, Charts, Spreadsheet and RichTextEditor.

  Includes the following feature commits:

  • Support lazy loading of route dependencies
    Commit · Pull request

    Adds a @LoadDependenciesOnStartup annotation you can set on your AppShellConfigurator class to define for which routes the dependencies should be loaded eagerly when the application is first visited, e.g. @LoadDependenciesOnStartup(MyMainView.class) Defining only @LoadDependenciesOnStartup causes all dependencies to be loaded eagerly Not defining any @LoadDependenciesOnStartup annotation uses the Flow default, which currently is to load everything eagerly but is bound to be changed to load "" and "login" routes, if defined, eagerly and dependencies for the remaining views on demand. Also adds a @DependencyTrigger that overrides which class triggers loading of the dependencies for a route not loaded on startup. It is meant to be used internally to create the default production bundle. It is not meant for any other usage.

  • Include bundle size visualization for production build
    Commit · Pull request

    This is mostly useful for applications generated on start.spring.io. Different messages are shown for Flow and Hilla applications. Nothing changes in production and for applications already having some routes.

  • Require production bundle for annotation
    Commit · Pull request

    If the LoadDependenciesOnStartup annotation is added a production bundle should always be built.

• Show a more helpful page when opening an application without routes
  Commit · Pull request · Issue

• Deprecate Label and add NativeLabel as replacement
  Commit · Pull request · Issues 4384, 3532

  Adds NativeLabel as direct replacement for the HTML-based Label component / element.

• Watch for theme changes in other Maven modules
  Commit · Pull request

• Automatically use jar resource listener in a multimodule Maven project
  Commit · Pull request

• Allow listening to additional jar-resources folders
  Commit · Pull request

  This enables listening to src/main/resources/META-INF in another module in a multi module project so that live reload works for frontend resources Usage: vaadin.frontend.hotdeploy.dependencies=../relative-path-to-module-with-frontend-resources, ../possibly-another-module in application.properties or as a system property

• Added single and double click event listeners registration methods
  Commit · Pull request · Issue

  This change adds addSingleClickListener and addDoubleClickListener methods to the ClickNotifier interface to simplify the creation of specific listeners for click and double click events.

• Watch all active themes when in dev bundle mode
  Commit · Pull request

  Allows HMR to work also for themes in the jar-resources, if somebody updates them e.g. using a file watcher

• More eager cleanup for UIs using Beacon API
  Commit · Pull request

  Notifies server about closed UIs using a beacon request on pagehide event. At the same time unifies behaviour in certain edge cases, where Safari maintained the state when brought back from page cache. Previously Safari in some situations kept the state. Tested manually with Safari, Chrome, Firefox and validated results using VisualVM. Closes #6293

• Add feature flag for the SideNav component
  Commit · Pull request

• Warn about JavaScript that is not found in production
  Commit · Pull request

  If you at runtime use a component with @JsModule that refers to a url that was not included in the bundle even though it should have, this prints a warning like "The component class com.vaadin.flow.component.notification.Notification includes '@vaadin/notification/src/vaadin-notification.js' but this file was not included when creating the production bundle. The component will not work properly. Check that you have a reference to the component and that you are not using it only through reflection. If needed add a @Uses(Notification.class) where it is used."

• Enable skipping dev bundle rebuild
  Commit · Pull request

  Make it possible to skip checks for devBundle rebuild. Closes #16037

• HMR for changing styles injected into shadow roots
  Commit · Pull request

• HMR for theme styles.css in bundle mode
  Commit · Pull request

  Rewrites and inlines CSS imports so that changes to imported CSS files are also taken into account

• Make AtPush inherited
  Commit · Pull request · Issue

  Allows you to use a super class for configuration.

• Enable Vite HMR for theme styles
  Commit · Pull request

  At the moment only works when you do not inject the theme into shadow roots When changing component themes, a full reload is always needed because of how the theme injection is implemented in the components

• Add LocalDateTimeToInstantConverter (#16415)
  Commit · Pull request

  Adding LocalDateTimeToInstantConverter: There already is a LocalDateTimeToDateConverter but Instant is a newer, better replacement. Since your Converter already relies on Instant to calculate the Date I would appreciate it, if Instant is also supported. Tests and proper formatting were also added.

• Load theme using Vite
  Commit · Pull request

  This changes theme loading so that theme CSS files are imported using import 'theme/mytheme/styles.css'; Using this instead of import someCss from 'theme/mytheme/styles.css?inline'; // inject the css somehow into the DOM allows the default hot replace functionality of Vite to be used. Note that a followup PR is still needed to actually enable hot replace because the styles are still also loaded for shadow root injection, which currently prevents hot replace from being used. In production mode, Vite will now bundle the theme styles.css and put it in VAADIN/build/indexcss-something.css, which means that URLs that refer to files in src/main/webapp or similar need to be rewritten to use ../.. which cancel out VAADIN/build. Paths inside packaged themes also need to be rewritten the same way.

• Adds helper methods for commonly used CSS properties
  Commit · Pull request

  The current Style API is basically a wrapper for a string-string map. These helper methods make finding the correct property value easier for Java users and prevents making typos in the property names.

• Support ES-module applications
  Commit · Pull request

• Enable running npm ci mode (#15579)
  Commit · Pull request · Issue

  Adds possibility to install the npm packages using npm ci instead of npm install (or for pnpm: pnpm install --frozen-lockfile) to install the exact versions in the lock file. Can be enabled with ci.build parameter when executing a production mode frontend build.

• Add aria-labelledby API to HasAriaLabel
  Commit · Pull request

Fixes

• Suggest single goal for scaffolding Hilla apps
  Commit · Pull request

  A single Maven goal/Gradle task is suggested for Hilla, as the framework used depends on the contents of pom.xml/build.gradle.

• Propagate exception raised during stream write
  Commit

  If an exception is thrown, and then another exception is thrown when trying to close() the stream, the exception that gets propagated to the outside world is the bogus/meaningless close() exception, not the actual root cause exception. This makes debugging much harder because the root cause exception is being completely lost.

• Compatibility with CookieCsrfTokenRepository in Spring Security
  Commit · Pull request · Issue

• Store and reuse index.html modifications for dev bundles
  Commit · Pull request · Issue

• Import theme for exported wc from correct path
  Commit · Pull request