Nested components in JDD

Open-source projects JDD
1

Since 0.7.0, JDD supports the NestedComponent argument that lets you ask the user for parameters of any other component and then render it as part of HTML of your component.

This is useful for layout-based components - you can now for example use the “split-view” component, to display two components side-by-side:

You can also use nested components within nested components:

Thanks to JDD components being written using container queries, such nesting maintains responsiveness without additional effort.

The gist of how to achieve that in your component is:

const component_arguments = {
	component1: new ComponentArguments.NestedComponent(),
	component2: new ComponentArguments.NestedComponent(),
} as const;

and

<div class="split-view__half">
  {ComponentArguments.NestedComponent.render(
    jdd_context,
    component1 as Record<string, unknown>,
  )}
</div>;

The new component argument also includes a helper function for dealing with CSS Clumps. See split-view.jdd.tsx for a full up-to-date example of how to deal with nested components.