fix: replace React.createElement with jsx runtime

sanity-io · Dec 13, 2024 · 47c9a69 · 47c9a69
1 parent ded659e
commit 47c9a69
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 31 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -218,9 +218,9 @@ const config = {
               },
               {
                 name: 'react',
-                importNames: ['default', 'createContext'],
+                importNames: ['default', 'createContext', 'createElement'],
                 message:
-                  'Please use named imports, e.g. `import {useEffect, useMemo, type ComponentType} from "react"` instead.\nPlease place "context" in _singletons',
+                  'Please use named imports, e.g. `import {useEffect, useMemo, type ComponentType} from "react"` instead.\nPlease place "context" in _singletons\nPlease use JSX instead of createElement, for example `createElement(Icon)` should be `<Icon />`',
               },
             ],
           },

diff --git a/...rc/_internal/cli/server/renderDocument.ts → ...c/_internal/cli/server/renderDocument.tsx b/...rc/_internal/cli/server/renderDocument.ts → ...c/_internal/cli/server/renderDocument.tsx
@@ -13,7 +13,6 @@ import {isMainThread, parentPort, Worker, workerData} from 'node:worker_threads'
 import chalk from 'chalk'
 import importFresh from 'import-fresh'
 import {parse as parseHtml} from 'node-html-parser'
-import {createElement} from 'react'
 import {renderToStaticMarkup} from 'react-dom/server'
 
 import {TIMESTAMPED_IMPORTMAP_INJECTOR_SCRIPT} from './constants'
@@ -231,7 +230,7 @@ function getDocumentHtml(
 
   debug('Rendering document component using React')
   const result = addTimestampedImportMapScriptToHtml(
-    renderToStaticMarkup(createElement(Document, {...defaultProps, ...props, css})),
+    renderToStaticMarkup(<Document {...defaultProps} {...props} css={css} />),
     importMap,
   )
 

diff --git a/...tils/transform-children/linkMiddleware.ts → ...ils/transform-children/linkMiddleware.tsx b/...tils/transform-children/linkMiddleware.ts → ...ils/transform-children/linkMiddleware.tsx
@@ -1,4 +1,4 @@
-import {createElement, type MouseEvent, type ReactNode} from 'react'
+import {type MouseEvent, type ReactNode} from 'react'
 
 import {type Middleware} from './types'
 
@@ -10,9 +10,12 @@ export function onClick(event: MouseEvent<HTMLAnchorElement>): void {
 
 function createLinkElement(url: string): ReactNode {
   const href = url.startsWith('http') ? url : `https://${url}`
-  const props = {href, target: '_blank', rel: 'noopener noreferrer', key: url, onClick}
 
-  return createElement('a', props, url)
+  return (
+    <a key={url} href={href} target="_blank" rel="noopener noreferrer" onClick={onClick}>
+      {url}
+    </a>
+  )
 }
 
 /**

diff --git a/packages/sanity/src/structure/panes/userComponent/UserComponentPane.tsx b/packages/sanity/src/structure/panes/userComponent/UserComponentPane.tsx
@@ -1,4 +1,4 @@
-import {createElement, isValidElement, useState} from 'react'
+import {isValidElement, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useI18nText} from 'sanity'
 
@@ -17,7 +17,7 @@ export function UserComponentPane(props: UserComponentPaneProps) {
   const {index, pane, paneKey, ...restProps} = props
   const {
     child,
-    component,
+    component: UserComponent,
     menuItems,
     menuItemGroups,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -40,18 +40,19 @@ export function UserComponentPane(props: UserComponentPaneProps) {
       />
 
       <UserComponentPaneContent>
-        {isValidElementType(component) &&
-          createElement(component, {
-            ...restProps,
-            ...restPane,
+        {isValidElementType(UserComponent) && (
+          <UserComponent
+            {...restProps}
+            {...restPane}
             // NOTE: here we're utilizing the function form of refs so setting
             // the ref causes a re-render for `UserComponentPaneHeader`
-            ...({ref: setRef} as any),
-            child: child as any, // @todo: Fix typings
-            paneKey,
-          })}
-
-        {isValidElement(component) && component}
+            ref={setRef as any}
+            // @ts-expect-error - @TODO Fix typings
+            child={child}
+            paneKey={paneKey}
+          />
+        )}
+        {isValidElement(UserComponent) && UserComponent}
       </UserComponentPaneContent>
     </Pane>
   )

diff --git a/packages/sanity/src/ui-components/menuItem/MenuItem.tsx b/packages/sanity/src/ui-components/menuItem/MenuItem.tsx
@@ -9,7 +9,6 @@ import {
   Text,
 } from '@sanity/ui'
 import {
-  createElement,
   forwardRef,
   type HTMLProps,
   isValidElement,
@@ -92,8 +91,8 @@ export const MenuItem = forwardRef(function MenuItem(
     children: childrenProp,
     disabled,
     hotkeys,
-    icon,
-    iconRight,
+    icon: Icon,
+    iconRight: IconRight,
     preview = null,
     renderMenuItem,
     text,
@@ -118,11 +117,11 @@ export const MenuItem = forwardRef(function MenuItem(
             </Flex>
           </PreviewWrapper>
         )}
-        {icon && (
+        {Icon && (
           <Box paddingRight={1}>
             <Text size={FONT_SIZE}>
-              {isValidElement(icon) && icon}
-              {isValidElementType(icon) && createElement(icon)}
+              {isValidElement(Icon) && Icon}
+              {isValidElementType(Icon) && <Icon />}
             </Text>
           </Box>
         )}
@@ -142,7 +141,7 @@ export const MenuItem = forwardRef(function MenuItem(
             )}
           </Stack>
         )}
-        {(badgeText || hotkeys || iconRight) && (
+        {(badgeText || hotkeys || IconRight) && (
           <Flex align="center" gap={3} marginLeft={3}>
             {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
 
@@ -152,10 +151,10 @@ export const MenuItem = forwardRef(function MenuItem(
               </Badge>
             )}
 
-            {iconRight && (
+            {IconRight && (
               <Text size={FONT_SIZE}>
-                {isValidElement(iconRight) && iconRight}
-                {isValidElementType(iconRight) && createElement(iconRight)}
+                {isValidElement(IconRight) && IconRight}
+                {isValidElementType(IconRight) && <IconRight />}
               </Text>
             )}
           </Flex>
@@ -166,12 +165,12 @@ export const MenuItem = forwardRef(function MenuItem(
     preview,
     disabled,
     __unstable_space,
-    icon,
+    Icon,
     text,
     __unstable_subtitle,
     badgeText,
     hotkeys,
-    iconRight,
+    IconRight,
   ])
 
   const renderWrapper = useCallback<ConditionalWrapperRenderWrapperCallback>(