Problem/Motivation
The
Single-Directory components documentation →
says that I can override a component only in the theme, and should use "replaces:" key to override it.
That's clear, but with this, it seems I have to always make a full copy of the module's component, so copy all the component's Twig, CSS, JS files, that leads to producing two copies of the same data and problems with managing and synchronizing them!
Usually, themes need to change only a small part of the Twig template (add classes or alter only one of the Twig blocks), or add just some new CSS rules with keeping the original ones unchanged, or override only a couple of CSS rules, add one more JS function but keep others, etc.
And it worked well with the classic approach using the twig templates, which includes CSS and JS from Twig files using something like
{{ attach_library('my_module/my_first_component') }}
or extending the libraries like this: my_theme.info.yml
libraries-override:
my_module/my_feature_one: false
css:
theme:
css/my_feature_one_additions.css
But now, with Single-Directory Components, seems we lose all these convenient tools to not duplicate the module files in the theme, but just extend only needed parts?
Proposed resolution
To resolve this issue, seems we have to provide some way to include the Twig file and CSS, JS files from the parent template, when replacing the component in the theme. If there are some ways to do this already provided, please document them in the documentation here:
https://www.drupal.org/docs/develop/theming-drupal/using-single-director... →
So, the proposal is to simplify replacing the components in the themes, without asking to copy a lot of things from the original component:
1. In the component YAML file, do not require to copy-paste the "props" and "slots" of the parent component, and reuse them from the target component, if they are missing and the "replaces" key is set. To not require managing the props and slots in two places.
2. Allow including CSS and JS files from the parent components in the replacing component, to not ask to duplicate them in the theme directory and sync manually.
3. Allow including the parent component's Twig file in the theme's component. Using the standard way to include it leads to an infinite loop, here is an example:
my_theme/components/my_component/my_component.component.yml
name: My Component
replaces: my_module:my_component
my_theme/components/my_component/my_component.twig
{% include "my_module:my_component" %}
Making this, we get the infinite loop.
Remaining tasks
User interface changes
Introduced terminology
API changes
Data model changes
Release notes snippet