Deprecating virtual components

[matthewp]

There are some known bugs with virtual components such as #69 that I haven't gotten a chance to fix. I wanted to bring up the possibility of deprecating and removing support, but first want to discuss with people who use them how they feel about it. Note that I am not going to remove them without community support, I don't want to break people's apps! 😀

If on the other hand there is strong desire to keep them, maybe I'll prioritize working on those bugs, if they can even be fixed that is.

[zksward]

To give a little context on my knowledge/use of the library:

• I've been working on a project using lit-html and haunted's virtuals as a simple UI layer. I've used the project to experiment with some new concepts (components, functional UI, hooks, etc). Lit-html and haunted have been invaluable in playing with these concepts.

Now to move on to a couple of thoughts I have about virtuals:

• I prefer the syntax of virtuals over components. I like the clear, direct nature of calling a plain old JS function to render a component as opposed to the somewhat indirect way of using the element name. Although, I haven't used the component tag syntax much, so maybe it's a matter of exposure.
• Because I'm not experienced with Web Components, virtual components appealed to me. The components API felt a little more daunting because of the additional knowledge surrounding Web Components.

I really like the idea of virtual components.
Instead of defined new component with isolated styles, we can reused shared styles and virtual components.
For example:
A custom button component, each of them will include isolated styles, like 10 of them will have 10 separate styles (tag).
A custom button virtual, each of them will include shared styles, 10 of them will use the same style.

If possible, we can prevent the use of useEffect in virtual.

[askbeka]

Lets list pros and cons for two approaches when you need to use haunted inside application, and you do not need necessarily webcomponents features like shadow dom or creaintg a custom element.

virtual
Pros:

• no need to define a customElement and come up with unique name
• no need to configure static observed attributes, since there no attributes;
• no need to think about if shadowDom needs to be used since always renders to light DOM.

Cons:

• lifecycle very hard to implement without virtual-dom like implementation
• Context like functionality does not work, mainly because of life cycle

real
Pros:

• context, lifecycle

Cons:

• Extra element created, with extra configuration
• affects styling, since a it is DOM element wrapping content
• extra configuration to make render into light DOM

So how can we solve above Cons of virtual and bring Pros of real into it.

Main issue I see with webcomponents is a creation of extra DOM element that has no visual representation. And it stays in a way when styling layouts etc. But since display: contents is available styling is not an issue;

Virtual function can be designed in a way to reuse predefined base Element. like virtual-haunted-component. It is possible since no static properties are needed for virtual components. And applying above points I have mentioned (display: contents; render into light dom);

const VirtualComponent = virtual(() => {
   const [count, setCount] = useState(0);
   
   return html`
     <span>${count}</span>
     <button @click=${() => setCount(count + 1)}>increment</button>
   `;
})

render(html`VirtualComponent()`)

renders into

<virtual-haunted-element style="display: contents">
   <span>0</span>
   <button>increment</button>
</virtual-haunted-element>

[vladnicula]

I'm trying to integrate haunted in a data heavy tree hierarchy content where I could be even 100 levels deep in the hierarchy when rendering small nodes. One of the main selling points of haunted was the ability to use context in non web component entities.

I need to render data driven styles that look and match exactly an html structure, and need to update them in real time. If I add a new web component tag in between the parent node and the child node I end up with css inconsistencies.

So in other words, please don't remove virtual. It's super useful to me :)

[justinformentin]

I wanted to chime in with support for keeping Virtual Components. The ability to create elements that won't add a tag in the dom is so useful, and is integral to a part of a project I've been working on. React has , and I was so happy to read Haunted has virtual components. It really makes certain things possible that would otherwise be impossible or require crazy workaround hacks.