fix: fix document title signal handling (#96)

* fix: fix document title signal handling

When clicking on a side nav link, an error related to the document title
signal occurs:
Warning: Cannot update a component ('value') while rendering a different
component ('Layout').
This change updates the document signal handling to prevent the error.
The code is aligned with sources generated by start.vaadin.com.

* upgrade deps

---------

Co-authored-by: Mikhail Shabarov <[email protected]>

package.json

@@ -27,6 +27,7 @@
     "@vaadin/vaadin-themable-mixin": "24.6.4",
     "@vaadin/vaadin-usage-statistics": "2.1.3",
     "construct-style-sheets-polyfill": "3.1.0",
+    "cross-spawn": "^7.0.6",
     "date-fns": "2.29.3",
     "lit": "3.2.1",
     "proj4": "2.12.1",
@@ -125,7 +126,7 @@
       "workbox-core": "7.3.0",
       "workbox-precaching": "7.3.0"
     },
-    "hash": "bbdb1640e0c049515272577c44346eb6d4ba6e68cbe297e5465fe2ae490ab2f3"
+    "hash": "5da50cdfb38915456e53c66f67783bcfc57d048b99f7536de191a3fd3db4592a"
   },
   "overrides": {
     "@vaadin/bundles": "$@vaadin/bundles",
@@ -154,6 +155,7 @@
     "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
     "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles",
     "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles",
-    "@playwright/test": "$@playwright/test"
+    "@playwright/test": "$@playwright/test",
+    "cross-spawn": "$cross-spawn"
   }
 }

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

@@ -9,23 +9,30 @@ import {
 } from "@vaadin/react-components";
 import '@vaadin/icons';
 import Placeholder from 'Frontend/components/placeholder/Placeholder.js';
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from "../auth";
 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("");
-//@ts-ignore
-effect(() =>  document.title = vaadin.documentTitleSignal.value);
+const documentTitleSignal = signal('');
+effect(() => {
+    document.title = documentTitleSignal.value;
+});
+
+// Publish for Vaadin to use
+(window as any).Vaadin.documentTitleSignal = documentTitleSignal;
 
 export default function Layout() {
+    const currentTitle = useViewConfig()?.title;
     const navigate = useNavigate();
     const location = useLocation();
-    vaadin.documentTitleSignal.value = useViewConfig()?.title ?? '';
+
+    useEffect(() => {
+        if (currentTitle) {
+            documentTitleSignal.value = currentTitle;
+        }
+    }, [currentTitle]);
 
 
     const { state, logout } = useAuth();
@@ -79,7 +86,7 @@ export default function Layout() {
 
             <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
             <h2 slot="navbar" className="text-l m-0">
-                {vaadin.documentTitleSignal}
+                {documentTitleSignal}
             </h2>
 
             <Suspense fallback={<Placeholder />}>