By Bernardo Martinez
This year, DrupalCon Pittsburg was packed with sessions to brush up on current features and discover upcoming features. I found it difficult not to be awestruck by all the brainpower and innovation. There were a variety of tables tailored to just about anything a developer or Drupal enthusiast would love. People could even set up their own tables if they so desired. I found it difficult to pick one table; kind of like finding a new ice cream shop and getting only one flavor. That said, time was limited and to make a meaningful contribution one had to commit to one of them. For me, that was Single Directory Components (SDC), an upcoming feature on Drupal 10.1 that will simplify theming and make it easier for developers to share pre-made components and their assets.
While working, I and the group found it very difficult to get our development environments up to speed, as we had to clone Drupal core 11.x development branch and make it compatible with whichever development environment we used. Many of the people at my table were using Ddev or Lando, but there were some people using DrupalPod; all fantastic options with their own set of tradeoffs and perks.
Once your development environment is set up and running, turn on the SDC module because it's off by default due to its experimental status. Once that is ready, head over to the Drupal documentation and create a basic component. Personally, I tried just printing “Hello World!” from the twig file to make sure it was loading and then I started looking into the YML file and its requirements.
Tips to keep in mind as you dive into Single Directory Components:
- Ensure you name of your YML file is ‘component.yml’ and not ‘components.yml’.
- Beware that having your SDC directory nested on a directory might cause issues. By default, SDC looks for the directory at the root of the theme Olivero/components. Items nested deeper or placed inside other directories won’t work. Take Olivero/components, for example: If you place the SDC directory on Olivero/templates/components the autoload won’t work and it won’t pick up your components.
- Ensure your twig blocks are inside the twig embed or you might experience some odd behavior. It just happened to work for me, but items were loading out of order (which is never fun).
- To ensure the component is loading, turn on verbose errors and twig debugging. The twig template suggestion should tell you there's a component being loaded on that section of the DOM.
- Dd and Dump are your friends when finding data types for your YML files. Xdebug provides you with more options but it has a higher learning curve. Here is a link to learn more.
- To avoid losing contextual links, pass the Drupal attributes.
- Don’t forget to refresh your browser cache and your Drupal cache. Depending on your setup this might already be done for you. In some scenarios, busting the cache got me out of odd error states even though I had caches turn-off. So, try this if everything else fails.
Another bonus tip you might find help – be careful with using a trackpad and misplacing your SDC directory. I was working on my Macbook Air and I accidentally moved the folder location. If your component suddenly stops loading, check you didn’t misplace it while using your trackpad.
And that’s it. Hopefully, these tips save you some time as you either get started with SDC or recover from a frustrating issue that might be simple but a honeypot for mistakes.