210-feat: React Compiler

.eslintrc.cjs

@@ -10,7 +10,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:css-import-order/recommended',
   ],
-  plugins: ['react-refresh', 'css-import-order', 'sort-exports'],
+  plugins: ['react-refresh', 'css-import-order', 'sort-exports', 'eslint-plugin-react-compiler'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   parserOptions: {

package.json

@@ -20,8 +20,10 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-51a85ea-20240601",
     "nextjs-toploader": "^1.6.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/app/hooks/index.ts

@@ -1,3 +1,4 @@
+export { c } from './use-c';
 export { useCourseByTitle } from './use-course-by-title';
 export { useDataByName } from './use-data-by-name';
 export { useNearestCourse } from './use-nearest-course';

src/app/hooks/use-c/index.ts

@@ -0,0 +1 @@
+export { c } from './use-c';

src/app/hooks/use-c/use-c.ts

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export function c(size: number) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useState(() => new Array(size))[0];
+}

vite.config.ts

@@ -3,7 +3,23 @@ import path from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          [
+            'babel-plugin-react-compiler',
+            {
+              runtimeModule: '@/app/hooks',
+              environment: {
+                validateNoRefAccessRender: true,
+              },
+            },
+          ],
+        ],
+      },
+    }),
+  ],
   build: {
     outDir: 'build',
   },