引入 React Compiler

LeafYeeXYZ · May 23, 2024 · 3677de5 · 3677de5
1 parent 22160e9
commit 3677de5
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 5 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -8,11 +8,15 @@ module.exports = {
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: [
+    'react-refresh',
+    'eslint-plugin-react-compiler',
+  ],
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
+    'react-compiler/react-compiler': 'error',
   },
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -29,13 +29,16 @@
     "swiper": "^11.1.3"
   },
   "devDependencies": {
+    "@types/bun": "^1.1.2",
     "@types/react": "npm:types-react@beta",
     "@types/react-dom": "npm:types-react-dom@beta",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
+    "babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
+    "eslint": "^9.0.0",
     "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "typescript": "^5.4.5",

diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
@@ -29,7 +29,7 @@ interface PromptProps {
   setCurrentImages: React.Dispatch<React.SetStateAction<Image[]>>
   dialogAction: React.Dispatch<DialogAction>
   langMode: 'zh' | 'en'
-  status: React.MutableRefObject<string>
+  status: React.RefObject<string>
   children: JSX.Element
   geneMode: 'textToImage' | 'imageToImage'
   fileRef: React.RefObject<HTMLInputElement | null>

diff --git a/src/components/Widgets/ImageSelector.tsx b/src/components/Widgets/ImageSelector.tsx
@@ -23,7 +23,7 @@ function ImageSelector({ ref, geneMode, dialogAction }: ImageSelectorProps) {
     }
     callback()
     // 防抖处理
-    let timer: number
+    let timer: Timer
     const newCallback = () => {
       clearTimeout(timer)
       timer = setTimeout(callback, 200)

diff --git a/vite.config.ts b/vite.config.ts
@@ -3,7 +3,13 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react({
+    babel: {
+      plugins: [
+        ['babel-plugin-react-compiler', {}],
+      ],
+    },
+  })],
   build: {
     // 修改编译目标后记得同步修改 check.ts 中的版本号
     target: ['chrome108', 'edge108', 'firefox101', 'safari15.4'],