refactor: use the new code-splitting flag and upgrade the packages (#417

)

* chore: bump tanstack router

* chore: bump timescape to 0.5.1

* chore: bump i18next

* chore: ts-rest

* chore: bump types for react

* chore: bump react-compiler babel-plugin

* chore: bump react-compiler eslint-plugin

* chore: bump vite

* chore: bump tanstack query

* chore: bump framer-motion

* chore: bump typescript-eslint to 8.2.0

* style: linting for the react rule to not be able to use `useRef().current` during rendering

* refactor: use the new `autoCodeSplitting` flag

package.json

@@ -45,23 +45,23 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/match-sorter-utils": "^8.19.4",
-    "@tanstack/query-broadcast-client-experimental": "^5.51.21",
-    "@tanstack/react-query": "^5.51.21",
-    "@tanstack/react-query-devtools": "^5.51.21",
-    "@tanstack/react-router": "^1.47.5",
+    "@tanstack/query-broadcast-client-experimental": "^5.52.0",
+    "@tanstack/react-query": "^5.52.0",
+    "@tanstack/react-query-devtools": "^5.52.0",
+    "@tanstack/react-router": "^1.49.2",
     "@tanstack/react-table": "^8.20.1",
     "@tanstack/react-virtual": "^3.8.6",
-    "@tanstack/router-devtools": "^1.47.5",
-    "@ts-rest/core": "^3.49.3",
+    "@tanstack/router-devtools": "^1.49.2",
+    "@ts-rest/core": "^3.50.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "compare-versions": "^6.1.1",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.24",
-    "i18next": "^23.12.3",
+    "framer-motion": "^11.3.29",
+    "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
+    "i18next-http-backend": "^2.6.1",
     "jsurl2": "^2.2.0",
     "lucide-react": "^0.427.0",
     "oidc-client-ts": "^3.0.1",
@@ -76,7 +76,7 @@
     "recharts": "2.13.0-alpha.4",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
-    "timescape": "^0.5.0",
+    "timescape": "^0.5.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -85,18 +85,18 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.14",
-    "@tanstack/router-plugin": "^1.47.0",
+    "@tanstack/router-plugin": "^1.49.3",
     "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/react-signature-canvas": "^1.0.5",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "babel-plugin-react-compiler": "0.0.0-experimental-5f79ba2-20240815",
+    "babel-plugin-react-compiler": "0.0.0-experimental-7d62301-20240821",
     "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-d0e920e-20240815",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-8e3b87c-20240821",
     "eslint-plugin-react-hooks": "5.1.0-beta-26f2496093-20240514",
     "globals": "^15.9.0",
     "postcss": "^8.4.41",
@@ -106,7 +106,7 @@
     "tailwindcss": "^3.4.10",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.1.0",
-    "vite": "^5.4.0"
+    "typescript-eslint": "^8.2.0",
+    "vite": "^5.4.2"
   }
 }

src/components/cache-buster.tsx

@@ -178,6 +178,7 @@ function CacheDocumentFocusChecker() {
     }
   };
 
+  // eslint-disable-next-line react-compiler/react-compiler
   useEventListener("visibilitychange", onVisibilityChange, documentRef);
 
   return null;

src/lib/hooks/useDocumentTitle.ts

@@ -22,19 +22,20 @@ export function useDocumentTitle(title: string, options: Options = {}): void {
   const defaultTitle = React.useRef<string | null>(null);
   const windowRef = React.useRef(window);
 
+  // eslint-disable-next-line react-compiler/react-compiler
   useIsomorphicLayoutEffect(() => {
     defaultTitle.current = window.document.title;
   }, []);
 
+  // eslint-disable-next-line react-compiler/react-compiler
   useIsomorphicLayoutEffect(() => {
     windowRef.current.document.title = title;
-    // window.document.title = title;
   }, [title]);
 
+  // eslint-disable-next-line react-compiler/react-compiler
   useUnmount(() => {
     if (!preserveTitleOnUnmount && defaultTitle.current) {
       windowRef.current.document.title = defaultTitle.current;
-      // window.document.title = defaultTitle.current;
     }
   });
 }

src/lib/hooks/useEventCallback.ts

@@ -20,6 +20,7 @@ export function useEventCallback<Args extends unknown[], R>(
     throw new Error("Cannot call an event handler while rendering.");
   });
 
+  // eslint-disable-next-line react-compiler/react-compiler
   useIsomorphicLayoutEffect(() => {
     ref.current = fn;
   }, [fn]);

src/lib/hooks/useEventListener.ts

@@ -80,6 +80,7 @@ function useEventListener<
   // Create a ref that stores handler
   const savedHandler = React.useRef(handler);
 
+  // eslint-disable-next-line react-compiler/react-compiler
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);

src/lib/hooks/useUnmount.ts

@@ -13,6 +13,7 @@ import * as React from "react";
 export function useUnmount(func: () => void) {
   const funcRef = React.useRef(func);
 
+  // eslint-disable-next-line react-compiler/react-compiler
   funcRef.current = func;
 
   React.useEffect(

vite.config.ts

@@ -22,9 +22,7 @@ export default defineConfig(() => {
         generatedRouteTree: "./src/route-tree.gen.ts",
         routeFileIgnorePrefix: "-",
         quoteStyle: "double",
-        experimental: {
-          enableCodeSplitting: true,
-        },
+        autoCodeSplitting: true,
       }),
       react({
         babel: {