make components both simpler and more powerful (#370)

kwebio · Nov 4, 2022 · e175dd4 · e175dd4
1 parent f2a9863
commit e175dd4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/api/kweb-core.api b/api/kweb-core.api
@@ -1724,6 +1724,10 @@ public final class kweb/routing/RouteReceiver {
 	public final fun path (Ljava/lang/String;Lkotlin/jvm/functions/Function2;)V
 }
 
+public abstract interface class kweb/state/AdvancedComponent {
+	public abstract fun render (Lkweb/ElementCreator;)Ljava/lang/Object;
+}
+
 public final class kweb/state/CloseReason {
 	public fun <init> (Ljava/lang/String;Ljava/lang/Throwable;)V
 	public synthetic fun <init> (Ljava/lang/String;Ljava/lang/Throwable;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
@@ -1738,8 +1742,8 @@ public final class kweb/state/CloseReason {
 	public fun toString ()Ljava/lang/String;
 }
 
-public abstract interface class kweb/state/Component {
-	public abstract fun render (Lkweb/ElementCreator;)Ljava/lang/Object;
+public abstract interface class kweb/state/Component : kweb/state/AdvancedComponent {
+	public abstract fun render (Lkweb/ElementCreator;)V
 }
 
 public class kweb/state/KVal : java/lang/AutoCloseable {
@@ -1861,7 +1865,7 @@ public final class kweb/state/RenderHandle {
 
 public final class kweb/state/RenderKt {
 	public static final fun closeOnElementCreatorCleanup (Lkweb/ElementCreator;Lkweb/state/KVal;)V
-	public static final fun render (Lkweb/ElementCreator;Lkweb/state/Component;)Ljava/lang/Object;
+	public static final fun render (Lkweb/ElementCreator;Lkweb/state/AdvancedComponent;)Ljava/lang/Object;
 	public static final fun render (Lkweb/ElementCreator;Lkweb/state/KVal;Lkotlin/jvm/functions/Function2;)Lkweb/state/RenderFragment;
 }
 

diff --git a/src/main/kotlin/kweb/state/render.kt b/src/main/kotlin/kweb/state/render.kt
@@ -128,24 +128,42 @@ fun ElementCreator<*>.closeOnElementCreatorCleanup(kv: KVal<*>) {
  * Render the value of a [KVar] into DOM elements, and automatically re-render those
  * elements whenever the value changes.
  */
-fun <R> ElementCreator<*>.render(component: Component<R>) : R {
+fun <PARENT_ELEMENT_TYPE : Element, RETURN_TYPE> ElementCreator<PARENT_ELEMENT_TYPE>.render(
+    component: AdvancedComponent<PARENT_ELEMENT_TYPE, RETURN_TYPE>
+) : RETURN_TYPE {
     return component.render(this)
 }
 
 // ANCHOR: component_definition
 /**
- * [Component]s can be rendered into DOM elements by calling [Component.render].
+ * [AdvancedComponent]s can be rendered into DOM elements by calling [AdvancedComponent.render].
+ *
+ * Unlike [Component], [AdvancedComponent]s allows the parent element type to be configured, and a return
+ * type to be specified.
  */
-interface Component<R> {
+interface AdvancedComponent<in PARENT_ELEMENT_TYPE : Element, out RETURN_TYPE> {
 
     /**
      * Render this [Component] into DOM elements, returning an arbitrary
-     * value of type [R].
+     * value of type [RETURN_TYPE].
      */
-    fun render(elementCreator: ElementCreator<*>) : R
+    fun render(elementCreator: ElementCreator<PARENT_ELEMENT_TYPE>) : RETURN_TYPE
 }
 // ANCHOR_END: component_definition
 
+/**
+ * [Component]s can be rendered into DOM elements by calling [Component.render].
+ *
+ * For more flexibility, see [AdvancedComponent].
+ */
+interface Component : AdvancedComponent<Element, Unit> {
+
+    /**
+     * Render this [Component] into DOM elements
+     */
+    override fun render(elementCreator: ElementCreator<Element>)
+}
+
 class RenderFragment(val startId: String, val endId: String) {
     private val deletionListeners = ArrayList<() -> Unit>()
 

diff --git a/src/test/kotlin/kweb/docs/components.kt b/src/test/kotlin/kweb/docs/components.kt
@@ -13,8 +13,8 @@ import kweb.util.json
 class SimpleComponent(
     val prompt: String = "Enter Your Name",
     val name: KVar<String>
-) : Component<Unit> {
-    override fun render(elementCreator: ElementCreator<*>) {
+) : Component {
+    override fun render(elementCreator: ElementCreator<Element>) {
         with(elementCreator) {
             div {
                 h1().text(prompt)
@@ -48,11 +48,11 @@ class BulmaInput(
     val state: KVal<BulmaState>? = null,
     val disabled: KVal<Boolean>? = null,
     val value: KVar<String>
-) : Component<InputElement> {
+) : Component {
 
-    override fun render(elementCreator: ElementCreator<*>) : InputElement {
+    override fun render(elementCreator: ElementCreator<*>) {
         with(elementCreator) {
-            val renderedInput = input(type = type) { inputElement ->
+            input(type = type) { inputElement ->
                 var inputClassList: KVal<List<String>> = kval(listOf("input"))
                 with(inputElement) {
 
@@ -79,8 +79,6 @@ class BulmaInput(
 
                 }
             }
-
-            return renderedInput
         }
     }