Introducing component

You are here


Israel Office



Europe office


Introducing component
submitted by: aron

In the past several years there has been a growing gap between Drupal and the complexity and sophistication of javascript frameworks like angular.js, react, polymer, ember.js etc..
All of these exciting frameworks suggest a move towards web components as a key concept when thinking about the next generation of web experiences.
We where looking for a theme that could also implement this component related way of thinking and when we didn't find that suited our needs we created it :)

The theme has 4 major functions that deliver the ability to manage standalone components.
The components can be powered either by php, a javascript framework (like angular or react) or by custom templating.
Component defines a set of conventions that lets you manage larger code bases (ridding you from the need to manage a >2k lines of code template.php file in larger projects.)

1. component_add_file 2. component_load_component 3. component_add_tpl 4. component_add_client_data

When choosing a Drupal theme there a several key aspects to address

  • Modularity - Each components should be self contained
  • Autoloading - Each component
  • DX - Developer Experience




Component defines an additional filesystem layout convention that lets you describe and manage multiple components. The new structure looks like this -

Theme File Structure

myTheme --components ----name-of-component name-of-component.js name-of-component.css name-of-component.php name-of-component.tpl.php ----name-of-component(2) ... --images --scritpts --templates component.function.php templates.php


Component File Structure


--name-of-component name-of-component.php // server-site - available "$vars" it's a part of the preprocess function from templates.php name-of-component.js // client-site - load automatic if thet some name name-of-component.css // client-site - load automatic if thet some name name-of-component.tpl.php // server-site / client-site - it's don't load automatic you can use "component_set_Tpl("name-of-tpl");"



Auto loading

As seen above we can have different types of component suffixes and they will imply a different handler the following code traverses throughout the component directory structure and lets you automagically load each components requisites.

function component_preprocess_node(&$vars) { component_load_component('node-' . $vars['type'], $vars); } function component_preprocess_panels_pane(&$vars) { component_load_component('pane-' . $vars['pane']->subtype, $vars); } function component_preprocess_views_view(&$vars){ component_load_component('view-' . $vars['name'], $vars); }

The code above adds these files in the theming pre-process phase and injects the $vars so it can be available in the partials defined.

/** * component_load_component */ function component_load_component($name, &$vars = NULL) { global $theme_path; $components_dir = $theme_path .'/'. COMPONENTS_DIR; $component_path = "$components_dir/$name"; // load: bower_components ... // load: js & css files $files = file_scan_directory($component_path, '/.*\.*$/'); foreach ($files as $file){ component_add_file($file->uri, WEIGHT_COMPONENTS -1); } // load: PHP file if (file_exists("$component_path/$name.php")) { include "$component_path/$name.php"; } }

DX - Developer experience

We provided a set of helper functions that makes the developers life better with more readable code and simplifies it to the use

Use "add_file" function

It's load drupal_add_css OR drupal_add_js automatic by type of the file

global $theme_path; component_add_file($theme_path . '/styles/styles.css', 0); component_add_file($theme_path . '/scripts/scripts.js', 0); The function: /** * Component_add_file */ function component_add_file($path, $weight = WEIGHT_COMPONENTS, $group = 'components'){ global $base_url,$all_files; $type = pathinfo($path); $type = !empty($type['extension']) ? $type['extension'] : ''; switch ($type) { case 'js': drupal_add_js($base_url .'/'. $path, ... ); break; case 'css': drupal_add_css( ... ) break; default: } }


Use "add TPL" function


component_add_tpl($vars, 'node__article'); The function: /** * component_add_tpl */ function component_add_tpl(&$vars, $name) { $vars['theme_hook_suggestions'][] = $name; }


Use "add_client_data" function


component_add_client_data($data,'articles',$vars['nid']);The function: /** * component_add_client_data */ function component_add_client_data($data,$group,$count) { drupal_add_js(array($group => array($count => $data)), 'setting'); }





Add new comment