Render a component within a Widget. (Using select-kit components within plugin code)

Dev
1

If we successfully define a select-kit component within a plugin we are easily able to use it within a *.hbs template file using its pluginApiIdentifiers however, in order to attach that component within a widget using JS code I am not able to make it work. For instance:

I have:

import DropdownSelectBoxComponent from 'select-kit/components/dropdown-select-box';

export default DropdownSelectBoxComponent.extend({
  pluginApiIdentifiers: ['header-profile-dropdown'],
  ...
  
  autoHighlight() { ... },

  computeContent() {
    ...
    return items;
  },

  mutateValue(id) { ... }
});

Then I can go to any template I want to overwrite and write like:

(taking as an example the discovery template)

...
<div id="list-area">
        {{header-profile-dropdown}}
...

And the snippet above will work flawlessly, BUT how I will include that component into a widget like:

    api.reopenWidget('user-dropdown', {
        html(attrs, state) {
          if (this.site.mobileView) {
            return h('div.profile-dropdown-container', [
              this.attach('header-notifications', attrs),
              --> I NEED ATTACH THE COMPONENT HERE <--
            ]);
          }

          ...
        }
      });

NOTE: much of the code has been skipped to keep the post brief. Feel free to ask for the full code if needed.

PD: I have already tried to describe this issue at How to attach a component to a widget with just markup? but looks like it was a too complicated explanation so I am trying to reduce the information here to make it clear and try to find an answer.

1 « J'aime »
2

I think it was a matter of ask myself the right question: “How to render a component within a widget?” that’s why I updated the topic title. I have found few results already such as: How to render Component inside Widget? I will take a look and post any useful finding if it is needed.

3

Sadly enough looks like it is not possible, simply put we need to find a way to create a widget instead to render what we need to and render a widget within a widget, cause using the connector there are a lot of limitations. Check also: Rendering Component in decorativeWidget API

4

same issue here.
this is really terrible frontend code that uses widgets and ember components in the same page, it’s really hard to revamp and maintain.
can’t understand what’s the logic

5

An example of this is available in Discourse itself:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6#L362

I wasn’t there when widgets were created, but as far as I can tell, it was created for performance reasons at a time where frontend and especially mobile frontend had huge performance issues. And for dev simplicity it was added the possibility to inject components into widgets.

You got to understand that Discourse carries some history and we can’t start from scratch every year.

6 « J'aime »
6

This topic was automatically closed after 32 hours. New replies are no longer allowed.

7

For the record - we have a new system for rendering Ember components within widgets. Details can be found in the commit message here:

Search for RenderGlimmer in the core codebase to find example uses.

5 « J'aime »
9

This is great @David! … but why might I be struggling to import:

import { hbs } from "ember-cli-htmlbars";

Error: Could not find module `ember-cli-htmlbars`

when trying to use this in a Theme Component?

(i’m on latest tests-passed)

2 « J'aime »
10

Ah… it’s very possible that inline-compilation doesn’t (yet) work in theme components. It should work in plugins (as of this week). I’ll see what I can do to add theme component support :eyes:

2 « J'aime »
12

This should get things working:

Will try and get it merged next week

3 « J'aime »
13

Excellent progress. I have a use for this so looking forward to it :+1:t2:

2 « J'aime »
14

That’s merged - let us know how you get on with it @merefield

3 « J'aime »
15

Bingo! Component is now appearing in my TC-based widget, even data is populated correctly, awesome beans! :rocket:

Thanks for the amazing turnaround straddling the UK Bank Holiday!

I know that widgets handle click events, but what if my Component has an event which fires an action, where can I handle that action within a Widget?

2 « J'aime »
16

Oops David, just seen an example, I’m studying it!

1 « J'aime »
17

Yup, that’s probably the best reference. I don’t think we’ve passed actions ‘for real’ yet in core, so shout if you run into any issues.

Looking at that test again, I suspect the actionForComponentToTrigger() function will need an @bind above it to make sure this works correctly within it.

2 « J'aime »
18

OK this works to an extent:

    contents.push(
      new RenderGlimmer(
        this,
        "div.tag-chooser-component",
        hbs`<TagChooser @id="list-with-tags"  @tags={{@data.chosen}} @onChange={{action @data.onChangeUpdateTagSet}}/>
        <button onClick={{@data.actionForClick}} label="blah"/>`,
        {
          chosen: this.chosen,
          onChangeUpdateTagSet: this.onChangeUpdateTagSet,
          actionForClick: this.actionForClick
        }
      ),
    );
    return contents;
  },

  @bind
  onChangeUpdateTagSet(chosen) {
    this.chosen.push(chosen.lastObject);
  },

  @bind
  actionForClick () {
    console.log(this.chosen)
  }
});

onChangeUpdateTagSet is invoked for a change, and actionForClick is invoked on button press.

However, I’m struggling with keeping the Tag Chooser populated.

As soon as I introduce my custom action for onChange, the control fails to keep the selected tags up to date in it’s UI (even though my custom variable contains the correct values).

And if I don’t include my custom action for onChange, the components UI works again, but I can’t populate my set. :thinking:

I tried to add this.scheduleRerender() to the onChangeUpdateTagSet function but this is showing as undefined - clearly not in its scope?

I added a click event to the widget and it does then refresh showing the correct data.

However, it looks like the binding is only going one way so I can’t use the Component to update the external data, only push new data into the Component.

Is there a way to make the binding two way?

19

I suspect you’ll need to use widget ‘state’ rather than accessing this.chosen - widget instances are short-lived and ‘stateless’. You’ll get a new instance on each re-render, which means that this.chosen will be reset.

1 « J'aime »
20

this.state is undefined within the change function, so that makes things a bit tricky?

(I can pass it in, but that overwrites the data coming from the component to tell me what’s been chosen

  onChangeUpdateTagSet: this.onChangeUpdateTagSet(this.state),

)

1 « J'aime »
21

Are you able to share more of the widget code? IIRC for state to work you need to define a buildKey and a defaultState() method.

I’ll see if I can add add an example of this kind of thing in the MountWidget tests :eyes:

1 « J'aime »