feat: Use RoutesBuilder API

.github/workflows/validate.yml

@@ -1,7 +1,7 @@
 name: Verify
 on:
   push:
-    branches: [v24]
+    branches: [v24.4]
   workflow_dispatch:
   pull_request:
 permissions:
@@ -13,7 +13,7 @@ jobs:
       # for EnricoMi/publish-unit-test-result-action
       issues: read
       checks: write
-      pull-requests: write 
+      pull-requests: write
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -28,7 +28,7 @@ jobs:
           TBL=${{ secrets.TB_LICENSE }}
           [ -z "$TBL" ] && echo "No TB license provided" && exit 1
           mkdir -p ~/.vaadin/
-          echo '{"username":"'`echo $TBL | cut -d / -f1`'","proKey":"'`echo $TBL | cut -d / -f2`'"}' > ~/.vaadin/proKey          
+          echo '{"username":"'`echo $TBL | cut -d / -f1`'","proKey":"'`echo $TBL | cut -d / -f2`'"}' > ~/.vaadin/proKey
       - uses: actions/cache@v3
         with:
           path: ~/.m2/repository
@@ -37,7 +37,7 @@ jobs:
       - uses: browser-actions/setup-chrome@latest
         with:
           chrome-version: stable
-      - uses: nanasess/setup-chromedriver@master          
+      - uses: nanasess/setup-chromedriver@master
       - name: Verify
         run: |
           mvn -B -V -ntp verify -Dcom.vaadin.testbench.Parameters.headless -Pit,production
@@ -46,4 +46,4 @@ jobs:
         with:
           files: "**/target/*-reports/TEST*.xml"
           check_run_annotations: all tests, skipped tests
-          check_run_annotations_branch: v24
+          check_run_annotations_branch: v24.4

README.md

@@ -47,8 +47,8 @@ Vaadin web applications are full-stack and include both client-side and server-s
 |     `themes/`                             | Application theme sources          |
 |     `util/`                               | Util scripts                       |
 |     `views/`                              | UI views in React/TypeScript       |
-|         `$layout.tsx` | Layout/Menu for other views        |
-|         `index.tsx`   | Public Hilla view                  |
+|         `@layout.tsx` | Layout/Menu for other views        |
+|         `@index.tsx`  | Public Hilla view                  |
 |         `about.tsx`   | Hilla view for authenticated users |
 |         `hilla.tsx`   | Hilla view for 'USER'              |
 |     `index.html`                          | HTML template                      |

package.json

@@ -4,23 +4,23 @@
   "type": "module",
   "dependencies": {
     "@polymer/polymer": "3.5.1",
-    "@vaadin/bundles": "24.4.0-alpha17",
+    "@vaadin/bundles": "24.4.0-alpha19",
     "@vaadin/common-frontend": "0.0.19",
-    "@vaadin/hilla-file-router": "24.4.0-alpha15",
-    "@vaadin/hilla-frontend": "24.4.0-alpha15",
-    "@vaadin/hilla-lit-form": "24.4.0-alpha15",
-    "@vaadin/hilla-react-auth": "24.4.0-alpha15",
-    "@vaadin/hilla-react-crud": "24.4.0-alpha15",
-    "@vaadin/hilla-react-form": "24.4.0-alpha15",
-    "@vaadin/hilla-react-i18n": "24.4.0-alpha15",
-    "@vaadin/hilla-react-signals": "24.4.0-alpha15",
-    "@vaadin/polymer-legacy-adapter": "24.4.0-alpha17",
-    "@vaadin/react-components": "24.4.0-alpha17",
+    "@vaadin/hilla-file-router": "24.4.0-alpha21",
+    "@vaadin/hilla-frontend": "24.4.0-alpha21",
+    "@vaadin/hilla-lit-form": "24.4.0-alpha21",
+    "@vaadin/hilla-react-auth": "24.4.0-alpha21",
+    "@vaadin/hilla-react-crud": "24.4.0-alpha21",
+    "@vaadin/hilla-react-form": "24.4.0-alpha21",
+    "@vaadin/hilla-react-i18n": "24.4.0-alpha21",
+    "@vaadin/hilla-react-signals": "24.4.0-alpha21",
+    "@vaadin/polymer-legacy-adapter": "24.4.0-alpha19",
+    "@vaadin/react-components": "24.4.0-alpha19",
     "@vaadin/router": "1.7.5",
     "@vaadin/vaadin-development-mode-detector": "2.0.6",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha17",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha17",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha17",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha19",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha19",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha19",
     "@vaadin/vaadin-usage-statistics": "2.1.2",
     "construct-style-sheets-polyfill": "3.1.0",
     "date-fns": "2.29.3",
@@ -31,29 +31,29 @@
     "react-router-dom": "6.22.3"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7",
+    "@babel/preset-react": "7.24.1",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/pluginutils": "5.1.0",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.21",
-    "@vaadin/hilla-generator-cli": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-core": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha15",
-    "@vaadin/hilla-generator-utils": "24.4.0-alpha15",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.24",
+    "@vaadin/hilla-generator-cli": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-core": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha21",
+    "@vaadin/hilla-generator-utils": "24.4.0-alpha21",
     "@vitejs/plugin-react": "4.2.1",
     "async": "3.2.5",
-    "glob": "10.3.10",
+    "glob": "10.3.12",
     "rollup-plugin-brotli": "3.1.0",
     "rollup-plugin-visualizer": "5.12.0",
     "strip-css-comments": "5.0.0",
     "transform-ast": "2.4.4",
-    "typescript": "5.4.2",
-    "vite": "5.1.6",
+    "typescript": "5.4.4",
+    "vite": "5.2.8",
     "vite-plugin-checker": "0.6.4",
     "workbox-build": "7.0.0",
     "workbox-core": "7.0.0",
@@ -62,23 +62,23 @@
   "vaadin": {
     "dependencies": {
       "@polymer/polymer": "3.5.1",
-      "@vaadin/bundles": "24.4.0-alpha17",
+      "@vaadin/bundles": "24.4.0-alpha19",
       "@vaadin/common-frontend": "0.0.19",
-      "@vaadin/hilla-file-router": "24.4.0-alpha15",
-      "@vaadin/hilla-frontend": "24.4.0-alpha15",
-      "@vaadin/hilla-lit-form": "24.4.0-alpha15",
-      "@vaadin/hilla-react-auth": "24.4.0-alpha15",
-      "@vaadin/hilla-react-crud": "24.4.0-alpha15",
-      "@vaadin/hilla-react-form": "24.4.0-alpha15",
-      "@vaadin/hilla-react-i18n": "24.4.0-alpha15",
-      "@vaadin/hilla-react-signals": "24.4.0-alpha15",
-      "@vaadin/polymer-legacy-adapter": "24.4.0-alpha17",
-      "@vaadin/react-components": "24.4.0-alpha17",
+      "@vaadin/hilla-file-router": "24.4.0-alpha21",
+      "@vaadin/hilla-frontend": "24.4.0-alpha21",
+      "@vaadin/hilla-lit-form": "24.4.0-alpha21",
+      "@vaadin/hilla-react-auth": "24.4.0-alpha21",
+      "@vaadin/hilla-react-crud": "24.4.0-alpha21",
+      "@vaadin/hilla-react-form": "24.4.0-alpha21",
+      "@vaadin/hilla-react-i18n": "24.4.0-alpha21",
+      "@vaadin/hilla-react-signals": "24.4.0-alpha21",
+      "@vaadin/polymer-legacy-adapter": "24.4.0-alpha19",
+      "@vaadin/react-components": "24.4.0-alpha19",
       "@vaadin/router": "1.7.5",
       "@vaadin/vaadin-development-mode-detector": "2.0.6",
-      "@vaadin/vaadin-lumo-styles": "24.4.0-alpha17",
-      "@vaadin/vaadin-material-styles": "24.4.0-alpha17",
-      "@vaadin/vaadin-themable-mixin": "24.4.0-alpha17",
+      "@vaadin/vaadin-lumo-styles": "24.4.0-alpha19",
+      "@vaadin/vaadin-material-styles": "24.4.0-alpha19",
+      "@vaadin/vaadin-themable-mixin": "24.4.0-alpha19",
       "@vaadin/vaadin-usage-statistics": "2.1.2",
       "construct-style-sheets-polyfill": "3.1.0",
       "date-fns": "2.29.3",
@@ -89,35 +89,35 @@
       "react-router-dom": "6.22.3"
     },
     "devDependencies": {
-      "@babel/preset-react": "^7",
+      "@babel/preset-react": "7.24.1",
       "@rollup/plugin-replace": "5.0.5",
       "@rollup/pluginutils": "5.1.0",
-      "@types/react": "18.2.64",
-      "@types/react-dom": "18.2.21",
-      "@vaadin/hilla-generator-cli": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-core": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha15",
-      "@vaadin/hilla-generator-utils": "24.4.0-alpha15",
+      "@types/react": "18.2.74",
+      "@types/react-dom": "18.2.24",
+      "@vaadin/hilla-generator-cli": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-core": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha21",
+      "@vaadin/hilla-generator-utils": "24.4.0-alpha21",
       "@vitejs/plugin-react": "4.2.1",
       "async": "3.2.5",
-      "glob": "10.3.10",
+      "glob": "10.3.12",
       "rollup-plugin-brotli": "3.1.0",
       "rollup-plugin-visualizer": "5.12.0",
       "strip-css-comments": "5.0.0",
       "transform-ast": "2.4.4",
-      "typescript": "5.4.2",
-      "vite": "5.1.6",
+      "typescript": "5.4.4",
+      "vite": "5.2.8",
       "vite-plugin-checker": "0.6.4",
       "workbox-build": "7.0.0",
       "workbox-core": "7.0.0",
       "workbox-precaching": "7.0.0"
     },
-    "hash": "14b0af69cef053b610020cef2a642f6cf5c00c7f758fbfadeea64a7c93c65d5b"
+    "hash": "77239bbc54a45d83b2a88bb2844736fd850436620e92081675affe96f66fef7c"
   },
   "overrides": {
     "@vaadin/bundles": "$@vaadin/bundles",
@@ -132,8 +132,10 @@
     "@vaadin/hilla-react-auth": "$@vaadin/hilla-react-auth",
     "react": "$react",
     "@vaadin/hilla-react-crud": "$@vaadin/hilla-react-crud",
+    "@vaadin/hilla-file-router": "$@vaadin/hilla-file-router",
     "construct-style-sheets-polyfill": "$construct-style-sheets-polyfill",
     "react-router-dom": "$react-router-dom",
+    "@vaadin/hilla-react-i18n": "$@vaadin/hilla-react-i18n",
     "lit": "$lit",
     "@polymer/polymer": "$@polymer/polymer",
     "@vaadin/hilla-lit-form": "$@vaadin/hilla-lit-form",
@@ -143,8 +145,6 @@
     "proj4": "$proj4",
     "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
     "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles",
-    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles",
-    "@vaadin/hilla-file-router": "$@vaadin/hilla-file-router",
-    "@vaadin/hilla-react-i18n": "$@vaadin/hilla-react-i18n"
+    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles"
   }
 }

pom.xml

@@ -11,7 +11,7 @@
 
     <properties>
         <java.version>17</java.version>
-        <vaadin.version>24.4.0.alpha17</vaadin.version>
+        <vaadin.version>24.4.0.alpha21</vaadin.version>
     </properties>
 
     <parent>

src/main/frontend/index.tsx

@@ -2,7 +2,7 @@ import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { AuthProvider} from "./auth";
-import router from 'Frontend/routes.js';
+import { router } from 'Frontend/routes.js';
 
 function App() {
     return (

src/main/frontend/routes.tsx

@@ -1,24 +1,13 @@
-import { createBrowserRouter, RouteObject } from 'react-router-dom';
-import { buildRoute } from "Frontend/generated/flow/Flow";
-import Layout from "Frontend/views/$layout";
-import Hilla from "Frontend/views/hilla";
-import About from "Frontend/views/about";
+import Flow from 'Frontend/generated/flow/Flow';
+import fileRoutes from 'Frontend/generated/file-routes';
 import Login from "Frontend/views/login";
-import {protectRoutes} from "@vaadin/hilla-react-auth";
-import Public from "Frontend/views/$index";
+import {RouterConfigurationBuilder} from "@vaadin/hilla-file-router/runtime.js";
 
-let routing = protectRoutes([
-    {
-        element: <Layout />,
-        handle: { title: 'Main' },
-        children: [
-            { path: '/', element: <Public />, handle: { title: 'Public', requiresLogin: false } },
-            { path: '/about', element: <About />, handle: { title: 'Welcome', requiresLogin: true } },
-            { path: '/hilla', element: <Hilla />, handle: { title: 'Hilla', rolesAllowed: ['ROLE_USER'] } }
-        ],
-    },
-    { path: '/login', element: <Login />, handle: { title: 'Login' } }
-]) as RouteObject[];
-export const routes = buildRoute(routing, routing[0].children);
-
-export default createBrowserRouter(routes);
+export const { routes, router} = new RouterConfigurationBuilder()
+    .withFileRoutes(fileRoutes)
+    .withReactRoutes(
+        { path: '/login', element: <Login />, handle: { title: 'Login' } }
+    )
+    .withFallback(Flow)
+    .protect('/login')
+    .build();

src/main/frontend/views/about.tsx

@@ -1,4 +1,9 @@
 import { VerticalLayout } from "@vaadin/react-components/VerticalLayout.js";
+import type {ViewConfig} from "@vaadin/hilla-file-router/types.js";
+
+export const config: ViewConfig = {
+    loginRequired: true
+};
 
 /**
  * Hilla views that allows access only for authenticated users.

src/main/frontend/views/hilla.tsx

@@ -3,6 +3,12 @@ import { TextField } from "@vaadin/react-components/TextField.js";
 import { HelloEndpoint } from "Frontend/generated/endpoints";
 import { useState } from "react";
 import {VerticalLayout} from "@vaadin/react-components/VerticalLayout.js";
+import type {ViewConfig} from "@vaadin/hilla-file-router/types.js";
+
+export const config: ViewConfig = {
+    loginRequired: true,
+    rolesAllowed: ['ROLE_USER'],
+};
 
 /**
  * Hilla view that allows access only for users with a role 'USER'