Component structure

Component file structure

A component in Webhaven can consist of multiple files. Some are required and others are optional.

Let's get to know each file so you have a deeper understanding on how components work.

/[my-component]
|
|- README.md
|- [my-component].twig
|- [my-component].component.yml
|- [my-component].scss
|- _[my-component].js

Component specific files

README.md surprise suprise, the README of the component tells you what the component is all about.

[my-component].twig This file gets loaded into the *.html.twig file of the Drupal templates and holds the markup for your component.

[my-component].component.yml This file defines the configuration of your custom component. It holds specific component information like the name, description, props, slots, and other relevant information.

[my-component].scss The Sass file for your component, the npm run watch and npm run production commands will generated the Css file automatically.

_[my-component].js The Javascript file for your component, the npm run watch and npm run production commands will generated the Js file automatically without the _ (this file is minified, etc.). It's important to have the _ in the name.

Webhaven components

Webhaven comes with a lot of components, when you create your own custom theme they are automatically copied.