How to interpolate multiple directives at once?

[electrovir]

I'm looking for a way to clean up my element templates that have lots of directives in them. I'd love to apply all the directives in a single interpolation so I can extract them elsewhere.

• Example with lots of directives:

  const myTemplate = html`<div ${directive1()} ${directive2()} ${directive3()}>content</div>`

• Desired cleaned version:

  const myDirectives = [directive1(), directive2(), directive3()]
  const myTemplate = html`<div ${myDirectives}>content</div>`

Currently the "desired outcome" does not work. Is there a way to make it, or something similar, work?

[augustjk]

Using an array directly won't work as the value in the expression needs to be a directive result. I don't think there's an easy way to combine multiple directives like this. You might do a helper that creates a single directive from other directive classes passed in but that'll be tricky if your directives need to take arguments.

[justinfagnani]

that'll be tricky if your directives need to take arguments

I mean... you could do it by making the wrapper directive take arrays for the wrapped directive.

I'm not sure what this gets you though...

[electrovir]

Good point about creating a wrapper directive. That wouldn't be too hard. Sounds like that might be the way to go?

[beratbayram]

Hey, have you managed to write a wrapper directive? I couldn't wrap my head around the custom directives and would like to simplify this:

import { ref } from 'lit/directives/ref.js';
import { spread } from '@open-wc/lit-helpers';

<button ${spread(stuff)} ${ref(this.ref)}>

[electrovir]

I tried for a few minutes and then gave up X)

[justinfagnani]

Can I ask what the goal here is? Why do you think it's cleaner to put the directives in an array? Are you sharing them?

[electrovir]

I have a lot of directives (sometimes more than a dozen) attached to some elements and all their inputs start to really clutter up the template. Usually when I notice a cluttered template, I'll break it up into separate elements, or save parts of the template into different variables so an element's render function isn't huge. However, I haven't yet figured out a way to extract directives.

[beratbayram]

In our case, we are trying to develop a component library, and there are similarities between different input components. I would like to simplify their directives into one.