Migrating from 4.7.1 to 5.1.0 (and still using legacy compiler). All seems to work, except that the table definitions are not applied. I have a table type definition as:

setOf(TableType.BORDERED, TableType.SMALL, TableType.STRIPED, TableType.HOVER)

But it is rendered as a plain table without borders, stripes etc. When I use Intellij to check the documentation of BORDERED I see:

io.kvision.table.TableType 
enum entry BORDERED 
Enum constant ordinal: 1
  Gradle: io.kvision:kvision-bootstrap:5.1.0

If I check to the table definition i Showcase/BasicTab (which renders correctly) it says:

io.kvision.table.TableType 
enum entry BORDERED 
Enum constant ordinal: 1
  Gradle: io.kvision:kvision-bootstrap:klib:5.1.0

I seem to be missing a klib. How can I fix this?

How do I "properly" get a row number clicked in Tabulator? This works on 2 of my views:

val tabulatorRowIndex = ((event.detail as io.kvision.tabulator.js.Tabulator.RowComponent).getIndex() as Int) - 1

But on the third its failing on cast exception

How do I serialize a class with null fields? (I'm trying to pass it to backend using the rest client)

Serializer for class 'null' is not found.

My recent go-to architecture for web/mobile apps has been a typed backend API via graphql, consumed with Apollo multi-platform on mobile and Apollo Client on web. I'm starting a new side project and am considering other approaches, like KVision. One thing that scares me is that KVision moves me in a direction away from the "native frontend" approach that JetBrains/KMM is pushing. For example, I don't want to use Cordova for Android -- I want to use Compose. I'd like to experiment with Compose for web and potentially desktop as well. Is anyone using the RPC layer from KVision, but integrating that with native client UI?

Hi, is it possible to use form with data class and keep some properties, which are not editable (there is no matching field in form). For example:

data class Comment(val title: String val note: String, author_id: Int)

And I the form contains only title and note, when I call

form,getData()

I get an error saying

author_id

is required.

@Robert Jaros Hi. I have a situation where I am trying to upload a large image file and need the result from the MultiPart Form POST. I am using the Ajax version of your upload technique (as far as I could properly grasp from the doc). I am uploading the file to an endpoint on the server (Spring WebFlux), say

/api/v1/image/upload

. The server-side is reacting correctly and the file is uploading properly and the server returns a Flux<String> with success/fail messages. The problem is that I cannot sort out how to capture that response stream and navigate the UI to a page where I can display results. Rather, the browser navigates to

/api/v1/image/upload

and displays the results as text there. If I then hit the "Back button" in the browser I am back to normal Frontend code. In the JQuery docs there should be a

success

handler that would catch the servers response data, but I have been unable to sort out where to hook into that in KVision. I'm putting sa sample of my "upload" Frontend code into the thread.

Is it possible to format numbers in a spinner? I'd like them to be displayed like this in the form as the user enters them: 10000 as: 10 000 etc.

Is there any calendar widget I could use that could be presented on a full page?

777 ⭐ on GitHub 🤩

Hi! I have a question regarding

bind

function, probably I just don't understand how should I work with it. Details in thread

Hi again! I have a question regarding the integration with react components. I have a prop in react component (see on picture in thread). I translate it to

Props

interface as

var emptySymbol: dynamic

. It should accept react element, but I have no idea how can I do it. I tried few things without success, details in thread

Trying out the

addressbook-fullstack-ktor

example and getting this error on `frontendRun`:

> [webpack-cli] Unable to load '@webpack-cli/serve' command
  [webpack-cli] TypeError: options.forEach is not a function
  [webpack-cli] TypeError: options.forEach is not a function
      at WebpackCLI.makeCommand (/home/raman/source_ext/kvision-examples/addressbook-fullstack-ktor/build/js/node_modules/webpack-cli/lib/webpack-cli.js:173:21)
      at ServeCommand.apply (/home/raman/source_ext/kvision-examples/addressbook-fullstack-ktor/build/js/node_modules/@webpack-cli/serve/lib/index.js:41:19)
      at loadCommandByName (/home/raman/source_ext/kvision-examples/addressbook-fullstack-ktor/build/js/node_modules/webpack-cli/lib/webpack-cli.js:907:35)
      at async Command.<anonymous> (/home/raman/source_ext/kvision-examples/addressbook-fullstack-ktor/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1462:17)
      at async Promise.all (index 0)
      at async WebpackCLI.run (/home/raman/source_ext/kvision-examples/addressbook-fullstack-ktor/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1500:9)
      at async runCLI (/home/raman/source_ext/kvision-examples/addressbook-fullstack-ktor/build/js/node_modules/webpack-cli/lib/bootstrap.js:11:9)

Hi, a quick question. When does the function

Widget.dispose()

is called?

I'm having issues getting the Bootstrap spinner dependency to work... is there any guidance available for it? My kvision dependencies look like this:

implementation("io.kvision:kvision:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-css:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-spinner:$kvisionVersion")
        implementation("io.kvision:kvision-react:$kvisionVersion")
        implementation("io.kvision:kvision-spinner:$kvisionVersion")
        implementation("io.kvision:kvision-redux:$kvisionVersion")

but IntelliJ is failing to find io.kvision.form.spinner.Spinner

Hi all, I'm trying kvision for the first time and I'm a bit confused about the virtual dom, as it seems that the dom is always recreated rather than patched For example if I have

val counter = ObservableValue(0)

 simplePanel().bind(counter) { count ->
    span("Counter is $count")
 }

When the value of counter changes, the span element gets removed from the dom and a new one is created. Using snabbdom directly, instead, when the state changes, it traverses the existing dom and make changes to it

Is it safe to get coroutine scope inside a widget this way?

val scope = kvscope.unsafeCast<CoroutineScope>()

I have a problem with navigation. Tab with corresponding route is not selected when page is loaded, see code and a screenshot in thread.

Looks like the generated source files are not automatically generated by Intellij. Is that a bug in KVision or IntelliJ? Also "generated-src" is not set up to be source directory.

There is class kv-tab-close but no kv-tab-icon. Would this be the way to go?

Is there a way to resize a window by grabbing it's left, right, top, bottom borders?

Hi, Is there someone that face to hot reload problem with the project template-fullstack-ktor ? On my side, modification of front end code does not seems to be took into account by my browser, I need to relaunch

./gradlew frontendRun

to see my changes. Perhaps I missed some part of the documentation.

When I upgrade to 5.5.1 I get the following when I try to run

[webpack-cli] Unable to load '@webpack-cli/serve' command

[webpack-cli] TypeError: options.forEach is not a function

[webpack-cli] TypeError: options.forEach is not a function

at WebpackCLI.makeCommand (/home/leo/tmp/dev/tkview/build/js/node_modules/webpack-cli/lib/webpack-cli.js:173:21)

at ServeCommand.apply (/home/leo/tmp/dev/tkview/build/js/node_modules/@webpack-cli/serve/lib/index.js:41:19)

at loadCommandByName (/home/leo/tmp/dev/tkview/build/js/node_modules/webpack-cli/lib/webpack-cli.js:907:35)

at async Command.<anonymous> (/home/leo/tmp/dev/tkview/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1462:17)

at async Promise.all (index 0)

at async WebpackCLI.run (/home/leo/tmp/dev/tkview/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1500:9)

at async runCLI (/home/leo/tmp/dev/tkview/build/js/node_modules/webpack-cli/lib/bootstrap.js:11:9)

Any ideas whats wrong?

Hello, I am new on front-end development and I want to use a react activity calendar component from kvision. Could you give me advice on the best way to initialize parameter data for this component. Thanks for your help

@Robert Jaros Is v5.6.0 requiring Kotlin 1.6 or simply supporting it?

Is it possible to set serialization configuration for whole project? We have a custom serialization configuration (using open polymorphic class structure) and we need same config in Rest client and Form. (unfortunately we are still on version 4, but I am wondering whether the latest version support something like this)

Can I have a DropDown with image?

dropDown(tr("Dropdown with custom list"), icon = "far fa-image", style = ButtonStyle.WARNING) {
    minWidth = 250.px
    image(require("img/cat.jpg")) { height = 170.px; margin = 10.px; title = "Cat" }
    separator()
    image(require("img/dog.jpg")) { height = 170.px; margin = 10.px; title = "Dog" }
}

suggests I can have either a FontAwesome icon plus text or an image. What I want is a custom image with text.

Hi, I am experiencing errors error while executing

./gradlew frontendRun -t

on the wizard-generated KVision project. On the browser, the errors look like:

Compiled with problems:

ERROR in ../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css 1:0

Module parse failed: Unexpected character '@' (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>

> @charset "UTF-8";

| .abc-checkbox {

|   cursor: default;

Any idea of what I might be doing wrong?

Hi, I'm trying to bundle my project as jar, analogous to template-fullstack-ktor and get

Task with name 'frontendBrowserProductionWebpack' not found in root project 'kroviz'.

build.gradle.kts reads:

import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig

plugins {
    val kotlinVersion: String by System.getProperties()
    kotlin("plugin.serialization") version kotlinVersion
    kotlin("js") version kotlinVersion
    val kvisionVersion: String by System.getProperties()
    id("io.kvision") version kvisionVersion
}

version = "2.0.0-SNAPSHOT"
group = "org.apache.isis.client"

kotlin.sourceSets.all {
    languageSettings.useExperimentalAnnotation("kotlin.RequiresOptIn")
}

repositories {
    mavenCentral()
    jcenter()
    mavenLocal()
}

// Versions
val kotlinVersion: String by System.getProperties()
val kvisionVersion: String by System.getProperties()

// Custom Properties
val webDir = file("src/main/web")

kotlin {
    js {
        browser {
            runTask {
                outputFileName = "main.bundle.js"
                sourceMaps = false
                devServer = KotlinWebpackConfig.DevServer(
                    open = false,
                    port = 3000,
                    proxy = mutableMapOf(
                        "/kv/*" to "<http://localhost:8080>",
                        "/kvws/*" to mapOf("target" to "<ws://localhost:8080>", "ws" to true)
                    ),
                    static = mutableListOf("$buildDir/processedResources/js/main")
                )
            }
            webpackTask {
                outputFileName = "main.bundle.js"
            }
            testTask {
                useKarma {
                    useChromeHeadless()
                }
            }
        }
        binaries.executable()
    }
    sourceSets["main"].dependencies {
        implementation(npm("react-awesome-button", "*"))
        implementation(npm("prop-types", "*"))
        implementation("io.kvision:kvision:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-css:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-datetime:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-select:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-spinner:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-upload:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-dialog:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-typeahead:$kvisionVersion")
        implementation("io.kvision:kvision-fontawesome:$kvisionVersion")
        implementation("io.kvision:kvision-i18n:$kvisionVersion")
        implementation("io.kvision:kvision-richtext:$kvisionVersion")
        implementation("io.kvision:kvision-handlebars:$kvisionVersion")
        implementation("io.kvision:kvision-datacontainer:$kvisionVersion")
        implementation("io.kvision:kvision-chart:$kvisionVersion")
        implementation("io.kvision:kvision-tabulator:$kvisionVersion")
        implementation("io.kvision:kvision-pace:$kvisionVersion")
        implementation("io.kvision:kvision-toast:$kvisionVersion")
        implementation("io.kvision:kvision-react:$kvisionVersion")
        implementation("io.kvision:kvision-routing-navigo:$kvisionVersion")
        implementation("io.kvision:kvision-state:$kvisionVersion")
        implementation("io.kvision:kvision-rest:$kvisionVersion")
        implementation("io.kvision:kvision-moment:$kvisionVersion")
        implementation("io.kvision:kvision-maps:$kvisionVersion")
        implementation(npm("xmltojson", "1.3.5", false))
        implementation(npm("flatted", "3.2.2", false))
        implementation(npm("diff", "5.0.0", false))
        implementation(npm("diff2html", "3.4.13", false))
        implementation(npm("xml-beautify", "1.1.2", false))
        implementation(npm("xterm", "4.15.0", false))
    }
    sourceSets["test"].dependencies {
        implementation(kotlin("test-js"))
        implementation("io.kvision:kvision-testutils:$kvisionVersion")
    }
    sourceSets["main"].resources.srcDir(webDir)
}

afterEvaluate {
    tasks {
        create("frontendArchive", Jar::class).apply {
            dependsOn("frontendBrowserProductionWebpack")
            group = "package"
            archiveAppendix.set("frontend")
            val distribution =
                project.tasks.getByName("frontendBrowserProductionWebpack", KotlinWebpack::class).destinationDirectory!!
            from(distribution) {
                include("*.*")
            }
            from(webDir)
            duplicatesStrategy = DuplicatesStrategy.EXCLUDE
            into("/assets")
            inputs.files(distribution, webDir)
            outputs.file(archiveFile)
            manifest {
                attributes(
                    mapOf(
                        "Implementation-Title" to rootProject.name,
                        "Implementation-Group" to rootProject.group,
                        "Implementation-Version" to rootProject.version,
                        "Timestamp" to System.currentTimeMillis()
                    )
                )
            }
            val dependencies =
                    project.tasks["frontendArchive"].outputs.files
            dependencies.forEach {
                if (it.isDirectory) from(it) else from(zipTree(it))
            }
            exclude("META-INF/*.RSA", "META-INF/*.SF", "META-INF/*.DSA")
            inputs.files(dependencies)
            outputs.file(archiveFile)
            duplicatesStrategy = DuplicatesStrategy.EXCLUDE
        }
    }
}

What am I missing

I there a reason why methods in

interface Container

returns Container? I can't see any usecase where it could be useful and I don't think it's a good pattern (fluent interface). I think they should return

Unit

The only case I can imagine return something else is method add. It can return added component to support this shortcut:

val mycomponent = add(MyComponent())