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

refactor(preview): extract global listener, refactor preview APIs and improve typings #7360

Merged
merged 3 commits into from
Aug 20, 2024

Conversation

bjoerge
Copy link
Member

@bjoerge bjoerge commented Aug 12, 2024

Description

Note: This originally happened as part of work in a feature branch, but the changes here are generic and standalone improvements that makes sense to merge to main already.

This extracts the global listener used by the preview system, improves consistency and readability and typings of of the core/preview code. These changes should not affect the behavior of previews in any significant way or cause any visible differences in how previews work currently.

This also includes a small improvement to the global preview listener: Currently this listener is subscribed once, and the subscription is kept active forever. This means that if the user navigates to a part of the Studio that does need to preview anything, the listener connection is still kept active. With the changes proposed here, the global preview listener is now refcount'ed, and shuts down when no longer needed. To avoid excessive unsubscribe+resubscribes, the listener teardown is delayed to two seconds after the last subscriber unsubscribes. Demo here:

Screen.Recording.2024-08-12.at.18.33.33.mov

What to review

Does the changes make sense?

Testing

Existing tests should be enough. Also improves TypeScript coverage, which helps.

Notes for release

n/a - not user facing

Copy link

vercel bot commented Aug 12, 2024

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 Aug 19, 2024 3:27pm
performance-studio 🛑 Canceled (Inspect) 💬 Add feedback Aug 19, 2024 3:27pm
test-compiled-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 19, 2024 3:27pm
test-next-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 19, 2024 3:27pm
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 19, 2024 3:27pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Visit Preview Aug 19, 2024 3:27pm

Copy link
Contributor

No changes to documentation

Copy link
Contributor

github-actions bot commented Aug 12, 2024

Component Testing Report Updated Aug 19, 2024 3:27 PM (UTC)

✅ All Tests Passed -- expand for details
File Status Duration Passed Skipped Failed
comments/CommentInput.spec.tsx ✅ Passed (Inspect) 43s 15 0 0
formBuilder/ArrayInput.spec.tsx ✅ Passed (Inspect) 8s 3 0 0
formBuilder/inputs/PortableText/Annotations.spec.tsx ✅ Passed (Inspect) 29s 6 0 0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx ✅ Passed (Inspect) 36s 11 7 0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx ✅ Passed (Inspect) 0s 0 12 0
formBuilder/inputs/PortableText/Decorators.spec.tsx ✅ Passed (Inspect) 17s 6 0 0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx ✅ Passed (Inspect) 10s 3 0 0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx ✅ Passed (Inspect) 3m 0s 0 0 0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx ✅ Passed (Inspect) 43s 15 0 0
formBuilder/inputs/PortableText/Input.spec.tsx ✅ Passed (Inspect) 1m 45s 21 0 0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx ✅ Passed (Inspect) 1m 15s 18 0 0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx ✅ Passed (Inspect) 8s 3 9 0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx ✅ Passed (Inspect) 26s 9 0 0
formBuilder/inputs/PortableText/Styles.spec.tsx ✅ Passed (Inspect) 18s 6 0 0
formBuilder/inputs/PortableText/Toolbar.spec.tsx ✅ Passed (Inspect) 1m 15s 21 0 0
formBuilder/tree-editing/TreeEditing.spec.tsx ✅ Passed (Inspect) 1m 48s 30 0 0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx ✅ Passed (Inspect) 19s 3 0 0

packages/sanity/src/core/preview/constants.tsx Outdated Show resolved Hide resolved
'*[!(_id in path("_.**"))]',
{},
{
events: ['welcome', 'mutation', 'reconnect'],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reconnect is filtered out downstream for now, but we might want to consider using this at a later point


// This will keep the listener active forever and in turn reduce the number of initial fetches
// as less 'welcome' events will be emitted.
// @todo: see if we can delay unsubscribing or connect with some globally defined shared listener
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

// @todo: see if we can delay unsubscribing or connect with some globally defined shared listener

^ This has been addressed in this PR

*/
export function createObserveFields(options: {
client: SanityClient
invalidationChannel: Observable<InvalidationChannelEvent>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

named it invalidationChannel and stripped down types to make it clear that it's merely used to notify about need for refetching preview queries

RitaDias
RitaDias previously approved these changes Aug 19, 2024
Copy link
Contributor

@RitaDias RitaDias left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me :)

rexxars
rexxars previously approved these changes Aug 19, 2024
Copy link
Member

@rexxars rexxars left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! I'd like to start marking anything exported (from any file, regardless of whether or not it is "public") with visibility modifiers (eg @internal) since it makes it easier to reason about how scary it is to change - but not a blocker.

packages/sanity/src/core/preview/createPathObserver.ts Outdated Show resolved Hide resolved
packages/sanity/src/core/preview/createPreviewObserver.ts Outdated Show resolved Hide resolved
packages/sanity/src/core/preview/observeFields.ts Outdated Show resolved Hide resolved
@bjoerge bjoerge dismissed stale reviews from rexxars and RitaDias via 0c3a194 August 19, 2024 15:09
@bjoerge
Copy link
Member Author

bjoerge commented Aug 19, 2024

Did a rebase, and looks like a new approval is required

@bjoerge bjoerge requested a review from RitaDias August 20, 2024 07:06
Copy link
Contributor

@RitaDias RitaDias left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@bjoerge bjoerge added this pull request to the merge queue Aug 20, 2024
Merged via the queue into next with commit 5c75a38 Aug 20, 2024
42 checks passed
@bjoerge bjoerge deleted the chore-preview-store-cleanup branch August 20, 2024 07:17
cngonzalez pushed a commit that referenced this pull request Aug 20, 2024
… improve typings (#7360)

* refactor(preview): extract global listener, refactor preview APIs and improve typings

* fixup! refactor(preview): extract global listener, refactor preview APIs and improve typings

* Apply suggestions from code review

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

---------

Co-authored-by: Espen Hovlandsdal <espen@hovlandsdal.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants