feat: use react-compiler to optimise render

.github/eslint-compact.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "eslint-compact",
+      "pattern": [
+        {
+          "regexp": "^(.+):\\sline\\s(\\d+),\\scol\\s(\\d+),\\s(Error|Warning|Info)\\s-\\s(.+)\\s\\((.+)\\)\\.?$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "severity": 4,
+          "message": 5,
+          "code": 6
+        }
+      ]
+    }
+  ]
+}

.github/workflows/check-react-compiler.yml

@@ -0,0 +1,55 @@
+name: check-react-compiler
+
+on:
+  # Build on pushes branches that have a PR (including drafts)
+  pull_request:
+  # Build on commits pushed to branches without a PR if it's in the allowlist
+  push:
+    branches: [main]
+
+jobs:
+  check-lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Cache node modules
+        id: cache-node-modules
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ env.cache-name }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            v1-${{ runner.os }}-pnpm-store-${{ env.cache-name }}-
+            v1-${{ runner.os }}-pnpm-store-
+            v1-${{ runner.os }}-
+
+      - name: Install project dependencies
+        run: pnpm install
+
+      - name: Register Problem Matcher for ESLint that handles -f compact and shows warnings inline on PRs
+        run: echo "::add-matcher::.github/eslint-compact.json"
+
+      - name: Check react compiler on editor
+        working-directory: packages/editor
+        run: pnpm check:react-compiler -f compact
+
+      - name: Check react compiler on playground
+        working-directory: apps/playground
+        run: pnpm check:react-compiler -f compact

apps/playground/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.eslintcache

apps/playground/package.json

@@ -7,6 +7,7 @@
     "build": "tsc -b && vite build",
     "check:lint": "biome lint .",
     "check:types": "tsc --noEmit --pretty",
+    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --plugin react-hooks --rule 'react-compiler/react-compiler: [warn]' --rule 'react-hooks/rules-of-hooks: [error]' --rule 'react-hooks/exhaustive-deps: [error]' src",
     "clean": "del .turbo && del dist && del node_modules",
     "dev": "vite",
     "lint:fix": "biome lint --write .",
@@ -23,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",
@@ -40,8 +42,14 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.0",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@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",
     "postcss": "^8.4.47",
     "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.2.1",

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/.gitignore

@@ -11,3 +11,4 @@
 # Compiled code
 /lib
 /dist
+.eslintcache

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.1.11",
+  "version": "1.1.12-canary.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -45,6 +45,7 @@
     "build": "pkg-utils build --strict --check --clean",
     "check:lint": "biome lint .",
     "check:types": "tsc",
+    "check:react-compiler": "eslint --cache --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --plugin react-hooks --rule 'react-compiler/react-compiler: [warn]' --rule 'react-hooks/rules-of-hooks: [error]' --rule 'react-hooks/exhaustive-deps: [error]' src",
     "clean": "del .turbo && del lib && del node_modules",
     "dev": "pkg-utils watch",
     "lint:fix": "biome lint --write .",
@@ -59,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",
     "xstate": "^5.18.2"
@@ -91,10 +93,16 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/ws": "~8.5.12",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
     "@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",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "express": "^4.21.1",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",