enable perf rules

.oxlintrc.json

@@ -4,12 +4,14 @@
   "plugins": ["eslint", "typescript", "unicorn", "react", "react-perf", "oxc", "import"],
   "categories": {
     "correctness": "error",
+    "perf": "error",
     "suspicious": "warn"
   },
   "rules": {
     "no-console": "error",
     "no-array-sort": "off",
     "rules-of-hooks": "error",
+    "react/jsx-key": "error",
     "react-in-jsx-scope": "off",
     // @TODO these rules should be enabled, and the violations fixed
     "no-unsafe-type-assertion": "off"
@@ -20,7 +22,18 @@
       "rules": {
         "no-console": "off",
         "no-unsafe-type-assertion": "off",
-        "consistent-function-scoping": "off"
+        "consistent-function-scoping": "off",
+        "jsx-no-new-object-as-prop": "off",
+        "jsx-no-new-array-as-prop": "off"
+      }
+    },
+    {
+      "files": ["demo/**"],
+      "rules": {
+        "jsx-no-new-object-as-prop": "off",
+        "jsx-no-new-array-as-prop": "off",
+        "jsx-no-jsx-as-prop": "off",
+        "jsx-no-new-function-as-prop": "off"
       }
     }
   ]

demo/components/SpeechSynthesis.tsx

@@ -1,7 +1,5 @@
 import type {PortableTextMarkComponent} from '@portabletext/react'
 
-import {useCallback} from 'react'
-
 interface SpeechSynthesisMark {
   _type: 'speech'
   pitch?: number
@@ -15,15 +13,17 @@ export const SpeechSynthesis: PortableTextMarkComponent<SpeechSynthesisMark> = (
   value,
 }) => {
   const pitch = value?.pitch || 1
-  const handleSynthesis = useCallback(() => {
-    const msg = new SpeechSynthesisUtterance()
-    msg.text = text
-    msg.pitch = pitch
-    window.speechSynthesis.speak(msg)
-  }, [text, pitch])
 
   return (
-    <button type="button" onClick={handleSynthesis}>
+    <button
+      type="button"
+      onClick={() => {
+        const msg = new SpeechSynthesisUtterance()
+        msg.text = text
+        msg.pitch = pitch
+        window.speechSynthesis.speak(msg)
+      }}
+    >
       {children}
     </button>
   )

demo/components/TermDefinition.tsx

@@ -1,7 +1,7 @@
 import type {PortableTextMarkComponent} from '@portabletext/react'
 
 import {Popover, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
+import {useState} from 'react'
 
 interface DefinitionMark {
   _type: 'definition'
@@ -10,8 +10,6 @@ interface DefinitionMark {
 
 export const TermDefinition: PortableTextMarkComponent<DefinitionMark> = ({value, children}) => {
   const [isOpen, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [setOpen])
-  const handleClose = useCallback(() => setOpen(false), [setOpen])
   return (
     <Popover
       animate
@@ -25,7 +23,11 @@ export const TermDefinition: PortableTextMarkComponent<DefinitionMark> = ({value
         </Text>
       }
     >
-      <span style={{textDecoration: 'underline'}} onMouseOver={handleOpen} onMouseOut={handleClose}>
+      <span
+        style={{textDecoration: 'underline'}}
+        onMouseOver={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+      >
         {children}
       </span>
     </Popover>

demo/demo.tsx

@@ -1,4 +1,7 @@
-import {type PortableTextComponents, PortableText} from '@portabletext/react'
+import {
+  type PortableTextComponents,
+  PortableText,
+} from '@portabletext/react-latest'
 import {studioTheme, ThemeProvider} from '@sanity/ui'
 import {StrictMode} from 'react'
 import {createRoot} from 'react-dom/client'
@@ -48,15 +51,13 @@ const ptComponents: PortableTextComponents = {
   },
 }
 
-function Demo() {
-  return <PortableText value={blocks} components={ptComponents} />
-}
+
 
 const root = createRoot(document.getElementById('demo-root')!)
 root.render(
   <StrictMode>
     <ThemeProvider theme={studioTheme}>
-      <Demo />
+    <PortableText value={blocks} components={ptComponents} />
     </ThemeProvider>
   </StrictMode>,
 )

package.json

@@ -29,6 +29,7 @@
     "!dist/stats.html"
   ],
   "scripts": {
+    "benchmark": "pnpm test bench",
     "build": "tsdown",
     "prebuild:demo": "pnpm clean",
     "build:demo": "vite build demo --config=./vite.config.demo.ts --base=/react-portabletext/",
@@ -54,9 +55,11 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
+    "@portabletext/react-latest": "npm:@portabletext/react@latest",
     "@sanity/tsconfig": "^2.0.0",
     "@sanity/tsdown-config": "^0.4.0",
     "@sanity/ui": "^3.1.11",
+    "@testing-library/react": "^16.3.0",
     "@types/leaflet": "^1.9.21",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -65,6 +68,7 @@
     "babel-plugin-react-compiler": "^1.0.0",
     "esbuild": "^0.27.1",
     "esbuild-register": "^3.6.0",
+    "happy-dom": "^20.0.11",
     "leaflet": "^1.9.4",
     "oxfmt": "^0.17.0",
     "oxlint": "^1.32.0",