Typesafe createElement and cloneElement (#605)

* Safe constructor for `ReactNode` based on `String` * Update ReactNode.kt * warning is suppressed * Typesafe `childList` * Fixes after review * Typesafe `createElement` and `cloneElement` * Strange unsafe `cloneElement` declarations
JetBrains · Aug 9, 2021 · 1e0015e · 1e0015e
1 parent 23a6c9e
commit 1e0015e
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/kotlin-react/src/main/kotlin/react/RBuilder.kt b/kotlin-react/src/main/kotlin/react/RBuilder.kt
@@ -26,7 +26,7 @@ interface RBuilder {
     fun <P : Props> child(
         type: ElementType<P>,
         props: P,
-        children: List<Any>,
+        children: List<ReactNode>,
     ) {
         child(createElement(type, props, *children.toTypedArray()))
     }
@@ -72,7 +72,7 @@ interface RBuilder {
     )
     fun <P : Props> ComponentClass<P>.node(
         props: P,
-        children: List<Any> = emptyList(),
+        children: List<ReactNode> = emptyList(),
     ) {
         child(this, clone(props), children)
     }
@@ -91,7 +91,7 @@ interface RBuilder {
     fun <P : Props> node(
         klazz: KClass<out Component<P, *>>,
         props: P,
-        children: List<Any> = emptyList(),
+        children: List<ReactNode> = emptyList(),
     ) {
         child(klazz.react, props, children)
     }
@@ -174,7 +174,7 @@ inline fun <P : Props, reified C : Component<P, *>> RBuilder.child(
 )
 inline fun <P : Props, reified C : Component<P, *>> RBuilder.node(
     props: P,
-    children: List<Any> = emptyList(),
+    children: List<ReactNode> = emptyList(),
 ) {
     child(C::class.react, props, children)
 }

diff --git a/kotlin-react/src/main/kotlin/react/React.kt b/kotlin-react/src/main/kotlin/react/React.kt
@@ -10,10 +10,14 @@ fun Children.forEachElement(children: Any?, handler: (ReactElement) -> Unit) =
 
 inline fun <P : Props> cloneElement(
     element: ReactElement,
-    vararg child: Any?,
+    vararg child: ReactNode?,
     props: P.() -> Unit,
 ): ReactElement = cloneElement(element, jsObject(props), *child)
 
+@Deprecated(
+    message = "Unsafe API",
+    replaceWith = ReplaceWith("cloneElement(element, props, child)")
+)
 fun clone(element: dynamic, props: dynamic, child: Any? = null): ReactElement =
     cloneElement(element, props, *Children.toArray(child))
 

diff --git a/kotlin-react/src/main/kotlin/react/ReactElement.kt b/kotlin-react/src/main/kotlin/react/ReactElement.kt
@@ -10,25 +10,26 @@ external interface ReactElement : ReactNode {
 external fun <P : Props> createElement(
     type: String,
     props: P = definedExternally,
-    vararg child: Any?,
+    vararg child: ReactNode?,
 ): ReactElement
 
 external fun <P : Props> createElement(
     type: ElementType<P>,
     props: P = definedExternally,
-    vararg child: Any?,
+    vararg child: ReactNode?,
 ): ReactElement
 
 external fun <P : Props> cloneElement(
     element: ReactElement,
     props: P = definedExternally,
-    vararg child: Any?,
+    vararg child: ReactNode?,
 ): ReactElement
 
+@Deprecated(message = "Unsafe API")
 external fun cloneElement(
     element: dynamic,
     props: dynamic = definedExternally,
-    vararg child: Any?,
+    vararg child: ReactNode?,
 ): ReactElement
 
 external fun isValidElement(

diff --git a/kotlin-styled-next/src/jsMain/kotlin/styled/StyledComponents.kt b/kotlin-styled-next/src/jsMain/kotlin/styled/StyledComponents.kt
@@ -139,7 +139,7 @@ object Styled {
             customStyled(type)
         }
 
-    fun createElement(type: Any, css: CssBuilder, props: WithClassName, children: List<Any>): ReactElement {
+    fun createElement(type: Any, css: CssBuilder, props: WithClassName, children: List<ReactNode>): ReactElement {
         val wrappedType = wrap(type)
         val styledProps = props.unsafeCast<StyledProps>()
         styledProps.css = css

diff --git a/kotlin-styled/src/main/kotlin/styled/StyledComponents.kt b/kotlin-styled/src/main/kotlin/styled/StyledComponents.kt
@@ -222,7 +222,7 @@ object Styled {
         return styledProps.unsafeCast<P>()
     }
 
-    fun createElement(type: String, css: CssBuilder, props: WithClassName, children: List<Any>): ReactElement {
+    fun createElement(type: String, css: CssBuilder, props: WithClassName, children: List<ReactNode>): ReactElement {
         val wrappedType = wrap(type)
         val styledProps = buildStyledProps(css, props)
         return createElement(wrappedType, styledProps, *children.toTypedArray())
@@ -232,7 +232,7 @@ object Styled {
         type: ComponentType<P>,
         css: CssBuilder,
         props: P,
-        children: List<Any>,
+        children: List<ReactNode>,
     ): ReactElement {
         val wrappedType = wrap(type)
         val styledProps = buildStyledProps(css, props)