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
Project information
- 29 sites report using this module
- Created by samuel.mortenson on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 8.x-1.x-dev updated 9 Apr 2023 at 18:35 UTC