fable-compiler / Fable.Lit

Write Fable Elmish apps with Lit
https://fable.io/Fable.Lit/
MIT License
93 stars 13 forks source link

[Feliz.Lit] Set Properties #5

Closed AngelMunoz closed 3 years ago

AngelMunoz commented 3 years ago

(this may be better in Feliz.Engine, feel free to move it there if necessary)

Currently with the Feliz flavor you can only set attributes via Attr.custom("my-attribute", "it's value") but unless I'm lost (very likely) there are not ways to set properties of an element with the template strings flavor you can do

let myValue = "some value"
let myObj = {| value = 10 |}
<some-element my-attribute={myValue} .myProperty={myObj}></some-element>

it would be ideal to have this on the Feliz flavor as well

alfonsogarciacaro commented 3 years ago

It's probably better to fix it here, as Feliz.Engine just deals with "raw" html. I've added Lit.Feliz.prop so you can do:

Feliz.prop "myProperty" {| value = 10 |}

which in JS/lit-html will become the equivalent to:

html`<some-element .myProperty=${ ({ value: 10 }) }></some-element>`