feat(desk)!: drop preserveInstance option on custom user panes

BREAKING CHANGE: we've been wanting to make `preserveInstance` the default behavior for custom panes for a while, but it has been a breaking change. Now that we have the ability to do so, lets reduce the complexity of things. User component panes should use `componentDidUpdate` or a `useEffect` with a dependency on the `itemId`/`childItemId` prop to react to updates.
sanity-io · Sep 23, 2022 · 1d17b61 · 1d17b61
1 parent b84b844
commit 1d17b61
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 71 deletions.
diff --git a/dev/test-studio/structure/resolveStructure.ts b/dev/test-studio/structure/resolveStructure.ts
@@ -92,59 +92,55 @@ export const structure: StructureResolver = (S, {schema}) => {
                 .id('component1')
                 .title('Component pane (1)')
                 .child(
-                  Object.assign(
-                    S.component(DebugPane)
-                      .id('component1')
-                      .title('Component pane #1')
-                      .options({no: 1})
-                      .menuItems([
-                        S.menuItem()
-                          .title('From Menu Item Create Intent')
-                          .intent({
-                            type: 'create',
-                            params: {type: 'author', id: `special.${uuid()}`},
-                          }),
-                        S.menuItem()
-                          .title('Also Menu Item Create Intent')
-                          .intent({
-                            type: 'create',
-                            params: {type: 'author', id: uuid()},
-                          }),
-                        S.menuItem()
-                          .title('Test 1')
-                          // eslint-disable-next-line no-alert
-                          .action(() => alert('you clicked!'))
-                          .showAsAction(true),
-                        S.menuItem()
-                          .title('Test Edit Intent (as action)')
-                          .intent({
-                            type: 'edit',
-                            params: {id: 'grrm', type: 'author'},
-                          })
-                          .icon(RocketIcon)
-                          .showAsAction(),
-                        S.menuItem().title('Should warn in console').action('shouldWarn'),
-                        S.menuItem()
-                          .title('Test Edit Intent (in menu)')
-                          .intent({
-                            type: 'edit',
-                            params: {id: 'foo-bar', type: 'author'},
-                          }),
-                      ])
-                      .child(
-                        S.component(DebugPane)
-                          .id('component1-1')
-                          .title('Component pane #1.1')
-                          .options({no: 1})
-                          .menuItems([
-                            S.menuItem().title('Test 1').action('test-1').showAsAction(true),
-                            S.menuItem().title('Test 2').action('test-2'), //.showAsAction(true),
-                          ])
-                          .child(S.document().documentId('component1-1-child').schemaType('author'))
-                      )
-                      .serialize(),
-                    {__preserveInstance: true}
-                  )
+                  S.component(DebugPane)
+                    .id('component1')
+                    .title('Component pane #1')
+                    .options({no: 1})
+                    .menuItems([
+                      S.menuItem()
+                        .title('From Menu Item Create Intent')
+                        .intent({
+                          type: 'create',
+                          params: {type: 'author', id: `special.${uuid()}`},
+                        }),
+                      S.menuItem()
+                        .title('Also Menu Item Create Intent')
+                        .intent({
+                          type: 'create',
+                          params: {type: 'author', id: uuid()},
+                        }),
+                      S.menuItem()
+                        .title('Test 1')
+                        // eslint-disable-next-line no-alert
+                        .action(() => alert('you clicked!'))
+                        .showAsAction(true),
+                      S.menuItem()
+                        .title('Test Edit Intent (as action)')
+                        .intent({
+                          type: 'edit',
+                          params: {id: 'grrm', type: 'author'},
+                        })
+                        .icon(RocketIcon)
+                        .showAsAction(),
+                      S.menuItem().title('Should warn in console').action('shouldWarn'),
+                      S.menuItem()
+                        .title('Test Edit Intent (in menu)')
+                        .intent({
+                          type: 'edit',
+                          params: {id: 'foo-bar', type: 'author'},
+                        }),
+                    ])
+                    .child(
+                      S.component(DebugPane)
+                        .id('component1-1')
+                        .title('Component pane #1.1')
+                        .options({no: 1})
+                        .menuItems([
+                          S.menuItem().title('Test 1').action('test-1').showAsAction(true),
+                          S.menuItem().title('Test 2').action('test-2'), //.showAsAction(true),
+                        ])
+                        .child(S.document().documentId('component1-1-child').schemaType('author'))
+                    )
                 ),
 
               S.listItem()

diff --git a/packages/sanity/src/desk/panes/userComponent/UserComponentPane.tsx b/packages/sanity/src/desk/panes/userComponent/UserComponentPane.tsx
@@ -22,7 +22,6 @@ export function UserComponentPane(props: UserComponentPaneProps) {
     title = '',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     type: _unused,
-    __preserveInstance = false,
     ...restPane
   } = pane
   const [ref, setRef] = useState<{
@@ -42,14 +41,6 @@ export function UserComponentPane(props: UserComponentPaneProps) {
       <UserComponentPaneContent>
         {isValidElementType(component) &&
           createElement(component, {
-            // this forces a re-render when the router panes change. note: in
-            // theory, this shouldn't be necessary and the downstream user
-            // component could internally handle these updates, but this was done
-            // to preserve older desk tool behavior. if the experimental flag
-            // `__preserveInstance` is true, then no key will be applied.
-            ...(!__preserveInstance && {
-              key: `${restProps.itemId}-${restProps.childItemId}`,
-            }),
             ...restProps,
             ...restPane,
             // NOTE: here we're utilizing the function form of refs so setting

diff --git a/packages/sanity/src/desk/types.ts b/packages/sanity/src/desk/types.ts
@@ -162,15 +162,6 @@ export interface CustomComponentPaneNode extends BaseResolvedPaneNode<'component
   component: UserComponent
   options?: Record<string, unknown>
   // component: React.ComponentType<Props> | React.ReactNode
-
-  /**
-   * An experimental flag that can be used to opt out of the forced refresh when
-   * the `itemId` or `childItemId` changes. See `UserComponentPane`:
-   * https://github.com/sanity-io/sanity/commit/8340a003043edf6de3afd9ff628ce93be79978e2
-   *
-   * @beta
-   */
-  __preserveInstance?: boolean
 }
 
 export type PaneView = FormView | ComponentView