How to render Component inside Widget?


(Dmitry Demenchuk) #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.


(Robin Ward) #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:


Rendering Component in decorativeWidget API
Render a component within a Widget. (Using select-kit components within plugin code)
Feature proposal: improved badge granting workflow
(James Kiesel) #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:


(Robin Ward) #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.