Skip to content

Task: Create Example for Deeply Nested Components #7047

@tobiu

Description

@tobiu

Summary

Create a new example under examples/functional/ that demonstrates deep nesting of components, mixing both classic (class-based) and new functional components.

Rationale

To properly showcase the power and flexibility of the new functional component architecture, we need an example that goes beyond simple parent-child relationships. This example should illustrate:

  1. A functional component hosting multiple child components.
  2. A functional component hosting a classic component, which in turn hosts another functional component.
  3. A classic component hosting a functional component.
  4. State being passed down through multiple levels of nesting.
  5. The reactive updates (component.set()) working correctly through the entire hierarchy.

This will serve as a clear, practical guide for developers on how to structure complex UIs and manage component composition effectively.

Acceptance Criteria

  • A new folder is created under examples/functional/.
  • The example contains at least three levels of component nesting.
  • The nesting hierarchy includes a mix of functional and classic components.
  • The top-level component's state drives changes in the deeply nested children.
  • The example is clean, well-documented, and easy to understand.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions