update form builders

demo/playground/src/jvmMain/kotlin/formServer.kt

@@ -10,7 +10,7 @@ import space.kscience.dataforge.context.request
 import space.kscience.visionforge.VisionManager
 import space.kscience.visionforge.html.VisionOfHtmlForm
 import space.kscience.visionforge.html.VisionPage
-import space.kscience.visionforge.html.bindForm
+import space.kscience.visionforge.html.bindToVision
 import space.kscience.visionforge.onPropertyChange
 import space.kscience.visionforge.server.close
 import space.kscience.visionforge.server.openInBrowser
@@ -36,7 +36,7 @@ fun main() {
             visionManager,
             VisionPage.scriptHeader("js/visionforge-playground.js"),
         ) {
-            bindForm(form) {
+            form {
                 label {
                     htmlFor = "fname"
                     +"First name:"
@@ -66,9 +66,9 @@ fun main() {
                     type = InputType.submit
                     value = "Submit"
                 }
+                vision(bindToVision(form))
             }
             println(form.values)
-            vision(form)
         }
 
     }.start(false)

visionforge-core/src/commonMain/kotlin/space/kscience/visionforge/ControlVision.kt

@@ -39,7 +39,8 @@ public interface ControlVision : Vision {
 @Serializable
 @SerialName("control.click")
 public class VisionClickEvent(override val meta: Meta) : VisionControlEvent() {
-    public val payload: Meta? by meta.node()
+    public val payload: Meta get() = meta[::payload.name] ?: Meta.EMPTY
+
     public val name: Name? get() = meta["name"].string?.parseAsName()
 
     override fun toString(): String = meta.toString()

visionforge-core/src/commonMain/kotlin/space/kscience/visionforge/html/VisionOfHtmlForm.kt

@@ -1,8 +1,8 @@
 package space.kscience.visionforge.html
 
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Job
 import kotlinx.html.FORM
-import kotlinx.html.TagConsumer
-import kotlinx.html.form
 import kotlinx.html.id
 import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
@@ -10,6 +10,7 @@ import space.kscience.dataforge.meta.Meta
 import space.kscience.dataforge.meta.node
 import space.kscience.dataforge.meta.string
 import space.kscience.visionforge.ClickControl
+import space.kscience.visionforge.onClick
 
 /**
  * @param formId an id of the element in rendered DOM, this form is bound to
@@ -18,18 +19,25 @@ import space.kscience.visionforge.ClickControl
 @SerialName("html.form")
 public class VisionOfHtmlForm(
     public val formId: String,
-) : VisionOfHtmlControl() {
+) : VisionOfHtmlControl(), ClickControl {
     public var values: Meta? by properties.node()
 }
 
-public fun <R> TagConsumer<R>.bindForm(
-    visionOfForm: VisionOfHtmlForm,
-    builder: FORM.() -> Unit,
-): R = form {
-    this.id = visionOfForm.formId
-    builder()
+/**
+ * Create a [VisionOfHtmlForm] and bind this form to the id
+ */
+public fun FORM.bindToVision(id: String): VisionOfHtmlForm {
+    this.id = id
+    return VisionOfHtmlForm(id)
 }
 
+public fun FORM.bindToVision(vision: VisionOfHtmlForm): VisionOfHtmlForm {
+    this.id = vision.formId
+    return vision
+}
+
+public fun VisionOfHtmlForm.onSubmit(scope: CoroutineScope, block: (Meta?) -> Unit): Job = onClick(scope) { block(payload) }
+
 
 @Serializable
 @SerialName("html.button")

visionforge-core/src/jsMain/kotlin/space/kscience/visionforge/formRenderers.kt

@@ -15,8 +15,10 @@ import space.kscience.dataforge.names.Name
 import space.kscience.visionforge.html.VisionOfHtmlButton
 import space.kscience.visionforge.html.VisionOfHtmlForm
 
-
-internal fun FormData.toMeta(): Meta {
+/**
+ * Convert form data to Meta
+ */
+public fun FormData.toMeta(): Meta {
     @Suppress("UNUSED_VARIABLE") val formData = this
     //val res = js("Object.fromEntries(formData);")
     val `object` = js("{}")
@@ -67,8 +69,10 @@ internal val formVisionRenderer: ElementVisionRenderer =
         form.onsubmit = { event ->
             event.preventDefault()
             val formData = FormData(form).toMeta()
-            client.sendMetaEvent(name, formData)
-            console.info("Sent: ${formData.toMap()}")
+            client.context.launch {
+                client.sendEvent(name, VisionClickEvent(name = name, payload = formData))
+            }
+            console.info("Sent form data: ${formData.toMap()}")
             false
         }
     }