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

fix(template-compiler): support custom renderer hooks for external components #3559

Merged
merged 2 commits into from
Jun 8, 2023

Conversation

ekashida
Copy link
Member

@ekashida ekashida commented Jun 7, 2023

Details

Fix to support custom renderer hooks for components of type ExternalComponent.

Does this pull request introduce a breaking change?

Yes, but only for a beta feature where LWS in enabled.

GUS work item

W-13555180

@ekashida ekashida requested a review from a team as a code owner June 7, 2023 20:45
@@ -46,7 +46,12 @@ export interface CustomRendererConfig {
}

function checkElement(element: BaseElement, state: State): boolean {
// Custom elements are not allowed to have a custom renderer hook.
// Elements of type `ExternalComponent` may have custom renderer hooks.
if (state.crDirectives.has('lwc:external') && element.type === 'ExternalComponent') {
Copy link
Contributor

Choose a reason for hiding this comment

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

Does element.directives not have 'lwc:external' when element.type === 'ExternalComponent'?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, we had decided to create a new ExternalComponent type instead of passing the directive around in anticipation of out-of-bound configurations.

// Custom elements are not allowed to have a custom renderer hook.
// Elements of type `ExternalComponent` may have custom renderer hooks.
if (state.crDirectives.has('lwc:external') && element.type === 'ExternalComponent') {
return true;
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm worry about the next condition, which returns false for dynamic components. Does true here means that it is risky? or that this should be treated as a result element? This method on itself is confusing

Copy link
Member Author

Choose a reason for hiding this comment

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

This method is used to determine whether or not an element should get custom renderer hooks, so yes, returning true here marks it as "risky".

Could you elaborate your concern about dynamic components? I don't believe we support lwc:external for those, and the existing comments seem to imply that custom elements of LWC components should never need custom renderer hooks.

Copy link
Contributor

Choose a reason for hiding this comment

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

@ekashida Can you find a suitable name for this method and update it in master branch? 🙏
checkIfElementisRisky or isElementRIsky or doesElementRequireRenderer are some ideas.

@ekashida ekashida merged commit 02d3115 into master Jun 8, 2023
@ekashida ekashida deleted the ekashida/custom-renderer-external-component branch June 8, 2023 16:51
This pull request was closed.
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.

4 participants