feature(cli): add reactStrictMode option (#3721)

Co-authored-by: Cody Olsen <81981+stipsan@users.noreply.github.com>

dev/test-studio/.env.example

@@ -0,0 +1,4 @@
+# To disable strict mode on your local checkout:
+# `cp .env.example .env.development`
+# Then restart your `sanity start` or `yarn dev` command
+SANITY_STUDIO_REACT_STRICT_MODE=false

dev/test-studio/.gitignore

@@ -2,3 +2,6 @@
 
 # Ignore generated source files
 /workshop/scopes.js
+
+.env.*
+!.env.example

dev/test-studio/sanity.cli.ts

@@ -8,6 +8,10 @@ export default createCliConfig({
     dataset: 'test',
   },
 
+  // Can be overriden by:
+  // A) `SANITY_STUDIO_REACT_STRICT_MODE=false yarn dev`
+  // B) creating a `.env` file locally that sets the same env variable as above
+  reactStrictMode: true,
   vite(viteConfig: UserConfig): UserConfig {
     return {
       ...viteConfig,

packages/@sanity/cli/src/types.ts

@@ -269,6 +269,14 @@ export interface CliConfig {
     basePath?: string
   }
 
+  /**
+   * Wraps the Studio in `<React.StrictMode>` root to aid flagging potential problems related to concurrent features (`startTransition`, `useTransition`, `useDeferredValue`, `Suspense`)
+   * Can also be enabled by setting `SANITY_STUDIO_REACT_STRICT_MODE="true"|"false"`.
+   * It only applies to `sanity start` in dev mode, it's ignored in `sanity build` and in production.
+   * Defaults to `false`
+   */
+  reactStrictMode?: boolean
+
   server?: {
     hostname?: string
     port?: number

packages/@sanity/server/src/buildStaticFiles.ts

@@ -40,7 +40,7 @@ export async function buildStaticFiles(
     vite: extendViteConfig,
   } = options
 
-  await writeSanityRuntime({cwd, watch: false})
+  await writeSanityRuntime({cwd, reactStrictMode: false, watch: false})
 
   let viteConfig = await getViteConfig({
     cwd,

packages/@sanity/server/src/devServer.ts

@@ -13,6 +13,7 @@ export interface DevServerOptions {
   httpHost?: string
   projectName?: string
 
+  reactStrictMode: boolean
   vite?: (config: InlineConfig) => InlineConfig
 }
 
@@ -21,10 +22,10 @@ export interface DevServer {
 }
 
 export async function startDevServer(options: DevServerOptions): Promise<DevServer> {
-  const {cwd, httpPort, httpHost, basePath: base, vite: extendViteConfig} = options
+  const {cwd, httpPort, httpHost, basePath: base, reactStrictMode, vite: extendViteConfig} = options
 
   const startTime = Date.now()
-  await writeSanityRuntime({cwd, watch: true})
+  await writeSanityRuntime({cwd, reactStrictMode, watch: true})
 
   debug('Resolving vite config')
   let viteConfig = await getViteConfig({

packages/@sanity/server/src/getEntryModule.ts

@@ -6,13 +6,16 @@ import studioConfig from %STUDIO_CONFIG_LOCATION%
 
 renderStudio(
   document.getElementById("sanity"),
-  studioConfig
+  studioConfig,
+  %STUDIO_REACT_STRICT_MODE%
 )
 `
 
-export function getEntryModule(options: {relativeConfigLocation: string}): string {
-  return entryModule.replace(
-    /%STUDIO_CONFIG_LOCATION%/,
-    JSON.stringify(options.relativeConfigLocation)
-  )
+export function getEntryModule(options: {
+  reactStrictMode: boolean
+  relativeConfigLocation: string
+}): string {
+  return entryModule
+    .replace(/%STUDIO_REACT_STRICT_MODE%/, JSON.stringify(Boolean(options.reactStrictMode)))
+    .replace(/%STUDIO_CONFIG_LOCATION%/, JSON.stringify(options.relativeConfigLocation))
 }

packages/@sanity/server/src/runtime.ts

@@ -13,6 +13,7 @@ import {
 
 export interface RuntimeOptions {
   cwd: string
+  reactStrictMode: boolean
   watch: boolean
 }
 
@@ -23,7 +24,11 @@ export interface RuntimeOptions {
  * @param options - Current working directory (Sanity root dir), and whether or not to watch
  * @internal
  */
-export async function writeSanityRuntime({cwd, watch}: RuntimeOptions): Promise<void> {
+export async function writeSanityRuntime({
+  cwd,
+  reactStrictMode,
+  watch,
+}: RuntimeOptions): Promise<void> {
   const monorepo = await loadSanityMonorepo(cwd)
   const runtimeDir = path.join(cwd, '.sanity', 'runtime')
 
@@ -55,5 +60,8 @@ export async function writeSanityRuntime({cwd, watch}: RuntimeOptions): Promise<
   debug('Writing app.js to runtime directory')
   const studioConfigPath = await getSanityStudioConfigPath(cwd)
   const relativeConfigLocation = path.relative(runtimeDir, studioConfigPath)
-  await fs.writeFile(path.join(runtimeDir, 'app.js'), getEntryModule({relativeConfigLocation}))
+  await fs.writeFile(
+    path.join(runtimeDir, 'app.js'),
+    getEntryModule({reactStrictMode, relativeConfigLocation})
+  )
 }

packages/@sanity/server/test/devServer.test.ts

@@ -24,6 +24,7 @@ describe('devServer', () => {
       httpPort: 9700,
       httpHost: 'localhost',
 
+      reactStrictMode: false,
       vite(viteConfig: InlineConfig) {
         return {
           ...viteConfig,

packages/sanity/src/_internal/cli/actions/start/startAction.ts

@@ -72,12 +72,17 @@ function getDevServerConfig({
 
   const basePath = env.SANITY_STUDIO_BASEPATH || cliConfig?.project?.basePath || '/'
 
+  const reactStrictMode = env.SANITY_STUDIO_REACT_STRICT_MODE
+    ? env.SANITY_STUDIO_REACT_STRICT_MODE === 'true'
+    : Boolean(cliConfig?.reactStrictMode)
+
   return {
     cwd: workDir,
     httpPort,
     httpHost,
     basePath,
     staticPath: path.join(workDir, 'static'),
+    reactStrictMode,
     vite: cliConfig?.vite,
   }
 }

packages/sanity/src/core/studio/renderStudio.tsx

@@ -4,16 +4,24 @@ import type {Config} from '../config'
 import {Studio} from './Studio'
 
 /** @internal */
-export function renderStudio(rootElement: HTMLElement | null, config: Config) {
+export function renderStudio(
+  rootElement: HTMLElement | null,
+  config: Config,
+  reactStrictMode = false
+) {
   if (!rootElement) {
     throw new Error('Missing root element to mount application into')
   }
 
   const root = createRoot(rootElement)
   root.render(
-    <StrictMode>
+    reactStrictMode ? (
+      <StrictMode>
+        <Studio config={config} />
+      </StrictMode>
+    ) : (
       <Studio config={config} />
-    </StrictMode>
+    )
   )
   return () => root.unmount()
 }