About Single-Directory Components

What is a component in general?

In web development, a component is a part of a web page or application that is modular and reusable, with a specific functionality or purpose. It's like a building block that can be used to create more complex interfaces.

Components are made up of HTML, CSS, and JavaScript code, and can be easily customized and reused across multiple pages or applications. Examples of components include navigation menus, forms, sliders, and buttons.

What is a single-directory component?

Single-Directory Components (often abbreviated as SDC) are Drupal core’s implementation of components. Within SDC, all files necessary to render the component are grouped together in a single directory (hence the name). This includes Twig, YAML, and optional CSS, JavaScript, etc. SDC will automatically generate a library to load CSS/JS when the template is invoked.

What are the benefits of using Single-Directory Components?

There are many benefits of using single-directory components.

• Organization: Grouping all necessary code into one directory makes finding and jumping between relevant files easier.
• Automatic library creation: SDC will automatically look for a my-component.css and my-component.js and add to an automatically generated library if found. You can specify additional assets and dependencies within the component’s YML file if necessary.
• Reusability: Components are designed to be modular and reusable, which means that they can be easily integrated into multiple pages or applications.
• Consistency: By using components, developers can ensure that their web pages or applications have a consistent look and feel throughout.
• Scalability: Components can help make web pages or applications more scalable, as they can be easily added or removed as needed.
• Testing: Components can often be tested in isolation, which can make it easier to identify and fix bugs or issues.
• Collaboration: Using components can make it easier for teams of developers to work together, as they can share and reuse components across different projects.

Future benefits

Because SDC allows you to define schemas within the YML definition file, contributed modules (and eventually Drupal core) can automatically generate forms to populate the data. This means that in the future, we’ll be able to add components directly from systems like Layout Builder, CKEditor, etc. without having to make custom entities!