[Feliz.Lit] Uncaught TypeError: Cannot read property '0' of undefined about fable.lit HOT 5 CLOSED

Actually, what I found the biggest appealing with lit-html is the possibility of embedding HTML in F#. If we're just offering an API similar (but with differences) to Feliz and different ways/concepts to manage state, just being able to define web components (something that is already possible in React) won't be a strong reason for Fable devs to try this. So I'm considering now to deprecate Lit.Feliz (except for the styles). If we want to have a light way to declare web components with a Feliz-like API we should probably focus on adding an adapter to Sutil (as you're already doing) or Feliz.Snabbdom.

from fable.lit.

Yes, this is my main concern with the Lit.Feliz API. Basically you should convert to Lit Feliz nodes before returning them in a function, and you cannot Feliz nodes conditionally. But it's difficult to restrict this at compile, because Feliz nodes happily accept other Feliz nodes as children. The only solution I can think of right now is to make the Feliz Engines only available through a function argument, but this makes things more verbose and cannot restrict conditional nodes either.

Feliz.toLit(fun f -> f.Html.div [ f.Attr.className "foo" ])

Not sure what's the problem in specific case. But HookComponent is a lit directive , so passing it a function that doesn't return a lit template is not going to work.

from fable.lit.

Looks like for some reason inside inner in Util.buildTemplate the text node is undefined

            | Text v ->
                
                JS.console.log(parts, values, v)
                ""::parts, (box v::values)

sorry it was in the next iteration

it throws in that v

from fable.lit.

Hmm sorry I think I understood this last time you mentioned it, looks like I didn't this is kind of unfortunate...
Hmm this might be a bit of a stretch but if we enable lit components we should be able to use ReactiveControllers and imitate hooks a little although not a 100% replacement

but at least we can provide the simple ones

type StateController<'T>(host: ReactiveControllerHost, init: 'T) = 
    let mutable state = init
    member _.State with get() = state

    member setState(update: 'T -> 'T): unit = 
        state <- update(state)
        host.requestUpdate()
    
    // nothing to do for this particular usecase
    interface ReactiveController with
        member _.hostConnected() = ()

        member _.hostDisconnected() = ()

        member _.hostUpdate() = ()

        member _.hostUpdated() = ()

let childCounter(host: obj) =
    // jsThis should be good enough as well but sometimes for some reason
    // the functions get compiled as a lambda, no idea why
    let ctrl = StateController<int>(host, 0)
    Html.div [
        Html.p $"Child Count: {ctrl.State}"
        Html.button [ 
            Ev.onClick(fun _ -> ctrl.setState(fun state -> state + 1));
            Html.text "Increment" ]
        Html.button [ 
            Ev.onClick(fun _ -> ctrl.setState(fun state -> state - 1));
            Html.text "Decrement" ]
        Html.button [ 
            Ev.onClick(fun _ -> ctrl.setState(fun _ -> 0); Html.text "Reset" ]
    ]

let app() = 
    let host = jsThis
    let ctrl = StateController<int>(host, 0)

    Html.div [
        Html.p $"Parent Count: {ctrl.State}"
        Html.button [ 
            Ev.onClick(fun _ -> ctrl.setState(fun state -> state + 1));
            Html.text "Increment" ]
        Html.button [ 
            Ev.onClick(fun _ -> ctrl.setState(fun state -> state - 1));
            Html.text "Decrement" ]
        Html.button [ 
            Ev.onClick(fun _ -> ctrl.setState(fun _ -> 0); Html.text "Reset" ]
        childCounter host
    ]

// TODO:
registerLitComponent("tag-name", app, options)

another approach would be to create an internal ReactiveElement and handle state updates within it which is what useController does in haunted

thoughts?

from fable.lit.

So I'm considering now to deprecate Lit.Feliz (except for the styles)

I agree completely I was a little anxious because I guess in my excitement I teased a little about typesafety with Lit yet I couldn't help you to make it work 😔

If we want to have a light way to declare web components with a Feliz-like API we should probably focus on adding an adapter to Sutil (as you're already doing) or Feliz.Snabbdom.

I agree here as well, I think I'll just add the Haunted adapter for Sutil as well and leave Haunted as the entry point for people who want web components while I figure out a more focused approach that works best for Fable users, I'll take care of that.

with this I'll close this issue and the PR I had for the LitExtensions, I think that as you mention the safer approach right now is to focus on the embedded HTML, anything else can come later.

from fable.lit.