Creating a component that is the “mix” of two components (extending from 2 components)

Question

I'm building a set of components which can have variants in their behavior.

More specific, I have a x-tag component, which can behave as a <span> that simply renders text or an <a> that also renders text and links to another route.

For the "link" part I'm using the link component provided by Ember (which is the link-to ) to not reimplement all the routing logic by myself.

The ideal would be to only have two components:

• x-tag , simple text version that handles the base logic.
• x-tag-link-to , link version which should be a component extending from the link-to and x-tag components.

Since you cannot extend from two components, I moved the logic in the x-tag component into a tag mixin. So the components ended up like this:

• x-tag , compoents that implements the tag mixin.
• x-tag-link-to , compoents that extends the link-to component and also implements the tag mixin.

This solves the problem, but is confusing having the logic in several files, also I have a lot more components like the tag that also have a link version, filling the mixins folder with a lot of mixins which have almost the whole component logic. That just feels wrong , or is this the right approach?

I can provide code examples if needed.

Answer 1

I ended up using mixins, as Gennady Dogaev said in a comment.

The result is this:

• mixins/components/x-tag : has the tag component logic.
• components/x-tag : empty component implementing the mixin.
• components/x-tag-link-to : link-to component extended to implement the mixin.

---

I discarded composition, although it seems the right path, mapping the implementation of the inside components to the containing component would be a nightmare to mantain in the long run.