Fragments

[Legioth]

Describe your motivation

With signals, we get several use cases where child components are added and removed in a declarative way based on a signal change. The most obvious is bindChildren but there have also been suggestions for selective rendering (e.g. a responsive layout that chooses which implementation to use based on the available size) or lazy rendering (e.g. to create and attach components for an optional section of a form only if the user chooses to fill out that section).

These cases are quite straightforward to implement in cases when it's ok to fully take over the child list of a parent component. In other cases, you currently need to add a dummy Div component or such which leads to a little bit of runtime overhead in the browser and might also affect CSS styling.

This could be mitigated if the framework would support fragments, i.e. a "virtual" child component container that doesn't have any representation in the DOM but its children are instead inlined into a specific location in the parent component's child list.

Describe the solution you'd like

To avoid adding lots of complication elsewhere, a fragment wouldn't be a Component but instead only a HasComponents that delegates e.g. getElement() to the actual owner component. This puts some constraints on how you acquire a fragment instance.

Usage example

var layout = new VerticalLayout();
layout.add(new Span("Prefix"));
var fragment = layout.addFragment();
layout.add(new Span("Suffix"));

fragment.add(new Span("Child 1"));
fragment.add(new Span("Child 2"));

The result would be that layout.getChildren() contains (in this order) Prefix, Child 1, Child 2, Suffix. fragment.getChildren() would on the other hand only return Child 1 and Child 2. All child components would return the layout instance from getParent(). fragment.remove(child1) would remove the child from layout.

The real use case is with a signal binding that takes over the whole content of the fragment while still allowing the actual parent component to have other children and even adding/removing children after the binding has been created.

var layout = new VerticalLayout();
layout.add(new Span("Prefix"));

var fragment = layout.addFragment();
fragment.bindChildren(listSignal, factory);

layout.add(new Span("Suffix"));