Welcome to the quick start guide for setting up Pinto with a Drupal from scratch.

You'll start with a ready-made Drupal installation, install and configure Pinto, and create the infrastructure necessary for a component. The result of which will be equivalent to a Drupal element or hook_theme entry, with integration with the assets system (.libraries.yml) for CSS and Javascript and associated Twig (HTML partial).

Install Pinto and its dependencies

Install the Pinto Drupal module.

Associated dependencies, including the Pinto library, will also be installed.

composer require drupal/pinto

Enable Pinto

Enable the Drupal module. There are no other Drupal module dependencies.

drush pm:install pinto

Create a design system module

A custom design system module will be responsible for unifying discovery and the PHP class representation of each component. This is analogous to traditional Drupal plugins.

• Create a .info.yml file
• Enable the module.

TIP

Choose a naming convention like my_site_ds if you are unsure of names.

Create a component class

src/Pinto/MyComponent/MyComponent.php

namespace Drupal\my_site_ds\Pinto\MyComponent;

use Drupal\pinto\Object\DrupalInvokableSlotsTrait;
use Pinto\Attribute\ObjectType\Slots;

#[Slots(bindPromotedProperties: TRUE)]
final class MyComponent {

  use DrupalInvokableSlotsTrait;

  public function __construct(
    public string $str,
    public int $number,
  ) {
  }
  
}

This is a minimal component class, wherein promoted properties are automatically made available as Twig variables.

Create a template

src/Pinto/MyComponent/template.html.twig

{{ str }}
{{ number }}

Use the component

The component can be used anywhere a render array is used in Drupal:

php

$build = new MyComponent(
  str: 'Hello world',
  number: 123,
)();

Bonus topics

Adding assets

Create the assets.

All CSS or JS files adjacent to a component class are added by default.

src/Pinto/MyComponent/my-component.css

.foo {
  border: 1px dotted red;
}

src/Pinto/MyComponent/my-component.js

console.log('My Component!');

INFO

Assets are not scoped to the component, as in CSS-in-JS for React, or scoped in Vue, except for conditional inclusion behaviors of Drupal libraries.

Whenever the component is rendered in Drupal, appropriate asset libraries #attached metadata will be added so CSS and Javascript are conditionally added to the response.