Are there any Compose/Web integrations for existing component libraries?

Should generic

@Composable

`fun`s work with Compose/Web? I get internal compiler error in case of this function:

@Composable
fun <T> MySelect(
    options: List<T>,
    onChange: (T?) -> Unit
) ...

If I remove the generic type parameter (and replace

T

with

Any

in the parameters) then it compiles. Kotlin: 1.5.31 Compose/Web: 1.0.0-alpha4-build366 Error message:

java.lang.IllegalStateException: FULL: FUN name:MySelect$composable visibility:public modality:FINAL <T> (options:kotlin.collections.List<T of ...component.MySelect$composable>, onChange:kotlin.Function1<T of ...component.MySelect$composable?, kotlin.Unit>, $composer:androidx.compose.runtime.Composer?, $changed:<http://kotlin.Int|kotlin.Int>) returnType:kotlin.Unit
 Ir: ...component#MySelect$composable(kotlin.collections.List<0:0>;kotlin.Function1<0:0?,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int){0�<kotlin.Any?>}
 Descriptor: ...component#MySelect$composable(kotlin.collections.List<0:0>;kotlin.Function1<0:0,kotlin.Unit>;androidx.compose.runtime.Composer?;kotlin.Int){0�<kotlin.Any?>}

Is there an example how web components can be integrated? I successfully rendered web components but I'm curious about the best practices eg. for assigning content to slots. Thanks.

Hey there, I’m trying compose web for the first time today. It’s been a few times that I face this error

> Task :jsBrowserDevelopmentRun FAILED
[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

I’ve been failing to really find the reason so far. This happens for example when trying to run : https://github.com/JetBrains/compose-jb/tree/master/templates/web-template

yeah you’re right. the flag works as expected, it just takes about 4 seconds to be picked up and I wasn’t patient enough 😄

Hey guys ! Just want to raise awareness about this issue, which I feel is quite critical : https://github.com/JetBrains/compose-jb/issues/1241

I'm getting the error Function <init> should have been replaced by compiler when trying to open my

index.html

file.

I'm creating a Kotlin/JS library which is Compose aware. By default (using the skeleton from the tutorials), I was defining it as a multiplatform module, but code only lives under the "jsMain" folder. This library generates two maven artifacts (the main one and the "-js" one), and it works. Now, I was hoping to clean this up by converting the module into a JS module and publishing just a single maven artifact instead, but I'm getting a dreaded Compose assertion when I try to compile my project using the new version of the artifact:

java.lang.AssertionError: No such value argument slot in IrCallImpl: 4 (total=4).

So my question: Am I just publishing my library wrong? (Because with multiplatform, maven-publish just worked, but with Kotlin/JS, I'm setting it up myself). Or is this a fundamental requirement of all Compose library artifacts that they need to be multiplatform modules, for technical reasons behind the scenes that require a common artifact AND a JS artifact be created?

How do you guys experiment on components design? Is there a preview window or something? for now I change my Main to execute my component and keep working on it until i'm done, then I revert the main change to the usual layout

Hello, I'm trying to add https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API into our JetPack Compose for Web app. Any idea how to do that will least pain? AFAIK IntersectionObserver is not available via

kotlinx.browser

classes. So should i use

js()

to all the stuff?

What's the best way to show packaged assets in compose for web? my Img is not rendering w/ this setup

Hi, I'm wonder if I could ask for some opinions. I've been working on an Android app for a couple of years that I ported to Compose. We started a web version of the app in Vue.js. I'm not very competent in JS (and even less so in Vue.js), but I'm quite comfortable with Kotlin and Compose. I'm contemplating using Compose for Web instead. Would my lack of JS skills be a big hindrance? I've written a Compose for Desktop app, but Compose for Web has the appearance of being much more daunting.

Is there a way to insert &nbsp; in text? Using a leading or trailing space in the Text() function doesn't work, and if using

Text(" ")

it gets rendered as &nbsp; That's not an unreasonable thing to do - but how can I insert a non-breaking space?

I have been in the backend for most of my life. Reading about developments in the JS community, the struggles of Frameworks like Angular with following the 'lean trend' with treeshaking and minifying etc. to streamline the compliation and delivery of apps. As an enduser, I tend towards being one of those yelling old bearded people who immediatly nag around when a website loads a megabye of JS and does display NOTHING without JS enabled. I do appreciate the different developments for SSR (ServerSideRenderig) in the different frameworks. Recently started playing with Svelte and Snapper that basically gives me a nice, clean static website with mostly just the JS I want, while allowing declative and clean component description and logic. That all being said, I find it interesting to integrate the web frontends into my whole Kotlin ecosystem using compose-web. How does it compare if I am the kind of person that would like to use static-site-generators for everything? Could I declare components that have zero logic and end up with a lean, small website that is basically static when using compose-web?

Hi! How can we use lazy columns/rows in compose-web?

How to declare an

@font-face

?

Hey everyone! I'd love to hear feedback about my project: https://github.com/varabyte/kobweb I'll go into a bit more detail in the 🧵 but quick take: it's an opinionated layer on top of Web Compose to make it fast and easy to set up full stack applications built around a live reloading experience (similar to Next.js if you're familiar with it).

I see Button has a built in hover property, but when I change background color, the hover effect is no longer discernible. I tried to figure out css hover

hover()

and

onMouseOver { println("moused over") }

but neither seem to be working. Anyone have any experience with this?

Hi all, I'm using Compose Web for a small project and it's working well, except for the fact that it's extremely slow at rendering many elements; for example, a table with 300+ rows takes about 3 seconds, while the same with kotlinx.html takes a blink. Is this a limitation of the architecture or something that will be overcome? Or maybe I'm doing something wrong?! Thanks for any pointers

I tried to migrate a simple android application that uses Compose, to a web app that uses Compose Web, using the new SVG api (thanks for this). And wow .. after fixing the compilation errors it all worked on the first launch. Congratulations, this is an amazing job! I hated developing on the web, but thanks this project now there are endless possibilities! demo: https://omarmiatello.github.io/hexagon-web/ The migration was easy, but I would like to give my feedback on some pain points: • the template project is not up to date and it is necessary to change the configuration in several points to update. • the first time you open the project it is not very clear how to start. A comment above the main method that tells you to execute the gradle command might be enough:

jsRun

• the Offset class is missing in the SVG api, it would be useful in the Polyline • transformations cannot be applied (rotate, translate, ...) • positioning text correctly is always complicated, it’s different from Compose for Android, and even there, it’s not easy

I am planning to migrate an android app I am writing with compose to web. Will I be able to do it with compose-web while keeping the grid structure, buttons etc? Is that the target of this project?

I can't figure out why I'm getting this ClassCastException on await():

external interface BwipJs {}
external fun <Module : Any> import(path: String): Promise<Module>

@Composable
fun Barcode() {
  val bwip = remember { mutableStateOf<BwipJs?>(null) }
  LaunchedEffect(Unit) {
    bwip.value = import<BwipJs>("bwip-js").await() // ClassCastException
  }
}

Outside of Compose, in plain Kotlin/JS, the import works fine, and I'm successfully calling functions (rendering barcodes) using the BwipJs handle, e.g.

val canvas = document.createElement("canvas") as HTMLCanvasElement
import<BwipJs>("bwip-js").then { bwipjs ->
    bwipjs.toCanvas(canvas)
}

Hi, I'm trying to convert our

.css

file into

StyleSheet()

. Most of the stuff works, but I don't know how to correctly convert rules like this

.classA.classB {
}

which means element that has both

.classA

and

.classB

assigned. I looked into https://github.com/JetBrains/compose-jb/blob/master/tutorials/Web/Style_Dsl/README.md but it looks like it can only be achieved in

init{}

section using string names of the classes. Any clue? Thanks

Is there any way to prevent compose web from overwriting classes added externally? E.g. Ionic framework automatically adds classes like "hydrated" to certain elements. But Compose web erases them when re-composing

Hi, another question related to CSS. How can I debug what CSS rules

AppStyleSheet

produced? In Chrome developer I can see this, but when I click on

<style>

it shows empty element. When using

.css

files then it is clearly visible from where concrete rule comes.

Hi, is there a way how to add

@import

into

AppStyleSheet

?

Is it possible to make something like this in compose-web? This is from Google's Material Design

how does one handle navigation (specifically routing) in compose-web?