From 43d0eca84b8dccdafc4d086972114fc6dccc4091 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Wed, 30 Oct 2024 17:35:15 +0100 Subject: [PATCH] feat: use react-compiler to optimise render --- apps/playground/package.json | 2 + apps/playground/vite.config.ts | 6 +- .../e2e-tests/web-server/vite.config.js | 6 +- packages/editor/package.config.ts | 2 + packages/editor/package.json | 4 +- packages/editor/vitest.workspace.ts | 24 +++- pnpm-lock.yaml | 108 +++++++----------- 7 files changed, 81 insertions(+), 71 deletions(-) diff --git a/apps/playground/package.json b/apps/playground/package.json index c45851eb..666bc272 100644 --- a/apps/playground/package.json +++ b/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", diff --git a/apps/playground/vite.config.ts b/apps/playground/vite.config.ts index ca64e195..03947c0f 100644 --- a/apps/playground/vite.config.ts +++ b/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'}]]}, + }), + ], }) diff --git a/packages/editor/e2e-tests/web-server/vite.config.js b/packages/editor/e2e-tests/web-server/vite.config.js index f03fecd2..319e9326 100644 --- a/packages/editor/e2e-tests/web-server/vite.config.js +++ b/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, }, diff --git a/packages/editor/package.config.ts b/packages/editor/package.config.ts index fcb06e59..6eb6a7a8 100644 --- a/packages/editor/package.config.ts +++ b/packages/editor/package.config.ts @@ -32,4 +32,6 @@ export default defineConfig({ noImplicitBrowsersList: 'off', noImplicitSideEffects: 'error', }, + babel: {reactCompiler: true}, + reactCompilerOptions: {target: '18'}, }) diff --git a/packages/editor/package.json b/packages/editor/package.json index a1e37b73..9f32f82c 100644 --- a/packages/editor/package.json +++ b/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", diff --git a/packages/editor/vitest.workspace.ts b/packages/editor/vitest.workspace.ts index 6a04d348..fa158583 100644 --- a/packages/editor/vitest.workspace.ts +++ b/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'], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3cab3a53..8186071e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,9 @@ importers: react-aria-components: specifier: ^1.2.1 version: 1.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-compiler-runtime: + specifier: 19.0.0-beta-6fc168f-20241025 + version: 19.0.0-beta-6fc168f-20241025(react@18.3.1) react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) @@ -136,6 +139,9 @@ importers: autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.47) + babel-plugin-react-compiler: + specifier: beta + version: 19.0.0-beta-6fc168f-20241025 eslint: specifier: '8' version: 8.57.1 @@ -181,6 +187,9 @@ importers: lodash: specifier: ^4.17.21 version: 4.17.21 + react-compiler-runtime: + specifier: 19.0.0-beta-6fc168f-20241025 + version: 19.0.0-beta-6fc168f-20241025(react@18.3.1) slate: specifier: 0.110.2 version: 0.110.2 @@ -223,7 +232,7 @@ importers: version: link:../gherkin-driver '@sanity/pkg-utils': specifier: ^6.11.8 - version: 6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(debug@4.3.7)(typescript@5.6.3) + version: 6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025)(debug@4.3.7)(typescript@5.6.3) '@sanity/schema': specifier: ^3.62.3 version: 3.62.3(debug@4.3.7) @@ -290,6 +299,9 @@ importers: '@xstate/react': specifier: ^4.1.3 version: 4.1.3(@types/react@18.3.12)(react@18.3.1)(xstate@5.18.2) + babel-plugin-react-compiler: + specifier: beta + version: 19.0.0-beta-6fc168f-20241025 dotenv: specifier: ^16.4.5 version: 16.4.5 @@ -370,7 +382,7 @@ importers: version: 29.7.0 '@sanity/pkg-utils': specifier: ^6.11.8 - version: 6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(debug@4.3.7)(typescript@5.6.3) + version: 6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025)(debug@4.3.7)(typescript@5.6.3) typescript: specifier: 5.6.3 version: 5.6.3 @@ -389,7 +401,7 @@ importers: devDependencies: '@sanity/pkg-utils': specifier: ^6.11.8 - version: 6.11.8(@types/babel__core@7.20.5)(typescript@5.6.3) + version: 6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025)(debug@4.3.7)(typescript@5.6.3) '@types/lodash': specifier: ^4.17.12 version: 4.17.12 @@ -2901,8 +2913,8 @@ packages: resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==} engines: {node: '>=0.4.0'} - acorn@8.13.0: - resolution: {integrity: sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==} + acorn@8.14.0: + resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==} engines: {node: '>=0.4.0'} hasBin: true @@ -3050,6 +3062,9 @@ packages: peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 + babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025: + resolution: {integrity: sha512-wFVeXhF0hkiRe4bEM0jzeTFMlMbcKNTwhXcFvqUIVB6WXf+3vdwOWGWnw7jwvDb2mzvsIZOFt/96itOFt1rwjw==} + babel-preset-current-node-syntax@1.1.0: resolution: {integrity: sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==} peerDependencies: @@ -5060,6 +5075,11 @@ packages: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0 + react-compiler-runtime@19.0.0-beta-6fc168f-20241025: + resolution: {integrity: sha512-XY5p6GUVaz8P0c/B/2ebqz/xdp0YOtidtOSuiYyQB05fMws0Qys+zubDH7IKQBEtw4AKoCzrJ6ReeTtFLOKniw==} + peerDependencies: + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -8795,57 +8815,7 @@ snapshots: dependencies: react: 18.3.1 - '@sanity/pkg-utils@6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(debug@4.3.7)(typescript@5.6.3)': - dependencies: - '@babel/core': 7.26.0 - '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0) - '@babel/types': 7.26.0 - '@microsoft/api-extractor': 7.47.11(@types/node@18.19.59) - '@microsoft/tsdoc-config': 0.17.0 - '@optimize-lodash/rollup-plugin': 5.0.0(rollup@4.24.3) - '@rollup/plugin-alias': 5.1.1(rollup@4.24.3) - '@rollup/plugin-babel': 6.0.4(@babel/core@7.26.0)(@types/babel__core@7.20.5)(rollup@4.24.3) - '@rollup/plugin-commonjs': 28.0.1(rollup@4.24.3) - '@rollup/plugin-json': 6.1.0(rollup@4.24.3) - '@rollup/plugin-node-resolve': 15.3.0(rollup@4.24.3) - '@rollup/plugin-replace': 6.0.1(rollup@4.24.3) - '@rollup/plugin-terser': 0.4.4(rollup@4.24.3) - '@sanity/browserslist-config': 1.0.3 - browserslist: 4.24.2 - cac: 6.7.14 - chalk: 4.1.2 - chokidar: 4.0.1 - esbuild: 0.24.0 - esbuild-register: 3.6.0(esbuild@0.24.0) - find-config: 1.0.0 - get-latest-version: 5.1.0(debug@4.3.7) - git-url-parse: 15.0.0 - globby: 11.1.0 - jsonc-parser: 3.3.1 - mkdirp: 3.0.1 - outdent: 0.8.0 - parse-git-config: 3.0.0 - pkg-up: 3.1.0 - prettier: 3.3.3 - pretty-bytes: 5.6.0 - prompts: 2.4.2 - recast: 0.23.9 - rimraf: 4.4.1 - rollup: 4.24.3 - rollup-plugin-esbuild: 6.1.1(esbuild@0.24.0)(rollup@4.24.3) - rxjs: 7.8.1 - treeify: 1.1.0 - typescript: 5.6.3 - uuid: 10.0.0 - zod: 3.23.8 - zod-validation-error: 3.4.0(zod@3.23.8) - transitivePeerDependencies: - - '@types/babel__core' - - '@types/node' - - debug - - supports-color - - '@sanity/pkg-utils@6.11.8(@types/babel__core@7.20.5)(typescript@5.6.3)': + '@sanity/pkg-utils@6.11.8(@types/babel__core@7.20.5)(@types/node@18.19.59)(babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025)(debug@4.3.7)(typescript@5.6.3)': dependencies: '@babel/core': 7.26.0 '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0) @@ -8889,6 +8859,8 @@ snapshots: uuid: 10.0.0 zod: 3.23.8 zod-validation-error: 3.4.0(zod@3.23.8) + optionalDependencies: + babel-plugin-react-compiler: 19.0.0-beta-6fc168f-20241025 transitivePeerDependencies: - '@types/babel__core' - '@types/node' @@ -9397,15 +9369,15 @@ snapshots: mime-types: 2.1.35 negotiator: 0.6.3 - acorn-jsx@5.3.2(acorn@8.13.0): + acorn-jsx@5.3.2(acorn@8.14.0): dependencies: - acorn: 8.13.0 + acorn: 8.14.0 acorn-walk@8.3.4: dependencies: - acorn: 8.13.0 + acorn: 8.14.0 - acorn@8.13.0: {} + acorn@8.14.0: {} agent-base@7.1.1: dependencies: @@ -9571,6 +9543,10 @@ snapshots: transitivePeerDependencies: - supports-color + babel-plugin-react-compiler@19.0.0-beta-6fc168f-20241025: + dependencies: + '@babel/types': 7.26.0 + babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.0): dependencies: '@babel/core': 7.26.0 @@ -10116,8 +10092,8 @@ snapshots: espree@9.6.1: dependencies: - acorn: 8.13.0 - acorn-jsx: 5.3.2(acorn@8.13.0) + acorn: 8.14.0 + acorn-jsx: 5.3.2(acorn@8.14.0) eslint-visitor-keys: 3.4.3 esprima@4.0.1: {} @@ -11867,6 +11843,10 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-compiler-runtime@19.0.0-beta-6fc168f-20241025(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -12434,7 +12414,7 @@ snapshots: terser@5.36.0: dependencies: '@jridgewell/source-map': 0.3.6 - acorn: 8.13.0 + acorn: 8.14.0 commander: 2.20.3 source-map-support: 0.5.21 @@ -12526,7 +12506,7 @@ snapshots: '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 '@types/node': 18.19.59 - acorn: 8.13.0 + acorn: 8.14.0 acorn-walk: 8.3.4 arg: 4.1.3 create-require: 1.1.1