Support request ? for drupal attributes

[tjheffner]

Hello, and thanks for the lovely module.

I'm working with this module, drupal-attributes, twing, and storybook... but I'm having the darndest time getting attributes.addClass('foo') to print at all. I'm assuming the problem is how I'm calling drupal-attribute... I found this old comment here: ericmorand/drupal-attribute#12 (comment) that mentions the glue to make it work also exists in this module now.

relevant bits of package.json (initially ran npx sb init -t html)

    "@storybook/html": "^6.4.19",
    "drupal-attribute": "^1.0.2",
    "drupal-twig-extensions": "^1.0.0-beta.4",
    "twing": "^5.1.0",
    "twing-loader": "^4.0.0"

main.js

webpackFinal: async config => {
    // add twig support to storybook
    config.module.rules.push({
      test: /\.twig/,
      use: [
        {
          loader: 'twing-loader',
          options: {
            environmentModulePath: path.resolve(__dirname, 'twing-environment.js'),
          },
        },
      ],
      include: path.resolve(__dirname, '..', 'components'),
    });

    return config;
  },

twing-environment.js

const { TwingEnvironment, TwingLoaderRelativeFilesystem } = require('twing');
const { addDrupalExtensions } = require('drupal-twig-extensions/twing');

const twing = new TwingEnvironment(
  new TwingLoaderRelativeFilesystem()
);

addDrupalExtensions(twing);

module.exports = twing;

block.stories.js

import block from './block.twig';
import drupalAttribute from 'drupal-attribute'
import './block.css';
import './block.js';

export default { title: 'Blocks' };

export const Block = (_, { loaded: { component } }) => component;

Block.args = {
  attributes: new drupalAttribute(),
  title_attributes: new drupalAttribute(),
  plugin_id: "Some plugin",
  title_prefix: "",
  title_suffix: "",
  label: "I'm a block!",
  content: "Lorem ipsum dolor sit amet.",
  configuration: {
    provider: "Some module"
  }
}

Block.render = async args => {
  return await block({
    ...Block.args
  })
}

block.twig (identical to block.html.twig in drupal)

{%
  set classes = [
  'block',
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

output is:

<div>
      <h2>I'm a block!</h2>
    
      Lorem ipsum dolor sit amet.
  </div>

If I change how I create the attributes in Block.args, to use Attribute from import Attribute from 'drupal-twig-extensions/twing' instead of drupalAttributes, I get a constructor error. Without the constructor, nothing happens... I feel like the solution's right there, but I'm missing something obvious. Any pointers or existing documentation I've missed would be greatly appreciated.

Block.args = {
  attributes: new Attribute(),
  title_attributes: new Attribute(),

Block.args = {
  attributes: Attribute,
  title_attributes: Attribute,

[tjheffner]

for anyone looking later, here is a way to add drupal attribute support: https://github.com/MichaelAllenWarner/dte-storybook/tree/drupal-attribute