chore: testing Million Lint

.npmrc

@@ -11,5 +11,7 @@ public-hoist-pattern[]=sanity
 ; This is needed for prettier to be able to use the plugin specified by the `@sanity/prettier-config` preset
 public-hoist-pattern[]=prettier-plugin-packagejson
 
+public-hoist-pattern[]=@million/lint
+
 prefer-workspace-packages = true
 link-workspace-packages = deep

dev/page-building-studio/package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "react": "^18.2.0",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
+    "react-compiler-runtime": "0.0.0-experimental-dc8bd44-20241121",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "sanity": "workspace:*",

dev/starter-studio/package.json

@@ -12,9 +12,9 @@
     "start": "../.bin/sanity start --port 3337"
   },
   "dependencies": {
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
+    "react-compiler-runtime": "0.0.0-experimental-dc8bd44-20241121",
     "react-dom": "^18.3.1",
     "sanity": "workspace:*",
     "styled-components": "^6.1.0"

dev/studio-e2e-testing/package.json

@@ -19,9 +19,9 @@
     "@sanity/icons": "^3.4.0",
     "@sanity/ui": "^2.8.24",
     "@sanity/vision": "3.64.3",
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
+    "react-compiler-runtime": "0.0.0-experimental-dc8bd44-20241121",
     "react-dom": "^18.3.1",
     "sanity": "workspace:*",
     "sanity-plugin-media": "^2.3.1",

dev/test-next-studio/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@sanity/vision": "workspace:*",
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "next": "15.0.3",
     "react": "rc",
     "react-dom": "rc",

dev/test-studio/.gitignore

@@ -5,3 +5,4 @@
 
 .env.*
 !.env.example
+.million

dev/test-studio/package.json

@@ -16,6 +16,7 @@
     "workshop:dev": "node -r esbuild-register scripts/workshop/dev.ts"
   },
   "dependencies": {
+    "@million/lint": "^1.0.13",
     "@portabletext/editor": "^1.10.2",
     "@portabletext/react": "^3.0.0",
     "@sanity/assist": "^3.0.2",
@@ -51,9 +52,10 @@
     "lodash": "^4.17.21",
     "qs": "^6.10.2",
     "react": "^18.3.1",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
+    "react-compiler-runtime": "0.0.0-experimental-dc8bd44-20241121",
     "react-dom": "^18.3.1",
     "react-refractor": "^2.1.6",
+    "react-scan": "^0.0.29",
     "refractor": "^3.6.0",
     "rxjs": "^7.8.0",
     "sanity": "workspace:*",
@@ -63,7 +65,7 @@
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "chokidar": "^3.6.0",
     "vite": "^4.5.5"
   }

dev/test-studio/sanity.cli.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 
+import MillionLint from '@million/lint'
 import {defineCliConfig} from 'sanity/cli'
 import {type UserConfig} from 'vite'
 
@@ -12,13 +13,31 @@ export default defineCliConfig({
   // Can be overriden by:
   // 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,
+  // reactStrictMode: true,
   reactCompiler: {target: '18'},
   vite(viteConfig: UserConfig): UserConfig {
     const reactProductionProfiling = process.env.REACT_PRODUCTION_PROFILING === 'true'
 
     return {
       ...viteConfig,
+      plugins: [
+        MillionLint.vite({
+          telemetry: false,
+          filter: {
+            include: ['../../packages/sanity/src/**/*.{mtsx,mjsx,tsx,jsx}'],
+            // exclude: [
+            //   '**/node_modules/**/*',
+            //   '../../packages/sanity/src/{core/components/hookCollection,structure/documentActions}/**/*.{mtsx,mjsx,tsx,jsx}',
+            // ],
+          },
+          // dev: 'debug',
+          // stats: {
+          //   captures: 1,
+          //   components: 1,
+          // },
+        }),
+        ...(viteConfig.plugins || []),
+      ],
       optimizeDeps: {
         ...viteConfig.optimizeDeps,
         include: ['react/jsx-runtime'],

dev/test-studio/sanity.config.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies, simple-import-sort/imports
+// import {scan} from 'react-scan' // import this BEFORE react
+
 import {assist} from '@sanity/assist'
 import {googleMapsInput} from '@sanity/google-maps-input'
 import {BookIcon} from '@sanity/icons'
@@ -73,7 +76,7 @@ const sharedSettings = definePlugin({
 
   beta: {
     treeArrayEditing: {
-      enabled: true,
+      enabled: false,
     },
   },
 
@@ -97,7 +100,7 @@ const sharedSettings = definePlugin({
     },
     newDocumentOptions,
     comments: {
-      enabled: true,
+      enabled: false,
     },
     badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
@@ -171,7 +174,7 @@ const defaultWorkspace = {
     inputDateTimeFormat: 'MM/dd/yy h:mm a',
   },
   tasks: {
-    enabled: true,
+    enabled: false,
   },
 }
 
@@ -359,3 +362,14 @@ export default defineConfig([
     basePath: '/presentation',
   },
 ]) as WorkspaceOptions[]
+
+// if (typeof window !== 'undefined') {
+//   scan({
+//     enabled: true,
+//     log: true, // logs render info to console (default: false)
+//     renderCountThreshold: 10,
+//     maxRenders: 20,
+//     report: true,
+//     includeChildren: true,
+//   })
+// }

package.json

@@ -141,7 +141,7 @@
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-tsdoc": "^0.3.0",

packages/@sanity/vision/package.json

@@ -70,7 +70,7 @@
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
     "quick-lru": "^5.1.1",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115"
+    "react-compiler-runtime": "0.0.0-experimental-dc8bd44-20241121"
   },
   "devDependencies": {
     "@repo/package.config": "workspace:*",
@@ -85,7 +85,7 @@
     "@sanity/types": "workspace:*",
     "@sanity/util": "workspace:*",
     "@types/lodash": "^4.17.7",
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "react": "^18.3.1",
     "sanity": "workspace:*",
     "styled-components": "^6.1.13"

packages/sanity/package.config.ts

@@ -53,7 +53,7 @@ export default defineConfig({
     rules: {
       ...baseConfig.extract.rules,
       'ae-incompatible-release-tags': 'error',
-      'ae-missing-release-tag': 'error',
+      'ae-missing-release-tag': 'warn',
     },
   },
 

packages/sanity/package.json

@@ -238,7 +238,7 @@
     "pretty-ms": "^7.0.1",
     "quick-lru": "^5.1.1",
     "raf": "^3.4.1",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
+    "react-compiler-runtime": "0.0.0-experimental-dc8bd44-20241121",
     "react-copy-to-clipboard": "^5.0.4",
     "react-fast-compare": "^3.2.0",
     "react-focus-lock": "^2.8.1",
@@ -300,7 +300,7 @@
     "@types/tar-fs": "^2.0.1",
     "@vitejs/plugin-react": "^4.3.3",
     "@vvo/tzdb": "6.137.0",
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "0.0.0-experimental-dc8bd44-20241121",
     "blob-polyfill": "^9.0.20240710",
     "date-fns-tz": "2.0.1",
     "react": "^18.3.1",

packages/sanity/src/_internal/cli/server/getEntryModule.ts

@@ -1,8 +1,8 @@
 const entryModule = `
 // This file is auto-generated on 'sanity dev'
 // Modifications to this file is automatically discarded
-import {renderStudio} from "sanity"
 import studioConfig from %STUDIO_CONFIG_LOCATION%
+import {renderStudio} from "sanity"
 
 renderStudio(
   document.getElementById("sanity"),

packages/sanity/src/_singletons/context/HoveredFieldContext.ts

@@ -3,7 +3,10 @@ import {createContext} from 'sanity/_createContext'
 
 /** @internal */
 export interface HoveredFieldContextValue {
-  hoveredStack: string[]
+  store: {
+    subscribe: (onStoreCallback: () => void) => () => void
+    getSnapshot: () => string[]
+  }
   onMouseEnter: (path: Path) => void
   onMouseLeave: (path: Path) => void
 }
@@ -12,7 +15,10 @@ export interface HoveredFieldContextValue {
 export const HoveredFieldContext = createContext<HoveredFieldContextValue>(
   'sanity/_singletons/context/hovered-field',
   {
-    hoveredStack: [],
+    store: {
+      subscribe: () => () => undefined,
+      getSnapshot: () => [],
+    },
     onMouseEnter: () => undefined,
     onMouseLeave: () => undefined,
   },

packages/sanity/src/core/changeIndicators/ChangeIndicator.tsx

@@ -98,7 +98,7 @@ export interface ChangeIndicatorProps {
 }
 
 /** @internal */
-export function ChangeIndicator(
+export const ChangeIndicator = memo(function ChangeIndicator(
   props: ChangeIndicatorProps & Omit<HTMLProps<HTMLDivElement>, 'as'>,
 ) {
   const {children, hasFocus, isChanged, path, withHoverEffect, ...restProps} = props
@@ -114,4 +114,4 @@ export function ChangeIndicator(
       {children}
     </ChangeBarWrapper>
   )
-}
+})

packages/sanity/src/core/comments/context/authoring-path/CommentsAuthoringPathProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useCallback, useMemo, useState} from 'react'
+import {memo, type ReactNode, useCallback, useMemo, useState} from 'react'
 import {CommentsAuthoringPathContext} from 'sanity/_singletons'
 
 import {type CommentsAuthoringPathContextValue} from './types'
@@ -17,7 +17,9 @@ interface CommentsAuthoringPathProviderProps {
  * the component re-renders, for example, when the form is temporarily set to `readOnly`
  * while reconnecting.
  */
-export function CommentsAuthoringPathProvider(props: CommentsAuthoringPathProviderProps) {
+export const CommentsAuthoringPathProvider = memo(function CommentsAuthoringPathProvider(
+  props: CommentsAuthoringPathProviderProps,
+) {
   const {children} = props
   const [authoringPath, setAuthoringPath] = useState<string | null>(null)
 
@@ -38,4 +40,4 @@ export function CommentsAuthoringPathProvider(props: CommentsAuthoringPathProvid
       {children}
     </CommentsAuthoringPathContext.Provider>
   )
-}
+})

packages/sanity/src/core/comments/plugin/field/CommentsField.tsx

@@ -53,6 +53,7 @@ export function CommentsField(props: FieldProps) {
 
   return <CommentFieldInner {...props} mode={mode} />
 }
+CommentsField.displayName = 'CommentsField'
 
 const HighlightDiv = styled(motion.div)(({theme}) => {
   const {radius, space, color} = theme.sanity
@@ -108,7 +109,7 @@ function CommentFieldInner(
   })
 
   const fieldTitle = useMemo(() => getSchemaTypeTitle(props.schemaType), [props.schemaType])
-  const stringPath = useMemo(() => PathUtils.toString(props.path), [props.path])
+  const stringPath = PathUtils.toString(props.path)
 
   // Use the cached value if it exists as the initial value
   const cachedValue = messageCache.get(stringPath) || null
@@ -278,9 +279,9 @@ function CommentFieldInner(
     [stringPath],
   )
 
-  const internalComments: FieldProps['__internal_comments'] = useMemo(
-    () => ({
-      button: currentUser && (
+  const button = useMemo(
+    () =>
+      currentUser && (
         <CommentsFieldButton
           count={Number(count)}
           currentUser={currentUser}
@@ -296,33 +297,39 @@ function CommentFieldInner(
           value={value}
         />
       ),
-      hasComments,
-      isAddingComment: isOpen,
-    }),
     [
-      currentUser,
       count,
+      currentUser,
       fieldTitle,
-      isCreatingDataset,
-      mentionOptions,
-      handleOnChange,
       handleClick,
       handleClose,
       handleCommentAdd,
-      resetMessageValue,
+      handleOnChange,
+      isCreatingDataset,
       isOpen,
+      mentionOptions,
+      resetMessageValue,
       value,
-      hasComments,
     ],
   )
 
-  return (
-    <FieldStack {...applyCommentsFieldAttr(PathUtils.toString(props.path))} ref={rootRef}>
-      {props.renderDefault({
+  const content = useMemo(
+    () =>
+      props.renderDefault({
         ...props,
         // eslint-disable-next-line camelcase
-        __internal_comments: internalComments,
-      })}
+        __internal_comments: {
+          button,
+          hasComments,
+          isAddingComment: isOpen,
+        },
+      }),
+    [button, hasComments, isOpen, props],
+  )
+
+  return (
+    <FieldStack {...applyCommentsFieldAttr(PathUtils.toString(props.path))} ref={rootRef}>
+      {content}
 
       <AnimatePresence>
         {isSelected && !isInlineCommentThread && (
@@ -337,3 +344,4 @@ function CommentFieldInner(
     </FieldStack>
   )
 }
+CommentFieldInner.displayName = 'CommentFieldInner'