refactor(react, react-await, react-image): replace createElement by j…

…sx (#447)

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

I replace createElement by jsx

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

.changeset/thick-rabbits-act.md

@@ -0,0 +1,7 @@
+---
+"@suspensive/react-await": patch
+"@suspensive/react-image": patch
+"@suspensive/react": patch
+---
+
+refactor(react, react-await, react-image): replace createElement by jsx

packages/react-await/src/Await.tsx

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react'
-import { createElement, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 import type { Tuple } from './types'
 import { hashKey } from './utils'
@@ -55,8 +55,9 @@ export type AwaitProps<TData, TKey extends Key> = {
 /**
  * @experimental This is experimental feature.
  */
-export const Await = <TData, TKey extends Key>({ children, options }: AwaitProps<TData, TKey>) =>
-  createElement(children, useAwait<TData, TKey>(options))
+export const Await = <TData, TKey extends Key>({ children: Children, options }: AwaitProps<TData, TKey>) => (
+  <Children {...useAwait<TData, TKey>(options)} />
+)
 
 class AwaitClient {
   private cache = new Map<ReturnType<typeof hashKey>, AwaitState>()

packages/react-image/src/Load.ts → packages/react-image/src/Load.tsx

@@ -1,4 +1,3 @@
-import { createElement } from 'react'
 import type { FunctionComponent } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
@@ -98,5 +97,6 @@ type LoadProps<TLoadSrc extends LoadSrc> = {
   src: TLoadSrc
   children: FunctionComponent<LoadState<TLoadSrc>>
 }
-export const Load = <TLoadSrc extends LoadSrc>({ src, children }: LoadProps<TLoadSrc>) =>
-  createElement(children, useLoad({ src }))
+export const Load = <TLoadSrc extends LoadSrc>({ src, children: Children }: LoadProps<TLoadSrc>) => (
+  <Children {...useLoad({ src })} />
+)

packages/react/src/ErrorBoundary.tsx

@@ -1,15 +1,5 @@
 import type { ComponentProps, ComponentType, ErrorInfo, FunctionComponent, PropsWithChildren, ReactNode } from 'react'
-import {
-  Component,
-  createContext,
-  createElement,
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { Component, createContext, forwardRef, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { ErrorBoundaryGroupContext } from './ErrorBoundaryGroup'
 import type { PropsWithoutChildren } from './types'
 import { assert, hasResetKeysChanged } from './utils'
@@ -93,21 +83,18 @@ class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState
       throw this.state.error
     }
 
+    let childrenOrFallback = children
+    if (this.state.isError) {
+      if (typeof fallback === 'function') {
+        const FallbackComponent = fallback
+        childrenOrFallback = <FallbackComponent error={this.state.error} reset={this.reset} />
+      } else {
+        childrenOrFallback = fallback
+      }
+    }
     return (
-      <ErrorBoundaryContext.Provider
-        value={{
-          ...this.state,
-          reset: this.reset,
-        }}
-      >
-        {this.state.isError
-          ? typeof fallback === 'function'
-            ? createElement(fallback, {
-                error: this.state.error,
-                reset: this.reset,
-              })
-            : fallback
-          : children}
+      <ErrorBoundaryContext.Provider value={{ ...this.state, reset: this.reset }}>
+        {childrenOrFallback}
       </ErrorBoundaryContext.Provider>
     )
   }

packages/react/src/wrap.ts → packages/react/src/wrap.tsx

@@ -1,4 +1,3 @@
-import { createElement } from 'react'
 import type { ComponentProps, ComponentType } from 'react'
 import type { PropsWithoutChildren } from './types'
 import { Delay, ErrorBoundary, ErrorBoundaryGroup, Suspense } from '.'
@@ -38,21 +37,23 @@ class WrapWithoutCSROnly {
     return this
   }
 
-  on = <TProps extends ComponentProps<ComponentType>>(component: ComponentType<TProps>) => {
-    const wrappedComponent = (props: TProps) =>
+  on = <TProps extends ComponentProps<ComponentType>>(Component: ComponentType<TProps>) => {
+    const WrappedComponent = (props: TProps) =>
       this.wrappers.reduce(
-        (acc, [wrapperComponent, wrapperProps]) => createElement(wrapperComponent as any, wrapperProps as any, acc),
-        createElement(component, props)
+        (acc, [WrapperComponent, wrapperProps]) => (
+          <WrapperComponent {...(wrapperProps as any)}>{acc}</WrapperComponent>
+        ),
+        <Component {...props} />
       )
 
     if (process.env.NODE_ENV !== 'production') {
-      wrappedComponent.displayName = this.wrappers.reduce(
-        (acc, [wrapperComponent]) => `with${wrapperComponent.displayName}(${acc})`,
-        component.displayName || component.name || 'Component'
+      WrappedComponent.displayName = this.wrappers.reduce(
+        (acc, [WrapperComponent]) => `with${WrapperComponent.displayName}(${acc})`,
+        Component.displayName || Component.name || 'Component'
       )
     }
 
-    return wrappedComponent
+    return WrappedComponent
   }
 }