Children in components

[natemoo-re]

Changes

This PR adds support for children inside of framework components using the framework's built-in paradigms. For React and Preact, children can be accessed via the { children } prop. For Vue and Svelte, children can be accessed via a default <slot>.

children-components.mp4

This is accomplished in two different ways:

1. By the time we render our components, children is always a string[] of HTML. Using rehype, we generate an ast of this HTML and convert it to a tree of vnodes in that framework's flavor. This allows seamless interop between frameworks—any static component can be used inside of any other component because children are always HTML.
2. On the client, frameworks control an entire subtree of the DOM. Existing children are removed if the framework does not know to render them. We convert the children (again a string[]) into framework-specific h/createElement calls and pass them to the user component. For Svelte, we can skip this step and just pass the original HTML string.

Testing

Take a look at examples/kitchen-sink

• Tests are passing
• Tests updated where necessary

Docs

• Docs / READMEs updated
• Code comments added where helpful

[drwpow]

Wow! This works great for me.

[matthewp]

It would be great if we could avoid parsing HTML on ever request. Here's another idea:

What if we could, in the compiler, instead of compiling to the current h() function that returns a string, we use a different h() function when inside children of a framework component. This h() function returns a VNode. Then we just have to convert from out VNode format to the framework h() calls.

It's possible that parsing is actually faster so I'd love to test two implementations.

[natemoo-re]

Finally circling back to this. I started implementing this but realized that your suggestion is effectively just moving where this work happens. The HTML => VNode conversion still needs to happen since it allows components from different frameworks to be nested within each other. IMO moving this logic into the compiler and creating framework-specific h functions would make this flow much harder to follow.

[natemoo-re]

My suggestion: leave the /frontend/render/utils where it is, but memoize childrenToVnodes and childrenToH so we're not parsing anything more than once.

[matthewp]

I think that's an ok compromise for now