fix: Use documentTitleSignal for page title (#41)

Uses signal for dynamically updated page title.

Part of vaadin/flow#19200

pom.xml

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

src/main/frontend/views/@index.tsx

@@ -3,6 +3,7 @@ import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
 
 export const config: ViewConfig = {
     menu: {
+        title: "Public page",
         icon: 'vaadin:group'
     }
 };

src/main/frontend/views/@layout.tsx

@@ -8,18 +8,23 @@ import {
     SideNavItem
 } from "@vaadin/react-components";
 import Placeholder from 'Frontend/components/placeholder/Placeholder.js';
-import { useRouteMetadata } from 'Frontend/util/routing.js';
-import { Suspense, useEffect } from 'react';
+import { Suspense } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from "../auth";
-import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
+import { createMenuItems, useViewConfig } from '@vaadin/hilla-file-router/runtime.js';
+import { effect, Signal, signal } from "@vaadin/hilla-react-signals";
+
+const vaadin = window.Vaadin as {
+    documentTitleSignal: Signal<string>;
+};
+vaadin.documentTitleSignal = signal("");
+effect(() =>  document.title = vaadin.documentTitleSignal.value);
 
 export default function Layout() {
     const navigate = useNavigate();
     const location = useLocation();
-    const currentTitle = useRouteMetadata()?.title ?? 'Hybrid Example With Stateful Auth';
+    vaadin.documentTitleSignal.value = useViewConfig()?.title ?? '';
 
-    useEffect(() => {document.title = currentTitle;}, [currentTitle]);
 
     const { state, logout } = useAuth();
 
@@ -71,6 +76,9 @@ export default function Layout() {
             </div>
 
             <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
+            <h2 slot="navbar" className="text-l m-0">
+                {vaadin.documentTitleSignal}
+            </h2>
 
             <Suspense fallback={<Placeholder />}>
                 <Outlet />

src/main/frontend/views/about.tsx

@@ -4,6 +4,7 @@ import type { ViewConfig } from "@vaadin/hilla-file-router/types.js";
 export const config: ViewConfig = {
     loginRequired: true,
     menu: {
+        title: "About page",
         icon: 'vaadin:info'
     }
 };

src/main/frontend/views/hilla.tsx

@@ -7,6 +7,7 @@ export const config: ViewConfig = {
     loginRequired: true,
     rolesAllowed: ['ROLE_USER'],
     menu: {
+        title: "Hilla User page",
         icon: 'vaadin:user'
     }
 };

src/main/java/org/vaadin/example/FlowView.java

@@ -9,6 +9,7 @@
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.Menu;
+import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 
 /**
@@ -17,6 +18,7 @@
 @RolesAllowed("ADMIN")
 @Menu(title = "Flow admin", icon = "vaadin:tools")
 @Route("flow")
+@PageTitle("Flow Admin page")
 public class FlowView extends VerticalLayout {
 
     public FlowView(GreetService service) {