kotlinlang #compose-web

Hello my people! I have a question: I wish to generate material 3 colors schemes on the fly in my compose-web project 🙂 A bit like: https://material-foundation.github.io/material-theme-builder/#/custom where you would select 3 colors and then a palette can be created. Do you know of any ways how to achieve this? I am getting a bit lost here sadly. My current plan would be to somehow create the palettes and then assign them to a scheme like the way in jetpack compose: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]otlin/androidx/compose/material3/DynamicTonalPalette.kt;l=116 But I don't know how to generate the schemes, does somebody have an idea? 🙂

5 replies · 2 participants

d.medina

04/26/2022, 7:54 PM

are Multiplatform Widgets going to be a thing? I see material components are still in the work for a later release. i am loving compose web but my mix of using the boot strap style sheet and my own CSS is not sparking joy.

1 reply · 2 participants

Big Chungus

04/27/2022, 12:25 PM

KMDC is a wrapper of material-components-web npm packages for #compose-web

👍🏼 1

👍 3

2 replies · 2 participants

Spheniscine

04/28/2022, 7:49 AM

Is this (https://github.com/hfhbd/routing-compose) currently the only way to get HashRouter/BrowserRouter-like functionality with Compose Web? I can't figure out how to do a relative link with this

32 replies · 5 participants

Martin Vyšný

04/29/2022, 12:31 PM

Hello, I'm looking for Nikolai Igotti please. I'm interested in integrating Kotlin Compose with the Vaadin framework, but unfortunately I lack knowledge on how the Kotlin Compose compiler plugin works and how it integrates with the concrete compose library implementation (such as compose-web). Anton Arhipov told me that Nikolai could offer me some docs/pointers/initial guidelines. Thank you 🙂

9 replies · 4 participants

steamstreet

04/30/2022, 5:48 PM

I didn’t see if there’s a way to output raw HTML during the render? I have some HTML coming from a server that is safe that I need to render into an element, but I don’t see how that’s done.

5 replies · 2 participants

Arjan van Wieringen

05/02/2022, 6:28 AM

Hello. I was wondering. I have an existing application that uses an MVU architecture and I wanted to look if I can move it to compose-web as a test. So we have an immutable model, a view and update routine. I can easily replace the View with a composeable architecture. The Model will become MutableState<Model> here and the updates will happen via the event handlers which trigger some model update. My question is, will this be performant? As long as I break down my view into composables with arguments they should only recompose when their arguments have changed right? So if I pass down the model elements down to the composables, everything should just be working correctly and 'pretty optimal'?

➕ 1

5 replies · 2 participants

Sebastien Leclerc Lavallee

05/02/2022, 2:35 PM

Hello! Is it possible to use web components? Let’s say I want to use leaflet as a web component, I need it to be something like:

<leaflet-map fit-to-markers>
  <leaflet-marker longitude="77.2" latitude="28.4">
        Marker I
  </leaflet-marker>
  <leaflet-circle longitude="77.2" latitude="28.4" radius="300">
    Round
  </leaflet-circle>
</leaflet-map>

How could I generated those custom tags? Thanks

2 replies · 2 participants

Arjan van Wieringen

05/03/2022, 1:46 PM

Hello, is their a reason the experimental SVG api only has composables in the

ElementScope<SVGElement>

context? The normal HTML elements don't do that. It makes it impossible (due to the lack of JS support for now for multiple context receivers) to write context-aware composables for SVG elements.

2 replies · 2 participants

William Reed

05/04/2022, 2:29 PM

does anyone know of a good resource demonstrating compose for web (example sites to browse)?

8 replies · 7 participants

d.medina

05/04/2022, 7:16 PM

I want to animate composable showing up after a delay to animate a page being built and later animate some of the things on the page over time. are there ways to do this?

4 replies · 2 participants

d.medina

05/04/2022, 7:16 PM

i tryed using a delay but i dont think delay works is kotlin js?

3 replies · 2 participants

Arjan van Wieringen

05/06/2022, 7:29 AM

I am seeing a lot happening in compose for web development I think, but I am not sure if I am correct. • The old falling-balls-example is gone, and I think that is because they've decided to move away from canvas rendering? • I see in the experimental folders something with webassembly? So Skia is running in wasm to a canvas maybe?

9 replies · 5 participants

Paul Woitaschek

05/06/2022, 4:44 PM

Is there a way to use the regular compose API in a web app?

14 replies · 6 participants

Arjan van Wieringen

05/07/2022, 7:38 AM

So, I've got a question again about the compose-web. I am just browsing the internals to learn from. At this moment I have reached the

ComposeDomNode

Composable (https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt) which look to be at the center of all of it. I have a few questions related to the compose-web part: 1. The

DomNodeWrapper

handles the insertion and deletion of actual DOM nodes, triggered by the

DomApplier

. Correct? 2. The

ComposeDomNode

really ties into the internals of the composer. Is this because DOM recomposition requires only updating DOM elements and/or inserting/deleting them, instead of the clear-screen-redraw-routine of canvas/skia based rendering? 3. In the Applier I see (just like in Jake Whartons Mosaic demo) that they always assume the tree is built bottom-up. How is this known / enforced?

5 replies · 3 participants

Marius Ailinca

05/07/2022, 7:13 PM

Hi!Can I run compose for web with https? I have an issues with clipboard not being available on http. Thanks!

:yes: 3

2 replies · 2 participants

Dazai

05/08/2022, 3:59 AM

hey so i'm trying out the minesweeper / falling balls demo. how can I make the canvas fill the max size of the screen on resize? and how do i get the screen size inside of compose? thanks in advance

1 reply · 2 participants

Antonius Naumann

05/08/2022, 2:52 PM

(Not sure if this is the right channel) I got a minor problem with IntelliJ Code Highlighting for a project which targets both Compose Android, Desktop and Web. (Problem description and Gradle snippet below)

4 replies · 2 participants

Big Chungus

05/09/2022, 11:48 AM

Any plans to un-deprecate

DOMSideEffect

or bring

DOMScope

to regular

SideEffect

? My use-case involves wrapping external JS component library in #kmdc project and I need an effect which runs on

every

composition and provides access to native DOM element to sync-up the compose state with the external JS component. •

DisposableEffect

almost works as it has

scopeElement

, but it skips the initial composition •

SideEffect

runs on all compositions, but doesn't provide access to

scopeElement

•

DOMSideEffect

covers everything I need, but is deprecated EDIT: looks like initial composition is "skipped" on my

DisposableEffect

handler due to missing js objects that I initialise in

attrs::ref

lambda. Shouldn't

attrs::ref

be invoked before

DisposableEffect

4 replies · 2 participants

spierce7

05/10/2022, 12:50 PM

I thought I’d try to run one of my compose apps in the new alpha web. Ran into a hangup - How would I draw an SVG in compose web?

22 replies · 4 participants

spierce7

05/10/2022, 2:09 PM

Let me clarify - how would I use an SVG inside the Compose Web Canvas alpha? Is there a way yet?

2 replies · 2 participants

Dragos Rachieru

05/16/2022, 8:24 AM

Hello, I am trying to make an image loading library that loads images from urls and other stuff, is there a way to load an image on

JS

from local files?

3 replies · 2 participants

Partho Paul

05/18/2022, 9:45 AM

Hello, I’m trying to run a project using compose web but after running the project I’m getting

Invalid Host header

error in browser. Can someone please help?

➕ 1

5 replies · 2 participants

Ace Tasos

05/18/2022, 5:05 PM

Hi everyone! Is it possible to add compose-web in an application server environment (EE/Spring) instead of JSP/JSF's view? If so, how would you recommend tackling this task? Thank you.

8 replies · 2 participants

CLOVIS

05/22/2022, 3:27 PM

Is there a known bug with Compose for web and inheritance? I have something like

interface Parent {
  @Composable
  fun render(...)
}

class Child {
  @Composable
  override fun render(...)
}

Calling the

render

function on a child leads to:

Uncaught TypeError: $localVariable.render$composable_49qbjn_k$ is not a function
    at eval (Navigation.kt?fd6e:149:17)

After inspecting the object, its prototype has a

'render_4kj0y7_k$'

function. Did something go wrong when Compose/Kotlin mangled the object? Adding

@JvmName("render")

to the parent class changes the function name in the error message, but it doesn't change which functions the object implements (its prototype still has `'render_4kj0y7_k$'`and not

'render'

)

7 replies · 4 participants

Big Chungus

05/27/2022, 9:32 PM

message has been deleted

👏🏼 1

👏🏻 1

:thank-you: 4

😮 5

👏 10

:kotlin-intensifies-purple: 15

17 replies · 4 participants

Partho Paul

06/10/2022, 7:03 AM

Hello, I’m looking for an alternative of UUID.randomUUID() to use in my compose-web project. Couldn’t find anything on google. Can someone please help? TIA

2 replies · 2 participants

Joost Klitsie

06/10/2022, 12:38 PM

Is there a way to use kotlin 1.7.0 with compose for web? I see on the android compose compiler you can sneak in the dev version from here: https://androidx.dev/storage/compose-compiler/repository Would it work the same for multiplatform?

14 replies · 3 participants

Emir Sürmen

06/12/2022, 4:47 PM

Is there any way to download files locally in Compose Web?

➕ 1

12 replies · 2 participants

Derek Ellis

06/12/2022, 8:33 PM

I'm trying to upgrade to Kotlin 1.6.21 but I keep getting this error no matter what version of compose-web I use (but mainly trying to get 1.2.0-alpha01-dev709 working)

java.lang.IncompatibleClassChangeError: Found class org.jetbrains.kotlin.ir.types.IrType, but interface was expected
	at androidx.compose.compiler.plugins.kotlin.lower.decoys.WrapNotInlineableComposableLambdasForJs$wrapComposableLambdasInCall$mappedArguments$2.invoke(WrapNotInlineableComposableLambdasForJs.kt:142)
	at androidx.compose.compiler.plugins.kotlin.lower.decoys.WrapNotInlineableComposableLambdasForJs$wrapComposableLambdasInCall$mappedArguments$2.invoke(WrapNotInlineableComposableLambdasForJs.kt:135)

etc...

9 replies · 2 participants

Title

Derek Ellis

06/12/2022, 8:33 PM

I'm trying to upgrade to Kotlin 1.6.21 but I keep getting this error no matter what version of compose-web I use (but mainly trying to get 1.2.0-alpha01-dev709 working)

java.lang.IncompatibleClassChangeError: Found class org.jetbrains.kotlin.ir.types.IrType, but interface was expected
	at androidx.compose.compiler.plugins.kotlin.lower.decoys.WrapNotInlineableComposableLambdasForJs$wrapComposableLambdasInCall$mappedArguments$2.invoke(WrapNotInlineableComposableLambdasForJs.kt:142)
	at androidx.compose.compiler.plugins.kotlin.lower.decoys.WrapNotInlineableComposableLambdasForJs$wrapComposableLambdasInCall$mappedArguments$2.invoke(WrapNotInlineableComposableLambdasForJs.kt:135)

etc...

Oleksandr Karpovich [JB]

06/13/2022, 9:41 AM

Do you have a reproducer sample? Is your project with the error available on github?

Could it be that you have kotlin 1.7.0 instead of 1.6.21 in your project? according to the exception: In 1.6.21 IrType used to be an interface https://github.com/JetBrains/kotlin/blob/v1.6.21/compiler/ir/ir.tree/src/org/jetbrains/kotlin/ir/types/IrType.kt In 1.7.0 it became an abstract class https://github.com/JetBrains/kotlin/blob/v1.7.0/compiler/ir/ir.tree/src/org/jetbrains/kotlin/ir/types/IrType.kt it would explain the incompatibility error

Derek Ellis

06/13/2022, 12:28 PM

My project is here: https://github.com/dellisd/reroute/tree/upgrades

In my gradle config I have 1.6.21 specified, but it does seem to be trying to use 1.7.0 for some reason.

If I try to force gradle to resolve 1.6.21 for all Kotlin modules I get a different error

FATAL ERROR: Could not find "...\.gradle\caches\modules-2\files-2.1\app.cash.sqldelight\sqljs-driver\2.0.0-SNAPSHOT\4f3b183e3f1c1b4797f9f186dc1ad2f60f0d87f5\sqljs-driver-2.0.0-SNAPSHOT.klib"

I checked and this file does exist, so I don't know why it gives this error. The sqljs-driver module depends on the Kotlin 1.7.0 stdlib so I wonder if that's why?

Oleksandr Karpovich [JB]

06/13/2022, 3:22 PM

Could you please try with older sqljs-driver? we also have 0.0.0-on_kotlin_1.7.0-rc-dev705 build that should work with kotlin 1.7.0 (it has some known issues when a project has an android target though, but should fine to try with compose-web).

👍 2

Derek Ellis

06/13/2022, 3:58 PM

If I downgrade SQLDelight and compile with 1.6.21 I get the following error instead:

kotlin.NotImplementedError: An operation is not implemented: org.jetbrains.kotlin.ir.types.impl.IrDynamicTypeImpl@2712046a
	at org.jetbrains.kotlin.ir.descriptors.IrBasedDescriptorsKt.toIrBasedKotlinType(IrBasedDescriptors.kt:1137)
	at org.jetbrains.kotlin.ir.descriptors.IrBasedDescriptorsKt.makeKotlinType(IrBasedDescriptors.kt:1151)
	at org.jetbrains.kotlin.ir.descriptors.IrBasedDescriptorsKt.toIrBasedKotlinType(IrBasedDescriptors.kt:1136)
    ...

If I upgrade Kotlin, ksp, and compose for 1.7.0 I get this error:

java.lang.AssertionError: Unexpected type: org.jetbrains.kotlin.ir.types.impl.IrDynamicTypeImpl@3c59468a = dynamic
	at org.jetbrains.kotlin.ir.descriptors.IrBasedDescriptorsKt.toIrBasedKotlinType(IrBasedDescriptors.kt:1142)
	at org.jetbrains.kotlin.ir.descriptors.IrBasedDescriptorsKt.makeKotlinType(IrBasedDescriptors.kt:1157)
	at org.jetbrains.kotlin.ir.descriptors.IrBasedDescriptorsKt.toIrBasedKotlinType(IrBasedDescriptors.kt:1134)
    ...

🤔 2

Oleksandr Karpovich [JB]

06/14/2022, 4:30 PM

Created a ticket to follow - https://github.com/JetBrains/compose-jb/issues/2115

:thank-you: 1

Derek Ellis

06/22/2022, 8:17 PM

After some trial and error, I was able to determine that the error is caused by having an

Array<dynamic>

parameter in an

@Composable

function

@Composable
fun Example(array: Array<dynamic>) {}

View count: 42