Link to Article

https://www.lullabot.com/articles/getting-single-directory-components-drupal-core

Table-of-Content

(Generated by Gemini)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Getting Single Directory Components into Drupal Core
    |__ Introduction to Single Directory Components (SDC)
        |__ Addressing complexities in current Drupal front-end development
        |__ Goals of SDC: simplification, reusability, explicit APIs, and component replacement
    |__ Architectural Decisions for SDC
        |__ All component code in one directory
        |__ Components as YML plugins for discovery and caching
        |__ Auto-generation of Drupal libraries for CSS and JavaScript
        |__ Use of JSON Schema for component APIs
        |__ Integration with native Twig tools
    |__ Practical Example: Creating a 'Tracked-Link' Component
        |__ Demonstration of SDC structure and integration within a Drupal template
    |__ SDC Status and Future
        |__ Merged into Drupal core 10.1.x as an experimental module
        |__ Plans for stabilization and further development

Content Summary

(Generated by Gemini)

The article discusses the integration of Single Directory Components (SDC) into Drupal Core, a significant step aimed at streamlining front-end development and enhancing the maintainability of Drupal themes. The primary motivation behind SDC is to simplify the often complex and scattered file structure prevalent in traditional Drupal front-end workflows, which can involve “drupalisms” that necessitate a deep understanding of Drupal’s internal workings.

SDC’s core objective is to make user interface (UI) elements self-contained and reusable, consolidating related code within a single directory. This approach mirrors practices in other modern industry stacks, promoting a more organized and portable component structure.

Key goals for SDC include:

  • Reducing the complexity of outputting HTML, CSS, and JavaScript.
  • Defining explicit component APIs, which allows for better validation and compatibility.
  • Enabling the easy replacement of components, significantly reducing theming efforts across multiple templates.

Architectural decisions for SDC involve:

  • Placing all component code within a single, portable directory.
  • Utilizing YML plugins for component discovery and caching.
  • Auto-generating Drupal libraries for CSS and JavaScript.
  • Employing JSON Schema for descriptive component APIs.
  • Integrating with native Twig tools for rendering.

The article illustrates the practical application of SDC with a detailed example of creating and using a “tracked-link” component, showcasing its structure and integration within a Drupal template. SDC was merged into Drupal core 10.1.x as an experimental module, with ongoing plans for its stabilization and further development.

For more details, you can refer to the full article: Getting Single Directory Components into Drupal Core.

Similar Post