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

Use component with :is #3774

Merged
merged 1 commit into from
Feb 17, 2023
Merged

Conversation

raimund-schluessler
Copy link
Contributor

@raimund-schluessler raimund-schluessler commented Feb 17, 2023

Vue3 limits the use of the custom elements :is special attribute to the reserved <component> tag only, see https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html#customized-built-in-elements
Vue2 does not care. So we migrate already to keep #3692 simpler.

@raimund-schluessler raimund-schluessler added feature: breadcrumbs Related to the breadcrumbs components technical debt feature: checkbox-radio-switch Related to the checkbox-radio-switch component labels Feb 17, 2023
@raimund-schluessler raimund-schluessler marked this pull request as ready for review February 17, 2023 10:35
@raimund-schluessler raimund-schluessler added the 3. to review Waiting for reviews label Feb 17, 2023
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

I really like this refactoring. Regardless of Vue 3 migration, using the dynamic component seems to be much more explicit, especially when :is is bound not directly but by v-bind="object". At the same time, the purpose of the is special attribute is combability with templates in HTML documents, which is not the case.

However, this approach is used not only in these two components but in many others in a bit less straight way.

What about refactoring all of them?

Binding is via v-bind="object"

NcListItem

https://github.com/nextcloud/nextcloud-vue/blob/a7050634f805ae55826b504afe970b968b6ff670/src/components/NcListItem/NcListItem.vue#L202-L204

NcAppNavigationItem

https://github.com/nextcloud/nextcloud-vue/blob/a7050634f805ae55826b504afe970b968b6ff670/src/components/NcAppNavigationItem/NcAppNavigationItem.vue#L212

NcUserBubble

https://github.com/nextcloud/nextcloud-vue/blob/a7050634f805ae55826b504afe970b968b6ff670/src/components/NcUserBubble/NcUserBubble.vue#L79

Direct using is on a component

NcUserBubble

https://github.com/nextcloud/nextcloud-vue/blob/a7050634f805ae55826b504afe970b968b6ff670/src/components/NcUserBubble/NcUserBubble.vue#L72

@raimund-schluessler
Copy link
Contributor Author

@ShGKme Thanks for the feedback! Indeed, I missed the NcUserBubble component, I will change it there as well.

Regarding NcAppNavigationItem and NcListItem I would propose to ignore them for now, since they use router-link which anyway needs a deprecation migration, which I started in #3775 already.

@raimund-schluessler
Copy link
Contributor Author

@ShGKme Thanks for the feedback! Indeed, I missed the NcUserBubble component, I will change it there as well.

Done.

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

@raimund-schluessler raimund-schluessler merged commit 667c2a2 into master Feb 17, 2023
@raimund-schluessler raimund-schluessler deleted the fix/noid/component-element branch February 17, 2023 17:53
@szaimen szaimen mentioned this pull request Feb 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews feature: breadcrumbs Related to the breadcrumbs components feature: checkbox-radio-switch Related to the checkbox-radio-switch component technical debt
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants