fix(regression): output valid jsx

demo/components/AnnotatedMap.tsx

@@ -1,5 +1,5 @@
 import 'leaflet/dist/leaflet.css'
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import type {ReducedLeafletApi} from './Leaflet'
 import {PortableTextTypeComponent} from '../../src'
 

demo/components/CharacterReference.tsx

@@ -1,4 +1,4 @@
-import React, {MouseEventHandler} from 'react'
+import {MouseEventHandler} from 'react'
 import {Tooltip, Text, Avatar, Flex, Box, Stack} from '@sanity/ui'
 import type {PortableTextMarkComponent} from '../../src'
 

demo/components/Code.tsx

@@ -1,5 +1,4 @@
 import './Code.css'
-import React from 'react'
 import Refractor from 'react-refractor'
 import typescript from 'refractor/lang/typescript'
 import {PortableTextComponent} from '../../src'

demo/components/CurrencyAmount.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type {PortableTextTypeComponent} from '../../src'
 
 const style = {background: '#eee'}

demo/components/Link.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {PortableTextMarkComponent} from '../../src'
 
 interface LinkMark {

demo/components/LinkableHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {PortableTextBlockComponent, toPlainText} from '../../src'
 
 /**

demo/components/SchnauzerList.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type {PortableTextListComponent} from '../../src'
 
 const size = 14

demo/components/SpeechSynthesis.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import type {PortableTextMarkComponent} from '../../src'
 
 interface SpeechSynthesisMark {

demo/components/TermDefinition.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {Text, Popover} from '@sanity/ui'
 import type {PortableTextMarkComponent} from '../../src'
 

demo/demo.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import {render} from 'react-dom'
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
 import {studioTheme, ThemeProvider} from '@sanity/ui'
 import {PortableTextComponents} from '../src'
 import {PortableText} from '../src/react-portable-text'
@@ -53,11 +53,11 @@ function Demo() {
   return <PortableText value={blocks} components={ptComponents} />
 }
 
-render(
-  <React.StrictMode>
+const root = createRoot(document.getElementById('demo-root')!)
+root.render(
+  <StrictMode>
     <ThemeProvider theme={studioTheme}>
       <Demo />
     </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById('demo-root'),
+  </StrictMode>,
 )

package.json

@@ -123,7 +123,7 @@
     "esbuild-register": "^3.5.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-config-sanity": "^6.0.0",
+    "eslint-config-sanity": "^7.0.1",
     "eslint-plugin-react": "^7.33.2",
     "husky": "^8.0.3",
     "leaflet": "^1.9.4",

src/components/defaults.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type {PortableTextBlockStyle} from '@portabletext/types'
 import type {PortableTextBlockComponent, PortableTextReactComponents} from '../types'
 import {defaultMarks} from './marks'

src/components/list.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type {PortableTextListComponent, PortableTextListItemComponent} from '../types'
 
 export const defaultLists: Record<'number' | 'bullet', PortableTextListComponent> = {

src/components/marks.tsx

@@ -1,5 +1,4 @@
 import type {TypedObject} from '@portabletext/types'
-import React from 'react'
 import type {PortableTextMarkComponent} from '../types'
 
 interface DefaultLink extends TypedObject {

src/components/unknown.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type {PortableTextReactComponents} from '../types'
 import {unknownTypeWarning} from '../warnings'
 

src/react-portable-text.tsx

@@ -1,4 +1,4 @@
-import React, {type ReactNode, useMemo} from 'react'
+import {type ReactNode, useMemo} from 'react'
 import type {ToolkitNestedPortableTextSpan, ToolkitTextNode} from '@portabletext/toolkit'
 import type {
   MissingComponentHandler,

test/components.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactDOM from 'react-dom/server'
 import tap from 'tap'
 import {PortableTextProps} from '../src'

test/mutations.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactDOM from 'react-dom/server'
 import tap from 'tap'
 import {PortableText} from '../src/react-portable-text'

test/portable-text.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {Fragment} from 'react'
 import ReactDOM from 'react-dom/server'
 import tap from 'tap'
 import {PortableText} from '../src/react-portable-text'
@@ -333,8 +333,8 @@ tap.test('can specify custom component for custom block types with children', (t
 
       return (
         <p style={{background: props.value.background}}>
-          {props.value.children.map(({text}) => (
-            <React.Fragment key={text}>Customers say: {text}</React.Fragment>
+          {props.value.children.map(({text}: any) => (
+            <Fragment key={text}>Customers say: {text}</Fragment>
           ))}
         </p>
       )

tsconfig.dist.json

@@ -7,7 +7,6 @@
 
     "lib": ["ES2016", "DOM"],
     "noUncheckedIndexedAccess": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react"
+    "forceConsistentCasingInFileNames": true
   }
 }

tsconfig.json

@@ -1,14 +1,13 @@
 {
   "extends": "./tsconfig.settings",
-  "include": ["./demo", "./package.config.ts", "./package.json", "./src"],
+  "include": ["./demo", "./package.config.ts", "./package.json", "./src", "./test"],
   "compilerOptions": {
     "rootDir": ".",
     "outDir": "./dist",
 
     "lib": ["ES2016", "DOM"],
     "noUncheckedIndexedAccess": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
     "resolveJsonModule": true
   }
 }

tsconfig.settings.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
+    "jsx": "react-jsx",
 
     // Strict type-checking
     "strict": true,