From 85d3b2c71998ab28df8ba9979bf604dbfa46fb79 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Wed, 17 Jul 2024 01:23:49 +0200 Subject: [PATCH] chore: test rxjs scheduler instead of worker --- package.json | 2 +- packages/sanity/package.json | 2 ++ .../members/object/fields/PrimitiveField.tsx | 33 ++++++++++--------- .../document/document-pair/checkoutPair.ts | 7 ++++ .../document/document-pair/memoizedPair.ts | 4 ++- .../document/document-pair/snapshotPair.ts | 6 ++-- .../store/_legacy/document/document-store.ts | 4 ++- .../statusBar/DocumentStatusBarActions.tsx | 2 +- packages/sanity/web-workers/checkoutPair.mjs | 2 ++ pnpm-lock.yaml | 26 ++++++++++----- 10 files changed, 57 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index d48e51e3dd73..dfa861e28697 100644 --- a/package.json +++ b/package.json @@ -186,7 +186,7 @@ "@sanity/ui@2": "$@sanity/ui", "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin", "@typescript-eslint/parser": "$@typescript-eslint/parser", - "framer-motion": "11.3.0", + "framer-motion": "11.3.4", "styled-components": "npm:speedy-styled-components@6.1.12-canary.4" } }, diff --git a/packages/sanity/package.json b/packages/sanity/package.json index 95007163f2a8..b927a2c0f6bc 100644 --- a/packages/sanity/package.json +++ b/packages/sanity/package.json @@ -242,6 +242,7 @@ "rxjs": "^7.8.0", "rxjs-exhaustmap-with-trailing": "^2.1.1", "sanity-diff-patch": "^3.0.2", + "scheduler": "^0.23.2", "scroll-into-view-if-needed": "^3.0.3", "semver": "^7.3.5", "shallow-equals": "^1.0.0", @@ -285,6 +286,7 @@ "@types/refractor": "^3.0.0", "@types/resolve-from": "^4.0.0", "@types/rimraf": "^3.0.2", + "@types/scheduler": "^0.23.0", "@types/semver": "^6.2.3", "@types/tar-fs": "^2.0.1", "@vvo/tzdb": "6.137.0", diff --git a/packages/sanity/src/core/form/members/object/fields/PrimitiveField.tsx b/packages/sanity/src/core/form/members/object/fields/PrimitiveField.tsx index 05c9d5817781..3970ea758a2c 100644 --- a/packages/sanity/src/core/form/members/object/fields/PrimitiveField.tsx +++ b/packages/sanity/src/core/form/members/object/fields/PrimitiveField.tsx @@ -87,26 +87,26 @@ export function PrimitiveField(props: { // setOptimisticValue((state) => ({...state, next: inputValue})) onChange(PatchEvent.from(hasEmptyValue ? unset() : set(inputValue)).prefixAll(member.name)) - setLocalValue(hasEmptyValue ? '' : event.currentTarget.value) + // setLocalValue(hasEmptyValue ? '' : event.currentTarget.value) }, [member.name, member.field.schemaType, onChange], ) // Reset local value after a timeout - useEffect(() => { - if (member.field.value === undefined || localValue === undefined || member.field.focused) { - return undefined - } - const callback = requestIdleCallback( - () => { - setLocalValue(undefined) - }, - {timeout: 5000}, - ) - return () => { - cancelIdleCallback(callback) - } - }, [localValue, member.field.focused, member.field.value]) + // useEffect(() => { + // if (member.field.value === undefined || localValue === undefined || member.field.focused) { + // return undefined + // } + // const callback = requestIdleCallback( + // () => { + // setLocalValue(undefined) + // }, + // {timeout: 5000}, + // ) + // return () => { + // cancelIdleCallback(callback) + // } + // }, [localValue, member.field.focused, member.field.value]) const validationError = useMemo( @@ -127,7 +127,8 @@ export function PrimitiveField(props: { 'onChange': handleNativeChange, 'value': resolveNativeNumberInputValue( member.field.schemaType, - localValue ?? member.field.value, + member.field.value, + // localValue ?? member.field.value, localValue, ), 'readOnly': Boolean(member.field.readOnly), diff --git a/packages/sanity/src/core/store/_legacy/document/document-pair/checkoutPair.ts b/packages/sanity/src/core/store/_legacy/document/document-pair/checkoutPair.ts index 124ad77512a8..3d1d4353265d 100644 --- a/packages/sanity/src/core/store/_legacy/document/document-pair/checkoutPair.ts +++ b/packages/sanity/src/core/store/_legacy/document/document-pair/checkoutPair.ts @@ -15,6 +15,11 @@ import { import {getPairListener, type ListenerEvent} from '../getPairListener' import {type IdPair, type PendingMutationsEvent, type ReconnectEvent} from '../types' +// import { +// unstable_NormalPriority as NormalPriority, +// unstable_scheduleCallback as scheduleCallback, +// } from 'scheduler' + const isMutationEventForDocId = (id: string) => ( @@ -188,6 +193,8 @@ export function checkoutPair( const listenerEventsConnector = new Subject() const listenerEvents$ = getPairListener(client, idPair).pipe( + // @TODO figure out how to schedule updates the same way react does for input change: scheduleCallback(NormalPriority, () => schedule) + // observeOn(asapScheduler, 10000), share({connector: () => listenerEventsConnector}), ) diff --git a/packages/sanity/src/core/store/_legacy/document/document-pair/memoizedPair.ts b/packages/sanity/src/core/store/_legacy/document/document-pair/memoizedPair.ts index 6a3056aeed28..0cc1332b4415 100644 --- a/packages/sanity/src/core/store/_legacy/document/document-pair/memoizedPair.ts +++ b/packages/sanity/src/core/store/_legacy/document/document-pair/memoizedPair.ts @@ -4,7 +4,9 @@ import {publishReplay, refCount} from 'rxjs/operators' import {type IdPair} from '../types' import {memoize} from '../utils/createMemoizer' -import {checkoutPair, type Pair} from './checkoutPairWithWorker' +// Test the worker implementation +// import {checkoutPair, type Pair} from './checkoutPairWithWorker' +import {checkoutPair, type Pair} from './checkoutPair' import {memoizeKeyGen} from './memoizeKeyGen' export const memoizedPair: ( diff --git a/packages/sanity/src/core/store/_legacy/document/document-pair/snapshotPair.ts b/packages/sanity/src/core/store/_legacy/document/document-pair/snapshotPair.ts index 330a38f488f5..dec5e67edf6e 100644 --- a/packages/sanity/src/core/store/_legacy/document/document-pair/snapshotPair.ts +++ b/packages/sanity/src/core/store/_legacy/document/document-pair/snapshotPair.ts @@ -1,7 +1,7 @@ import {type SanityClient} from '@sanity/client' import {type SanityDocument} from '@sanity/types' -import {type Observable} from 'rxjs' -import {filter, map, publishReplay, refCount} from 'rxjs/operators' +import {asapScheduler, type Observable} from 'rxjs' +import {filter, map, observeOn, publishReplay, refCount} from 'rxjs/operators' import {type BufferedDocumentEvent, type MutationPayload, type SnapshotEvent} from '../buffered-doc' import {type IdPair, type PendingMutationsEvent, type ReconnectEvent} from '../types' @@ -20,6 +20,7 @@ function isSnapshotEvent(event: BufferedDocumentEvent | ReconnectEvent): event i function withSnapshots(pair: DocumentVersion): DocumentVersionSnapshots { return { snapshots$: pair.events.pipe( + observeOn(asapScheduler), filter(isSnapshotEvent), map((event) => event.document), publishReplay(1), @@ -67,7 +68,6 @@ export const snapshotPair = memoize( typeName: string, serverActionsEnabled: Observable, ): Observable => { - // @TODO test worker implementation here return memoizedPair(client, idPair, typeName, serverActionsEnabled).pipe( map(({published, draft, transactionsPendingEvents$}): SnapshotPair => { return { diff --git a/packages/sanity/src/core/store/_legacy/document/document-store.ts b/packages/sanity/src/core/store/_legacy/document/document-store.ts index 271396e40891..0edf28d74352 100644 --- a/packages/sanity/src/core/store/_legacy/document/document-store.ts +++ b/packages/sanity/src/core/store/_legacy/document/document-store.ts @@ -14,7 +14,9 @@ import { checkoutPair, type DocumentVersionEvent, type Pair, -} from './document-pair/checkoutPairWithWorker' + // Test the worker implementation + // } from './document-pair/checkoutPairWithWorker' +} from './document-pair/checkoutPair' import {consistencyStatus} from './document-pair/consistencyStatus' import {documentEvents} from './document-pair/documentEvents' import {editOperations} from './document-pair/editOperations' diff --git a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx index 9d45b033c895..d186bbe309ca 100644 --- a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx +++ b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx @@ -4,11 +4,11 @@ import {memo, useCallback, useMemo, useState} from 'react' import { type DocumentActionComponent, type DocumentActionDescription, - shouldArrayDialogOpen, useSource, useTimelineSelector, } from 'sanity' +import {shouldArrayDialogOpen} from '../../../../core/form/studio/tree-editing/utils/shouldArrayDialogOpen' import {Button, Tooltip} from '../../../../ui-components' import {RenderActionCollectionState} from '../../../components' import {HistoryRestoreAction} from '../../../documentActions' diff --git a/packages/sanity/web-workers/checkoutPair.mjs b/packages/sanity/web-workers/checkoutPair.mjs index cbc5e78693ff..33796182ae59 100644 --- a/packages/sanity/web-workers/checkoutPair.mjs +++ b/packages/sanity/web-workers/checkoutPair.mjs @@ -10572,6 +10572,8 @@ function xE(r, e, n, s) { } function SE(r, e, n) { const { publishedId: s, draftId: u } = e, a = new Je(), f = bE(r, e).pipe( + // @TODO figure out how to schedule updates the same way react does for input change: scheduleCallback(NormalPriority, () => schedule) + // observeOn(asapScheduler, 10000), Vu({ connector: () => a }) ), l = f.pipe( Xe((b) => b.type === "reconnect") diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5e2bb507faf9..3fe04734d33d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,7 +9,7 @@ overrides: '@sanity/ui@2': 2.6.7-canary.0 '@typescript-eslint/eslint-plugin': ^7.11.0 '@typescript-eslint/parser': ^7.11.0 - framer-motion: 11.3.0 + framer-motion: 11.3.4 styled-components: npm:speedy-styled-components@6.1.12-canary.4 importers: @@ -1525,8 +1525,8 @@ importers: specifier: ^1.0.1 version: 1.0.1 framer-motion: - specifier: 11.3.0 - version: 11.3.0(react-dom@18.3.1)(react@18.3.1) + specifier: 11.3.4 + version: 11.3.4(react-dom@18.3.1)(react@18.3.1) get-it: specifier: ^8.6.3 version: 8.6.3(debug@4.3.5) @@ -1656,6 +1656,9 @@ importers: sanity-diff-patch: specifier: ^3.0.2 version: 3.0.2 + scheduler: + specifier: ^0.23.2 + version: 0.23.2 scroll-into-view-if-needed: specifier: ^3.0.3 version: 3.1.0 @@ -1780,6 +1783,9 @@ importers: '@types/rimraf': specifier: ^3.0.2 version: 3.0.2 + '@types/scheduler': + specifier: ^0.23.0 + version: 0.23.0 '@types/semver': specifier: ^6.2.3 version: 6.2.7 @@ -6612,7 +6618,7 @@ packages: '@sanity/uuid': 3.0.2 '@types/lodash.isequal': 4.5.8 fast-deep-equal: 3.1.3 - framer-motion: 11.3.0(react-dom@18.3.1)(react@18.3.1) + framer-motion: 11.3.4(react-dom@18.3.1)(react@18.3.1) lodash.get: 4.4.2 lodash.isequal: 4.5.0 mendoza: 3.0.7 @@ -6876,7 +6882,7 @@ packages: '@sanity/color': 3.0.6 '@sanity/icons': 3.3.0(react@18.3.1) csstype: 3.1.3 - framer-motion: 11.3.0(react-dom@18.3.1)(react@18.3.1) + framer-motion: 11.3.4(react-dom@18.3.1)(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) react-is: 18.3.1 @@ -7608,6 +7614,10 @@ packages: '@types/node': 18.19.31 dev: true + /@types/scheduler@0.23.0: + resolution: {integrity: sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==} + dev: true + /@types/semver-compare@1.0.3: resolution: {integrity: sha512-mVZkB2QjXmZhh+MrtwMlJ8BqUnmbiSkpd88uOWskfwB8yitBT0tBRAKt+41VRgZD9zr9Sc+Xs02qGgvzd1Rq/Q==} dev: true @@ -11800,8 +11810,8 @@ packages: map-cache: 0.2.2 dev: true - /framer-motion@11.3.0(react-dom@18.3.1)(react@18.3.1): - resolution: {integrity: sha512-hjYjMUQaWuqilwRr5kC0CunHZFVMtKWHy/IdL/LPRBD0C491DKTvYwQRJ5qRXEAOT+Rth7Vi4XBe4TA4bFOn3A==} + /framer-motion@11.3.4(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-LC+luwNmz4zEg0AU0rol3yLUFKSJ9GDmIyvigXBAwEbUBG59EWmcRQ2Xh+0py7IkmvWxFUH0TN42v1Dda8xgUg==} peerDependencies: '@emotion/is-prop-valid': '*' react: '*' @@ -17236,7 +17246,7 @@ packages: '@sanity/ui': 2.6.7-canary.0(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)(speedy-styled-components@6.1.12-canary.4) '@sanity/util': 3.51.0 '@types/lodash-es': 4.17.12 - framer-motion: 11.3.0(react-dom@18.3.1)(react@18.3.1) + framer-motion: 11.3.4(react-dom@18.3.1)(react@18.3.1) lodash-es: 4.17.21 react: 18.3.1 sanity: link:packages/sanity