💡 RFC: Web Component structure for studio

[isaiahdahl]

Explore different ways to structure the web components that build up the studio.

How do we make them customizable?
How customizable do we want this to be?
Where is state managed for the components that talk to each other.
What if someone isn't interested in X feature? Do they need to include that component for the thing to work?

1. Parent component to manage all the state

What if somehow the parent component is where all the inputs came to and managed all the state, and it has slot components where you could pick and choose which parts you wanted to include.

<pc-studio input="..." setlist="...">
     <pc-studio-controls> // you could omit this component completely and then have no controls.
          <custom-dropdown></custom-dropdown>
          <pc-studio-key-button></pc-studio-key-button>
          <pc-studio-capo-button></pc-studio-capo-button> // could opt out of the capo by not including this component
     </pc-studio-controls>
     <pc-studio-view>
          <pc-editor></pc-editor>
          <pc-renderer></pc-renderer>
     </pc-studio-view>
</pc-studio>

If we make it so that all the components are managed from the "store". Then they can all be completely decoupled from each other in where they are on the page. As long as there is a consistent spot to specify the props and get the outputs you'd want.

2. The studio just is what it is

We could just decide that the studio is one component you interact with, and it is what it is. You use props to turn things off. But all the "code" is there. Whatever features we add, are just available to you and ship in the component.

<pc-studio input="..." setlist="..."></pc-studio>

If we added a multitrack player feature, it'd be there whether you wanted it or not.