From 8fe34f8d481f95321f7c8ed1bec09d0c09f959ea Mon Sep 17 00:00:00 2001
From: Roel <roelleijser@gmail.com>
Date: Mon, 9 Dec 2024 17:33:35 +0100
Subject: [PATCH] Refactor MenuItem components and update dependencies

---
 .../templates/nextjs-site/next.config.mjs      |  3 ---
 .../templates/nextjs-site/package.json         | 18 ++++++------------
 .../src/views/MenuItem/MenuItem.tsx            | 16 ++++++++++++----
 .../src/views/MenuItem/MenuItemLink.tsx        |  1 -
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/browser/create-template/templates/nextjs-site/next.config.mjs b/browser/create-template/templates/nextjs-site/next.config.mjs
index 910618b11..7dd972740 100644
--- a/browser/create-template/templates/nextjs-site/next.config.mjs
+++ b/browser/create-template/templates/nextjs-site/next.config.mjs
@@ -7,9 +7,6 @@ const nextConfig = {
 
     return config;
   },
-  experimental: {
-    turbo: {},
-  },
 };
 
 export default nextConfig;
diff --git a/browser/create-template/templates/nextjs-site/package.json b/browser/create-template/templates/nextjs-site/package.json
index 11754f343..130d88c33 100644
--- a/browser/create-template/templates/nextjs-site/package.json
+++ b/browser/create-template/templates/nextjs-site/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -16,9 +16,9 @@
     "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
     "modern-css-reset": "^1.4.0",
-    "next": "15.0.2",
-    "react": "19.0.0-rc-02c0e824-20241028",
-    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "zod": "^3.23.8"
@@ -26,16 +26,10 @@
   "devDependencies": {
     "@tomic/cli": "^0.40.0",
     "@types/node": "^20",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "eslint": "^9.13.0",
     "eslint-config-next": "15.0.2",
     "typescript": "^5"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "npm:types-react@19.0.0-rc.1",
-      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
-    }
   }
 }
diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx
index c9c69491e..4f5a985a6 100644
--- a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx
+++ b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx
@@ -11,7 +11,7 @@ const MenuItem = ({ subject }: { subject: string }) => {
   const menuItem = useResource<MenuItem>(subject);
   const { currentSubject } = useCurrentSubject();
   const id = useId();
-  const anchorName = CSS.escape(`--menuItem-${id}`);
+  const anchorName = cssEscape(`--menuItem-${id}`);
   const popover = useRef<HTMLDivElement>(null);
   const button = useRef<HTMLButtonElement>(null);
   const [submenuPosition, setSubmenuPosition] = useState({
@@ -22,7 +22,10 @@ const MenuItem = ({ subject }: { subject: string }) => {
   const calcPopoverPosition = () => {
     if (!button.current || !popover.current) return;
 
-    if (CSS.supports('anchor-name', '--something')) {
+    if (
+      typeof CSS !== 'undefined' &&
+      CSS.supports('anchor-name', '--something')
+    ) {
       return;
     }
 
@@ -60,7 +63,6 @@ const MenuItem = ({ subject }: { subject: string }) => {
         onClick={calcPopoverPosition}
         ref={button}
         style={{ '--anchor-name': anchorName } as React.CSSProperties}
-        suppressHydrationWarning
       >
         {menuItem.title}
       </button>
@@ -78,7 +80,6 @@ const MenuItem = ({ subject }: { subject: string }) => {
             '--anchor-name': anchorName,
           } as React.CSSProperties
         }
-        suppressHydrationWarning
       >
         <ul className={styles.ul}>
           {menuItem.props.subItems?.map((subItem: string, index: number) => (
@@ -97,4 +98,11 @@ const MenuItem = ({ subject }: { subject: string }) => {
   );
 };
 
+const cssEscape = (value: string) => {
+  if (typeof CSS !== 'undefined' && CSS.escape) {
+    return CSS.escape(value);
+  }
+  return value.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, '\\$1');
+};
+
 export default MenuItem;
diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.tsx b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.tsx
index 6eb241f42..f0caee128 100644
--- a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.tsx
+++ b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.tsx
@@ -26,7 +26,6 @@ const MenuItemLink = ({
       href={href}
       className={clsx(styles.link, { [styles.linkActive]: active })}
       aria-current={active ? 'page' : 'false'}
-      suppressHydrationWarning
     >
       {resource.loading ? '' : page.title}
     </Link>