Web: Add Canvas element

[hfhbd]

No description provided.

[eymar]

ContentBuilder is a @Composable lambda. That means it would be possible to write some code like this:

Canvas {
    Div {}
}

I'm not sure that @composable content is applicable for Canvas. I was thinking that canvas' content can be managed only in DisposableEffect or some side effect (at least for now). Or do I miss something?

[hfhbd]

According to MDN you can provide innerHTML content inside a canvas: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
But mostly for static content as fallback when JS is disabled or the browser does not support canvas. But Compose needs JS and all modern browser (even Internet Explorer :) support canvas. So indeed, this could be removed. Maybe it could take the DisposableEffect as parameter instead:

// current:
Canvas({
  ref {
      Chart(it, jso { })
      onDispose { }
  }
})

// new
Canvas {
  Chart(it, jso { })
  onDispose { }
}

[hfhbd]

BTW ContentBuilder is required, otherwise you can't use a composable side effect with a reference to the canvas htmlelement. DisposableEffect is not composable, but DOMSideEffect is.

var chartData by remember { mutableStateOf<ChartData>() }
Canvas({}) {
    DomSideEffect(chartData) {
        val chart = Chart(it, config(chartData))
        onDispose {
            chart.destroy()
        }
    }
}

[eymar]

DisposableEffect is composable - https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#DisposableEffect(kotlin.Function1)

I think it's worth to allow everyone use as many effects as they want inside Canvas {}, so I agree that content is needed for this.
I still don't want allow calling Div {} or any html element within canvas content. But I don't see a way to prohibit it now.

Thanks! lgtm

[hfhbd]

Did I miss something?

* [ref] can be used to retrieve a reference to a html element.
* The lambda that `ref` takes in is not Composable. It will be called only once when an element added into a composition.
* Likewise, the lambda passed in `onDispose` will be called only once when an element leaves the composition.

[eymar]

yes, that's right fun ref(...) is a function in AttrsScope and it's not composable https://github.com/JetBrains/compose-jb/blob/7ea30be92404ef4dbdd679cca0b88970b6f3b12e/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt#L82

In your comment above you mentioned that "DisposableEffect is not composable", so I posted the link to docs where it shows that fun DisposableEffect(...) has composable annotation.

Anyway, you're right, one can't use any composable function within ref {} lambda.

[eymar]

@shabunc What do you think? Does it conflict with your work in progress related to canvas?

[Schahen]

The only thing I ask to rollback is imports - apart from that I agree with Philip - we should allow this element to have content