Feedbacks about SDC components

Created on 22 January 2025, about 2 months ago

Hello,

Thanks for your new SDC theme. It looks exciting.

Here are some feedbacks done with https://www.drupal.org/project/sdc_devel which is providing a drush command and a report page to audit SDC components.

Still in alpha phase, there are still false positive , unclear messages and some missing warnings, but already useful to get and fix most of the SDC component authoring errors.

Unused variables: attributes

Default attributes object is always injected in template and expected for alteration (adding contextual accessibility attributes, adding data for site building tools, style overrides of the component...)

It is missing from the templates of the following components:

  • region

Other unused variables

Every slot or prop from the component definition must be used in templates.

It is missing from the templates of the following components:

  • form-element: switches, inline

Unknown variables

Every slot or prop used in the template must be found in the component definition (except the ones automatically injected: attributes, componentMetadata...)

25 unknown variables are found in component templates. Examples:

Incomplete prop definitions

Array of empty object

This is not enough to be understood and processed by display builders ( UI Patterns 2 , the upcoming Experience Builder...):

      type: array
      items:
        type: object

Can we add a bit more details?

They are 5 of them in the component definitions in dropdown-menu, dropdown, select, breadcrumb, field

Little advice about Twig

`is iterable` test may be too ambiguous.

If you are targeting Drupal 10.3+, you can use `is sequence` or `is mapping` which is more precise.

Avoid link and path Twig function

Example in nav component:

 {{ link(item.title, item.url, { 'class': nav_link_classes }) }}

Example in navbar-brand component:

<a {{ attributes.setAttribute('href', path('<front>')) }}>

There is a risk of a manipulation of Drupal\Core\Url object and/or routing resolution. Any mechanism that may execute business logic, and/or stateful applicative API, and/or DB queries may be harmful. UI Components receive data, they don't request data. So it is better to resolve the URL before reaching the component.

Use of deprecated spaceless filter

The spaceless filter is deprecated as of Twig 3.12. While not a full replacement, you can check the whitespace control features.

Used in 5 components.

📌 Task
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024