Component

Announcement
We may need to discontinue support for the Component module now that the Single Directory Component (SDC) has been integrated into Drupal core.

Project description
Adding JS components to your Drupal site just got a whole lot easier. Just combine your JS components (any type) with a `*.component.yml` and put it in your module or theme. Now, your component will be available in Drupal as a block - automatically!

You can also add a configuration form to your component so site builders can modify the component. This component "looks" like any other block, so it can be used just like a core block.

JS devs don't need to know PHP or Drupal in order to integrate their components into the CMS.

They just need to setup the `component.yml` file properly. The `component.yml` file provides the JS developer with a ton of basic configuration options. By modifying this file, you can provide static or dynamic parameters, include additional libraries, and even adjust the cache configuration. See the code comments on `example_tabs.component.yml` for details.

    name: Widget
    machine_name: widget
    type: block
    js:
      widget.js: {}
    css:
      widget.css: {}

Thats it! Put that component.yml file into a directory with the widget.js and widget.css, and you now have a component.

How it works

We have an auto-discovery mechanism designed to find the `component.yml` file. This is similar to what is able to find the modules, themes, and profiles in the codebase. These components need to be placed in a "component" subfolder in your module or theme. Optionally, you can also refer to external JS/CSS assets (like from a CDN).

A component is a block plugin called `ComponentBlock`. That means it's just an extension of the block entity in Drupal. So, we can interact with components just like we do for normal blocks!

The `component.yml` file tells Drupal what this component is called, where the assets are located, and how the block can be configured. The module creates a library definition for each component, loads any other library dependencies, and renders the default html to the page.

When the page loads, it has the html it needs (including custom HTML elements) and then the JS is run in the browser like normal.

Each component is also available as a library in Drupal, so we can share code by listing it as a dependency for other components. Using this approach, JS developers can quickly and easily make their components available inside Drupal without ever touching PHP or Twig.

Examples

The module includes some sample components showing how forms work, how to pull the form parameters into components, and how to use shared libraries with React via CDN:
https://git.drupalcode.org/project/component/-/tree/1.0.x/modules/compon...

For a more expansive example of how a Component based library might work, see ACF. All components here are vanilla JS, but there are custom libraries for event management, state/storage management, custom web elements, and a "plugin" for swapping out the libraries:
https://github.com/acquia/acf/tree/2.x/modules/acf_components/components

Finally, if you want to see what an extension based on "plugins" looks like with ACF, see this project:
https://www.drupal.org/project/elasticpath_acf

Contributions

- Inspired by the PDB module
- Kevin Funk

Backlog
- create some more examples - form config, backbone, react from CDN
- security advisory coverage
- create component_browser module
- create component_reference module
- create component_builder module