From aba2ae5f17761766acdb000b71142f788211e43b Mon Sep 17 00:00:00 2001 From: Binoy Patel Date: Mon, 21 Oct 2024 12:58:41 -0400 Subject: [PATCH] test(core): use context selector for DocumentPaneProvider --- packages/sanity/package.json | 1 + .../context/DocumentPaneContext.ts | 6 ++- .../document-layout/DocumentLayout.tsx | 49 ++++++++++++------- .../panes/document/useDocumentPane.tsx | 16 +++--- pnpm-lock.yaml | 32 ++++++++---- 5 files changed, 69 insertions(+), 35 deletions(-) diff --git a/packages/sanity/package.json b/packages/sanity/package.json index ef28e8ea1ec..c4ad23581c9 100644 --- a/packages/sanity/package.json +++ b/packages/sanity/package.json @@ -259,6 +259,7 @@ "speakingurl": "^14.0.1", "tar-fs": "^2.1.1", "tar-stream": "^3.1.7", + "use-context-selector": "^2.0.0", "use-device-pixel-ratio": "^1.1.0", "use-hot-module-reload": "^2.0.0", "use-sync-external-store": "^1.2.0", diff --git a/packages/sanity/src/_singletons/context/DocumentPaneContext.ts b/packages/sanity/src/_singletons/context/DocumentPaneContext.ts index 27f300baf0f..508cf5f5083 100644 --- a/packages/sanity/src/_singletons/context/DocumentPaneContext.ts +++ b/packages/sanity/src/_singletons/context/DocumentPaneContext.ts @@ -1,9 +1,11 @@ -import {createContext} from 'sanity/_createContext' +// import {createContext} from 'sanity/_createContext' + +import {createContext} from 'use-context-selector' import type {DocumentPaneContextValue} from '../../structure/panes/document/DocumentPaneContext' /** @internal */ export const DocumentPaneContext = createContext( - 'sanity/_singletons/context/document-pane', + // 'sanity/_singletons/context/document-pane', null, ) diff --git a/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx b/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx index 4f9b77ec6e7..c19108ab7d0 100644 --- a/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx +++ b/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx @@ -61,23 +61,38 @@ const StyledChangeConnectorRoot = styled(ChangeConnectorRoot)` ` export function DocumentLayout() { - const { - changesOpen, - documentId, - documentType, - fieldActions, - focusPath, - inspectOpen, - inspector, - inspectors, - onFocus, - onHistoryOpen, - onMenuAction, - onPathOpen, - paneKey, - schemaType, - value, - } = useDocumentPane() + // const { + // changesOpen, + // documentId, + // documentType, + // fieldActions, + // focusPath, + // inspectOpen, + // inspector, + // inspectors, + // onFocus, + // onHistoryOpen, + // onMenuAction, + // onPathOpen, + // paneKey, + // schemaType, + // value, + // } = useDocumentPane() + const changesOpen = useDocumentPane((state) => state.changesOpen) + const inspectOpen = useDocumentPane((state) => state.inspectOpen) + const documentId = useDocumentPane((state) => state.documentId) + const documentType = useDocumentPane((state) => state.documentType) + const fieldActions = useDocumentPane((state) => state.fieldActions) + const focusPath = useDocumentPane((state) => state.focusPath) + const inspector = useDocumentPane((state) => state.inspector) + const inspectors = useDocumentPane((state) => state.inspectors) + const onFocus = useDocumentPane((state) => state.onFocus) + const onHistoryOpen = useDocumentPane((state) => state.onHistoryOpen) + const onMenuAction = useDocumentPane((state) => state.onMenuAction) + const onPathOpen = useDocumentPane((state) => state.onPathOpen) + const paneKey = useDocumentPane((state) => state.paneKey) + const schemaType = useDocumentPane((state) => state.schemaType) + const value = useDocumentPane((state) => state.value) const {features} = useStructureTool() const {t} = useTranslation(structureLocaleNamespace) diff --git a/packages/sanity/src/structure/panes/document/useDocumentPane.tsx b/packages/sanity/src/structure/panes/document/useDocumentPane.tsx index a2eae3f5b76..34a400eea84 100644 --- a/packages/sanity/src/structure/panes/document/useDocumentPane.tsx +++ b/packages/sanity/src/structure/panes/document/useDocumentPane.tsx @@ -1,15 +1,17 @@ -import {useContext} from 'react' import {DocumentPaneContext} from 'sanity/_singletons' +import {type Context, useContextSelector} from 'use-context-selector' import {type DocumentPaneContextValue} from './DocumentPaneContext' /** @internal */ -export function useDocumentPane(): DocumentPaneContextValue { - const documentPane = useContext(DocumentPaneContext) - - if (!documentPane) { - throw new Error('DocumentPane: missing context value') - } +export function useDocumentPane( + selector?: (value: DocumentPaneContextValue) => T, +): T { + const selectorFn = selector || ((value: DocumentPaneContextValue) => value as T) + const documentPane = useContextSelector( + DocumentPaneContext as Context, + selectorFn, + ) return documentPane } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 047744573d7..6baf2eb6056 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -122,7 +122,7 @@ importers: version: 9.1.0(eslint@8.57.0) eslint-config-sanity: specifier: ^7.1.2 - version: 7.1.2(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.36.1(eslint@8.57.0))(eslint@8.57.0) + version: 7.1.2(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.36.1(eslint@8.57.0))(eslint@8.57.0) eslint-config-turbo: specifier: ^2.1.2 version: 2.1.2(eslint@8.57.0) @@ -131,7 +131,7 @@ importers: version: 3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0) eslint-plugin-boundaries: specifier: ^4.2.2 - version: 4.2.2(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + version: 4.2.2(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) eslint-plugin-import: specifier: ^2.30.0 version: 2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) @@ -1739,6 +1739,9 @@ importers: tar-stream: specifier: ^3.1.7 version: 3.1.7 + use-context-selector: + specifier: ^2.0.0 + version: 2.0.0(react@18.3.1)(scheduler@0.25.0-rc-f994737d14-20240522) use-device-pixel-ratio: specifier: ^1.1.0 version: 1.1.2(react@18.3.1) @@ -11651,6 +11654,12 @@ packages: '@types/react': optional: true + use-context-selector@2.0.0: + resolution: {integrity: sha512-owfuSmUNd3eNp3J9CdDl0kMgfidV+MkDvHPpvthN5ThqM+ibMccNE0k+Iq7TWC6JPFvGZqanqiGCuQx6DyV24g==} + peerDependencies: + react: '>=18.0.0' + scheduler: '>=0.19.0' + use-device-pixel-ratio@1.1.2: resolution: {integrity: sha512-nFxV0HwLdRUt20kvIgqHYZe6PK/v4mU1X8/eLsT1ti5ck0l2ob0HDRziaJPx+YWzBo6dMm4cTac3mcyk68Gh+A==} peerDependencies: @@ -18374,7 +18383,7 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-config-sanity@7.1.2(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0))(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.36.1(eslint@8.57.0))(eslint@8.57.0): + eslint-config-sanity@7.1.2(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint-plugin-react-hooks@4.6.2(eslint@8.57.0))(eslint-plugin-react@7.36.1(eslint@8.57.0))(eslint@8.57.0): dependencies: eslint: 8.57.0 eslint-plugin-simple-import-sort: 12.1.1(eslint@8.57.0) @@ -18404,7 +18413,7 @@ snapshots: debug: 4.3.7(supports-color@9.4.0) enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.8.0 is-bun-module: 1.2.1 @@ -18417,7 +18426,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.11.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.11.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -18428,7 +18437,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -18439,12 +18448,12 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-boundaries@4.2.2(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-plugin-boundaries@4.2.2(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): dependencies: chalk: 4.1.2 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) micromatch: 4.0.7 transitivePeerDependencies: - '@typescript-eslint/parser' @@ -18468,7 +18477,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.11.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -24112,6 +24121,11 @@ snapshots: optionalDependencies: '@types/react': 18.3.11 + use-context-selector@2.0.0(react@18.3.1)(scheduler@0.25.0-rc-f994737d14-20240522): + dependencies: + react: 18.3.1 + scheduler: 0.25.0-rc-f994737d14-20240522 + use-device-pixel-ratio@1.1.2(react@18.3.1): dependencies: react: 18.3.1