feat(cli): add warning and docs for react-19 and Next.Js combined #7660

pedrobonamin · 2024-10-23T15:46:12Z

Description

Using React 19 in an embebed studio inside NextJs is not supported.
We want to show documentation to users on how to fix the issue in the cli when starting the project.

This adds warning and documentation for users https://www.sanity.io/help/react-19

react.19.warning.mov

What to review

Are we missing something?

Testing

Notes for release

Add warning and documentation for users using React 19 and NextJs 15, visit https://www.sanity.io/help/react-19

vercel · 2024-10-23T15:46:17Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2024 6:00pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2024 6:00pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2024 6:00pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2024 6:00pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2024 6:00pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Oct 23, 2024 6:00pm

packages/@sanity/cli/src/actions/init-project/initProject.ts

packages/@sanity/cli/src/actions/init-project/readPackageJson.ts

github-actions · 2024-10-23T16:13:55Z

No changes to documentation

github-actions · 2024-10-23T16:19:27Z

Component Testing Report Updated Oct 23, 2024 5:50 PM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	45s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	8s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	31s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	38s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	17s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	3m 0s	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	45s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 40s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 16s	18	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	26s	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	38s	12	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3

github-actions · 2024-10-23T16:21:42Z

⚡️ Editor Performance Report

Updated Wed, 23 Oct 2024 17:53:32 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	15.9 efps (63ms)	16.1 efps (62ms)	-1ms (-1.6%)	✅
article (body)	56.5 efps (18ms)	56.5 efps (18ms)	+0ms (-/-%)	✅
article (string inside object)	16.9 efps (59ms)	16.9 efps (59ms)	+0ms (-/-%)	✅
article (string inside array)	14.1 efps (71ms)	13.7 efps (73ms)	+2ms (+2.8%)	✅
recipe (name)	28.6 efps (35ms)	29.9 efps (34ms)	-2ms (-4.3%)	✅
recipe (description)	32.3 efps (31ms)	33.9 efps (30ms)	-2ms (-4.8%)	✅
recipe (instructions)	99.9+ efps (6ms)	99.9+ efps (7ms)	+1ms (-/-%)	✅
synthetic (title)	14.9 efps (67ms)	15.4 efps (65ms)	-2ms (-3.0%)	✅
synthetic (string inside object)	14.7 efps (68ms)	15.9 efps (63ms)	-5ms (-7.4%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	63ms	70ms	120ms	289ms	620ms	13.9s
article (body)	18ms	21ms	27ms	302ms	403ms	6.3s
article (string inside object)	59ms	63ms	76ms	259ms	289ms	8.9s
article (string inside array)	71ms	76ms	83ms	168ms	1136ms	10.2s
recipe (name)	35ms	38ms	54ms	81ms	9ms	8.9s
recipe (description)	31ms	32ms	38ms	71ms	28ms	6.3s
recipe (instructions)	6ms	7ms	8ms	42ms	0ms	3.4s
synthetic (title)	67ms	77ms	101ms	518ms	1723ms	15.7s
synthetic (string inside object)	68ms	71ms	83ms	271ms	1023ms	9.4s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	62ms	71ms	83ms	214ms	553ms	14.2s
article (body)	18ms	20ms	24ms	222ms	315ms	6.2s
article (string inside object)	59ms	66ms	77ms	164ms	643ms	9.8s
article (string inside array)	73ms	80ms	88ms	225ms	1223ms	10.2s
recipe (name)	34ms	35ms	37ms	56ms	7ms	8.8s
recipe (description)	30ms	32ms	35ms	161ms	0ms	6.1s
recipe (instructions)	7ms	9ms	10ms	41ms	0ms	3.3s
synthetic (title)	65ms	72ms	135ms	378ms	1391ms	15.0s
synthetic (string inside object)	63ms	68ms	75ms	190ms	990ms	9.9s

📚 Glossary

column definitions

benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".

latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.

p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.

p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.

p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.

blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.

test duration — how long the test run took to complete.

rexxars

Minor nit, but this looks good

packages/@sanity/cli/src/actions/init-project/initProject.ts

Co-authored-by: Espen Hovlandsdal <espen@hovlandsdal.com>

) Co-authored-by: Ash <ash@sanity.io> Co-authored-by: Espen Hovlandsdal <espen@hovlandsdal.com>

* next: feat: adds support for Create-Studio integration (#7635) fix(deps): Update dev-non-major (#7671) fix(deps): update dependency @sanity/insert-menu to v1.0.10 (#7668) fix(deps): update dependency @sanity/presentation to v1.17.6 (#7669) v3.62.2 fix(deps): Update dev-non-major (#7663) fix(deps): update dependency @sanity/presentation to v1.17.4 (#7662) fix(deps): Update dev-non-major (#7661) v3.62.1 feat(cli): add warning and docs for react-19 and Next.Js combined (#7660)

feat(cli): add warning and docs for react-19 and Next.Js combination

4e2206f

pedrobonamin requested a review from a team as a code owner October 23, 2024 15:46

pedrobonamin requested review from juice49 and removed request for a team October 23, 2024 15:46

vercel bot had a problem deploying to Preview – page-building-studio October 23, 2024 15:50 Failure

vercel bot had a problem deploying to Preview – performance-studio October 23, 2024 15:50 Failure

vercel bot had a problem deploying to Preview – test-next-studio October 23, 2024 15:50 Failure

vercel bot had a problem deploying to Preview – test-studio October 23, 2024 15:50 Failure

vercel bot had a problem deploying to Preview – test-compiled-studio October 23, 2024 15:50 Failure

juice49 reviewed Oct 23, 2024

View reviewed changes

packages/@sanity/cli/src/actions/init-project/initProject.ts Outdated Show resolved Hide resolved

fix(cli): detectedFramework CLI context type

5a5a7e4

juice49 force-pushed the react-19-warning branch from 45aa735 to 5a5a7e4 Compare October 23, 2024 15:58

vercel bot had a problem deploying to Preview – test-studio October 23, 2024 15:59 Failure

vercel bot had a problem deploying to Preview – page-building-studio October 23, 2024 15:59 Failure

vercel bot had a problem deploying to Preview – performance-studio October 23, 2024 15:59 Failure

vercel bot had a problem deploying to Preview – test-next-studio October 23, 2024 16:00 Failure

vercel bot had a problem deploying to Preview – test-compiled-studio October 23, 2024 16:00 Failure

fix(cli): use semver to detect nextjs version

3a472bf

pedrobonamin force-pushed the react-19-warning branch from 7d43809 to 3a472bf Compare October 23, 2024 16:02

vercel bot had a problem deploying to Preview – test-studio October 23, 2024 16:04 Failure

vercel bot had a problem deploying to Preview – performance-studio October 23, 2024 16:04 Failure

vercel bot had a problem deploying to Preview – page-building-studio October 23, 2024 16:04 Failure

vercel bot had a problem deploying to Preview – test-next-studio October 23, 2024 16:05 Failure

vercel bot had a problem deploying to Preview – test-compiled-studio October 23, 2024 16:05 Failure

fix(cli): change import path for readPackageJson

9cb9e16

pedrobonamin commented Oct 23, 2024

View reviewed changes

packages/@sanity/cli/src/actions/init-project/readPackageJson.ts Show resolved Hide resolved

pedrobonamin changed the title ~~feat(cli): add warning and docs for react-19 and Next.Js combination~~ feat(cli): add warning and docs for react-19 and Next.Js combined Oct 23, 2024

vercel bot deployed to Preview – performance-studio October 23, 2024 16:14 View deployment

pedrobonamin requested a review from rexxars October 23, 2024 16:18

vercel bot deployed to Preview – test-next-studio October 23, 2024 16:19 View deployment

vercel bot deployed to Preview – test-compiled-studio October 23, 2024 16:22 View deployment

fix(cli): do not throw error when reading package.json

fb61699

vercel bot deployed to Preview – performance-studio October 23, 2024 16:28 View deployment

vercel bot deployed to Preview – page-building-studio October 23, 2024 16:28 View deployment

vercel bot deployed to Preview – test-studio October 23, 2024 16:28 View deployment

vercel bot deployed to Preview – test-next-studio October 23, 2024 16:32 View deployment

vercel bot deployed to Preview – test-compiled-studio October 23, 2024 16:35 View deployment

rexxars previously approved these changes Oct 23, 2024

View reviewed changes

packages/@sanity/cli/src/actions/init-project/initProject.ts Outdated Show resolved Hide resolved

pedrobonamin dismissed rexxars’s stale review via 88ff9e2 October 23, 2024 17:40

pedrobonamin requested review from rexxars and juice49 October 23, 2024 17:40

fix(cli): update isUsingNextJs15 check

686aba1

Co-authored-by: Espen Hovlandsdal <espen@hovlandsdal.com>

pedrobonamin force-pushed the react-19-warning branch from 88ff9e2 to 686aba1 Compare October 23, 2024 17:42

rexxars approved these changes Oct 23, 2024

View reviewed changes

vercel bot deployed to Preview – performance-studio October 23, 2024 17:48 View deployment

vercel bot deployed to Preview – page-building-studio October 23, 2024 17:48 View deployment

vercel bot deployed to Preview – test-studio October 23, 2024 17:49 View deployment

vercel bot deployed to Preview – test-next-studio October 23, 2024 17:57 View deployment

vercel bot deployed to Preview – test-compiled-studio October 23, 2024 18:00 View deployment

juice49 approved these changes Oct 23, 2024

View reviewed changes

pedrobonamin added this pull request to the merge queue Oct 24, 2024

Merged via the queue into next with commit 00acdbb Oct 24, 2024
67 checks passed

pedrobonamin deleted the react-19-warning branch October 24, 2024 06:07

juice49 added a commit that referenced this pull request Oct 24, 2024

feat(cli): add warning and docs for react-19 and Next.Js combined (#7660

3e87891

) Co-authored-by: Ash <ash@sanity.io> Co-authored-by: Espen Hovlandsdal <espen@hovlandsdal.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cli): add warning and docs for react-19 and Next.Js combined #7660

feat(cli): add warning and docs for react-19 and Next.Js combined #7660

pedrobonamin commented Oct 23, 2024 •

edited

Loading

vercel bot commented Oct 23, 2024 •

edited

Loading

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024 •

edited

Loading

github-actions bot commented Oct 23, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

rexxars left a comment

feat(cli): add warning and docs for react-19 and Next.Js combined #7660

feat(cli): add warning and docs for react-19 and Next.Js combined #7660

Conversation

pedrobonamin commented Oct 23, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Oct 23, 2024 • edited Loading

github-actions bot commented Oct 23, 2024

github-actions bot commented Oct 23, 2024 • edited Loading

github-actions bot commented Oct 23, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

rexxars left a comment

Choose a reason for hiding this comment

pedrobonamin commented Oct 23, 2024 •

edited

Loading

vercel bot commented Oct 23, 2024 •

edited

Loading

github-actions bot commented Oct 23, 2024 •

edited

Loading

github-actions bot commented Oct 23, 2024 •

edited

Loading