chore: upgrade test studios to react 19, remove next studios (#8178)

sanity-io · Jan 6, 2025 · 9ed1ff7 · 9ed1ff7
1 parent b57cb26
commit 9ed1ff7
Showing 48 changed files with 535 additions and 1,262 deletions.
diff --git a/.eslintignore.react-compiler b/.eslintignore.react-compiler
@@ -19,7 +19,6 @@ dev/test-studio/workshop/scopes.js
 dev/design-studio/*
 dev/embedded-studio/*
 dev/starter-cra-studio/*
-dev/starter-next-studio/*
 dev/starter-studio/*
 dev/strict-studio/*
 dev/studio-e2e-studio/*

diff --git a/dev/starter-next-studio/.depcheckignore.json b/dev/starter-next-studio/.depcheckignore.json
diff --git a/dev/starter-next-studio/.eslintrc b/dev/starter-next-studio/.eslintrc
diff --git a/dev/starter-next-studio/.gitignore b/dev/starter-next-studio/.gitignore
diff --git a/dev/starter-next-studio/components/Studio.tsx b/dev/starter-next-studio/components/Studio.tsx
diff --git a/dev/starter-next-studio/next-env.d.ts b/dev/starter-next-studio/next-env.d.ts
diff --git a/dev/starter-next-studio/next.config.js b/dev/starter-next-studio/next.config.js
diff --git a/dev/starter-next-studio/package.json b/dev/starter-next-studio/package.json
diff --git a/dev/starter-next-studio/pages/_app.tsx b/dev/starter-next-studio/pages/_app.tsx
diff --git a/dev/starter-next-studio/pages/index.tsx b/dev/starter-next-studio/pages/index.tsx
diff --git a/dev/starter-next-studio/pages/studio/[[...tool]].tsx b/dev/starter-next-studio/pages/studio/[[...tool]].tsx
diff --git a/dev/starter-next-studio/reset.css b/dev/starter-next-studio/reset.css
diff --git a/dev/starter-next-studio/sanity.cli.ts b/dev/starter-next-studio/sanity.cli.ts
diff --git a/dev/starter-next-studio/sanity.config.ts b/dev/starter-next-studio/sanity.config.ts
diff --git a/dev/starter-next-studio/tsconfig.json b/dev/starter-next-studio/tsconfig.json
diff --git a/dev/studio-e2e-testing/package.json b/dev/studio-e2e-testing/package.json
@@ -21,9 +21,8 @@
     "@sanity/ui": "^2.11.0",
     "@sanity/vision": "3.68.3",
     "babel-plugin-react-compiler": "19.0.0-beta-63e3235-20250105",
-    "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sanity": "workspace:*",
     "sanity-plugin-markdown": "^5.0.0",
     "sanity-plugin-media": "^2.3.1",

diff --git a/dev/studio-e2e-testing/sanity.cli.ts b/dev/studio-e2e-testing/sanity.cli.ts
@@ -9,7 +9,7 @@ export default defineCliConfig({
     projectId: process.env.SANITY_E2E_PROJECT_ID,
     dataset: process.env.SANITY_E2E_DATASET,
   },
-  reactCompiler: {target: '18'},
+  reactCompiler: {target: '19'},
   vite: {
     define: {
       'process.env.SANITY_E2E_PROJECT_ID': JSON.stringify(process.env.SANITY_E2E_PROJECT_ID),

diff --git a/dev/test-next-studio/.depcheckignore.json b/dev/test-next-studio/.depcheckignore.json
diff --git a/dev/test-next-studio/.depcheckrc.json b/dev/test-next-studio/.depcheckrc.json
diff --git a/dev/test-next-studio/.gitignore b/dev/test-next-studio/.gitignore
diff --git a/dev/test-next-studio/app/GlobalStyle.tsx b/dev/test-next-studio/app/GlobalStyle.tsx
diff --git a/dev/test-next-studio/app/PreloadResources.tsx b/dev/test-next-studio/app/PreloadResources.tsx
diff --git a/dev/test-next-studio/app/[[...tool]]/Studio.tsx b/dev/test-next-studio/app/[[...tool]]/Studio.tsx
diff --git a/dev/test-next-studio/app/[[...tool]]/page.tsx b/dev/test-next-studio/app/[[...tool]]/page.tsx
diff --git a/dev/test-next-studio/app/layout.tsx b/dev/test-next-studio/app/layout.tsx
diff --git a/dev/test-next-studio/app/registry.tsx b/dev/test-next-studio/app/registry.tsx
diff --git a/dev/test-next-studio/next-env.d.ts b/dev/test-next-studio/next-env.d.ts
diff --git a/dev/test-next-studio/next.config.mjs b/dev/test-next-studio/next.config.mjs
diff --git a/dev/test-next-studio/package.json b/dev/test-next-studio/package.json
diff --git a/dev/test-next-studio/tsconfig.json b/dev/test-next-studio/tsconfig.json
diff --git a/dev/test-next-studio/turbo.json b/dev/test-next-studio/turbo.json
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
@@ -51,9 +51,8 @@
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "qs": "^6.10.2",
-    "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-refractor": "^2.1.6",
     "refractor": "^3.6.0",
     "rxjs": "^7.8.0",

diff --git a/dev/test-studio/sanity.cli.ts b/dev/test-studio/sanity.cli.ts
@@ -4,9 +4,10 @@ import {defineCliConfig} from 'sanity/cli'
 import {type UserConfig} from 'vite'
 
 const millionLintEnabled = process.env.REACT_MILLION_LINT === 'true'
+const millionLintEverything = process.env.REACT_MILLION_LINT_EVERYTHING === 'true'
 const millionInclude: string[] = []
 try {
-  if (millionLintEnabled) {
+  if (millionLintEnabled && !millionLintEverything) {
     for (const filePath of require('./.react-compiler-bailout-report.json')) {
       millionInclude.push(`**/${filePath}`)
     }
@@ -27,23 +28,24 @@ export default defineCliConfig({
   // A) `SANITY_STUDIO_REACT_STRICT_MODE=false pnpm dev`
   // B) creating a `.env` file locally that sets the same env variable as above
   reactStrictMode: true,
-  reactCompiler: millionLintEnabled
-    ? {
-        target: '18',
-        sources: (filename) => {
-          /**
-           * This is the default filter when `sources` is not defined.
-           * Since we're overriding it we have to ensure we don't accidentally try running the compiler on non-src files from npm.
-           */
-          if (filename.includes('node_modules')) {
-            return false
-          }
-          return millionInclude.every(
-            (pattern) => !filename.endsWith(`/${pattern.split('**/')[1]}`),
-          )
-        },
-      }
-    : {target: '18'},
+  reactCompiler:
+    millionLintEnabled && !millionLintEverything
+      ? {
+          target: '19',
+          sources: (filename) => {
+            /**
+             * This is the default filter when `sources` is not defined.
+             * Since we're overriding it we have to ensure we don't accidentally try running the compiler on non-src files from npm.
+             */
+            if (filename.includes('node_modules')) {
+              return false
+            }
+            return millionInclude.every(
+              (pattern) => !filename.endsWith(`/${pattern.split('**/')[1]}`),
+            )
+          },
+        }
+      : {target: '19'},
   vite(viteConfig: UserConfig): UserConfig {
     const reactProductionProfiling = process.env.REACT_PRODUCTION_PROFILING === 'true'
 
@@ -55,11 +57,15 @@ export default defineCliConfig({
              * We're doing a dynamic import here, instead of a static import, to avoid an issue where a WebSocket Server is created by Million for `vite dev` that isn't closed.
              * Which leaves `sanity build` hanging, even if the plugin itself isn't actually used.
              */
-            require('@million/lint').vite({
-              filter: {
-                include: millionInclude,
-              },
-            }),
+            require('@million/lint').vite(
+              millionLintEverything
+                ? {}
+                : {
+                    filter: {
+                      include: millionInclude,
+                    },
+                  },
+            ),
             ...(viteConfig.plugins || []),
           ]
         : viteConfig.plugins,

diff --git a/dev/test-studio/turbo.json b/dev/test-studio/turbo.json
@@ -3,7 +3,7 @@
   "extends": ["//"],
   "tasks": {
     "build": {
-      "env": ["REACT_PRODUCTION_PROFILING", "REACT_MILLION_LINT"],
+      "env": ["REACT_PRODUCTION_PROFILING", "REACT_MILLION_LINT", "REACT_MILLION_LINT_EVERYTHING"],
       "outputs": [".sanity/**", "dist/**", "workshop/scopes.js"]
     },
     "start": {

diff --git a/package.json b/package.json
@@ -43,9 +43,8 @@
     "dev:test-create-studio": "pnpm --filter test-create-integration-studio dev",
     "dev:test-studio-production-profiling": "REACT_PRODUCTION_PROFILING=true turbo run start --filter=sanity-test-studio",
     "dev:million-lint": "pnpm report:react-compiler-bailout && pnpm dev:test-studio-million-lint",
+    "dev:million-lint-everything": "REACT_MILLION_LINT=true REACT_MILLION_LINT_EVERYTHING=true pnpm --filter sanity-test-studio dev",
     "dev:test-studio-million-lint": "REACT_MILLION_LINT=true pnpm --filter sanity-test-studio dev",
-    "dev:next-studio": "pnpm --filter sanity-test-next-studio dev",
-    "dev:turbo-studio": "pnpm dev:next-studio --turbo",
     "docs:report": "node -r dotenv-flow/config -r esbuild-register scripts/doc-report/docReport",
     "docs:report:cleanup": "node -r dotenv-flow/config -r esbuild-register scripts/doc-report/docReportCleanup",
     "docs:report:create": "node -r dotenv-flow/config -r esbuild-register scripts/doc-report/docReportCreate",

diff --git a/packages/sanity/fixtures/examples/prj-with-react-19/package.json b/packages/sanity/fixtures/examples/prj-with-react-19/package.json
@@ -2,8 +2,8 @@
   "name": "prj-with-react-19",
   "private": true,
   "dependencies": {
-    "react": "19.0.0-rc-f994737d14-20240522",
-    "react-dom": "19.0.0-rc-f994737d14-20240522",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "styled-components": "^6.1.0"
   }
 }
diff --git a/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx b/packages/sanity/src/core/changeIndicators/overlay/ConnectorsOverlay.tsx
@@ -3,7 +3,7 @@ import {sortBy} from 'lodash'
 import {useCallback, useMemo, useState} from 'react'
 
 import {type Reported} from '../../components/react-track-elements'
-import {ScrollMonitor} from '../../components/scroll'
+import {useOnScroll} from '../../components/scroll'
 import {DEBUG_LAYER_BOUNDS} from '../constants'
 import {findMostSpecificTarget} from '../helpers/findMostSpecificTarget'
 import {getOffsetsTo} from '../helpers/getOffsetsTo'
@@ -121,27 +121,26 @@ export function ConnectorsOverlay(props: ConnectorsOverlayProps) {
   }, [byId, allReportedValues, hovered, rootElement])
 
   useResizeObserver(rootElement, handleScrollOrResize)
+  useOnScroll(handleScrollOrResize)
 
   return (
-    <ScrollMonitor onScroll={handleScrollOrResize}>
-      <SvgWrapper style={{zIndex: visibleConnectors[0] && visibleConnectors[0].field.zIndex}}>
-        {visibleConnectors.map(({field, change}) => {
-          if (!change) {
-            return null
-          }
-
-          return (
-            <ConnectorGroup
-              field={field}
-              change={change}
-              key={field.id}
-              onSetFocus={onSetFocus}
-              setHovered={setHovered}
-            />
-          )
-        })}
-      </SvgWrapper>
-    </ScrollMonitor>
+    <SvgWrapper style={{zIndex: visibleConnectors[0] && visibleConnectors[0].field.zIndex}}>
+      {visibleConnectors.map(({field, change}) => {
+        if (!change) {
+          return null
+        }
+
+        return (
+          <ConnectorGroup
+            field={field}
+            change={change}
+            key={field.id}
+            onSetFocus={onSetFocus}
+            setHovered={setHovered}
+          />
+        )
+      })}
+    </SvgWrapper>
   )
 }
 

diff --git a/packages/sanity/src/core/components/scroll/index.ts b/packages/sanity/src/core/components/scroll/index.ts
@@ -1,4 +1,3 @@
 export * from './hooks'
 export * from './scrollContainer'
-export * from './scrollMonitor'
 export * from './types'
diff --git a/packages/sanity/src/core/components/scroll/scrollContainer.tsx b/packages/sanity/src/core/components/scroll/scrollContainer.tsx
@@ -4,6 +4,7 @@ import {
   type ForwardedRef,
   forwardRef,
   type HTMLProps,
+  memo,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -19,19 +20,9 @@ export interface ScrollContainerProps<T extends ElementType>
   onScroll?: (event: Event) => () => void
 }
 
-/**
- * This provides a utility function for use within Sanity Studios to create scrollable containers
- * It also provides a way for components inside a scrollable container to track onScroll on their first parent scroll container
- * NOTE: this is used by different studio utilities to track positions of elements on screen
- * NOTE: It will call any given `onScroll` callback with a Native DOM Event, and not a React Synthetic event
- * NOTE: It will not make sure the element is actually scrollable, this still needs to be done with css as usual
- *
- * @internal
- */
-export const ScrollContainer = forwardRef(function ScrollContainer<T extends ElementType = 'div'>(
-  props: ScrollContainerProps<T>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
+const ScrollContainerComponent = forwardRef(function ScrollContainerComponent<
+  T extends ElementType = 'div',
+>(props: ScrollContainerProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>) {
   const {as: As = 'div', onScroll, ...rest} = props
   const ref = useRef<HTMLDivElement | null>(null)
 
@@ -79,3 +70,15 @@ export const ScrollContainer = forwardRef(function ScrollContainer<T extends Ele
     </ScrollContext.Provider>
   )
 })
+
+/**
+ * This provides a utility function for use within Sanity Studios to create scrollable containers
+ * It also provides a way for components inside a scrollable container to track onScroll on their first parent scroll container
+ * NOTE: this is used by different studio utilities to track positions of elements on screen
+ * NOTE: It will call any given `onScroll` callback with a Native DOM Event, and not a React Synthetic event
+ * NOTE: It will not make sure the element is actually scrollable, this still needs to be done with css as usual
+ *
+ * @internal
+ */
+export const ScrollContainer = memo(ScrollContainerComponent)
+ScrollContainer.displayName = 'Memo(Forwardref(ScrollContainer))'
diff --git a/packages/sanity/src/core/components/scroll/scrollMonitor.tsx b/packages/sanity/src/core/components/scroll/scrollMonitor.tsx
diff --git a/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx b/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx
@@ -169,6 +169,11 @@ export function DocumentLayout() {
     [onPathOpen, onFocus],
   )
 
+  const portalElements = useMemo(
+    () => ({[DOCUMENT_PANEL_PORTAL_ELEMENT]: documentPanelPortalElement}),
+    [documentPanelPortalElement],
+  )
+
   if (!schemaType) {
     return (
       <DocumentLayoutError
@@ -250,9 +255,7 @@ export function DocumentLayout() {
 
           {/* These providers are added because we want the dialogs in `DocumentStatusBar` to be scoped to the document pane. */}
           {/* The portal element comes from `DocumentPanel`. */}
-          <PortalProvider
-            __unstable_elements={{[DOCUMENT_PANEL_PORTAL_ELEMENT]: documentPanelPortalElement}}
-          >
+          <PortalProvider __unstable_elements={portalElements}>
             <DialogProvider position={DIALOG_PROVIDER_POSITION} zOffset={zOffsets.portal}>
               {StartInCreateBanner && (
                 <ShowWhenPaneOpen>

diff --git a/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/structure/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -121,87 +121,111 @@ export const DocumentPanelHeader = memo(
       [contextMenuNodes, referenceElement],
     )
 
+    const title = useMemo(() => <DocumentHeaderTitle />, [])
+    const tabs = useMemo(() => showTabs && <DocumentHeaderTabs />, [showTabs])
+    const backButton = useMemo(
+      () =>
+        showBackButton && (
+          <Button
+            as={BackLink}
+            data-as="a"
+            icon={ArrowLeftIcon}
+            mode="bleed"
+            tooltipProps={{content: t('pane-header.back-button.text')}}
+          />
+        ),
+      [BackLink, showBackButton, t],
+    )
+    const renderedActions = useMemo(
+      () => (
+        <Flex align="center" gap={1}>
+          {unstable_languageFilter.length > 0 && (
+            <>
+              {unstable_languageFilter.map((LanguageFilterComponent, idx) => {
+                return (
+                  <LanguageFilterComponent
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={`language-filter-${idx}`}
+                    schemaType={schemaType}
+                  />
+                )
+              })}
+            </>
+          )}
+
+          {menuButtonNodes.map((item) => (
+            <PaneHeaderActionButton key={item.key} node={item} />
+          ))}
+          {editState && (
+            <RenderActionCollectionState
+              actions={actions}
+              actionProps={editState}
+              group="paneActions"
+            >
+              {renderPaneActions}
+            </RenderActionCollectionState>
+          )}
+
+          {showSplitPaneButton && (
+            <Button
+              aria-label={t('buttons.split-pane-button.aria-label')}
+              icon={SplitVerticalIcon}
+              key="split-pane-button"
+              mode="bleed"
+              onClick={onPaneSplit}
+              tooltipProps={{content: t('buttons.split-pane-button.tooltip')}}
+            />
+          )}
+
+          {showSplitPaneCloseButton && (
+            <Button
+              icon={CloseIcon}
+              key="close-view-button"
+              mode="bleed"
+              onClick={onPaneClose}
+              tooltipProps={{content: t('buttons.split-pane-close-button.title')}}
+            />
+          )}
+
+          {showPaneGroupCloseButton && (
+            <Button
+              icon={CloseIcon}
+              key="close-view-button"
+              mode="bleed"
+              tooltipProps={{content: t('buttons.split-pane-close-group-button.title')}}
+              as={BackLink}
+            />
+          )}
+        </Flex>
+      ),
+      [
+        BackLink,
+        actions,
+        editState,
+        menuButtonNodes,
+        onPaneClose,
+        onPaneSplit,
+        renderPaneActions,
+        schemaType,
+        showPaneGroupCloseButton,
+        showSplitPaneButton,
+        showSplitPaneCloseButton,
+        t,
+        unstable_languageFilter,
+      ],
+    )
+
     return (
       <TooltipDelayGroupProvider>
         <PaneHeader
           border
           ref={ref}
           loading={connectionState === 'connecting' && !editState?.draft && !editState?.published}
-          title={<DocumentHeaderTitle />}
-          tabs={showTabs && <DocumentHeaderTabs />}
+          title={title}
+          tabs={tabs}
           tabIndex={tabIndex}
-          backButton={
-            showBackButton && (
-              <Button
-                as={BackLink}
-                data-as="a"
-                icon={ArrowLeftIcon}
-                mode="bleed"
-                tooltipProps={{content: t('pane-header.back-button.text')}}
-              />
-            )
-          }
-          actions={
-            <Flex align="center" gap={1}>
-              {unstable_languageFilter.length > 0 && (
-                <>
-                  {unstable_languageFilter.map((LanguageFilterComponent, idx) => {
-                    return (
-                      <LanguageFilterComponent
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={`language-filter-${idx}`}
-                        schemaType={schemaType}
-                      />
-                    )
-                  })}
-                </>
-              )}
-
-              {menuButtonNodes.map((item) => (
-                <PaneHeaderActionButton key={item.key} node={item} />
-              ))}
-              {editState && (
-                <RenderActionCollectionState
-                  actions={actions}
-                  actionProps={editState}
-                  group="paneActions"
-                >
-                  {renderPaneActions}
-                </RenderActionCollectionState>
-              )}
-
-              {showSplitPaneButton && (
-                <Button
-                  aria-label={t('buttons.split-pane-button.aria-label')}
-                  icon={SplitVerticalIcon}
-                  key="split-pane-button"
-                  mode="bleed"
-                  onClick={onPaneSplit}
-                  tooltipProps={{content: t('buttons.split-pane-button.tooltip')}}
-                />
-              )}
-
-              {showSplitPaneCloseButton && (
-                <Button
-                  icon={CloseIcon}
-                  key="close-view-button"
-                  mode="bleed"
-                  onClick={onPaneClose}
-                  tooltipProps={{content: t('buttons.split-pane-close-button.title')}}
-                />
-              )}
-
-              {showPaneGroupCloseButton && (
-                <Button
-                  icon={CloseIcon}
-                  key="close-view-button"
-                  mode="bleed"
-                  tooltipProps={{content: t('buttons.split-pane-close-group-button.title')}}
-                  as={BackLink}
-                />
-              )}
-            </Flex>
-          }
+          backButton={backButton}
+          actions={renderedActions}
         />
       </TooltipDelayGroupProvider>
     )

diff --git a/perf/.depcheckrc.json b/perf/.depcheckrc.json
@@ -1,3 +1,3 @@
 {
-  "ignores": ["@repo/tsconfig", "sanity", "babel-plugin-react-compiler", "react-compiler-runtime"]
+  "ignores": ["@repo/tsconfig", "sanity", "babel-plugin-react-compiler"]
 }
diff --git a/perf/efps/.depcheckrc.json b/perf/efps/.depcheckrc.json
@@ -3,7 +3,6 @@
     "@swc-node/register",
     "@types/react",
     "@types/react-dom",
-    "babel-plugin-react-compiler",
-    "react-compiler-runtime"
+    "babel-plugin-react-compiler"
   ]
 }
diff --git a/perf/efps/package.json b/perf/efps/package.json
@@ -30,9 +30,8 @@
     "globby": "^11.1.0",
     "ora": "^8.0.1",
     "playwright": "^1.46.1",
-    "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "sanity": "workspace:*",
     "serve-handler": "^6.1.5",

diff --git a/perf/studio/package.json b/perf/studio/package.json
@@ -15,9 +15,8 @@
   },
   "dependencies": {
     "babel-plugin-react-compiler": "19.0.0-beta-63e3235-20250105",
-    "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sanity": "workspace:*",
     "styled-components": "^6.1.0"
   }

diff --git a/perf/studio/sanity.cli.ts b/perf/studio/sanity.cli.ts
@@ -7,5 +7,5 @@ export default defineCliConfig({
     projectId: STUDIO_PROJECT_ID,
     dataset: STUDIO_DATASET,
   },
-  reactCompiler: {target: '18'},
+  reactCompiler: {target: '19'},
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml