The discussion revolves around rendering a Component inside a Widget in Discourse. mrded asks how to achieve this, providing an example of a component (example-component.hbs) and a widget (example-widget.js.es6).
eviltrout recommends rendering a widget within a widget instead of a component but provides an alternative using the connect function of the decorator helper for cases where this is not possible.
However, gdpelican encounters issues with passing widget state to the component using connect. eviltrout clarifies that there is currently no way to achieve this and advises using the model associated with the widget, accessible as the model attribute in the component.
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.
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:
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}}
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.
