vaadin/flow 2.6.0.alpha1

Vaadin Flow 2.6.0.alpha1

on GitHub

Vaadin Flow 2.6.0.alpha1

New Features:

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.

Read more about Custom Theme in Vaadin documentation.

Custom team feature includes the following commits:

• ⧉ Create Flow plugins for webpack. PR:9295. Ticket:9283
  Moved stats file handling to a custom plugin. Added feature for copying custom Flow plugins for use with webpack.

• ⧉ Theme can be defined as string or class. PR:9349. Ticket:9281
  Add a string definition for theme that matches the "application theme" in the theme folder inside /frontend/theme/, loading the css automatically from there. This is based on Lumo theme, always. Change old class based theme to use themeClass for theme selection.

• ⧉ Do not allow themeClass and themeName in same annotation. PR:9389. Ticket:9370
  Theme Class and Theme Name is not supported in the same Theme annotation as theme name builds on the Lumo theme. test-themes is now for testing the Application theme only. Old theme test was moved into test-misc.

• ⧉ Only use one theme and fail for duplicates. PR:9406. Ticket:9383
  Now we only handle the theme with the name inside the Theme annotation.

• ⧉ Serve theme static files from VAADIN/static. PR:9451. Ticket:9405
  Static files in META-INF/VAADIN/static will now be served on request to VAADIN/static. Added new webpack loader that changes app theme css urls targeting ./ and ../ to be VAADIN/static/ instead. Where ../ can not go outside of the application theme folder.

• ⧉ Theme component with app theme.. PR:9418. Ticket:9348
  Added the feature that you can theme components with the app theme by creating a css file in 'frontend/theme/myTheme/components' with the component tag name e.g. 'my-field' should have 'my-field.css'

• ⧉ Enable adding assets from node_modules. PR:9495. Ticket:9468
  It is now possible to import resources from installed node_modules by adding the asset to theme/my-theme/theme.json

• ⧉ Resource handling to not need plugin copying. PR:9558
  Fixed the url handling so that theme resources get prepended with theme/[themeName] while having the correct absolute path. With this we can handle these url resources with the css-loader which in turn leads to file-loader gettign the files for copying. External url are still not touched in any way. part of #9410 and #9533

• ⧉ Document level npm css. PR:9559. Ticket:9533
  Now there is a possibility to use the "documentCss" key in theme.json to inject npm css into the document rool level element. This is mostly for embedded web components as they do not target document by default Have a full map on where the global css has been injected to so that if we add for shadow roots we don't add to document, but we are able to add to other shadow roots.

• ⧉ Check that npm resources are available. PR:9617. Ticket:9615
  Check that we have named npm resources available or throw an exception informing the user to install it using a NpmPackage annotation or manually with (p)npm i

• ⧉ Enable importing CSS from node_modules. PR:9543. Ticket:9410
  Enable using CSS files from installed node_modules by adding 'importCss' to theme/my-theme/theme.json.

• ⧉ Improved theme support in compatibility mode. PR:10181
  Throw exception if improved theme support is used in compatibility mode. Part of #9983

• ⧉ Embedded component appTheme support. PR:9588. Ticket:8564
  Add support for application theme with embedded components.

• ⧉ Enable having a parent theme (#9648). PR:10226. Ticket:9587
  It is now possible to extend a parent theme. This means adding to theme.json the key "parent" with the value of the target theme and then this will be loaded before the application's own theme.

Fixes:

• ⧉ Clean theme file if no theme defined. PR:9841. Ticket:9832
  Remove the theme.[js|d.ts] files if no theme is defined.

• ⧉ Only create needed folders. PR:9812
  When copying files for custom theme only create directories that contain file to be copied. Generate directories with mkdirp instead of fs.mkdir as it is more reliable.

• ⧉ Verify theme folder existence based on app-theme name in @theme. PR:9676
  Verify that themeFolder in Theme annotation

• ⧉ Resource is not available in java if not referenced in a CSS file. PR:9776. Ticket:9622
  Copies static resources from theme folder to a webpack output folder, so that to make them available from Java pages.

• ⧉ Recompile Webpack when adding a new CSS file to app theme. PR:9708. Ticket:9594
  Adding a new file to frontend/themes/my-theme now triggers Webpack recompilation and updates the application.

• ⧉ Add the missing otf font extension.. PR:9686. Ticket:9683
  The file-loader didn't handle otf extensions so having a otf font-face failed the build.

• ⧉ Generated theme.js is now named theme.generated.js. PR:9616. Ticket:9595
  my-theme.js is now generated as my-theme.generated.js # Conflicts: # .gitignore

• ⧉ Theme files can now be referenced as theme/theme-name. PR:9590. Tickets:9405, 9535
  Theme files are now copied under theme/[theme-name] and can be referenced by theme/them-name/path/file.ff even though they are located at VAADIN/static

• ⧉ File-loader name for windows execution. PR:9575
  Windows file path separator \ should not be used as it will result in %0B when it should be /

• ⧉ Avoid access to arbitrary resource via parent. PR:10356
  Checks whether the Url contains a directory change and a double encoding in Flow bundles resource handling servlet. Returns 403 Forbidden immediately and skip the request handling, if does.

• ⧉ Fix resource loading for embedded spring boot apps. PR:9743
  Loading from classpath resource should not start with '/' when Spring Boot is used.

• ⧉ Add polyfill for constructable stylesheets. PR:9489. Ticket:9488
  Add the constructable stylesheets polyfill so app theme also works with non chrome based browsers. # Conflicts: # flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java

• ⧉ Fix file system traversal of theme-loader to stop at root. PR:9505
  The theme-loader recursion for themeFolder should stop at the root level. Also if no theme folder found we should not spend time on replacement.

• ⧉ Workaround for possible bug in route registry (like #9360).
  Every route modification is done in try-catch block, and an exception will be caught so that it won't break registration of routes which can be registered (without specific data). Then an exception will be thrown in the end.

• ⧉ Avoid not-breaking exception on loading class from another bundle

• ⧉ Also load default JAR resources for DevModeInitializer. PR:9823. Ticket:9802
  Fixes the case when the theme JAR dependency is not being detected/loaded whenever used with SpringBoot application and is running from the main method.

• ⧉ Make OSGi ResourceProvider a nested private class

• ⧉ Avoid use servlet context classloader in ResourceProvider impl

• ⧉ Don't run servlet deployer logic if there is no Lookup. PR:10358
  Skips servlet deploy (ServletDeploy) if no Lookup found in the VaadinContext, which is usually happens for Non-Servlet 3.0 containers like Spring Boot.

Breaking Changes and Deprecations:

• com.vaadin.flow.client.ClientResources has been removed, as well as it's default implementation and util class. com.vaadin.flow.di.ResourceProvider should be used instead for accessing resources available at runtime from both the application classpath, or from bundles.

All changes since previous version