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 DropdownSel…

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 ha…

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…

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`<TagChooser @id="list-with-tags" @tags={{@data.chosen}} @onChange={{action @data.onChangeUpdateTagSet}}/> <button onClick={{@data.actionForClick}} label="b…

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:

[image] 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:

[image] 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 DEV: Improve testing and documentation of Render…

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

Development

merefield (Robert) March 6, 2024, 4:50pm 33

FYI This component supports Discourse Bars 🍻 🍸

2 Likes

Topic		Replies	Views
How to render Component inside Widget? Development	3	2135	July 28, 2017
A tour of how the Widget (Virtual DOM) code in Discourse works Development	75	29007	July 10, 2023
How to attach a component to a widget with just markup? Development	0	778	March 9, 2018
Render Component in Widget Development	1	387	June 27, 2023
Rendering Component in decorativeWidget API Development	4	1537	August 26, 2022

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

Related topics