All the best component libraries are written in JavaScript... like Storybook, Fractal, even the latest version of Pattern Lab. And Twig.js is what allows these frontend tools to read and render the same templates consumed by our backend Drupal themes, saving us time and sanity.
The frontend team gets to work in their preferred environment (a lightweight JS environment), and Drupal reaps the benefit. At least that's been the theory: "Make the change once, and it updates everywhere!"
But in practice, with Twig.js, it's never that simple. To write markup that works in both our backend themes and frontend component libraries, we must limit ourselves to the barebones feature set available in Twig.js. And even those features supposedly implemented often exhibit arcane and maddeningly difficult to debug differences that tie our hands and limit the benefits of using a component library in the first place.
The fact is: Twig is a PHP templating language and was never meant for JavaScript usage. So we decided to make Drupal's rendering engine available to all our front end tools, removing the need for a JavaScript implementation of Twig.
Introducing Theme Server, an API endpoint to render components through your Drupal theme. No more discrepancies between the component library and Drupal. No more "works in one place but not the other". No more limiting your templates to the feature set that works reliably in Twig.js. Gain instant access to all the filters and functions provided by Symfony, Drupal, custom and contrib modules!
In this presentation, I will demo a Storybook integration that uses Theme Server and other modules in the "Component Libraries" (CL) suite to render components in perfect fidelity with Drupal. We'll see how easy it is to preview Storybook components in different Drupal themes, and how those previews automatically include the extra CSS and JS attached by the site's theme and modules.