https://kotlinlang.org logo
#compose-web
Title
# compose-web
d

David Herman

12/22/2022, 12:50 AM
Is there a way to "break" the flow of composables for a single composable? Basically change a composable's element parent behind the scenes? (More details in 🧵 )
For example, I want my html to look like this:
Copy code
<body>
  <div id="root">...</div>
  <div id="modals">...</div>
</body>
and my code might look like this:
Copy code
@Composable
fun SomeWidget() {
  var showModal by remember { mutableStateOf(false) }
  ...
  Button(onClick = { showModal = true }
  if (showModal) {
     Modal { ... }
  }
}
where I want the
Modal
widget (which I'm going to write) to basically not really be under the
SomeWidget
element in the tree, but rather moved into the
modals
div on creation.
I believe Jetpack Compose popups are like this? And React has something called portals allowing for this. It's good for things like popups and dialogs, as I understand it.
I experimented a bit so far and can successfully get the widget to move into a different parent when entering composition, but then later when it exists the composition, it crashes on a "assertNotNull" exception (before I get a chance to handle the
onDispose
event.
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 12:56 AM
You can look at the impl of the Jetpack compose popup to see how this works. Eg in android I believe it uses an effect to launch and dispose a platform modal, which it then uses the platform integration setContent to pass its content block to. You could do something similar here
d

David Herman

12/22/2022, 12:56 AM
Ah that's a good idea
I'm not familiar with
setContent
, I'll take a look
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 12:57 AM
Idk anything about compose web, but whatever mechanism you use to host a composition inside a dom
d

David Herman

12/22/2022, 1:00 AM
For completion of this thread, the code I'm currently using looks something like this:
Copy code
ref { element ->
  val modals = document.getElementById("modals")!!
  modals.append(element)
  onDispose {
    modals.removeChild(element)
  }
}
and the callstack I'm getting when the modal goes away is:
Copy code
"NullPointerException
    at THROW_NPE (<http://localhost:8080/app.js:25496:11>)
    at ensureNotNull (<http://localhost:8080/app.js:25489:7>)
    at DomNodeWrapper.remove_fwj0yb_k$ (<http://localhost:8080/app.js:72921:25>)
    at DomApplier.remove_fwj0yb_k$ (<http://localhost:8080/app.js:72974:34>)
    at <http://localhost:8080/app.js:45642:15>
    at applyChangesInLocked (<http://localhost:8080/app.js:48261:17>)
    at CompositionImpl.applyChanges_yo70f0_k$ (<http://localhost:8080/app.js:49202:5>)
    at <http://localhost:8080/app.js:51058:26>
    at <http://localhost:8080/app.js:72227:20>"
which feels like my moving the element is causing assumptions in Compose for Web to break
(This NPE happens even if I don't call
removeChild
in the
onDispose
call.)
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:03 AM
I don’t know enough about how compose web is wired up to know how to troubleshoot this further unfortunately
d

David Herman

12/22/2022, 1:04 AM
No worries! I'm just dropping additional details here in case I don't make any more progress today and someone on the Web team sees this overnight.
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:06 AM
If you can define your
modals
element in compose somehow, ie a modal host, you could hoist a snapshot state object that holds the list of current modals, add to it in the body of
Modal
, and then in your modal host thing read that and compose based on the state.
d

David Herman

12/22/2022, 1:07 AM
Yeah, I'm not 100% sure I know all those words but it sounds like the shape of what I'm trying to do
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:07 AM
The thing holding the modal state needs to be a snapshot state object (eg a mutableStateListOf) so you can write to it in the composition body directly. And of course to invalidate on disposal.
d

David Herman

12/22/2022, 1:07 AM
This would require having parallel composition trees?
I'm trying to figure out if that's even what
setContent
does
(Apologies as I'm at the point where I don't know enough to be able to ask good questions 🙂)
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:10 AM
Let me get my laptop and write some pseudo code.
d

David Herman

12/22/2022, 1:11 AM
Like, here's the root of a CfW project:
Copy code
renderComposable(rootElementId = "root") {
   ...
}
I believe this is the equivalent of Jetpack Compose's
setContent
entry point, now that I'm looking at and recalling it
I'm assuming calling that function blocks and wasn't sure if I could have multiple of those running side by side. That's what I meant above my mentioning parallel composition trees.
I appreciate your help! Please don't spend too much time on this. Even a very rough gist would help and I could run with it from there.
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:39 AM
Copy code
private val LocalModalState = staticCompositionLocalOf<ModalHostState?> { null }

private class ModalHostState {
  private val modals = mutableStateListOf<@Composable () -> Unit>()

  fun createModal(): Modal = Modal().also{
    modals += it
  }

  inline fun forEachModal(block: (Modal) -> Unit) {
    modals.forEach(block)
  }

  inner class Modal {
    var content by mutableStateOf<(@Composable () -> Unit)?>(null)
    fun dismiss() { modals -= this }
  }
}

@Composable internal fun ModalHost(content: @Composable () -> Unit) {
  val state = remember { ModalHostState() }
  CompositionLocalProvider(LocalModalState provides state, content = content)
  state.forEachModal { modal ->
    modal.content?.let { content ->
      YourModalDecorationBox {
        content()
      }
    }
  }
}

@Composable fun Modal(content: @Composable () -> Unit) {
  val state = checkNotNull(LocalModalState.current) {
    “Can’t show modal outside of a ModalHost”
  }
  val modal = remember(state) { state.createModal() }
  modal.content = content
  DisposableEffect(modal) {
    onDispose {
      modal.dismiss()
    }
  }
}
ugh slack * shakes fist *
d

David Herman

12/22/2022, 1:39 AM
😄
Ah yeah I think this is exactly what I need
And at the very least I appreciate seeing new edges to APIs I've used
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:42 AM
sorry still editing
d

David Herman

12/22/2022, 1:42 AM
👍
I'll wait
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:47 AM
ok done lol
d

David Herman

12/22/2022, 1:48 AM
So the one thing I don't understand is when I'm supposed to call ModalHost
Right now I have essentially a root
setContent
Also,
Copy code
fun createModal(): Modal = Modal().also{
    modals += it
  }
Modal is a function not a type. Is that supposed to be ModalHostState or something?
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:50 AM
no it’s that inner class
d

David Herman

12/22/2022, 1:50 AM
n/m just saw the inner class
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:50 AM
so it’s both, yea – could have used more distinct names, sorry
i didn’t try to compile this if you couldn’t tell 😜
d

David Herman

12/22/2022, 1:51 AM
No worries
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:51 AM
and you’d call
ModalHost
near the root of your composition, around whatever “body”/non-modal content you have
d

David Herman

12/22/2022, 1:51 AM
So basically
Copy code
setContent {
   ModalHost {
     OtherStuff()
   }
}
?
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:52 AM
exactly
d

David Herman

12/22/2022, 1:52 AM
OK perfect
There's no reason to have multiple modal hosts is there?
There will always basically just be one?
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:52 AM
you could have nested modals – put a
ModalHost
inside a
Modal
🔄
but otherwise no
d

David Herman

12/22/2022, 1:53 AM
Ah gotcha
OK thanks again, so much
I'll give a shot
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 1:55 AM
ok after all this though, i think it’s even better to hoist the modal state even further so that your view model/presenter thing, whatever is the source of truth of the state backing your composition, explicitly exposes a list of modal models to show. Then your business/nav logic can more directly control what modals are showing, it’s more testable, and harder to get bugs where something is showing a modal that shouldn’t be in a large codebase that you have to track down.
d

David Herman

12/22/2022, 1:57 AM
I'm not sure I follow "hoist the model state even further"
I think -- I think it's working...
Not 100% sure, actually. (I mean, it's working but may just be chance)
Will play around a bit more so I'm more confident and will avoid spamming here too much. But still, thanks so much for your help!
Zach you are a gentleman and a scholar (my local experiments are working and this even lets me remove some zIndex values which I believe are considered a code smell in the world of html / css)
z

Zach Klippenstein (he/him) [MOD]

12/22/2022, 3:30 AM
The one thing my code didn’t have was an explicit layout to arrange the modals over the content, just assumed whatever you put the host in would lay things out over each other. Idk how layouts work in compose web. In Jetpack Compose I would probably just use a
Box
.
d

David Herman

12/22/2022, 4:20 AM
Yes for my case it will just be things layered one on top of the other. The most important part was getting the children elements that become modals out of the deep tree hierarchy.
I actually implemented
Box
in my library using a web grid but here it can also easily be done with a simple
div
with something called an absolute position.
Just to wrap this up -- if anyone is curious, here's my current implementation: https://github.com/varabyte/kobweb/blob/d3dacc9e0aeefadeb6cb139f3fe00e540cb1e454/f[…]ts/src/jsMain/kotlin/com/varabyte/kobweb/silk/defer/Deferred.kt which is very similar to what Zach suggested, but I went ahead and made it all private, exposing only a
deferRender
method, where it gets used like so (in one example): https://github.com/varabyte/kobweb/blob/d3dacc9e0aeefadeb6cb139f3fe00e540cb1e454/f[…]ain/kotlin/com/varabyte/kobweb/silk/components/overlay/Modal.kt
Copy code
fun Modal(modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit) {
    deferRender {
        Box(ModalBackdropStyle.toModifier(), contentAlignment = Alignment.TopCenter) {
            Box(ModalStyle.toModifier().then(modifier)) {
                content()
            }
        }
    }
}
Seems to be working so far, and I'm really happy with the approach. Knock on wood!
9 Views