Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(richtext-lexical)!: significantly reduce lexical rerendering and amount of network requests from blocks #9255

Merged
merged 6 commits into from
Nov 17, 2024

Conversation

AlessioGr
Copy link
Member

@AlessioGr AlessioGr commented Nov 16, 2024

The field RSC now provides an initial state for all lexical blocks. This completely obliterates any flashes and lexical block loading states when loading or saving a document.

Previously, when a document is loaded or saved, every lexical block was sending a network request in order to fetch their form state. Now, this is batched and handled in the lexical server component. All lexical block form states are sent to the client together with the parent lexical field, and are thus available immediately.

We also do the same with block collapsed preferences. Thus, there are no loading states or layout shifts/flashes of blocks anymore.

Additionally, when saving a document while your cursor is inside a lexical field, the cursor position is preserved. Previously, a document save would kick your cursor out of the lexical field.

Look at how nice this is:

CleanShot.2024-11-16.at.15.38.44.mp4

BREAKING:

This removes the feature.hooks.load and feature.hooks.save interfaces from custom lexical features, as they weren't used internally and added unnecessary, additional overhead.

If you have custom features that use those, you can migrate to using normal payload hooks that run on the server instead of the client.

…amount of network requests from blocks. The field RSC now provides an initial state for all lexical blocks
Copy link

socket-security bot commented Nov 16, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@aws-sdk/client-cognito-identity@3.687.0 Transitive: environment, filesystem, network +69 4.38 MB amzn-oss, aws-sdk-bot, kuhe, ...2 more
npm/@aws-sdk/client-s3@3.687.0 Transitive: environment, filesystem, network +92 7.85 MB amzn-oss, aws-sdk-bot, kuhe, ...2 more
npm/@aws-sdk/credential-providers@3.687.0 Transitive: environment, filesystem, network +70 4 MB aws-sdk-bot
npm/@aws-sdk/lib-storage@3.687.0 filesystem Transitive: environment, network +27 1.39 MB aws-sdk-bot
npm/@azure/abort-controller@1.1.0 None 0 65 kB azure-sdk
npm/@azure/storage-blob@12.25.0 filesystem Transitive: environment +11 11.9 MB microsoft1es
npm/@babel/cli@7.25.9 Transitive: filesystem, shell +5 583 kB existentialism, hzoo, jlhwung, ...1 more
npm/@babel/core@7.26.0 environment, filesystem, unsafe +25 10.8 MB nicolo-ribaudo
npm/@babel/preset-env@7.26.0 Transitive: environment, filesystem, unsafe +99 12.2 MB existentialism, hzoo, jlhwung, ...1 more
npm/@babel/preset-react@7.25.9 Transitive: environment +23 6.53 MB existentialism, hzoo, jlhwung, ...1 more
npm/@babel/preset-typescript@7.26.0 Transitive: environment +29 7.35 MB existentialism, hzoo, jlhwung, ...1 more
npm/@clack/prompts@0.7.0 None +1 354 kB natemoo-re
npm/@eslint-react/eslint-plugin@1.16.1 Transitive: environment +23 4.47 MB rel1cx
npm/@eslint/js@9.14.0 None 0 14.6 kB eslintbot
npm/@google-cloud/storage@7.14.0 None +8 1.79 MB google-wombot
npm/@hyrious/esbuild-plugin-commonjs@0.2.4 filesystem 0 47.5 kB hyrious
npm/@jest/globals@29.7.0 Transitive: eval +13 741 kB simenb
npm/@lexical/eslint-plugin@0.20.0 environment 0 66.3 kB acywatson
npm/@lexical/headless@0.20.0 environment 0 9.66 kB acywatson
npm/@lexical/link@0.20.0 environment 0 48.1 kB acywatson
npm/@lexical/list@0.20.0 environment 0 140 kB acywatson
npm/@lexical/mark@0.20.0 environment 0 31.9 kB acywatson
npm/@lexical/markdown@0.20.0 environment +2 318 kB acywatson
npm/@lexical/react@0.20.0 Transitive: environment +12 1.48 MB acywatson
npm/@lexical/rich-text@0.20.0 environment +2 175 kB acywatson
npm/@lexical/selection@0.20.0 environment 0 112 kB acywatson
npm/@lexical/table@0.20.0 environment +2 438 kB acywatson
npm/@lexical/utils@0.20.0 environment 0 106 kB acywatson
npm/@libsql/client@0.14.0 Transitive: network +4 484 kB penberg
npm/@next/bundle-analyzer@15.0.0 None 0 3.38 kB vercel-release-bot
npm/@next/env@15.0.3 None 0 11.8 kB vercel-release-bot
npm/@playwright/test@1.48.1 None 0 25.5 kB dgozman-ms, mxschmitt, pavelfeldman, ...1 more
npm/@sentry/nextjs@8.37.1 environment, filesystem, network +34 30 MB sentry-bot
npm/@sentry/node@8.37.1 environment, unsafe Transitive: filesystem, network +46 20.3 MB sentry-bot
npm/@sentry/react@7.119.2 Transitive: network +9 10.9 MB sentry-bot
npm/@sentry/types@8.37.1 None 0 338 kB benvinegar, billyvg, evanpurkhiser, ...8 more
npm/@sindresorhus/slugify@1.1.2 None +3 37.4 kB sindresorhus
npm/@swc-node/register@1.10.9 environment, filesystem +6 436 kB broooooklyn
npm/@swc/cli@0.4.0 environment, filesystem Transitive: network, shell +7 1.19 MB kdy1
npm/@swc/core@1.7.10 environment, filesystem, shell +2 309 kB kdy1
npm/@swc/jest@0.2.36 filesystem Transitive: environment +10 592 kB kdy1
npm/@types/body-scroll-lock@3.1.2 None 0 3.46 kB types
npm/@types/escape-html@1.0.4 None 0 4.45 kB types
npm/@types/eslint__js@8.42.3 None 0 3.17 kB types
npm/@types/eslint@9.6.1 None +1 221 kB types
npm/@types/esprima@4.0.6 None +1 32.4 kB types
npm/@types/find-node-modules@2.1.2 None 0 4.92 kB types
npm/@types/fs-extra@11.0.4 None +1 42.5 kB types
npm/@types/fs-extra@9.0.13 None 0 27.9 kB types
npm/@types/is-hotkey@0.1.10 None 0 5.68 kB types
npm/@types/jest@29.5.12 None 0 78.7 kB types
npm/@types/lodash.get@4.4.9 None +1 871 kB types
npm/@types/minimist@1.2.2 None 0 6.72 kB types
npm/@types/minimist@1.2.5 None 0 6.27 kB types
npm/@types/mongoose-aggregate-paginate-v2@1.0.12 None 0 5.6 kB types
npm/@types/node@22.5.4 None 0 2.2 MB types
npm/@types/nodemailer@6.4.14 None 0 89.8 kB types
npm/@types/pg@8.10.2 None 0 14.4 kB types
npm/@types/pluralize@0.0.33 None 0 5.77 kB types
npm/@types/prompts@2.4.9 None 0 7.96 kB types
npm/@types/range-parser@1.2.7 None 0 4.62 kB types
npm/@types/react-datepicker@6.2.0 None +6 6.12 MB types
npm/@types/semver@7.5.8 None 0 23.3 kB types
npm/@types/shelljs@0.8.15 None +2 68.5 kB types
npm/@types/to-snake-case@1.0.0 None 0 2.64 kB types
npm/@types/ws@8.5.13 None 0 21.6 kB types
npm/@typescript-eslint/parser@8.14.0 Transitive: environment +6 1.48 MB bradzacher, jameshenry
npm/@vercel/blob@0.22.3 environment, network +2 306 kB vercel-release-bot
npm/@vercel/postgres@0.9.0 environment Transitive: network +3 850 kB vercel-release-bot
npm/arg@5.0.2 None 0 13.7 kB leerobinson
npm/babel-plugin-react-compiler@0.0.0-experimental-24ec0eb-20240918 Transitive: environment +4 8.34 MB react-bot
npm/babel-plugin-transform-remove-imports@1.8.0 None 0 8.92 kB wcjiang
npm/changelogen@0.5.7 Transitive: environment, filesystem +9 849 kB pi0
npm/comment-json@4.2.5 None +2 87.5 kB kael
npm/console-table-printer@2.12.1 None 0 45 kB ayonknan
npm/copyfiles@2.4.1 filesystem 0 22.9 kB cwmma
npm/croner@9.0.0 None 0 104 kB hexagon
npm/date-fns@4.1.0 None 0 22.6 MB kossnocorp
npm/dotenv@16.4.5 environment, filesystem 0 79.1 kB motdotla
npm/drizzle-kit@0.28.0 Transitive: environment, eval, filesystem, network, shell, unsafe +7 7.86 MB alexblokh, dankochetov, kyrylo_usichenko, ...1 more
npm/drizzle-orm@0.36.1 None 0 6.48 MB dankochetov
npm/esbuild-sass-plugin@3.3.1 filesystem 0 91.3 kB glromeo
npm/eslint-config-prettier@9.1.0 None 0 20.8 kB lydell
npm/eslint-plugin-import-x@4.4.2 Transitive: environment +11 2.98 MB jounqin
npm/eslint-plugin-jest-dom@5.4.0 None +1 334 kB benmonro
npm/eslint-plugin-jest@28.9.0 filesystem Transitive: environment +8 2.48 MB simenb
npm/eslint-plugin-perfectionist@3.9.1 Transitive: environment +8 2.59 MB azat-io
npm/eslint-plugin-playwright@1.7.0 None 0 331 kB mxschmitt
npm/eslint-plugin-react-compiler@19.0.0-beta-a7bf2bd-20241110 Transitive: environment +22 8.59 MB react-bot
npm/eslint-plugin-regexp@2.6.0 None +4 2.08 MB ota-meshi
npm/eslint@9.14.0 environment Transitive: eval, filesystem, shell, unsafe +20 6.62 MB eslintbot

🚮 Removed packages: npm/@aws-crypto/crc32@3.0.0, npm/@aws-crypto/ie11-detection@3.0.0, npm/@aws-crypto/sha256-browser@3.0.0, npm/@aws-crypto/supports-web-crypto@3.0.0, npm/@aws-crypto/util@3.0.0, npm/@aws-sdk/client-cognito-identity@3.428.0, npm/@aws-sdk/client-sso@3.428.0, npm/@aws-sdk/client-sts@3.428.0, npm/@aws-sdk/credential-provider-cognito-identity@3.428.0, npm/@aws-sdk/credential-provider-env@3.428.0, npm/@aws-sdk/credential-provider-http@3.428.0, npm/@aws-sdk/credential-provider-ini@3.428.0, npm/@aws-sdk/credential-provider-node@3.428.0, npm/@aws-sdk/credential-provider-process@3.428.0, npm/@aws-sdk/credential-provider-sso@3.428.0, npm/@aws-sdk/credential-provider-web-identity@3.428.0, npm/@aws-sdk/credential-providers@3.428.0, npm/@aws-sdk/middleware-host-header@3.428.0, npm/@aws-sdk/middleware-logger@3.428.0, npm/@aws-sdk/middleware-recursion-detection@3.428.0, npm/@aws-sdk/middleware-sdk-sts@3.428.0, npm/@aws-sdk/middleware-signing@3.428.0, npm/@aws-sdk/middleware-user-agent@3.428.0, npm/@aws-sdk/region-config-resolver@3.428.0, npm/@aws-sdk/token-providers@3.428.0, npm/@aws-sdk/types@3.428.0, npm/@aws-sdk/util-endpoints@3.428.0, npm/@aws-sdk/util-locate-window@3.310.0, npm/@aws-sdk/util-user-agent-browser@3.428.0, npm/@aws-sdk/util-user-agent-node@3.428.0, npm/@babel/code-frame@7.22.13, npm/@babel/helper-module-imports@7.22.15, npm/@babel/helper-string-parser@7.22.5, npm/@babel/helper-validator-identifier@7.22.20, npm/@babel/highlight@7.22.20, npm/@babel/runtime@7.23.2, npm/@babel/types@7.23.0, npm/@bcherny/json-schema-ref-parser@9.0.9, npm/@csstools/cascade-layer-name-parser@1.0.5, npm/@csstools/color-helpers@3.0.2, npm/@csstools/css-calc@1.1.4, npm/@csstools/css-color-parser@1.4.0, npm/@csstools/css-parser-algorithms@2.3.2, npm/@csstools/css-tokenizer@2.2.1, npm/@csstools/media-query-list-parser@2.1.5, npm/@csstools/postcss-cascade-layers@4.0.0, npm/@csstools/postcss-color-function@2.2.3, npm/@csstools/postcss-color-mix-function@1.0.3, npm/@csstools/postcss-font-format-keywords@3.0.0, npm/@csstools/postcss-gradients-interpolation-method@4.0.7, npm/@csstools/postcss-hwb-function@3.0.6, npm/@csstools/postcss-ic-unit@3.0.2, npm/@csstools/postcss-is-pseudo-class@4.0.3, npm/@csstools/postcss-logical-float-and-clear@2.0.0, npm/@csstools/postcss-logical-resize@2.0.0, npm/@csstools/postcss-logical-viewport-units@2.0.3, npm/@csstools/postcss-media-minmax@1.1.0, npm/@csstools/postcss-media-queries-aspect-ratio-number-values@2.0.3, npm/@csstools/postcss-nested-calc@3.0.0, npm/@csstools/postcss-normalize-display-values@3.0.1, npm/@csstools/postcss-oklab-function@3.0.7, npm/@csstools/postcss-relative-color-syntax@2.0.7, npm/@csstools/postcss-scope-pseudo-class@3.0.0, npm/@csstools/postcss-stepped-value-functions@3.0.2, npm/@csstools/postcss-text-decoration-shorthand@3.0.3, npm/@csstools/postcss-trigonometric-functions@3.0.2, npm/@csstools/postcss-unset-value@3.0.0, npm/@csstools/selector-specificity@3.0.0, npm/@date-io/core@2.17.0, npm/@date-io/date-fns@2.16.0, npm/@dnd-kit/accessibility@3.0.1, npm/@emotion/babel-plugin@11.11.0, npm/@emotion/cache@11.11.0, npm/@emotion/css@11.11.2, npm/@emotion/hash@0.9.1, npm/@emotion/memoize@0.8.1, npm/@emotion/react@11.11.1, npm/@emotion/serialize@1.1.2, npm/@emotion/sheet@1.2.2, npm/@emotion/unitless@0.8.1, npm/@emotion/use-insertion-effect-with-fallbacks@1.0.1, npm/@emotion/utils@1.2.1, npm/@emotion/weak-memoize@0.3.1, npm/@eslint-community/eslint-utils@4.4.0, npm/@eslint-community/regexpp@4.9.1, npm/@eslint/eslintrc@2.1.2, npm/@eslint/js@8.51.0, npm/@faceless-ui/modal@2.0.1, npm/@faceless-ui/scroll-info@1.3.0, npm/@faceless-ui/window-info@2.1.1, npm/@floating-ui/core@1.5.0, npm/@floating-ui/dom@1.5.3, npm/@floating-ui/utils@0.1.6, npm/@hapi/hoek@9.3.0, npm/@hapi/topo@5.1.0, npm/@humanwhocodes/config-array@0.11.11, npm/@humanwhocodes/object-schema@1.2.1, npm/@jridgewell/gen-mapping@0.3.3, npm/@jridgewell/resolve-uri@3.1.1, npm/@jridgewell/set-array@1.1.2, npm/@jridgewell/source-map@0.3.5, npm/@jridgewell/sourcemap-codec@1.4.15, npm/@jridgewell/trace-mapping@0.3.19, npm/@monaco-editor/react@4.5.1, npm/@payloadcms/bundler-webpack@1.0.3, npm/@payloadcms/db-mongodb@1.0.3, npm/@payloadcms/db-mongodb@3.0.0-beta.124, npm/@payloadcms/eslint-config@0.0.1, npm/@payloadcms/next@3.0.0-beta.124, npm/@payloadcms/payload-cloud@3.0.0-beta.123, npm/@payloadcms/plugin-redirects@1.0.1, npm/@payloadcms/richtext-lexical@3.0.0-beta.124, npm/@payloadcms/richtext-slate@1.0.3, npm/@polka/url@1.0.0-next.23, npm/@popperjs/core@2.11.8, npm/@sideway/address@4.1.4, npm/@sideway/formula@3.0.1, npm/@sideway/pinpoint@2.0.0, npm/@smithy/abort-controller@2.0.11, npm/@smithy/config-resolver@2.0.14, npm/@smithy/credential-provider-imds@2.0.16, npm/@smithy/eventstream-codec@2.0.11, npm/@smithy/fetch-http-handler@2.2.3, npm/@smithy/hash-node@2.0.11, npm/@smithy/invalid-dependency@2.0.11, npm/@smithy/is-array-buffer@2.0.0, npm/@smithy/middleware-content-length@2.0.13, npm/@smithy/middleware-endpoint@2.1.1, npm/@smithy/middleware-retry@2.0.16, npm/@smithy/middleware-serde@2.0.11, npm/@smithy/middleware-stack@2.0.5, npm/@smithy/node-config-provider@2.1.1, npm/@smithy/node-http-handler@2.1.7, npm/@smithy/protocol-http@3.0.7, npm/@smithy/querystring-builder@2.0.11, npm/@smithy/querystring-parser@2.0.11, npm/@smithy/service-error-classification@2.0.4, npm/@smithy/signature-v4@2.0.11, npm/@smithy/smithy-client@2.1.11, npm/@smithy/types@2.3.5, npm/@smithy/url-parser@2.0.11, npm/@smithy/util-base64@2.0.0, npm/@smithy/util-body-length-browser@2.0.0, npm/@smithy/util-body-length-node@2.1.0, npm/@smithy/util-buffer-from@2.0.0, npm/@smithy/util-config-provider@2.0.0, npm/@smithy/util-defaults-mode-browser@2.0.15, npm/@smithy/util-defaults-mode-node@2.0.19, npm/@smithy/util-hex-encoding@2.0.0, npm/@smithy/util-middleware@2.0.4, npm/@smithy/util-retry@2.0.4, npm/@smithy/util-stream@2.0.16, npm/@types/node@22.8.6, npm/eslint-config-next@15.0.0, npm/eslint@8.57.1, npm/graphql@16.9.0, npm/next@15.0.0, npm/payload@3.0.0-beta.124, npm/react-dom@19.0.0-rc-65a56d0e-20241020, npm/react@19.0.0-rc-65a56d0e-20241020, npm/sharp@0.32.6, npm/types-react-dom@19.0.0-rc.1, npm/types-react@19.0.0-rc.1, npm/typescript@5.6.3

View full report↗︎

…e data), instead of dedicated form save plugin.

While this adds a delay to the parents form state being updated with the sub form data (due to the debounce), this greatly simplifies things and reduces the amount of re-renders caused by updating the node data
@AlessioGr AlessioGr changed the title perf(richtext-lexical): significantly reduce lexical rerendering and amount of network requests from blocks. The field RSC now provides an initial state for all lexical blocks perf(richtext-lexical)!: significantly reduce lexical rerendering and amount of network requests from blocks. The field RSC now provides an initial state for all lexical blocks Nov 17, 2024
@AlessioGr AlessioGr changed the title perf(richtext-lexical)!: significantly reduce lexical rerendering and amount of network requests from blocks. The field RSC now provides an initial state for all lexical blocks perf(richtext-lexical)!: significantly reduce lexical rerendering and amount of network requests from blocks Nov 17, 2024
@AlessioGr AlessioGr enabled auto-merge (squash) November 17, 2024 08:05
@AlessioGr AlessioGr merged commit 35917c6 into beta Nov 17, 2024
53 checks passed
@AlessioGr AlessioGr deleted the perf/lexical-very-fast branch November 17, 2024 08:31
Copy link

🚀 This is included in version v3.0.0-beta.134

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant