Rework component props storage to handle styles + squoosh some bugs

[Deleted user]

Is your feature request related to a problem? Please describe.
Right now, we keep track of a given component's props based on the path. It all comes down to this object at the top of our React plugin:

const componentToPropsMap = {}

This object gets passed to our shortcode and our page extension to keep track of everyone's props. Otherwise, we wouldn't know which props to apply in our HTML transform.

Using the component's path as the key is very limiting. It causes a few major issues:

1. If you attempt to hydrate the same component multiple times with different props, you'll get an incorrect result
2. If we want to keep track of other properties related to a component (ex. CSS module styles), we can't! We'd need to restructure the value of our map to have multiple keys

Describe the solution you'd like

I'd like to rework our map in 2 ways:

• change the key from a component path to a randomized hash. This hash will be applied to component mount points as an attribute, which our HTML transform will pick up for finding associated props
• change the value to an object with multiple keys: { props, styles }. We could add more in the future.

Describe alternatives you've considered
We've considered inserting the props and styles directly into the HTML output whenever a shortcode or page is processed. This has a major problem for props in particular though: we'll need to stringify our props using the JS stringify helper (no, we don't use JSON stringify!). In order to read this value in the transform, we'd likely need to run an eval over the stringified props, which is... very dangerous.