Extended existing hooks
In the previous chapter, we brushed up on the following 4 functions:
HOOK_preprocess_hookHOOK_theme_suggestions_hook_alterHOOK_themeHOOK_library_info_alter
The first 2 functions, we have to replace the word hook in them to the name of the component that we want to impact. Therefor those 2 functions are theoretically component-based.
The last 2 functions are not component-based, and we can only write those once per theme. (Due to a limitation in PHP, you also can’t have 2 functions with exactly the same name.)
Having a function that is theme-specific, isn’t the component-way. Therefor Compony is extending these functions to become component-specific. This means you can use them from inside .theme files within components, without having to worry of duplicating functions.
Compony introduces these extensions as new function names. The naming of these new functions is similar to how Drupal implements them, we named them following the BEM-methodology. This means that the double underscores __ indicates that the new hook, is part of the original one. Let’s see how that looks!
HOOK_theme__hook #
This function is a clone of the original HOOK_theme. You can do all the same things as with the original hook. The advantage is that you can now create multiple HOOK_theme__hook functions, each being component-specific!
In the previous chapter we talked about defining a new component: text-dropdown. We defined it like this:
function my_theme_theme__text_dropdown($existing, $type, $theme, $path) {
return [
'template' => 'text-dropdown',
'variables' => [
'toggle' => NULL,
'content' => NULL,
'classes' => NULL,
],
];
}
How neat is that? We can now create a whole new component, add libraries, preprocess, define its own libraries, write the CSS and/or JS for it, all without leaving the component-folder!
The only catch is that an underscore _ in PHP becomes a hyphen - in name of the component.
HOOK_library_info_alter__hook #
Compony did the same thing for the HOOK_library_info_alter function, in which we make that function available for individual components by opening up HOOK_library_info_alter__hook functions
This means that inside the text-dropdown component, we can write the function like this:
function my_theme_library_info_alter__text_dropdown(&$libraries, $extension) {
unset($libraries['jquery.ui']['css']);
}
This function is the exact same thing as HOOK_library_info_alter. You can do all the same things as in the original hook. The advantage is that you can create multiple HOOK_library_info_alter__hook functions, making them component-specific!