add react compiler (#306)

* add react compiler * 3.22.10 * fix ts errors * fix ts problems
MayGo · Feb 2, 2025 · b8db31f · b8db31f
1 parent b14309f
commit b8db31f
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 104 deletions.
diff --git a/client/eslint.config.js b/client/eslint.config.js
@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import reactCompiler from 'eslint-plugin-react-compiler';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+    { ignores: ['dist'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+            'react-compiler': reactCompiler,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-compiler/react-compiler': 'warn',
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
     },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+);
diff --git a/client/package.json b/client/package.json
@@ -52,10 +52,12 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.17.0",
-        "@types/react": "^18.3.18",
-        "@types/react-dom": "^18.3.5",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
         "@vitejs/plugin-react": "^4.3.4",
+        "babel-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
         "eslint": "^9.17.0",
+        "eslint-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.16",
         "globals": "^15.14.0",

diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/components/Timeline/BarWithTooltip.tsx b/client/src/components/Timeline/BarWithTooltip.tsx
@@ -28,7 +28,7 @@ export const BarWithTooltip = ({
     centerTime = false,
     ...rest
 }: PropsI) => {
-    const barRef = useRef();
+    const barRef = useRef(null);
     const [hover, setHover] = useState(false);
 
     const onMouseEnter = () => {
@@ -47,6 +47,7 @@ export const BarWithTooltip = ({
 
             if (onClickBarItem && popoverTriggerRef) {
                 console.info('barRef.current', barRef.current);
+                // eslint-disable-next-line react-compiler/react-compiler
                 popoverTriggerRef.current = barRef.current;
                 onClickBarItem(datum);
             }

diff --git a/client/src/components/Timeline/Timeline.tsx b/client/src/components/Timeline/Timeline.tsx
@@ -9,7 +9,7 @@ import { SmallTimelineChart } from './SmallTimelineChart';
 import { Loader } from './Loader';
 
 export const Timeline = memo(() => {
-    const popoverTriggerRef = useRef();
+    const popoverTriggerRef = useRef<HTMLDivElement>(null);
 
     const isLoading = useStoreState((state) => state.isLoading);
 
@@ -23,7 +23,9 @@ export const Timeline = memo(() => {
                     <MainTimelineChart />
                 </BlackBox>
                 <Popover isOpen={!!selectedTimelineItem}>
-                    <PopoverTrigger>{popoverTriggerRef.current || <div />}</PopoverTrigger>
+                    <PopoverTrigger>
+                        <div ref={popoverTriggerRef} />
+                    </PopoverTrigger>
                     <PopoverContent p={4} w="fit-content" boxShadow="lg" bg="gray.50">
                         <PopoverArrow bg="gray.50" />
                         <PopoverBody p={0}>

diff --git a/client/src/components/Timeline/TimelineItemEditDeleteButton.tsx b/client/src/components/Timeline/TimelineItemEditDeleteButton.tsx
@@ -17,7 +17,7 @@ export function TimelineItemEditDeleteButton({ deleteItem }) {
         deleteItem();
         onClose();
     };
-    const cancelRef = useRef(null);
+    const cancelRef = useRef<HTMLButtonElement>(null!);
 
     return (
         <>

diff --git a/client/src/components/TrackItemTable/ToggleColumnFilter.tsx b/client/src/components/TrackItemTable/ToggleColumnFilter.tsx
@@ -4,13 +4,14 @@ import { SearchIcon } from '@chakra-ui/icons';
 
 export function ToggleColumnFilter({ children }) {
     const { onOpen, onClose, isOpen } = useDisclosure();
-    const firstFieldRef = useRef(null);
+    const firstFieldRef = useRef<HTMLInputElement>(null!);
+
     const form = cloneElement(children, { ref: firstFieldRef, onCancel: onClose });
 
     return (
         <Popover
             isOpen={isOpen}
-            initialFocusRef={firstFieldRef}
+            initialFocusRef={firstFieldRef as React.RefObject<{ focus(): void }>}
             onOpen={onOpen}
             onClose={onClose}
             placement="right"

diff --git a/client/src/hooks/eventListenerHook.ts b/client/src/hooks/eventListenerHook.ts
@@ -27,9 +27,9 @@ function App(){
 }*/
 
 // Hook
-export function useEventListener(eventName, handler, element = window) {
+export function useEventListener(eventName: string, handler: any, element = window) {
     // Create a ref that stores handler
-    const savedHandler: any = useRef();
+    const savedHandler: any = useRef(null);
 
     // Update ref.current value if handler changes.
     // This allows our effect below to always get latest handler ...
@@ -47,7 +47,7 @@ export function useEventListener(eventName, handler, element = window) {
             if (!isSupported) return;
 
             // Create event listener that calls handler function stored in ref
-            const eventListener = event => savedHandler.current(event);
+            const eventListener = (event) => savedHandler.current(event);
 
             // Add event listener
             element.addEventListener(eventName, eventListener);

diff --git a/client/src/hooks/intervalHook.ts b/client/src/hooks/intervalHook.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-export function useInterval(callback, delay) {
-    const savedCallback = useRef<any>();
+export function useInterval(callback: () => void, delay: number | null): void {
+    const savedCallback = useRef<() => void>(() => {});
 
     // Remember the latest callback.
     useEffect(() => {
@@ -10,7 +10,7 @@ export function useInterval(callback, delay) {
 
     // Set up the interval.
     useEffect(() => {
-        function tick() {
+        function tick(): void {
             savedCallback.current();
         }
         if (delay !== null && delay > 0) {

diff --git a/client/src/routes/TimelinePage.tsx b/client/src/routes/TimelinePage.tsx
@@ -22,7 +22,7 @@ export function TimelinePage() {
 
     useInterval(() => {
         bgSyncInterval();
-    }, [BG_SYNC_DELAY_MS]);
+    }, BG_SYNC_DELAY_MS);
 
     useEffect(() => {
         fetchTimerange();

diff --git a/client/src/routes/TrayAppPage.tsx b/client/src/routes/TrayAppPage.tsx
@@ -26,7 +26,7 @@ const TrayAppPageTemp = () => {
 
     useInterval(() => {
         bgSyncInterval();
-    }, [BG_SYNC_DELAY_MS]);
+    }, BG_SYNC_DELAY_MS);
 
     useEffect(() => {
         fetchTimerange();

diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -1,11 +1,13 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+// @ts-expect-error - no TS types yet for beta test.
+import PluginObject from 'babel-plugin-react-compiler';
 
 // https://vite.dev/config/
 export default defineConfig({
     base: './',
-    plugins: [react()],
+    plugins: [[PluginObject], react()],
     server: {
         port: 3000,
         host: '127.0.0.1',

diff --git a/electron/package.json b/electron/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tockler",
-    "version": "3.22.9",
+    "version": "3.22.10",
     "description": "Automatically track applications usage and working time",
     "author": "Maigo Erit <maigo.erit@gmail.com>",
     "license": "GPL-2.0",