search

drunomics / nuxtjs-drupal-ce

A Nuxt module to easily connect Drupal via custom elements.
https://lupus-decoupled.org/
MIT License
24 stars 4 forks source link

Allow shipping default components for custom elements #250

Closed fago closed 6 days ago

fago commented 3 weeks ago

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 commented 1 week ago

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 commented 6 days ago

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.