set the channel description: Web multi-platform programming

So guys and gals, when we're writing react-like framework that would support server-side rendering and hydration in Kotlin? ^^

Hello, I'm incubating client-server WEB framework. I want it to support both client and server side rendering and hydration. So here's the problem: • Having to define code that runs only on browser side and implements UI interactions needs to be in separate file. Not yet so annoying. • As I have to reference JS side-code from my component in common, I need to create expect declaration for it and mark it actual. Than I need to crate dummy actual implementation for other backends(like JVM), that just throws an exception saying it suppose not be executed on server-side. This is pretty annoying. I ended up creating dukat-like tool that generates declarations from WebIDL to expect declarations for common, actual external declarations for JS and actual dummy implementations for other backeds. It allowed me to write client-side code inside components in common. What do you think of this solution? Any ideas for cleaner solution?

@Robert Jaros any thoughts on server-side rendering and hydration in relation to kvision?

I don't even know what hydration is 😛

And I'm thinking a bit about ssr, but nothing concrete at the moment.

But I'm always looking for new ideas 😉

Hydration is process of attaching virtual dom / components to native dom generated from server-side rendered html.

I recommend this reading - https://lihautan.com/hydrating-text-content/

The things you have said about your project - is it somehow similar to kweb (https://kweb.io/) ?

Ah, no. It's similar to React.

kweb is simillar to Vaadin.

In kweb and Vaading events are sent from client to server for processing and than server responds with UI changes that are to be made.

Also interesting concept, but relatively heavy on server resources and limits UI reactiveness

I would translate React to kotlin directly if I wouldn't prefer different approach to state management. I prefer more reactive approach to state management - Like in JavaFX. I prefer to keep my model in observable data stracture and bind UI componenets to it.

Can anyone help me understand how can we handle asynchronous network calls with ktor http client like adding loader and when it is either success or error then hide it and load appropriate data, with promises and observables it could be done through success or error callback but how can we achieve the same with ktor http client?

A little teaser - How would like such DSL?

// Define some hooks. Maybe I'll bulk generate those for all tags later.
// Using Element API
fun CTagBuilder<OPTION>.onSelect(callback : (Event) -> Unit) {
    attach<HTMLSelectElement> { element -> HTMLSelectElement
        //element.onselect = callback
        //or
        element.addEventListener("onselect", callback)
    }
}

// Using TagConsumer API
fun TagConsumer<*>.onSelect(tag : OPTION /** No multiple receivers yet : ( */, callback : (org.w3c.dom.events.Event) -> Unit) {
    onTagEvent(tag, "onselect", callback)
}

// This should be global in JS / request scoped on server
val flow: Flow = Flow()

// Define mutable and observable value
val selectedStyle: Property<Style> = flow.Property(defaultStyle)


// Define some content
val styleSelectionBlock: CBlock = {
    tag(::SELECT) {
        for(style in availableStyles) {
            tag(::OPTION) {
                onSelect {
                    flow {
                        selectedStyle.value = style
                    }
                }
            }
        }
    }
}

fun TagConsumer<*>.styleSelectionBlock2() = {
    select {
        for(style in availableStyles) {
            option {
                onSelect(this) {
                    selectedStyle.value = style
                }
            }
        }
    }
}

val styleDemoBlock: CBlock = {
    tag(::DIV) {
        bind(DIV::classes, selectedStyle.map { setOf(it.className) })

        dynamic(selectedStyle) {
            "This text is shown with the style \"${it.name}\""
        }
    }
}

val styleSelectWithPreview : CBlock = {
    styleSelectionBlock()
//        styleSelectionBlock2() // That works too. kotlinx-html API is supported.
    +styleDemoBlock
}

Than

// This is in commonMain, you can render to text on client too.
fun renderOnServer(out : Appendable) {
    val context = RootContext(emptyMap())
    context.render(styleDemoBlock, out)
}

And

val rootContext by lazy { RootContext(emptyMap())}

fun hydrateOnClient() {
    // We already rendered on server. Now we're just binding model/listeners to the DOM
    rootContext.hydrate(styleSelectWithPreview, rootElement)
}
// or
fun renderOnClient() {
    rootContext.render(styleSelectWithPreview, rootElement)
}

Has anyone created tests for fullstack web mpp, if yes can you please share the sample project?

Has anyone tried sharing code between web and android, If yes can you share the repo?

Copying from #javascript: • Just started a kotlin-mpp full-stack project from IDEA; What gradle task do I run to make it build the entire project as one jar, and where should I put the assets and such? • Also, is there a way to use sass/less easily with the standard setup or no? •

Execution failed for task ':jvmProcessResources'.
> Entry server_style.css is a duplicate but no duplicate handling strategy has been set. Please refer to <https://docs.gradle.org/7.1/dsl/org.gradle.api.tasks.Copy.html#org.gradle.api.tasks.Copy:duplicatesStrategy> for details.

I also get this while trying to run my project, it says server_style.css is duplicate but it's only in jvmMain/resources and not in jsMain/resources or commonMain/resources

Is there a way to always force kotlin/js to recompile when needed? For some reason it sometimes just says it's up to date even though the developmentExecutable folder doesn't exist, which breaks my entire gradle setup

hello new friends

i am working on a Kotlin Multiplatform web framework and am looking for people who are interested in collaborating / sharing ideas 🙂

Hello K friends, What if Node were more than just JS? To celebrate the new year, I am pleased to share a new project called Elide, a new server runtime, like Node or Deno, but polyglot, written in Kotlin and based on GraalVM. We are in alpha and very open to early feedback and contributions for anyone interested, over in #framework-elide 🥳 You can do wild things with it, like fast React SSR in Micronaut or Spring. Guest language support is starting with JS, but there are plans to integrate other languages like Python, Ruby, and Rust/Go/etc. via LLVM. Of course,

native-image

is supported out of the box. • 🚀 Trying it out

curl -sSL --tlsv1.2 dl.elide.dev/cli/install.sh | bash -s -

👆 the one liner works on Darwin (amd64/arm64), and Linux (amd64) so far.

If you prefer NPX:

npx @elide-dev/elide@alpha shell

K Building Kotlin apps with it • Elide can be used as a plain library with a regular Micronaut server, and Ktor support is on the way. There are Maven artifacts in a custom repository which is easy to use during the alpha; you can see a sample here. • G Gradle plugin You can easily install the Gradle plugin to build your frontend assets and your Kotlin/JS, and package it into your server binary. It will handle building for SSR and CSR both, so you can easily switch between browser rendering modes. Check it out here. Maven and Bazel support are planned. • 🖥️ Using the shell

elide shell

drops you into a shell just like Node (see attached screenshot), the difference being the

URL

class we're using here is implemented in Kotlin, backed by the road-tested power of Micronaut, KotlinX, Netty, and the Java standard library. It has simply been adapted for use in JavaScript, according to the WhatWG URL Spec. • js Use Kotlin/JS or regular Node stack Elide packages and consumes your JS/TS with built-in support for

esbuild

, so you can use a standard Node toolchain or the Kotlin/JS stack. • 💨 Super fast React SSR Because Elide is basically Kotlin with a super-fast JS runtime attached, it can do JS SSR without leaving the JVM. This can soon be drop-in compatible with many React apps. You can see a live sample here to confirm it is fast and server-rendered. The code for that sample is pasted below to show how simple it is to call back and forth between Kotlin and your React app:

@Page class Index : PageWithProps<YourProps>(YourProps.serializer()) {

    // Serve React SSR.
    @Get("/") suspend fun indexPage(request: HttpRequest<*>) = ssr(request) {    // 1: tell the server we're going to do SSR for this request
      head {
        title { +"Hello, Elide!" }
        stylesheet("/styles/base.css")
        stylesheet("/styles/main.css")
        script("/scripts/ui.js", defer = true)   // <-- 2: serve the CSR bundle so it can hydrate the react SSR response
      }
      body {
        injectSSR(this@Index, request)    // <-- 3: execute the JS VM to produce the SSR response, and splice it into the server response
      }
    }

}

• 🐙 Contributors needed The future of software is much more polyglot than today's paradigm: developers love to fight about frameworks, but at the end of the day, we're all writing code, and eliminating barriers between languages means easier collaboration and more value for all of us. It shouldn't be a Node vs. The World or a Rust vs. The World argument; we should get to pick and pull the best code we want from anywhere and use it to build our apps, especially from a multi-platform language like Kotlin. This runtime and framework are designed for that future. *If you agree, join us and make a dent in the universe*; you'll have a chance to be impactful and shape a brave new idea from the ground up. • 🙏 Thank you We chose Kotlin because of the fantastic community. 2023 will be a massive year for Kotlin, and we think that betting the farm on it is reasonable and smart. We are super excited about what JetBrains and Kotlin have in store for us with K2, context receivers, value classes... just so much to look forward to. Cheers and happy new year, Kotlin devs, K sam Slack Conversation

Is compose for web ready for production use?

🧵*Kotlin/Wasm + Kolin/JS - JS Interop* I’ve seen that we can define interfaces for external JS modules, allowing Kotlin to call node modules. Essentially, this means we can install an npm module, map it’s exported functions to kotlin code, and then use those functions. Am I thinking about this correctly? I do see there’s things that can be done like executing custom code (here). This is great, and if I’m thinking about it correctly, it leads to ways that external JS can be used. A few questions: 1. Can this be used for things other than npm packages? For example, can we house JS inside our project and link to it using these methods (

@JsModule

)? 2. Is this how we could go about building notifications? a. We’d likely have to include service workers in the HTML files and have build processes (hooked into gradle?), but then the main linked module would provide the bridge functions to communicate with that service worker? 3. A lot of modules these days generate TS definitions. Are there ways to generate/automate the creation of the interfaces based on these definitions?

@andylamax would you happen to know any of this ^ by chance?

Hello, somebody has used KTOR with wasm?

I have long wished I could write React with Kotlin using a "KSX" syntax, no builder stuff. I used ChatGPT Deep Research to create a spec for it, I want it to actually exist so bad! If you're curious about this too: • ChatGPT Deep Research spec for KSX • Reddit Poll to gauge interest