How to render Component inside Widget?

Dev
1

Let’s say, I have a component assets/javascripts/discourse/templates/components/example-component.hbs:

<h2>Hello component!</h2>

And I have a widget /assets/javascripts/discourse/widgets/example-widget.js.es6:

import createWidget from 'discourse/widgets/widget';

export default createWidget('example-widget', {
  tagName: 'div',
  html() {
    return 'I want to render {{example-component}} in here.';
  }
});

How can I render a component inside a widget? Thanks.

2

If you have control over what you’re doing, I recommend rendering a widget within a widget rather than a component. However, in the cases where that’s not an option you can use the connect function of the decorator helper:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6#L88-L107

5 Likes
3

I’m having a bit of trouble with the connect method; how would you recommend passing widget state to the component?

Specifically, I want to say

helper.connect({ component: 'emoji-picker', pickerIsActive: this.state.active })

And have that be somewhat equivalent to writing something like this in a component template:

{{emoji-picker active=pickerIsActive}}

@eviltrout ? :heart: :smiley:

1 Like
4

There’s no way to do this right now. The connect feature is meant to be a last resort because there are performance implications of using it. It can use the model though. If the widget you are using has a model associated with it, your component will have it as the model attribute.

2 Likes