build: update dependencies

apps/extension/package.json

@@ -26,51 +26,49 @@
 	},
 	"dependencies": {
 		"@repo/ui": "*",
-		"browser-info": "^1.2.0",
+		"browser-info": "^1.3.0",
 		"clsx": "^2.1.1",
-		"loglevel": "^1.6.1",
-		"query-string": "^6.1.0",
+		"loglevel": "^1.9.2",
+		"query-string": "^9.1.1",
 		"react": "18.3.1",
 		"react-copy-to-clipboard": "^5.0.1",
 		"react-dom": "18.3.1",
-		"react-router": "^4.3.1",
-		"react-router-dom": "^4.3.1",
-		"react-toggle": "^4.0.2"
+		"react-router": "^7.0.1",
+		"react-router-dom": "^7.0.1",
+		"react-toggle": "^4.1.3"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.22.17",
-		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
-		"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
-		"@babel/plugin-proposal-optional-chaining": "^7.16.7",
-		"@babel/plugin-syntax-jsx": "^7.2.0",
+		"@babel/core": "^7.26.0",
+		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+		"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+		"@babel/plugin-proposal-optional-chaining": "^7.21.0",
+		"@babel/plugin-syntax-jsx": "^7.25.9",
 		"@babel/plugin-syntax-optional-chaining": "^7.8.3",
-		"@babel/preset-env": "^7.22.15",
-		"@babel/preset-react": "^7.0.0-beta.49",
+		"@babel/preset-env": "^7.26.0",
+		"@babel/preset-react": "^7.25.9",
 		"@svgr/webpack": "^8.1.0",
 		"@types/react": "^18.3.12",
 		"@types/react-copy-to-clipboard": "^5.0.7",
 		"@types/react-dom": "18.3.1",
-		"@types/react-router": "^4.3.1",
-		"@types/react-router-dom": "^4.3.1",
 		"@types/react-toggle": "^4.0.5",
 		"@types/webextension-polyfill": "^0.12.1",
-		"babel-loader": "^8.0.0-beta.3",
-		"babel-plugin-transform-class-properties": "^6.10.2",
+		"babel-loader": "^9.2.1",
+		"babel-plugin-transform-class-properties": "^6.24.1",
 		"clean-webpack-plugin": "^4.0.0",
 		"copy-webpack-plugin": "^12.0.2",
-		"css-loader": "^5.2.4",
-		"html-webpack-plugin": "^5.5.3",
-		"mini-css-extract-plugin": "^2.2.2",
+		"css-loader": "^7.1.2",
+		"html-webpack-plugin": "^5.6.3",
+		"mini-css-extract-plugin": "^2.9.2",
 		"node-sass": "^9.0.0",
-		"opener": "^1.5.1",
-		"sass-loader": "^14.2.1",
+		"opener": "^1.5.2",
+		"sass-loader": "^16.0.3",
 		"ts-loader": "^9.5.1",
-		"typescript": "^5.6.3",
+		"typescript": "^5.7.2",
 		"webextension-polyfill": "^0.12.0",
-		"webpack": "^5.88.2",
-		"webpack-bundle-analyzer": "^4.9.1",
-		"webpack-cli": "^4.8.0",
-		"webpack-sources": "^3.2.0",
-		"zip-webpack-plugin": "^4.0.1"
+		"webpack": "^5.96.1",
+		"webpack-bundle-analyzer": "^4.10.2",
+		"webpack-cli": "^5.1.4",
+		"webpack-sources": "^3.2.3",
+		"zip-webpack-plugin": "^4.0.2"
 	}
 }

apps/extension/src/options/components/ContentsArea.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 // @ts-expect-error no type info for this
 import browserInfo from "browser-info";
 import SettingsPage from "./SettingsPage";
@@ -8,15 +8,18 @@ import InformationPage from "./InformationPage";
 
 import "./ContentsArea.scss";
 
-const isValidShortcuts = browserInfo().name == "Firefox" && browserInfo().version >= 60;
+const isValidShortcuts =
+  browserInfo().name == "Firefox" && browserInfo().version >= 60;
 
 export default () => (
   <div className="contentsArea">
-    <Switch>
-      <Route path="/settings" component={SettingsPage} />
-      {isValidShortcuts && <Route path="/shortcuts" component={KeyboardShortcutsPage} />}
-      <Route path="/information" component={InformationPage} />
-      <Route component={SettingsPage} />
-    </Switch>
+    <Routes>
+      <Route path="/settings" Component={SettingsPage} />
+      {isValidShortcuts && (
+        <Route path="/shortcuts" Component={KeyboardShortcutsPage} />
+      )}
+      <Route path="/information" Component={InformationPage} />
+      <Route Component={SettingsPage} />
+    </Routes>
   </div>
 );

apps/extension/src/options/components/KeyboardShortcutsPage.tsx

@@ -42,7 +42,8 @@ class KeyboardShortcutPage extends Component<IProps, IState> {
       id: command.name,
       title: command.description,
       useRawTitle: true,
-      captions: [],
+      // no idea why typescript doesn't like it
+      captions: [] as any[],
       type: "keyboard-shortcut",
       shortcut: command.shortcut || "",
       defaultValue: getShortcut(command.name),

apps/extension/src/options/components/OptionsPage.tsx

@@ -17,9 +17,7 @@ function OptionsPage() {
   setupTheme();
 
   return (
-    // @ts-expect-error old react types
-    // which implicitly assume `children` propd
-    <HashRouter hashType="noslash">
+    <HashRouter>
       <ScrollToTop>
         <div className={optionsPageClassName}>
           <SideBar />

apps/extension/src/options/components/ScrollToTop.tsx

@@ -1,22 +1,18 @@
-import { Component, type ReactNode } from "react";
-import { withRouter, type RouteComponentProps } from "react-router-dom";
+import { useEffect, type ReactNode } from "react";
+import { useLocation } from "react-router-dom";
 
-interface IProps extends RouteComponentProps {
+interface IProps {
   children?: ReactNode;
 }
 
-interface IState {}
+function ScrollToTop({ children }: IProps) {
+  const location = useLocation();
 
-class ScrollToTop extends Component<IProps, IState> {
-  componentDidUpdate(prevProps: IProps) {
-    if (this.props.location !== prevProps.location) {
-      window.scrollTo(0, 0);
-    }
-  }
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
 
-  render() {
-    return this.props.children;
-  }
+  return children;
 }
 
-export default withRouter(ScrollToTop);
+export default ScrollToTop;

apps/extension/src/options/components/SideBar.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import browser from "webextension-polyfill";
-import { Link, withRouter } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 // @ts-expect-error no types for this one
 import browserInfo from "browser-info";
 import clsx from "clsx";
 
 import "./SideBar.scss";
 
-const sideBar = withRouter(function SideBar(props) {
+function SideBar() {
+  const location = useLocation();
+
   return (
     <div className="sideBar">
       <div className="titleContainer">
@@ -20,7 +22,7 @@ const sideBar = withRouter(function SideBar(props) {
           className={clsx(
             "sideBarItem",
             ["/shortcuts", "/information"].every(
-              (path) => path != props.location.pathname
+              (path) => path != location.pathname
             ) && "selected"
           )}
         >
@@ -30,7 +32,7 @@ const sideBar = withRouter(function SideBar(props) {
         {isValidShortcuts && (
           <li
             className={`sideBarItem ${
-              props.location.pathname == "/shortcuts" ? "selected" : ""
+              location.pathname == "/shortcuts" ? "selected" : ""
             }`}
           >
             <Link to="/shortcuts">
@@ -41,7 +43,7 @@ const sideBar = withRouter(function SideBar(props) {
 
         <li
           className={`sideBarItem ${
-            props.location.pathname == "/information" ? "selected" : ""
+            location.pathname == "/information" ? "selected" : ""
           }`}
         >
           <Link to="/information">
@@ -51,10 +53,10 @@ const sideBar = withRouter(function SideBar(props) {
       </ul>
     </div>
   );
-});
+}
 
 function isValidShortcuts() {
   return browserInfo().name == "Firefox" && browserInfo().version >= 60;
 }
 
-export default sideBar;
+export default SideBar;

apps/extension/src/options/hooks/use-previous.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+
+export function usePrevious<ValueType>(value: ValueType): ValueType {
+  const ref = useRef<ValueType>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}

apps/frontend/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/frontend/next.config.mjs

@@ -23,6 +23,13 @@ async function createNextConfig() {
     trailingSlash: true,
     skipTrailingSlashRedirect: true,
     distDir: "dist",
+    sassOptions: {
+      // a duct tape
+      // https://github.com/vercel/next.js/discussions/67931#discussioncomment-11044560
+      // until nextjs releases a next major
+      // https://github.com/vercel/next.js/issues/71638#issuecomment-2454463904
+      silenceDeprecations: ["legacy-js-api"],
+    },
     experimental: {
       typedRoutes: true,
     },

apps/frontend/package.json

@@ -13,33 +13,33 @@
     "codegen": "npm run build-codegen && cd ../../packages/codegen && npm start -- ../../apps/frontend/src/codegen/generators ../../apps/frontend/src/codegen/output && cd ../../apps/frontend && prettier --log-level=warn ./src/codegen/output --write"
   },
   "dependencies": {
-    "@hyperjump/json-schema": "^1.8.0",
-    "@next/env": "^14.2.2",
+    "@hyperjump/json-schema": "^1.9.9",
+    "@next/env": "15.0.3",
     "@repo/ui": "*",
-    "ajv": "^8.12.0",
+    "ajv": "^8.17.1",
     "bcp-47": "^2.1.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "html5-qrcode": "^2.3.8",
-    "iso-639-1": "^3.1.2",
-    "nanoid": "^5.0.7",
-    "negotiator": "^0.6.3",
-    "next": "^14.2.2",
+    "iso-639-1": "^3.1.3",
+    "nanoid": "^5.0.8",
+    "negotiator": "^1.0.0",
+    "next": "15.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "server-only": "^0.0.1",
     "stringify-object": "^5.0.0"
   },
   "devDependencies": {
     "@types/negotiator": "^0.6.3",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.3.12",
     "@types/stringify-object": "^4.0.5",
-    "eslint": "8.56.0",
-    "eslint-config-next": "14.2.2",
+    "eslint": "9.15.0",
+    "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
-    "prettier": "3.2.5",
-    "sass": "^1.75.0",
+    "prettier": "3.3.3",
+    "sass": "^1.81.0",
     "serve": "^14.2.4",
-    "typescript": "^5.4.5"
+    "typescript": "^5.7.2"
   }
 }

apps/frontend/src/app/(main)/[lang]/account/page.tsx

@@ -1,17 +1,13 @@
 import type { Metadata } from "next";
 import { getDictionary } from "#server";
 import { Page } from "#components";
-import type { IBasePageParams } from "#pages/types";
+import type { IStaticPageProps } from "#pages/types";
 import { Client } from "./client";
 
-interface IParams extends IBasePageParams {}
-
-interface IProps {
-  params: IParams;
-}
+interface IProps extends IStaticPageProps {}
 
 export async function generateMetadata({ params }: IProps): Promise<Metadata> {
-  const { lang } = params;
+  const { lang } = await params;
   const dict = await getDictionary(lang);
   const { title } = dict.pages.account;
 
@@ -21,7 +17,7 @@ export async function generateMetadata({ params }: IProps): Promise<Metadata> {
 }
 
 async function PlaceDetailsPage({ params }: IProps) {
-  const { lang } = params;
+  const { lang } = await params;
   const dict = await getDictionary(lang);
   const { pages, common } = dict;
   const { heading } = pages.account;

apps/frontend/src/app/(main)/[lang]/layout.tsx

@@ -14,11 +14,11 @@ import styles from "./layout.module.scss";
 
 interface IProps {
   children: ReactNode;
-  params: IBasePageParams;
+  params: Promise<IBasePageParams>;
 }
 
 export async function generateMetadata({ params }: IProps): Promise<Metadata> {
-  const { lang } = params;
+  const { lang } = await params;
   const dict = await getDictionary(lang);
   const { layout } = dict;
 
@@ -39,7 +39,7 @@ export async function generateMetadata({ params }: IProps): Promise<Metadata> {
 }
 
 async function RootLayout({ children, params }: IProps) {
-  const { lang } = params;
+  const { lang } = await params;
   const dict = await getDictionary(lang);
   const { layout } = dict;
 

apps/frontend/src/app/(main)/[lang]/page.tsx

@@ -21,7 +21,7 @@ import styles from "./page.module.scss";
 interface IProps extends IStaticPageProps {}
 
 export async function generateMetadata({ params }: IProps) {
-  const { lang } = params;
+  const { lang } = await params;
   const dict = await getDictionary(lang);
   const { home } = dict.pages;
 
@@ -31,7 +31,7 @@ export async function generateMetadata({ params }: IProps) {
 }
 
 async function FrontPage({ params }: IProps) {
-  const { lang } = params;
+  const { lang } = await params;
   const dict = await getDictionary(lang);
   const { home } = dict.pages;