Creating a Component in the Theme

Components in the theme are structured the same way as components in bolt itself. Each component is its own package that may contain:

1. Javascript
2. Scss
3. Twig

1. Create the package folder

See the creating a new package section.

Any new component package must be created in the packages/components directory of the default active drupal theme.

The folder name should follow the rules in naming a package.

2. Create a package.json file in the folder

Change to the directory you just created and run yarn init as described in the creating a new package section.

Pay careful attention to the rules for the name entry.

3. Create a src folder and add your code

See the important package.json settings section for a list of keys that will need to be filled in depending on the type of component you are creating.

4. Update the Yarn Workspace

Switch to your my_theme directory and run:

yarn install --force

5. Run Gulp

Run gulp as described in the front end workflows.

As long as you followed the correct naming conventions, your component should be automatically detected and compiled.

Ways to Reference your new Component

Lets say you created a component @my_subtheme/components-my-component.

There are a few ways you might want to reference your component javascript, css, and twig.

Javascript and CSS

The webpack build process will automatically generate a Drupal library entry for you to use based on the component name.

In Twig

drupal_add_library('my_subtheme/components-my-component')

In Drupal

$render['#attached']['library'][] = 'my_subtheme/components-my-component';

As a Javascript Dependency

const component = require('@my_subtheme/components-my-component')

Twig

{% embed '@my_subtheme/twigfile.twig' %}