chore: upgrade react-compiler's eslint and babel plugins (#418)

* chore: upgrade react-compiler's eslint and babel plugins * refactor: linting warnings related to the react-compiler
SeanCassiere · Sep 7, 2024 · 9a319f1 · 9a319f1
1 parent a12f8bb
commit 9a319f1
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -92,11 +92,11 @@
     "@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-7d62301-20240821",
+    "babel-plugin-react-compiler": "0.0.0-experimental-7449567-20240905",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.35.2",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-8e3b87c-20240821",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-8d8bd53-20240905",
     "eslint-plugin-react-hooks": "5.1.0-beta-26f2496093-20240514",
     "globals": "^15.9.0",
     "postcss": "^8.4.45",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ui/input-datetime.tsx b/src/components/ui/input-datetime.tsx
@@ -15,6 +15,7 @@ interface InputDatetimeProps extends React.HTMLAttributes<HTMLDivElement> {
 
 function InputDatetime(props: InputDatetimeProps) {
   const elementId = React.useRef(generateShortId());
+  // eslint-disable-next-line react-compiler/react-compiler
   const id = props.id ?? elementId.current;
 
   const [date, setDate] = React.useState<Date | undefined>(
@@ -62,42 +63,45 @@ function InputDatetime(props: InputDatetimeProps) {
       className="flex h-10 items-center justify-start gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background duration-100 focus-within:border-input focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
       {...getRootProps()}
     >
-      {segments.map((segment, idx) => {
-        if (segment.type === "separator") {
+      {
+        // eslint-disable-next-line react-compiler/react-compiler
+        segments.map((segment, idx) => {
+          if (segment.type === "separator") {
+            return (
+              <span
+                key={`${id}-separator-${idx}`}
+                className="separator m-0 font-mono text-[60%] text-muted-foreground"
+              >
+                {segment.value}
+              </span>
+            );
+          }
+
+          const inputId = idx === 0 ? id : `${id}-${segment.type}`;
+          const placeholder =
+            segment.type !== "am/pm" ? segment.value : undefined;
+
           return (
-            <span
-              key={`${id}-separator-${idx}`}
-              className="separator m-0 font-mono text-[60%] text-muted-foreground"
-            >
-              {segment.value}
-            </span>
+            <input
+              key={`${id}-${segment.type}-${idx}`}
+              id={inputId}
+              placeholder={placeholder}
+              disabled={props.disabled}
+              readOnly={props.readOnly}
+              onFocus={props.onDateFocus}
+              onBlur={props.onDateBlur}
+              className="inline-block h-full flex-grow-0 rounded-sm border-none bg-transparent px-0.5 font-sans text-sm tabular-nums text-foreground caret-transparent outline-none ring-0 selection:bg-foreground selection:text-background placeholder:font-mono focus:bg-foreground focus:text-background focus:ring-0"
+              style={
+                {
+                  "--char-length": `${segment.type === "years" ? 4 : segment.type === "am/pm" ? 2.5 : 2}ch`,
+                  minWidth: "calc(var(--char-length) + 0.25rem)",
+                } as React.CSSProperties
+              }
+              {...getInputProps(segment.type)}
+            />
           );
-        }
-
-        const inputId = idx === 0 ? id : `${id}-${segment.type}`;
-        const placeholder =
-          segment.type !== "am/pm" ? segment.value : undefined;
-
-        return (
-          <input
-            key={`${id}-${segment.type}-${idx}`}
-            id={inputId}
-            placeholder={placeholder}
-            disabled={props.disabled}
-            readOnly={props.readOnly}
-            onFocus={props.onDateFocus}
-            onBlur={props.onDateBlur}
-            className="inline-block h-full flex-grow-0 rounded-sm border-none bg-transparent px-0.5 font-sans text-sm tabular-nums text-foreground caret-transparent outline-none ring-0 selection:bg-foreground selection:text-background placeholder:font-mono focus:bg-foreground focus:text-background focus:ring-0"
-            style={
-              {
-                "--char-length": `${segment.type === "years" ? 4 : segment.type === "am/pm" ? 2.5 : 2}ch`,
-                minWidth: "calc(var(--char-length) + 0.25rem)",
-              } as React.CSSProperties
-            }
-            {...getInputProps(segment.type)}
-          />
-        );
-      })}
+        })
+      }
     </div>
   );
 }

diff --git a/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx b/src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx
@@ -113,7 +113,7 @@ function ReportTableContent<TData, TValue>(
     }
     return colSizes;
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo, table.getFlatHeaders()]);
 
   const visibleColumns = React.useMemo(

diff --git a/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx b/src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx
@@ -20,7 +20,7 @@ export const ViewColumns: ReportTablePlugin = (props) => {
   const allLeafColumns = React.useMemo(
     () => table.getAllLeafColumns(),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getAllLeafColumns()]
   );
 

diff --git a/src/routes/_auth/-modules/table-list/column-visibility.tsx b/src/routes/_auth/-modules/table-list/column-visibility.tsx
@@ -20,7 +20,7 @@ function TableListColumnVisibilityDropdown() {
   const columns = React.useMemo(
     () => table.getAllColumns(),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getAllColumns()]
   );
 

diff --git a/src/routes/_auth/-modules/table-list/content.tsx b/src/routes/_auth/-modules/table-list/content.tsx
@@ -51,7 +51,7 @@ function TableListContent(props: TableListContentProps) {
   const rowModel = React.useMemo(
     () => table.getRowModel(),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getRowModel()]
   );
 

diff --git a/src/routes/_auth/-modules/table-list/toolbar.tsx b/src/routes/_auth/-modules/table-list/toolbar.tsx
@@ -129,7 +129,7 @@ function TableListToolbarActions({
   const tableFilters = React.useMemo(
     () => table.getState().columnFilters,
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [table.getState().columnFilters]
   );
 
@@ -280,7 +280,7 @@ function ToolbarFilter({
   const baseState = React.useMemo(
     () => table.getState().columnFilters.find((item) => item.id === id),
     // eslint-disable-next-line react-compiler/react-compiler
-    // eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [id, table.getState().columnFilters]
   );