What if one solution could organize website UI components, make them easy to reuse in different projects, ensure consistency across web pages, do much more?

With Drupal SDC (Single Directory Components), a key feature in Drupal 10.1 and Drupal 11, this is now achievable. Released six months after Drupal 10, it has gained attention and sparked discussions on how it can revolutionize front-end development.  

The latest versions of Drupal 10 core include the experimental Drupal SDC (Single Directory Components) module. This module aims to align Drupal front-end development with component-based design, a popular approach in recent years (like React, Vue, Web Components, etc.), which was challenging to implement in earlier versions of Drupal core. 

But before we dive deep, if you are planning to move to Drupal 10?  

Explore our comprehensive services to make the migration effortless and efficient. 

Migrate to Drupal 

Let’s Start! 

What Is Drupal SDC (Single Directory Component)? 

Drupal Single Directory Components offers a new method for theming in D10 and D11. It collects all the files required for a web component, such as Twig, YAML, CSS, or JS, into one directory. This directory is automatically detected, and Drupal SDC generates a library with all the files, which is loaded when the component is activated. This functionality is part of the Drupal 10.1 core as an experimental module named Drupal Single Directory Components. 

Drupal SDC allows themes and modules to build components in their folders within the project.

Drupal SDC offers a complete API for making and enhancing components, providing a strong base for adding more features. 

Drupal SDC is a separate module, but the long-term plan is to add its features to the main theme system of Drupal Core when it becomes stable. 

Here are the main points about Drupal SDC (Single Directory Components): 

1. Easier Maintenance: Keeping all component files together makes updates and debugging simpler.  

2. Consistency: Encourages a uniform and tidy structure for components throughout the project.  

3. Increased Reusability: Facilitates the reuse of components in various projects or sections.  

4. Better Organization: A clear directory layout allows developers to quickly locate and manage the needed files, enhancing productivity and minimizing mistakes.  

These points emphasize the organized method that Drupal SDC offers for development. 

Also, Check Out: 

1. SDC: Integrating Storybook & Single Directory Component 

2. Drupal 11 Upgrade: Checklist For Drupal 7 to 11 Migration   

3. Drupal Recipe Module: What Is It & How It Works? 

4. Drupal 11: Eleven Changes & Updates In Drupal 11 

What Is Drupal SDC Solving For Frontend Developers? 

For a front-end developer, working with a codebase can be challenging.

Frontend developers often face the challenge of losing their place in the codebase. Moving between different Twig templates can be confusing, making it hard to remember where we left off while coding. 

Grasping the data for front-end developers is important, but it can be hard to find the variables in templates. If they need to make changes, figuring out which variables to adjust can be tricky. Finding the template itself is another issue, as it might be in a module, the main theme, or hidden in many folders. 

The Drupal Single Directory Components module offers a helpful solution to these challenges. It simplifies how files, templates, and assets are organized, making front-end development easier and more structured. This module helps developers navigate the codebase, identify variables, and find templates more easily, leading to a better and more efficient development process. 

What Are The Goals Of Drupal SDC? 

The main aim is to make the front-end development process easier, improving how we handle custom, Core, and contrib themes. In short, to make things simpler for Drupal front-end developers and help newcomers to Drupal. This matters a lot because it will greatly enhance the daily work of front-end developers. Here are some goals of Drupal Single Directory Components: 

1. The aim is to create reusable UI components. Similar to how Twig templates can be imported, embedded, or extended, your goal with Drupal SDC should be to develop components that can be reused in other components. 

2. One more aim is to avoid replacing or redoing everything. You should use parts that fit well, especially with your site's theme. 

Migrate to Drupal

Advantages of using Drupal Single Directory Component 

Drupal Single Directory Components (SDC) are how Drupal core handles components. In Drupal SDC, all files required to display a component are grouped in one directory, which is the reason for its name. Here are some of the advantages of Drupal SDC: 

1. Improving How Well An Organization Works 

Drupal SDCs enhance organization by gathering all files for a component in one directory, creating a clear structure for code management. This makes it simpler to handle and update components.  

Additionally, by loading CSS and JS files according to components, the total size of page assets is decreased, which boosts page performance. This method prevents the loading of unnecessary CSS and JS on the page. 

2. Simple To Locate and Remove  

When doing CSS refactoring, many worry about removing styles that are still in use. But with component-based styling, each style is linked to a specific component. This approach makes it easier to refactor and delete CSS without fear, as it only impacts that one component. 

3. Modularity And Reusability  

Drupal SDC promotes modularity and reusability by keeping all component code and assets in one directory. This setup allows components to be easily reused in various projects or even within the same project, which helps save time and effort in development. 

Users can use the following code to reuse a component: 
{ % include (my_theme : my-component) % } 

Users can create HTML, CSS, and JS for a specific component by adding the component ID. When they want to include or expand the component, a library is generated automatically. This means users do not need to manually link the library. 

4. Maintenance 

Maintenance is easy with Drupal SDC because all the component files are stored in one location. This makes it simple to update or change components without having to search through many folders or files. 

Drupal SDC also creates a library that loads the needed CSS and JavaScript files whenever the related template is used. This automatic process makes sure the necessary assets are included easily, minimizing manual setup and simplifying front-end development. 

5. Clean Code 

Drupal SDC enhances code readability by clearly showing the dependencies and connections between various component files. This allows developers to better understand and handle dependencies. 

6. Standardization  

Drupal SDC helps create uniformity in component development by offering a set structure. This leads to cleaner and easier-to-manage code throughout the project or organization. 

By using  Drupal SDCs, Drupal developers can benefit from a more structured, modular, and effective front-end development process. With better asset management, easier maintenance, and improved teamwork, Drupal SDC enables developers to build excellent web experiences smoothly and confidently. 

Also, Check Out: 

1. Drupal's Omnichannel Capabilities: Enhancing Customer Engagement and Experience 

2. What to do with your Drupal 7 website? 

3. Digital Disruption: Revolutionizing the Enterprise Experience 

4. 7 Ways to Consistently Deliver Great Customer Service 

How to Work with Drupal SDC? 

You need to use Drupal version 10.1 or newer. Before you start making a new component, there are some steps to prepare. Here they are: 

To create Drupal SDC: 

• If you are using Drupal 9, then use this command to install the module: composer requires 'drupal/sdc:^1.0'. 

• For Drupal 10 and 11 newer core versions, the Drupal Single Directory Component (SDC) module is part of the core. 

• Activate the Drupal Single Directory Components module. 

• Turn off CSS and JS aggregation in the Drupal admin interface for development purposes. 

• Turn on Twig development mode and turn off caching. 

1. Steps To Make A Component: 

• Make a folder named components/ in the main directory of your theme or module. 

• Make a new folder inside the components/ folder and name it after your new component (for example, my-component). 

• In the component folder, make a Twig file and a YAML file (these files are necessary). You can also include CSS and JS files if you want. 

• To add more styles, scripts, and dependencies, use the libraryOverrides key in your YAML file. 

A Single Directory Component is commonly called a "component directory" because it gathers all important information in one place. This includes information about the component, its design, layout, and how it is displayed. 

In the screenshot above, we can see a directory for a component named hero. It includes a .css file for styling, a hero.component.yml file with details about the hero component, and a twig template. 

The biggest benefit of Drupal SDC is how easy it is to find and delete things because everything is in one folder. Also, the Twig file and rendering process is made to avoid Drupal’s preprocessing and hook systems, so these parts stay safe from outside influences. 

METADATA 

The .component.yml file is essential. Without it, Drupal does not know your component exists. You must create this file in the component's directory. 

Let's review what a .component.yml file is. 

KEY	MEANING
name	Title of the part.
description	A detailed description of the component.
schema props	Are the features such as email, picture, title, and so on.
schema slots	A box for storing data that lacks a specific format or structure.
libraryOverrides	To include additional JS or CSS libraries beyond those found in the component's directory.

Learn more about schema props and schema slots: 

In the Drupal Single Directory Component (SDC) framework, you can send data to a component in two ways: "props" and "slots." These ideas come from JavaScript frameworks such as Vue and React, which focus on giving data to a component. 

• Props: It follows a specific format to send data to the component, using JavaScript Object Notation (JSON) with key-value pairs. Drupal SDC example of Props: 

• Slots: Slots are used to manage unstructured data, including cases like nested components, Twig blocks, or HTML markup. Unlike props, slots don't need a JSON schema with key-value pairs and aren't limited by JSON data types. Drupal SDC example of Slots: 

2. Steps To Display A Component: 

To add a component in an *.html.twig template, use Twig's embed or include functions. 

• Use include(): 

Use the Twig include() function when there are no slots or random HTML properties, and the data has a clear structure. 

Here is an Drupal SDC example of using the sdc_custom:hero component in a Twig template. 

You must give the component ID ([module/theme name]:[component]) for the Component. 

• Use {% embed %}: 

Use a Twig {% embed %} tag to fill slots as needed. 

The result of a component after completing the steps listed above will appear as follows: 

 

3. Steps To Change A Component: 

Only themes can change components, and there are two key requirements to achieve this: 

1. Place a replace key at the top of the .component.yml file that you wish to change. 

2. The component must have a clear schema. Modules cannot replace components, and only components with a defined schema can swap with each other.
   

Drupal 10 and 11's Single Directory Component acts like a superhero for your website's code, helping to keep it organized and easy to manage. Although there is some effort needed to implement Drupal SDC, the advantages of having clean and structured code make it a great asset for Drupal developers. 

 

Key Takeaways 

1. Drupal Single Directory Components introduces a fresh approach to theming in D10 and D11. 

2. SDC makes it simplier for front-end developers to locate the variables in templates.  

3. The main aim is to make the front-end development process easier, improving the management of custom, Core, and contrib themes. 

4. In Drupal SDC, all the files needed to show a component are collected in one folder, which is why it has that name. 

5. One must have Drupal version 10.1 or later to create a new component.