feat: use react-compiler to optimise render

apps/playground/package.json

@@ -24,6 +24,7 @@
     "prettier": "^3.3.2",
     "react": "^18.3.1",
     "react-aria-components": "^1.2.1",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "remeda": "^2.2.2",
@@ -45,6 +46,7 @@
     "@typescript-eslint/parser": "^8.12.2",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
+    "babel-plugin-react-compiler": "beta",
     "eslint": "8",
     "eslint-plugin-react-compiler": "beta",
     "eslint-plugin-react-hooks": "^5.0.0",

apps/playground/vite.config.ts

@@ -3,5 +3,9 @@ import {defineConfig} from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+    }),
+  ],
 })

packages/editor/e2e-tests/web-server/vite.config.js

@@ -3,7 +3,11 @@ import {defineConfig} from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [viteReact()],
+  plugins: [
+    viteReact({
+      babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+    }),
+  ],
   build: {
     minify: false,
   },

packages/editor/package.config.ts

@@ -32,4 +32,6 @@ export default defineConfig({
     noImplicitBrowsersList: 'off',
     noImplicitSideEffects: 'error',
   },
+  babel: {reactCompiler: true},
+  reactCompilerOptions: {target: '18'},
 })

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.2.0",
+  "version": "1.1.12-canary.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -60,6 +60,7 @@
     "debug": "^4.3.4",
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
+    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "slate": "0.110.2",
     "slate-react": "0.110.3",
     "use-effect-event": "^1.0.2",
@@ -98,6 +99,7 @@
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.4",
     "@xstate/react": "^4.1.3",
+    "babel-plugin-react-compiler": "beta",
     "dotenv": "^16.4.5",
     "eslint": "8",
     "eslint-plugin-react-compiler": "beta",

packages/editor/vitest.workspace.ts

@@ -4,7 +4,11 @@ import {defineWorkspace} from 'vitest/config'
 
 export default defineWorkspace([
   {
-    plugins: [react()],
+    plugins: [
+      react({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
+    ],
     test: {
       name: 'chromium',
       include: ['gherkin-tests/**/*.test.ts'],
@@ -18,7 +22,11 @@ export default defineWorkspace([
     },
   },
   {
-    plugins: [react()],
+    plugins: [
+      react({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
+    ],
     test: {
       name: 'firefox',
       include: ['gherkin-tests/**/*.test.ts'],
@@ -32,7 +40,11 @@ export default defineWorkspace([
     },
   },
   {
-    plugins: [react()],
+    plugins: [
+      react({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
+    ],
     test: {
       name: 'webkit',
       include: ['gherkin-tests/**/*.test.ts'],
@@ -46,7 +58,11 @@ export default defineWorkspace([
     },
   },
   {
-    plugins: [react()],
+    plugins: [
+      react({
+        babel: {plugins: [['babel-plugin-react-compiler', {target: '18'}]]},
+      }),
+    ],
     test: {
       name: 'unit',
       exclude: ['node_modules', 'e2e-tests', 'gherkin-tests'],