feat: prepare nextjs starter template for live mode #7633

SimeonGriggs · 2024-10-18T15:36:54Z

Description

Adds configuration file for live fetches when initializing a new Studio inside a Next.js application. Not used by the Studio, but designed for use in the Next.js application.

Do not release until the next version of next-sanity is available.

Notes for release

sanityFetch and SanityLive preconfigured for Studios initialized inside a Next.js application

vercel · 2024-10-18T15:36:58Z

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 28, 2024 0:47am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 28, 2024 0:47am
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 28, 2024 0:47am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 28, 2024 0:47am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 28, 2024 0:47am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Oct 28, 2024 0:47am

github-actions · 2024-10-18T15:39:16Z

No changes to documentation

github-actions · 2024-10-18T15:44:57Z

Component Testing Report Updated Oct 28, 2024 12:44 AM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	51s	15	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	9s	3	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	31s	6	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	39s	11	7
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	18s	6	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	11s	3	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	3m 0s	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	46s	15	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 47s	21	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 17s	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)	36s	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-18T15:47:45Z

⚡️ Editor Performance Report

Updated Mon, 28 Oct 2024 00:47:02 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	16.0 efps (63ms)	16.7 efps (60ms)	-3ms (-4.0%)	✅
article (body)	56.8 efps (18ms)	59.5 efps (17ms)	-1ms (-4.5%)	✅
article (string inside object)	17.5 efps (57ms)	16.9 efps (59ms)	+2ms (+3.5%)	✅
article (string inside array)	14.1 efps (71ms)	14.3 efps (70ms)	-1ms (-1.4%)	✅
recipe (name)	28.6 efps (35ms)	27.8 efps (36ms)	+1ms (+2.9%)	✅
recipe (description)	33.3 efps (30ms)	31.3 efps (32ms)	+2ms (+6.7%)	✅
recipe (instructions)	99.9+ efps (7ms)	99.9+ efps (7ms)	+0ms (-/-%)	✅
synthetic (title)	14.1 efps (71ms)	14.2 efps (71ms)	-1ms (-0.7%)	✅
synthetic (string inside object)	14.5 efps (69ms)	14.3 efps (70ms)	+1ms (+1.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	130ms	272ms	752ms	14.3s
article (body)	18ms	19ms	22ms	108ms	105ms	5.2s
article (string inside object)	57ms	61ms	70ms	262ms	298ms	9.2s
article (string inside array)	71ms	75ms	88ms	322ms	1207ms	10.0s
recipe (name)	35ms	37ms	56ms	78ms	12ms	10.0s
recipe (description)	30ms	32ms	40ms	82ms	9ms	6.2s
recipe (instructions)	7ms	8ms	9ms	21ms	0ms	3.3s
synthetic (title)	71ms	76ms	86ms	457ms	1686ms	16.9s
synthetic (string inside object)	69ms	76ms	90ms	455ms	1682ms	10.7s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	60ms	64ms	121ms	364ms	675ms	14.9s
article (body)	17ms	21ms	28ms	118ms	396ms	5.8s
article (string inside object)	59ms	62ms	67ms	270ms	440ms	8.8s
article (string inside array)	70ms	73ms	82ms	215ms	1033ms	9.6s
recipe (name)	36ms	39ms	77ms	108ms	25ms	9.6s
recipe (description)	32ms	36ms	52ms	155ms	7ms	6.4s
recipe (instructions)	7ms	9ms	10ms	36ms	0ms	3.4s
synthetic (title)	71ms	77ms	88ms	405ms	1808ms	19.4s
synthetic (string inside object)	70ms	74ms	98ms	625ms	1846ms	10.7s

📚 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

Reading the next-sanity docs, it seems like the live content API might require vX to be used - are you okay leaving that up to the env file? Also, are we leaving the SanityLive component up to the user to implement "if they want it"?

rexxars · 2024-10-28T14:28:01Z

packages/@sanity/cli/src/actions/init-project/templates/nextjs/index.ts

@@ -165,6 +165,12 @@ export const client = createClient({
 })
 `

+const live = `import { defineLive } from "next-sanity";


Maybe we should add a description to the top for what this file is for?

Suggested change

const live = `import { defineLive } from "next-sanity";

// Importing and querying through `sanityFetch` from this file will make data automatically stay up to date with any changes.

// Before using it, import and render `<SanityLive />` in your layout - see

// https://github.com/sanity-io/next-sanity#live-content-api for more information.

const live = `import { defineLive } from "next-sanity";

feat: prepare nextjs starter template for live mode

644d1df

vercel bot deployed to Preview – performance-studio October 18, 2024 15:38 View deployment

vercel bot deployed to Preview – page-building-studio October 18, 2024 15:38 View deployment

vercel bot deployed to Preview – test-studio October 18, 2024 15:39 View deployment

vercel bot deployed to Preview – test-next-studio October 18, 2024 15:43 View deployment

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

SimeonGriggs marked this pull request as ready for review October 28, 2024 00:35

SimeonGriggs requested a review from a team as a code owner October 28, 2024 00:35

SimeonGriggs requested review from ricokahler and removed request for a team October 28, 2024 00:35

Merge branch 'next' into feat/next-template-live-by-default

50ba0f2

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

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

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

vercel bot deployed to Preview – test-next-studio October 28, 2024 00:45 View deployment

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

RitaDias requested a review from rexxars October 28, 2024 09:37

rexxars approved these changes Oct 28, 2024

View reviewed changes

rexxars reviewed Oct 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: prepare nextjs starter template for live mode #7633

feat: prepare nextjs starter template for live mode #7633

SimeonGriggs commented Oct 18, 2024

vercel bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024

github-actions bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

rexxars left a comment •

edited

Loading

rexxars Oct 28, 2024

-const live = `import { defineLive } from "next-sanity";
+// Importing and querying through `sanityFetch` from this file will make data automatically stay up to date with any changes.
+// Before using it, import and render `<SanityLive />` in your layout - see
+// https://github.com/sanity-io/next-sanity#live-content-api for more information.
+const live = `import { defineLive } from "next-sanity";

feat: prepare nextjs starter template for live mode #7633

Are you sure you want to change the base?

feat: prepare nextjs starter template for live mode #7633

Conversation

SimeonGriggs commented Oct 18, 2024

Description

Notes for release

vercel bot commented Oct 18, 2024 • edited Loading

github-actions bot commented Oct 18, 2024

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

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

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

rexxars left a comment • edited Loading

Choose a reason for hiding this comment

rexxars Oct 28, 2024

Choose a reason for hiding this comment

vercel bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

rexxars left a comment •

edited

Loading