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) ... {{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.

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

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?

Oops David, just seen an example, I’m studying it! app/assets/javascripts/discourse/tests/integration/components/widgets/render-glimmer-test.js 3e010bc88 label: "rerender", className: "triggerRerender", action: "dummyAction", }), new RenderGlimmer( this, "div.glimmer-wrapper", hbs` arg1={{@data.arg1}} dynamicArg={{@data.dynamicArg}} `, { ...attrs, actionForComponentToTrigger: this.actionForComponentToTrigger, } ), ]; } dummyAction() {} actionForComponentToTrigger() { DemoWidget.actionTriggered = true;

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.

OK this works to an extent: contents.push( new RenderGlimmer( this, "div.tag-chooser-component", hbs` `, { 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?

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.

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), )

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:

[图片] David Taylor: for state to work you need to define a buildKey and a defaultState() method. Yeah, I have those defined. I’ll tidy and push to a repo. A test demonstrating a form of two way binding with an embedded Component would be extremely helpful! :pray:

[图片] Robert: this.state is undefined within the change function, so that makes things a bit tricky? I was able to access that, and the scheduleRerender() function. Updated tests and docs in https://github.com/discourse/discourse/pull/18145 Just confirming - your @bind is imported from discourse-common/utils/decorators?

在 Widget 中渲染组件。（在插件代码中使用 select-kit 组件）

开发

merefield (Robert) 2024 年3 月 6 日 16:50 33

FYI 该组件支持 Discourse Bars 🍻 🍸 (a sidebar framework)

话题		回复	浏览量
How to render Component inside Widget? Development	3	2245	2017 年7 月 28 日
A tour of how the Widget (Virtual DOM) code in Discourse works Development	75	30364	2023 年7 月 10 日
How to attach a component to a widget with just markup? Development	0	816	2018 年3 月 9 日
Render Component in Widget Development	1	438	2023 年6 月 27 日
Rendering Component in decorativeWidget API Development	4	1686	2022 年8 月 26 日

在 Widget 中渲染组件。（在插件代码中使用 select-kit 组件）

相关话题