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:

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

[imagem] 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 d…

Renderizar um componente dentro de um Widget. (Usando componentes select-kit dentro do código do plugin)

Dev

merefield (Robert) 6 Março , 2024 16:50 33

Para sua informação, este componente suporta Discourse Bars 🍻 🍸 (a sidebar framework)

Tópico		Respostas	Vistas
How to render Component inside Widget? Development	3	2198	28 Julho , 2017
A tour of how the Widget (Virtual DOM) code in Discourse works Development	75	29817	10 Julho , 2023
How to attach a component to a widget with just markup? Development	0	802	9 Março , 2018
Render Component in Widget Development	1	415	27 Junho , 2023
Rendering Component in decorativeWidget API Development	4	1600	26 Agosto , 2022

Renderizar um componente dentro de um Widget. (Usando componentes select-kit dentro do código do plugin)

Related topics