feat: testing multiple experimental perf boosting strategies

dev/test-studio/plugins/language-filter/LanguageFilterMenuButton.tsx

@@ -1,6 +1,6 @@
 import {TranslateIcon} from '@sanity/icons'
 import {Box, Button, Card, Checkbox, Flex, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
-import {type FormEvent, useCallback, useState} from 'react'
+import {type FormEvent, useCallback, useRef, useState} from 'react'
 import {type ObjectSchemaType} from 'sanity'
 
 import {type LanguageFilterPluginOptions} from './types'
@@ -24,8 +24,8 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
   const [open, setOpen] = useState(false)
   const {selectableLanguages, selectedLanguages, selectAll, selectNone, toggleLanguage} =
     usePaneLanguages({options})
-  const [button, setButton] = useState<HTMLElement | null>(null)
-  const [popover, setPopover] = useState<HTMLElement | null>(null)
+  const buttonRef = useRef<HTMLDivElement | null>(null)
+  const popoverRef = useRef<HTMLDivElement | null>(null)
 
   const handleToggleAll = useCallback(
     (event: FormEvent<HTMLInputElement>) => {
@@ -42,9 +42,10 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
 
   const handleClick = useCallback(() => setOpen((o) => !o), [])
 
-  const handleClickOutside = useCallback(() => setOpen(false), [])
-
-  useClickOutside(handleClickOutside, [button, popover])
+  useClickOutside(
+    () => setOpen(false),
+    () => [buttonRef.current, popoverRef.current],
+  )
 
   const allSelected = selectedLanguages.length === selectableLanguages.length
 
@@ -96,12 +97,12 @@ export function LanguageFilterMenuButton(props: LanguageFilterMenuButtonProps) {
   )
 
   return (
-    <Popover constrainSize content={content} open={open} portal ref={setPopover}>
+    <Popover constrainSize content={content} open={open} portal ref={popoverRef}>
       <Button
         icon={TranslateIcon}
         mode="bleed"
         onClick={handleClick}
-        ref={setButton}
+        ref={buttonRef}
         selected={open}
       />
     </Popover>

dev/test-studio/sanity.config.ts

@@ -17,6 +17,7 @@ import {imageHotspotArrayPlugin} from 'sanity-plugin-hotspot-array'
 import {muxInput} from 'sanity-plugin-mux-input'
 
 import {imageAssetSource} from './assetSources'
+import {debugStyledComponents} from './components/debugStyledComponents'
 import {
   Annotation,
   Block,
@@ -102,6 +103,7 @@ const sharedSettings = definePlugin({
     badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
+    debugStyledComponents(),
     structureTool({
       icon: BookIcon,
       structure,

package.json

@@ -17,7 +17,7 @@
     "check:deps": "pnpm --recursive --parallel exec depcheck",
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
-    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 31 .",
+    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 28 .",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",
@@ -182,8 +182,11 @@
     },
     "overrides": {
       "@npmcli/arborist": "^7.5.4",
+      "@sanity/ui": "2.6.7-canary.0",
       "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin",
-      "@typescript-eslint/parser": "$@typescript-eslint/parser"
+      "@typescript-eslint/parser": "$@typescript-eslint/parser",
+      "styled-components": "npm:[email protected]",
+      "framer-motion": "11.3.0"
     }
   },
   "isSanityMonorepo": true

packages/@repo/package.bundle/src/package.bundle.ts

@@ -7,6 +7,7 @@ import {version} from '../package.json'
 export const defaultConfig: UserConfig = {
   appType: 'custom',
   define: {
+    '__DEV__': 'false',
     'process.env.PKG_VERSION': JSON.stringify(version),
     'process.env.NODE_ENV': '"production"',
     'process.env': {},
@@ -19,7 +20,13 @@ export const defaultConfig: UserConfig = {
       formats: ['es'],
     },
     rollupOptions: {
-      external: ['react', /^react-dom/, 'react/jsx-runtime', 'styled-components'],
+      external: [
+        'react',
+        /^react-dom/,
+        'react/jsx-runtime',
+        'styled-components',
+        './checkoutPairWorker.ts',
+      ],
       output: {
         exports: 'named',
         dir: 'dist',
@@ -30,4 +37,7 @@ export const defaultConfig: UserConfig = {
       },
     },
   },
+  worker: {
+    format: 'es',
+  },
 }

packages/@repo/package.config/package.json

@@ -7,5 +7,8 @@
   "types": "./src/package.config.ts",
   "scripts": {
     "check:types": "tsc --noEmit --skipLibCheck src/package.config.ts"
+  },
+  "dependencies": {
+    "@web/rollup-plugin-import-meta-assets": "2.2.1"
   }
 }

packages/@repo/package.config/src/package.config.ts

@@ -1,4 +1,6 @@
 import {defineConfig} from '@sanity/pkg-utils'
+// @ts-expect-error -- missing types
+import {importMetaAssets} from '@web/rollup-plugin-import-meta-assets'
 
 export default defineConfig({
   define: {
@@ -29,6 +31,18 @@ export default defineConfig({
   legacyExports: true,
   rollup: {
     optimizeLodash: true,
+    plugins: ([t1, t2, t3, t4, t5, t6, ...plugins]) => [
+      t1,
+      t2,
+      t3,
+      t4,
+      t5,
+      t6,
+      importMetaAssets({
+        include: ['**/checkoutPair.mjs', '**/checkoutPair.ts'],
+      }),
+      ...plugins,
+    ],
   },
   tsconfig: 'tsconfig.lib.json',
   strictOptions: {

packages/@sanity/vision/src/components/PerspectivePopover.tsx

@@ -1,22 +1,24 @@
 import {HelpCircleIcon} from '@sanity/icons'
 import {Badge, Button, Card, Inline, Popover, Stack, Text, useClickOutside} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {useTranslation} from 'sanity'
 
 import {visionLocaleNamespace} from '../i18n'
 import {PerspectivePopoverContent, PerspectivePopoverLink} from './PerspectivePopover.styled'
 
 export function PerspectivePopover() {
   const [open, setOpen] = useState(false)
-  const [buttonEl, setButtonEl] = useState<HTMLElement | null>(null)
-  const [popoverEl, setPopoverEl] = useState<HTMLElement | null>(null)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const popoverRef = useRef<HTMLDivElement | null>(null)
 
   const handleClick = useCallback(() => setOpen((o) => !o), [])
-  const handleClickOutside = useCallback(() => setOpen(false), [])
 
   const {t} = useTranslation(visionLocaleNamespace)
 
-  useClickOutside(handleClickOutside, [buttonEl, popoverEl])
+  useClickOutside(
+    () => setOpen(false),
+    () => [buttonRef.current, popoverRef.current],
+  )
 
   return (
     <Popover
@@ -45,7 +47,7 @@ export function PerspectivePopover() {
       placement="bottom-start"
       portal
       padding={3}
-      ref={setPopoverEl}
+      ref={popoverRef}
       open={open}
     >
       <Button
@@ -54,7 +56,7 @@ export function PerspectivePopover() {
         padding={2}
         tone="primary"
         fontSize={1}
-        ref={setButtonEl}
+        ref={buttonRef}
         onClick={handleClick}
         selected={open}
       />

packages/sanity/.eslintignore

@@ -6,3 +6,4 @@ presentation.js
 router.js
 structure.js
 /migrate/*
+/web-workers/*

packages/sanity/.gitignore

@@ -30,3 +30,6 @@
 /migrate.js
 /_internal.js
 /cli.js
+
+/web-workers/**/*.map
+/web-workers/**/*.esm.js

packages/sanity/package.json

@@ -127,6 +127,7 @@
   "scripts": {
     "build": "pkg-utils build --strict --check --clean",
     "build:bundle": "vite build --config package.bundle.ts",
+    "build:web-workers": "vite build --config package.worker.ts",
     "check:types": "tsc --project tsconfig.lib.json",
     "clean": "rimraf _internal.js _singletons.js cli.js desk.js migrate.js presentation.js router.js structure.js lib",
     "coverage": "jest --coverage",

packages/sanity/package.worker.ts

@@ -0,0 +1,32 @@
+import {defineConfig, mergeConfig} from 'vite'
+
+import {defaultConfig} from '../@repo/package.bundle/src/package.bundle'
+
+export default defineConfig(() => {
+  return mergeConfig(defaultConfig, {
+    define: {
+      'window.process': 'undefined',
+      'window.location': 'location',
+      'window.console': 'console',
+      'window.addEventListener': 'addEventListener',
+    },
+    build: {
+      lib: {
+        entry: './src/core/store/_legacy/document/document-pair/checkoutPairWorker.ts',
+        fileName: 'checkoutPair',
+      },
+      rollupOptions: {
+        external: [],
+        output: {
+          exports: 'none',
+          dir: 'web-workers',
+          format: 'iife',
+          inlineDynamicImports: true,
+        },
+      },
+    },
+    worker: {
+      format: 'iife',
+    },
+  })
+})

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

@@ -121,6 +121,9 @@ export async function getViteConfig(options: ViteOptions): Promise<InlineConfig>
       'process.env.MODE': JSON.stringify(mode),
       ...getStudioEnvironmentVariables({prefix: 'process.env.', jsonEncode: true}),
     },
+    worker: {
+      format: 'es',
+    },
   }
 
   if (mode === 'production') {

packages/sanity/src/core/comments/components/list/CommentsListItemLayout.tsx

@@ -200,7 +200,7 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
 
   const [value, setValue] = useState<CommentMessage>(message)
   const [isEditing, setIsEditing] = useState<boolean>(false)
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const rootElementRef = useRef<HTMLDivElement | null>(null)
   const startMessage = useRef<CommentMessage>(message)
   const [menuOpen, setMenuOpen] = useState<boolean>(false)
 
@@ -315,12 +315,6 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
 
   const handleCloseMenu = useCallback(() => setMenuOpen(false), [])
 
-  const handleClickOutside = useCallback(() => {
-    if (!hasChanges) {
-      cancelEdit()
-    }
-  }, [cancelEdit, hasChanges])
-
   const handleRootKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'Escape' && !hasChanges) {
@@ -332,7 +326,14 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
 
   useDidUpdate(isEditing, handleCloseMenu)
 
-  useClickOutside(handleClickOutside, [rootElement])
+  useClickOutside(
+    () => {
+      if (!hasChanges) {
+        cancelEdit()
+      }
+    },
+    () => [rootElementRef.current],
+  )
 
   const name = user?.displayName ? (
     <Text size={1} weight="medium" textOverflow="ellipsis" title={user.displayName}>
@@ -347,7 +348,7 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
       data-menu-open={menuOpen ? 'true' : 'false'}
       data-testid="comments-list-item-layout"
       onKeyDown={handleRootKeyDown}
-      ref={setRootElement}
+      ref={rootElementRef}
       space={4}
     >
       <InnerStack space={1} data-muted={displayError}>

packages/sanity/src/core/comments/components/pte/comment-input/Editable.tsx

@@ -9,7 +9,7 @@ import {useClickOutside} from '@sanity/ui'
 // eslint-disable-next-line camelcase
 import {getTheme_v2} from '@sanity/ui/theme'
 import {isEqual} from 'lodash'
-import {type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {type KeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react'
 import {css, styled} from 'styled-components'
 
 import {Popover, type PopoverProps} from '../../../../../ui-components'
@@ -84,7 +84,7 @@ export function Editable(props: EditableProps) {
     placeholder = t('compose.create-comment-placeholder'),
     renderBlock,
   } = props
-  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+  const popoverRef = useRef<HTMLDivElement | null>(null)
   const rootElementRef = useRef<HTMLDivElement | null>(null)
   const editableRef = useRef<HTMLDivElement | null>(null)
   const mentionsMenuRef = useRef<MentionsMenuHandle | null>(null)
@@ -112,13 +112,14 @@ export function Editable(props: EditableProps) {
     [placeholder],
   )
 
-  const handleClickOutside = useCallback(() => {
-    if (mentionsMenuOpen) {
-      closeMentions()
-    }
-  }, [closeMentions, mentionsMenuOpen])
-
-  useClickOutside(handleClickOutside, [popoverElement])
+  useClickOutside(
+    () => {
+      if (mentionsMenuOpen) {
+        closeMentions()
+      }
+    },
+    () => [popoverRef.current],
+  )
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -219,7 +220,7 @@ export function Editable(props: EditableProps) {
         fallbackPlacements={POPOVER_FALLBACK_PLACEMENTS}
         open={mentionsMenuOpen}
         placement="bottom"
-        ref={setPopoverElement}
+        ref={popoverRef}
         referenceElement={cursorElement}
       />