Merge pull request #50 from vaadin/update-to-v24

chore: PiT - Update to Vaadin v24

.gitignore

@@ -10,7 +10,7 @@
 
 # The following files are generated/updated by vaadin-maven-plugin
 node_modules/
-frontend/generated/
+src/main/frontend/generated/
 pnpmfile.js
 vite.generated.ts
 

pom.xml

@@ -11,8 +11,8 @@
 
     <properties>
         <java.version>17</java.version>
-        <vaadin.version>24.3.13</vaadin.version>
-        <hilla.version>2.5.6</hilla.version>
+        <vaadin.version>24.4.1</vaadin.version>
+        <vaadin.version>24.4.1</vaadin.version>
     </properties>
 
     <parent>
@@ -58,9 +58,9 @@
                 <scope>import</scope>
             </dependency>
             <dependency>
-                <groupId>dev.hilla</groupId>
-                <artifactId>hilla-bom</artifactId>
-                <version>${hilla.version}</version>
+                <groupId>com.vaadin</groupId>
+                <artifactId>vaadin-bom</artifactId>
+                <version>${vaadin.version}</version>
                 <type>pom</type>
                 <scope>import</scope>
             </dependency>
@@ -69,12 +69,8 @@
 
     <dependencies>
         <dependency>
-            <groupId>dev.hilla</groupId>
-            <artifactId>hilla-react</artifactId>
-        </dependency>
-        <dependency>
-            <groupId>dev.hilla</groupId>
-            <artifactId>hilla-react-spring-boot-starter</artifactId>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-spring-boot-starter</artifactId>
          </dependency>
         <dependency>
             <groupId>com.vaadin</groupId>
@@ -111,9 +107,9 @@
             </plugin>
 
             <plugin>
-                <groupId>dev.hilla</groupId>
-                <artifactId>hilla-maven-plugin</artifactId>
-                <version>${hilla.version}</version>
+                <groupId>com.vaadin</groupId>
+                <artifactId>vaadin-maven-plugin</artifactId>
+                <version>${vaadin.version}</version>
                 <executions>
                     <execution>
                         <goals>
@@ -145,9 +141,9 @@
             <build>
                 <plugins>
                     <plugin>
-                        <groupId>dev.hilla</groupId>
-                        <artifactId>hilla-maven-plugin</artifactId>
-                        <version>${hilla.version}</version>
+                        <groupId>com.vaadin</groupId>
+                        <artifactId>vaadin-maven-plugin</artifactId>
+                        <version>${vaadin.version}</version>
                         <executions>
                             <execution>
                                 <goals>

frontend/components/placeholder/Placeholder.tsx → src/main/frontend/components/placeholder/Placeholder.tsx

@@ -1,4 +1,4 @@
-import { ProgressBar } from '@hilla/react-components/ProgressBar.js';
+import { ProgressBar } from '@vaadin/react-components/ProgressBar.js';
 
 export default function Placeholder() {
   return <ProgressBar indeterminate={true} className="m-0" />;

frontend/views/MainLayout.tsx → src/main/frontend/views/MainLayout.tsx

@@ -1,5 +1,5 @@
-import { AppLayout } from '@hilla/react-components/AppLayout.js';
-import { DrawerToggle } from '@hilla/react-components/DrawerToggle.js';
+import { AppLayout } from '@vaadin/react-components/AppLayout.js';
+import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
 import Placeholder from 'Frontend/components/placeholder/Placeholder.js';
 import { useRouteMetadata } from 'Frontend/util/routing.js';
 import { Suspense, useEffect } from 'react';

src/main/frontend/views/README

@@ -0,0 +1 @@
+Place your React views or hand written templates in this folder.

frontend/views/hilla/HillaView.tsx → src/main/frontend/views/hilla/HillaView.tsx

@@ -1,8 +1,8 @@
-import { Button } from "@hilla/react-components/Button.js";
-import { TextField } from "@hilla/react-components/TextField.js";
+import { Button } from "@vaadin/react-components/Button.js";
+import { TextField } from "@vaadin/react-components/TextField.js";
 import { HelloEndpoint } from "Frontend/generated/endpoints.js";
 import { useState } from "react";
-import {VerticalLayout} from "@hilla/react-components/VerticalLayout.js";
+import {VerticalLayout} from "@vaadin/react-components/VerticalLayout.js";
 
 export default function HillaView() {
   const [name, setName] = useState("");

src/main/java/org/vaadin/example/endpoints/HelloEndpoint.java

@@ -3,8 +3,8 @@
 import org.vaadin.example.GreetService;
 
 import com.vaadin.flow.server.auth.AnonymousAllowed;
-import dev.hilla.Endpoint;
-import dev.hilla.Nonnull;
+import com.vaadin.hilla.Endpoint;
+import com.vaadin.hilla.Nonnull;
 
 @Endpoint
 @AnonymousAllowed

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,18 +22,18 @@
     "noUnusedParameters": false,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "baseUrl": "frontend",
+    "baseUrl": "src/main/frontend",
     "paths": {
       "@vaadin/flow-frontend": ["generated/jar-resources"],
       "@vaadin/flow-frontend/*": ["generated/jar-resources/*"],
       "Frontend/*": ["*"]
     }
   },
   "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,15 +1,9 @@
-import react from '@vitejs/plugin-react';
-import type { UserConfigFn } from 'vite';
+import { UserConfigFn } from 'vite';
 import { overrideVaadinConfig } from './vite.generated';
 
 const customConfig: UserConfigFn = (env) => ({
   // Here you can add custom Vite parameters
   // https://vitejs.dev/config/
-  plugins: [
-    react({
-      include: '**/*.tsx',
-    }),
-  ],
 });
 
 export default overrideVaadinConfig(customConfig);