virtual component uses part to associate with container

[askbeka]

Since, container for virtual component is mapped to part in cache, same container is reused for other component:

html`${<p>${predicate ? ComponentOne() : ComponentTwo()}</p>}`

I made demo reproducing the issue

I haven't done deep dive into solving it, but from first sight container can be mapped to renderer instead of part

[matthewp]

Ah, yeah this is a bit of a problem isn't it. We might need a 2-dimensional map (the part maps to another map which contains renderer => container mapping). However I'm not quite sure this would work either because the renderer function might be defined within another renderer. This case:

function App() {
  return html`<p>${virtual(() => html`hello world`)}</p>`;
}

So... I'm not sure what to do about this exactly. Will ponder on it some more...

[dredzone]

@matthewp first, thanks for a great library. Any resolution on this bug or thoughts what is the good solution may be?

[matthewp]

I haven't thought of a solution yet. I don't use virtual components a whole lot to be honest, maybe someone who uses them more will have a good idea for this...

[askbeka]

I have gave it a thought and tried out couple of ideas, but there is something about how lit-html directives work that does not allow having virtual components, and I propose to ditch it for now.

But there is an alternative of course, that is already in place
(seems haunted has a bug. it does not update on setState.)

Only difference of course is that those are not really "Components" since they do not have scheduling and etc.
But code reuse is the same, and there will be no issues we have with directives.

They are more like composed hook but one that also returns a template

[askbeka]

I prose to ditch virtual part and document better how you can use above described method.
With that method you have to have "Real" component defined somewhere up in the tree.
Which might be also a good practice, since you want to isolate your app from outside. But not maybe use Real components everywhere, you can just use a function to separate out your code

[matthewp]

I think ditching virtual components would be a drastic measure, people really like that part of Haunted. If this is the only problem I don't think that's enough to say we can't make it work. I'll try to free up some time to take a closer look into this issue myself.

[matthewp]

I fixed #69 so I have my brain wrapped around virtual components a little more than I had. So I might take a look at this issue soonish and see if I can come up with a solution.