Skip to content

Commit 9a319f1

Browse files
SeanCassiereSeanCassiere
authored
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
1 parent a12f8bb commit 9a319f1

File tree

8 files changed

+56
-52
lines changed

8 files changed

+56
-52
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,11 @@
9292
"@types/react-signature-canvas": "^1.0.5",
9393
"@vitejs/plugin-react": "^4.3.1",
9494
"autoprefixer": "^10.4.20",
95-
"babel-plugin-react-compiler": "0.0.0-experimental-7d62301-20240821",
95+
"babel-plugin-react-compiler": "0.0.0-experimental-7449567-20240905",
9696
"eslint": "^9.9.1",
9797
"eslint-config-prettier": "^9.1.0",
9898
"eslint-plugin-react": "^7.35.2",
99-
"eslint-plugin-react-compiler": "0.0.0-experimental-8e3b87c-20240821",
99+
"eslint-plugin-react-compiler": "0.0.0-experimental-8d8bd53-20240905",
100100
"eslint-plugin-react-hooks": "5.1.0-beta-26f2496093-20240514",
101101
"globals": "^15.9.0",
102102
"postcss": "^8.4.45",

‎pnpm-lock.yaml

+10-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ui/input-datetime.tsx

+38-34
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ interface InputDatetimeProps extends React.HTMLAttributes<HTMLDivElement> {
1515

1616
function InputDatetime(props: InputDatetimeProps) {
1717
const elementId = React.useRef(generateShortId());
18+
// eslint-disable-next-line react-compiler/react-compiler
1819
const id = props.id ?? elementId.current;
1920

2021
const [date, setDate] = React.useState<Date | undefined>(
@@ -62,42 +63,45 @@ function InputDatetime(props: InputDatetimeProps) {
6263
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"
6364
{...getRootProps()}
6465
>
65-
{segments.map((segment, idx) => {
66-
if (segment.type === "separator") {
66+
{
67+
// eslint-disable-next-line react-compiler/react-compiler
68+
segments.map((segment, idx) => {
69+
if (segment.type === "separator") {
70+
return (
71+
<span
72+
key={`${id}-separator-${idx}`}
73+
className="separator m-0 font-mono text-[60%] text-muted-foreground"
74+
>
75+
{segment.value}
76+
</span>
77+
);
78+
}
79+
80+
const inputId = idx === 0 ? id : `${id}-${segment.type}`;
81+
const placeholder =
82+
segment.type !== "am/pm" ? segment.value : undefined;
83+
6784
return (
68-
<span
69-
key={`${id}-separator-${idx}`}
70-
className="separator m-0 font-mono text-[60%] text-muted-foreground"
71-
>
72-
{segment.value}
73-
</span>
85+
<input
86+
key={`${id}-${segment.type}-${idx}`}
87+
id={inputId}
88+
placeholder={placeholder}
89+
disabled={props.disabled}
90+
readOnly={props.readOnly}
91+
onFocus={props.onDateFocus}
92+
onBlur={props.onDateBlur}
93+
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"
94+
style={
95+
{
96+
"--char-length": `${segment.type === "years" ? 4 : segment.type === "am/pm" ? 2.5 : 2}ch`,
97+
minWidth: "calc(var(--char-length) + 0.25rem)",
98+
} as React.CSSProperties
99+
}
100+
{...getInputProps(segment.type)}
101+
/>
74102
);
75-
}
76-
77-
const inputId = idx === 0 ? id : `${id}-${segment.type}`;
78-
const placeholder =
79-
segment.type !== "am/pm" ? segment.value : undefined;
80-
81-
return (
82-
<input
83-
key={`${id}-${segment.type}-${idx}`}
84-
id={inputId}
85-
placeholder={placeholder}
86-
disabled={props.disabled}
87-
readOnly={props.readOnly}
88-
onFocus={props.onDateFocus}
89-
onBlur={props.onDateBlur}
90-
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"
91-
style={
92-
{
93-
"--char-length": `${segment.type === "years" ? 4 : segment.type === "am/pm" ? 2.5 : 2}ch`,
94-
minWidth: "calc(var(--char-length) + 0.25rem)",
95-
} as React.CSSProperties
96-
}
97-
{...getInputProps(segment.type)}
98-
/>
99-
);
100-
})}
103+
})
104+
}
101105
</div>
102106
);
103107
}

‎src/routes/_auth/(reports)/-components/view-report/plugin/table.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ function ReportTableContent<TData, TValue>(
113113
}
114114
return colSizes;
115115
// eslint-disable-next-line react-compiler/react-compiler
116-
// eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
116+
// eslint-disable-next-line react-hooks/exhaustive-deps
117117
}, [table.getState().columnSizingInfo, table.getFlatHeaders()]);
118118

119119
const visibleColumns = React.useMemo(

‎src/routes/_auth/(reports)/-components/view-report/plugin/view-columns.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const ViewColumns: ReportTablePlugin = (props) => {
2020
const allLeafColumns = React.useMemo(
2121
() => table.getAllLeafColumns(),
2222
// eslint-disable-next-line react-compiler/react-compiler
23-
// eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
23+
// eslint-disable-next-line react-hooks/exhaustive-deps
2424
[table.getAllLeafColumns()]
2525
);
2626

‎src/routes/_auth/-modules/table-list/column-visibility.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function TableListColumnVisibilityDropdown() {
2020
const columns = React.useMemo(
2121
() => table.getAllColumns(),
2222
// eslint-disable-next-line react-compiler/react-compiler
23-
// eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
23+
// eslint-disable-next-line react-hooks/exhaustive-deps
2424
[table.getAllColumns()]
2525
);
2626

‎src/routes/_auth/-modules/table-list/content.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ function TableListContent(props: TableListContentProps) {
5151
const rowModel = React.useMemo(
5252
() => table.getRowModel(),
5353
// eslint-disable-next-line react-compiler/react-compiler
54-
// eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
54+
// eslint-disable-next-line react-hooks/exhaustive-deps
5555
[table.getRowModel()]
5656
);
5757

‎src/routes/_auth/-modules/table-list/toolbar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ function TableListToolbarActions({
129129
const tableFilters = React.useMemo(
130130
() => table.getState().columnFilters,
131131
// eslint-disable-next-line react-compiler/react-compiler
132-
// eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
132+
// eslint-disable-next-line react-hooks/exhaustive-deps
133133
[table.getState().columnFilters]
134134
);
135135

@@ -280,7 +280,7 @@ function ToolbarFilter({
280280
const baseState = React.useMemo(
281281
() => table.getState().columnFilters.find((item) => item.id === id),
282282
// eslint-disable-next-line react-compiler/react-compiler
283-
// eslint-disable-next-line react-hooks/exhaustive-deps, react-compiler/react-compiler
283+
// eslint-disable-next-line react-hooks/exhaustive-deps
284284
[id, table.getState().columnFilters]
285285
);
286286

0 commit comments

Comments
 (0)