Update to Hilla 24

.gitignore

@@ -45,5 +45,5 @@ out/
 /backend/src/main/resources/static/
 /docker/docker-compose.yml
 /.gameyfin/
-/frontend/generated
+/src/main/frontend/generated/
 /db/

.run/GameyfinApplication.run.xml

@@ -2,6 +2,7 @@
   <configuration default="false" name="GameyfinApplication" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
     <option name="ACTIVE_PROFILES" value="dev" />
     <module name="gameyfin.main" />
+    <option name="SHORTEN_COMMAND_LINE" value="ARGS_FILE" />
     <option name="SPRING_BOOT_MAIN_CLASS" value="de.grimsi.gameyfin.GameyfinApplication" />
     <extension name="coverage">
       <pattern>

.run/Generate Hilla sources.run.xml

@@ -4,7 +4,7 @@
       <option name="executionName" />
       <option name="externalProjectPath" value="$PROJECT_DIR$" />
       <option name="externalSystemIdString" value="GRADLE" />
-      <option name="scriptParameters" value="" />
+      <option name="scriptParameters" value="--stacktrace" />
       <option name="taskDescriptions">
         <list />
       </option>

build.gradle.kts

@@ -1,10 +1,15 @@
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
+val springCloudVersion by extra("2023.0.3")
+val vaadinVersion by extra("24.4.5")
+
 plugins {
-    val kotlinVersion = "2.0.0"
-    id("org.springframework.boot") version "3.3.0"
-    id("io.spring.dependency-management") version "1.1.5"
-    id("dev.hilla") version "2.5.6"
+    val kotlinVersion = "2.0.10"
+    val vaadinVersion = "24.4.5"
+
+    id("org.springframework.boot") version "3.3.2"
+    id("io.spring.dependency-management") version "1.1.6"
+    id("com.vaadin") version vaadinVersion
     kotlin("jvm") version kotlinVersion
     kotlin("plugin.spring") version kotlinVersion
     kotlin("plugin.jpa") version kotlinVersion
@@ -34,9 +39,6 @@ repositories {
     }
 }
 
-extra["hillaVersion"] = "2.5.6"
-val springCloudVersion by extra("2023.0.2")
-
 dependencies {
     // Spring Boot & Kotlin
     implementation("org.springframework.boot:spring-boot-starter-actuator")
@@ -46,9 +48,9 @@ dependencies {
     implementation("jakarta.validation:jakarta.validation-api:3.0.2")
     implementation("org.jetbrains.kotlin:kotlin-reflect")
 
-    // Hilla
-    api("dev.hilla:hilla-react")
-    api("dev.hilla:hilla-spring-boot-starter")
+    // Vaadin Hilla
+    implementation("com.vaadin:vaadin")
+    api("com.vaadin:vaadin-spring-boot-starter")
 
     // Logging
     implementation("io.github.oshai:kotlin-logging-jvm:6.0.3")
@@ -69,7 +71,7 @@ dependencies {
 
 dependencyManagement {
     imports {
-        mavenBom("dev.hilla:hilla-bom:${property("hillaVersion")}")
+        mavenBom("com.vaadin:vaadin-bom:$vaadinVersion")
         mavenBom("org.springframework.cloud:spring-cloud-dependencies:$springCloudVersion")
     }
 }

nextui.ts

@@ -1,5 +1,5 @@
 import {NextUIPluginConfig} from "@nextui-org/react";
-import {compileThemes, themes} from "./frontend/theming/themes"
+import {compileThemes, themes} from "./src/main/frontend/theming/themes"
 
 export const NextUIConfig: NextUIPluginConfig = {
     prefix: "gf",

package.json

@@ -3,96 +3,94 @@
   "version": "2.0.0-ALPHA",
   "type": "module",
   "dependencies": {
-    "@hilla/form": "2.5.6",
-    "@hilla/frontend": "2.5.6",
-    "@hilla/generator-typescript-cli": "2.5.6",
-    "@hilla/generator-typescript-core": "2.5.6",
-    "@hilla/generator-typescript-plugin-backbone": "2.5.6",
-    "@hilla/generator-typescript-plugin-barrel": "2.5.6",
-    "@hilla/generator-typescript-plugin-client": "2.5.6",
-    "@hilla/generator-typescript-plugin-model": "2.5.6",
-    "@hilla/generator-typescript-plugin-push": "2.5.6",
-    "@hilla/generator-typescript-plugin-subtypes": "2.5.6",
-    "@hilla/generator-typescript-utils": "2.5.6",
-    "@hilla/react-auth": "2.5.6",
-    "@hilla/react-components": "2.3.0",
-    "@hilla/react-crud": "2.5.6",
-    "@hilla/react-form": "2.5.6",
     "@material-tailwind/react": "^2.1.9",
-    "@nextui-org/react": "^2.3.6",
-    "@phosphor-icons/react": "^2.0.15",
+    "@nextui-org/react": "^2.4.6",
+    "@phosphor-icons/react": "^2.1.7",
     "@polymer/polymer": "3.5.1",
-    "@vaadin/bundles": "24.3.0",
+    "@vaadin/bundles": "24.4.1",
     "@vaadin/common-frontend": "0.0.19",
+    "@vaadin/hilla-file-router": "24.4.3",
+    "@vaadin/hilla-frontend": "24.4.3",
+    "@vaadin/hilla-lit-form": "24.4.3",
+    "@vaadin/hilla-react-auth": "24.4.3",
+    "@vaadin/hilla-react-crud": "24.4.3",
+    "@vaadin/hilla-react-form": "24.4.3",
+    "@vaadin/hilla-react-i18n": "24.4.3",
+    "@vaadin/hilla-react-signals": "24.4.3",
+    "@vaadin/polymer-legacy-adapter": "24.4.1",
+    "@vaadin/react-components": "24.4.1",
+    "@vaadin/react-components-pro": "24.4.1",
     "@vaadin/router": "1.7.5",
+    "@vaadin/vaadin-development-mode-detector": "2.0.7",
+    "@vaadin/vaadin-lumo-styles": "24.4.1",
+    "@vaadin/vaadin-material-styles": "24.4.1",
+    "@vaadin/vaadin-themable-mixin": "24.4.1",
+    "@vaadin/vaadin-usage-statistics": "2.1.2",
     "class-variance-authority": "^0.7.0",
-    "classnames": "^2.3.2",
-    "clsx": "^2.1.0",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "construct-style-sheets-polyfill": "3.1.0",
-    "formik": "^2.4.5",
-    "framer-motion": "^11.1.7",
+    "date-fns": "2.29.3",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.3.28",
     "http-status-codes": "^2.3.0",
-    "lit": "3.1.0",
+    "lit": "3.1.4",
     "next-themes": "^0.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.2",
-    "sonner": "^1.4.41",
-    "tailwind-merge": "^2.3.0",
+    "proj4": "2.11.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.23.1",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@lit-labs/react": "^1.1.0",
-    "@rollup/plugin-replace": "5.0.4",
-    "@rollup/pluginutils": "5.0.5",
-    "@types/node": "^20.12.2",
-    "@types/react": "18.2.42",
-    "@types/react-dom": "^18.0.8",
-    "@vitejs/plugin-react": "4.2.0",
-    "@vitejs/plugin-react-swc": "3.5.0",
-    "async": "3.2.4",
-    "autoprefixer": "^10.4.18",
-    "glob": "10.3.3",
-    "postcss": "^8.4.35",
+    "@babel/preset-react": "7.24.7",
+    "@lit-labs/react": "^2.1.3",
+    "@rollup/plugin-replace": "5.0.7",
+    "@rollup/pluginutils": "5.1.0",
+    "@types/node": "^22.4.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@vaadin/hilla-generator-cli": "24.4.3",
+    "@vaadin/hilla-generator-core": "24.4.3",
+    "@vaadin/hilla-generator-plugin-backbone": "24.4.3",
+    "@vaadin/hilla-generator-plugin-barrel": "24.4.3",
+    "@vaadin/hilla-generator-plugin-client": "24.4.3",
+    "@vaadin/hilla-generator-plugin-model": "24.4.3",
+    "@vaadin/hilla-generator-plugin-push": "24.4.3",
+    "@vaadin/hilla-generator-plugin-subtypes": "24.4.3",
+    "@vaadin/hilla-generator-utils": "24.4.3",
+    "@vitejs/plugin-react": "4.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "async": "3.2.5",
+    "autoprefixer": "^10.4.20",
+    "glob": "10.4.1",
+    "postcss": "^8.4.41",
     "postcss-import": "^16.1.0",
     "rollup-plugin-brotli": "3.1.0",
-    "rollup-plugin-visualizer": "5.9.2",
+    "rollup-plugin-visualizer": "5.12.0",
     "strip-css-comments": "5.0.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.10",
     "transform-ast": "2.4.4",
-    "typescript": "5.3.3",
-    "vite": "5.0.6",
-    "vite-plugin-checker": "0.6.2",
-    "workbox-build": "7.0.0",
-    "workbox-core": "7.0.0",
-    "workbox-precaching": "7.0.0"
+    "typescript": "5.4.5",
+    "vite": "5.3.3",
+    "vite-plugin-checker": "0.6.4",
+    "workbox-build": "7.1.1",
+    "workbox-core": "7.1.0",
+    "workbox-precaching": "7.1.0"
   },
   "overrides": {
     "classnames": "$classnames",
     "react": "$react",
-    "react-dom": "$react-dom",
+    "react-dom": "18.3.1",
     "react-router-dom": "$react-router-dom",
     "@vaadin/bundles": "$@vaadin/bundles",
-    "@hilla/react-components": "$@hilla/react-components",
     "@vaadin/common-frontend": "$@vaadin/common-frontend",
     "construct-style-sheets-polyfill": "$construct-style-sheets-polyfill",
     "lit": "$lit",
     "@vaadin/router": "$@vaadin/router",
     "@polymer/polymer": "$@polymer/polymer",
-    "@hilla/react-auth": "$@hilla/react-auth",
-    "@hilla/generator-typescript-plugin-model": "$@hilla/generator-typescript-plugin-model",
-    "@hilla/generator-typescript-plugin-barrel": "$@hilla/generator-typescript-plugin-barrel",
-    "@hilla/react-form": "$@hilla/react-form",
-    "@hilla/generator-typescript-plugin-push": "$@hilla/generator-typescript-plugin-push",
-    "@hilla/generator-typescript-core": "$@hilla/generator-typescript-core",
-    "@hilla/generator-typescript-plugin-client": "$@hilla/generator-typescript-plugin-client",
-    "@hilla/generator-typescript-utils": "$@hilla/generator-typescript-utils",
-    "@hilla/frontend": "$@hilla/frontend",
-    "@hilla/form": "$@hilla/form",
-    "@hilla/generator-typescript-plugin-subtypes": "$@hilla/generator-typescript-plugin-subtypes",
-    "@hilla/react-crud": "$@hilla/react-crud",
-    "@hilla/generator-typescript-plugin-backbone": "$@hilla/generator-typescript-plugin-backbone",
-    "@hilla/generator-typescript-cli": "$@hilla/generator-typescript-cli",
     "@phosphor-icons/react": "$@phosphor-icons/react",
     "formik": "$formik",
     "yup": "$yup",
@@ -104,50 +102,85 @@
     "framer-motion": "$framer-motion",
     "@material-tailwind/react": "$@material-tailwind/react",
     "sonner": "$sonner",
-    "http-status-codes": "$http-status-codes"
+    "http-status-codes": "$http-status-codes",
+    "@vaadin/polymer-legacy-adapter": "$@vaadin/polymer-legacy-adapter",
+    "@vaadin/vaadin-development-mode-detector": "$@vaadin/vaadin-development-mode-detector",
+    "@vaadin/vaadin-usage-statistics": "$@vaadin/vaadin-usage-statistics",
+    "@vaadin/react-components": "$@vaadin/react-components",
+    "@vaadin/react-components-pro": "$@vaadin/react-components-pro",
+    "@vaadin/hilla-frontend": "$@vaadin/hilla-frontend",
+    "@vaadin/hilla-react-auth": "$@vaadin/hilla-react-auth",
+    "@vaadin/hilla-react-crud": "$@vaadin/hilla-react-crud",
+    "@vaadin/hilla-file-router": "$@vaadin/hilla-file-router",
+    "@vaadin/hilla-react-i18n": "$@vaadin/hilla-react-i18n",
+    "@vaadin/hilla-lit-form": "$@vaadin/hilla-lit-form",
+    "@vaadin/hilla-react-form": "$@vaadin/hilla-react-form",
+    "@vaadin/hilla-react-signals": "$@vaadin/hilla-react-signals",
+    "date-fns": "$date-fns",
+    "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": {
     "dependencies": {
-      "@hilla/form": "2.5.6",
-      "@hilla/frontend": "2.5.6",
-      "@hilla/generator-typescript-cli": "2.5.6",
-      "@hilla/generator-typescript-core": "2.5.6",
-      "@hilla/generator-typescript-plugin-backbone": "2.5.6",
-      "@hilla/generator-typescript-plugin-barrel": "2.5.6",
-      "@hilla/generator-typescript-plugin-client": "2.5.6",
-      "@hilla/generator-typescript-plugin-model": "2.5.6",
-      "@hilla/generator-typescript-plugin-push": "2.5.6",
-      "@hilla/generator-typescript-plugin-subtypes": "2.5.6",
-      "@hilla/generator-typescript-utils": "2.5.6",
-      "@hilla/react-auth": "2.5.6",
-      "@hilla/react-components": "2.3.0",
-      "@hilla/react-crud": "2.5.6",
-      "@hilla/react-form": "2.5.6",
       "@polymer/polymer": "3.5.1",
-      "@vaadin/bundles": "24.3.0",
+      "@vaadin/bundles": "24.4.1",
       "@vaadin/common-frontend": "0.0.19",
+      "@vaadin/hilla-file-router": "24.4.3",
+      "@vaadin/hilla-frontend": "24.4.3",
+      "@vaadin/hilla-lit-form": "24.4.3",
+      "@vaadin/hilla-react-auth": "24.4.3",
+      "@vaadin/hilla-react-crud": "24.4.3",
+      "@vaadin/hilla-react-form": "24.4.3",
+      "@vaadin/hilla-react-i18n": "24.4.3",
+      "@vaadin/hilla-react-signals": "24.4.3",
+      "@vaadin/polymer-legacy-adapter": "24.4.1",
+      "@vaadin/react-components": "24.4.1",
+      "@vaadin/react-components-pro": "24.4.1",
       "@vaadin/router": "1.7.5",
+      "@vaadin/vaadin-development-mode-detector": "2.0.7",
+      "@vaadin/vaadin-lumo-styles": "24.4.1",
+      "@vaadin/vaadin-material-styles": "24.4.1",
+      "@vaadin/vaadin-themable-mixin": "24.4.1",
+      "@vaadin/vaadin-usage-statistics": "2.1.2",
       "construct-style-sheets-polyfill": "3.1.0",
-      "lit": "3.1.0"
+      "date-fns": "2.29.3",
+      "lit": "3.1.4",
+      "proj4": "2.11.0",
+      "react": "18.3.1",
+      "react-dom": "18.3.1",
+      "react-router-dom": "6.23.1"
     },
     "devDependencies": {
-      "@rollup/plugin-replace": "5.0.4",
-      "@rollup/pluginutils": "5.0.5",
-      "@vitejs/plugin-react": "4.2.0",
-      "@vitejs/plugin-react-swc": "3.5.0",
-      "async": "3.2.4",
-      "glob": "10.3.3",
+      "@babel/preset-react": "7.24.7",
+      "@rollup/plugin-replace": "5.0.7",
+      "@rollup/pluginutils": "5.1.0",
+      "@types/react": "18.3.3",
+      "@types/react-dom": "18.3.0",
+      "@vaadin/hilla-generator-cli": "24.4.3",
+      "@vaadin/hilla-generator-core": "24.4.3",
+      "@vaadin/hilla-generator-plugin-backbone": "24.4.3",
+      "@vaadin/hilla-generator-plugin-barrel": "24.4.3",
+      "@vaadin/hilla-generator-plugin-client": "24.4.3",
+      "@vaadin/hilla-generator-plugin-model": "24.4.3",
+      "@vaadin/hilla-generator-plugin-push": "24.4.3",
+      "@vaadin/hilla-generator-plugin-subtypes": "24.4.3",
+      "@vaadin/hilla-generator-utils": "24.4.3",
+      "@vitejs/plugin-react": "4.3.1",
+      "async": "3.2.5",
+      "glob": "10.4.1",
       "rollup-plugin-brotli": "3.1.0",
-      "rollup-plugin-visualizer": "5.9.2",
+      "rollup-plugin-visualizer": "5.12.0",
       "strip-css-comments": "5.0.0",
       "transform-ast": "2.4.4",
-      "typescript": "5.3.3",
-      "vite": "5.0.6",
-      "vite-plugin-checker": "0.6.2",
-      "workbox-build": "7.0.0",
-      "workbox-core": "7.0.0",
-      "workbox-precaching": "7.0.0"
+      "typescript": "5.4.5",
+      "vite": "5.3.3",
+      "vite-plugin-checker": "0.6.4",
+      "workbox-build": "7.1.1",
+      "workbox-core": "7.1.0",
+      "workbox-precaching": "7.1.0"
     },
-    "hash": "e078b3ecf381b7be4b804c8e2cd928faa9accb3412cfb55cfb649f9633cd1d41"
+    "hash": "3cde6bb06b49097b3e1b82b0ef939d58f6b445ea03b5e0bee9b1b90bc4d61334"
   }
 }

settings.gradle.kts

@@ -1 +1 @@
-rootProject.name = "gameyfin"
+rootProject.name = "gameyfin"

src/main/frontend/components/wizard/Wizard.tsx

@@ -49,17 +49,23 @@ const Wizard = ({children, initialValues, onSubmit}: {
             /*// @ts-ignore*/
             validationSchema={step.props.validationSchema}
         >
-            {formik => (
+            {(formik: { values: any; isSubmitting: any; }) => (
                 <Form className="flex flex-col h-full">
                     <div className="w-full mb-8">
                         {/*<p>Step {stepNumber + 1} of {steps.length}</p>*/}
                         <Stepper activeStep={stepNumber} activeLineClassName="bg-primary"
-                                 lineClassName="bg-foreground">
+                                 lineClassName="bg-foreground"
+                                 placeholder={undefined}
+                                 onPointerEnterCapture={undefined}
+                                 onPointerLeaveCapture={undefined}>
                             {steps.map((child, index) => (
                                 <Step key={index}
                                       className="bg-foreground text-background"
                                       activeClassName="bg-primary"
-                                      completedClassName="bg-primary">
+                                      completedClassName="bg-primary"
+                                      placeholder={undefined}
+                                      onPointerEnterCapture={undefined}
+                                      onPointerLeaveCapture={undefined}>
                                     {/*@ts-ignore*/}
                                     {child.props.icon}
                                 </Step>

src/main/frontend/routes.tsx

@@ -1,4 +1,4 @@
-import {protectRoutes} from '@hilla/react-auth';
+import {protectRoutes} from '@vaadin/hilla-react-auth';
 import {createBrowserRouter, RouteObject} from 'react-router-dom';
 import LoginView from "Frontend/views/LoginView";
 import MainLayout from "Frontend/views/MainLayout";

src/main/frontend/util/auth.ts

@@ -1,4 +1,4 @@
-import {configureAuth} from '@hilla/react-auth';
+import {configureAuth} from '@vaadin/hilla-react-auth';
 import {UserEndpoint} from 'Frontend/generated/endpoints';
 
 // Configure auth to use `UserInfoService.getUserInfo`

src/main/frontend/util/middleware.ts

@@ -1,4 +1,4 @@
-import {Middleware, MiddlewareContext, MiddlewareNext} from '@hilla/frontend';
+import {Middleware, MiddlewareContext, MiddlewareNext} from '@vaadin/hilla-frontend';
 import {toast} from "sonner";
 import {getReasonPhrase} from "http-status-codes";
 

src/main/frontend/views/MainLayout.tsx

@@ -3,7 +3,7 @@ import {useEffect} from 'react';
 import ProfileMenu from "Frontend/components/ProfileMenu";
 import {Divider, Link, Navbar, NavbarBrand, NavbarContent, NavbarItem} from "@nextui-org/react";
 import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
-import * as PackageJson from "../../package.json";
+import * as PackageJson from "../../../../package.json";
 import {Outlet, useNavigate} from "react-router-dom";
 
 export default function MainLayout() {

src/main/frontend/views/TestView.tsx

@@ -1,7 +1,7 @@
 import {Link} from "react-router-dom";
 import {Button} from "@nextui-org/react";
 import {toast} from "sonner";
-import {SystemEndpoint} from "Frontend/generated/endpoints";
+import {SystemEndpoint} from "Frontend/generated/endpoints.js";
 
 export default function TestView() {
     return (
@@ -14,7 +14,8 @@ export default function TestView() {
                             description: "Description",
                             action: {
                                 label: "OK",
-                                onClick: () => {},
+                                onClick: () => {
+                                },
                             }
                         })}>Toast (Normal)</Button>
                     <Button onPress={
@@ -22,7 +23,8 @@ export default function TestView() {
                             description: "Description",
                             action: {
                                 label: "OK",
-                                onClick: () => {},
+                                onClick: () => {
+                                },
                             }
                         })}>Toast (Success)</Button>
                     <Button onPress={
@@ -30,7 +32,8 @@ export default function TestView() {
                             description: "Description",
                             action: {
                                 label: "OK",
-                                onClick: () => {},
+                                onClick: () => {
+                                },
                             }
                         })}>Toast (Error)</Button>
                 </div>

src/main/kotlin/de/grimsi/gameyfin/setup/SetupEndpoint.kt

@@ -7,8 +7,8 @@ import de.grimsi.gameyfin.users.UserService
 import de.grimsi.gameyfin.users.dto.UserInfo
 import de.grimsi.gameyfin.users.dto.UserRegistration
 import de.grimsi.gameyfin.users.entities.User
-import dev.hilla.Endpoint
-import dev.hilla.exception.EndpointException
+import com.vaadin.hilla.Endpoint
+import com.vaadin.hilla.exception.EndpointException
 
 @Endpoint
 class SetupEndpoint(

src/main/kotlin/de/grimsi/gameyfin/system/SystemEndpoint.kt

@@ -1,7 +1,7 @@
 package de.grimsi.gameyfin.system
 
 import de.grimsi.gameyfin.config.Roles
-import dev.hilla.Endpoint
+import com.vaadin.hilla.Endpoint
 import jakarta.annotation.security.RolesAllowed
 
 @Endpoint

src/main/kotlin/de/grimsi/gameyfin/users/UserEndpoint.kt

@@ -4,7 +4,7 @@ import de.grimsi.gameyfin.config.Roles
 import de.grimsi.gameyfin.users.dto.UserInfo
 import de.grimsi.gameyfin.users.dto.UserRegistration
 import de.grimsi.gameyfin.users.entities.User
-import dev.hilla.Endpoint
+import com.vaadin.hilla.Endpoint
 import jakarta.annotation.security.PermitAll
 import org.springframework.security.core.Authentication
 import org.springframework.security.core.GrantedAuthority

tsconfig.json

@@ -4,7 +4,7 @@
 // You might want to change the configurations to fit your preferences
 // For more information about the configurations, please refer to http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
 {
-  "_version": "9",
+  "_version": "9.1",
   "compilerOptions": {
     "sourceMap": true,
     "jsx": "react-jsx",
@@ -22,7 +22,7 @@
     "noUnusedParameters": false,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "baseUrl": "frontend",
+    "baseUrl": "src/main/frontend",
     "paths": {
       "@vaadin/flow-frontend": [
         "generated/jar-resources"
@@ -36,10 +36,10 @@
     }
   },
   "include": [
-    "frontend/**/*",
+    "src/main/frontend/**/*",
     "types.d.ts"
   ],
   "exclude": [
-    "frontend/generated/jar-resources/**"
+    "src/main/frontend/generated/jar-resources/**"
   ]
 }

types.d.ts

@@ -59,3 +59,14 @@ declare module '*.webp' {
   const ref: string;
   export default ref;
 }
+declare module '*.css?inline' {
+  import type { CSSResultGroup } from 'lit';
+  const content: CSSResultGroup;
+  export default content;
+}
+
+declare module 'csstype' {
+  interface Properties {
+    [index: `--${string}`]: any;
+  }
+}

vite.config.ts

@@ -1,7 +1,6 @@
 import reactSwc from '@vitejs/plugin-react-swc';
 import type {UserConfigFn} from 'vite';
 import {overrideVaadinConfig} from './vite.generated';
-import path from "path";
 
 const customConfig: UserConfigFn = (env) => ({
     // Here you can add custom Vite parameters
@@ -10,12 +9,7 @@ const customConfig: UserConfigFn = (env) => ({
         reactSwc({
             tsDecorators: true,
         }),
-    ],
-    resolve: {
-        alias: {
-            "@": path.resolve(__dirname, "./frontend"),
-        },
-    },
+    ]
 });
 
 export default overrideVaadinConfig(customConfig);

vite.generated.ts

@@ -11,6 +11,7 @@ import * as net from 'net';
 
 import { processThemeResources } from './build/plugins/application-theme-plugin/theme-handle.js';
 import { rewriteCssUrls } from './build/plugins/theme-loader/theme-loader-utils.js';
+import { addFunctionComponentSourceLocationBabel } from './build/plugins/react-function-location-plugin/react-function-location-plugin.js';
 import settings from './build/vaadin-dev-server-settings.json';
 import {
   AssetInfo,
@@ -33,6 +34,9 @@ import postcssLit from './build/plugins/rollup-plugin-postcss-lit-custom/rollup-
 import { createRequire } from 'module';
 
 import { visualizer } from 'rollup-plugin-visualizer';
+import reactPlugin from '@vitejs/plugin-react';
+
+import vitePluginFileSystemRouter from '@vaadin/hilla-file-router/vite-plugin.js';
 
 // Make `require` compatible with ES modules
 const require = createRequire(import.meta.url);
@@ -306,7 +310,7 @@ function statsExtracterPlugin(): PluginOption {
 
       const isFrontendResourceCollected = (id: string) =>
           !id.startsWith(themeOptions.frontendGeneratedFolder.replace(/\\/g, '/'))
-          || isThemeComponentsResource(id) 
+          || isThemeComponentsResource(id)
           || isGeneratedWebComponentResource(id);
 
       // collects project's frontend resources in frontend folder, excluding
@@ -343,7 +347,7 @@ function statsExtracterPlugin(): PluginOption {
           const fileKey = line.substring(line.indexOf('jar-resources/') + 14);
           frontendFiles[fileKey] = hash;
         });
-      // collects and hash rest of the Frontend resources excluding files in /generated/ and /themes/ 
+      // collects and hash rest of the Frontend resources excluding files in /generated/ and /themes/
       // and files already in frontendFiles.
       let frontendFolderAlias = "Frontend";
       generatedImports
@@ -358,7 +362,7 @@ function statsExtracterPlugin(): PluginOption {
             const fileBuffer = readFileSync(filePath, { encoding: 'utf-8' }).replace(/\r\n/g, '\n');
             frontendFiles[line] = createHash('sha256').update(fileBuffer, 'utf8').digest('hex');
           }
-        });        
+        });
       // If a index.ts exists hash it to be able to see if it changes.
       if (existsSync(path.resolve(frontendFolder, 'index.ts'))) {
         const fileBuffer = readFileSync(path.resolve(frontendFolder, 'index.ts'), { encoding: 'utf-8' }).replace(
@@ -605,7 +609,6 @@ function themePlugin(opts): PluginOption {
       if (!id.startsWith(settings.themeFolder)) {
         return;
       }
-
       for (const location of [themeResourceFolder, frontendFolder]) {
         const result = await this.resolve(path.resolve(location, id));
         if (result) {
@@ -622,8 +625,9 @@ function themePlugin(opts): PluginOption {
       ) {
         return;
       }
-      const [themeName] = bareId.substring(themeFolder.length + 1).split('/');
-      return rewriteCssUrls(raw, path.dirname(bareId), path.resolve(themeFolder, themeName), console, opts);
+      const resourceThemeFolder = bareId.startsWith(themeFolder) ? themeFolder : themeOptions.themeResourceFolder;
+      const [themeName] =  bareId.substring(resourceThemeFolder.length + 1).split('/');
+      return rewriteCssUrls(raw, path.dirname(bareId), path.resolve(resourceThemeFolder, themeName), console, opts);
     }
   };
 }
@@ -644,8 +648,6 @@ function runWatchDog(watchDogPort, watchDogHost) {
   client.connect(watchDogPort, watchDogHost || 'localhost');
 }
 
-let spaMiddlewareForceRemoved = false;
-
 const allowedFrontendFolders = [frontendFolder, nodeModulesFolder];
 
 function showRecompileReason(): PluginOption {
@@ -716,9 +718,11 @@ export const vaadinConfig: UserConfigFn = (env) => {
       }
     },
     build: {
+      minify: productionMode,
       outDir: buildOutputFolder,
       emptyOutDir: devBundle,
       assetsDir: 'VAADIN/build',
+      target: ["esnext", "safari15"],
       rollupOptions: {
         input: {
           indexhtml: projectIndexHtml,
@@ -759,7 +763,7 @@ export const vaadinConfig: UserConfigFn = (env) => {
       devMode && showRecompileReason(),
       settings.offlineEnabled && buildSWPlugin({ devMode }),
       !devMode && statsExtracterPlugin(),
-      devBundle && preserveUsageStats(),
+      !productionMode && preserveUsageStats(),
       themePlugin({ devMode }),
       postcssLit({
         include: ['**/*.css', /.*\/.*\.css\?.*/],
@@ -771,20 +775,29 @@ export const vaadinConfig: UserConfigFn = (env) => {
           new RegExp('.*/.*\\?html-proxy.*')
         ]
       }),
+      // The React plugin provides fast refresh and debug source info
+      reactPlugin({
+        include: '**/*.tsx',
+        babel: {
+          // We need to use babel to provide the source information for it to be correct
+          // (otherwise Babel will slightly rewrite the source file and esbuild generate source info for the modified file)
+          presets: [['@babel/preset-react', { runtime: 'automatic', development: !productionMode }]],
+          // React writes the source location for where components are used, this writes for where they are defined
+          plugins: [
+            !productionMode && addFunctionComponentSourceLocationBabel()
+          ].filter(Boolean)
+        }
+      }),
       {
         name: 'vaadin:force-remove-html-middleware',
-        transformIndexHtml: {
-          order: 'pre',
-          handler(_html, { server }) {
-            if (server && !spaMiddlewareForceRemoved) {
-              server.middlewares.stack = server.middlewares.stack.filter((mw) => {
-                const handleName = '' + mw.handle;
-                return !handleName.includes('viteHtmlFallbackMiddleware');
-              });
-              spaMiddlewareForceRemoved = true;
-            }
-          }
-        }
+        configureServer(server) {
+          return () => {
+            server.middlewares.stack = server.middlewares.stack.filter((mw) => {
+              const handleName = `${mw.handle}`;
+              return !handleName.includes('viteHtmlFallbackMiddleware');
+            });
+          };
+        },
       },
       hasExportedWebComponents && {
         name: 'vaadin:inject-entrypoints-to-web-component-html',
@@ -819,7 +832,7 @@ export const vaadinConfig: UserConfigFn = (env) => {
             if (devMode) {
               scripts.push({
                 tag: 'script',
-                attrs: { type: 'module', src: `/generated/vite-devmode.ts` },
+                attrs: { type: 'module', src: `/generated/vite-devmode.ts`, onerror: "document.location.reload()" },
                 injectTo: 'head'
               });
             }
@@ -836,6 +849,7 @@ export const vaadinConfig: UserConfigFn = (env) => {
         typescript: true
       }),
       productionMode && visualizer({ brotliSize: true, filename: bundleSizeFile })
+      , vitePluginFileSystemRouter({isDevMode: devMode})
     ]
   };
 };