search

emulsify-ds / emulsify-twig-extensions

Twig.js BEM and Add Attributes Extensions
2 stars 1 forks source link

Consider addAttributes function supporting an attributes variable #2

Closed stevetweeddale closed 4 years ago

stevetweeddale commented 4 years ago

Hey hey,

I'm trying Emulsify 2 out on a project for the first time at the moment, and notice that while the add_attributes function on the Drupal side supports the attributes variable that's just 'around', the javascript implementation does not. Which is quite understandable, given there's no attributes variable 'around' in storybook.

But where I've found this a bit tricky is when it comes to handling things like forms, where Drupal is wired up to make heavy heavy use of the attributes object instead of individual variables that can be mapped from Drupal templates -> Storybook templates. So the storybook components end up without all the attributes Drupal normally sets. From what I could see, it looks like at the moment this is handled by copy-pasting static 'example' markup from Drupal into a template to render in Storybook.

So I was thinking it might be nice if the javascript implementation also looked for a attributes variable in the template context (eg. this.context.attributes from within the add_attributes plugin function) and then merged the additional_attributes into that, following the same logic as the PHP implementation. That way, you could pass in an attributes object to populate the storybook stories alongside the other 'normal' data in the yaml files. You could then mock up the components with all the attributes they'd normally have in Drupal, whilst still using the actual templates Drupal will use.

Does that make sense? I've had a brief look and I think it should be possible, though would be largely a rewrite of the function. I could probably have a crack at that but would rather get your input first!

stevetweeddale commented 4 years ago

Hmm, or perhaps even better would be to work on https://github.com/kalamuna/twig-drupal-filters/issues/6, and make that support passing in an attributes object as well.

stevetweeddale commented 4 years ago

Still going down the rabbit hole… I think actually if the goal is to make the templates more cross-compatible with Drupal (in terms of attribute handling) then I'd need to ensure every template has attributes, content_attributes and title_attributes variables available (each being an instance of https://github.com/ericmorand/drupal-attribute). Aside from the create_attribute() function, the attributes object(s) aren't actually an extension to twig, but rather just variables Drupal passes into every template.

What I'm thinking is probably the 'nice' thing to do would be to create a drupal-twig-loader, to either replace or chain with the current one (https://github.com/AmazeeLabs/twig-loader) which could preprocess the variables before rendering to add the attributes, content_attributes and title_attributes objects. Or if data is passed in under those keys, wrapping it in an Attributes object.

However, I'm new to Webpack so writing a loader might be a bit ambitious. As a quick fix, I might just write a little function that I can pass all my variables objects through before calling the twig template functions produced by the loader.

I guess I'd still be interested in any thoughts you might have on this – but otherwise, I'll close this out assuming I'm able to get the Attributes object working. Apologies for the noise!