Introducing Single Directory Components to DrupalX Theme Starter

Jay Callicott
2 min readJun 25, 2024

--

DrupalX Theme Single Directory Components

Today I am excited to announce a significant update to the DrupalX theme starter: the introduction of Single Directory Components. This change streamlines component organization, enhancing efficiency and simplifying the development process for Drupal theming.

In this update, all components now reside within the ‘components’ folder, located in the theme’s root directory. Each component encapsulates compiled CSS, JavaScript, and a component YAML file. Notably, when including components, CSS and JavaScript are automatically pulled in, eliminating the need for a separate libraries.yaml definition.

While DrupalX continues to leverage Storybook for its style guide, each component now comes with an accompanying story definition. This addition introduces some redundancy, but there are ways to compile the component YAML into story definitions or vice versa, streamlining the process further.

However, it’s important to note a caveat with Single Directory Components: any missing or invalid property can lead to a disruptive runtime error. To address this, I’ve bolstered automated testing in the main DrupalX project repository. These tests aim to mitigate potential errors and ensure smoother development experiences.

Screenshot of new DrupalX project Cypress.js tests

For those considering adopting Single Directory Components, thorough testing is essential. While this update brings significant benefits, it’s crucial to be mindful of potential errors to maintain the integrity of your Drupal projects.

Stay tuned for more updates and improvements as we continue to refine the DrupalX theme starter to empower developers and streamline Drupal theming experiences.

Links

--

--

Jay Callicott

Drupal architect, open-source advocate, entrepreneur. Husband and father. I never take myself too seriously.