Creating a HA dashboard external component (need architectural advice)

ESPHome
1

I’m working on a config-driven dashboard for HA. The initial prototype looks like this:
image
(see original topic here).

Initially, I thought the config can be like this:

ha_deck:
  width: 480
  height: 320
  screens:
    - name: Main
      components:
        - type: button
          x: 0
          y: 0
          label: Light
          icon: "code"
          enabled: |-
            return id(living_room_led).state == "on";
          on_press: "..."

The problem here, I do not see a way to accept a list of components as a parameter. The documentation for ESPHome is quite shallow, so I mostly use other components as an example. The only way I came up with is to create a custom platform, and it works:

ha_deck:
  - platform: hd_button
    x: 0
    y: 0
    screen: "main"
    enabled: |-
      return id(living_room_led).state == "on";

But this is not ideal, as I’ll end up with many components (e.g., buttons) without a parent who can manage them. Overall, I like the idea of having 3 layer abstraction:

  • ha_deck - the main component, initialize the display and all basic stuff, has a few screens.
  • screen - organize widgets, can show and destroy them.
  • widget - represents a UI component (widget), has bindable properties (e.g., enabled, visible) and actions

So the question is: is it possible to implement such a complex structure in ESPHome? Any example of an existing component that uses something similar?