Module Description
This module lets you use component libraries, like Storybook, in your Drupal project, without Twig.js!
Wait! what's the problem with Twig.js? Mismatched feature set
According to the Twig.js documentation:
Twig.js is currently a work in progress and supports a limited subset of the Twig templating language (with more coming).
This means that you are left to the following decisions:
* do I use Twig as I see fit in Drupal, or do I keep to what Tiwg.js supports?
* do I leverage twig extensions in contrib and core, or do I keep to what Twig.js supports? Do I write the Twig.js compatibility layers myself instead?
Inconsistent rendering between Drupal-Twig and Twig.js
The goal is to develop your components in your component library (like Storybook), and know that there will not be a difference when you render the component in your Drupal site.
You also need to consider the fact that if Drupal is not rendering your components, how is your component library aware of the Drupal theme? The render pipeline in Drupal will change the markup, add & remove CSS, add & remove JS, process images, etc. All this needs to be faked in Twig.js if you want Drupal to render something similar to what Twig.js renders.
This means that you are left to the following decisions:
* am I optimistic that the templates in Storybook with Twig.js will look the same in Drupal, or do I re-double the QA efforts to ensure?
* can I ensure that Twig.js will have all the CSS and JS that Drupal adds to the page (now and in the future)?
Leverage Component Libraries: Server
If your solution is to have Drupal render the components, like us, this module lets you do that.
Storybook + Drupal Even though this module is completely agnostic of the component library, the main integration is Storybook.
Set up Storybook for your Drupal site. Please see the @lullabot/storybook-drupal-addon, which will make your Storybook aware of Drupal by connecting it to this module.
📋 Step-by-step tutorial 📋 Hot reload of server-side changes 📼 Watch it in high resolution
Rendered in Drupal with your themes 📼 Watch it in high resolution
Always consistent rendering between Drupal and Storybook 📼 Watch it in high resolution
Supports Drupal-style JavaScript 📼 Watch it in high resolution
Storybook knobs and stories 📼 Watch it in high resolution
Usage Enable the module and set up Storybook according to the instructions here.
It is recommended to disable the component registry cache during development. To do so, add this to your settings.local.php:
$settings['cache']['bins']['component_registry'] = 'cache.backend.null'; Additional resources
* Playlist with all the videos.
* Storybook Drupal addon.
* Component Libraries: Components.
Do not enable this module in production. This module should not be enabled in production. Make sure to disable it using techniques like $settings['config_exclude_modules'].
What version should I use? Select the version of this module based on the component solution that you are using.
CL Components SDC SDC from core Use 1.x Use 2.x Use 2.x
Wait! what's the problem with Twig.js? Mismatched feature set
According to the Twig.js documentation:
Twig.js is currently a work in progress and supports a limited subset of the Twig templating language (with more coming).
This means that you are left to the following decisions:
* do I use Twig as I see fit in Drupal, or do I keep to what Tiwg.js supports?
* do I leverage twig extensions in contrib and core, or do I keep to what Twig.js supports? Do I write the Twig.js compatibility layers myself instead?
Inconsistent rendering between Drupal-Twig and Twig.js
The goal is to develop your components in your component library (like Storybook), and know that there will not be a difference when you render the component in your Drupal site.
You also need to consider the fact that if Drupal is not rendering your components, how is your component library aware of the Drupal theme? The render pipeline in Drupal will change the markup, add & remove CSS, add & remove JS, process images, etc. All this needs to be faked in Twig.js if you want Drupal to render something similar to what Twig.js renders.
This means that you are left to the following decisions:
* am I optimistic that the templates in Storybook with Twig.js will look the same in Drupal, or do I re-double the QA efforts to ensure?
* can I ensure that Twig.js will have all the CSS and JS that Drupal adds to the page (now and in the future)?
Leverage Component Libraries: Server
If your solution is to have Drupal render the components, like us, this module lets you do that.
Storybook + Drupal Even though this module is completely agnostic of the component library, the main integration is Storybook.
Set up Storybook for your Drupal site. Please see the @lullabot/storybook-drupal-addon, which will make your Storybook aware of Drupal by connecting it to this module.
📋 Step-by-step tutorial 📋 Hot reload of server-side changes 📼 Watch it in high resolution
Rendered in Drupal with your themes 📼 Watch it in high resolution
Always consistent rendering between Drupal and Storybook 📼 Watch it in high resolution
Supports Drupal-style JavaScript 📼 Watch it in high resolution
Storybook knobs and stories 📼 Watch it in high resolution
Usage Enable the module and set up Storybook according to the instructions here.
It is recommended to disable the component registry cache during development. To do so, add this to your settings.local.php:
$settings['cache']['bins']['component_registry'] = 'cache.backend.null'; Additional resources
* Playlist with all the videos.
* Storybook Drupal addon.
* Component Libraries: Components.
Do not enable this module in production. This module should not be enabled in production. Make sure to disable it using techniques like $settings['config_exclude_modules'].
What version should I use? Select the version of this module based on the component solution that you are using.
CL Components SDC SDC from core Use 1.x Use 2.x Use 2.x
Module Link
Project Usage
1442
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to allow the use of component libraries, such as Storybook, in Drupal projects without the need for Twig.js, ensuring consistent rendering between Drupal and the component library.
Data Name
cl_server
OPENAI CHATBOT
OPENAI CHATBOT
