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

Allow shipping default components for custom elements #250

Closed
fago opened this issue Aug 20, 2024 · 2 comments
Closed

Allow shipping default components for custom elements #250

fago opened this issue Aug 20, 2024 · 2 comments

Comments

@fago
Copy link
Contributor

fago commented Aug 20, 2024

Motivation

When configuring view-modes via CE-UI, we want customized component names output by default as suggested by #3351239: Define and establish best-practice CE naming pattern. Still, we want a working output by default and an easy way to customize it: Copy existing component and rename it. --> See https://www.drupal.org/project/lupus_decoupled/issues/3463029

Proposed resolution

Adopt the [...] vue component lookup logic of nuxt page router, so [...] may be used for a fallback mechanism when implement custom elements via vue-components in nuxt.

Thus, we can ship with a a node-[...].vue component which acts as defautl for all node-* components.

This is something we can work into our renderCustomElements() nuxt function in nuxt-drupal-ce by default and follows the known pattern of the nuxt page router where [...] acts as a fallback. It should take the full component name, and if no match is found, remove "-[a-z]+" suffixes until one is found. This gives the flexibility to have one component for all view modes or not.

@fago
Copy link
Contributor Author

fago commented Sep 3, 2024

When the [...] pattern is not working, the otehr variant discussed in #255 is using a "Default" suffix.

Related, to better highlight what is a custom-element component I'd suggest to convert our component file names like this:

// First off, keep kepab-case as it's used in the markup. So there is a 1:1 match for custom elements
Node.vue -> node.vue
NodeArticleFull -> node-article-full.vue
// Other components used in Vue code should all be using the camelcase
SiteMessages.vue
DrupalTabs.vue
..
// Default fallback components use double-dash as separator to indicate the suffix "-default" is not part of the regualr custom element
node--default.vue
drupal-view--default.vue
drupal-form--default.vue




@fago
Copy link
Contributor Author

fago commented Sep 10, 2024

The PR got implemented and merged.

It uses fallback components like:

drupal-view--default.vue
drupal-form--default.vue

As part of the change, the frontend migrated to staying with kebap-case by default for Vue components which implemnt custom elmeents. That way there is an easy and clear 1:1 mapping between this vue components and their counterpart elements.

@fago fago closed this as completed Sep 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant