Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve renderComponent() utility in React to make "position in tree" restrictions a little easier #150

Merged
merged 3 commits into from
Apr 6, 2022

Conversation

lemonmade
Copy link
Member

@lemonmade lemonmade commented Mar 31, 2022

This PR adds a new field to the renderComponent() function we introduced in #86. The new field is parent, which gives the host the ability to easily customize behavior based on what other component is rendering this one. This is particularly useful if you want to enforce some components being allowed as direct children of the remote root, and others only being allowed if they are nested below the root.

We never added documentation to renderComponent(), so I have done that here.

cc/ @js-goupil this adds what I think is the missing piece for easily implementing more advanced component restrictions on the host, if you are interested in doing that instead of a multi-extension point setup.

@@ -38,6 +39,7 @@ export interface RemoteReceiverAttachableFragment

export interface RemoteReceiverAttachableRoot {
id: typeof ROOT_ID;
kind: typeof KIND_ROOT;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

components and texts both had kinds, but roots did not. This adds it so that kind is a good type discriminate when working with the remote tree on the host side.

@@ -18,22 +19,6 @@ import type {

const emptyObject = {};

export function renderComponent({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found the flow of imports really confusing here — RemoteComponent defined this function, which was imported by controller, but also used implicitly by controller.renderer.renderComponent calls later in this same file. I moved this implementation to be inlined in controller, which was the only place it was used anyways.

@lemonmade lemonmade marked this pull request as ready for review March 31, 2022 19:34
Copy link
Member

@henrytao-me henrytao-me left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome 🙇

Copy link
Contributor

@kumar303 kumar303 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice feature. Looks good ✨ Is there already test coverage?

packages/react/README.md Outdated Show resolved Hide resolved
packages/react/README.md Outdated Show resolved Hide resolved
@lemonmade
Copy link
Member Author

@kumar303 there were only some e2e tests, but I added in a few more for these behaviors 👍

@lemonmade lemonmade merged commit 1eebeb2 into main Apr 6, 2022
@lemonmade lemonmade deleted the improve-render-component-in-react branch April 6, 2022 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants