Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Support new @drupal/once library in Storybooks #299

Open
HeikkiYlipaavalniemi opened this issue Sep 12, 2023 · 2 comments
Open
Assignees
Labels
🪄 Enhancement New feature or request.

Comments

@HeikkiYlipaavalniemi
Copy link

HeikkiYlipaavalniemi commented Sep 12, 2023

Is your feature request related to a problem? Please describe.
We have a component in our Drupal project which is using the new drupal/once library instead of jQuery/once.

This works fine when added as a dependency in the Drupal theme but we have trouble getting the code to work in the Storybook.

What would be the best solution to include https://www.npmjs.com/package/drupal/once in the Storybooks and be able to use the new JS functions in Storybooks?

Describe the solution you'd like
I would like to be able to include the drupal/once library in the Storybook components and use the JS function for example in accordion.js to make sure the element is triggered only once.

Probably something like the usual Drupal.behaviors might work but there is of course the NPM package for drupal/once available so it could even be a more robust solution to support the functionality in the storybook js file.

@amazingrando
Copy link
Contributor

@HeikkiYlipaavalniemi We are working on getting this into the documentation and etc. Until then, we sorted this out in the Drupal Slack.

@amazingrando amazingrando moved this from Incoming to Backlog in Emulsify Project Sep 22, 2023
@HeikkiYlipaavalniemi
Copy link
Author

For others looking and without Drupal Slack access.

We solved the problem by first installing the required NPM module with

npm install @drupal/once -D

Then we created a once.global.js file under the .storybook folder.

The content of the file is following:

import once from '@drupal/once';
global.once = once;

And the final step was to import the new global file in preview.js after the _drupal.js import:

// If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
import './_drupal.js';
import './once.global';

@callinmullaney callinmullaney self-assigned this May 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🪄 Enhancement New feature or request.
Projects
No open projects
Status: Backlog
Development

No branches or pull requests

3 participants