Provide a way to extends all widgets by widget users

[xiaohulu]

Enhancement

Now, Dojo widgets only have builtin properties, it meets the common requirements. But, I think widgets users should have some advanced requirement, for example, to extends @dojo/widgets's per-widget to lazy add some feature.

It's something like vue directive, which is a special property, can apply all widgets, but not need to defined in per-widget(Open Closed Principle).

<MyWidget d-xx="{true}"></MyWidget>

d-xx is a dojo directive, but not need to define in MyWidgetProperties.

Dojo can support built-in directives and support custom directives.

widget users not need the rewrite @dojo/widgets‘s widgets, througth Dojo directive, widget users can extends all/part of widgets.

If Dojo support directive, I can easily let all my widgets support editing in visual page editor : ). Maybe can also easily do something like dojo/widgets#1428 .

Dojo directive can be design to a optional feature through dojo/has.

[matt-gadd]

@xiaohulu correct me if i'm wrong but I do not believe Vue directives apply to components; they only apply to html elements. I'm not entirely sure what in your example d-xx would add in terms of behaviour to the widget specifically?

Extending widgets are not really possible without exposing widget implementation detail outward which is very brittle and like you say would not be type safe. We actually deliberately moved away from classes to function based widgets in v6 to stop some undesirable extension behaviours.

In general the easiest way to add behaviour on top of a widget generically, would be to write a factory that wraps said widget. Can you give some examples of your scenario that is not achievable with a factory?

[xiaohulu]

@matt-gadd for example I want to measure @dojo/widgets's button size, not to wrap a div on button, but let button tell us it's size which measure html button size.

I get this issue long time, I now create two button, EditButton used for edit in Visual Editor, Button used for preview.

If there is not good idea to resolve this, I will close this issue.

[matt-gadd]

@xiaohulu I think it might be problematic for an external directive to be able to work on the internal nodes of a widget implementation, especially generically; I presume this is why vue does not expose this for components either. Writing/updating nodes would be difficult as we would then have multiple owners of those underlying nodes. On the other hand, in the scenario you've provided that seems like a read operation which might be more possible.

Would it be possible for you to add to this issue a small reproduction of your current EditButton and Button scenario's? I don't think any of the dojo team has a concrete idea for that kind of behaviour currently but we'd definitely be interested in a proposal 😄.

[matt-gadd]

@xiaohulu is it okay if we can keep this open? we're open to proposals on this 👍 .