Single File Components

The Single File Components module allows developers to provide frontend components in a single file. These components contain Twig, CSS, JS, and PHP code which acts similar to a preprocess function.

The purpose of this module is to combine traditional Drupal theming with some elements of component based design.

Example code

Excited, confused, scared, and want to skip to some example code? Check out the documented files by clicking here!

Feature highlights

• Put your Twig, CSS, JS, and PHP in one file, then use it like any other template (i.e. {% include "sfc--say-hello.html.twig" %}). Components can be defined as PHP classes or .vue style .sfc files. (link)
• Library definitions are automatically generated and included in your template, saving developer time
• Easily override components in themes by replacing library definitions and overriding their templates (link)
• Save time by writing JS in the ATTACH constant, which automatically wraps your code in a Drupal behavior and a jQuery.once call (link)
• Derive blocks, layouts, and field formatters from components using annotations (link)
• Provide backend actions without writing a route or controller(link)
• Single file components are Drupal plugins, you can extend them, derive them, and alter their plugin definition. You also have access to dependency injection so components can be unit tested.
• Component library available at /sfc/library for developers to stress test and play with components. (link)

Requirements

PHP 7+ is required if you're defining the LIBRARY or DEPENDENCIES constants.

Installation

This module has no dependencies, so to install it, download and install it!

Writing a component

The README.md file is the best place to look for technical documentation, but you can also check out the sfc_example sub-module for example plugins.

Sites built with Single File Components

• https://mortenson.coffee / https://mortenson.coffee/components - (Source)
• https://bookish-drupal.netlify.app - (Source)

Slack channel

Join me in Slack in the #single-file-components channel! Details on how to connect here: https://www.drupal.org/slack