Update useEffects, swap preact signals for a useState hook, update invokers polyfill and reduce navigation-container complexity

Author: lukewarlow

site/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1738930819805
+		"lastUpdateCheck": 1740585432909
 	}
 }

site/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@astrojs/mdx": "^4.0.8",
     "@astrojs/sitemap": "3.2.1",
-    "astro": "5.2.5",
+    "astro": "5.3.1",
     "astro-compress": "^2.3.6",
     "eslint": "^8.18.0",
     "hast-util-to-string": "^2.0.0",
@@ -47,8 +47,7 @@
   },
   "dependencies": {
     "@astrojs/preact": "^4.0.4",
-    "@preact/signals": "^2.0.1",
-    "invokers-polyfill": "^0.4.7",
-    "preact": "^10.25.4"
+    "invokers-polyfill": "^0.5.2",
+    "preact": "^10.26.2"
   }
 }

site/src/components/navigation/navigation-container.jsx

@@ -1,31 +1,18 @@
-import { useSignal } from '@preact/signals'
-import { useEffect, useRef } from 'preact/hooks'
+import { useState } from 'preact/hooks'
+import 'invokers-polyfill'
 
 function NavigationContainer(props) {
-  const isMenuOpen = useSignal(false)
-  const navRef = useRef(null)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
 
-  useEffect(() => {
-    function handleCommand(e) {
-      if (e.command === '--toggle-menu') {
-        isMenuOpen.value = !isMenuOpen.value
-        e.source.setAttribute('aria-expanded', isMenuOpen.value)
-      }
+  function handleCommand(e) {
+    if (e.command === '--toggle-menu') {
+      setIsMenuOpen(!isMenuOpen)
+      e.source.setAttribute('aria-expanded', isMenuOpen)
     }
-
-    if (navRef.current) {
-      navRef.current.addEventListener('command', handleCommand)
-    }
-
-    return () => {
-      if (navRef.current) {
-        navRef.current.removeEventListener('command', handleCommand)
-      }
-    }
-  })
+  }
 
   return (
-    <nav ref={navRef} id="site-nav" className={isMenuOpen.value ? 'opened' : ''}>
+    <nav onCommand={handleCommand} id="site-nav" className={isMenuOpen ? 'opened' : ''}>
       {props.children}
     </nav>
   )

site/src/components/navigation/navigation.astro

@@ -58,7 +58,7 @@ const routesToNotPrefetch = ['/research/component-matrix']
   }
 </style>
 
-<NavigationContainer client:load>
+<NavigationContainer client:only>
   <CommunityLinks className="mobile" />
 
   <div class="wrapper">

site/src/components/toggle-menu-button.jsx

@@ -1,5 +1,4 @@
 import './toggle-menu-button.css'
-import 'invokers-polyfill'
 
 function ToggleMenuButton() {
   return (

site/src/pages/components/popup.research.explainer.js

@@ -10,7 +10,7 @@ import { useEffect } from 'preact/hooks'
 function Page() {
   useEffect(() => {
     return history.replace('/get-involved')
-  })
+  }, [])
 
   return null
 }

site/src/pages/components/select.js

@@ -3,7 +3,7 @@ import { useEffect } from 'preact/hooks'
 function Page() {
   useEffect(() => {
     return history.replace('/get-involved')
-  })
+  }, [])
 
   return null
 }

site/src/pages/components/selectlist.js

@@ -3,7 +3,7 @@ import { useEffect } from 'preact/hooks'
 function Page() {
   useEffect(() => {
     return history.replace('/get-involved')
-  })
+  }, [])
 
   return null
 }

site/src/pages/components/selectmenu.js

@@ -3,7 +3,7 @@ import { useEffect } from 'preact/hooks'
 function Page() {
   useEffect(() => {
     return history.replace('/get-involved')
-  })
+  }, [])
 
   return null
 }